-
Color variation
-
- {[
- { className: 'gray900', text: 'Gray900' },
- { className: 'gray800', text: 'Gray800' },
- { className: 'gray700', text: 'Gray700' },
- { className: 'gray600', text: 'Gray600' },
- { className: 'gray500', text: 'Gray500' },
- { className: 'gray400', text: 'Gray400' },
- { className: 'gray300', text: 'Gray300' },
- { className: 'gray200', text: 'Gray200' },
- { className: 'gray100', text: 'Gray100' },
- { className: 'gray50', text: 'Gray50' },
- { className: 'white', text: 'White' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'gray300', text: 'Gray300' },
- { className: 'gray200', text: 'Gray200' },
- { className: 'gray100', text: 'Gray100' },
- { className: 'gray50', text: 'Gray50' },
- { className: 'white', text: 'White' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'orange_dark', text: 'Orange (Dark)' },
- { className: 'orange_0', text: 'Orange' },
- { className: 'orange_light', text: 'Orange (Light)' },
- { className: 'orange_alpha_dark', text: 'Orange Alpha (Dark)' },
- { className: 'orange_alpha_0', text: 'Orange Alpha' },
- { className: 'orange_alpha_light', text: 'Orange Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'orange_dark', text: 'Orange (Dark)' },
- { className: 'orange_0', text: 'Orange' },
- { className: 'orange_light', text: 'Orange (Light)' },
- { className: 'orange_alpha_dark', text: 'Orange Alpha (Dark)' },
- { className: 'orange_alpha_0', text: 'Orange Alpha' },
- { className: 'orange_alpha_light', text: 'Orange Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'yellow_dark', text: 'Yellow (Dark)' },
- { className: 'yellow_0', text: 'Yellow' },
- { className: 'yellow_light', text: 'Yellow (Light)' },
- { className: 'yellow_alpha_dark', text: 'Yellow Alpha (Dark)' },
- { className: 'yellow_alpha_0', text: 'Yellow Alpha' },
- { className: 'yellow_alpha_light', text: 'Yellow Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'yellow_dark', text: 'Yellow (Dark)' },
- { className: 'yellow_0', text: 'Yellow' },
- { className: 'yellow_light', text: 'Yellow (Light)' },
- { className: 'yellow_alpha_dark', text: 'Yellow Alpha (Dark)' },
- { className: 'yellow_alpha_0', text: 'Yellow Alpha' },
- { className: 'yellow_alpha_light', text: 'Yellow Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'green_dark', text: 'Green (Dark)' },
- { className: 'green_0', text: 'Green' },
- { className: 'green_light', text: 'Green (Light)' },
- { className: 'green_alpha_dark', text: 'Green Alpha (Dark)' },
- { className: 'green_alpha_0', text: 'Green Alpha' },
- { className: 'green_alpha_light', text: 'Green Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'green_dark', text: 'Green (Dark)' },
- { className: 'green_0', text: 'Green' },
- { className: 'green_light', text: 'Green (Light)' },
- { className: 'green_alpha_dark', text: 'Green Alpha (Dark)' },
- { className: 'green_alpha_0', text: 'Green Alpha' },
- { className: 'green_alpha_light', text: 'Green Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'blue_dark', text: 'Blue (Dark)' },
- { className: 'blue_0', text: 'Blue' },
- { className: 'blue_light', text: 'Blue (Light)' },
- { className: 'blue_alpha_dark', text: 'Blue Alpha (Dark)' },
- { className: 'blue_alpha_0', text: 'Blue Alpha' },
- { className: 'blue_alpha_light', text: 'Blue Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'blue_dark', text: 'Blue (Dark)' },
- { className: 'blue_0', text: 'Blue' },
- { className: 'blue_light', text: 'Blue (Light)' },
- { className: 'blue_alpha_dark', text: 'Blue Alpha (Dark)' },
- { className: 'blue_alpha_0', text: 'Blue Alpha' },
- { className: 'blue_alpha_light', text: 'Blue Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'red_dark', text: 'Red (Dark)' },
- { className: 'red_0', text: 'Red' },
- { className: 'red_light', text: 'Red (Light)' },
- { className: 'red_alpha_dark', text: 'Red Alpha (Dark)' },
- { className: 'red_alpha_0', text: 'Red Alpha' },
- { className: 'red_alpha_light', text: 'Red Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'red_dark', text: 'Red (Dark)' },
- { className: 'red_0', text: 'Red' },
- { className: 'red_light', text: 'Red (Light)' },
- { className: 'red_alpha_dark', text: 'Red Alpha (Dark)' },
- { className: 'red_alpha_0', text: 'Red Alpha' },
- { className: 'red_alpha_light', text: 'Red Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'purple_dark', text: 'Purple (Dark)' },
- { className: 'purple_0', text: 'Purple' },
- { className: 'purple_light', text: 'Purple (Light)' },
- { className: 'purple_alpha_dark', text: 'Purple Alpha (Dark)' },
- { className: 'purple_alpha_0', text: 'Purple Alpha' },
- { className: 'purple_alpha_light', text: 'Purple Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
- {[
- { className: 'purple_dark', text: 'Purple (Dark)' },
- { className: 'purple_0', text: 'Purple' },
- { className: 'purple_light', text: 'Purple (Light)' },
- { className: 'purple_alpha_dark', text: 'Purple Alpha (Dark)' },
- { className: 'purple_alpha_0', text: 'Purple Alpha' },
- { className: 'purple_alpha_light', text: 'Purple Alpha (Light)' },
- ].map(({ className, text }) => (
-
- ))}
-
-
Status
-
-
-
-
-
-
-
Size
-
-
-
-
-
-
-
-
With Icon
-
-
-
- {[
- { className: 'orange_dark', text: 'Orange (Dark)' },
- { className: 'orange_0', text: 'Orange' },
- { className: 'orange_light', text: 'Orange (Light)' },
- {
- className: 'orange_alpha_dark',
- text: 'Orange Alpha (Dark)',
- },
- { className: 'orange_alpha_0', text: 'Orange Alpha' },
- {
- className: 'orange_alpha_light',
- text: 'Orange Alpha (Light)',
- },
- ].map(({ className, text }) => (
- }>
- {text}
-
- ))}
-
-
-
-
Only Icon
-
-
-
- }>
- 2x2 layout
-
- }>
- 2x2 layout
-
- }>
- 1x2 layout
-
- }>
- 1x2 layout
-
-
-
-
-
Multiple Button (Box & Full Width)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Tag as
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/src/test/InputView.tsx b/src/test/InputView.tsx
index 319f2b7..9506a47 100644
--- a/src/test/InputView.tsx
+++ b/src/test/InputView.tsx
@@ -88,7 +88,6 @@ export function InputView() {