Add default indicators

Add indicators to email, phone, url, password, date, and time components.

TODO.md

@@ -66,7 +66,7 @@
 
 # Others
 - [X] Add `select-none` to input labels, etc.
-- [ ] Add indicators to components (select, datetime input etc)
+- [X] Add indicators to components (select, datetime input etc)
 - [ ] Test all components!
 - [ ] Where to put the "click-to-copy" textboxes? Does `Swatch`
   belong to this category?

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

@@ -104,7 +104,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
       </datalist>
       <div
         className={clsx(
-          'relative rounded ring-secondary/50 overflow-hidden',
+          'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
           'focus-within:ring-4',
           {
             'block': block,
@@ -122,7 +122,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
               id={labelId}
               htmlFor={id}
               className={clsx(
-                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+                '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,
                 },
@@ -188,7 +188,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
           <div
             data-testid="hint"
             className={clsx(
-              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+              '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',
                 'top-0.5': variant === 'alternate',
@@ -219,7 +219,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
           <div
             data-testid="indicator"
             className={clsx(
-              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+              'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
               {
                 'w-10': size === 'small',
                 'w-12': size === 'medium',
@@ -233,7 +233,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
         {border && (
           <span
             data-testid="border"
-            className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+            className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
           />
         )}
       </div>

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

@@ -77,6 +77,14 @@ describe('DropdownSelect', () => {
     expect(hint).toBeInTheDocument();
   });
 
+  it('renders an indicator', () => {
+    render(
+      <DropdownSelect />,
+    );
+    const indicator = screen.getByTestId('indicator');
+    expect(indicator).toBeInTheDocument();
+  });
+
   it('render options with implicit values', () => {
     render(
       <DropdownSelect>
@@ -149,7 +157,6 @@ describe('DropdownSelect', () => {
         <DropdownSelect
           size={size}
           hint="hint"
-          indicator="a"
         />,
       );
 
@@ -161,7 +168,6 @@ describe('DropdownSelect', () => {
       render(
         <DropdownSelect
           size={size}
-          indicator="a"
         />,
       );
 
@@ -174,7 +180,6 @@ describe('DropdownSelect', () => {
         <DropdownSelect
           size={size}
           label="label"
-          indicator="a"
         />,
       );
 

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

@@ -24,10 +24,6 @@ export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelect
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -75,7 +71,6 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
   {
     label,
     hint,
-    indicator,
     size = 'medium' as const,
     border = false as const,
     block = false as const,
@@ -96,7 +91,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 min-w-48',
+        'relative rounded ring-secondary/50 min-w-48 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -114,17 +109,14 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
             data-testid="label"
             id={labelId}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
               {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
+                'pr-10': size === 'small',
+                'pr-12': size === 'medium',
+                'pr-16': size === 'large',
               },
             )}
           >
@@ -146,30 +138,14 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
           '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',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
           {
             'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
+            'pl-1.5 pt-4': variant === 'alternate',
           },
           {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
+            'pr-10 h-10 text-xxs': size === 'small',
+            'pr-12 h-12 text-xs': size === 'medium',
+            'pr-16 h-16': size === 'large',
           },
         )}
       >
@@ -179,7 +155,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -189,13 +165,9 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
               'pt-3': variant === 'alternate' && size !== 'small',
             },
             {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
+              'pr-10': size === 'small',
+              'pr-12': size === 'medium',
+              'pr-16': size === 'large',
             },
           )}
         >
@@ -206,25 +178,29 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
           </div>
         </div>
       )}
-      {indicator && (
-        <div
-          data-testid="indicator"
-          className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
+      <div
+        data-testid="indicator"
+        className={clsx(
+          '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',
+            'w-12': size === 'medium',
+            'w-16': size === 'large',
+          },
+        )}
+      >
+        <svg
+          className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+          viewBox="0 0 24 24"
+          role="presentation"
         >
-          {indicator}
-        </div>
-      )}
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>
@@ -236,7 +212,6 @@ DropdownSelect.displayName = 'DropdownSelect' as const;
 DropdownSelect.defaultProps = {
   label: undefined,
   hint: undefined,
-  indicator: undefined,
   size: 'medium' as const,
   border: false as const,
   block: false as const,

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

@@ -99,7 +99,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50',
+        'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -116,7 +116,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
             htmlFor={id}
             id={labelId}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -193,7 +193,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -224,7 +224,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
         <div
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -238,7 +238,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

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

@@ -17,10 +17,6 @@ export interface EmailInputProps extends Omit<React.HTMLProps<EmailInputDerivedE
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -55,7 +51,6 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
     {
       label,
       hint,
-      indicator,
       size = 'medium' as const,
       border = false,
       block = false,
@@ -83,7 +78,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
     return (
       <div
         className={clsx(
-          'relative rounded ring-secondary/50',
+          'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
           'focus-within:ring-4',
           {
             'block': block,
@@ -100,17 +95,14 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
               id={labelId}
               htmlFor={id}
               className={clsx(
-                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+                '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,
                 },
                 {
-                  'pr-1': !indicator,
-                },
-                {
-                  'pr-10': indicator && size === 'small',
-                  'pr-12': indicator && size === 'medium',
-                  'pr-16': indicator && size === 'large',
+                  'pr-10': size === 'small',
+                  'pr-12': size === 'medium',
+                  'pr-16': size === 'large',
                 },
               )}
             >
@@ -131,33 +123,17 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
           data-testid="input"
           pattern={pattern}
           className={clsx(
-            'bg-negative rounded-inherit w-full peer block font-inherit',
+            'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
             'focus:outline-0',
-            'disabled:opacity-50 disabled:cursor-not-allowed',
-            {
-              'text-xxs': size === 'small',
-              'text-xs': size === 'medium',
-            },
+            'disabled:cursor-not-allowed',
             {
               'pl-4': variant === 'default',
-              'pl-1.5': variant === 'alternate',
+              'pl-1.5 pt-4': variant === 'alternate',
             },
             {
-              'pt-4': variant === 'alternate',
-            },
-            {
-              'pr-4': variant === 'default' && !indicator,
-              'pr-1.5': variant === 'alternate' && !indicator,
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
-            },
-            {
-              'h-10': size === 'small',
-              'h-12': size === 'medium',
-              'h-16': size === 'large',
+              'pr-10 h-10 text-xxs': size === 'small',
+              'pr-12 h-12 text-xs': size === 'medium',
+              'pr-16 h-16': size === 'large',
             },
           )}
         />
@@ -165,7 +141,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
           <div
             data-testid="hint"
             className={clsx(
-              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+              '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',
                 'top-0.5': variant === 'alternate',
@@ -175,13 +151,9 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
                 'pt-3': variant === 'alternate' && size !== 'small',
               },
               {
-                'pr-4': !indicator && variant === 'default',
-                'pr-1': !indicator && variant === 'alternate',
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
+                'pr-10': size === 'small',
+                'pr-12': size === 'medium',
+                'pr-16': size === 'large',
               },
             )}
           >
@@ -192,25 +164,30 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
             </div>
           </div>
         )}
-        {indicator && (
-          <div
-            data-testid="indicator"
-            className={clsx(
-              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-              {
-                'w-10': size === 'small',
-                'w-12': size === 'medium',
-                'w-16': size === 'large',
-              },
-            )}
+        <div
+          data-testid="indicator"
+          className={clsx(
+            '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',
+              'w-12': size === 'medium',
+              'w-16': size === 'large',
+            },
+          )}
+        >
+          <svg
+            className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+            viewBox="0 0 24 24"
+            role="presentation"
           >
-            {indicator}
-          </div>
-        )}
+            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+            <polyline points="22,6 12,13 2,6" />
+          </svg>
+        </div>
         {border && (
           <span
             data-testid="border"
-            className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+            className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
           />
         )}
       </div>
@@ -223,7 +200,6 @@ EmailInput.displayName = 'EmailInput';
 EmailInput.defaultProps = {
   label: undefined,
   hint: undefined,
-  indicator: undefined,
   size: 'medium',
   border: false,
   block: false,

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

@@ -93,7 +93,7 @@ export const PatternTextInput = React.forwardRef<
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -111,7 +111,7 @@ export const PatternTextInput = React.forwardRef<
             htmlFor={id}
             id={labelId}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -176,7 +176,7 @@ export const PatternTextInput = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -207,7 +207,7 @@ export const PatternTextInput = React.forwardRef<
         <div
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -221,7 +221,7 @@ export const PatternTextInput = React.forwardRef<
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

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

@@ -19,10 +19,6 @@ export interface PhoneNumberInputProps extends Omit<React.HTMLProps<PhoneNumberI
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -63,7 +59,6 @@ export const PhoneNumberInput = React.forwardRef<
   {
     label,
     hint,
-    indicator,
     size = 'medium' as const,
     border = false,
     block = false,
@@ -103,40 +98,24 @@ export const PhoneNumberInput = React.forwardRef<
   };
 
   const commonInputStyles = clsx(
-    'bg-negative rounded-inherit w-full peer block font-inherit',
+    'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
     'focus:outline-0',
-    'disabled:opacity-50 disabled:cursor-not-allowed',
-    {
-      'text-xxs': size === 'small',
-      'text-xs': size === 'medium',
-    },
+    'disabled:cursor-not-allowed',
     {
       'pl-4': variant === 'default',
-      'pl-1.5': variant === 'alternate',
-    },
-    {
-      'pt-4': variant === 'alternate',
+      'pl-1.5 pt-4': variant === 'alternate',
     },
     {
-      'pr-4': variant === 'default' && !indicator,
-      'pr-1.5': variant === 'alternate' && !indicator,
-    },
-    {
-      'pr-10': indicator && size === 'small',
-      'pr-12': indicator && size === 'medium',
-      'pr-16': indicator && size === 'large',
-    },
-    {
-      'h-10': size === 'small',
-      'h-12': size === 'medium',
-      'h-16': size === 'large',
+      'pr-10 h-10 text-xxs': size === 'small',
+      'pr-12 h-12 text-xs': size === 'medium',
+      'pr-16 h-16': size === 'large',
     },
   );
 
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50',
+        'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -154,17 +133,14 @@ export const PhoneNumberInput = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
               {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
+                'pr-10': size === 'small',
+                'pr-12': size === 'medium',
+                'pr-16': size === 'large',
               },
             )}
           >
@@ -203,7 +179,7 @@ export const PhoneNumberInput = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -213,13 +189,9 @@ export const PhoneNumberInput = React.forwardRef<
               'pt-3': variant === 'alternate' && size !== 'small',
             },
             {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
+              'pr-10': size === 'small',
+              'pr-12': size === 'medium',
+              'pr-16': size === 'large',
             },
           )}
         >
@@ -230,25 +202,29 @@ export const PhoneNumberInput = React.forwardRef<
           </div>
         </div>
       )}
-      {indicator && (
-        <div
-          data-testid="indicator"
-          className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
+      <div
+        data-testid="indicator"
+        className={clsx(
+          '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',
+            'w-12': size === 'medium',
+            'w-16': size === 'large',
+          },
+        )}
+      >
+        <svg
+          className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+          viewBox="0 0 24 24"
+          role="presentation"
         >
-          {indicator}
-        </div>
-      )}
+          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+        </svg>
+      </div>
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>
@@ -260,7 +236,6 @@ PhoneNumberInput.displayName = 'PhoneNumberInput';
 PhoneNumberInput.defaultProps = {
   label: undefined,
   hint: undefined,
-  indicator: undefined,
   size: 'medium' as const,
   border: false as const,
   block: false as const,
@@ -268,4 +243,5 @@ PhoneNumberInput.defaultProps = {
   hiddenLabel: false as const,
   enhanced: false as const,
   country: 'PH' as const,
+  length: undefined,
 };

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

@@ -17,10 +17,6 @@ export interface UrlInputProps extends Omit<React.HTMLProps<UrlInputDerivedEleme
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -50,7 +46,6 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
   {
     label,
     hint,
-    indicator,
     size = 'medium' as const,
     border = false,
     block = false,
@@ -71,7 +66,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50',
+        'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -89,17 +84,14 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
             htmlFor={id}
             id={labelId}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
               {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
+                'pr-10': size === 'small',
+                'pr-12': size === 'medium',
+                'pr-16': size === 'large',
               },
             )}
           >
@@ -119,33 +111,17 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
         type="url"
         data-testid="input"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block font-inherit',
+          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
           'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
+          'disabled:cursor-not-allowed',
           {
             'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
+            'pl-1.5 pt-4': variant === 'alternate',
           },
           {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
+            'pr-10 h-10 text-xxs': size === 'small',
+            'pr-12 h-12 text-xs': size === 'medium',
+            'pr-16 h-16': size === 'large',
           },
         )}
       />
@@ -153,7 +129,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -163,13 +139,9 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
               'pt-3': variant === 'alternate' && size !== 'small',
             },
             {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
+              'pr-10': size === 'small',
+              'pr-12': size === 'medium',
+              'pr-16': size === 'large',
             },
           )}
         >
@@ -180,25 +152,31 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
           </div>
         </div>
       )}
-      {indicator && (
-        <div
-          data-testid="indicator"
-          className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
+      <div
+        data-testid="indicator"
+        className={clsx(
+          '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',
+            'w-12': size === 'medium',
+            'w-16': size === 'large',
+          },
+        )}
+      >
+        <svg
+          className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+          viewBox="0 0 24 24"
+          role="presentation"
         >
-          {indicator}
-        </div>
-      )}
+          <circle cx="12" cy="12" r="10" />
+          <line x1="2" y1="12" x2="22" y2="12" />
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+        </svg>
+      </div>
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>
@@ -210,7 +188,6 @@ UrlInput.displayName = 'UrlInput';
 UrlInput.defaultProps = {
   label: undefined,
   hint: undefined,
-  indicator: undefined,
   size: 'medium',
   border: false,
   block: false,

categories/freeform/react/package.json

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

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import { useClientSide } from '@modal-sh/react-utils';
 
 export type MaskedTextInputDerivedElement = HTMLInputElement;
 
@@ -17,10 +18,6 @@ export interface MaskedTextInputProps extends Omit<React.HTMLProps<MaskedTextInp
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -53,7 +50,6 @@ export const MaskedTextInput = React.forwardRef<
   {
     label,
     hint,
-    indicator,
     size = 'medium' as const,
     border = false,
     block = false,
@@ -63,18 +59,21 @@ export const MaskedTextInput = React.forwardRef<
     id: idProp,
     style,
     length,
+    disabled,
     ...etcProps
   }: MaskedTextInputProps,
   forwardedRef,
 ) => {
+  const { clientSide: indicator } = useClientSide({ clientSide: true, initial: false });
   const labelId = React.useId();
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
+  const [visible, setVisible] = React.useState(false);
 
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -92,7 +91,7 @@ export const MaskedTextInput = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -117,9 +116,10 @@ export const MaskedTextInput = React.forwardRef<
         {...etcProps}
         size={length}
         ref={forwardedRef}
+        disabled={disabled}
         id={id}
         aria-labelledby={labelId}
-        type="password"
+        type={!visible ? 'password' : 'text'}
         data-testid="input"
         className={clsx(
           'bg-negative rounded-inherit w-full peer block font-inherit',
@@ -156,7 +156,7 @@ export const MaskedTextInput = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -184,24 +184,44 @@ export const MaskedTextInput = React.forwardRef<
         </div>
       )}
       {indicator && (
-        <div
+        <button
+          disabled={disabled}
+          type="button"
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 select-none text-primary group-focus-within:text-secondary',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
               'w-16': size === 'large',
             },
           )}
+          onClick={() => { setVisible((b) => !b); }}
         >
-          {indicator}
-        </div>
+          <svg
+            className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+            viewBox="0 0 24 24"
+            role="presentation"
+          >
+            {!visible && (
+              <>
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                <circle cx="12" cy="12" r="3" />
+              </>
+            )}
+            {visible && (
+              <>
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                <line x1="1" y1="1" x2="23" y2="23" />
+              </>
+            )}
+          </svg>
+        </button>
       )}
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none group-focus-within:border-secondary"
         />
       )}
     </div>
@@ -214,7 +234,6 @@ MaskedTextInput.defaultProps = {
   label: undefined,
   hint: undefined,
   size: 'medium',
-  indicator: undefined,
   border: false,
   block: false,
   variant: 'default',

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

@@ -71,7 +71,7 @@ export const MultilineTextInput = React.forwardRef<
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -89,7 +89,7 @@ export const MultilineTextInput = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -165,7 +165,7 @@ export const MultilineTextInput = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -196,7 +196,7 @@ export const MultilineTextInput = React.forwardRef<
         <div
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -210,7 +210,7 @@ export const MultilineTextInput = React.forwardRef<
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

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

@@ -90,7 +90,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -108,7 +108,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
             htmlFor={id}
             id={labelId}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -173,7 +173,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -204,7 +204,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
         <div
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -218,7 +218,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

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

@@ -98,7 +98,7 @@ export const MenuMultiSelect = React.forwardRef<
   return (
     <div
       className={clsx(
-        'menu-multi-select relative rounded ring-secondary/50',
+        'menu-multi-select relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -115,7 +115,7 @@ export const MenuMultiSelect = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -193,7 +193,7 @@ export const MenuMultiSelect = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -224,7 +224,7 @@ export const MenuMultiSelect = React.forwardRef<
         <div
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -238,7 +238,7 @@ export const MenuMultiSelect = React.forwardRef<
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

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

@@ -321,7 +321,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
       data-size={size}
       data-variant={variant}
       className={clsx(
-        'relative rounded ring-secondary/50 group',
+        'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -346,7 +346,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -447,7 +447,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -477,7 +477,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
       {indicator && (
         <div
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -491,7 +491,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none group-focus-within:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none group-focus-within:border-secondary"
         />
       )}
     </div>

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

@@ -196,11 +196,16 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
         className="peer/children order-1 cursor-pointer peer-disabled/radio:cursor-not-allowed"
       >
         {uncheckedLabel && (
-          <span
-            data-testid="uncheckedLabel"
-          >
-            {uncheckedLabel}
-          </span>
+          <>
+            <span className="sr-only">
+              {' / '}
+            </span>
+            <span
+              data-testid="uncheckedLabel"
+            >
+              {uncheckedLabel}
+            </span>
+          </>
         )}
       </label>
       <label

categories/number/react/package.json

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

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

@@ -87,7 +87,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50',
+        'relative rounded ring-secondary/50 group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -105,7 +105,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -170,7 +170,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none text-primary',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -201,7 +201,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
         <div
           data-testid="indicator"
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -215,7 +215,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

categories/temporal/react/package.json

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

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import plugin from 'tailwindcss/plugin';
 
 export type DateDropdownDerivedElement = HTMLInputElement;
 
@@ -17,10 +18,6 @@ export interface DateDropdownProps extends Omit<React.HTMLProps<DateDropdownDeri
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -43,6 +40,32 @@ export interface DateDropdownProps extends Omit<React.HTMLProps<DateDropdownDeri
   length?: number,
 }
 
+export const dateDropdownPlugin = plugin(({ addComponents }) => {
+  addComponents({
+    '.date-dropdown': {
+      '& > input::-webkit-calendar-picker-indicator': {
+        'background-image': 'none',
+        'position': 'absolute',
+        'bottom': '0',
+        'right': '0',
+        'height': '100%',
+        'padding': '0',
+        'aspect-ratio': '1 / 1',
+        'cursor': 'inherit',
+      },
+      '&[data-size="small"] > input::-webkit-calendar-picker-indicator': {
+        'width': '2.5rem',
+      },
+      '&[data-size="medium"] > input::-webkit-calendar-picker-indicator': {
+        'width': '3rem',
+      },
+      '&[data-size="large"] > input::-webkit-calendar-picker-indicator': {
+        'width': '4rem',
+      },
+    },
+  });
+});
+
 /**
  * Component for inputting textual values.
  */
@@ -53,7 +76,6 @@ export const DateDropdown = React.forwardRef<
   {
     label,
     hint,
-    indicator,
     size = 'medium' as const,
     border = false,
     block = false,
@@ -74,7 +96,7 @@ export const DateDropdown = React.forwardRef<
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50 date-dropdown',
         'focus-within:ring-4',
         {
           'block': block,
@@ -83,6 +105,7 @@ export const DateDropdown = React.forwardRef<
         className,
       )}
       style={style}
+      data-size={size}
       data-testid="base"
     >
       {label && (
@@ -92,17 +115,14 @@ export const DateDropdown = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
               {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
+                'pr-10': size === 'small',
+                'pr-12': size === 'medium',
+                'pr-16': size === 'large',
               },
             )}
           >
@@ -123,33 +143,17 @@ export const DateDropdown = React.forwardRef<
         data-testid="input"
         pattern="\d{4}-\d{2}-\d{2}"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
+          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums cursor-pointer',
           'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
+          'disabled:cursor-not-allowed',
           {
             'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
-          },
-          {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
+            'pl-1.5 pt-4': variant === 'alternate',
           },
           {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
+            'pr-10 h-10 text-xxs': size === 'small',
+            'pr-12 h-12 text-xs': size === 'medium',
+            'pr-16 h-16': size === 'large',
           },
         )}
       />
@@ -157,7 +161,7 @@ export const DateDropdown = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -167,13 +171,9 @@ export const DateDropdown = React.forwardRef<
               'pt-3': variant === 'alternate' && size !== 'small',
             },
             {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
+              'pr-10': size === 'small',
+              'pr-12': size === 'medium',
+              'pr-16': size === 'large',
             },
           )}
         >
@@ -184,25 +184,54 @@ export const DateDropdown = React.forwardRef<
           </div>
         </div>
       )}
-      {indicator && (
-        <div
-          data-testid="indicator"
-          className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
+      <div
+        data-testid="indicator"
+        className={clsx(
+          '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',
+            'w-12': size === 'medium',
+            'w-16': size === 'large',
+          },
+        )}
+      >
+        <svg
+          className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+          viewBox="0 0 24 24"
+          role="presentation"
         >
-          {indicator}
-        </div>
-      )}
+          <rect
+            x="3"
+            y="4"
+            width="18"
+            height="18"
+            rx="2"
+            ry="2"
+          />
+          <line
+            x1="16"
+            y1="2"
+            x2="16"
+            y2="6"
+          />
+          <line
+            x1="8"
+            y1="2"
+            x2="8"
+            y2="6"
+          />
+          <line
+            x1="3"
+            y1="10"
+            x2="21"
+            y2="10"
+          />
+        </svg>
+      </div>
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none group-focus-within:border-secondary"
         />
       )}
     </div>
@@ -215,7 +244,6 @@ DateDropdown.defaultProps = {
   label: undefined,
   hint: undefined,
   size: 'medium',
-  indicator: undefined,
   border: false,
   block: false,
   variant: 'default',

showcases/web-kitchensink-reactnext/src/components/temporal/TimeSpinner/index.tsx → categories/temporal/react/src/components/TimeSpinner/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import plugin from 'tailwindcss/plugin';
 
 export type TimeSpinnerDerivedElement = HTMLInputElement;
 
@@ -27,10 +28,6 @@ export interface TimeSpinnerProps extends Omit<React.HTMLProps<TimeSpinnerDerive
    * Size of the component.
    */
   size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
   /**
    * Should the component display a border?
    */
@@ -57,6 +54,32 @@ export interface TimeSpinnerProps extends Omit<React.HTMLProps<TimeSpinnerDerive
   step?: Step,
 }
 
+export const timeSpinnerPlugin = plugin(({ addComponents }) => {
+  addComponents({
+    '.time-spinner': {
+      '& > input::-webkit-calendar-picker-indicator': {
+        'background-image': 'none',
+        'position': 'absolute',
+        'bottom': '0',
+        'right': '0',
+        'height': '100%',
+        'padding': '0',
+        'aspect-ratio': '1 / 1',
+        'cursor': 'inherit',
+      },
+      '&[data-size="small"] > input::-webkit-calendar-picker-indicator': {
+        'width': '2.5rem',
+      },
+      '&[data-size="medium"] > input::-webkit-calendar-picker-indicator': {
+        'width': '3rem',
+      },
+      '&[data-size="large"] > input::-webkit-calendar-picker-indicator': {
+        'width': '4rem',
+      },
+    },
+  });
+});
+
 /**
  * Component for inputting textual values.
  */
@@ -67,17 +90,16 @@ export const TimeSpinner = React.forwardRef<
   {
     label,
     hint,
-    indicator,
     size = 'medium' as const,
-    border = false,
-    block = false,
+    border = false as const,
+    block = false as const,
     variant = 'default' as const,
-    hiddenLabel = false,
+    hiddenLabel = false as const,
     className,
     id: idProp,
     style,
-    displaySeconds = false,
-    step = '00:01',
+    displaySeconds = false as const,
+    step = '00:01' as const,
     ...etcProps
   }: TimeSpinnerProps,
   forwardedRef,
@@ -86,13 +108,13 @@ export const TimeSpinner = React.forwardRef<
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
 
-  const [hh, mm, ss = 0] = step.split(':').map((s: string) => parseInt(s, 10));
+  const [hh, mm, ss = 0] = step.split(':').map((s: string) => parseInt(s, 10)) as number[];
   const stepValue = ss + (mm * 60) + (hh * 3600);
 
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'time-spinner relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -102,6 +124,7 @@ export const TimeSpinner = React.forwardRef<
       )}
       style={style}
       data-testid="base"
+      data-size={size}
     >
       {label && (
         <>
@@ -110,17 +133,14 @@ export const TimeSpinner = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
               {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
+                'pr-10': size === 'small',
+                'pr-12': size === 'medium',
+                'pr-16': size === 'large',
               },
             )}
           >
@@ -141,33 +161,17 @@ export const TimeSpinner = React.forwardRef<
         step={displaySeconds && stepValue > 60 ? 1 : stepValue}
         pattern="\d{2}:\d{2}(:\d{2})?"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
+          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums cursor-pointer',
           'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
+          'disabled:cursor-not-allowed',
           {
             'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
-          },
-          {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
+            'pl-1.5 pt-4': variant === 'alternate',
           },
           {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
+            'pr-10 h-10 text-xxs': size === 'small',
+            'pr-12 h-12 text-xs': size === 'medium',
+            'pr-16 h-16': size === 'large',
           },
         )}
       />
@@ -175,7 +179,7 @@ export const TimeSpinner = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -185,13 +189,9 @@ export const TimeSpinner = React.forwardRef<
               'pt-3': variant === 'alternate' && size !== 'small',
             },
             {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
+              'pr-10': size === 'small',
+              'pr-12': size === 'medium',
+              'pr-16': size === 'large',
             },
           )}
         >
@@ -202,24 +202,33 @@ export const TimeSpinner = React.forwardRef<
           </div>
         </div>
       )}
-      {indicator && (
-        <div
-          className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
+      <div
+        className={clsx(
+          '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',
+            'w-12': size === 'medium',
+            'w-16': size === 'large',
+          },
+        )}
+      >
+        <svg
+          className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
+          viewBox="0 0 24 24"
+          role="presentation"
         >
-          {indicator}
-        </div>
-      )}
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <polyline points="12 6 12 12 16 14" />
+        </svg>
+      </div>
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none group-focus-within:border-secondary"
         />
       )}
     </div>
@@ -231,10 +240,11 @@ TimeSpinner.displayName = 'TimeSpinner';
 TimeSpinner.defaultProps = {
   label: undefined,
   hint: undefined,
-  size: 'medium',
-  indicator: undefined,
-  border: false,
-  block: false,
-  variant: 'default',
-  hiddenLabel: false,
+  size: 'medium' as const,
+  border: false as const,
+  block: false as const,
+  variant: 'default' as const,
+  hiddenLabel: false as const,
+  displaySeconds: false as const,
+  step: '00:01' as const,
 };

categories/temporal/react/src/index.ts

@@ -1 +1,2 @@
 export * from './components/DateDropdown';
+export * from './components/TimeSpinner';

pnpm-lock.yaml

@@ -331,6 +331,9 @@ importers:
 
   categories/freeform/react:
     dependencies:
+      '@modal-sh/react-utils':
+        specifier: workspace:*
+        version: link:../../../packages/react-utils
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../base
@@ -588,8 +591,8 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
       tailwindcss:
-        specifier: 3.3.2
-        version: 3.3.2
+        specifier: 3.3.3
+        version: 3.3.3
     devDependencies:
       '@testing-library/jest-dom':
         specifier: ^5.16.5
@@ -651,6 +654,9 @@ importers:
       clsx:
         specifier: ^1.2.1
         version: 1.2.1
+      tailwindcss:
+        specifier: 3.3.3
+        version: 3.3.3
     devDependencies:
       '@testing-library/jest-dom':
         specifier: ^5.16.5
@@ -1207,12 +1213,13 @@ importers:
       react-refractor:
         specifier: ^2.1.7
         version: 2.1.7(react@18.2.0)
-      tailwindcss:
-        specifier: 3.3.2
-        version: 3.3.2
       typescript:
         specifier: 5.1.3
         version: 5.1.3
+    devDependencies:
+      tailwindcss:
+        specifier: 0.0.0-insiders.7f31ac1
+        version: 0.0.0-insiders.7f31ac1
 
 packages:
 
@@ -1227,7 +1234,6 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: false
 
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -1970,6 +1976,102 @@ packages:
       tslib: 2.6.0
     dev: false
 
+  /@tailwindcss/oxide-darwin-arm64@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-ru47I091xW1oKYK6a4/i2nSTVhC6MXzJ/bkHKp3LCUE3kJaefOknFCTZwaKd3+FOlAFxqhEsrnPpPY9sSm3dHg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-darwin-x64@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-Xwv8anoQJiDGaIaYfxjjQhq1OhDle6pig8J4fsEaTr89jHC+ku8F9HyU+sYASVGcZ1JV8NZyKl2jd3ZBCWp1dQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-freebsd-x64@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-AwyHGFlgQPyr+OZtaPFs7q04+Nb5B352OdHY9amtgLYNE7bZLTmpFxNG4JeewSpgqVeDVlrZdtlXOMYffkRfqA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm-gnueabihf@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-43zRBZDUVEEMPm+oO3oViVRwaX0lV7K1Cf+llbgkOzW0QjlEOr3a/EabLVqzxQ6NCVUar7Q+z6jSj07LTGjEGA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-gnu@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-8UKgagNvZWRcRXwJN6u00Hupiz4etX6+nHblWfyQrnClwB9n7TINwArG8T4yAxi7IJck/YEg6x2HAGQlyOfRAw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-musl@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-zO3gCbeXBSJQ8/Od5LTWTkHbJdUwPbDN6CqLqEkqeReirxYquzl0qn/xBp2WAyhm190Xx0XjNvWViGWIMx6RPQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-gnu@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-N5ApQ+p4b6endPXkSaHD3U142Kp1HQWe8r9CHAAEAnarjxrjCfZB9C9n69k3aKGp6zfW7xlgqK9AXaf9cem/qQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-musl@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-6Pbd3GVgp2NS6wmNMHGM6vwlmO1AMmBsk0cfrZUs4ppuS4TMTLrapS62xVd2DZqIDW6IBpxgUjXVfz7FOpnnGA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-win32-x64-msvc@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-UJX/+Q/NV8z4h9wErBAx3TjoWlWRsWWYYgfvR1zno56ErZfiOxy8znsr0LEJstP3Z68j1EeqEYBDmuzD/i1oYw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-l9k8MNFYGQAmn2wXvXw4FYDkjmduNFHYSKGrYmS8j8bHAdMBrJmW5RdfvLYMDhNyhZWAeTj4LLmguPHe10FmGg==}
+    engines: {node: '>= 10'}
+    optionalDependencies:
+      '@tailwindcss/oxide-darwin-arm64': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-darwin-x64': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-freebsd-x64': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-linux-arm64-gnu': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-linux-arm64-musl': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-linux-x64-gnu': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-linux-x64-musl': 0.0.0-insiders.7f31ac1
+      '@tailwindcss/oxide-win32-x64-msvc': 0.0.0-insiders.7f31ac1
+    dev: true
+
   /@testing-library/dom@8.20.1:
     resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==}
     engines: {node: '>=12'}
@@ -2523,7 +2625,6 @@ packages:
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -2531,11 +2632,9 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: false
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -2682,7 +2781,6 @@ packages:
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: false
 
   /bl@5.1.0:
     resolution: {integrity: sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==}
@@ -2765,7 +2863,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: false
 
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
@@ -2884,7 +2981,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: false
 
   /chroma-js@2.4.2:
     resolution: {integrity: sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==}
@@ -3008,7 +3104,6 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: false
 
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
@@ -3244,9 +3339,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    dev: true
+
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
 
   /diff-sequences@29.4.3:
     resolution: {integrity: sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==}
@@ -3266,7 +3366,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
 
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -4252,7 +4351,6 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
-    dev: false
 
   /glob@7.1.7:
     resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
@@ -4589,7 +4687,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: false
 
   /is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -4890,6 +4987,10 @@ packages:
     hasBin: true
     dev: false
 
+  /jiti@1.19.1:
+    resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
+    hasBin: true
+
   /jpeg-js@0.4.4:
     resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==}
     dev: false
@@ -5047,14 +5148,100 @@ packages:
       yargs: 15.4.1
     dev: true
 
+  /lightningcss-darwin-arm64@1.21.5:
+    resolution: {integrity: sha512-z05hyLX85WY0UfhkFUOrWEFqD69lpVAmgl3aDzMKlIZJGygbhbegqb4PV8qfUrKKNBauut/qVNPKZglhTaDDxA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-darwin-x64@1.21.5:
+    resolution: {integrity: sha512-MSJhmej/U9MrdPxDk7+FWhO8+UqVoZUHG4VvKT5RQ4RJtqtANTiWiI97LvoVNMtdMnHaKs1Pkji6wHUFxjJsHQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-arm-gnueabihf@1.21.5:
+    resolution: {integrity: sha512-xN6+5/JsMrbZHL1lPl+MiNJ3Xza12ueBKPepiyDCFQzlhFRTj7D0LG+cfNTzPBTO8KcYQynLpl1iBB8LGp3Xtw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-arm64-gnu@1.21.5:
+    resolution: {integrity: sha512-KfzFNhC4XTbmG3ma/xcTs/IhCwieW89XALIusKmnV0N618ZDXEB0XjWOYQRCXeK9mfqPdbTBpurEHV/XZtkniQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-arm64-musl@1.21.5:
+    resolution: {integrity: sha512-bc0GytQO5Mn9QM6szaZ+31fQHNdidgpM1sSCwzPItz8hg3wOvKl8039rU0veMJV3ZgC9z0ypNRceLrSHeRHmXw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-x64-gnu@1.21.5:
+    resolution: {integrity: sha512-JwMbgypPQgc2kW2av3OwzZ8cbrEuIiDiXPJdXRE6aVxu67yHauJawQLqJKTGUhiAhy6iLDG8Wg0a3/ziL+m+Kw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-x64-musl@1.21.5:
+    resolution: {integrity: sha512-Ib8b6IQ/OR/VrPU6YBgy4T3QnuHY7DUa95O+nz+cwrTkMSN6fuHcTcIaz4t8TJ6HI5pl3uxUOZjmtls2pyQWow==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-win32-x64-msvc@1.21.5:
+    resolution: {integrity: sha512-A8cSi8lUpBeVmoF+DqqW7cd0FemDbCuKr490IXdjyeI+KL8adpSKUs8tcqO0OXPh1EoDqK7JNkD/dELmd4Iz5g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss@1.21.5:
+    resolution: {integrity: sha512-/pEUPeih2EwIx9n4T82aOG6CInN83tl/mWlw6B5gWLf36UplQi1L+5p3FUHsdt4fXVfOkkh9KIaM3owoq7ss8A==}
+    engines: {node: '>= 12.0.0'}
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.21.5
+      lightningcss-darwin-x64: 1.21.5
+      lightningcss-linux-arm-gnueabihf: 1.21.5
+      lightningcss-linux-arm64-gnu: 1.21.5
+      lightningcss-linux-arm64-musl: 1.21.5
+      lightningcss-linux-x64-gnu: 1.21.5
+      lightningcss-linux-x64-musl: 1.21.5
+      lightningcss-win32-x64-msvc: 1.21.5
+    dev: true
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: false
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
 
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
@@ -5254,7 +5441,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: false
 
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
@@ -5336,7 +5522,6 @@ packages:
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -5382,7 +5567,6 @@ packages:
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: false
 
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -5631,7 +5815,6 @@ packages:
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /pify@5.0.0:
     resolution: {integrity: sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==}
@@ -5641,7 +5824,6 @@ packages:
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: false
 
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
@@ -5668,6 +5850,18 @@ packages:
       resolve: 1.22.2
     dev: false
 
+  /postcss-import@15.1.0(postcss@8.4.26):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.26
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.2
+    dev: true
+
   /postcss-js@4.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -5678,6 +5872,16 @@ packages:
       postcss: 8.4.24
     dev: false
 
+  /postcss-js@4.0.1(postcss@8.4.26):
+    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.26
+    dev: true
+
   /postcss-load-config@4.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
@@ -5695,6 +5899,23 @@ packages:
       yaml: 2.3.1
     dev: false
 
+  /postcss-load-config@4.0.1(postcss@8.4.26):
+    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.26
+      yaml: 2.3.1
+    dev: true
+
   /postcss-nested@6.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
@@ -5705,6 +5926,16 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: false
 
+  /postcss-nested@6.0.1(postcss@8.4.26):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.26
+      postcss-selector-parser: 6.0.13
+    dev: true
+
   /postcss-selector-parser@6.0.13:
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
     engines: {node: '>=4'}
@@ -5714,7 +5945,6 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
 
   /postcss@8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
@@ -5733,6 +5963,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.26:
+    resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -5938,7 +6177,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: false
 
   /readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
@@ -5953,7 +6191,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: false
 
   /redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
@@ -6046,6 +6283,15 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  /resolve@1.22.3:
+    resolution: {integrity: sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
   /resolve@2.0.0-next.4:
     resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
     hasBin: true
@@ -6395,7 +6641,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: false
 
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -6425,6 +6670,41 @@ packages:
       '@pkgr/utils': 2.4.1
       tslib: 2.6.0
 
+  /tailwindcss@0.0.0-insiders.7f31ac1:
+    resolution: {integrity: sha512-ynoxCChgC5S9oRnoV6z/B/piwyT04qThXj+DfJ8IXIbHE2F16S8SYTQtgUYbcqglfLRSrFez4pM9jGig+MwFnA==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/oxide': 0.0.0-insiders.7f31ac1
+      arg: 5.0.2
+      browserslist: 4.21.9
+      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
+      lightningcss: 1.21.5
+      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.26
+      postcss-import: 15.1.0(postcss@8.4.26)
+      postcss-js: 4.0.1(postcss@8.4.26)
+      postcss-load-config: 4.0.1(postcss@8.4.26)
+      postcss-nested: 6.0.1(postcss@8.4.26)
+      postcss-selector-parser: 6.0.13
+      postcss-value-parser: 4.2.0
+      resolve: 1.22.3
+      sucrase: 3.32.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
   /tailwindcss@3.3.2:
     resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
     engines: {node: '>=14.0.0'}
@@ -6457,6 +6737,37 @@ packages:
       - ts-node
     dev: false
 
+  /tailwindcss@3.3.3:
+    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
+    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
+      resolve: 1.22.2
+      sucrase: 3.32.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -6478,13 +6789,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: false
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: false
 
   /through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
@@ -6556,7 +6865,6 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
 
   /tsconfig-paths@3.14.2:
     resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
@@ -7153,7 +7461,6 @@ packages:
   /yaml@2.3.1:
     resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
     engines: {node: '>= 14'}
-    dev: false
 
   /yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}

showcases/web-kitchensink-reactnext/package.json

@@ -41,7 +41,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-refractor": "^2.1.7",
-    "tailwindcss": "3.3.2",
     "typescript": "5.1.3"
+  },
+  "devDependencies": {
+    "tailwindcss": "0.0.0-insiders.7f31ac1"
   }
 }

showcases/web-kitchensink-reactnext/src/components/temporal/WeekInput/index.tsx

@@ -71,7 +71,7 @@ export const WeekInput = React.forwardRef<
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -89,7 +89,7 @@ export const WeekInput = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -153,7 +153,7 @@ export const WeekInput = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -183,7 +183,7 @@ export const WeekInput = React.forwardRef<
       {indicator && (
         <div
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -197,7 +197,7 @@ export const WeekInput = React.forwardRef<
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

showcases/web-kitchensink-reactnext/src/components/temporal/YearMonthInput/index.tsx

@@ -71,7 +71,7 @@ export const YearMonthInput = React.forwardRef<
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden',
+        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -89,7 +89,7 @@ export const YearMonthInput = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
+              '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,
               },
@@ -153,7 +153,7 @@ export const YearMonthInput = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
+            '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',
               'top-0.5': variant === 'alternate',
@@ -183,7 +183,7 @@ export const YearMonthInput = React.forwardRef<
       {indicator && (
         <div
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
+            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',
@@ -197,7 +197,7 @@ export const YearMonthInput = React.forwardRef<
       {border && (
         <span
           data-testid="border"
-          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
         />
       )}
     </div>

showcases/web-kitchensink-reactnext/src/components/temporal/index.ts

@@ -1,3 +1,2 @@
-export * from './TimeSpinner';
 export * from './YearMonthInput';
 export * from './WeekInput';

showcases/web-kitchensink-reactnext/src/pages/categories/color/index.tsx

@@ -6,7 +6,7 @@ import * as Color from '@tesseract-design/web-color-react';
 const ColorPage: NextPage = () => {
   return (
     <DefaultLayout title="Color">
-      <Section title="DateDropdown">
+      <Section title="ColorPicker">
         <Subsection title="Default">
           <Color.ColorPicker
             size="small"

showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx

@@ -39,6 +39,15 @@ const TemporalPage: NextPage = () => {
           />
         </Subsection>
       </Section>
+      <Section title="UrlInput">
+        <Subsection title="Default">
+          <Formatted.UrlInput
+            label="Website"
+            name="website"
+            border
+          />
+        </Subsection>
+      </Section>
     </DefaultLayout>
   )
 }

showcases/web-kitchensink-reactnext/src/pages/categories/number/index.tsx

@@ -13,6 +13,7 @@ const NumberPage: NextPage = () => {
             max={100}
             step="any"
             label="Step"
+            border
           />
         </Subsection>
       </Section>

showcases/web-kitchensink-reactnext/src/pages/categories/temporal/index.tsx

@@ -17,14 +17,14 @@ const TemporalPage: NextPage = () => {
       </Section>
       <Section title="TimeSpinner">
         <Subsection title="Default">
-          <TemporalWip.TimeSpinner
+          <Temporal.TimeSpinner
             label="Time"
             variant="default"
             border
           />
         </Subsection>
         <Subsection title="Step">
-          <TemporalWip.TimeSpinner
+          <Temporal.TimeSpinner
             label="Time"
             variant="default"
             border
@@ -32,7 +32,7 @@ const TemporalPage: NextPage = () => {
           />
         </Subsection>
         <Subsection title="Step + Display Seconds">
-          <TemporalWip.TimeSpinner
+          <Temporal.TimeSpinner
             label="Time"
             variant="default"
             border

showcases/web-kitchensink-reactnext/src/pages/index.tsx

@@ -4,8 +4,8 @@ import * as fs from 'fs/promises';
 import * as path from 'path';
 import * as Navigation from '@tesseract-design/web-navigation-react';
 import { DefaultLayout } from '@/components/DefaultLayout';
-import * as React from 'react'
 import {Section} from '@/components/Section';
+import * as React from 'react'
 
 type Page = {
   id: string,

showcases/web-kitchensink-reactnext/tailwind.config.js

@@ -19,6 +19,10 @@ const {
   numberSpinnerPlugin,
   sliderPlugin,
 } = require('@tesseract-design/web-number-react');
+const {
+  dateDropdownPlugin,
+  timeSpinnerPlugin,
+} = require('@tesseract-design/web-temporal-react');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -94,6 +98,7 @@ module.exports = {
   },
   plugins: [
     colorPickerPlugin,
+    dateDropdownPlugin,
     dropdownSelectPlugin,
     menuMultiSelectPlugin,
     menuSelectPlugin,
@@ -102,6 +107,7 @@ module.exports = {
     radioTickBoxPlugin,
     sliderPlugin,
     tagInputPlugin,
+    timeSpinnerPlugin,
     toggleButtonPlugin,
     toggleSwitchPlugin,
     toggleTickBoxPlugin,