From 321e2dd1068be16934eff44e90ceb7dd23cdd7ef Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 10 May 2024 12:30:55 -0300
Subject: [PATCH 1/5] feat: `InputBox` small variant

---
 .../components/InputBox/InputBox.stories.tsx  | 24 ++++++++++++++-
 .../components/InputBox/InputBox.styles.scss  | 29 +++++++++++++++++++
 .../src/components/InputBox/InputBox.tsx      |  4 +++
 .../fuselage/src/components/Select/Select.tsx |  1 +
 .../src/components/Select/SelectAria.tsx      |  5 ++++
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
index ff8ba77d15..e54b46276b 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
@@ -9,7 +9,7 @@ import {
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Icon, InputBox } from '../..';
+import { Icon, InputBox, Box } from '../..';
 
 export default {
   title: 'Inputs/InputBox',
@@ -87,3 +87,25 @@ export const Skeleton: ComponentStory<typeof InputBox> = () => (
   <InputBox.Skeleton />
 );
 Skeleton.storyName = 'InputBox.Skeleton';
+
+export const SmallVariants: ComponentStory<typeof InputBox> = () => (
+  <Box
+    display='flex'
+    flexDirection='column'
+    alignItems='flex-start'
+    style={{ gap: '8px' }}
+  >
+    <InputBox type='text' small placeholder='Name' />
+    <InputBox
+      type='text'
+      small
+      placeholder='Search'
+      addon={<Icon name='magnifier' size='x20' />}
+    />
+  </Box>
+);
+SmallVariants.args = {
+  placeholder: 'Search',
+  small: true,
+  onChange: action('change'),
+};
diff --git a/packages/fuselage/src/components/InputBox/InputBox.styles.scss b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
index f8a8a9ce32..871485ab45 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.styles.scss
+++ b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
@@ -193,6 +193,31 @@
     }
   }
 
+  &__wrapper:has(.rcx-input-box--small) {
+    align-items: center;
+
+    min-width: lengths.size(112);
+    max-height: lengths.size(28);
+    padding: lengths.padding(4) lengths.padding(16);
+  }
+
+  &--small {
+    @include typography.use-font-scale(c1);
+
+    &:not(.rcx-input-box--undecorated) {
+      @extend %input;
+      min-width: lengths.size(112);
+
+      min-height: lengths.size(28);
+      padding: lengths.padding(4) lengths.padding(16);
+
+      &:invalid,
+      &.invalid {
+        @extend %input--invalid;
+      }
+    }
+  }
+
   @include with-colors(
     $color: $input-colors-color,
     $placeholder-color: $input-colors-placeholder-color,
@@ -241,6 +266,10 @@
   .rcx-input-box__wrapper > & {
     width: lengths.size(none);
     min-width: lengths.size(none);
+
+    &--small {
+      padding: lengths.padding(none);
+    }
   }
 }
 
diff --git a/packages/fuselage/src/components/InputBox/InputBox.tsx b/packages/fuselage/src/components/InputBox/InputBox.tsx
index 0345313b60..b7ebc8c3da 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.tsx
@@ -23,6 +23,7 @@ type InputBoxProps = ComponentProps<typeof Box> & {
   error?: string;
   placeholder?: string;
   placeholderVisible?: boolean;
+  small?: boolean;
   type:
     | 'button'
     | 'checkbox'
@@ -69,6 +70,7 @@ export const InputBox = forwardRef(function InputBox(
     multiple,
     placeholderVisible,
     type = 'text',
+    small,
     onChange,
     ...props
   }: InputBoxProps,
@@ -140,6 +142,7 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--multiple={multiple}
         rcx-input-box--placeholder-visible={placeholderVisible}
         rcx-input-box--type={type}
+        rcx-input-box--small={small}
         {...props}
       />
     );
@@ -173,6 +176,7 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--placeholder-visible={placeholderVisible}
         rcx-input-box--type={type}
         rcx-input-box--undecorated
+        rcx-input-box--small={small}
         {...props}
       />
       <Addon children={addon} />
diff --git a/packages/fuselage/src/components/Select/Select.tsx b/packages/fuselage/src/components/Select/Select.tsx
index b7db3d1153..1ce753e5e3 100644
--- a/packages/fuselage/src/components/Select/Select.tsx
+++ b/packages/fuselage/src/components/Select/Select.tsx
@@ -16,6 +16,7 @@ type SelectProps<T, V extends Key> = Omit<
   value?: V | null;
   onChange?: ((key: V) => any) | undefined;
   options: SelectOption[];
+  small?: boolean;
 } & Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'>;
 
 export const Select = forwardRef(function Select<
diff --git a/packages/fuselage/src/components/Select/SelectAria.tsx b/packages/fuselage/src/components/Select/SelectAria.tsx
index 631c85b4b8..1ca961d0ac 100644
--- a/packages/fuselage/src/components/Select/SelectAria.tsx
+++ b/packages/fuselage/src/components/Select/SelectAria.tsx
@@ -26,12 +26,14 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
     placeholder,
     value,
     onChange,
+    small,
     ...props
   }: Omit<AriaSelectProps<T>, 'value' | 'onChange'> & {
     error?: string;
     placeholder?: string;
     value?: Key | null;
     onChange?: ((key: Key) => any) | undefined;
+    small?: boolean;
   } & React.AllHTMLAttributes<HTMLElement>,
   outerRef: Ref<HTMLElement>
 ) {
@@ -55,6 +57,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
   return (
     <>
       <Box
+        {...props}
         disabled={disabled}
         rcx-select
         {...mergeProps(buttonProps, focusProps)}
@@ -64,6 +67,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
         fontScale='p2'
         ref={mergedRef}
         justifyContent='space-between'
+        rcx-input-box--small={small}
         className={[
           error && 'invalid',
           disabled && 'disabled',
@@ -82,6 +86,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
           is='span'
           {...valueProps}
           color={state.selectedItem ? 'default' : 'hint'}
+          {...(small && { fontScale: 'c1' })}
         >
           {state.selectedItem ? state.selectedItem.rendered : placeholder}
         </Box>

From 9e64df08c91a2f6a3c8d9a8dcf22c2d34817ef05 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 10 May 2024 12:49:33 -0300
Subject: [PATCH 2/5] chore: add small variant to `states variations` on inputs
 stories

---
 .../EmailInput/EmailInput.stories.tsx         | 74 ++++++++++-----
 .../NumberInput/NumberInput.stories.tsx       | 71 +++++++++-----
 .../PasswordInput/PasswordInput.stories.tsx   | 65 ++++++++-----
 .../SearchInput/SearchInput.stories.tsx       | 74 ++++++++++-----
 .../src/components/Select/Select.stories.tsx  | 29 ++++++
 .../SelectInput/SelectInput.stories.tsx       | 93 +++++++++++++------
 .../TelephoneInput/TelephoneInput.stories.tsx | 74 ++++++++++-----
 .../TextInput/TextInput.stories.tsx           | 74 ++++++++++-----
 .../components/UrlInput/UrlInput.stories.tsx  | 74 ++++++++++-----
 9 files changed, 436 insertions(+), 192 deletions(-)

diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
index 40116efe15..cad5602879 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
@@ -59,28 +59,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof EmailInput> = () => (
-  <PropsVariationSection
-    component={EmailInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'support@rocket.chat' },
-      'with icon': {
-        addon: <Icon name='at' size='x20' />,
-        value: 'support@rocket.chat',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={EmailInput}
+      common={{ onChange: () => {} }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'support@rocket.chat' },
+        'with icon': {
+          addon: <Icon name='at' size='x20' />,
+          value: 'support@rocket.chat',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={EmailInput}
+      common={{ onChange: () => {}, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'support@rocket.chat' },
+        'with icon': {
+          addon: <Icon name='at' size='x20' />,
+          value: 'support@rocket.chat',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
index 03fd7db447..0e9bde15da 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
@@ -60,25 +60,54 @@ WithPlaceholder.args = {
 };
 
 export const States: ComponentStory<typeof NumberInput> = () => (
-  <PropsVariationSection
-    component={NumberInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 1024 },
-      'with icon': { addon: <Icon name='discover' size='x20' />, value: 1024 },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={NumberInput}
+      common={{ onChange: () => {} }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 1024 },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 1024,
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={NumberInput}
+      common={{ onChange: () => {}, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 1024 },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 1024,
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
index b00d0f399d..76923a44cf 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
@@ -26,25 +26,48 @@ export const WithPlaceholder = () => (
 );
 
 export const States = () => (
-  <PropsVariation
-    component={PasswordInput}
-    common={{ onChange: () => undefined }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'Value' },
-      'with icon': { addon: <Icon name='key' size='x20' />, value: 'Value' },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariation
+      component={PasswordInput}
+      common={{ onChange: () => undefined }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': { addon: <Icon name='key' size='x20' />, value: 'Value' },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariation
+      component={PasswordInput}
+      common={{ onChange: () => undefined, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': { addon: <Icon name='key' size='x20' />, value: 'Value' },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
index 1d116af033..d91c46cecc 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
@@ -67,28 +67,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof SearchInput> = () => (
-  <PropsVariationSection
-    component={SearchInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'Value' },
-      'with icon': {
-        addon: <Icon name='magnifier' size='x20' />,
-        value: 'Value',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={SearchInput}
+      common={{ onChange: () => {} }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='magnifier' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={SearchInput}
+      common={{ onChange: () => {}, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='magnifier' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/Select/Select.stories.tsx b/packages/fuselage/src/components/Select/Select.stories.tsx
index 6e2679d42b..eb7de88eac 100644
--- a/packages/fuselage/src/components/Select/Select.stories.tsx
+++ b/packages/fuselage/src/components/Select/Select.stories.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 
 import type { SelectOption } from '../..';
 import { Select } from '../..';
+import PropsVariationSection from '../../.storybook/PropsVariation';
 
 const options: SelectOption[] = Array.from({
   length: 12,
@@ -78,3 +79,31 @@ NoPlaceholder.args = {
   'aria-label': 'No placeholder select',
   options,
 };
+
+export const States = () => (
+  <>
+    <PropsVariationSection
+      component={(props) => <Select options={options} {...props} />}
+      common={{
+        onChange: () => {},
+      }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'small': { small: true },
+        'small with placeholder': { small: true, placeholder: 'Placeholder' },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
+);
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
index 176adee474..afa8135c8b 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
@@ -83,34 +83,67 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof SelectInput> = () => (
-  <PropsVariationSection
-    component={SelectInput}
-    common={{
-      children: (
-        <>
-          <SelectInputOption value='a'>Item A</SelectInputOption>
-          <SelectInputOption value='b'>Item B</SelectInputOption>
-          <SelectInputOption value='c'>Item C</SelectInputOption>
-        </>
-      ),
-      onChange: () => {},
-    }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'b' },
-      'multiple': { multiple: true, size: 3 },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={SelectInput}
+      common={{
+        children: (
+          <>
+            <SelectInputOption value='a'>Item A</SelectInputOption>
+            <SelectInputOption value='b'>Item B</SelectInputOption>
+            <SelectInputOption value='c'>Item C</SelectInputOption>
+          </>
+        ),
+        onChange: () => {},
+      }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'b' },
+        'multiple': { multiple: true, size: 3 },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={SelectInput}
+      common={{
+        children: (
+          <>
+            <SelectInputOption value='a'>Item A</SelectInputOption>
+            <SelectInputOption value='b'>Item B</SelectInputOption>
+            <SelectInputOption value='c'>Item C</SelectInputOption>
+          </>
+        ),
+        onChange: () => {},
+        small: true,
+      }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'b' },
+        'multiple': { multiple: true, size: 3 },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
index bc468092b9..faa185542e 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
@@ -57,28 +57,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof TelephoneInput> = () => (
-  <PropsVariationSection
-    component={TelephoneInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: '+1234567890' },
-      'with icon': {
-        addon: <Icon name='mobile' size='x20' />,
-        value: '+1234567890',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={TelephoneInput}
+      common={{ onChange: () => {} }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: '+1234567890' },
+        'with icon': {
+          addon: <Icon name='mobile' size='x20' />,
+          value: '+1234567890',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={TelephoneInput}
+      common={{ onChange: () => {}, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: '+1234567890' },
+        'with icon': {
+          addon: <Icon name='mobile' size='x20' />,
+          value: '+1234567890',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/TextInput/TextInput.stories.tsx b/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
index fa090e2865..e54132b7f4 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
@@ -61,28 +61,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof TextInput> = () => (
-  <PropsVariationSection
-    component={TextInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'Value' },
-      'with icon': {
-        addon: <Icon name='keyboard' size='x20' />,
-        value: 'Value',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={TextInput}
+      common={{ onChange: () => {} }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='keyboard' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={TextInput}
+      common={{ onChange: () => {}, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='keyboard' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
index 0b9bbed52f..ca40e75050 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
@@ -26,28 +26,54 @@ export const WithPlaceholder = () => <UrlInput placeholder='Placeholder' />;
 export const WithValue = () => <UrlInput defaultValue='https://rocket.chat' />;
 
 export const States = () => (
-  <PropsVariation
-    component={UrlInput}
-    common={{ onChange: () => undefined }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'https://rocket.chat' },
-      'with icon': {
-        addon: <Icon name='discover' size='x20' />,
-        value: 'https://rocket.chat',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariation
+      component={UrlInput}
+      common={{ onChange: () => undefined }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'https://rocket.chat' },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 'https://rocket.chat',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariation
+      component={UrlInput}
+      common={{ onChange: () => undefined, small: true }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'https://rocket.chat' },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 'https://rocket.chat',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );

From 33baab7f281dd07e91d8fc933b0697d1ffbb5892 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 10 May 2024 12:52:26 -0300
Subject: [PATCH 3/5] chore: changeset

---
 .changeset/early-eels-shake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/early-eels-shake.md

diff --git a/.changeset/early-eels-shake.md b/.changeset/early-eels-shake.md
new file mode 100644
index 0000000000..9358627528
--- /dev/null
+++ b/.changeset/early-eels-shake.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): new `InputBox` small variant

From 6fd9d82ea4b955796c59b647fa36f108afded45f Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 10 May 2024 16:15:03 -0300
Subject: [PATCH 4/5] tests: a11y

---
 .../components/EmailInput/EmailInput.spec.tsx |   26 +-
 .../EmailInput/EmailInput.stories.tsx         |    8 +-
 .../__snapshots__/EmailInput.spec.tsx.snap    | 1669 ++++++++
 .../src/components/InputBox/InputBox.spec.tsx |   31 +-
 .../components/InputBox/InputBox.stories.tsx  |    5 +-
 .../__snapshots__/InputBox.spec.tsx.snap      |  195 +
 .../NumberInput/NumberInput.spec.tsx          |   29 +-
 .../NumberInput/NumberInput.stories.tsx       |    6 +-
 .../__snapshots__/NumberInput.spec.tsx.snap   | 1655 +++++++
 .../PasswordInput/PasswordInput.spec.tsx      |   29 +-
 .../PasswordInput/PasswordInput.stories.tsx   |   35 +-
 .../__snapshots__/PasswordInput.spec.tsx.snap | 2495 +++++++++++
 .../SearchInput/SearchInput.spec.tsx          |   29 +-
 .../SearchInput/SearchInput.stories.tsx       |    6 +-
 .../__snapshots__/SearchInput.spec.tsx.snap   | 1669 ++++++++
 .../src/components/Select/Select.stories.tsx  |   17 +-
 .../SelectInput/SelectInput.spec.tsx          |   29 +-
 .../SelectInput/SelectInput.stories.tsx       |   14 +-
 .../__snapshots__/SelectInput.spec.tsx.snap   | 3802 +++++++++++++++++
 .../TelephoneInput/TelephoneInput.spec.tsx    |   29 +-
 .../TelephoneInput/TelephoneInput.stories.tsx |   10 +-
 .../TelephoneInput.spec.tsx.snap              | 1669 ++++++++
 .../components/TextInput/TextInput.spec.tsx   |   31 +-
 .../TextInput/TextInput.stories.tsx           |    6 +-
 .../__snapshots__/TextInput.spec.tsx.snap     | 1669 ++++++++
 .../src/components/UrlInput/UrlInput.spec.tsx |   29 +-
 .../components/UrlInput/UrlInput.stories.tsx  |   35 +-
 .../__snapshots__/UrlInput.spec.tsx.snap      | 1669 ++++++++
 28 files changed, 16806 insertions(+), 90 deletions(-)
 create mode 100644 packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
 create mode 100644 packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap

diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
index fb1bd27aa1..66eb90789c 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
@@ -1,13 +1,31 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './EmailInput.stories';
 
-const { Default } = composeStories(stories);
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[EmailInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
index cad5602879..964a85fade 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
@@ -27,13 +27,13 @@ export default {
 } as ComponentMeta<typeof EmailInput>;
 
 const Template: ComponentStory<typeof EmailInput> = (args) => (
-  <EmailInput {...args} />
+  <EmailInput aria-label='email' {...args} />
 );
 
 export const Default: ComponentStory<typeof EmailInput> = Template.bind({});
 
 export const WithIconAddon: ComponentStory<typeof EmailInput> = () => (
-  <EmailInput addon={<Icon name='send' size='x20' />} />
+  <EmailInput aria-label='email' addon={<Icon name='send' size='x20' />} />
 );
 
 export const Invalid: ComponentStory<typeof EmailInput> = Template.bind({});
@@ -62,7 +62,7 @@ export const States: ComponentStory<typeof EmailInput> = () => (
   <>
     <PropsVariationSection
       component={EmailInput}
-      common={{ onChange: () => {} }}
+      common={{ 'onChange': () => {}, 'aria-label': 'email' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -86,7 +86,7 @@ export const States: ComponentStory<typeof EmailInput> = () => (
     />
     <PropsVariationSection
       component={EmailInput}
-      common={{ onChange: () => {}, small: true }}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'email' }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
new file mode 100644
index 0000000000..c8a9dca46c
--- /dev/null
+++ b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
@@ -0,0 +1,1669 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[EmailInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      size="1"
+      type="email"
+    />
+  </div>
+</body>
+`;
+
+exports[`[EmailInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      disabled=""
+      size="1"
+      type="email"
+    />
+  </div>
+</body>
+`;
+
+exports[`[EmailInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      size="1"
+      type="email"
+    />
+  </div>
+</body>
+`;
+
+exports[`[EmailInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                disabled=""
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                disabled=""
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                disabled=""
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                disabled=""
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="email"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="email"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
+                size="1"
+                type="email"
+                value="support@rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="email"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
+                  size="1"
+                  type="email"
+                  value="support@rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[EmailInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="email"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
+        size="1"
+        type="email"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[EmailInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      placeholder="Placeholder"
+      size="1"
+      type="email"
+    />
+  </div>
+</body>
+`;
+
+exports[`[EmailInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      size="1"
+      type="email"
+      value="support@rocket.chat"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
index fa45915f2b..a25deddfc2 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
@@ -1,14 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { InputBox } from '.';
+import * as stories from './InputBox.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[InputBox Component]', () => {
-  it('renders InputBox without crashing', () => {
-    render(<InputBox type='text' />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
 
-  it('renders InputBox.Skeleton without crashing', () => {
-    render(<InputBox.Skeleton />);
-  });
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
index e54b46276b..012ee29523 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
@@ -34,7 +34,7 @@ export default {
 } as ComponentMeta<typeof Icon>;
 
 const Template: ComponentStory<typeof InputBox> = (args) => (
-  <InputBox {...args} />
+  <InputBox aria-label='Value' {...args} />
 );
 
 export const Default: ComponentStory<typeof InputBox> = Template.bind({});
@@ -95,12 +95,13 @@ export const SmallVariants: ComponentStory<typeof InputBox> = () => (
     alignItems='flex-start'
     style={{ gap: '8px' }}
   >
-    <InputBox type='text' small placeholder='Name' />
+    <InputBox type='text' small placeholder='Name' aria-label='Name' />
     <InputBox
       type='text'
       small
       placeholder='Search'
       addon={<Icon name='magnifier' size='x20' />}
+      aria-label='Search'
     />
   </Box>
 );
diff --git a/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
new file mode 100644
index 0000000000..8bc72718a0
--- /dev/null
+++ b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[InputBox Component] renders Date without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="Value"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
+        size="1"
+        type="date"
+        value="Value"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="Value"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+      value="Value"
+    />
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="Value"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      disabled=""
+      size="1"
+      type="text"
+      value="Value"
+    />
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders InputBox.Skeleton without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-skeleton__input"
+    >
+      <span
+        class="rcx-box rcx-box--full rcx-skeleton--text rcx-skeleton rcx-css-1qcz93u"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="Value"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+      value="Value"
+    />
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders SmallVariants without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-1dl0zzg"
+      style="gap: 8px;"
+    >
+      <input
+        aria-label="Name"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+        placeholder="Name"
+        size="1"
+        type="text"
+      />
+      <label
+        class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+      >
+        <input
+          aria-label="Search"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+          placeholder="Search"
+          size="1"
+          type="text"
+        />
+        <span
+          class="rcx-box rcx-box--full rcx-input-box__addon"
+        >
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          >
+            
+          </i>
+        </span>
+      </label>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders Time without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="Value"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
+        size="1"
+        type="time"
+        value="Value"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders WithAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="Value"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+        size="1"
+        type="text"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[InputBox Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="Value"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      placeholder="Placeholder"
+      size="1"
+      type="text"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
index 88264ab948..71a888af1f 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { NumberInput } from '.';
+import * as stories from './NumberInput.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[NumberInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<NumberInput />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
index 0e9bde15da..a69a01fbc7 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
@@ -33,7 +33,7 @@ export default {
 } as ComponentMeta<typeof NumberInput>;
 
 const Template: ComponentStory<typeof NumberInput> = (args) => (
-  <NumberInput {...args} />
+  <NumberInput aria-label='number' {...args} />
 );
 
 export const Default: ComponentStory<typeof NumberInput> = Template.bind({});
@@ -63,7 +63,7 @@ export const States: ComponentStory<typeof NumberInput> = () => (
   <>
     <PropsVariationSection
       component={NumberInput}
-      common={{ onChange: () => {} }}
+      common={{ 'onChange': () => {}, 'aria-label': 'number' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -87,7 +87,7 @@ export const States: ComponentStory<typeof NumberInput> = () => (
     />
     <PropsVariationSection
       component={NumberInput}
-      common={{ onChange: () => {}, small: true }}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'number' }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap b/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
new file mode 100644
index 0000000000..c29fae6f78
--- /dev/null
+++ b/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
@@ -0,0 +1,1655 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[NumberInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="number"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+      size="1"
+      type="number"
+    />
+  </div>
+</body>
+`;
+
+exports[`[NumberInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="number"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+      disabled=""
+      size="1"
+      type="number"
+    />
+  </div>
+</body>
+`;
+
+exports[`[NumberInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="number"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+      size="1"
+      type="number"
+    />
+  </div>
+</body>
+`;
+
+exports[`[NumberInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                disabled=""
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                disabled=""
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                disabled=""
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                disabled=""
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="number"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="number"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
+                size="1"
+                type="number"
+                value="1024"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="number"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
+                  size="1"
+                  type="number"
+                  value="1024"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[NumberInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="number"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
+        size="1"
+        type="number"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[NumberInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="number"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+      size="1"
+      type="number"
+      value="1024"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
index d33439159b..deb2544900 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import PasswordInput from '.';
+import * as stories from './PasswordInput.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[PasswordInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<PasswordInput />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
index 76923a44cf..815c4b700d 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
@@ -1,35 +1,42 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Icon, PasswordInput } from '../..';
-import PropsVariation from '../../.storybook/PropsVariation';
+import { PropsVariationSection } from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/PasswordInput',
   component: PasswordInput,
   parameters: { jest: ['PasswordInput.spec.tsx'] },
-};
+} as ComponentMeta<typeof PasswordInput>;
 
-export const Default = () => <PasswordInput />;
+export const Default: ComponentStory<typeof PasswordInput> = () => (
+  <PasswordInput aria-label='password' />
+);
 
-export const WithValue = () => <PasswordInput defaultValue='password' />;
+export const WithValue = () => (
+  <PasswordInput aria-label='password' defaultValue='password' />
+);
 
 export const WithIconAddon = () => (
-  <PasswordInput addon={<Icon name='send' size={20} />} />
+  <PasswordInput aria-label='password' addon={<Icon name='send' size={20} />} />
 );
 
-export const Invalid = () => <PasswordInput error='Error' />;
+export const Invalid = () => (
+  <PasswordInput aria-label='password' error='Error' />
+);
 
-export const Disabled = () => <PasswordInput disabled />;
+export const Disabled = () => <PasswordInput aria-label='password' disabled />;
 
 export const WithPlaceholder = () => (
-  <PasswordInput placeholder='Placeholder' />
+  <PasswordInput aria-label='password' placeholder='Placeholder' />
 );
 
 export const States = () => (
   <>
-    <PropsVariation
+    <PropsVariationSection
       component={PasswordInput}
-      common={{ onChange: () => undefined }}
+      common={{ 'onChange': () => undefined, 'aria-label': 'password' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -48,9 +55,13 @@ export const States = () => (
         'errored + focus': { className: 'focus', error: 'Error' },
       }}
     />
-    <PropsVariation
+    <PropsVariationSection
       component={PasswordInput}
-      common={{ onChange: () => undefined, small: true }}
+      common={{
+        'onChange': () => undefined,
+        'small': true,
+        'aria-label': 'password',
+      }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap b/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
new file mode 100644
index 0000000000..c16663cd2e
--- /dev/null
+++ b/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
@@ -0,0 +1,2495 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[PasswordInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        size="1"
+        type="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[PasswordInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        disabled=""
+        size="1"
+        type="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[PasswordInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        size="1"
+        type="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[PasswordInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  placeholder="Placeholder"
+                  size="1"
+                  type="password"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="password"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
+                  size="1"
+                  type="password"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[PasswordInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        size="1"
+        type="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-1bepdyv"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[PasswordInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        placeholder="Placeholder"
+        size="1"
+        type="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[PasswordInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        size="1"
+        type="password"
+        value="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
index f514dd320f..648f18ca7b 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { SearchInput } from '.';
+import * as stories from './SearchInput.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[SearchInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<SearchInput />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
index d91c46cecc..d4878cda45 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
@@ -33,7 +33,7 @@ export default {
 } as ComponentMeta<typeof SearchInput>;
 
 const Template: ComponentStory<typeof SearchInput> = (args) => (
-  <SearchInput {...args} />
+  <SearchInput aria-label='search' {...args} />
 );
 
 export const Default: ComponentStory<typeof SearchInput> = Template.bind({});
@@ -70,7 +70,7 @@ export const States: ComponentStory<typeof SearchInput> = () => (
   <>
     <PropsVariationSection
       component={SearchInput}
-      common={{ onChange: () => {} }}
+      common={{ 'onChange': () => {}, 'aria-label': 'search' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -94,7 +94,7 @@ export const States: ComponentStory<typeof SearchInput> = () => (
     />
     <PropsVariationSection
       component={SearchInput}
-      common={{ onChange: () => {}, small: true }}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'search' }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
new file mode 100644
index 0000000000..0ed896609d
--- /dev/null
+++ b/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
@@ -0,0 +1,1669 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[SearchInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="search"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+      size="1"
+      type="search"
+    />
+  </div>
+</body>
+`;
+
+exports[`[SearchInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="search"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+      disabled=""
+      size="1"
+      type="search"
+    />
+  </div>
+</body>
+`;
+
+exports[`[SearchInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="search"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+      size="1"
+      type="search"
+    />
+  </div>
+</body>
+`;
+
+exports[`[SearchInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                disabled=""
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                disabled=""
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                disabled=""
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                disabled=""
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="search"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="search"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
+                size="1"
+                type="search"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="search"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
+                  size="1"
+                  type="search"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[SearchInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="search"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
+        size="1"
+        type="search"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SearchInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="search"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+      placeholder="Placeholder"
+      size="1"
+      type="search"
+    />
+  </div>
+</body>
+`;
+
+exports[`[SearchInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="search"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+      size="1"
+      type="search"
+      value="cat rooms"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/Select/Select.stories.tsx b/packages/fuselage/src/components/Select/Select.stories.tsx
index eb7de88eac..5023b304f2 100644
--- a/packages/fuselage/src/components/Select/Select.stories.tsx
+++ b/packages/fuselage/src/components/Select/Select.stories.tsx
@@ -37,12 +37,21 @@ export default {
   },
 } as ComponentMeta<typeof Select>;
 
-const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+const Template: ComponentStory<typeof Select> = (args) => (
+  <Select aria-label='select' {...args} />
+);
 
 const TemplateControlled: ComponentStory<typeof Select> = (args) => {
   const [value, setValue] = React.useState<React.Key>('3');
 
-  return <Select {...args} value={value} onChange={setValue as any} />;
+  return (
+    <Select
+      aria-label='select'
+      {...args}
+      value={value}
+      onChange={setValue as any}
+    />
+  );
 };
 
 export const Default: ComponentStory<typeof Select> = Template.bind({});
@@ -83,7 +92,9 @@ NoPlaceholder.args = {
 export const States = () => (
   <>
     <PropsVariationSection
-      component={(props) => <Select options={options} {...props} />}
+      component={(props) => (
+        <Select options={options} aria-label='select' {...props} />
+      )}
       common={{
         onChange: () => {},
       }}
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
index ac32100909..1d00c170f7 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
@@ -1,8 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { SelectInput } from '.';
+import * as stories from './SelectInput.stories';
 
-it('renders without crashing', () => {
-  render(<SelectInput />);
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[SelectInput Component]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
index afa8135c8b..76f106549a 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
@@ -34,7 +34,7 @@ export default {
 } as ComponentMeta<typeof SelectInput>;
 
 const Template: ComponentStory<typeof SelectInput> = (args) => (
-  <SelectInput {...args}>
+  <SelectInput aria-label='select' {...args}>
     <SelectInputOption value='a'>Item A</SelectInputOption>
     <SelectInputOption value='b'>Item B</SelectInputOption>
     <SelectInputOption value='c'>Item C</SelectInputOption>
@@ -87,14 +87,15 @@ export const States: ComponentStory<typeof SelectInput> = () => (
     <PropsVariationSection
       component={SelectInput}
       common={{
-        children: (
+        'aria-label': 'select',
+        'children': (
           <>
             <SelectInputOption value='a'>Item A</SelectInputOption>
             <SelectInputOption value='b'>Item B</SelectInputOption>
             <SelectInputOption value='c'>Item C</SelectInputOption>
           </>
         ),
-        onChange: () => {},
+        'onChange': () => {},
       }}
       xAxis={{
         'default': {},
@@ -117,15 +118,16 @@ export const States: ComponentStory<typeof SelectInput> = () => (
     <PropsVariationSection
       component={SelectInput}
       common={{
-        children: (
+        'aria-label': 'select',
+        'children': (
           <>
             <SelectInputOption value='a'>Item A</SelectInputOption>
             <SelectInputOption value='b'>Item B</SelectInputOption>
             <SelectInputOption value='c'>Item C</SelectInputOption>
           </>
         ),
-        onChange: () => {},
-        small: true,
+        'onChange': () => {},
+        'small': true,
       }}
       xAxis={{
         'small': {},
diff --git a/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap b/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
new file mode 100644
index 0000000000..12bee89051
--- /dev/null
+++ b/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
@@ -0,0 +1,3802 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[SelectInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+        disabled=""
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders Multiple without crashing 1`] = `
+<body>
+  <div>
+    <select
+      aria-label="select"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box"
+      multiple=""
+      size="3"
+    >
+      <option
+        class="rcx-box rcx-box--full rcx-input-box__option"
+        value="a"
+      >
+        Item A
+      </option>
+      <option
+        class="rcx-box rcx-box--full rcx-input-box__option"
+        value="b"
+      >
+        Item B
+      </option>
+      <option
+        class="rcx-box rcx-box--full rcx-input-box__option"
+        value="c"
+      >
+        Item C
+      </option>
+    </select>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders MultipleWithAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box"
+        multiple=""
+        size="3"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            multiple
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  disabled=""
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+                  disabled=""
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  disabled=""
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
+                disabled=""
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            multiple
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  disabled=""
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+                  disabled=""
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  disabled=""
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
+                disabled=""
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
+                    value=""
+                  >
+                    Placeholder
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <select
+                  aria-label="select"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
+                  size="1"
+                >
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="a"
+                  >
+                    Item A
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="b"
+                  >
+                    Item B
+                  </option>
+                  <option
+                    class="rcx-box rcx-box--full rcx-input-box__option"
+                    value="c"
+                  >
+                    Item C
+                  </option>
+                </select>
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <select
+                aria-label="select"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
+                multiple=""
+                size="1"
+              >
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="a"
+                >
+                  Item A
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="b"
+                >
+                  Item B
+                </option>
+                <option
+                  class="rcx-box rcx-box--full rcx-input-box__option"
+                  value="c"
+                >
+                  Item C
+                </option>
+              </select>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders WithAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__placeholder"
+          value=""
+        >
+          Placeholder
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[SelectInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          selected=""
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
index 7d5cbe55af..4d1f8f5bff 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { TelephoneInput } from '.';
+import * as stories from './TelephoneInput.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[TelephoneInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<TelephoneInput />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
index faa185542e..9fd60d56c8 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
@@ -26,7 +26,7 @@ export default {
 } as ComponentMeta<typeof TelephoneInput>;
 
 const Template: ComponentStory<typeof TelephoneInput> = (args) => (
-  <TelephoneInput {...args} />
+  <TelephoneInput aria-label='telephone' {...args} />
 );
 
 export const Default: ComponentStory<typeof TelephoneInput> = Template.bind({});
@@ -60,7 +60,7 @@ export const States: ComponentStory<typeof TelephoneInput> = () => (
   <>
     <PropsVariationSection
       component={TelephoneInput}
-      common={{ onChange: () => {} }}
+      common={{ 'onChange': () => {}, 'aria-label': 'telephone' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -84,7 +84,11 @@ export const States: ComponentStory<typeof TelephoneInput> = () => (
     />
     <PropsVariationSection
       component={TelephoneInput}
-      common={{ onChange: () => {}, small: true }}
+      common={{
+        'onChange': () => {},
+        'small': true,
+        'aria-label': 'telephone',
+      }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap b/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
new file mode 100644
index 0000000000..ae67309cf3
--- /dev/null
+++ b/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
@@ -0,0 +1,1669 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[TelephoneInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="telephone"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+      size="1"
+      type="tel"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TelephoneInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="telephone"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+      disabled=""
+      size="1"
+      type="tel"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TelephoneInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="telephone"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+      size="1"
+      type="tel"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TelephoneInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                disabled=""
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                disabled=""
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                disabled=""
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                disabled=""
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="tel"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="telephone"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
+                size="1"
+                type="tel"
+                value="+1234567890"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="telephone"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
+                  size="1"
+                  type="tel"
+                  value="+1234567890"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[TelephoneInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="telephone"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
+        size="1"
+        type="tel"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[TelephoneInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="telephone"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+      placeholder="Placeholder"
+      size="1"
+      type="tel"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TelephoneInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="telephone"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+      size="1"
+      type="tel"
+      value="+1 (213) 724-2528"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
index bc9d399891..54021ca354 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { TextInput } from '.';
+import * as stories from './TextInput.stories';
 
-describe('[TextInput]', () => {
-  it('renders without crashing', () => {
-    render(<TextInput />);
-  });
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[TextInput Component]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/TextInput/TextInput.stories.tsx b/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
index e54132b7f4..88829e6984 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
@@ -26,7 +26,7 @@ export default {
 } as ComponentMeta<typeof TextInput>;
 
 const Template: ComponentStory<typeof TextInput> = (args) => (
-  <TextInput {...args} />
+  <TextInput aria-label='text' {...args} />
 );
 
 export const Default: ComponentStory<typeof TextInput> = Template.bind({});
@@ -64,7 +64,7 @@ export const States: ComponentStory<typeof TextInput> = () => (
   <>
     <PropsVariationSection
       component={TextInput}
-      common={{ onChange: () => {} }}
+      common={{ 'onChange': () => {}, 'aria-label': 'text' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -88,7 +88,7 @@ export const States: ComponentStory<typeof TextInput> = () => (
     />
     <PropsVariationSection
       component={TextInput}
-      common={{ onChange: () => {}, small: true }}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'text' }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap b/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
new file mode 100644
index 0000000000..7145048bac
--- /dev/null
+++ b/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
@@ -0,0 +1,1669 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[TextInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="text"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TextInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="text"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      disabled=""
+      size="1"
+      type="text"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TextInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="text"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TextInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                disabled=""
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                disabled=""
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                disabled=""
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                disabled=""
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="text"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="text"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
+                size="1"
+                type="text"
+                value="Value"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="text"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
+                  size="1"
+                  type="text"
+                  value="Value"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[TextInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="text"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+        size="1"
+        type="text"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[TextInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="text"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      placeholder="Placeholder"
+      size="1"
+      type="text"
+    />
+  </div>
+</body>
+`;
+
+exports[`[TextInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="text"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+      value="Value"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
index c86b8a6572..6d1282c4a1 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import UrlInput from '.';
+import * as stories from './UrlInput.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[UrlInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<UrlInput />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
index ca40e75050..2710a10730 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
@@ -1,7 +1,8 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Icon, UrlInput } from '../..';
-import PropsVariation from '../../.storybook/PropsVariation';
+import { PropsVariationSection } from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/UrlInput',
@@ -9,27 +10,33 @@ export default {
   parameters: {
     jest: ['UrlInput.spec.tsx'],
   },
-};
+} as ComponentMeta<typeof UrlInput>;
 
-export const Default = () => <UrlInput />;
+export const Default: ComponentStory<typeof UrlInput> = () => (
+  <UrlInput aria-label='url' />
+);
 
 export const WithIconAddon = () => (
-  <UrlInput addon={<Icon name='send' size='x20' />} />
+  <UrlInput aria-label='url' addon={<Icon name='send' size='x20' />} />
 );
 
-export const Invalid = () => <UrlInput error='Error' />;
+export const Invalid = () => <UrlInput aria-label='url' error='Error' />;
 
-export const Disabled = () => <UrlInput disabled />;
+export const Disabled = () => <UrlInput aria-label='url' disabled />;
 
-export const WithPlaceholder = () => <UrlInput placeholder='Placeholder' />;
+export const WithPlaceholder = () => (
+  <UrlInput aria-label='url' placeholder='Placeholder' />
+);
 
-export const WithValue = () => <UrlInput defaultValue='https://rocket.chat' />;
+export const WithValue = () => (
+  <UrlInput aria-label='url' defaultValue='https://rocket.chat' />
+);
 
 export const States = () => (
   <>
-    <PropsVariation
+    <PropsVariationSection
       component={UrlInput}
-      common={{ onChange: () => undefined }}
+      common={{ 'onChange': () => undefined, 'aria-label': 'url' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -51,9 +58,13 @@ export const States = () => (
         'errored + focus': { className: 'focus', error: 'Error' },
       }}
     />
-    <PropsVariation
+    <PropsVariationSection
       component={UrlInput}
-      common={{ onChange: () => undefined, small: true }}
+      common={{
+        'onChange': () => undefined,
+        'small': true,
+        'aria-label': 'url',
+      }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },
diff --git a/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap b/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
new file mode 100644
index 0000000000..38e77e64fb
--- /dev/null
+++ b/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
@@ -0,0 +1,1669 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[UrlInput Component] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="url"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+      size="1"
+      type="url"
+    />
+  </div>
+</body>
+`;
+
+exports[`[UrlInput Component] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="url"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+      disabled=""
+      size="1"
+      type="url"
+    />
+  </div>
+</body>
+`;
+
+exports[`[UrlInput Component] renders Invalid without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="url"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+      size="1"
+      type="url"
+    />
+  </div>
+</body>
+`;
+
+exports[`[UrlInput Component] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                disabled=""
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                disabled=""
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
+    >
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with placeholder
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with value
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            with icon
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            small
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                disabled=""
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                disabled=""
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                disabled=""
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                  disabled=""
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
+          >
+            errored + focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
+                placeholder="Placeholder"
+                size="1"
+                type="url"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <input
+                aria-label="url"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
+                size="1"
+                type="url"
+                value="https://rocket.chat"
+              />
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
+              >
+                <input
+                  aria-label="url"
+                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
+                  size="1"
+                  type="url"
+                  value="https://rocket.chat"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-input-box__addon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                </span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
+exports[`[UrlInput Component] renders WithIconAddon without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="url"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+        size="1"
+        type="url"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
+        >
+          〈
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[UrlInput Component] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="url"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+      placeholder="Placeholder"
+      size="1"
+      type="url"
+    />
+  </div>
+</body>
+`;
+
+exports[`[UrlInput Component] renders WithValue without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="url"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+      size="1"
+      type="url"
+      value="https://rocket.chat"
+    />
+  </div>
+</body>
+`;

From 8eb9720d0f5d771bd06adc3789ef0639eb2509b6 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 10 May 2024 16:57:24 -0300
Subject: [PATCH 5/5] chore: update tests and snaps

---
 .../components/EmailInput/EmailInput.spec.tsx |   29 +-
 .../__snapshots__/EmailInput.spec.tsx.snap    | 1657 +-------
 .../src/components/InputBox/InputBox.spec.tsx |   29 +-
 .../__snapshots__/InputBox.spec.tsx.snap      |  182 +-
 .../NumberInput/NumberInput.spec.tsx          |   29 +-
 .../__snapshots__/NumberInput.spec.tsx.snap   | 1643 +------
 .../PasswordInput/PasswordInput.spec.tsx      |   29 +-
 .../__snapshots__/PasswordInput.spec.tsx.snap | 2469 +----------
 .../SearchInput/SearchInput.spec.tsx          |   29 +-
 .../__snapshots__/SearchInput.spec.tsx.snap   | 1657 +-------
 .../SelectInput/SelectInput.spec.tsx          |   29 +-
 .../__snapshots__/SelectInput.spec.tsx.snap   | 3758 +----------------
 .../TelephoneInput/TelephoneInput.spec.tsx    |   29 +-
 .../TelephoneInput.spec.tsx.snap              | 1657 +-------
 .../components/TextInput/TextInput.spec.tsx   |   29 +-
 .../__snapshots__/TextInput.spec.tsx.snap     | 1657 +-------
 .../src/components/UrlInput/UrlInput.spec.tsx |   29 +-
 .../__snapshots__/UrlInput.spec.tsx.snap      | 1657 +-------
 18 files changed, 99 insertions(+), 16499 deletions(-)

diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
index 66eb90789c..849c54dc15 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './EmailInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[EmailInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
index c8a9dca46c..f0627fbbda 100644
--- a/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[EmailInput Component] renders Default without crashing 1`] = `
+exports[`[EmailInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -12,1658 +12,3 @@ exports[`[EmailInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[EmailInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="email"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-      disabled=""
-      size="1"
-      type="email"
-    />
-  </div>
-</body>
-`;
-
-exports[`[EmailInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="email"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-      size="1"
-      type="email"
-    />
-  </div>
-</body>
-`;
-
-exports[`[EmailInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                disabled=""
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                disabled=""
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                disabled=""
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                disabled=""
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  hover"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  hover"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  active"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  active"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="email"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="email"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-email rcx-input-box  focus"
-                size="1"
-                type="email"
-                value="support@rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="email"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box  focus"
-                  size="1"
-                  type="email"
-                  value="support@rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-at rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[EmailInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="email"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-email rcx-input-box"
-        size="1"
-        type="email"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[EmailInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="email"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-      placeholder="Placeholder"
-      size="1"
-      type="email"
-    />
-  </div>
-</body>
-`;
-
-exports[`[EmailInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="email"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
-      size="1"
-      type="email"
-      value="support@rocket.chat"
-    />
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
index a25deddfc2..12c293dc80 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './InputBox.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[InputBox Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
index 8bc72718a0..8842b48a93 100644
--- a/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
+++ b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
@@ -1,77 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[InputBox Component] renders Date without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="Value"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
-        size="1"
-        type="date"
-        value="Value"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders Default without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="Value"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      size="1"
-      type="text"
-      value="Value"
-    />
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="Value"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      disabled=""
-      size="1"
-      type="text"
-      value="Value"
-    />
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders InputBox.Skeleton without crashing 1`] = `
-<body>
-  <div>
-    <div
-      class="rcx-box rcx-box--full rcx-skeleton__input"
-    >
-      <span
-        class="rcx-box rcx-box--full rcx-skeleton--text rcx-skeleton rcx-css-1qcz93u"
-      />
-    </div>
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders Invalid without crashing 1`] = `
+exports[`[InputBox Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -84,112 +13,3 @@ exports[`[InputBox Component] renders Invalid without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[InputBox Component] renders SmallVariants without crashing 1`] = `
-<body>
-  <div>
-    <div
-      class="rcx-box rcx-box--full rcx-css-1dl0zzg"
-      style="gap: 8px;"
-    >
-      <input
-        aria-label="Name"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-        placeholder="Name"
-        size="1"
-        type="text"
-      />
-      <label
-        class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-      >
-        <input
-          aria-label="Search"
-          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-          placeholder="Search"
-          size="1"
-          type="text"
-        />
-        <span
-          class="rcx-box rcx-box--full rcx-input-box__addon"
-        >
-          <i
-            aria-hidden="true"
-            class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-          >
-            
-          </i>
-        </span>
-      </label>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders Time without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="Value"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
-        size="1"
-        type="time"
-        value="Value"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders WithAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="Value"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-        size="1"
-        type="text"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[InputBox Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="Value"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      placeholder="Placeholder"
-      size="1"
-      type="text"
-    />
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
index 71a888af1f..5146e5df1d 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './NumberInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[NumberInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap b/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
index c29fae6f78..0e71bc5018 100644
--- a/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[NumberInput Component] renders Default without crashing 1`] = `
+exports[`[NumberInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -12,1644 +12,3 @@ exports[`[NumberInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[NumberInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="number"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-      disabled=""
-      size="1"
-      type="number"
-    />
-  </div>
-</body>
-`;
-
-exports[`[NumberInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="number"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-      size="1"
-      type="number"
-    />
-  </div>
-</body>
-`;
-
-exports[`[NumberInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                disabled=""
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                disabled=""
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                disabled=""
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                disabled=""
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  hover"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  hover"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  active"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  active"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="number"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="number"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-number rcx-input-box  focus"
-                size="1"
-                type="number"
-                value="1024"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="number"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box  focus"
-                  size="1"
-                  type="number"
-                  value="1024"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[NumberInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="number"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-number rcx-input-box"
-        size="1"
-        type="number"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[NumberInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="number"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
-      size="1"
-      type="number"
-      value="1024"
-    />
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
index deb2544900..6253e6099c 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './PasswordInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[PasswordInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap b/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
index c16663cd2e..64c9b1847a 100644
--- a/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[PasswordInput Component] renders Default without crashing 1`] = `
+exports[`[PasswordInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <label
@@ -26,2470 +26,3 @@ exports[`[PasswordInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[PasswordInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-    >
-      <input
-        aria-label="password"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-        disabled=""
-        size="1"
-        type="password"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[PasswordInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-    >
-      <input
-        aria-label="password"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-        size="1"
-        type="password"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[PasswordInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  hover"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  active"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  placeholder="Placeholder"
-                  size="1"
-                  type="password"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="password"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box  focus"
-                  size="1"
-                  type="password"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-key rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[PasswordInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="password"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-        size="1"
-        type="password"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-1bepdyv"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[PasswordInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="password"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-        placeholder="Placeholder"
-        size="1"
-        type="password"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[PasswordInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="password"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
-        size="1"
-        type="password"
-        value="password"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
index 648f18ca7b..0a18c85bcb 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './SearchInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[SearchInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
index 0ed896609d..9a896795d9 100644
--- a/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[SearchInput Component] renders Default without crashing 1`] = `
+exports[`[SearchInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -12,1658 +12,3 @@ exports[`[SearchInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[SearchInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="search"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-      disabled=""
-      size="1"
-      type="search"
-    />
-  </div>
-</body>
-`;
-
-exports[`[SearchInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="search"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-      size="1"
-      type="search"
-    />
-  </div>
-</body>
-`;
-
-exports[`[SearchInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                disabled=""
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                disabled=""
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                disabled=""
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                disabled=""
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  hover"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  hover"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  active"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  active"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="search"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="search"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-search rcx-input-box  focus"
-                size="1"
-                type="search"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="search"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box  focus"
-                  size="1"
-                  type="search"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[SearchInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="search"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-search rcx-input-box"
-        size="1"
-        type="search"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[SearchInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="search"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-      placeholder="Placeholder"
-      size="1"
-      type="search"
-    />
-  </div>
-</body>
-`;
-
-exports[`[SearchInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="search"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
-      size="1"
-      type="search"
-      value="cat rooms"
-    />
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
index 1d00c170f7..a2758e85b9 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './SelectInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[SelectInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap b/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
index 12bee89051..3a89177968 100644
--- a/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[SelectInput Component] renders Default without crashing 1`] = `
+exports[`[SelectInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <label
@@ -44,3759 +44,3 @@ exports[`[SelectInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[SelectInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-    >
-      <select
-        aria-label="select"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-        disabled=""
-        size="1"
-      >
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="a"
-        >
-          Item A
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="b"
-        >
-          Item B
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="c"
-        >
-          Item C
-        </option>
-      </select>
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-    >
-      <select
-        aria-label="select"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-        size="1"
-      >
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="a"
-        >
-          Item A
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="b"
-        >
-          Item B
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="c"
-        >
-          Item C
-        </option>
-      </select>
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders Multiple without crashing 1`] = `
-<body>
-  <div>
-    <select
-      aria-label="select"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box"
-      multiple=""
-      size="3"
-    >
-      <option
-        class="rcx-box rcx-box--full rcx-input-box__option"
-        value="a"
-      >
-        Item A
-      </option>
-      <option
-        class="rcx-box rcx-box--full rcx-input-box__option"
-        value="b"
-      >
-        Item B
-      </option>
-      <option
-        class="rcx-box rcx-box--full rcx-input-box__option"
-        value="c"
-      >
-        Item C
-      </option>
-    </select>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders MultipleWithAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <select
-        aria-label="select"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box"
-        multiple=""
-        size="3"
-      >
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="a"
-        >
-          Item A
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="b"
-        >
-          Item B
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="c"
-        >
-          Item C
-        </option>
-      </select>
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            multiple
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  disabled=""
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-                  disabled=""
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  disabled=""
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
-                disabled=""
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            multiple
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  disabled=""
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-                  disabled=""
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  disabled=""
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
-                disabled=""
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  hover"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  hover rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  active"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  active rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__placeholder"
-                    value=""
-                  >
-                    Placeholder
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <select
-                  aria-label="select"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box  focus"
-                  size="1"
-                >
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="a"
-                  >
-                    Item A
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="b"
-                  >
-                    Item B
-                  </option>
-                  <option
-                    class="rcx-box rcx-box--full rcx-input-box__option"
-                    value="c"
-                  >
-                    Item C
-                  </option>
-                </select>
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <select
-                aria-label="select"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-select rcx-input-box--multiple rcx-input-box  focus rcx-css-f59qpk"
-                multiple=""
-                size="1"
-              >
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="a"
-                >
-                  Item A
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="b"
-                >
-                  Item B
-                </option>
-                <option
-                  class="rcx-box rcx-box--full rcx-input-box__option"
-                  value="c"
-                >
-                  Item C
-                </option>
-              </select>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders WithAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <select
-        aria-label="select"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-        size="1"
-      >
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="a"
-        >
-          Item A
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="b"
-        >
-          Item B
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="c"
-        >
-          Item C
-        </option>
-      </select>
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <select
-        aria-label="select"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box--placeholder-visible rcx-input-box"
-        size="1"
-      >
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__placeholder"
-          value=""
-        >
-          Placeholder
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="a"
-        >
-          Item A
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="b"
-        >
-          Item B
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="c"
-        >
-          Item C
-        </option>
-      </select>
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[SelectInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <select
-        aria-label="select"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
-        size="1"
-      >
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="a"
-        >
-          Item A
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          selected=""
-          value="b"
-        >
-          Item B
-        </option>
-        <option
-          class="rcx-box rcx-box--full rcx-input-box__option"
-          value="c"
-        >
-          Item C
-        </option>
-      </select>
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
-        >
-          
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
index 4d1f8f5bff..b66857bc7a 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './TelephoneInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[TelephoneInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap b/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
index ae67309cf3..e6b540160d 100644
--- a/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[TelephoneInput Component] renders Default without crashing 1`] = `
+exports[`[TelephoneInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -12,1658 +12,3 @@ exports[`[TelephoneInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[TelephoneInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="telephone"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-      disabled=""
-      size="1"
-      type="tel"
-    />
-  </div>
-</body>
-`;
-
-exports[`[TelephoneInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="telephone"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-      size="1"
-      type="tel"
-    />
-  </div>
-</body>
-`;
-
-exports[`[TelephoneInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                disabled=""
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                disabled=""
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                disabled=""
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                disabled=""
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  hover"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  hover"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  active"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  active"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="tel"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="telephone"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-tel rcx-input-box  focus"
-                size="1"
-                type="tel"
-                value="+1234567890"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="telephone"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box  focus"
-                  size="1"
-                  type="tel"
-                  value="+1234567890"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mobile rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[TelephoneInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="telephone"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-tel rcx-input-box"
-        size="1"
-        type="tel"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[TelephoneInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="telephone"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-      placeholder="Placeholder"
-      size="1"
-      type="tel"
-    />
-  </div>
-</body>
-`;
-
-exports[`[TelephoneInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="telephone"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
-      size="1"
-      type="tel"
-      value="+1 (213) 724-2528"
-    />
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
index 54021ca354..4d78e3376f 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './TextInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[TextInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap b/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
index 7145048bac..3dee7439fa 100644
--- a/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[TextInput Component] renders Default without crashing 1`] = `
+exports[`[TextInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -12,1658 +12,3 @@ exports[`[TextInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[TextInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="text"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      disabled=""
-      size="1"
-      type="text"
-    />
-  </div>
-</body>
-`;
-
-exports[`[TextInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="text"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      size="1"
-      type="text"
-    />
-  </div>
-</body>
-`;
-
-exports[`[TextInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                disabled=""
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                disabled=""
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                disabled=""
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                disabled=""
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  hover"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  hover"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  active"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  active"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="text"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="text"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-text rcx-input-box  focus"
-                size="1"
-                type="text"
-                value="Value"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="text"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box  focus"
-                  size="1"
-                  type="text"
-                  value="Value"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-keyboard rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[TextInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="text"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-        size="1"
-        type="text"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[TextInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="text"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      placeholder="Placeholder"
-      size="1"
-      type="text"
-    />
-  </div>
-</body>
-`;
-
-exports[`[TextInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="text"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
-      size="1"
-      type="text"
-      value="Value"
-    />
-  </div>
-</body>
-`;
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
index 6d1282c4a1..34a1f77195 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
@@ -5,27 +5,18 @@ import React from 'react';
 
 import * as stories from './UrlInput.stories';
 
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  Story.storyName || 'Story',
-  Story,
-]);
+const { Default } = composeStories(stories);
 
 describe('[UrlInput Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap b/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
index 38e77e64fb..edb66a68d2 100644
--- a/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
+++ b/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[UrlInput Component] renders Default without crashing 1`] = `
+exports[`[UrlInput Component] renders without crashing 1`] = `
 <body>
   <div>
     <input
@@ -12,1658 +12,3 @@ exports[`[UrlInput Component] renders Default without crashing 1`] = `
   </div>
 </body>
 `;
-
-exports[`[UrlInput Component] renders Disabled without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="url"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-      disabled=""
-      size="1"
-      type="url"
-    />
-  </div>
-</body>
-`;
-
-exports[`[UrlInput Component] renders Invalid without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="url"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-      size="1"
-      type="url"
-    />
-  </div>
-</body>
-`;
-
-exports[`[UrlInput Component] renders States without crashing 1`] = `
-<body>
-  <div>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            default
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                disabled=""
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                disabled=""
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table
-      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
-      style="border-collapse: collapse;"
-    >
-      <thead
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <td
-            aria-hidden="true"
-            class="rcx-box rcx-box--full"
-          />
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with placeholder
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with value
-          </th>
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            with icon
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="rcx-box rcx-box--full"
-      >
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            small
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  hover"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  active"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  focus"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            disabled
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                disabled=""
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                disabled=""
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                disabled=""
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper  disabled"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                  disabled=""
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + hover
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  hover"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper hover invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  hover"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + active
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  active"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper active invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  active"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="rcx-box rcx-box--full"
-        >
-          <th
-            class="rcx-box rcx-box--full rcx-css-11in3rj"
-          >
-            errored + focus
-          </th>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
-                placeholder="Placeholder"
-                size="1"
-                type="url"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <input
-                aria-label="url"
-                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--type-url rcx-input-box  focus"
-                size="1"
-                type="url"
-                value="https://rocket.chat"
-              />
-            </div>
-          </td>
-          <td
-            class="rcx-box rcx-box--full rcx-css-yoolx6"
-          >
-            <div
-              class="rcx-box rcx-box--full rcx-css-7rd89h"
-            >
-              <label
-                class="rcx-box rcx-box--full rcx-label rcx-box--animated rcx-input-box__wrapper focus invalid"
-              >
-                <input
-                  aria-label="url"
-                  class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--small rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box  focus"
-                  size="1"
-                  type="url"
-                  value="https://rocket.chat"
-                />
-                <span
-                  class="rcx-box rcx-box--full rcx-input-box__addon"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-discover rcx-icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                </span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</body>
-`;
-
-exports[`[UrlInput Component] renders WithIconAddon without crashing 1`] = `
-<body>
-  <div>
-    <label
-      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-    >
-      <input
-        aria-label="url"
-        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-        size="1"
-        type="url"
-      />
-      <span
-        class="rcx-box rcx-box--full rcx-input-box__addon"
-      >
-        <i
-          aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-send rcx-icon rcx-css-4pvxx3"
-        >
-          〈
-        </i>
-      </span>
-    </label>
-  </div>
-</body>
-`;
-
-exports[`[UrlInput Component] renders WithPlaceholder without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="url"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-      placeholder="Placeholder"
-      size="1"
-      type="url"
-    />
-  </div>
-</body>
-`;
-
-exports[`[UrlInput Component] renders WithValue without crashing 1`] = `
-<body>
-  <div>
-    <input
-      aria-label="url"
-      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
-      size="1"
-      type="url"
-      value="https://rocket.chat"
-    />
-  </div>
-</body>
-`;