@kivid/native-components 1.0.0-alpha.1

package/dist/module/components/Button/assets/design-system-showcase.js

@@ -0,0 +1,1451 @@
+"use strict";
+
+export const designSystemShowcase = {
+  large: {
+    title: "Large Size",
+    buttons: {
+      grape: [{
+        size: "large",
+        variant: "grape",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "grape",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      java: [{
+        size: "large",
+        variant: "java",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "java",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      pear: [{
+        size: "large",
+        variant: "pear",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "pear",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      tangerine: [{
+        size: "large",
+        variant: "tangerine",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "tangerine",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      blackberry: [{
+        size: "large",
+        variant: "blackberry",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "blackberry",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      chia: [{
+        size: "large",
+        variant: "chia",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "chia",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      outline: [{
+        size: "large",
+        variant: "outline",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "outline",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      ghost: [{
+        size: "large",
+        variant: "ghost",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "ghost",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }],
+      glass: [{
+        size: "large",
+        variant: "glass",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[160px]"
+      }, {
+        size: "large",
+        variant: "glass",
+        corners: "small",
+        loading: true,
+        className: "min-w-[160px]"
+      }]
+    }
+  },
+  medium: {
+    title: "Medium Size",
+    buttons: {
+      grape: [{
+        size: "medium",
+        variant: "grape",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "grape",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      java: [{
+        size: "medium",
+        variant: "java",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "java",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      pear: [{
+        size: "medium",
+        variant: "pear",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "pear",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      tangerine: [{
+        size: "medium",
+        variant: "tangerine",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "tangerine",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      blackberry: [{
+        size: "medium",
+        variant: "blackberry",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "blackberry",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      chia: [{
+        size: "medium",
+        variant: "chia",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "chia",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      outline: [{
+        size: "medium",
+        variant: "outline",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "outline",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      ghost: [{
+        size: "medium",
+        variant: "ghost",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "ghost",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }],
+      glass: [{
+        size: "medium",
+        variant: "glass",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[88px]"
+      }, {
+        size: "medium",
+        variant: "glass",
+        corners: "small",
+        loading: true,
+        className: "min-w-[88px]"
+      }]
+    }
+  },
+  small: {
+    title: "Small Size",
+    buttons: {
+      grape: [{
+        size: "small",
+        variant: "grape",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "grape",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      java: [{
+        size: "small",
+        variant: "java",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "java",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      outline: [{
+        size: "small",
+        variant: "outline",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "outline",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      glass: [{
+        size: "small",
+        variant: "glass",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "glass",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      ghost: [{
+        size: "small",
+        variant: "ghost",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "ghost",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      pear: [{
+        size: "small",
+        variant: "pear",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "pear",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      tangerine: [{
+        size: "small",
+        variant: "tangerine",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "tangerine",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      blackberry: [{
+        size: "small",
+        variant: "blackberry",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "blackberry",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }],
+      chia: [{
+        size: "small",
+        variant: "chia",
+        corners: "medium",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "medium",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "medium",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "medium",
+        loading: true,
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "small",
+        label: "Label",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "small",
+        disabled: true,
+        label: "Disabled",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "small",
+        selected: true,
+        label: "Selected",
+        className: "min-w-[72px]"
+      }, {
+        size: "small",
+        variant: "chia",
+        corners: "small",
+        loading: true,
+        className: "min-w-[72px]"
+      }]
+    }
+  }
+};
+//# sourceMappingURL=design-system-showcase.js.map