Extract clsx to web-base

Put common utility functions to web-base for any category to import.

base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-base",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "files": [
     "dist",
     "src"
@@ -63,5 +63,10 @@
   },
   "typesVersions": {
     "*": {}
+  },
+  "dependencies": {
+    "clsx": "^1.2.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3"
   }
 }

base/src/index.ts

@@ -1,2 +1,4 @@
 export * as Button from './button';
 export * as TextControl from './text-control';
+
+export * as tailwind from './tailwind';

base/src/tailwind.ts

@@ -0,0 +1,73 @@
+import { clsx } from 'clsx';
+//import { twMerge } from 'tailwind-merge';
+import plugin from 'tailwindcss/plugin';
+export type { PluginCreator } from 'tailwindcss/types/config';
+
+export const tw = (...args: Parameters<typeof clsx>) => clsx(...args);
+
+export const basePlugin = plugin(
+	({ addUtilities, matchUtilities, theme }) => {
+		matchUtilities(
+			{
+				font: (value) => ({
+					tabSize: value,
+				}),
+			},
+			{
+				values: theme('fontStretch'),
+			},
+		);
+
+		addUtilities({
+			'.linejoin-round': {
+				'stroke-linejoin': 'round',
+			},
+			'.linecap-round': {
+				'stroke-linecap': 'round',
+			},
+		});
+	},
+	{
+		theme: {
+			extend: {
+				colors: {
+					'current': 'currentcolor',
+					'inherit': 'inherit',
+					'transparent': 'transparent',
+				},
+				fontFamily: {
+					inherit: ['inherit'],
+				},
+				fontStretch: {
+					'condensed': 'condensed',
+					'semi-condensed': 'semi-condensed',
+					'expanded': 'expanded',
+					'semi-expanded': 'semi-expanded',
+					'inherit': 'inherit',
+				},
+				borderRadius: {
+					inherit: 'inherit',
+				},
+				minWidth: {
+					6: '1.5rem',
+					10: '2.5rem',
+					12: '3rem',
+					16: '4rem',
+					48: '12rem',
+					64: '16rem',
+				},
+				minHeight: {
+					6: '1.5rem',
+					10: '2.5rem',
+					12: '3rem',
+					16: '4rem',
+					32: '8rem',
+					64: '16rem',
+				},
+				strokeWidth: {
+					3: '3',
+				},
+			},
+		},
+	},
+);

categories/web/action/react/package.json

@@ -62,8 +62,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/action/react/src/components/ActionButton/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { Button } from '@tesseract-design/web-base';
+import { Button, tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const ActionButtonDerivedElementComponent = 'button' as const;
 
@@ -85,7 +86,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
     data-testid="button"
     type={type}
     ref={forwardedRef}
-    className={clsx(
+    className={tw(
       'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none',
       'focus:outline-0 focus:ring-4',
       'active:ring-tertiary/50',
@@ -115,7 +116,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
   >
     <span
 			data-testid="childrenParent"
-      className={clsx(
+      className={tw(
 				'flex-auto min-w-0 flex items-center gap-2',
 				iconAfterChildren ? 'flex-row-reverse' : 'flex-row',
 			)}
@@ -129,7 +130,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
 			)}
 			{(children || subtext) && (
 				<span
-					className={clsx(
+					className={tw(
 						'min-w-0 flex-auto',
 						{
 							'text-left': compact || menuItem,
@@ -139,7 +140,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
 				>
 					{children && (
 						<span
-							className={clsx(
+							className={tw(
 								'block uppercase font-bold w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded h-[1.1em]',
 							)}
 							data-testid="children"

categories/web/blob/react/package.json

@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
-    "clsx": "^1.2.1"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/blob/react/src/components/FileSelectBox/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { tailwind } from '@tesseract-design/web-base'
 import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-utils';
-import clsx from 'clsx';
+
+const { tw } = tailwind;
 
 const FileSelectBoxDefaultPreviewComponentDerivedElementComponent = 'div' as const;
 
@@ -46,7 +48,7 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
 }, forwardedRef) => (
   <FileSelectBoxDefaultPreviewComponentDerivedElementComponent
     data-enhanced={enhanced}
-    className={clsx({
+    className={tw({
       'opacity-50': disabled,
     })}
     ref={forwardedRef}
@@ -153,6 +155,9 @@ export interface FileSelectBoxProps<
    * Clear label.
    */
   clearLabel?: string,
+	/**
+	 * Should the component resize vertically?
+	 */
 	resize?: boolean,
 }
 
@@ -391,7 +396,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 
   return (
     <FileSelectBoxRootElementComponent
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 group file-select-box',
         'focus-within:ring-4',
         block && 'flex w-full',
@@ -405,7 +410,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
       style={style}
     >
 			<div
-				className={clsx(
+				className={tw(
 					'w-full overflow-hidden min-h-16 relative pt-4 min-h-16 rounded-inherit',
 					{
 						'h-4': clientSide,
@@ -420,7 +425,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 						data-testid="label"
 						id={labelId}
 						htmlFor={id}
-						className={clsx(
+						className={tw(
 							'absolute z-[1] w-full top-0.5 left-0 pointer-events-none select-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none bg-negative',
 							{
 								'sr-only': hiddenLabel,
@@ -437,7 +442,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 						type="button"
 						disabled={disabled}
 						tabIndex={-1}
-						className={clsx(
+						className={tw(
 							'flex items-center focus:outline-0 justify-center absolute top-0 left-0 w-full h-full cursor-pointer select-none',
 							(fileList?.length ?? 0) > 0 && 'opacity-0',
 						)}
@@ -457,11 +462,11 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 					onBlur={handleBlur}
 					onKeyDown={clientSide ? handleKeyDown : undefined}
 					onKeyUp={clientSide ? doSetFileList : undefined}
-					className={clsx(
-						'peer box-border focus:outline-0 px-4 file:cursor-pointer disabled:file:cursor-pointer block cursor-pointer disabled:cursor-not-allowed file:bg-transparent file:text-primary file:block file:font-bold file:font-semi-expanded file:uppercase file:p-0 file:border-0 group-focus-within:file:text-secondary',
+					className={tw(
+						'peer box-border focus:outline-0 file:cursor-pointer disabled:file:cursor-pointer block cursor-pointer disabled:cursor-not-allowed file:bg-transparent file:text-primary file:block file:font-bold file:font-semi-expanded file:uppercase file:p-0 file:border-0 group-focus-within:file:text-secondary',
 						{
 							'sr-only': clientSide,
-							'h-full w-full': !clientSide,
+							'h-full w-full px-4': !clientSide,
 						},
 					)}
 					onChange={clientSide ? handleFileChange : onChange}
@@ -550,7 +555,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 										onMouseDown={handleReselectMouseDown}
 										onMouseUp={handleReselectMouseUp}
 										tabIndex={-1}
-										className={clsx(
+										className={tw(
 											'flex w-full h-full focus:outline-0 bg-negative text-primary cursor-pointer items-center justify-center leading-none gap-4 select-none',
 											{
 												'group-focus-within:text-secondary group-focus-within:active:text-tertiary': !aboutToSelect,
@@ -575,7 +580,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
 										onMouseDown={handleDeleteMouseDown}
 										onMouseUp={doSetFileList}
 										tabIndex={-1}
-										className={clsx(
+										className={tw(
 											'flex w-full h-full bg-negative text-primary disabled:text-primary items-center justify-center leading-none gap-4 select-none focus:outline-0',
 											{
 												'group-focus-within:text-secondary group-focus-within:active:text-tertiary': !aboutToClear,

categories/web/choice/react/package.json

@@ -63,9 +63,7 @@
   },
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1",
-    "tailwindcss": "3.3.2"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
-import clsx from 'clsx';
+
+const { tw } = tailwind;
 
 const ComboBoxDerivedElementComponent = 'input' as const;
 
@@ -107,7 +108,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
         {children}
       </datalist>
       <div
-        className={clsx(
+        className={tw(
           'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
           'focus-within:ring-4',
           {
@@ -125,7 +126,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
               data-testid="label"
               id={labelId}
               htmlFor={id}
-              className={clsx(
+              className={tw(
                 'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
                 {
                   'sr-only': hiddenLabel,
@@ -157,7 +158,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
           inputMode={resultInputMode}
           list={datalistId}
           data-testid="input"
-          className={clsx(
+          className={tw(
             'bg-negative rounded-inherit w-full peer block font-inherit',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -191,7 +192,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
         {hint && (
           <div
             data-testid="hint"
-            className={clsx(
+            className={tw(
               'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
               {
                 'bottom-0 pl-4 pb-1': variant === 'default',
@@ -222,7 +223,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
         {indicator && (
           <div
             data-testid="indicator"
-            className={clsx(
+            className={tw(
               'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
               {
                 'w-10': size === 'small',

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 import { PluginCreator } from 'tailwindcss/types/config';
 
+const { tw } = tailwind;
+
 const DropdownSelectDerivedElementComponent = 'select' as const;
 
 /**
@@ -94,7 +95,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 min-w-48 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -112,7 +113,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
             htmlFor={id}
             data-testid="label"
             id={labelId}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -138,7 +139,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
         aria-labelledby={labelId}
         data-testid="input"
         role="combobox"
-        className={clsx(
+        className={tw(
           'dropdown-select bg-negative rounded-inherit w-full peer block appearance-none cursor-pointer select-none font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -158,7 +159,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -184,7 +185,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
       )}
       <div
         data-testid="indicator"
-        className={clsx(
+        className={tw(
           'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none text-primary peer-focus:text-secondary',
           {
             'w-10': size === 'small',

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 import { PluginCreator } from 'tailwindcss/types/config';
 
+const { tw } = tailwind;
+
 const MenuSelectDerivedElementComponent = 'select' as const;
 
 /**
@@ -102,7 +103,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -119,7 +120,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
             data-testid="label"
             htmlFor={id}
             id={labelId}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -151,7 +152,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
         style={{
           height: startingHeight,
         }}
-        className={clsx(
+        className={tw(
           'menu-select bg-negative rounded-inherit w-full peer block overflow-auto cursor-pointer font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -196,7 +197,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -227,7 +228,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
       {indicator && (
         <div
           data-testid="indicator"
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { Button } from '@tesseract-design/web-base';
+import { Button, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 import { PluginCreator } from 'tailwindcss/types/config';
 
+const { tw } = tailwind;
+
 const RadioButtonDerivedElementComponent = 'input' as const;
 
 /**
@@ -94,7 +95,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
         style={style}
         htmlFor={id}
         data-testid="button"
-        className={clsx(
+        className={tw(
           'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer',
           'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
@@ -121,7 +122,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
         )}
       >
         <span
-          className={clsx(
+          className={tw(
             'w-6 h-6 block rounded-full border-2 p-0.5 box-border',
             {
               'border-current': variant !== 'filled',
@@ -130,7 +131,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
           )}
         >
           <span
-            className={clsx(
+            className={tw(
               'w-full h-full rounded-full bg-current',
               {
                 'text-current': variant !== 'filled',
@@ -140,7 +141,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
           />
         </span>
         <span
-          className={clsx(
+          className={tw(
             'contents',
             {
               'text-current': variant !== 'filled',
@@ -149,7 +150,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
           )}
         >
           <span
-            className={clsx(
+            className={tw(
               'flex-auto min-w-0',
             )}
           >

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import { useFallbackId } from '@modal-sh/react-utils';
 import { PluginCreator } from 'tailwindcss/types/config';
 

categories/web/color/react/package.json

@@ -64,10 +64,9 @@
     "access": "public"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
+    "@tesseract-design/web-base": "workspace:*",
     "color": "^4.2.3",
-    "color-convert": "^2.0.1",
-    "tailwindcss": "3.3.2"
+    "color-convert": "^2.0.1"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const ColorPickerDerivedElementComponent = 'input' as const;
 
@@ -19,7 +20,7 @@ export interface ColorPickerProps extends Omit<React.HTMLProps<ColorPickerDerive
   size?: 'small' | 'medium' | 'large';
 }
 
-export const colorPickerPlugin: PluginCreator = ({ addComponents }) => {
+export const colorPickerPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.color-picker': {
       '&::-webkit-color-swatch-wrapper': {
@@ -53,7 +54,7 @@ export const ColorPicker = React.forwardRef<
   forwardedRef,
 ) => (
   <div
-    className={clsx(
+    className={tw(
       'inline-block align-center relative ring-secondary/50 rounded overflow-hidden box-border group has-[:disabled]:opacity-50',
       'rounded focus-within:ring-4 active:ring-tertiary/50',
       {
@@ -71,7 +72,7 @@ export const ColorPicker = React.forwardRef<
     style={style}
   >
     <span
-      className={clsx(
+      className={tw(
         'block w-full',
         {
           'p-[25%]': square,
@@ -81,7 +82,7 @@ export const ColorPicker = React.forwardRef<
     >
       <ColorPickerDerivedElementComponent
         {...etcProps}
-        className={clsx(
+        className={tw(
           'color-picker absolute top-0 left-0 w-full h-full overflow-hidden cursor-pointer disabled:cursor-not-allowed',
           'focus:outline-0',
         )}
@@ -91,7 +92,7 @@ export const ColorPicker = React.forwardRef<
       />
     </span>
     <span
-      className={clsx(
+      className={tw(
         'border-y-4 border-l-4 border-r-2 absolute top-0 left-0 h-full pointer-events-none border-[#000000]',
         {
           'w-1/2': square,
@@ -100,7 +101,7 @@ export const ColorPicker = React.forwardRef<
       )}
     />
     <span
-      className={clsx(
+      className={tw(
         'absolute flex items-center justify-center top-0 right-0 h-full pointer-events-none bg-negative text-primary group-has-[:disabled]:text-primary group-active:text-tertiary group-focus-within:text-secondary',
         {
           'w-1/2': square,

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Color from 'color';
 import * as convert from 'color-convert';
+import { tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const SwatchDerivedElementComponent = 'input' as const;
 
@@ -54,7 +56,7 @@ export const Swatch = React.forwardRef<SwatchDerivedElement, SwatchProps>(({
 
   return (
     <span
-      className={clsx(
+      className={tw(
         'inline-block align-middle',
         className,
       )}
@@ -71,7 +73,7 @@ export const Swatch = React.forwardRef<SwatchDerivedElement, SwatchProps>(({
         onSelect={copyColor}
       />
       <label
-        className={clsx(
+        className={tw(
           'relative rounded ring-secondary/50 whitespace-nowrap inline-block align-top leading-none cursor-pointer', // todo eyedropper cursor
           'peer-focus:outline-0 peer-focus:ring-4',
           'peer-active:ring-tertiary/50',

categories/web/formatted/react/package.json

@@ -64,7 +64,6 @@
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
     "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1",
     "react-phone-number-input": "^3.3.0"
   },
   "types": "./dist/types/index.d.ts",

categories/web/formatted/react/src/components/EmailInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const EmailInputDerivedElementComponent = 'input' as const;
 
 /**
@@ -92,7 +93,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
 
     return (
       <div
-        className={clsx(
+        className={tw(
           'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
           'focus-within:ring-4',
           {
@@ -109,7 +110,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
               data-testid="label"
               id={labelId}
               htmlFor={id}
-              className={clsx(
+              className={tw(
                 'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
                 {
                   'sr-only': hiddenLabel,
@@ -138,7 +139,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
           data-testid="input"
           autoComplete={autoComplete ? 'email' : undefined}
           pattern={pattern}
-          className={clsx(
+          className={tw(
             'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
             'focus:outline-0',
             'disabled:cursor-not-allowed',
@@ -156,7 +157,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
         {hint && (
           <div
             data-testid="hint"
-            className={clsx(
+            className={tw(
               'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
               {
                 'bottom-0 pl-4 pb-1': variant === 'default',
@@ -182,7 +183,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
         )}
         <div
           data-testid="indicator"
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none text-primary group-focus-within:text-secondary',
             {
               'w-10': size === 'small',

categories/web/formatted/react/src/components/PatternTextInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const PatternTextInputDerivedElementComponent = 'input' as const;
 
 /**
@@ -102,7 +103,7 @@ export const PatternTextInput = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -120,7 +121,7 @@ export const PatternTextInput = React.forwardRef<
             data-testid="label"
             htmlFor={id}
             id={labelId}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -151,7 +152,7 @@ export const PatternTextInput = React.forwardRef<
         type={type}
         inputMode={resultInputMode}
         data-testid="input"
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -185,7 +186,7 @@ export const PatternTextInput = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -216,7 +217,7 @@ export const PatternTextInput = React.forwardRef<
       {indicator && (
         <div
           data-testid="indicator"
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',

categories/web/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-utils';
 import PhoneInput, { Country, Value } from 'react-phone-number-input/input';
-import clsx from 'clsx';
+
+const { tw } = tailwind;
 
 const PhoneNumberInputDerivedElementComponent = 'input' as const;
 
@@ -105,7 +106,7 @@ export const PhoneNumberInput = React.forwardRef<
     transformChangeHandlerArgs: (v) => (v ?? '') as unknown as Value,
   });
 
-  const commonInputStyles = clsx(
+  const commonInputStyles = tw(
     'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
     'focus:outline-0',
     'disabled:cursor-not-allowed',
@@ -122,7 +123,7 @@ export const PhoneNumberInput = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -140,7 +141,7 @@ export const PhoneNumberInput = React.forwardRef<
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -172,7 +173,7 @@ export const PhoneNumberInput = React.forwardRef<
         name={name}
         data-testid="input"
         tabIndex={clientSide ? -1 : undefined}
-        className={clsx(commonInputStyles, clientSide && 'sr-only')}
+        className={tw(commonInputStyles, clientSide && 'sr-only')}
       />
       {clientSide && (
         <PhoneInput
@@ -187,7 +188,7 @@ export const PhoneNumberInput = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -213,7 +214,7 @@ export const PhoneNumberInput = React.forwardRef<
       )}
       <div
         data-testid="indicator"
-        className={clsx(
+        className={tw(
           'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none text-primary group-focus-within:text-secondary',
           {
             'w-10': size === 'small',

categories/web/formatted/react/src/components/UrlInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const UrlInputDerivedElementComponent = 'input' as const;
 
 /**
@@ -75,7 +76,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -93,7 +94,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
             data-testid="label"
             htmlFor={id}
             id={labelId}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -120,7 +121,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
         aria-labelledby={labelId}
         type="url"
         data-testid="input"
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
           'focus:outline-0',
           'disabled:cursor-not-allowed',
@@ -138,7 +139,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -164,7 +165,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
       )}
       <div
         data-testid="indicator"
-        className={clsx(
+        className={tw(
           'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none text-primary group-focus-within:text-secondary',
           {
             'w-10': size === 'small',

categories/web/freeform/react/package.json

@@ -63,8 +63,7 @@
   },
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/freeform/react/src/components/MaskedTextInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useClientSide, useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const MaskedTextInputDerivedElementComponent = 'input' as const;
 
 /**
@@ -156,7 +157,7 @@ export const MaskedTextInput = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -174,7 +175,7 @@ export const MaskedTextInput = React.forwardRef<
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -208,7 +209,7 @@ export const MaskedTextInput = React.forwardRef<
         autoComplete={autoComplete ?? 'off'}
         onKeyUp={enhanced ? handleKeyUp : undefined}
         onKeyDown={enhanced ? handleKeyDown : undefined}
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -242,7 +243,7 @@ export const MaskedTextInput = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -276,7 +277,7 @@ export const MaskedTextInput = React.forwardRef<
           type="button"
           data-testid="indicator"
           tabIndex={-1}
-          className={clsx(
+          className={tw(
             'text-center z-[1] focus:outline-0 flex items-center justify-center aspect-square absolute bottom-0 right-0 select-none',
             {
               'text-primary group-focus-within:text-secondary group-focus-within:active:text-tertiary': !visibleViaKey,

categories/web/freeform/react/src/components/MultilineTextInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const MultilineTextInputDerivedElementComponent = 'textarea' as const;
 
 /**
@@ -80,7 +81,7 @@ export const MultilineTextInput = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -98,7 +99,7 @@ export const MultilineTextInput = React.forwardRef<
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -129,7 +130,7 @@ export const MultilineTextInput = React.forwardRef<
         style={{
           height: 0,
         }}
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -174,7 +175,7 @@ export const MultilineTextInput = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -205,7 +206,7 @@ export const MultilineTextInput = React.forwardRef<
       {indicator && (
         <div
           data-testid="indicator"
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',

categories/web/freeform/react/src/components/TextInput/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const TextInputDerivedElementComponent = 'input' as const;
 
 /**
@@ -99,7 +100,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -117,7 +118,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
             data-testid="label"
             htmlFor={id}
             id={labelId}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -148,7 +149,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
         type={type}
         inputMode={resultInputMode}
         data-testid="input"
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -182,7 +183,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -213,7 +214,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
       {indicator && (
         <div
           data-testid="indicator"
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',

categories/web/information/react/package.json

@@ -61,12 +61,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "clsx": "^1.2.1"
-  },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",
   "module": "./dist/esm/production/index.js",
+  "dependencies": {
+    "@tesseract-design/web-base": "workspace:*"
+  },
   "exports": {
     ".": {
       "development": {

categories/web/information/react/src/components/Badge/index.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import clsx from 'clsx';
+import { tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const BadgeDerivedElementComponent = 'span' as const;
 
@@ -36,7 +38,7 @@ export const Badge = React.forwardRef<BadgeDerivedElement, BadgeProps>((
   <BadgeDerivedElementComponent
     {...etcProps}
     ref={forwardedRef}
-    className={clsx(
+    className={tw(
       'relative h-6 min-w-6 inline-flex align-middle items-center justify-center text-xs font-bold overflow-hidden font-semi-expanded',
       'before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-current before:opacity-25',
       {

categories/web/information/react/src/components/KeyValueTable/index.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import clsx from 'clsx';
+import { tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const KeyValueTableDerivedElementComponent = 'dl' as const;
 
@@ -63,7 +65,7 @@ export const KeyValueTable = React.forwardRef<KeyValueTableDerivedElement, KeyVa
 ) => (
   <KeyValueTableDerivedElementComponent
     {...etcProps}
-    className={clsx(
+    className={tw(
       'grid gap-y-1 grid-cols-3',
       className,
     )}
@@ -73,16 +75,16 @@ export const KeyValueTable = React.forwardRef<KeyValueTableDerivedElement, KeyVa
     {properties.map((property) => typeof property === 'object' && property && (
       <KeyValueTablePropertyElementComponent
         key={property.key}
-        className={clsx('contents', property.className)}
+        className={tw('contents', property.className)}
       >
         <KeyValueTableKeyElementComponent
-          className={clsx(hiddenKeys && 'sr-only', 'pr-4')}
+          className={tw(hiddenKeys && 'sr-only', 'pr-4')}
         >
           {property.key}
         </KeyValueTableKeyElementComponent>
         <KeyValueTableValueElementComponent
           {...(property.valueProps ?? {})}
-          className={clsx(
+          className={tw(
             'm-0 text-ellipsis overflow-hidden',
             !hiddenKeys && 'col-span-2',
             hiddenKeys && 'col-span-3',

categories/web/multichoice/react/package.json

@@ -63,9 +63,7 @@
   },
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1",
-    "tailwindcss": "3.3.2"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const MenuMultiSelectDerivedElementComponent = 'select' as const;
 
 /**
@@ -55,7 +55,7 @@ export interface MenuMultiSelectProps extends Omit<React.HTMLProps<MenuMultiSele
   startingHeight?: number | string,
 }
 
-export const menuMultiSelectPlugin: PluginCreator = ({ addComponents }) => {
+export const menuMultiSelectPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.menu-multi-select': {
       '& optgroup': {
@@ -108,7 +108,7 @@ export const MenuMultiSelect = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'menu-multi-select relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -126,7 +126,7 @@ export const MenuMultiSelect = React.forwardRef<
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -159,7 +159,7 @@ export const MenuMultiSelect = React.forwardRef<
         style={{
           height: startingHeight,
         }}
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block overflow-auto font-inherit cursor-pointer',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -204,7 +204,7 @@ export const MenuMultiSelect = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -235,7 +235,7 @@ export const MenuMultiSelect = React.forwardRef<
       {indicator && (
         <div
           data-testid="indicator"
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',

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 { TextControl, tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 export const AVAILABLE_TAG_INPUT_SEPARATORS = ['comma', 'newline', 'semicolon'] as const;
 
@@ -96,7 +96,7 @@ export interface TagInputProps extends Omit<React.HTMLProps<TagInputDerivedEleme
   valueSeparator?: TagInputSeparator,
 }
 
-export const tagInputPlugin: PluginCreator = ({ addComponents }) => {
+export const tagInputPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.tag-input': {
       '&[data-size] label + * + div': {
@@ -360,7 +360,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
     <div
       data-size={size}
       data-variant={variant}
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -385,7 +385,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -423,7 +423,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
           height: 0,
         }}
         tabIndex={clientSide ? -1 : undefined}
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -483,7 +483,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -513,7 +513,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
       )}
       {indicator && (
         <div
-          className={clsx(
+          className={tw(
             'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { Button } from '@tesseract-design/web-base';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { Button, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const ToggleButtonDerivedElementComponent = 'input' as const;
 
 /**
@@ -47,7 +47,7 @@ export interface ToggleButtonProps extends Omit<React.InputHTMLAttributes<Toggle
   indeterminate?: boolean;
 }
 
-export const toggleButtonPlugin: PluginCreator = ({ addComponents, }) => {
+export const toggleButtonPlugin: tailwind.PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.toggle-button': {
       '& + label > :first-child > :first-child': {
@@ -115,7 +115,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
       <label
         data-testid="button"
         htmlFor={id}
-        className={clsx(
+        className={tw(
           'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer',
           'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
@@ -144,7 +144,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
         style={style}
       >
         <span
-          className={clsx(
+          className={tw(
             'w-6 h-6 block rounded border-2 p-0.5 box-border',
             {
               'border-current': variant !== 'filled',
@@ -153,7 +153,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
           )}
         >
           <svg
-            className={clsx(
+            className={tw(
               'w-full h-full fill-none stroke-3 linejoin-round linecap-round',
               {
                 'stroke-negative': variant === 'filled',
@@ -168,7 +168,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
             />
           </svg>
           <svg
-            className={clsx(
+            className={tw(
               'w-full h-full fill-none stroke-3 linejoin-round linecap-round',
               {
                 'stroke-negative': variant === 'filled',
@@ -184,7 +184,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
           </svg>
         </span>
         <span
-          className={clsx(
+          className={tw(
             'contents',
             {
               'text-current': variant !== 'filled',
@@ -193,7 +193,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
           )}
         >
           <span
-            className={clsx(
+            className={tw(
               'flex-auto min-w-0',
             )}
           >

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const ToggleSwitchDerivedElementComponent = 'input' as const;
 
 /**
@@ -38,7 +39,7 @@ export interface ToggleSwitchProps extends Omit<React.InputHTMLAttributes<Toggle
   uncheckedLabel?: React.ReactNode;
 }
 
-export const toggleSwitchPlugin: PluginCreator = ({ addComponents }) => {
+export const toggleSwitchPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.toggle-switch': {
       '& + label + label + label > :first-child': {
@@ -193,7 +194,7 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'gap-x-4 flex-wrap',
         block && 'flex',
         !block && 'inline-flex align-center',
@@ -238,7 +239,7 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
       </label>
       <label
         htmlFor={id}
-        className={clsx(
+        className={tw(
           'order-2 block rounded-full ring-secondary/50 overflow-hidden gap-4 leading-none select-none cursor-pointer',
           'peer-focus/radio:outline-0 peer-focus/radio:ring-4 peer-focus/radio:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
@@ -258,7 +259,7 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
       </label>
       {subtext && (
         <div
-          className={clsx(
+          className={tw(
             'block w-full text-xs order-4',
             !uncheckedLabel && 'pl-16',
             uncheckedLabel && 'pt-2',

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const ToggleTickBoxDerivedElementComponent = 'input' as const;
 
 /**
@@ -30,7 +31,7 @@ export interface ToggleTickBoxProps extends Omit<React.InputHTMLAttributes<Toggl
   indeterminate?: boolean;
 }
 
-export const toggleTickBoxPlugin: PluginCreator = ({ addComponents, }) => {
+export const toggleTickBoxPlugin: tailwind.PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.toggle-tick-box': {
       '& + label + label > :first-child > :first-child': {
@@ -82,7 +83,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'gap-x-4 flex-wrap',
         block && 'flex',
         !block && 'inline-flex align-center',
@@ -110,7 +111,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
       </label>
       <label
         htmlFor={id}
-        className={clsx(
+        className={tw(
           'order-1 block rounded ring-secondary/50 overflow-hidden gap-4 leading-none select-none cursor-pointer',
           'peer-focus/radio:outline-0 peer-focus/radio:ring-4 peer-focus/radio:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
@@ -120,12 +121,12 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
         )}
       >
         <span
-          className={clsx(
+          className={tw(
             'w-6 h-6 block rounded-inherit border-2 p-0.5 box-border border-current',
           )}
         >
           <svg
-            className={clsx(
+            className={tw(
               'w-full h-full fill-none stroke-3 linejoin-round linecap-round stroke-current',
             )}
             viewBox="0 0 24 24"
@@ -136,7 +137,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
             />
           </svg>
           <svg
-            className={clsx(
+            className={tw(
               'w-full h-full fill-none stroke-3 linejoin-round linecap-round stroke-current',
             )}
             viewBox="0 0 24 24"

categories/web/navigation/react/package.json

@@ -62,8 +62,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/navigation/react/src/components/LinkButton/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { Button } from '@tesseract-design/web-base';
+import { Button, tailwind } from '@tesseract-design/web-base';
+
+const { tw } = tailwind;
 
 const LinkButtonDerivedElementComponent = 'a' as const;
 
@@ -118,7 +119,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
       href={disabled ? undefined : href as string}
       type={disabled ? 'button' : undefined}
       ref={forwardedRef}
-      className={clsx(
+      className={tw(
         'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0',
         'focus:outline-0 focus:ring-4',
         'active:ring-tertiary/50',
@@ -150,7 +151,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
     >
       <span
 				data-testid="childrenParent"
-				className={clsx(
+				className={tw(
 					'flex-auto min-w-0 flex items-center gap-2',
 					iconAfterChildren ? 'flex-row-reverse' : 'flex-row',
 				)}
@@ -164,7 +165,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
 				)}
 				{(children || subtext) && (
 					<span
-						className={clsx(
+						className={tw(
 							'min-w-0 flex-auto',
 							{
 								'text-left': compact || menuItem,
@@ -174,7 +175,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
 					>
 						{children && (
 							<span
-								className={clsx(
+								className={tw(
 									'block uppercase font-bold w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded h-[1.1em]',
 								)}
 								data-testid="children"

categories/web/number/react/package.json

@@ -63,9 +63,7 @@
   },
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1",
-    "tailwindcss": "3.3.3"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useBrowser, useClientSide, useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const NumberSpinnerDerivedElementComponent = 'input' as const;
 
 /**
@@ -69,7 +69,7 @@ export interface NumberSpinnerProps extends Omit<React.HTMLProps<NumberSpinnerDe
   initialStepDelay?: number,
 }
 
-export const numberSpinnerPlugin: PluginCreator = ({ addComponents, }) => {
+export const numberSpinnerPlugin: tailwind.PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.number-spinner': {
       '&[data-browser="chrome"] > input::-webkit-inner-spin-button': {
@@ -252,7 +252,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         'number-spinner',
@@ -273,7 +273,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -304,7 +304,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
         type="number"
         data-testid="input"
         onKeyDown={doStepKeyboard}
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block tabular-nums font-inherit relative',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -338,7 +338,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none text-primary',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -370,7 +370,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
         <NumberSpinnerActionElementComponent
           data-testid="indicator"
           type="button"
-          className={clsx(
+          className={tw(
             'text-center z-[1] flex flex-col items-stretch justify-center aspect-square absolute bottom-0 right-0 select-none text-primary group-focus-within:text-secondary',
             {
               'w-10': size === 'small',
@@ -381,7 +381,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
           onMouseDown={doStepMouse}
         >
           <span
-            className={clsx(
+            className={tw(
               'h-0 flex-auto flex justify-center items-end overflow-hidden',
               {
                 'text-tertiary': displayStep === true,
@@ -404,7 +404,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
             /
           </span>
           <span
-            className={clsx(
+            className={tw(
               'h-0 flex-auto flex justify-center items-end overflow-hidden',
               {
                 'text-tertiary': displayStep === false,

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { tailwind } from '@tesseract-design/web-base';
 import { useBrowser } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const filterOptions = (children: React.ReactNode): React.ReactNode => {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.reduce(
@@ -70,7 +71,7 @@ export interface SliderProps extends Omit<React.HTMLProps<SliderDerivedElement>,
   length?: React.CSSProperties['width'];
 }
 
-export const sliderPlugin: PluginCreator = ({ addComponents }) => {
+export const sliderPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.slider': {
       '& > input': {
@@ -438,7 +439,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>((
         </datalist>
       )}
       <div
-        className={clsx(
+        className={tw(
           block && orient !== 'vertical' && 'w-full',
           !block && 'align-middle',
           className,
@@ -465,7 +466,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>((
               max={maxValue}
               type="range"
               list={childrenValues ? tickMarkId : undefined}
-              className={clsx(
+              className={tw(
                 'w-full h-full bg-inherit block text-primary ring-secondary/50 rounded-full',
                 'focus:text-secondary focus:outline-0 focus:ring-4',
                 'active:text-tertiary active:ring-tertiary/50',

categories/web/temporal/react/package.json

@@ -63,9 +63,7 @@
   },
   "dependencies": {
     "@modal-sh/react-utils": "workspace:*",
-    "@tesseract-design/web-base": "workspace:*",
-    "clsx": "^1.2.1",
-    "tailwindcss": "3.3.3"
+    "@tesseract-design/web-base": "workspace:*"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const DateDropdownDerivedElementComponent = 'input';
 
 /**
@@ -51,7 +51,7 @@ export interface DateDropdownProps extends Omit<React.HTMLProps<DateDropdownDeri
   length?: number,
 }
 
-export const dateDropdownPlugin: PluginCreator = ({ addComponents }) => {
+export const dateDropdownPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.date-dropdown': {
       '& > input::-webkit-calendar-picker-indicator': {
@@ -105,7 +105,7 @@ export const DateDropdown = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50 date-dropdown',
         'focus-within:ring-4',
         {
@@ -124,7 +124,7 @@ export const DateDropdown = React.forwardRef<
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -152,7 +152,7 @@ export const DateDropdown = React.forwardRef<
         type="date"
         data-testid="input"
         pattern="\d{4}-\d{2}-\d{2}"
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums cursor-pointer',
           'focus:outline-0',
           'disabled:cursor-not-allowed',
@@ -170,7 +170,7 @@ export const DateDropdown = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -196,7 +196,7 @@ export const DateDropdown = React.forwardRef<
       )}
       <div
         data-testid="indicator"
-        className={clsx(
+        className={tw(
           'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none text-primary group-focus-within:text-secondary',
           {
             'w-10': size === 'small',

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
-import { PluginCreator } from 'tailwindcss/types/config';
+import { TextControl, tailwind } from '@tesseract-design/web-base';
 import { useFallbackId } from '@modal-sh/react-utils';
 
+const { tw } = tailwind;
+
 const TimeSpinnerDerivedElementComponent = 'input';
 
 /**
@@ -69,7 +69,7 @@ export interface TimeSpinnerProps extends Omit<React.HTMLProps<TimeSpinnerDerive
   step?: Step | string,
 }
 
-export const timeSpinnerPlugin: PluginCreator = ({ addComponents }) => {
+export const timeSpinnerPlugin: tailwind.PluginCreator = ({ addComponents }) => {
   addComponents({
     '.time-spinner': {
       '& > input::-webkit-calendar-picker-indicator': {
@@ -127,7 +127,7 @@ export const TimeSpinner = React.forwardRef<
 
   return (
     <div
-      className={clsx(
+      className={tw(
         'time-spinner relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
@@ -146,7 +146,7 @@ export const TimeSpinner = React.forwardRef<
             data-testid="label"
             id={labelId}
             htmlFor={id}
-            className={clsx(
+            className={tw(
               'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
@@ -174,7 +174,7 @@ export const TimeSpinner = React.forwardRef<
         data-testid="input"
         step={displaySeconds && stepValue > 60 ? 1 : stepValue}
         pattern="\d{2}:\d{2}(:\d{2})?"
-        className={clsx(
+        className={tw(
           'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums cursor-pointer',
           'focus:outline-0',
           'disabled:cursor-not-allowed',
@@ -192,7 +192,7 @@ export const TimeSpinner = React.forwardRef<
       {hint && (
         <div
           data-testid="hint"
-          className={clsx(
+          className={tw(
             'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
@@ -217,7 +217,7 @@ export const TimeSpinner = React.forwardRef<
         </div>
       )}
       <div
-        className={clsx(
+        className={tw(
           'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none text-primary group-focus-within:text-secondary',
           {
             'w-10': size === 'small',

pnpm-lock.yaml

@@ -7,6 +7,16 @@ settings:
 importers:
 
   base:
+    dependencies:
+      clsx:
+        specifier: ^1.2.1
+        version: 1.2.1
+      tailwind-merge:
+        specifier: ^1.14.0
+        version: 1.14.0
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.3.3
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -38,9 +48,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -102,9 +109,9 @@ importers:
       '@modal-sh/react-utils':
         specifier: workspace:*
         version: link:../../../../packages/react-utils
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
+      '@tesseract-design/web-base':
+        specifier: workspace:*
+        version: link:../../../../base
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -169,12 +176,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
-      tailwindcss:
-        specifier: 3.3.2
-        version: 3.3.2
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -233,18 +234,15 @@ importers:
 
   categories/web/color/react:
     dependencies:
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
+      '@tesseract-design/web-base':
+        specifier: workspace:*
+        version: link:../../../../base
       color:
         specifier: ^4.2.3
         version: 4.2.3
       color-convert:
         specifier: ^2.0.1
         version: 2.0.1
-      tailwindcss:
-        specifier: 3.3.2
-        version: 3.3.2
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -315,9 +313,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
       react-phone-number-input:
         specifier: ^3.3.0
         version: 3.3.0(react-dom@18.2.0)(react@18.2.0)
@@ -385,9 +380,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -446,9 +438,9 @@ importers:
 
   categories/web/information/react:
     dependencies:
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
+      '@tesseract-design/web-base':
+        specifier: workspace:*
+        version: link:../../../../base
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -513,12 +505,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
-      tailwindcss:
-        specifier: 3.3.2
-        version: 3.3.2
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -580,9 +566,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
     devDependencies:
       '@storybook/react':
         specifier: ^7.4.0
@@ -647,12 +630,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
-      tailwindcss:
-        specifier: 3.3.3
-        version: 3.3.3
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -717,12 +694,6 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../../base
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
-      tailwindcss:
-        specifier: 3.3.3
-        version: 3.3.3
     devDependencies:
       '@storybook/react':
         specifier: ^7.3.2
@@ -3502,6 +3473,18 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
+  /arraybuffer.prototype.slice@1.0.1:
+    resolution: {integrity: sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.0
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      get-intrinsic: 1.2.1
+      is-array-buffer: 3.0.2
+      is-shared-array-buffer: 1.0.2
+    dev: true
+
   /asn1@0.2.6:
     resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
     dependencies:
@@ -4337,6 +4320,51 @@ packages:
       which-typed-array: 1.1.9
     dev: true
 
+  /es-abstract@1.22.1:
+    resolution: {integrity: sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.0
+      arraybuffer.prototype.slice: 1.0.1
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      es-set-tostringtag: 2.0.1
+      es-to-primitive: 1.2.1
+      function.prototype.name: 1.1.5
+      get-intrinsic: 1.2.1
+      get-symbol-description: 1.0.0
+      globalthis: 1.0.3
+      gopd: 1.0.1
+      has: 1.0.3
+      has-property-descriptors: 1.0.0
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      internal-slot: 1.0.5
+      is-array-buffer: 3.0.2
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-typed-array: 1.1.10
+      is-weakref: 1.0.2
+      object-inspect: 1.12.3
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.5.0
+      safe-array-concat: 1.0.0
+      safe-regex-test: 1.0.0
+      string.prototype.trim: 1.2.7
+      string.prototype.trimend: 1.0.6
+      string.prototype.trimstart: 1.0.6
+      typed-array-buffer: 1.0.0
+      typed-array-byte-length: 1.0.0
+      typed-array-byte-offset: 1.0.0
+      typed-array-length: 1.0.4
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.11
+    dev: true
+
   /es-get-iterator@1.1.3:
     resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
     dependencies:
@@ -5458,7 +5486,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-      es-abstract: 1.21.2
+      es-abstract: 1.22.1
       functions-have-names: 1.2.3
     dev: true
 
@@ -7393,18 +7421,6 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: false
 
-  /postcss-import@15.1.0(postcss@8.4.24):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.4.24
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.2
-    dev: false
-
   /postcss-import@15.1.0(postcss@8.4.28):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -7417,16 +7433,6 @@ packages:
       resolve: 1.22.2
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.24):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.24
-    dev: false
-
   /postcss-js@4.0.1(postcss@8.4.28):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -7437,23 +7443,6 @@ packages:
       postcss: 8.4.28
     dev: false
 
-  /postcss-load-config@4.0.1(postcss@8.4.24):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.24
-      yaml: 2.3.1
-    dev: false
-
   /postcss-load-config@4.0.1(postcss@8.4.28):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
@@ -7471,16 +7460,6 @@ packages:
       yaml: 2.3.1
     dev: false
 
-  /postcss-nested@6.0.1(postcss@8.4.24):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.24
-      postcss-selector-parser: 6.0.13
-    dev: false
-
   /postcss-nested@6.0.1(postcss@8.4.28):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
@@ -7509,6 +7488,7 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
 
   /postcss@8.4.28:
     resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==}
@@ -7517,7 +7497,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -7997,6 +7976,16 @@ packages:
       mri: 1.2.0
     dev: false
 
+  /safe-array-concat@1.0.0:
+    resolution: {integrity: sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      has-symbols: 1.0.3
+      isarray: 2.0.5
+    dev: true
+
   /safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
@@ -8223,7 +8212,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-      es-abstract: 1.21.2
+      es-abstract: 1.22.1
     dev: true
 
   /string.prototype.trimend@1.0.6:
@@ -8231,7 +8220,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-      es-abstract: 1.21.2
+      es-abstract: 1.22.1
     dev: true
 
   /string.prototype.trimstart@1.0.6:
@@ -8239,7 +8228,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-      es-abstract: 1.21.2
+      es-abstract: 1.22.1
     dev: true
 
   /string_decoder@1.3.0:
@@ -8349,36 +8338,8 @@ packages:
       tslib: 2.6.0
     dev: true
 
-  /tailwindcss@3.3.2:
-    resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.0
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.19.1
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.24
-      postcss-import: 15.1.0(postcss@8.4.24)
-      postcss-js: 4.0.1(postcss@8.4.24)
-      postcss-load-config: 4.0.1(postcss@8.4.24)
-      postcss-nested: 6.0.1(postcss@8.4.24)
-      postcss-selector-parser: 6.0.13
-      postcss-value-parser: 4.2.0
-      resolve: 1.22.2
-      sucrase: 3.32.0
-    transitivePeerDependencies:
-      - ts-node
+  /tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
     dev: false
 
   /tailwindcss@3.3.3:
@@ -8623,6 +8584,36 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
+  /typed-array-buffer@1.0.0:
+    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      is-typed-array: 1.1.10
+    dev: true
+
+  /typed-array-byte-length@1.0.0:
+    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      has-proto: 1.0.1
+      is-typed-array: 1.1.10
+    dev: true
+
+  /typed-array-byte-offset@1.0.0:
+    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      has-proto: 1.0.1
+      is-typed-array: 1.1.10
+    dev: true
+
   /typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
     dependencies:
@@ -8967,7 +8958,7 @@ packages:
     dependencies:
       '@types/node': 20.4.7
       esbuild: 0.17.19
-      postcss: 8.4.24
+      postcss: 8.4.28
       rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.3
@@ -9217,6 +9208,17 @@ packages:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
     dev: true
 
+  /which-typed-array@1.1.11:
+    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+    dev: true
+
   /which-typed-array@1.1.9:
     resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
     engines: {node: '>= 0.4'}

storybook/react/tailwind.config.ts

@@ -1,6 +1,7 @@
 import {Config} from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
 import plugin from 'tailwindcss/plugin';
+import { tailwind } from '../../base/src';
 import {
 	radioButtonPlugin,
 	menuSelectPlugin,
@@ -37,7 +38,16 @@ const config: Config = {
 			sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
 			headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
 			mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
-			inherit: ['inherit'],
+		},
+		fontSize: {
+			'lg': '1.125em',
+			'xl': '1.25em',
+			'2xl': '1.5em',
+			'3xl': '1.75em',
+			'4xl': '2em',
+			'5xl': '3em',
+			'6xl': '4em',
+			'xxs': '0.625rem',
 		},
 		colors: {
 			'sidebar': 'rgb(var(--color-sidebar)',
@@ -61,46 +71,10 @@ const config: Config = {
 			'code-regexp': 'rgb(var(--color-code-regexp))',
 			'code-url': 'rgb(var(--color-code-url))',
 			'code-global': 'rgb(var(--color-code-global))',
-			'current': 'currentcolor',
-			'inherit': 'inherit',
-			'transparent': 'transparent',
-		},
-		extend: {
-			fontSize: {
-				'lg': '1.125em',
-				'xl': '1.25em',
-				'2xl': '1.5em',
-				'3xl': '1.75em',
-				'4xl': '2em',
-				'5xl': '3em',
-				'6xl': '4em',
-				'xxs': '0.625rem',
-			},
-			borderRadius: {
-				inherit: 'inherit',
-			},
-			minWidth: {
-				6: '1.5rem',
-				10: '2.5rem',
-				12: '3rem',
-				16: '4rem',
-				48: '12rem',
-				64: '16rem',
-			},
-			minHeight: {
-				6: '1.5rem',
-				10: '2.5rem',
-				12: '3rem',
-				16: '4rem',
-				32: '8rem',
-				64: '16rem',
-			},
-			strokeWidth: {
-				3: '3',
-			},
 		},
 	},
 	plugins: [
+		tailwind.basePlugin,
 		plugin(radioButtonPlugin),
 		plugin(menuSelectPlugin),
 		plugin(radioTickBoxPlugin),