@lotte-innovate/ui-component-test 0.2.1 → 0.2.3

package/dist/lib/constants.js

@@ -1,4 +1,4 @@
-import { ColorStyle, DarkColorStyle, colorOptions } from '../lib/color/constants';
+import { ColorStyle, DarkColorStyle, MAIN_COLOR, colorOptions } from '../lib/color/constants';
 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%'];
@@ -13,8 +13,21 @@ export var appearanceOptions = [
     'solid',
     'surface',
 ];
-//차트 label 위치
+//차트
 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: {
@@ -142,6 +155,329 @@ export var commonArgTypes = {
         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 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 () {
@@ -170,6 +506,14 @@ export var textColorStyle = function () {
     }
     return color;
 };
+export var borderColorStyle = function () {
+    var color = {};
+    for (var i in ColorStyle) {
+        var darkColor = "".concat(i, "Dark");
+        color[i] = "border-".concat(ColorStyle[i], " dark:border-").concat(DarkColorStyle[darkColor]);
+    }
+    return color;
+};
 var makeClassName = function (type, isClickable) {
     var className = '';
     className += "".concat(type.light.default, " ").concat(type.dark.default);
@@ -179,33 +523,34 @@ var makeClassName = function (type, isClickable) {
     return className;
 };
 export var appearanceStyle = function (type, color, isClickable) {
+    if (color === void 0) { color = MAIN_COLOR; }
     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 text-white shadow-button-classic"),
-            hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9 hover:text-white"),
-            active: "active:bg-".concat(color, "-9 active:border-").concat(color, "-9 active:text-white"),
+            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:text-slateDark-1 dark:shadow-button-dark-classic"),
-            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1"),
-            active: "dark:active:bg-".concat(darkColor, "-9 dark:active:border-").concat(darkColor, "-9 dark:active:text-slateDark-1"),
+            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 text-white"),
-            hover: "hover:bg-".concat(color, "-10 hover:border-none hover:text-white"),
-            active: "active:bg-".concat(color, "-10 active:border-none active:text-white active:opacity-[.92]"),
+            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 dark:text-slateDark-1"),
-            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1"),
-            active: "dark:active:bg-".concat(darkColor, "-10 dark:active:text-slateDark-1 dark:active:opacity-[.92]"),
+            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",
         },
     };
@@ -283,6 +628,7 @@ export var appearanceStyle = function (type, color, isClickable) {
     }
 };
 export var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {
+    if (color === void 0) { color = MAIN_COLOR; }
     if (isClickable === void 0) { isClickable = true; }
     if (stateOn === void 0) { stateOn = ''; }
     var darkColor = "".concat(color, "Dark");
@@ -295,7 +641,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
         },
         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"),
+            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1 dark:").concat(stateOn, "hover:bg-").concat(darkColor, "-10 dark:").concat(stateOn, "hover:border-").concat(darkColor, "-9 dark:").concat(stateOn, "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",
         },
@@ -309,7 +655,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
         },
         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"),
+            hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1 dark:").concat(stateOn, "hover:bg-").concat(darkColor, "-10 dark:").concat(stateOn, "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",
         },
@@ -323,7 +669,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
         },
         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"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11 dark:").concat(stateOn, "hover:bg-").concat(darkColor, "A-4 dark:").concat(stateOn, "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",
         },
@@ -337,7 +683,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
         },
         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"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 dark:").concat(stateOn, "hover:bg-").concat(darkColor, "A-2 dark:").concat(stateOn, "hover:border-").concat(darkColor, "A-8 dark:").concat(stateOn, "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",
         },
@@ -351,7 +697,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
         },
         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"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 dark:").concat(stateOn, "hover:bg-").concat(darkColor, "A-2 dark:").concat(stateOn, "hover:border-").concat(darkColor, "A-8 dark:").concat(stateOn, "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",
         },
@@ -365,7 +711,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
         },
         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"),
+            hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11 dark:").concat(stateOn, "hover:bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "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",
         },
@@ -388,6 +734,7 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
     }
 };
 export var menuItemAppearanceStyle = function (type, color) {
+    if (color === void 0) { color = MAIN_COLOR; }
     var appearanceStyle = '';
     if (type === 'solid') {
         appearanceStyle = "hover:bg-".concat(color, "-9 dark:hover:bg-").concat(color, "Dark-9 ");
@@ -403,22 +750,8 @@ export var menuItemAppearanceStyle = function (type, color) {
     }
     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) {
+    if (color === void 0) { color = MAIN_COLOR; }
     var darkColor = "".concat(color, "Dark");
     var surface = {
         light: {

package/dist/lib/constants.mjs

@@ -0,0 +1,2 @@
+var a={"90%":"scale-90","95%":"scale-95","100%":"scale-100","105%":"scale-105","110%":"scale-110"};export{a as scalingVariants};
+//# sourceMappingURL=constants.mjs.map

package/dist/lib/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../../lib/constants.js"],"sourcesContent":["import { ColorStyle, DarkColorStyle, MAIN_COLOR, colorOptions } from '../lib/color/constants';\nexport var radiusOptions = ['none', 'small', 'medium', 'large', 'full'];\nexport var typoSizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];\nexport var scalingOptions = ['90%', '95%', '100%', '105%', '110%'];\nexport var sizeOptions = ['x-small', 'small', 'medium', 'large', 'x-large'];\nexport var weightOptions = ['regular', 'medium', 'semibold', 'bold'];\nexport var themeOptions = ['light', 'dark'];\nexport var appearanceOptions = [\n    'classic',\n    'ghost',\n    'outline',\n    'soft',\n    'solid',\n    'surface',\n];\n//차트\nexport var labelPositionList = ['top', 'bottom', 'left', 'right'];\nexport var pointStyleList = [\n    'circle',\n    'cross',\n    'crossRot',\n    'dash',\n    'line',\n    'rect',\n    'rectRounded',\n    'rectRot',\n    'star',\n    'triangle',\n    false,\n];\nexport var radiusVariants = {\n    // 체크박스\n    small: {\n        none: 'rounded-none',\n        small: 'rounded-[3px]',\n        medium: 'rounded',\n        large: 'rounded',\n        full: 'rounded',\n    },\n    // 라디오버튼, 스위치, 태그, 배지, 버튼, 텍스트인풋, 텍스트영역, 페이지네이션\n    base: {\n        none: 'rounded-none',\n        small: 'rounded-[3px]',\n        medium: 'rounded', // 4px\n        large: 'rounded-md', // 6px\n        full: 'rounded-full',\n    },\n    // 배너\n    large: {\n        none: 'rounded-none',\n        small: 'rounded',\n        medium: 'rounded-lg', // 8px\n        large: 'rounded-xl', // 12px\n        full: 'rounded-2xl', // 16px\n    },\n    // 다이얼로그, 바텀시트, 그리드, 카드\n    'extra-large': {\n        none: 'rounded-none',\n        small: 'rounded',\n        medium: 'rounded-lg',\n        large: 'rounded-xl',\n        full: 'rounded-xl',\n    },\n    // Dropdown, Context Menu 아이템\n    'menu-item': {\n        none: 'rounded-none',\n        small: 'rounded-[1px]',\n        medium: 'rounded-sm',\n        large: 'rounded',\n        full: 'rounded',\n    },\n};\nexport var weightVariants = {\n    regular: 'font-normal', // 400\n    medium: 'font-medium', // 500\n    semibold: 'font-semibold', // 600\n    bold: 'font-bold', // 700\n};\nexport var scalingVariants = {\n    '90%': 'scale-90',\n    '95%': 'scale-95',\n    '100%': 'scale-100',\n    '105%': 'scale-105',\n    '110%': 'scale-110',\n};\n// 스토리북 공통 argTypes 설정\nexport var commonArgTypes = {\n    typoSize: {\n        table: {\n            category: 'Theme Props',\n            type: { summary: '1 ~ 9' },\n        },\n        control: { type: 'select' },\n        options: typoSizeOptions,\n        defaultValue: { summary: '3' },\n    },\n    scaling: {\n        table: {\n            category: 'Theme Props',\n            type: { summary: scalingOptions.join(' | ') },\n        },\n        control: { type: 'select' },\n        options: scalingOptions,\n        defaultValue: { summary: '100%' },\n    },\n    weight: {\n        table: {\n            category: 'Theme Props',\n            type: { summary: weightOptions.join(' | ') },\n        },\n        options: weightOptions,\n        control: { type: 'select' },\n        defaultValue: { summary: 'medium' },\n    },\n    radius: {\n        table: {\n            category: 'Theme Props',\n            type: { summary: radiusOptions.join(' | ') },\n        },\n        options: radiusOptions,\n        control: { type: 'select' },\n        defaultValue: { summary: 'medium' },\n    },\n    color: {\n        table: {\n            category: 'Theme Props',\n            type: { summary: 'colorVariants' },\n        },\n        options: colorOptions,\n        control: { type: 'select' },\n        defaultValue: { summary: 'red' },\n    },\n    basicText: {\n        table: {\n            category: 'Props',\n            type: { summary: 'string' },\n        },\n        control: 'text',\n    },\n    appearance: {\n        table: {\n            category: 'Props',\n            type: { summary: appearanceOptions.join(' | ') },\n        },\n        options: appearanceOptions,\n        control: { type: 'select' },\n        defaultValue: { summary: 'solid' },\n    },\n    size: {\n        table: {\n            category: 'Props',\n            type: { summary: sizeOptions.join(' | ') },\n        },\n        control: { type: 'select' },\n        options: sizeOptions,\n        defaultValue: { summary: 'medium' },\n    },\n    isColorMixed: {\n        table: {\n            category: 'Props',\n            type: { summary: 'boolean' },\n        },\n        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\",\n        control: 'readonly',\n        defaultValue: { summary: 'true' },\n    },\n    chartAppearance: {\n        table: {\n            category: 'Props',\n            type: { summary: 'solid | soft' },\n        },\n        options: ['solid', 'soft'],\n        control: 'readonly',\n        defaultValue: { summary: 'solid' },\n        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\",\n    },\n    datasets: {\n        name: 'datasets',\n        description: '차트에 사용할 데이터셋',\n        table: {\n            category: 'Props',\n            type: { summary: 'object' },\n        },\n    },\n    labels: {\n        description: '차트 위에 표시될 라벨들',\n        table: {\n            category: 'Props',\n            type: { summary: 'object' },\n        },\n    },\n};\nexport var chartTitleArgTypes = {\n    title: {\n        description: '차트 타이틀',\n        table: {\n            category: 'Props',\n            type: { summary: 'object' },\n        },\n    },\n    'title.display': {\n        description: '타이틀 표시 여부',\n        table: {\n            category: 'Title Props',\n            type: { summary: 'boolean' },\n        },\n        control: { type: 'boolean', defaultValue: false },\n        defaultValue: { summary: false },\n    },\n    'title.text': {\n        description: '타이틀 내용',\n        table: {\n            category: 'Title Props',\n            type: { summary: 'string | string[]' },\n        },\n        control: { type: 'text' },\n        defaultValue: { summary: '' },\n    },\n    'title.position': {\n        description: '타이틀 위치',\n        table: {\n            category: 'Title Props',\n            type: { summary: 'top | right | bottom | left' },\n        },\n        control: { type: 'select' },\n        options: ['top', 'right', 'bottom', 'left'],\n        defaultValue: { summary: 'top' },\n    },\n    'title.align': {\n        description: '타이틀 정렬',\n        table: {\n            category: 'Title Props',\n            type: { summary: 'start | center | end' },\n        },\n        control: { type: 'select' },\n        options: ['start', 'center', 'end'],\n        defaultValue: { summary: 'top' },\n    },\n    'title.font.size': {\n        description: '타이틀 폰트 크기',\n        table: {\n            category: 'Title Props',\n            type: { summary: 'number' },\n        },\n        control: { type: 'text' },\n        defaultValue: { summary: 12 },\n    },\n};\nexport var chartLegendArgTypes = {\n    legend: {\n        description: '차트 범례',\n        table: {\n            category: 'Props',\n            type: { summary: 'object' },\n        },\n    },\n    'legend.display': {\n        description: '범례 표시 여부',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'boolean' },\n        },\n        control: { type: 'boolean' },\n        defaultValue: { summary: true },\n    },\n    'legend.align': {\n        description: '범례 정렬',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'start | center | end' },\n        },\n        control: { type: 'select' },\n        options: ['start', 'center', 'end'],\n        defaultValue: { summary: 'center' },\n    },\n    'legend.position': {\n        description: '범례 위치',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'top | right | bottom | left' },\n        },\n        control: { type: 'select' },\n        options: ['top', 'right', 'bottom', 'left'],\n        defaultValue: { summary: 'top' },\n    },\n    'legend.maxHeight': {\n        description: '범례 최대 높이(픽셀)',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'number' },\n        },\n        control: { type: 'text' },\n        defaultValue: { summary: 12 },\n    },\n    'legend.maxWidth': {\n        description: '범례 최대 길이(픽셀)',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'number' },\n        },\n        control: { type: 'text' },\n        defaultValue: { summary: 12 },\n    },\n    'legend.title.display': {\n        description: '범례 타이틀 표시 여부',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'boolean' },\n        },\n        control: { type: 'boolean' },\n        defaultValue: { summary: false },\n    },\n    'legend.title.text': {\n        description: '범례 타이틀 문구',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'string' },\n        },\n        control: { type: 'text' },\n        defaultValue: { summary: '' },\n    },\n    'legend.labels.usePointStyle': {\n        description: '범례 스타일 사용여부',\n        table: {\n            category: 'Legend Props',\n            type: { summary: 'boolean' },\n        },\n        control: { type: 'boolean' },\n        defaultValue: { summary: 'false' },\n    },\n    'legend.labels.pointStyle': {\n        description: \"- \\uB77C\\uBCA8 \\uD3EC\\uC778\\uD2B8 \\uC2A4\\uD0C0\\uC77C\\n      - usePointStyle\\uAC00 true\\uC778 \\uACBD\\uC6B0 \\uC801\\uC6A9\",\n        table: {\n            category: 'Legend Props',\n            type: { summary: pointStyleList.join(' | ') },\n        },\n        control: { type: 'select' },\n        options: pointStyleList,\n        defaultValue: { summary: 'false' },\n    },\n};\nexport var chartDatasetsArgsTypes = {\n    'datasets[n].data': {\n        description: '데이터셋 데이터',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'object | object[] | number[] | string[]' },\n        },\n    },\n    'datasets[n].label': {\n        description: '데이터셋 라벨',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'string' },\n        },\n    },\n    'datasets[n].backgroundColor': {\n        description: '데이터셋 배경 색상',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'object' },\n        },\n    },\n    'datasets[n].borderColor': {\n        description: '데이터셋 테두리 색상',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'object' },\n        },\n    },\n    'datasets[n].borderWidth': {\n        description: '데이터셋 테두리 두꼐',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].borderRadius': {\n        description: '데이터셋 둥글기',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].hoverBackgroundColor': {\n        description: '데이터셋 마우스 호버 시 배경 색상',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'object' },\n        },\n    },\n    'datasets[n].hoverBorderColor': {\n        description: '데이터셋 마우스 호버 시 테두리 색상',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'object' },\n        },\n    },\n    'datasets[n].hoverBorderWidth': {\n        description: '데이터셋 호버 시 테두리 두께',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].hoverBorderRadius': {\n        description: '데이터셋 호버 시 둥글기',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].order': {\n        description: '데이터셋 순서',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].hidden': {\n        description: '데이터셋 표시 여부',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'boolean' },\n        },\n    },\n    'datasets[n].borderDash': {\n        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\",\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number[]' },\n        },\n    },\n    'datasets[n].borderDashOffset': {\n        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\",\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].offset': {\n        description: '각 섹션 사이의 간격 조정',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n    'datasets[n].weight': {\n        description: '각 섹션의 상대적인 두께를 설정, 섹션이 차지하는 공간의 비율을 조정',\n        table: {\n            category: 'Dataset Props',\n            type: { summary: 'number' },\n        },\n    },\n};\nexport var chartDatalabelsArgsTypes = {\n    datalabels: {\n        table: {\n            disable: true,\n        },\n    },\n    'datalabels.display': {\n        description: '차트 데이터 라벨 표시 여부',\n        table: {\n            category: 'Datalabels Props',\n            type: { summary: 'boolean' },\n        },\n        control: { type: 'boolean' },\n        defaultValue: { summary: false },\n    },\n    'datalabels.color': {\n        description: '차트 데이터 라벨 색상',\n        table: {\n            category: 'Datalabels Props',\n            type: { summary: 'string' },\n        },\n        control: { type: 'select' },\n        options: ['white', 'gray', 'black'],\n        defaultValue: { summary: 'gray' },\n    },\n};\nexport var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];\nexport var primaryColorStyle = function () {\n    var color = {};\n    for (var i in ColorStyle) {\n        var darkColor = \"\".concat(i, \"Dark\");\n        color[i] = blackText.includes(i)\n            ? \"bg-\".concat(ColorStyle[i], \" text-slate-12 dark:bg-\").concat(DarkColorStyle[darkColor], \" dark:text-slateDark-12\")\n            : \"bg-\".concat(ColorStyle[i], \" text-white dark:bg-\").concat(DarkColorStyle[darkColor], \" dark:text-slateDark-1\");\n    }\n    return color;\n};\nexport var bgColorStyle = function () {\n    var color = {};\n    for (var i in ColorStyle) {\n        var darkColor = \"\".concat(i, \"Dark\");\n        color[i] = \"bg-\".concat(ColorStyle[i], \" dark:bg-\").concat(DarkColorStyle[darkColor]);\n    }\n    return color;\n};\nexport var textColorStyle = function () {\n    var color = {};\n    for (var i in ColorStyle) {\n        var darkColor = \"\".concat(i, \"Dark\");\n        color[i] = \"text-\".concat(ColorStyle[i], \" dark:text-\").concat(DarkColorStyle[darkColor]);\n    }\n    return color;\n};\nexport var borderColorStyle = function () {\n    var color = {};\n    for (var i in ColorStyle) {\n        var darkColor = \"\".concat(i, \"Dark\");\n        color[i] = \"border-\".concat(ColorStyle[i], \" dark:border-\").concat(DarkColorStyle[darkColor]);\n    }\n    return color;\n};\nvar makeClassName = function (type, isClickable) {\n    var className = '';\n    className += \"\".concat(type.light.default, \" \").concat(type.dark.default);\n    if (isClickable) {\n        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);\n    }\n    return className;\n};\nexport var appearanceStyle = function (type, color, isClickable) {\n    if (color === void 0) { color = MAIN_COLOR; }\n    if (isClickable === void 0) { isClickable = true; }\n    var darkColor = \"\".concat(color, \"Dark\");\n    var classic = {\n        light: {\n            default: \"bg-\".concat(color, \"-9 border border-solid border-\").concat(color, \"-9 shadow-button-classic\"),\n            hover: \"hover:bg-\".concat(color, \"-10 hover:border-\").concat(color, \"-9\"),\n            active: \"active:bg-\".concat(color, \"-9 active:border-\").concat(color, \"-9\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"-9 dark:border-\").concat(darkColor, \"-9 dark:shadow-button-dark-classic\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"-10 dark:hover:border-\").concat(darkColor, \"-9\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"-9 dark:active:border-\").concat(darkColor, \"-9\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var solid = {\n        light: {\n            default: \"bg-\".concat(color, \"-9 border-none\"),\n            hover: \"hover:bg-\".concat(color, \"-10 hover:border-none\"),\n            active: \"active:bg-\".concat(color, \"-10 active:border-none active:opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"-9\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"-10\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"-10 dark:active:opacity-[.92]\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var soft = {\n        light: {\n            default: \"bg-\".concat(color, \"A-3 border-none text-\").concat(color, \"A-11\"),\n            hover: \"hover:bg-\".concat(color, \"A-4 hover:border-none hover:text-\").concat(color, \"A-11\"),\n            active: \"active:bg-\".concat(color, \"A-5 active:border-none active:text-\").concat(color, \"A-11 active:opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"A-3 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-4 dark:hover:text-\").concat(darkColor, \"A-11\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"A-5 dark:active:text-\").concat(darkColor, \"A-11 dark:active:opacity-[.92]\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var surface = {\n        light: {\n            default: \"bg-\".concat(color, \"A-2 border border-solid border-\").concat(color, \"A-7 text-\").concat(color, \"A-11\"),\n            hover: \"hover:bg-\".concat(color, \"A-2 hover:border-\").concat(color, \"A-8 hover:text-\").concat(color, \"A-11\"),\n            active: \"active:bg-\".concat(color, \"A-3 active:border-\").concat(color, \"A-8 active:text-\").concat(color, \"A-11 active:opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"A-2 dark:border-\").concat(darkColor, \"A-7 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-2 dark:hover:border-\").concat(darkColor, \"A-8 dark:hover:text-\").concat(darkColor, \"A-11\"),\n            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]\"),\n            disable: \"dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var outline = {\n        light: {\n            default: \"bg-transparent border border-solid border-\".concat(color, \"A-8 text-\").concat(color, \"A-11\"),\n            hover: \"hover:bg-\".concat(color, \"A-2 hover:border-\").concat(color, \"A-8 hover:text-\").concat(color, \"A-11\"),\n            active: \"active:bg-\".concat(color, \"A-3 active:border-\").concat(color, \"A-8 active:text-\").concat(color, \"A-11\"),\n            disable: \"disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:border-\".concat(darkColor, \"A-8 dark:bg-transparent dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-2 dark:hover:border-\").concat(darkColor, \"A-8 dark:hover:text-\").concat(darkColor, \"A-11\"),\n            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]\"),\n            disable: \"dark:disabled:border-slateDarkA-7 dark:disabled:bg-transparent dark:disabled:text-slateDarkA-8 \",\n        },\n    };\n    var ghost = {\n        light: {\n            default: \"bg-transparent border-none text-\".concat(color, \"A-11\"),\n            hover: \"hover:bg-\".concat(color, \"A-3 hover:border-none hover:text-\").concat(color, \"A-11\"),\n            active: \"active:bg-\".concat(color, \"A-4 active:border-none active:text-\").concat(color, \"A-11 active:opacity-[.92]\"),\n            disable: \"disabled:bg-transparent disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-transparent dark:text-\".concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-3 dark:hover:text-\").concat(darkColor, \"A-11\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"A-4 dark:active:text-\").concat(darkColor, \"A-11 dark:active:opacity-[.92]\"),\n            disable: \"dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    switch (type) {\n        case 'classic':\n            return makeClassName(classic, isClickable);\n        case 'solid':\n            return makeClassName(solid, isClickable);\n        case 'soft':\n            return makeClassName(soft, isClickable);\n        case 'surface':\n            return makeClassName(surface, isClickable);\n        case 'outline':\n            return makeClassName(outline, isClickable);\n        case 'ghost':\n            return makeClassName(ghost, isClickable);\n        default:\n            return '';\n    }\n};\nexport var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {\n    if (color === void 0) { color = MAIN_COLOR; }\n    if (isClickable === void 0) { isClickable = true; }\n    if (stateOn === void 0) { stateOn = ''; }\n    var darkColor = \"\".concat(color, \"Dark\");\n    var classic = {\n        light: {\n            default: \"bg-\".concat(color, \"-9 border border-solid border-\").concat(color, \"-9 text-white shadow-button-classic\"),\n            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\"),\n            active: \"\".concat(stateOn, \"bg-\").concat(color, \"-9 \").concat(stateOn, \"border-\").concat(color, \"-9 \").concat(stateOn, \"text-white\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"-9 dark:border-\").concat(darkColor, \"-9 dark:text-slateDark-1\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"-10 dark:hover:border-\").concat(darkColor, \"-9 dark:hover:text-slateDark-1 dark:\").concat(stateOn, \"hover:bg-\").concat(darkColor, \"-10 dark:\").concat(stateOn, \"hover:border-\").concat(darkColor, \"-9 dark:\").concat(stateOn, \"hover:text-slateDark-1\"),\n            active: \"dark:\".concat(stateOn, \"bg-\").concat(darkColor, \"-9 dark:\").concat(stateOn, \"border-\").concat(darkColor, \"-9 dark:\").concat(stateOn, \"text-slateDark-1\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var solid = {\n        light: {\n            default: \"bg-\".concat(color, \"-9 border-none text-white\"),\n            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\"),\n            active: \"\".concat(stateOn, \"bg-\").concat(color, \"-10 \").concat(stateOn, \"border-none \").concat(stateOn, \"text-white \").concat(stateOn, \"opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"-9 dark:text-slateDark-1\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"-10 dark:hover:text-slateDark-1 dark:\").concat(stateOn, \"hover:bg-\").concat(darkColor, \"-10 dark:\").concat(stateOn, \"hover:text-slateDark-1\"),\n            active: \"dark:\".concat(stateOn, \"bg-\").concat(darkColor, \"-10 dark:\").concat(stateOn, \"text-slateDark-1 dark:\").concat(stateOn, \"opacity-[.92]\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 disabled:text-slateDarkA-8\",\n        },\n    };\n    var soft = {\n        light: {\n            default: \"bg-\".concat(color, \"A-3 border-none text-\").concat(color, \"A-11\"),\n            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\"),\n            active: \"\".concat(stateOn, \"bg-\").concat(color, \"A-5 \").concat(stateOn, \"border-none \").concat(stateOn, \"text-\").concat(color, \"A-11 \").concat(stateOn, \"opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"A-3 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-4 dark:hover:text-\").concat(darkColor, \"A-11 dark:\").concat(stateOn, \"hover:bg-\").concat(darkColor, \"A-4 dark:\").concat(stateOn, \"hover:text-\").concat(darkColor, \"A-11\"),\n            active: \"dark:\".concat(stateOn, \"bg-\").concat(darkColor, \"A-5 dark:\").concat(stateOn, \"text-\").concat(darkColor, \"A-11 dark:\").concat(stateOn, \"opacity-[.92]\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var surface = {\n        light: {\n            default: \"bg-\".concat(color, \"A-2 border border-solid border-\").concat(color, \"A-7 text-\").concat(color, \"A-11\"),\n            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\"),\n            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]\"),\n            disable: \"disabled:bg-slatDarkeA-2 disabled:border-slateDarkA-6 disabled:text-slateDarkA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"A-2 dark:border-\").concat(darkColor, \"A-7 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-2 dark:hover:border-\").concat(darkColor, \"A-8 dark:hover:text-\").concat(darkColor, \"A-11 dark:\").concat(stateOn, \"hover:bg-\").concat(darkColor, \"A-2 dark:\").concat(stateOn, \"hover:border-\").concat(darkColor, \"A-8 dark:\").concat(stateOn, \"hover:text-\").concat(darkColor, \"A-11\"),\n            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]\"),\n            disable: \"dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var outline = {\n        light: {\n            default: \"bg-transparent border border-solid border-\".concat(color, \"A-8 text-\").concat(color, \"A-11\"),\n            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\"),\n            active: \"\".concat(stateOn, \"bg-\").concat(color, \"A-3 \").concat(stateOn, \"border-\").concat(color, \"A-8 \").concat(stateOn, \"text-\").concat(color, \"A-11\"),\n            disable: \"disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:border-\".concat(darkColor, \"A-8 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-2 dark:hover:border-\").concat(darkColor, \"A-8 dark:hover:text-\").concat(darkColor, \"A-11 dark:\").concat(stateOn, \"hover:bg-\").concat(darkColor, \"A-2 dark:\").concat(stateOn, \"hover:border-\").concat(darkColor, \"A-8 dark:\").concat(stateOn, \"hover:text-\").concat(darkColor, \"A-11\"),\n            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]\"),\n            disable: \"dark:disabled:border-slateDarkA-7 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var ghost = {\n        light: {\n            default: \"bg-transparent border-none text-\".concat(color, \"A-11\"),\n            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\"),\n            active: \"\".concat(stateOn, \"bg-\").concat(color, \"A-4 \").concat(stateOn, \"border-none \").concat(stateOn, \"text-\").concat(color, \"A-11 \").concat(stateOn, \"opacity-[.92]\"),\n            disable: \"disabled:bg-transparent disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-transparent dark:text-\".concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-3 dark:hover:text-\").concat(darkColor, \"A-11 dark:\").concat(stateOn, \"hover:bg-\").concat(darkColor, \"A-3 dark:\").concat(stateOn, \"hover:text-\").concat(darkColor, \"A-11\"),\n            active: \"dark:\".concat(stateOn, \"bg-\").concat(darkColor, \"A-4 dark:\").concat(stateOn, \"text-\").concat(darkColor, \"A-11 dark:\").concat(stateOn, \"opacity-[.92]\"),\n            disable: \"dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    switch (type) {\n        case 'classic':\n            return makeClassName(classic, isClickable);\n        case 'solid':\n            return makeClassName(solid, isClickable);\n        case 'soft':\n            return makeClassName(soft, isClickable);\n        case 'surface':\n            return makeClassName(surface, isClickable);\n        case 'outline':\n            return makeClassName(outline, isClickable);\n        case 'ghost':\n            return makeClassName(ghost, isClickable);\n        default:\n            return '';\n    }\n};\nexport var menuItemAppearanceStyle = function (type, color) {\n    if (color === void 0) { color = MAIN_COLOR; }\n    var appearanceStyle = '';\n    if (type === 'solid') {\n        appearanceStyle = \"hover:bg-\".concat(color, \"-9 dark:hover:bg-\").concat(color, \"Dark-9 \");\n        appearanceStyle += blackText.includes(color)\n            ? \"hover:text-slateA-11 dark:hover:text-white\"\n            : \"hover:text-white dark:hover:text-white\";\n    }\n    if (type === 'soft') {\n        appearanceStyle = \"hover:bg-\".concat(color, \"A-4 dark:hover-bg-\").concat(color, \"DarkA-4\");\n    }\n    if (type === 'ghost') {\n        appearanceStyle = \"hover:bg-\".concat(color, \"-3 dark:hover:bg-\").concat(color, \"Dark-3\");\n    }\n    return appearanceStyle;\n};\nexport var checkboxAppearanceStyle = function (type, color, indeterminate) {\n    if (color === void 0) { color = MAIN_COLOR; }\n    var darkColor = \"\".concat(color, \"Dark\");\n    var surface = {\n        light: {\n            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\"),\n            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\"),\n            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\"),\n            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\",\n        },\n        dark: {\n            default: \"dark:data-[state=unchecked]:border-slateDarkA-7\\n        dark:data-[state=checked]:bg-\".concat(darkColor, \"-9 dark:data-[state=checked]:text-#111113\"),\n            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\"),\n            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\"),\n            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\",\n        },\n    };\n    var soft = {\n        light: {\n            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\"),\n            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\"),\n            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\"),\n            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\",\n        },\n        dark: {\n            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\"),\n            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\"),\n            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\"),\n            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\",\n        },\n    };\n    var indeterminateSurface = {\n        light: {\n            default: \"border bg-\".concat(color, \"A-2 border-\").concat(color, \"A-7 text-\").concat(color, \"A-11\"),\n            hover: \"hover:bg-\".concat(color, \"A-2 hover:border-\").concat(color, \"A-8 hover:text-\").concat(color, \"A-11\"),\n            active: \"active:bg-\".concat(color, \"A-3 active:border-\").concat(color, \"A-8 active:text-\").concat(color, \"A-11\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-slateA-6 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-\".concat(darkColor, \"A-2 dark:border-\").concat(darkColor, \"A-7 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-2 dark:hover:border-\").concat(darkColor, \"A-8 dark:hover:text-\").concat(darkColor, \"A-11\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"A-3 dark:active:border-\").concat(darkColor, \"A-8 dark:active:text-\").concat(darkColor, \"A-11\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var indeterminateSoft = {\n        light: {\n            default: \"border bg-transparent border-\".concat(color, \"A-6 text-\").concat(color, \"A-11\"),\n            hover: \"hover:bg-transparent hover:border-\".concat(color, \"A-6 hover:text-\").concat(color, \"A-11\"),\n            active: \"active:bg-transparent active:border-\".concat(color, \"A-6 active:text-\").concat(color, \"A-11\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:border-\".concat(darkColor, \"A-6 dark:text-\").concat(darkColor, \"A-11\"),\n            hover: \"dark:hover:border-\".concat(darkColor, \"A-6 dark:hover:text-\").concat(darkColor, \"A-11\"),\n            active: \"dark:active:border-\".concat(darkColor, \"A-6 dark:active:text-\").concat(darkColor, \"A-11\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    switch (type) {\n        case 'classic':\n            return indeterminate\n                ? makeClassName(indeterminateSurface, true)\n                : \"\".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\");\n        case 'soft':\n            return indeterminate ? makeClassName(indeterminateSoft, true) : makeClassName(soft, true);\n        case 'surface':\n            return indeterminate\n                ? makeClassName(indeterminateSurface, true)\n                : makeClassName(surface, true);\n        default:\n            return makeClassName(surface, true);\n    }\n};\nexport var selectAppearanceStyle = function (type, color) {\n    var darkColor = \"\".concat(color, \"Dark\");\n    var surface = {\n        light: {\n            default: \"bg-[#FFFFFF] border border-slateA-7 data-placeholder:text-slateA-10 text-slateA-12\",\n            hover: \"hover:bg-[#FFFFFF] hover:border hover:border-slateA-8 hover:text-slateA-10\",\n            active: \"active:bg-\".concat(color, \"A-3 active:border-\").concat(color, \"A-8 active:text-slateA-10 active:opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8\",\n        },\n        dark: {\n            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\",\n            hover: \"dark:hover:bg-[#111113] dark:hover:border dark:hover:border-slateDarkA-8 dark:hover:text-slateDarkA-10\",\n            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]\"),\n            disable: \"dark:disabled:bg-slateDarkA-2 dark:disabled:border dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var classic = {\n        light: {\n            default: \"bg-slateA-2 border border-slate-4 data-placeholder:text-slateA-10 text-slateA-12\",\n            hover: \"hover:bg-slateA-3 hover:border hover:border-slate-4 hover:text-slateA-10\",\n            active: \"active:bg-slateA-4 active:border active:border-slate-6 active:text-slateA-10\",\n            disable: \"disabled:bg-slateA-3 disabled:border disabled:border-slate-4 disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-slateDarkA-2 dark:border-slateDark-4 dark:data-placeholder:text-slateDarkA-10 dark:text-slateDarkA-12\",\n            hover: \"dark:hover:bg-slateDarkA-3 dark:hover:border-slateDark-4 dark:hover:text-slateDarkA-10\",\n            active: \"dark:active:bg-slateDarkA-4 dark:active:border-slateDark-6 dark:active:text-slateDarkA-10\",\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var soft = {\n        light: {\n            default: \"bg-\".concat(color, \"A-3 border-none data-placeholder:text-\").concat(color, \"A-12/[.5] text-\").concat(color, \"A-12\"),\n            hover: \"hover:bg-\".concat(color, \"A-4 hover:border-none hover:text-\").concat(color, \"A-12/[.5]\"),\n            active: \"active:bg-\".concat(color, \"A-5 active:border-none active:text-\").concat(color, \"A-12/[.5] active:opacity-[.92]\"),\n            disable: \"disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            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 \"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-4 dark:hover:border-none dark:hover:text-\").concat(darkColor, \"A-12/[.5]\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"A-5 dark:active:border-none dark:active:text-\").concat(darkColor, \"A-12/[.5] dark:active:opacity-[.92]\"),\n            disable: \"dark:disabled:bg-slateDarkA-3 dark:disabled:border-none dark:disabled:text-slateDarkA-8\",\n        },\n    };\n    var ghost = {\n        light: {\n            default: \"bg-transparent border-none data-placeholder:text-\".concat(color, \"A-12/[.5] text-\").concat(color, \"A-12\"),\n            hover: \"hover:bg-\".concat(color, \"A-3 hover:border-none hover:text-\").concat(color, \"A-1/[.5]\"),\n            active: \"active:bg-\".concat(color, \"A-4 active:border-none active:text-\").concat(color, \"A-12/[.5] active:opacity-[.92]\"),\n            disable: \"disabled:bg-transparent disabled:border-none disabled:text-slateA-8\",\n        },\n        dark: {\n            default: \"dark:bg-transparent dark:border-none dark:data-placeholder:text-\".concat(darkColor, \"A-12/[.5] dark:text-\").concat(darkColor, \"A-12\"),\n            hover: \"dark:hover:bg-\".concat(darkColor, \"A-3 dark:hover:border-none dark:hover:text-\").concat(darkColor, \"A-12/[.5]\"),\n            active: \"dark:active:bg-\".concat(darkColor, \"A-4 dark:active:border-none dark:active:text-\").concat(darkColor, \"A-12/[.5] dark:active:opacity-[.92]\"),\n            disable: \"dark:disabled:text-slateDarkA-8 dark:disabled:border-none\",\n        },\n    };\n    var makeClassName = function (type) {\n        var className = '';\n        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);\n        return className;\n    };\n    switch (type) {\n        case 'classic':\n            return makeClassName(classic);\n        case 'soft':\n            return makeClassName(soft);\n        case 'surface':\n            return makeClassName(surface);\n        case 'ghost':\n            return makeClassName(ghost);\n        default:\n            return '';\n    }\n};\n"],"names":["scalingVariants"],"mappings":"AA8EU,IAACA,EAAkB,CACzB,MAAO,WACP,MAAO,WACP,OAAQ,YACR,OAAQ,YACR,OAAQ"}

package/dist/lib/index.d.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './Typography';
+export * from './theme';

package/dist/lib/index.js

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './Typography';
+export * from './theme';