Update exports

Only export plugin creator functions for each category.

categories/web/action/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-action-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/blob/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-blob-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/choice/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-choice-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "files": [
     "dist",
     "src"

categories/web/choice/react/src/components/DropdownSelect/DropdownSelect.test.tsx

@@ -14,13 +14,26 @@ import {
   it,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   DropdownSelect,
   DropdownSelectDerivedElement,
+  dropdownSelectPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('dropdownSelectPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    dropdownSelectPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('DropdownSelect', () => {
   afterEach(() => {
     cleanup();

categories/web/choice/react/src/components/DropdownSelect/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
 import clsx from 'clsx';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link DropdownSelect} component.
@@ -43,7 +43,7 @@ export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelect
   hiddenLabel?: boolean,
 }
 
-export const dropdownSelectPlugin = plugin(({ addComponents }) => {
+export const dropdownSelectPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.dropdown-select': {
       '& optgroup': {
@@ -63,7 +63,7 @@ export const dropdownSelectPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from a dropdown.

categories/web/choice/react/src/components/MenuSelect/MenuSelect.test.tsx

@@ -14,13 +14,26 @@ import {
   it,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   MenuSelect,
   MenuSelectDerivedElement,
+  menuSelectPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('menuSelectPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    menuSelectPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('MenuSelect', () => {
   afterEach(() => {
     cleanup();

categories/web/choice/react/src/components/MenuSelect/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link MenuSelect} component.
@@ -51,7 +51,7 @@ export interface MenuSelectProps extends Omit<React.HTMLProps<MenuSelectDerivedE
   startingHeight?: number | string,
 }
 
-export const menuSelectPlugin = plugin(({ addComponents }) => {
+export const menuSelectPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.menu-select': {
       '& optgroup': {
@@ -71,7 +71,7 @@ export const menuSelectPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from a menu.

categories/web/choice/react/src/components/RadioButton/RadioButton.test.tsx

@@ -14,13 +14,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   RadioButton,
   RadioButtonDerivedElement,
+  radioButtonPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('radioButtonPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    radioButtonPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('RadioButton', () => {
   afterEach(() => {
     cleanup();

categories/web/choice/react/src/components/RadioButton/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link RadioButton} component.
@@ -39,7 +39,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<RadioBu
   variant?: Button.Variant;
 }
 
-export const radioButtonPlugin = plugin(({ addComponents }) => {
+export const radioButtonPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.radio-button': {
       '& + label > :first-child > :first-child': {
@@ -50,7 +50,7 @@ export const radioButtonPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from an array of choices grouped by name.

categories/web/choice/react/src/components/RadioTickBox/RadioTickBox.test.tsx

@@ -13,13 +13,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   RadioTickBox,
   RadioTickBoxDerivedElement,
+  radioTickBoxPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('radioTickBoxPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    radioTickBoxPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('RadioTickBox', () => {
   afterEach(() => {
     cleanup();

categories/web/choice/react/src/components/RadioTickBox/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link RadioTickBox} component.
@@ -22,7 +22,7 @@ export interface RadioTickBoxProps extends Omit<React.InputHTMLAttributes<RadioT
   subtext?: React.ReactNode;
 }
 
-export const radioTickBoxPlugin = plugin(({ addComponents }) => {
+export const radioTickBoxPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.radio-tick-box': {
       '& + label + label > :first-child > :first-child': {
@@ -33,7 +33,7 @@ export const radioTickBoxPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from an array of choices grouped by name.

categories/web/color/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-color-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/color/react/src/components/ColorPicker/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link ColorPicker} component.
@@ -15,7 +15,7 @@ export interface ColorPickerProps extends Omit<React.HTMLProps<ColorPickerDerive
   size?: 'small' | 'medium' | 'large';
 }
 
-export const colorPickerPlugin = plugin(({ addComponents }) => {
+export const colorPickerPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.color-picker': {
       '&::-webkit-color-swatch-wrapper': {
@@ -29,7 +29,7 @@ export const colorPickerPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for picking a color.

categories/web/formatted/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-formatted-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/freeform/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-freeform-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/information/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-information-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/multichoice/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-multichoice-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.test.tsx

@@ -14,13 +14,26 @@ import {
   it,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   MenuMultiSelect,
   MenuMultiSelectDerivedElement,
+  menuMultiSelectPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('menuMultiSelectPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    menuMultiSelectPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('MenuMultiSelect', () => {
   afterEach(() => {
     cleanup();

categories/web/multichoice/react/src/components/MenuMultiSelect/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -51,7 +51,7 @@ export interface MenuMultiSelectProps extends Omit<React.HTMLProps<MenuMultiSele
   startingHeight?: number | string,
 }
 
-export const menuMultiSelectPlugin = plugin(({ addComponents, }) => {
+export const menuMultiSelectPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.menu-multi-select': {
       '& optgroup': {
@@ -71,7 +71,7 @@ export const menuMultiSelectPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting textual values.

categories/web/multichoice/react/src/components/TagInput/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { TagsInput } from './internal';
 import clsx from 'clsx';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-utils';
 import { TextControl } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
 
 export const AVAILABLE_TAG_INPUT_SEPARATORS = ['comma', 'newline', 'semicolon'] as const;
 
@@ -92,7 +92,7 @@ export interface TagInputProps extends Omit<React.HTMLProps<TagInputDerivedEleme
   valueSeparator?: TagInputSeparator,
 }
 
-export const tagInputPlugin = plugin(({ addComponents }) => {
+export const tagInputPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.tag-input': {
       '&[data-size] label + * + div': {
@@ -207,7 +207,7 @@ export const tagInputPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting textual values.

categories/web/multichoice/react/src/components/ToggleButton/ToggleButton.test.tsx

@@ -14,13 +14,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   ToggleButton,
   ToggleButtonDerivedElement,
+  toggleButtonPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('toggleButtonPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    toggleButtonPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('ToggleButton', () => {
   afterEach(() => {
     cleanup();

categories/web/multichoice/react/src/components/ToggleButton/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -43,7 +43,7 @@ export interface ToggleButtonProps extends Omit<React.InputHTMLAttributes<Toggle
   indeterminate?: boolean;
 }
 
-export const toggleButtonPlugin = plugin(({ addComponents, }) => {
+export const toggleButtonPlugin: PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.toggle-button': {
       '& + label > :first-child > :first-child': {
@@ -60,7 +60,7 @@ export const toggleButtonPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for toggling a Boolean value.

categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.test.tsx

@@ -13,13 +13,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   ToggleSwitch,
   ToggleSwitchDerivedElement,
+  toggleSwitchPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('toggleSwitchPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    toggleSwitchPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('ToggleSwitch', () => {
   afterEach(() => {
     cleanup();

categories/web/multichoice/react/src/components/ToggleSwitch/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -34,7 +34,7 @@ export interface ToggleSwitchProps extends Omit<React.InputHTMLAttributes<Toggle
   uncheckedLabel?: React.ReactNode;
 }
 
-export const toggleSwitchPlugin = plugin(({ addComponents }) => {
+export const toggleSwitchPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.toggle-switch': {
       '& + label + label + label > :first-child': {
@@ -153,7 +153,7 @@ export const toggleSwitchPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for toggling a Boolean value in an appearance of a toggle switch.

categories/web/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.test.tsx

@@ -13,13 +13,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   ToggleTickBox,
   ToggleTickBoxDerivedElement,
+  toggleTickBoxPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('toggleTickBoxPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    toggleTickBoxPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('ToggleTickBox', () => {
   afterEach(() => {
     cleanup();

categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -26,7 +26,7 @@ export interface ToggleTickBoxProps extends Omit<React.InputHTMLAttributes<Toggl
   indeterminate?: boolean;
 }
 
-export const toggleTickBoxPlugin = plugin(({ addComponents, }) => {
+export const toggleTickBoxPlugin: PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.toggle-tick-box': {
       '& + label + label > :first-child > :first-child': {
@@ -43,7 +43,7 @@ export const toggleTickBoxPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for toggling a Boolean value with the appearance of a tick box.

categories/web/navigation/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-navigation-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/number/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-number-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/number/react/src/components/NumberSpinner/NumberSpinner.test.tsx

@@ -14,13 +14,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   NumberSpinner,
   NumberSpinnerDerivedElement,
+  numberSpinnerPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('numberSpinnerPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    numberSpinnerPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('NumberSpinner', () => {
   afterEach(() => {
     cleanup();

categories/web/number/react/src/components/NumberSpinner/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useBrowser, useClientSide, useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -59,7 +59,7 @@ export interface NumberSpinnerProps extends Omit<React.HTMLProps<NumberSpinnerDe
   initialStepDelay?: number,
 }
 
-export const numberSpinnerPlugin = plugin(({ addComponents, }) => {
+export const numberSpinnerPlugin: PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.number-spinner': {
       '&[data-browser="chrome"] > input::-webkit-inner-spin-button': {
@@ -80,7 +80,7 @@ export const numberSpinnerPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting discrete numeric values.

categories/web/number/react/src/components/Slider/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useBrowser } from '@modal-sh/react-utils';
 
 const filterOptions = (children: React.ReactNode): React.ReactNode => {
@@ -66,7 +66,7 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ty
   length?: React.CSSProperties['width'];
 }
 
-export const sliderPlugin = plugin(({ addComponents }) => {
+export const sliderPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.slider': {
       '& > input': {
@@ -226,7 +226,7 @@ export const sliderPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting continuous numeric values.

categories/web/temporal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-temporal-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"

categories/web/temporal/react/src/components/DateDropdown/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -47,7 +47,7 @@ export interface DateDropdownProps extends Omit<React.HTMLProps<DateDropdownDeri
   length?: number,
 }
 
-export const dateDropdownPlugin = plugin(({ addComponents }) => {
+export const dateDropdownPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.date-dropdown': {
       '& > input::-webkit-calendar-picker-indicator': {
@@ -71,7 +71,7 @@ export const dateDropdownPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting date values.

categories/web/temporal/react/src/components/TimeSpinner/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -65,7 +65,7 @@ export interface TimeSpinnerProps extends Omit<React.HTMLProps<TimeSpinnerDerive
   step?: Step | string,
 }
 
-export const timeSpinnerPlugin = plugin(({ addComponents }) => {
+export const timeSpinnerPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.time-spinner': {
       '& > input::-webkit-calendar-picker-indicator': {
@@ -89,7 +89,7 @@ export const timeSpinnerPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting time values.

storybook/react/tailwind.config.ts

@@ -1,5 +1,6 @@
 import {Config} from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
+import plugin from 'tailwindcss/plugin';
 import {
 	radioButtonPlugin,
 	menuSelectPlugin,
@@ -31,6 +32,7 @@ const config: Config = {
 		'./.storybook/**/*.html',
 	],
 	theme: {
+		// TODO put into a tesseract plugin
 		fontFamily: {
 			sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
 			headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
@@ -98,20 +100,20 @@ const config: Config = {
 		},
 	},
 	plugins: [
-		radioButtonPlugin,
-		menuSelectPlugin,
-		radioTickBoxPlugin,
-		dropdownSelectPlugin,
-		colorPickerPlugin,
-		menuMultiSelectPlugin,
-		tagInputPlugin,
-		toggleButtonPlugin,
-		toggleSwitchPlugin,
-		toggleTickBoxPlugin,
-		numberSpinnerPlugin,
-		sliderPlugin,
-		dateDropdownPlugin,
-		timeSpinnerPlugin,
+		plugin(radioButtonPlugin),
+		plugin(menuSelectPlugin),
+		plugin(radioTickBoxPlugin),
+		plugin(dropdownSelectPlugin),
+		plugin(colorPickerPlugin),
+		plugin(menuMultiSelectPlugin),
+		plugin(tagInputPlugin),
+		plugin(toggleButtonPlugin),
+		plugin(toggleSwitchPlugin),
+		plugin(toggleTickBoxPlugin),
+		plugin(numberSpinnerPlugin),
+		plugin(sliderPlugin),
+		plugin(dateDropdownPlugin),
+		plugin(timeSpinnerPlugin),
 	],
 };