@lotte-innovate/ui-component-test 0.1.73 → 0.1.75

package/dist/lib/constants.js

@@ -1,2 +1,914 @@
-import{ColorStyle as a,DarkColorStyle as e}from"./color/constants.js";var t={small:{none:"rounded-none",small:"rounded-[3px]",medium:"rounded",large:"rounded",full:"rounded"},base:{none:"rounded-none",small:"rounded-[3px]",medium:"rounded",large:"rounded-md",full:"rounded-full"},large:{none:"rounded-none",small:"rounded",medium:"rounded-lg",large:"rounded-xl",full:"rounded-2xl"},"extra-large":{none:"rounded-none",small:"rounded",medium:"rounded-lg",large:"rounded-xl",full:"rounded-xl"},"menu-item":{none:"rounded-none",small:"rounded-[1px]",medium:"rounded-sm",large:"rounded",full:"rounded"}},c={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},r={"90%":"scale-90","95%":"scale-95","100%":"scale-100","105%":"scale-105","110%":"scale-110"},d=["sky","mint","lime","yellow","amber","orange","white"],o=function(){var t={};for(var c in a){var r="".concat(c,"Dark");t[c]=d.includes(c)?"bg-".concat(a[c]," text-slate-12 dark:bg-").concat(e[r]," dark:text-slateDark-12"):"bg-".concat(a[c]," text-white dark:bg-").concat(e[r]," dark:text-slateDark-1")}return t},n=function(){var t={};for(var c in a){var r="".concat(c,"Dark");t[c]="bg-".concat(a[c]," dark:bg-").concat(e[r])}return t},b=function(){var t={};for(var c in a){var r="".concat(c,"Dark");t[c]="text-".concat(a[c]," dark:text-").concat(e[r])}return t},s=function(a,e){var t="";return t+="".concat(a.light.default," ").concat(a.dark.default),e&&(t+=" ".concat(a.light.hover," ").concat(a.light.active," ").concat(a.light.disable," ").concat(a.dark.hover," ").concat(a.dark.active," ").concat(a.dark.disable)),t},l=function(a,e,t){void 0===t&&(t=!0);var c="".concat(e,"Dark"),r={light:{default:"bg-".concat(e,"-9 border border-solid border-").concat(e,"-9 shadow-button-classic"),hover:"hover:bg-".concat(e,"-10 hover:border-").concat(e,"-9"),active:"active:bg-".concat(e,"-9 active:border-").concat(e,"-9"),disable:"disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(c,"-9 dark:border-").concat(c,"-9 dark:shadow-button-dark-classic"),hover:"dark:hover:bg-".concat(c,"-10 dark:hover:border-").concat(c,"-9"),active:"dark:active:bg-".concat(c,"-9 dark:active:border-").concat(c,"-9"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8"}},d={light:{default:"bg-".concat(e,"-9 border-none"),hover:"hover:bg-".concat(e,"-10 hover:border-none"),active:"active:bg-".concat(e,"-10 active:border-none active:opacity-[.92]"),disable:"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(c,"-9"),hover:"dark:hover:bg-".concat(c,"-10"),active:"dark:active:bg-".concat(c,"-10 dark:active:opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8"}},o={light:{default:"bg-".concat(e,"A-3 border-none text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-4 hover:border-none hover:text-").concat(e,"A-11"),active:"active:bg-".concat(e,"A-5 active:border-none active:text-").concat(e,"A-11 active:opacity-[.92]"),disable:"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(c,"A-3 dark:text-").concat(c,"A-11"),hover:"dark:hover:bg-".concat(c,"A-4 dark:hover:text-").concat(c,"A-11"),active:"dark:active:bg-".concat(c,"A-5 dark:active:text-").concat(c,"A-11 dark:active:opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8"}},n={light:{default:"bg-".concat(e,"A-2 border border-solid border-").concat(e,"A-7 text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-2 hover:border-").concat(e,"A-8 hover:text-").concat(e,"A-11"),active:"active:bg-".concat(e,"A-3 active:border-").concat(e,"A-8 active:text-").concat(e,"A-11 active:opacity-[.92]"),disable:"disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(c,"A-2 dark:border-").concat(c,"A-7 dark:text-").concat(c,"A-11"),hover:"dark:hover:bg-".concat(c,"A-2 dark:hover:border-").concat(c,"A-8 dark:hover:text-").concat(c,"A-11"),active:"dark:active:bg-".concat(c,"A-3 dark:active:border-").concat(c,"A-8 dark:active:text-").concat(c,"A-11 dark:active:opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8"}},b={light:{default:"bg-transparent border border-solid border-".concat(e,"A-8 text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-2 hover:border-").concat(e,"A-8 hover:text-").concat(e,"A-11"),active:"active:bg-".concat(e,"A-3 active:border-").concat(e,"A-8 active:text-").concat(e,"A-11"),disable:"disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8"},dark:{default:"dark:border-".concat(c,"A-8 dark:bg-transparent dark:text-").concat(c,"A-11"),hover:"dark:hover:bg-".concat(c,"A-2 dark:hover:border-").concat(c,"A-8 dark:hover:text-").concat(c,"A-11"),active:"dark:active:bg-".concat(c,"A-3 dark:active:border-").concat(c,"A-8 dark:active:text-").concat(c,"A-11 dark:active:opacity-[.92]"),disable:"dark:disabled:border-slateDarkA-7 dark:disabled:bg-transparent dark:disabled:text-slateDarkA-8 "}},l={light:{default:"bg-transparent border-none text-".concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-3 hover:border-none hover:text-").concat(e,"A-11"),active:"active:bg-".concat(e,"A-4 active:border-none active:text-").concat(e,"A-11 active:opacity-[.92]"),disable:"disabled:bg-transparent disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-transparent dark:text-".concat(c,"A-11"),hover:"dark:hover:bg-".concat(c,"A-3 dark:hover:text-").concat(c,"A-11"),active:"dark:active:bg-".concat(c,"A-4 dark:active:text-").concat(c,"A-11 dark:active:opacity-[.92]"),disable:"dark:disabled:text-slateDarkA-8"}};switch(a){case"classic":return s(r,t);case"solid":return s(d,t);case"soft":return s(o,t);case"surface":return s(n,t);case"outline":return s(b,t);case"ghost":return s(l,t);default:return""}},k=function(a,e,t,c){void 0===t&&(t=!0),void 0===c&&(c="");var r="".concat(e,"Dark"),d={light:{default:"bg-".concat(e,"-9 border border-solid border-").concat(e,"-9 text-white shadow-button-classic"),hover:"hover:bg-".concat(e,"-10 hover:border-").concat(e,"-9 hover:text-white ").concat(c,"hover:bg-").concat(e,"-10 ").concat(c,"hover:border-").concat(e,"-9 ").concat(c,"hover:text-white"),active:"".concat(c,"bg-").concat(e,"-9 ").concat(c,"border-").concat(e,"-9 ").concat(c,"text-white"),disable:"disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(r,"-9 dark:border-").concat(r,"-9 dark:text-slateDark-1"),hover:"dark:hover:bg-".concat(r,"-10 dark:hover:border-").concat(r,"-9 dark:hover:text-slateDark-1 ").concat(c,"dark:hover:bg-").concat(r,"-10 ").concat(c,"dark:hover:border-").concat(r,"-9 ").concat(c,"dark:hover:text-slateDark-1"),active:"dark:".concat(c,"bg-").concat(r,"-9 dark:").concat(c,"border-").concat(r,"-9 dark:").concat(c,"text-slateDark-1"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8"}},o={light:{default:"bg-".concat(e,"-9 border-none text-white"),hover:"hover:bg-".concat(e,"-10 hover:border-none hover:text-white ").concat(c,"hover:bg-").concat(e,"-10 ").concat(c,"hover:border-none ").concat(c,"hover:text-white"),active:"".concat(c,"bg-").concat(e,"-10 ").concat(c,"border-none ").concat(c,"text-white ").concat(c,"opacity-[.92]"),disable:"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(r,"-9 dark:text-slateDark-1"),hover:"dark:hover:bg-".concat(r,"-10 dark:hover:text-slateDark-1 ").concat(c,"dark:hover:bg-").concat(r,"-10 ").concat(c,"dark:hover:text-slateDark-1"),active:"dark:".concat(c,"bg-").concat(r,"-10 dark:").concat(c,"text-slateDark-1 dark:").concat(c,"opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-3 disabled:text-slateDarkA-8"}},n={light:{default:"bg-".concat(e,"A-3 border-none text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-4 hover:border-none hover:text-").concat(e,"A-11 ").concat(c,"hover:bg-").concat(e,"A-4 ").concat(c,"hover:border-none ").concat(c,"hover:text-").concat(e,"A-11"),active:"".concat(c,"bg-").concat(e,"A-5 ").concat(c,"border-none ").concat(c,"text-").concat(e,"A-11 ").concat(c,"opacity-[.92]"),disable:"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(r,"A-3 dark:text-").concat(r,"A-11"),hover:"dark:hover:bg-".concat(r,"A-4 dark:hover:text-").concat(r,"A-11 ").concat(c,"dark:hover:bg-").concat(r,"A-4 ").concat(c,"dark:hover:text-").concat(r,"A-11"),active:"dark:".concat(c,"bg-").concat(r,"A-5 dark:").concat(c,"text-").concat(r,"A-11 dark:").concat(c,"opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8"}},b={light:{default:"bg-".concat(e,"A-2 border border-solid border-").concat(e,"A-7 text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-2 hover:border-").concat(e,"A-8 hover:text-").concat(e,"A-11 ").concat(c,"hover:bg-").concat(e,"A-2 ").concat(c,"hover:border-").concat(e,"A-8 ").concat(c,"hover:text-").concat(e,"A-11"),active:"".concat(c,"bg-").concat(e,"A-3 ").concat(c,"border-").concat(e,"A-8 ").concat(c,"text-").concat(e,"A-11 ").concat(c,"opacity-[.92]"),disable:"disabled:bg-slatDarkeA-2 disabled:border-slateDarkA-6 disabled:text-slateDarkA-8"},dark:{default:"dark:bg-".concat(r,"A-2 dark:border-").concat(r,"A-7 dark:text-").concat(r,"A-11"),hover:"dark:hover:bg-".concat(r,"A-2 dark:hover:border-").concat(r,"A-8 dark:hover:text-").concat(r,"A-11 ").concat(c,"dark:hover:bg-").concat(r,"A-2 ").concat(c,"dark:hover:border-").concat(r,"A-8 ").concat(c,"dark:hover:text-").concat(r,"A-11"),active:"dark:".concat(c,"bg-").concat(r,"A-3 dark:").concat(c,"border-").concat(r,"A-8 dark:").concat(c,"text-").concat(r,"A-11 dark:").concat(c,"opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8"}},l={light:{default:"bg-transparent border border-solid border-".concat(e,"A-8 text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-2 hover:border-").concat(e,"A-8 hover:text-").concat(e,"A-11 ").concat(c,"hover:bg-").concat(e,"A-2 ").concat(c,"hover:border-").concat(e,"A-8 ").concat(c,"hover:text-").concat(e,"A-11"),active:"".concat(c,"bg-").concat(e,"A-3 ").concat(c,"border-").concat(e,"A-8 ").concat(c,"text-").concat(e,"A-11"),disable:"disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8"},dark:{default:"dark:border-".concat(r,"A-8 dark:text-").concat(r,"A-11"),hover:"dark:hover:bg-".concat(r,"A-2 dark:hover:border-").concat(r,"A-8 dark:hover:text-").concat(r,"A-11 ").concat(c,"dark:hover:bg-").concat(r,"A-2 ").concat(c,"dark:hover:border-").concat(r,"A-8 ").concat(c,"dark:hover:text-").concat(r,"A-11"),active:"dark:".concat(c,"bg-").concat(r,"A-3 dark:").concat(c,"border-").concat(r,"A-8 dark:").concat(c,"text-").concat(r,"A-11 dark:").concat(c,"opacity-[.92]"),disable:"dark:disabled:border-slateDarkA-7 dark:disabled:text-slateDarkA-8"}},k={light:{default:"bg-transparent border-none text-".concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-3 hover:border-none hover:text-").concat(e,"A-11 ").concat(c,"hover:bg-").concat(e,"A-3 ").concat(c,"hover:border-none ").concat(c,"hover:text-").concat(e,"A-11"),active:"".concat(c,"bg-").concat(e,"A-4 ").concat(c,"border-none ").concat(c,"text-").concat(e,"A-11 ").concat(c,"opacity-[.92]"),disable:"disabled:bg-transparent disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-transparent dark:text-".concat(r,"A-11"),hover:"dark:hover:bg-".concat(r,"A-3 dark:hover:text-").concat(r,"A-11 ").concat(c,"dark:hover:bg-").concat(r,"A-3 ").concat(c,"dark:hover:text-").concat(r,"A-11"),active:"dark:".concat(c,"bg-").concat(r,"A-4 dark:").concat(c,"text-").concat(r,"A-11 dark:").concat(c,"opacity-[.92]"),disable:"dark:disabled:text-slateDarkA-8"}};switch(a){case"classic":return s(d,t);case"solid":return s(o,t);case"soft":return s(n,t);case"surface":return s(b,t);case"outline":return s(l,t);case"ghost":return s(k,t);default:return""}},i=function(a,e){var t="";return"solid"===a&&(t="hover:bg-".concat(e,"-9 dark:hover:bg-").concat(e,"Dark-9 "),t+=d.includes(e)?"hover:text-slateA-11 dark:hover:text-white":"hover:text-white dark:hover:text-white"),"soft"===a&&(t="hover:bg-".concat(e,"A-4 dark:hover-bg-").concat(e,"DarkA-4")),"ghost"===a&&(t="hover:bg-".concat(e,"-3 dark:hover:bg-").concat(e,"Dark-3")),t},v=function(a,e,t){var c="".concat(e,"Dark"),r={light:{default:"border data-[state=unchecked]:bg-transparent data-[state=unchecked]:border-slateA-7\n        data-[state=checked]:bg-".concat(e,"-9 data-[state=checked]:border-none data-[state=checked]:text-slate-1"),hover:"hover:data-[state=unchecked]:bg-transparent hover:data-[state=unchecked]:border-slateA-8\n        hover:data-[state=checked]:bg-".concat(e,"-10 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-white"),active:"active:data-[state=unchecked]:bg-transparent active:data-[state=unchecked]:border-slateA-9\n        active:data-[state=checked]:bg-".concat(e,"-10 active:data-[state=checked]:border-none active:data-[state=checked]:text-white"),disable:"disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-slateA-6\n        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-slateA-6 disabled:data-[state=checked]:text-slateA-8"},dark:{default:"dark:data-[state=unchecked]:border-slateDarkA-7\n        dark:data-[state=checked]:bg-".concat(c,"-9 dark:data-[state=checked]:text-#111113"),hover:"dark:hover:data-[state=unchecked]:border-slateDarkA-8\n        dark:hover:data-[state=checked]:bg-".concat(c,"-10 dark:hover:data-[state=checked]:text-#111113"),active:"dark:active:data-[state=unchecked]:border-slateDarkA-9\n        dark:active:data-[state=checked]:bg-".concat(c,"-10 dark:active:data-[state=checked]:text-#111113"),disable:"dark:disabled:data-[state=unchecked]:bg-slateDarkA-3 dark:disabled:data-[state=unchecked]:border-slateDarkA-6\n        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:border-slateDarkA-6 dark:disabled:data-[state=checked]:text-slateDarkA-8"}},d={light:{default:"data-[state=unchecked]:bg-".concat(e,"A-5 data-[state=unchecked]:border-none\n        data-[state=checked]:bg-").concat(e,"A-5 data-[state=checked]:border-none data-[state=checked]:text-").concat(e,"-11"),hover:"hover:data-[state=unchecked]:bg-".concat(e,"A-6 hover:data-[state=unchecked]:border-none\n        hover:data-[state=checked]:bg-").concat(e,"A-6 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-").concat(e,"-11"),active:"active:data-[state=unchecked]:bg-".concat(e,"A-7 active:data-[state=unchecked]:border-none\n        active:data-[state=checked]:bg-").concat(e,"A-7 active:data-[state=checked]:border-none active:data-[state=checked]:text-").concat(e,"-11"),disable:"disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-none\n        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-none disabled:data-[state=checked]:text-slateA-8"},dark:{default:"dark:data-[state=unchecked]:bg-".concat(c,"A-5\n        dark:data-[state=checked]:bg-").concat(c,"A-5 dark:data-[state=checked]:text-").concat(c,"-11"),hover:"dark:hover:data-[state=unchecked]:bg-".concat(c,"A-6\n        dark:hover:data-[state=checked]:bg-").concat(c,"A-6 dark:hover:data-[state=checked]:text-").concat(c,"-11"),active:"dark:active:data-[state=unchecked]:bg-".concat(c,"A-7\n        dark:active:data-[state=checked]:bg-").concat(c,"A-7 dark:active:data-[state=checked]:text-").concat(c,"-11"),disable:"dark:disabled:data-[state=unchecked]:bg-slateDarkA-3\n        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:text-slateDarkA-8"}},o={light:{default:"border bg-".concat(e,"A-2 border-").concat(e,"A-7 text-").concat(e,"A-11"),hover:"hover:bg-".concat(e,"A-2 hover:border-").concat(e,"A-8 hover:text-").concat(e,"A-11"),active:"active:bg-".concat(e,"A-3 active:border-").concat(e,"A-8 active:text-").concat(e,"A-11"),disable:"disabled:bg-slateA-3 disabled:border-slateA-6 disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(c,"A-2 dark:border-").concat(c,"A-7 dark:text-").concat(c,"A-11"),hover:"dark:hover:bg-".concat(c,"A-2 dark:hover:border-").concat(c,"A-8 dark:hover:text-").concat(c,"A-11"),active:"dark:active:bg-".concat(c,"A-3 dark:active:border-").concat(c,"A-8 dark:active:text-").concat(c,"A-11"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8"}},n={light:{default:"border bg-transparent border-".concat(e,"A-6 text-").concat(e,"A-11"),hover:"hover:bg-transparent hover:border-".concat(e,"A-6 hover:text-").concat(e,"A-11"),active:"active:bg-transparent active:border-".concat(e,"A-6 active:text-").concat(e,"A-11"),disable:"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:border-".concat(c,"A-6 dark:text-").concat(c,"A-11"),hover:"dark:hover:border-".concat(c,"A-6 dark:hover:text-").concat(c,"A-11"),active:"dark:active:border-".concat(c,"A-6 dark:active:text-").concat(c,"A-11"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8"}};switch(a){case"classic":return t?s(o,!0):"".concat(s(r,!0)," data-[state=checked]:shadow-checkbox-classic data-[state=unchecked]:shadow-checkbox-classic\n          dark:data-[state=checked]:shadow-checkbox-classic dark:data-[state=unchecked]:shadow-checkbox-classic");case"soft":return s(t?n:d,!0);case"surface":return s(t?o:r,!0);default:return s(r,!0)}},h=function(a,e){var t="".concat(e,"Dark"),c={light:{default:"bg-[#FFFFFF] border border-slateA-7 data-placeholder:text-slateA-10 text-slateA-12",hover:"hover:bg-[#FFFFFF] hover:border hover:border-slateA-8 hover:text-slateA-10",active:"active:bg-".concat(e,"A-3 active:border-").concat(e,"A-8 active:text-slateA-10 active:opacity-[.92]"),disable:"disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8"},dark:{default:"dark:bg-[#111113] dark:border dark:data-placeholder:border-slateDarkA-7 dark:data-placeholder:text-slateDarkA-9 dark:border-slateDarkA-7 dark:text-slateDarkA-12",hover:"dark:hover:bg-[#111113] dark:hover:border dark:hover:border-slateDarkA-8 dark:hover:text-slateDarkA-10",active:"dark:active:bg-".concat(t,"A-3 dark:active:border dark:active:border-").concat(t,"A-8 dark:active:text-slateDarkA-10 dark:active:opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-2 dark:disabled:border dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8"}},r={light:{default:"bg-".concat(e,"A-3 border-none data-placeholder:text-").concat(e,"A-12/[.5] text-").concat(e,"A-12"),hover:"hover:bg-".concat(e,"A-4 hover:border-none hover:text-").concat(e,"A-12/[.5]"),active:"active:bg-".concat(e,"A-5 active:border-none active:text-").concat(e,"A-12/[.5] active:opacity-[.92]"),disable:"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-".concat(t,"A-3 dark:border-none dark:data-placeholder:text-").concat(t,"A-12/[.5] dark:text-").concat(t,"A-12 "),hover:"dark:hover:bg-".concat(t,"A-4 dark:hover:border-none dark:hover:text-").concat(t,"A-12/[.5]"),active:"dark:active:bg-".concat(t,"A-5 dark:active:border-none dark:active:text-").concat(t,"A-12/[.5] dark:active:opacity-[.92]"),disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:border-none dark:disabled:text-slateDarkA-8"}},d={light:{default:"bg-transparent border-none data-placeholder:text-".concat(e,"A-12/[.5] text-").concat(e,"A-12"),hover:"hover:bg-".concat(e,"A-3 hover:border-none hover:text-").concat(e,"A-1/[.5]"),active:"active:bg-".concat(e,"A-4 active:border-none active:text-").concat(e,"A-12/[.5] active:opacity-[.92]"),disable:"disabled:bg-transparent disabled:border-none disabled:text-slateA-8"},dark:{default:"dark:bg-transparent dark:border-none dark:data-placeholder:text-".concat(t,"A-12/[.5] dark:text-").concat(t,"A-12"),hover:"dark:hover:bg-".concat(t,"A-3 dark:hover:border-none dark:hover:text-").concat(t,"A-12/[.5]"),active:"dark:active:bg-".concat(t,"A-4 dark:active:border-none dark:active:text-").concat(t,"A-12/[.5] dark:active:opacity-[.92]"),disable:"dark:disabled:text-slateDarkA-8 dark:disabled:border-none"}},o=function(a){var e="";return e+="".concat(a.light.default," ").concat(a.dark.default,"  ").concat(a.light.hover," ").concat(a.light.active," ").concat(a.light.disable," ").concat(a.dark.hover," ").concat(a.dark.active," ").concat(a.dark.disable)};switch(a){case"classic":return o({light:{default:"bg-slateA-2 border border-slate-4 data-placeholder:text-slateA-10 text-slateA-12",hover:"hover:bg-slateA-3 hover:border hover:border-slate-4 hover:text-slateA-10",active:"active:bg-slateA-4 active:border active:border-slate-6 active:text-slateA-10",disable:"disabled:bg-slateA-3 disabled:border disabled:border-slate-4 disabled:text-slateA-8"},dark:{default:"dark:bg-slateDarkA-2 dark:border-slateDark-4 dark:data-placeholder:text-slateDarkA-10 dark:text-slateDarkA-12",hover:"dark:hover:bg-slateDarkA-3 dark:hover:border-slateDark-4 dark:hover:text-slateDarkA-10",active:"dark:active:bg-slateDarkA-4 dark:active:border-slateDark-6 dark:active:text-slateDarkA-10",disable:"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8"}});case"soft":return o(r);case"surface":return o(c);case"ghost":return o(d);default:return""}};export{l as appearanceStyle,n as bgColorStyle,d as blackText,v as checkboxAppearanceStyle,i as menuItemAppearanceStyle,o as primaryColorStyle,t as radiusVariants,r as scalingVariants,h as selectAppearanceStyle,b as textColorStyle,k as toggleAppearanceStyle,c as weightVariants};
-//# sourceMappingURL=constants.js.map
+import { ColorStyle, DarkColorStyle, colorOptions, chartColorOptions } from '../lib/color/constants';
+import * as lightColors from '../lib/color/light';
+export var radiusOptions = ['none', 'small', 'medium', 'large', 'full'];
+export var typoSizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+export var scalingOptions = ['90%', '95%', '100%', '105%', '110%'];
+export var sizeOptions = ['x-small', 'small', 'medium', 'large', 'x-large'];
+export var weightOptions = ['regular', 'medium', 'semibold', 'bold'];
+export var themeOptions = ['light', 'dark'];
+export var appearanceOptions = [
+    'classic',
+    'ghost',
+    'outline',
+    'soft',
+    'solid',
+    'surface',
+];
+//차트
+export var labelPositionList = ['top', 'bottom', 'left', 'right'];
+export var pointStyleList = [
+    'circle',
+    'cross',
+    'crossRot',
+    'dash',
+    'line',
+    'rect',
+    'rectRounded',
+    'rectRot',
+    'star',
+    'triangle',
+    false,
+];
+export var radiusVariants = {
+    // 체크박스
+    small: {
+        none: 'rounded-none',
+        small: 'rounded-[3px]',
+        medium: 'rounded',
+        large: 'rounded',
+        full: 'rounded',
+    },
+    // 라디오버튼, 스위치, 태그, 배지, 버튼, 텍스트인풋, 텍스트영역, 페이지네이션
+    base: {
+        none: 'rounded-none',
+        small: 'rounded-[3px]',
+        medium: 'rounded', // 4px
+        large: 'rounded-md', // 6px
+        full: 'rounded-full',
+    },
+    // 배너
+    large: {
+        none: 'rounded-none',
+        small: 'rounded',
+        medium: 'rounded-lg', // 8px
+        large: 'rounded-xl', // 12px
+        full: 'rounded-2xl', // 16px
+    },
+    // 다이얼로그, 바텀시트, 그리드, 카드
+    'extra-large': {
+        none: 'rounded-none',
+        small: 'rounded',
+        medium: 'rounded-lg',
+        large: 'rounded-xl',
+        full: 'rounded-xl',
+    },
+    // Dropdown, Context Menu 아이템
+    'menu-item': {
+        none: 'rounded-none',
+        small: 'rounded-[1px]',
+        medium: 'rounded-sm',
+        large: 'rounded',
+        full: 'rounded',
+    },
+};
+export var weightVariants = {
+    regular: 'font-normal', // 400
+    medium: 'font-medium', // 500
+    semibold: 'font-semibold', // 600
+    bold: 'font-bold', // 700
+};
+export var scalingVariants = {
+    '90%': 'scale-90',
+    '95%': 'scale-95',
+    '100%': 'scale-100',
+    '105%': 'scale-105',
+    '110%': 'scale-110',
+};
+// 스토리북 공통 argTypes 설정
+export var commonArgTypes = {
+    typoSize: {
+        table: {
+            category: 'Theme Props',
+            type: { summary: '1 ~ 9' },
+        },
+        control: { type: 'select' },
+        options: typoSizeOptions,
+        defaultValue: { summary: '3' },
+    },
+    scaling: {
+        table: {
+            category: 'Theme Props',
+            type: { summary: scalingOptions.join(' | ') },
+        },
+        control: { type: 'select' },
+        options: scalingOptions,
+        defaultValue: { summary: '100%' },
+    },
+    weight: {
+        table: {
+            category: 'Theme Props',
+            type: { summary: weightOptions.join(' | ') },
+        },
+        options: weightOptions,
+        control: { type: 'select' },
+        defaultValue: { summary: 'medium' },
+    },
+    radius: {
+        table: {
+            category: 'Theme Props',
+            type: { summary: radiusOptions.join(' | ') },
+        },
+        options: radiusOptions,
+        control: { type: 'select' },
+        defaultValue: { summary: 'medium' },
+    },
+    color: {
+        table: {
+            category: 'Theme Props',
+            type: { summary: 'colorVariants' },
+        },
+        options: colorOptions,
+        control: { type: 'select' },
+        defaultValue: { summary: 'red' },
+    },
+    basicText: {
+        table: {
+            category: 'Props',
+            type: { summary: 'string' },
+        },
+        control: 'text',
+    },
+    appearance: {
+        table: {
+            category: 'Props',
+            type: { summary: appearanceOptions.join(' | ') },
+        },
+        options: appearanceOptions,
+        control: { type: 'select' },
+        defaultValue: { summary: 'solid' },
+    },
+    size: {
+        table: {
+            category: 'Props',
+            type: { summary: sizeOptions.join(' | ') },
+        },
+        control: { type: 'select' },
+        options: sizeOptions,
+        defaultValue: { summary: 'medium' },
+    },
+    isColorMixed: {
+        table: {
+            category: 'Props',
+            type: { summary: 'boolean' },
+        },
+        description: "- \uCC28\uD2B8 \uAE30\uBCF8 \uC0C9\uC0C1 \uC2A4\uD0C0\uC77C \n        - true\uC778 \uACBD\uC6B0 \uC0C9\uC0C1\uC774 \uAD50\uCC28\uB428, false\uC778 \uACBD\uC6B0 \uC0C9\uC0C1 \uC21C\uCC28\uC801\uC73C\uB85C \uC0AC\uC6A9",
+        control: 'readonly',
+        defaultValue: { summary: 'true' },
+    },
+    chartAppearance: {
+        table: {
+            category: 'Props',
+            type: { summary: 'solid | soft' },
+        },
+        options: ['solid', 'soft'],
+        control: 'readonly',
+        defaultValue: { summary: 'solid' },
+        description: "- \uCC28\uD2B8 \uAE30\uBCF8 \uC0C9\uC0C1 \uC2A4\uD0C0\uC77C \n  - \uBC30\uACBD\uC0C9\uACFC \uD14C\uB450\uB9AC\uC0C9 \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\uC744 \uC9C0\uC815\uD574\uC900\uB2E4",
+    },
+    datasets: {
+        name: 'datasets',
+        description: '차트에 사용할 데이터셋',
+        table: {
+            category: 'Props',
+            type: { summary: 'object' },
+        },
+    },
+    labels: {
+        description: '차트 위에 표시될 라벨들',
+        table: {
+            category: 'Props',
+            type: { summary: 'object' },
+        },
+    },
+};
+export var chartColorStyle = function () {
+    var colorValues = lightColors;
+    var colorMappings = {};
+    chartColorOptions.forEach(function (color) {
+        colorMappings[color] = colorValues[color][9];
+    });
+    return colorMappings;
+};
+export var chartTitleArgTypes = {
+    title: {
+        description: '차트 타이틀',
+        table: {
+            category: 'Props',
+            type: { summary: 'object' },
+        },
+    },
+    'title.display': {
+        description: '타이틀 표시 여부',
+        table: {
+            category: 'Title Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean', defaultValue: false },
+        defaultValue: { summary: false },
+    },
+    'title.text': {
+        description: '타이틀 내용',
+        table: {
+            category: 'Title Props',
+            type: { summary: 'string | string[]' },
+        },
+        control: { type: 'text' },
+        defaultValue: { summary: '' },
+    },
+    'title.position': {
+        description: '타이틀 위치',
+        table: {
+            category: 'Title Props',
+            type: { summary: 'top | right | bottom | left' },
+        },
+        control: { type: 'select' },
+        options: ['top', 'right', 'bottom', 'left'],
+        defaultValue: { summary: 'top' },
+    },
+    'title.align': {
+        description: '타이틀 정렬',
+        table: {
+            category: 'Title Props',
+            type: { summary: 'start | center | end' },
+        },
+        control: { type: 'select' },
+        options: ['start', 'center', 'end'],
+        defaultValue: { summary: 'top' },
+    },
+    'title.font.size': {
+        description: '타이틀 폰트 크기',
+        table: {
+            category: 'Title Props',
+            type: { summary: 'number' },
+        },
+        control: { type: 'text' },
+        defaultValue: { summary: 12 },
+    },
+};
+export var chartLegendArgTypes = {
+    legend: {
+        description: '차트 범례',
+        table: {
+            category: 'Props',
+            type: { summary: 'object' },
+        },
+    },
+    'legend.display': {
+        description: '범례 표시 여부',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean' },
+        defaultValue: { summary: true },
+    },
+    'legend.align': {
+        description: '범례 정렬',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'start | center | end' },
+        },
+        control: { type: 'select' },
+        options: ['start', 'center', 'end'],
+        defaultValue: { summary: 'center' },
+    },
+    'legend.position': {
+        description: '범례 위치',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'top | right | bottom | left' },
+        },
+        control: { type: 'select' },
+        options: ['top', 'right', 'bottom', 'left'],
+        defaultValue: { summary: 'top' },
+    },
+    'legend.maxHeight': {
+        description: '범례 최대 높이(픽셀)',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'number' },
+        },
+        control: { type: 'text' },
+        defaultValue: { summary: 12 },
+    },
+    'legend.maxWidth': {
+        description: '범례 최대 길이(픽셀)',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'number' },
+        },
+        control: { type: 'text' },
+        defaultValue: { summary: 12 },
+    },
+    'legend.title.display': {
+        description: '범례 타이틀 표시 여부',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean' },
+        defaultValue: { summary: false },
+    },
+    'legend.title.text': {
+        description: '범례 타이틀 문구',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'string' },
+        },
+        control: { type: 'text' },
+        defaultValue: { summary: '' },
+    },
+    'legend.labels.usePointStyle': {
+        description: '범례 스타일 사용여부',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean' },
+        defaultValue: { summary: 'false' },
+    },
+    'legend.labels.pointStyle': {
+        description: "- \uB77C\uBCA8 \uD3EC\uC778\uD2B8 \uC2A4\uD0C0\uC77C\n      - usePointStyle\uAC00 true\uC778 \uACBD\uC6B0 \uC801\uC6A9",
+        table: {
+            category: 'Legend Props',
+            type: { summary: pointStyleList.join(' | ') },
+        },
+        control: { type: 'select' },
+        options: pointStyleList,
+        defaultValue: { summary: 'false' },
+    },
+};
+export var chartDatasetsArgsTypes = {
+    'datasets[n].data': {
+        description: '데이터셋 데이터',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'object | object[] | number[] | string[]' },
+        },
+    },
+    'datasets[n].label': {
+        description: '데이터셋 라벨',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'string' },
+        },
+    },
+    'datasets[n].backgroundColor': {
+        description: '데이터셋 배경 색상',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'object' },
+        },
+    },
+    'datasets[n].borderColor': {
+        description: '데이터셋 테두리 색상',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'object' },
+        },
+    },
+    'datasets[n].borderWidth': {
+        description: '데이터셋 테두리 두꼐',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].borderRadius': {
+        description: '데이터셋 둥글기',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].hoverBackgroundColor': {
+        description: '데이터셋 마우스 호버 시 배경 색상',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'object' },
+        },
+    },
+    'datasets[n].hoverBorderColor': {
+        description: '데이터셋 마우스 호버 시 테두리 색상',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'object' },
+        },
+    },
+    'datasets[n].hoverBorderWidth': {
+        description: '데이터셋 호버 시 테두리 두께',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].hoverBorderRadius': {
+        description: '데이터셋 호버 시 둥글기',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].order': {
+        description: '데이터셋 순서',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].hidden': {
+        description: '데이터셋 표시 여부',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'boolean' },
+        },
+    },
+    'datasets[n].borderDash': {
+        description: "- \uCC28\uD2B8\uC758 \uAC01 \uC139\uC158\uC758 \uD14C\uB450\uB9AC\uB97C \uC810\uC120\uC73C\uB85C \uB9CC\uB4EC\n        - ex)[5,5]: 5\uD53D\uC140 \uAE38\uC774\uC758 \uC120\uACFC 5\uD53D\uC140 \uAE38\uC774\uC758 \uAC04\uACA9",
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number[]' },
+        },
+    },
+    'datasets[n].borderDashOffset': {
+        description: "- \uC810\uC120\uC758 \uC2DC\uC791 \uC704\uCE58 \uC870\uC815\n      - ex) 2: \uC810\uC120\uC758 \uC2DC\uC791 \uC9C0\uC810\uC744 2\uD53D\uC140 \uC774\uB3D9",
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].offset': {
+        description: '각 섹션 사이의 간격 조정',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].weight': {
+        description: '각 섹션의 상대적인 두께를 설정, 섹션이 차지하는 공간의 비율을 조정',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+};
+export var chartDatalabelsArgsTypes = {
+    datalabels: {
+        table: {
+            disable: true,
+        },
+    },
+    'datalabels.display': {
+        description: '차트 데이터 라벨 표시 여부',
+        table: {
+            category: 'Datalabels Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean' },
+        defaultValue: { summary: false },
+    },
+    'datalabels.color': {
+        description: '차트 데이터 라벨 색상',
+        table: {
+            category: 'Datalabels Props',
+            type: { summary: 'string' },
+        },
+        control: { type: 'select' },
+        options: ['white', 'gray', 'black'],
+        defaultValue: { summary: 'gray' },
+    },
+};
+export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
+export var primaryColorStyle = function () {
+    var color = {};
+    for (var i in ColorStyle) {
+        var darkColor = "".concat(i, "Dark");
+        color[i] = blackText.includes(i)
+            ? "bg-".concat(ColorStyle[i], " text-slate-12 dark:bg-").concat(DarkColorStyle[darkColor], " dark:text-slateDark-12")
+            : "bg-".concat(ColorStyle[i], " text-white dark:bg-").concat(DarkColorStyle[darkColor], " dark:text-slateDark-1");
+    }
+    return color;
+};
+export var bgColorStyle = function () {
+    var color = {};
+    for (var i in ColorStyle) {
+        var darkColor = "".concat(i, "Dark");
+        color[i] = "bg-".concat(ColorStyle[i], " dark:bg-").concat(DarkColorStyle[darkColor]);
+    }
+    return color;
+};
+export var textColorStyle = function () {
+    var color = {};
+    for (var i in ColorStyle) {
+        var darkColor = "".concat(i, "Dark");
+        color[i] = "text-".concat(ColorStyle[i], " dark:text-").concat(DarkColorStyle[darkColor]);
+    }
+    return color;
+};
+var makeClassName = function (type, isClickable) {
+    var className = '';
+    className += "".concat(type.light.default, " ").concat(type.dark.default);
+    if (isClickable) {
+        className += " ".concat(type.light.hover, " ").concat(type.light.active, " ").concat(type.light.disable, " ").concat(type.dark.hover, " ").concat(type.dark.active, " ").concat(type.dark.disable);
+    }
+    return className;
+};
+export var appearanceStyle = function (type, color, isClickable) {
+    if (isClickable === void 0) { isClickable = true; }
+    var darkColor = "".concat(color, "Dark");
+    var classic = {
+        light: {
+            default: "bg-".concat(color, "-9 border border-solid border-").concat(color, "-9 shadow-button-classic"),
+            hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9"),
+            active: "active:bg-".concat(color, "-9 active:border-").concat(color, "-9"),
+            disable: "disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "-9 dark:border-").concat(darkColor, "-9 dark:shadow-button-dark-classic"),
+            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9"),
+            active: "dark:active:bg-".concat(darkColor, "-9 dark:active:border-").concat(darkColor, "-9"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var solid = {
+        light: {
+            default: "bg-".concat(color, "-9 border-none"),
+            hover: "hover:bg-".concat(color, "-10 hover:border-none"),
+            active: "active:bg-".concat(color, "-10 active:border-none active:opacity-[.92]"),
+            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "-9"),
+            hover: "dark:hover:bg-".concat(darkColor, "-10"),
+            active: "dark:active:bg-".concat(darkColor, "-10 dark:active:opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var soft = {
+        light: {
+            default: "bg-".concat(color, "A-3 border-none text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-11"),
+            active: "active:bg-".concat(color, "A-5 active:border-none active:text-").concat(color, "A-11 active:opacity-[.92]"),
+            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "A-3 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:active:bg-".concat(darkColor, "A-5 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var surface = {
+        light: {
+            default: "bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
+            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11 active:opacity-[.92]"),
+            disable: "disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var outline = {
+        light: {
+            default: "bg-transparent border border-solid border-".concat(color, "A-8 text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
+            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11"),
+            disable: "disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:border-".concat(darkColor, "A-8 dark:bg-transparent dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
+            disable: "dark:disabled:border-slateDarkA-7 dark:disabled:bg-transparent dark:disabled:text-slateDarkA-8 ",
+        },
+    };
+    var ghost = {
+        light: {
+            default: "bg-transparent border-none text-".concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-11"),
+            active: "active:bg-".concat(color, "A-4 active:border-none active:text-").concat(color, "A-11 active:opacity-[.92]"),
+            disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-transparent dark:text-".concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:active:bg-".concat(darkColor, "A-4 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
+            disable: "dark:disabled:text-slateDarkA-8",
+        },
+    };
+    switch (type) {
+        case 'classic':
+            return makeClassName(classic, isClickable);
+        case 'solid':
+            return makeClassName(solid, isClickable);
+        case 'soft':
+            return makeClassName(soft, isClickable);
+        case 'surface':
+            return makeClassName(surface, isClickable);
+        case 'outline':
+            return makeClassName(outline, isClickable);
+        case 'ghost':
+            return makeClassName(ghost, isClickable);
+        default:
+            return '';
+    }
+};
+export var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {
+    if (isClickable === void 0) { isClickable = true; }
+    if (stateOn === void 0) { stateOn = ''; }
+    var darkColor = "".concat(color, "Dark");
+    var classic = {
+        light: {
+            default: "bg-".concat(color, "-9 border border-solid border-").concat(color, "-9 text-white shadow-button-classic"),
+            hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9 hover:text-white ").concat(stateOn, "hover:bg-").concat(color, "-10 ").concat(stateOn, "hover:border-").concat(color, "-9 ").concat(stateOn, "hover:text-white"),
+            active: "".concat(stateOn, "bg-").concat(color, "-9 ").concat(stateOn, "border-").concat(color, "-9 ").concat(stateOn, "text-white"),
+            disable: "disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "-9 dark:border-").concat(darkColor, "-9 dark:text-slateDark-1"),
+            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "-10 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "-9 ").concat(stateOn, "dark:hover:text-slateDark-1"),
+            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "-9 dark:").concat(stateOn, "border-").concat(darkColor, "-9 dark:").concat(stateOn, "text-slateDark-1"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var solid = {
+        light: {
+            default: "bg-".concat(color, "-9 border-none text-white"),
+            hover: "hover:bg-".concat(color, "-10 hover:border-none hover:text-white ").concat(stateOn, "hover:bg-").concat(color, "-10 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-white"),
+            active: "".concat(stateOn, "bg-").concat(color, "-10 ").concat(stateOn, "border-none ").concat(stateOn, "text-white ").concat(stateOn, "opacity-[.92]"),
+            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "-9 dark:text-slateDark-1"),
+            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "-10 ").concat(stateOn, "dark:hover:text-slateDark-1"),
+            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "-10 dark:").concat(stateOn, "text-slateDark-1 dark:").concat(stateOn, "opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-3 disabled:text-slateDarkA-8",
+        },
+    };
+    var soft = {
+        light: {
+            default: "bg-".concat(color, "A-3 border-none text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-4 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-").concat(color, "A-11"),
+            active: "".concat(stateOn, "bg-").concat(color, "A-5 ").concat(stateOn, "border-none ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
+            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "A-3 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-4 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-5 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var surface = {
+        light: {
+            default: "bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-2 ").concat(stateOn, "hover:border-").concat(color, "A-8 ").concat(stateOn, "hover:text-").concat(color, "A-11"),
+            active: "".concat(stateOn, "bg-").concat(color, "A-3 ").concat(stateOn, "border-").concat(color, "A-8 ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
+            disable: "disabled:bg-slatDarkeA-2 disabled:border-slateDarkA-6 disabled:text-slateDarkA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-2 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "A-8 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "border-").concat(darkColor, "A-8 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var outline = {
+        light: {
+            default: "bg-transparent border border-solid border-".concat(color, "A-8 text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-2 ").concat(stateOn, "hover:border-").concat(color, "A-8 ").concat(stateOn, "hover:text-").concat(color, "A-11"),
+            active: "".concat(stateOn, "bg-").concat(color, "A-3 ").concat(stateOn, "border-").concat(color, "A-8 ").concat(stateOn, "text-").concat(color, "A-11"),
+            disable: "disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:border-".concat(darkColor, "A-8 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-2 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "A-8 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "border-").concat(darkColor, "A-8 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
+            disable: "dark:disabled:border-slateDarkA-7 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var ghost = {
+        light: {
+            default: "bg-transparent border-none text-".concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-3 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-").concat(color, "A-11"),
+            active: "".concat(stateOn, "bg-").concat(color, "A-4 ").concat(stateOn, "border-none ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
+            disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-transparent dark:text-".concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-3 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-4 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
+            disable: "dark:disabled:text-slateDarkA-8",
+        },
+    };
+    switch (type) {
+        case 'classic':
+            return makeClassName(classic, isClickable);
+        case 'solid':
+            return makeClassName(solid, isClickable);
+        case 'soft':
+            return makeClassName(soft, isClickable);
+        case 'surface':
+            return makeClassName(surface, isClickable);
+        case 'outline':
+            return makeClassName(outline, isClickable);
+        case 'ghost':
+            return makeClassName(ghost, isClickable);
+        default:
+            return '';
+    }
+};
+export var menuItemAppearanceStyle = function (type, color) {
+    var appearanceStyle = '';
+    if (type === 'solid') {
+        appearanceStyle = "hover:bg-".concat(color, "-9 dark:hover:bg-").concat(color, "Dark-9 ");
+        appearanceStyle += blackText.includes(color)
+            ? "hover:text-slateA-11 dark:hover:text-white"
+            : "hover:text-white dark:hover:text-white";
+    }
+    if (type === 'soft') {
+        appearanceStyle = "hover:bg-".concat(color, "A-4 dark:hover-bg-").concat(color, "DarkA-4");
+    }
+    if (type === 'ghost') {
+        appearanceStyle = "hover:bg-".concat(color, "-3 dark:hover:bg-").concat(color, "Dark-3");
+    }
+    return appearanceStyle;
+};
+export var switchCheckedApperanceStyle = function (type, color) {
+    var softStyle = "data-[state=checked]:bg-".concat(color, "A-3  data-[state=unchecked]:bg-").concat(color, "A-2 ");
+    var surfaceStyle = "data-[state=checked]:bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 data-[state=unchecked]:bg-slateA-2 data-[state=unchecked]:bg-slateA-6 ");
+    var classicStyle = "data-[state=checked]:bg-".concat(color, "-9 text-white border border-solid border-").concat(color, "-9 shadow-custom-1 shadow-custom-2 shadow-custom-3 data-[state=unchecked]:border-slate-4 data-[state=unchecked]:bg-slateA-3 data-[state=unchecked]:text-slateA-8");
+    switch (type) {
+        case 'classic':
+            return classicStyle;
+        case 'soft':
+            return softStyle;
+        case 'surface':
+            return surfaceStyle;
+        default:
+            return '';
+    }
+};
+export var checkboxAppearanceStyle = function (type, color, indeterminate) {
+    var darkColor = "".concat(color, "Dark");
+    var surface = {
+        light: {
+            default: "border data-[state=unchecked]:bg-transparent data-[state=unchecked]:border-slateA-7\n        data-[state=checked]:bg-".concat(color, "-9 data-[state=checked]:border-none data-[state=checked]:text-slate-1"),
+            hover: "hover:data-[state=unchecked]:bg-transparent hover:data-[state=unchecked]:border-slateA-8\n        hover:data-[state=checked]:bg-".concat(color, "-10 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-white"),
+            active: "active:data-[state=unchecked]:bg-transparent active:data-[state=unchecked]:border-slateA-9\n        active:data-[state=checked]:bg-".concat(color, "-10 active:data-[state=checked]:border-none active:data-[state=checked]:text-white"),
+            disable: "disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-slateA-6\n        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-slateA-6 disabled:data-[state=checked]:text-slateA-8",
+        },
+        dark: {
+            default: "dark:data-[state=unchecked]:border-slateDarkA-7\n        dark:data-[state=checked]:bg-".concat(darkColor, "-9 dark:data-[state=checked]:text-#111113"),
+            hover: "dark:hover:data-[state=unchecked]:border-slateDarkA-8\n        dark:hover:data-[state=checked]:bg-".concat(darkColor, "-10 dark:hover:data-[state=checked]:text-#111113"),
+            active: "dark:active:data-[state=unchecked]:border-slateDarkA-9\n        dark:active:data-[state=checked]:bg-".concat(darkColor, "-10 dark:active:data-[state=checked]:text-#111113"),
+            disable: "dark:disabled:data-[state=unchecked]:bg-slateDarkA-3 dark:disabled:data-[state=unchecked]:border-slateDarkA-6\n        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:border-slateDarkA-6 dark:disabled:data-[state=checked]:text-slateDarkA-8",
+        },
+    };
+    var soft = {
+        light: {
+            default: "data-[state=unchecked]:bg-".concat(color, "A-5 data-[state=unchecked]:border-none\n        data-[state=checked]:bg-").concat(color, "A-5 data-[state=checked]:border-none data-[state=checked]:text-").concat(color, "-11"),
+            hover: "hover:data-[state=unchecked]:bg-".concat(color, "A-6 hover:data-[state=unchecked]:border-none\n        hover:data-[state=checked]:bg-").concat(color, "A-6 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-").concat(color, "-11"),
+            active: "active:data-[state=unchecked]:bg-".concat(color, "A-7 active:data-[state=unchecked]:border-none\n        active:data-[state=checked]:bg-").concat(color, "A-7 active:data-[state=checked]:border-none active:data-[state=checked]:text-").concat(color, "-11"),
+            disable: "disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-none\n        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-none disabled:data-[state=checked]:text-slateA-8",
+        },
+        dark: {
+            default: "dark:data-[state=unchecked]:bg-".concat(darkColor, "A-5\n        dark:data-[state=checked]:bg-").concat(darkColor, "A-5 dark:data-[state=checked]:text-").concat(darkColor, "-11"),
+            hover: "dark:hover:data-[state=unchecked]:bg-".concat(darkColor, "A-6\n        dark:hover:data-[state=checked]:bg-").concat(darkColor, "A-6 dark:hover:data-[state=checked]:text-").concat(darkColor, "-11"),
+            active: "dark:active:data-[state=unchecked]:bg-".concat(darkColor, "A-7\n        dark:active:data-[state=checked]:bg-").concat(darkColor, "A-7 dark:active:data-[state=checked]:text-").concat(darkColor, "-11"),
+            disable: "dark:disabled:data-[state=unchecked]:bg-slateDarkA-3\n        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:text-slateDarkA-8",
+        },
+    };
+    var indeterminateSurface = {
+        light: {
+            default: "border bg-".concat(color, "A-2 border-").concat(color, "A-7 text-").concat(color, "A-11"),
+            hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
+            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11"),
+            disable: "disabled:bg-slateA-3 disabled:border-slateA-6 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var indeterminateSoft = {
+        light: {
+            default: "border bg-transparent border-".concat(color, "A-6 text-").concat(color, "A-11"),
+            hover: "hover:bg-transparent hover:border-".concat(color, "A-6 hover:text-").concat(color, "A-11"),
+            active: "active:bg-transparent active:border-".concat(color, "A-6 active:text-").concat(color, "A-11"),
+            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:border-".concat(darkColor, "A-6 dark:text-").concat(darkColor, "A-11"),
+            hover: "dark:hover:border-".concat(darkColor, "A-6 dark:hover:text-").concat(darkColor, "A-11"),
+            active: "dark:active:border-".concat(darkColor, "A-6 dark:active:text-").concat(darkColor, "A-11"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    switch (type) {
+        case 'classic':
+            return indeterminate
+                ? makeClassName(indeterminateSurface, true)
+                : "".concat(makeClassName(surface, true), " data-[state=checked]:shadow-checkbox-classic data-[state=unchecked]:shadow-checkbox-classic\n          dark:data-[state=checked]:shadow-checkbox-classic dark:data-[state=unchecked]:shadow-checkbox-classic");
+        case 'soft':
+            return indeterminate ? makeClassName(indeterminateSoft, true) : makeClassName(soft, true);
+        case 'surface':
+            return indeterminate
+                ? makeClassName(indeterminateSurface, true)
+                : makeClassName(surface, true);
+        default:
+            return makeClassName(surface, true);
+    }
+};
+export var selectAppearanceStyle = function (type, color) {
+    var darkColor = "".concat(color, "Dark");
+    var surface = {
+        light: {
+            default: "bg-[#FFFFFF] border border-slateA-7 data-placeholder:text-slateA-10 text-slateA-12",
+            hover: "hover:bg-[#FFFFFF] hover:border hover:border-slateA-8 hover:text-slateA-10",
+            active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-slateA-10 active:opacity-[.92]"),
+            disable: "disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-[#111113] dark:border dark:data-placeholder:border-slateDarkA-7 dark:data-placeholder:text-slateDarkA-9 dark:border-slateDarkA-7 dark:text-slateDarkA-12",
+            hover: "dark:hover:bg-[#111113] dark:hover:border dark:hover:border-slateDarkA-8 dark:hover:text-slateDarkA-10",
+            active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border dark:active:border-").concat(darkColor, "A-8 dark:active:text-slateDarkA-10 dark:active:opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var classic = {
+        light: {
+            default: "bg-slateA-2 border border-slate-4 data-placeholder:text-slateA-10 text-slateA-12",
+            hover: "hover:bg-slateA-3 hover:border hover:border-slate-4 hover:text-slateA-10",
+            active: "active:bg-slateA-4 active:border active:border-slate-6 active:text-slateA-10",
+            disable: "disabled:bg-slateA-3 disabled:border disabled:border-slate-4 disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-slateDarkA-2 dark:border-slateDark-4 dark:data-placeholder:text-slateDarkA-10 dark:text-slateDarkA-12",
+            hover: "dark:hover:bg-slateDarkA-3 dark:hover:border-slateDark-4 dark:hover:text-slateDarkA-10",
+            active: "dark:active:bg-slateDarkA-4 dark:active:border-slateDark-6 dark:active:text-slateDarkA-10",
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var soft = {
+        light: {
+            default: "bg-".concat(color, "A-3 border-none data-placeholder:text-").concat(color, "A-12/[.5] text-").concat(color, "A-12"),
+            hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-12/[.5]"),
+            active: "active:bg-".concat(color, "A-5 active:border-none active:text-").concat(color, "A-12/[.5] active:opacity-[.92]"),
+            disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-".concat(darkColor, "A-3 dark:border-none dark:data-placeholder:text-").concat(darkColor, "A-12/[.5] dark:text-").concat(darkColor, "A-12 "),
+            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:border-none dark:hover:text-").concat(darkColor, "A-12/[.5]"),
+            active: "dark:active:bg-".concat(darkColor, "A-5 dark:active:border-none dark:active:text-").concat(darkColor, "A-12/[.5] dark:active:opacity-[.92]"),
+            disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-none dark:disabled:text-slateDarkA-8",
+        },
+    };
+    var ghost = {
+        light: {
+            default: "bg-transparent border-none data-placeholder:text-".concat(color, "A-12/[.5] text-").concat(color, "A-12"),
+            hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-1/[.5]"),
+            active: "active:bg-".concat(color, "A-4 active:border-none active:text-").concat(color, "A-12/[.5] active:opacity-[.92]"),
+            disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
+        },
+        dark: {
+            default: "dark:bg-transparent dark:border-none dark:data-placeholder:text-".concat(darkColor, "A-12/[.5] dark:text-").concat(darkColor, "A-12"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:border-none dark:hover:text-").concat(darkColor, "A-12/[.5]"),
+            active: "dark:active:bg-".concat(darkColor, "A-4 dark:active:border-none dark:active:text-").concat(darkColor, "A-12/[.5] dark:active:opacity-[.92]"),
+            disable: "dark:disabled:text-slateDarkA-8 dark:disabled:border-none",
+        },
+    };
+    var makeClassName = function (type) {
+        var className = '';
+        className += "".concat(type.light.default, " ").concat(type.dark.default, "  ").concat(type.light.hover, " ").concat(type.light.active, " ").concat(type.light.disable, " ").concat(type.dark.hover, " ").concat(type.dark.active, " ").concat(type.dark.disable);
+        return className;
+    };
+    switch (type) {
+        case 'classic':
+            return makeClassName(classic);
+        case 'soft':
+            return makeClassName(soft);
+        case 'surface':
+            return makeClassName(surface);
+        case 'ghost':
+            return makeClassName(ghost);
+        default:
+            return '';
+    }
+};