@lotte-innovate/ui-component-test 0.1.52 → 0.1.54

package/dist/cjs/lib/constants.js

@@ -1,12 +1,38 @@
-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 = [
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectAppearanceStyle = exports.checkboxAppearanceStyle = exports.switchCheckedApperanceStyle = exports.menuItemAppearanceStyle = exports.toggleAppearanceStyle = exports.appearanceStyle = exports.textColorStyle = exports.bgColorStyle = exports.primaryColorStyle = exports.blackText = exports.chartDatalabelsArgsTypes = exports.chartDatasetsArgsTypes = exports.chartLegendArgTypes = exports.chartTitleArgTypes = exports.chartColorStyle = exports.commonArgTypes = exports.scalingVariants = exports.weightVariants = exports.radiusVariants = exports.pointStyleList = exports.labelPositionList = exports.appearanceOptions = exports.themeOptions = exports.weightOptions = exports.sizeOptions = exports.scalingOptions = exports.typoSizeOptions = exports.radiusOptions = void 0;
+var constants_1 = require("lib/color/constants");
+var lightColors = __importStar(require("lib/color/light"));
+exports.radiusOptions = ['none', 'small', 'medium', 'large', 'full'];
+exports.typoSizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+exports.scalingOptions = ['90%', '95%', '100%', '105%', '110%'];
+exports.sizeOptions = ['x-small', 'small', 'medium', 'large', 'x-large'];
+exports.weightOptions = ['regular', 'medium', 'semibold', 'bold'];
+exports.themeOptions = ['light', 'dark'];
+exports.appearanceOptions = [
     'classic',
     'ghost',
     'outline',
@@ -15,8 +41,8 @@ export var appearanceOptions = [
     'surface',
 ];
 //차트
-export var labelPositionList = ['top', 'bottom', 'left', 'right'];
-export var pointStyleList = [
+exports.labelPositionList = ['top', 'bottom', 'left', 'right'];
+exports.pointStyleList = [
     'circle',
     'cross',
     'crossRot',
@@ -29,7 +55,7 @@ export var pointStyleList = [
     'triangle',
     false,
 ];
-export var radiusVariants = {
+exports.radiusVariants = {
     // 체크박스
     small: {
         none: 'rounded-none',
@@ -71,13 +97,13 @@ export var radiusVariants = {
         full: 'rounded',
     },
 };
-export var weightVariants = {
+exports.weightVariants = {
     regular: 'font-normal', // 400
     medium: 'font-medium', // 500
     semibold: 'font-semibold', // 600
     bold: 'font-bold', // 700
 };
-export var scalingVariants = {
+exports.scalingVariants = {
     '90%': 'scale-90',
     '95%': 'scale-95',
     '100%': 'scale-100',
@@ -85,40 +111,40 @@ export var scalingVariants = {
     '110%': 'scale-110',
 };
 // 스토리북 공통 argTypes 설정
-export var commonArgTypes = {
+exports.commonArgTypes = {
     typoSize: {
         table: {
             category: 'Theme Props',
             type: { summary: '1 ~ 9' },
         },
         control: { type: 'select' },
-        options: typoSizeOptions,
+        options: exports.typoSizeOptions,
         defaultValue: { summary: '3' },
     },
     scaling: {
         table: {
             category: 'Theme Props',
-            type: { summary: scalingOptions.join(' | ') },
+            type: { summary: exports.scalingOptions.join(' | ') },
         },
         control: { type: 'select' },
-        options: scalingOptions,
+        options: exports.scalingOptions,
         defaultValue: { summary: '100%' },
     },
     weight: {
         table: {
             category: 'Theme Props',
-            type: { summary: weightOptions.join(' | ') },
+            type: { summary: exports.weightOptions.join(' | ') },
         },
-        options: weightOptions,
+        options: exports.weightOptions,
         control: { type: 'select' },
         defaultValue: { summary: 'medium' },
     },
     radius: {
         table: {
             category: 'Theme Props',
-            type: { summary: radiusOptions.join(' | ') },
+            type: { summary: exports.radiusOptions.join(' | ') },
         },
-        options: radiusOptions,
+        options: exports.radiusOptions,
         control: { type: 'select' },
         defaultValue: { summary: 'medium' },
     },
@@ -127,7 +153,7 @@ export var commonArgTypes = {
             category: 'Theme Props',
             type: { summary: 'colorVariants' },
         },
-        options: colorOptions,
+        options: constants_1.colorOptions,
         control: { type: 'select' },
         defaultValue: { summary: 'red' },
     },
@@ -141,19 +167,19 @@ export var commonArgTypes = {
     appearance: {
         table: {
             category: 'Props',
-            type: { summary: appearanceOptions.join(' | ') },
+            type: { summary: exports.appearanceOptions.join(' | ') },
         },
-        options: appearanceOptions,
+        options: exports.appearanceOptions,
         control: { type: 'select' },
         defaultValue: { summary: 'solid' },
     },
     size: {
         table: {
             category: 'Props',
-            type: { summary: sizeOptions.join(' | ') },
+            type: { summary: exports.sizeOptions.join(' | ') },
         },
         control: { type: 'select' },
-        options: sizeOptions,
+        options: exports.sizeOptions,
         defaultValue: { summary: 'medium' },
     },
     isColorMixed: {
@@ -191,15 +217,16 @@ export var commonArgTypes = {
         },
     },
 };
-export var chartColorStyle = function () {
+var chartColorStyle = function () {
     var colorValues = lightColors;
     var colorMappings = {};
-    chartColorOptions.forEach(function (color) {
+    constants_1.chartColorOptions.forEach(function (color) {
         colorMappings[color] = colorValues[color][9];
     });
     return colorMappings;
 };
-export var chartTitleArgTypes = {
+exports.chartColorStyle = chartColorStyle;
+exports.chartTitleArgTypes = {
     title: {
         description: '차트 타이틀',
         table: {
@@ -255,7 +282,7 @@ export var chartTitleArgTypes = {
         defaultValue: { summary: 12 },
     },
 };
-export var chartLegendArgTypes = {
+exports.chartLegendArgTypes = {
     legend: {
         description: '차트 범례',
         table: {
@@ -341,14 +368,14 @@ export var chartLegendArgTypes = {
         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(' | ') },
+            type: { summary: exports.pointStyleList.join(' | ') },
         },
         control: { type: 'select' },
-        options: pointStyleList,
+        options: exports.pointStyleList,
         defaultValue: { summary: 'false' },
     },
 };
-export var chartDatasetsArgsTypes = {
+exports.chartDatasetsArgsTypes = {
     'datasets[n].data': {
         description: '데이터셋 데이터',
         table: {
@@ -462,7 +489,7 @@ export var chartDatasetsArgsTypes = {
         },
     },
 };
-export var chartDatalabelsArgsTypes = {
+exports.chartDatalabelsArgsTypes = {
     datalabels: {
         table: {
             disable: true,
@@ -488,33 +515,36 @@ export var chartDatalabelsArgsTypes = {
         defaultValue: { summary: 'gray' },
     },
 };
-export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
-export var primaryColorStyle = function () {
+exports.blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
+var primaryColorStyle = function () {
     var color = {};
-    for (var i in ColorStyle) {
+    for (var i in constants_1.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");
+        color[i] = exports.blackText.includes(i)
+            ? "bg-".concat(constants_1.ColorStyle[i], " text-slate-12 dark:bg-").concat(constants_1.DarkColorStyle[darkColor], " dark:text-slateDark-12")
+            : "bg-".concat(constants_1.ColorStyle[i], " text-white dark:bg-").concat(constants_1.DarkColorStyle[darkColor], " dark:text-slateDark-1");
     }
     return color;
 };
-export var bgColorStyle = function () {
+exports.primaryColorStyle = primaryColorStyle;
+var bgColorStyle = function () {
     var color = {};
-    for (var i in ColorStyle) {
+    for (var i in constants_1.ColorStyle) {
         var darkColor = "".concat(i, "Dark");
-        color[i] = "bg-".concat(ColorStyle[i], " dark:bg-").concat(DarkColorStyle[darkColor]);
+        color[i] = "bg-".concat(constants_1.ColorStyle[i], " dark:bg-").concat(constants_1.DarkColorStyle[darkColor]);
     }
     return color;
 };
-export var textColorStyle = function () {
+exports.bgColorStyle = bgColorStyle;
+var textColorStyle = function () {
     var color = {};
-    for (var i in ColorStyle) {
+    for (var i in constants_1.ColorStyle) {
         var darkColor = "".concat(i, "Dark");
-        color[i] = "text-".concat(ColorStyle[i], " dark:text-").concat(DarkColorStyle[darkColor]);
+        color[i] = "text-".concat(constants_1.ColorStyle[i], " dark:text-").concat(constants_1.DarkColorStyle[darkColor]);
     }
     return color;
 };
+exports.textColorStyle = textColorStyle;
 var makeClassName = function (type, isClickable) {
     var className = '';
     className += "".concat(type.light.default, " ").concat(type.dark.default);
@@ -523,7 +553,7 @@ var makeClassName = function (type, isClickable) {
     }
     return className;
 };
-export var appearanceStyle = function (type, color, isClickable) {
+var appearanceStyle = function (type, color, isClickable) {
     if (isClickable === void 0) { isClickable = true; }
     var darkColor = "".concat(color, "Dark");
     var classic = {
@@ -627,7 +657,8 @@ export var appearanceStyle = function (type, color, isClickable) {
             return '';
     }
 };
-export var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {
+exports.appearanceStyle = appearanceStyle;
+var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {
     if (isClickable === void 0) { isClickable = true; }
     if (stateOn === void 0) { stateOn = ''; }
     var darkColor = "".concat(color, "Dark");
@@ -732,11 +763,12 @@ export var toggleAppearanceStyle = function (type, color, isClickable, stateOn)
             return '';
     }
 };
-export var menuItemAppearanceStyle = function (type, color) {
+exports.toggleAppearanceStyle = toggleAppearanceStyle;
+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)
+        appearanceStyle += exports.blackText.includes(color)
             ? "hover:text-slateA-11 dark:hover:text-white"
             : "hover:text-white dark:hover:text-white";
     }
@@ -748,7 +780,8 @@ export var menuItemAppearanceStyle = function (type, color) {
     }
     return appearanceStyle;
 };
-export var switchCheckedApperanceStyle = function (type, color) {
+exports.menuItemAppearanceStyle = menuItemAppearanceStyle;
+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");
@@ -763,7 +796,8 @@ export var switchCheckedApperanceStyle = function (type, color) {
             return '';
     }
 };
-export var checkboxAppearanceStyle = function (type, color, indeterminate) {
+exports.switchCheckedApperanceStyle = switchCheckedApperanceStyle;
+var checkboxAppearanceStyle = function (type, color, indeterminate) {
     var darkColor = "".concat(color, "Dark");
     var surface = {
         light: {
@@ -836,7 +870,8 @@ export var checkboxAppearanceStyle = function (type, color, indeterminate) {
             return makeClassName(surface, true);
     }
 };
-export var selectAppearanceStyle = function (type, color) {
+exports.checkboxAppearanceStyle = checkboxAppearanceStyle;
+var selectAppearanceStyle = function (type, color) {
     var darkColor = "".concat(color, "Dark");
     var surface = {
         light: {
@@ -912,3 +947,4 @@ export var selectAppearanceStyle = function (type, color) {
             return '';
     }
 };
+exports.selectAppearanceStyle = selectAppearanceStyle;

package/dist/cjs/lib/index.js

@@ -1,2 +1,18 @@
-export * from './components';
-export * from './Typography';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./Typography"), exports);

package/dist/cjs/lib/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/lib/utils/useDarkMode.js

@@ -1,35 +1,38 @@
-import { slateA, slateDarkA } from 'lib/color/alpha';
-import { useEffect, useState } from 'react';
-export var useDarkMode = function (isRAxes) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDarkMode = void 0;
+var alpha_1 = require("lib/color/alpha");
+var react_1 = require("react");
+var useDarkMode = function (isRAxes) {
     if (isRAxes === void 0) { isRAxes = false; }
     var lightmode = {};
     var darkmode = {};
     if (isRAxes === true) {
         lightmode = {
-            r: { grid: { color: slateA[8] } },
+            r: { grid: { color: alpha_1.slateA[8] } },
         };
         darkmode = {
-            r: { grid: { color: slateDarkA[8] }, ticks: { backdropColor: 'rgba(0, 0, 0, 0)' } },
+            r: { grid: { color: alpha_1.slateDarkA[8] }, ticks: { backdropColor: 'rgba(0, 0, 0, 0)' } },
         };
     }
     else {
         lightmode = {
-            x: { grid: { color: slateA[8] } },
-            y: { grid: { color: slateA[8] } },
+            x: { grid: { color: alpha_1.slateA[8] } },
+            y: { grid: { color: alpha_1.slateA[8] } },
         };
         darkmode = {
-            x: { grid: { color: slateDarkA[8] } },
-            y: { grid: { color: slateDarkA[8] } },
+            x: { grid: { color: alpha_1.slateDarkA[8] } },
+            y: { grid: { color: alpha_1.slateDarkA[8] } },
         };
     }
-    var _a = useState(checkDarkMode()), isDarkMode = _a[0], setIsDarkMode = _a[1];
-    var _b = useState({
+    var _a = (0, react_1.useState)(checkDarkMode()), isDarkMode = _a[0], setIsDarkMode = _a[1];
+    var _b = (0, react_1.useState)({
         linescale: {},
     }), defaultOptions = _b[0], setDefaultOptions = _b[1];
     function checkDarkMode() {
         return document.body.classList.contains('dark');
     }
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         setIsDarkMode(checkDarkMode());
         setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
         var mutationObserver = new MutationObserver(function (mutations) {
@@ -47,3 +50,4 @@ export var useDarkMode = function (isRAxes) {
     }, []);
     return [isDarkMode, defaultOptions];
 };
+exports.useDarkMode = useDarkMode;

package/dist/cjs/lib/utils/utils.js

@@ -1,10 +1,14 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+var clsx_1 = require("clsx");
+var tailwind_merge_1 = require("tailwind-merge");
 // tailwind를 merge할 때 발생할 수 있는 클래스 충돌 문제 해결
-export function cn() {
+function cn() {
     var inputs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         inputs[_i] = arguments[_i];
     }
-    return twMerge(clsx(inputs));
+    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
 }
+exports.cn = cn;

package/dist/esm/{src/lib/Typography/Header/index.jsx → lib/Typography/Header/index.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from 'lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { textColorStyle, weightVariants } from 'lib/constants';
@@ -48,11 +49,7 @@ export var Header = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, size = _a.size, weight = _a.weight, color = _a.color, headers = _a.headers, align = _a.align, rootProps = __rest(_a, ["className", "children", "size", "weight", "color", "headers", "align"]);
     if (!headers)
         headers = 'h1';
-    return (<Theme>
-      <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
-        {children}
-      </HeadingTheme>
-    </Theme>);
+    return (_jsx(Theme, { children: _jsx(HeadingTheme, __assign({ ref: ref, as: headers, size: size, align: align, className: cn('leading-normal', headerVariants({ weight: weight, color: color }), className) }, rootProps, { children: children })) }));
 });
 Header.displayName = 'Header';
 export default Header;

package/dist/esm/{src/lib/Typography/Text/index.jsx → lib/Typography/Text/index.js}

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { Text as TextTheme, Theme } from '@radix-ui/themes';
 import { textColorStyle, weightVariants } from 'lib/constants';
@@ -37,11 +38,7 @@ var textVariants = cva('', {
 });
 export var Text = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, as = _a.as, align = _a.align, weight = _a.weight, color = _a.color, size = _a.size, props = __rest(_a, ["className", "children", "as", "align", "weight", "color", "size"]);
-    return (<Theme>
-        <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
-          {children}
-        </TextTheme>
-      </Theme>);
+    return (_jsx(Theme, { children: _jsx(TextTheme, __assign({ as: as, ref: ref, size: size, align: align, className: cn(textVariants({ weight: weight, color: color }), className) }, props, { children: children })) }));
 });
 Text.displayName = 'Text';
 export default Text;

package/dist/esm/{src/lib/components/Accordion/index.jsx → lib/components/Accordion/index.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
@@ -36,35 +37,22 @@ var accoridanVariants = cva('', {
 });
 export var Root = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, scaling = _a.scaling, rootProps = __rest(_a, ["className", "children", "scaling"]);
-    return (<AccordionPrimitive.Root className={cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className)} {...rootProps} ref={forwardedRef}>
-      {children}
-    </AccordionPrimitive.Root>);
+    return (_jsx(AccordionPrimitive.Root, __assign({ className: cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className) }, rootProps, { ref: forwardedRef, children: children })));
 });
 Root.displayName = 'Accordion.Root';
 export var Item = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
-    return (<AccordionPrimitive.Item {...rootProps} ref={forwardedRef} className={cn('mt-px w-[278px] overflow-hidden first:mt-0 first:rounded-t last:rounded-b', className)}>
-      {children}
-    </AccordionPrimitive.Item>);
+    return (_jsx(AccordionPrimitive.Item, __assign({}, rootProps, { ref: forwardedRef, className: cn('mt-px w-[278px] overflow-hidden first:mt-0 first:rounded-t last:rounded-b', className), children: children })));
 });
 Item.displayName = 'Accordion.Item';
 export var Trigger = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, _b = _a.color, color = _b === void 0 ? 'red' : _b, rootProps = __rest(_a, ["className", "children", "color"]);
-    return (<AccordionPrimitive.Header {...rootProps} className={cn('flex', className)}>
-      <AccordionPrimitive.Trigger {...rootProps} ref={forwardedRef} className={cn("group flex h-[44px] w-[278px] cursor-default items-center justify-between px-[20px] py-[10px] text-base font-normal", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:text-slateA-8 disabled:dark:bg-slateDarkA-3 disabled:dark:text-slateDarkA-8", className)}>
-        {children}
-        <ChevronDownIcon className="transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180" aria-hidden/>
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>);
+    return (_jsx(AccordionPrimitive.Header, __assign({}, rootProps, { className: cn('flex', className), children: _jsxs(AccordionPrimitive.Trigger, __assign({}, rootProps, { ref: forwardedRef, className: cn("group flex h-[44px] w-[278px] cursor-default items-center justify-between px-[20px] py-[10px] text-base font-normal", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:text-slateA-8 disabled:dark:bg-slateDarkA-3 disabled:dark:text-slateDarkA-8", className), children: [children, _jsx(ChevronDownIcon, { className: "transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180", "aria-hidden": true })] })) })));
 });
 Trigger.displayName = 'Accordion.Trigger';
 export var Content = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
-    return (<AccordionPrimitive.Content {...rootProps} ref={forwardedRef} className={cn('max-h-[800px] w-[278px] overflow-hidden border-t border-t-slateA-4 bg-slateA-2 text-[16px] text-slateA-11 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown dark:border-t-slateDarkA-4 dark:bg-slateDarkA-2 dark:text-slateDarkA-11', className)}>
-      <div className="h-auto max-h-[1000px] overflow-y-auto px-[20px] py-[15px] text-base font-normal">
-        {children}
-      </div>
-    </AccordionPrimitive.Content>);
+    return (_jsx(AccordionPrimitive.Content, __assign({}, rootProps, { ref: forwardedRef, className: cn('max-h-[800px] w-[278px] overflow-hidden border-t border-t-slateA-4 bg-slateA-2 text-[16px] text-slateA-11 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown dark:border-t-slateDarkA-4 dark:bg-slateDarkA-2 dark:text-slateDarkA-11', className), children: _jsx("div", { className: "h-auto max-h-[1000px] overflow-y-auto px-[20px] py-[15px] text-base font-normal", children: children }) })));
 });
 Content.displayName = 'Accordion.Content';
 var Accordion = {

package/dist/esm/{src/lib/components/AlertDialog/AlertDialogAction.jsx → lib/components/AlertDialog/AlertDialogAction.js}

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'lib/utils/utils';
@@ -55,8 +56,6 @@ export var AlertDialogAction = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, weight = _a.weight, props = __rest(_a, ["className", "children", "weight"]);
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
     var buttonClassName = cn(alertDialogActionVariants({ radius: radius, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
-    return (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
-      {children}
-    </AlertDialogPrimitive.Action>);
+    return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
 });
 AlertDialogAction.displayName = 'AlertDialog.Action';

package/dist/esm/{src/lib/components/AlertDialog/AlertDialogCancel.jsx → lib/components/AlertDialog/AlertDialogCancel.js}

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'lib/utils/utils';
@@ -54,8 +55,6 @@ export var AlertDialogCancel = forwardRef(function (_a, ref) {
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, _c = _b.appearance, appearance = _c === void 0 ? 'solid' : _c;
     var disabledButtonStyle = "border-none text-slate-11 bg-slate-3 \n    active:bg-slate-4 active:border-none hover:cursor-pointer hover:bg-slateA-4\n    dark:text-slateDark-11 dark:bg-slateDark-3 dark:hover:bg-slateDarkA-4";
     var buttonClassName = cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), appearanceStyle(appearance, 'slate'), disabledButtonStyle, className);
-    return (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={buttonClassName}>
-      {children}
-    </AlertDialogPrimitive.Cancel>);
+    return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: buttonClassName, children: children })));
 });
 AlertDialogCancel.displayName = 'AlertDialog.Cancel';

package/dist/esm/{src/lib/components/AlertDialog/AlertDialogContent.jsx → lib/components/AlertDialog/AlertDialogContent.js}

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'lib/utils/utils';
@@ -45,11 +46,6 @@ export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[
 export var AlertDialogContent = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, scaling = _b.scaling;
-    return (<AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay className="fixed data-[state=open]:animate-overlayShow inset-0"/>
-      <AlertDialogPrimitive.Content className={cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className)} ref={ref} {...props}>
-        {children}
-      </AlertDialogPrimitive.Content>
-    </AlertDialogPrimitive.Portal>);
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed data-[state=open]:animate-overlayShow inset-0" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
 });
 AlertDialogContent.displayName = 'AlertDialog.Content';

package/dist/esm/{src/lib/components/AlertDialog/AlertDialogDescription.jsx → lib/components/AlertDialog/AlertDialogDescription.js}

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'lib/utils/utils';
@@ -30,8 +42,6 @@ export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDa
 export var AlertDialogDescription = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, contentText = _a.contentText, props = __rest(_a, ["className", "children", "contentText"]);
     var size = useAlertDialogContext().size;
-    return (<AlertDialogPrimitive.Description className={cn(alertDialogDescriptionVariants({ size: size }), className)} ref={ref} {...props}>
-      {contentText !== null && contentText !== void 0 ? contentText : children}
-    </AlertDialogPrimitive.Description>);
+    return (_jsx(AlertDialogPrimitive.Description, __assign({ className: cn(alertDialogDescriptionVariants({ size: size }), className), ref: ref }, props, { children: contentText !== null && contentText !== void 0 ? contentText : children })));
 });
 AlertDialogDescription.displayName = 'AlertDialog.Description';