@lotte-innovate/ui-component-test 0.1.44 → 0.1.46

package/dist/esm/.storybook/main.js

@@ -0,0 +1,22 @@
+var config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-styling-webpack',
+        '@storybook/addon-a11y',
+        'storybook-dark-mode',
+        'storybook-addon-deep-controls',
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    staticDirs: ['../public'],
+};
+export default config;

package/dist/esm/.storybook/manager.js

@@ -0,0 +1,12 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+import logo from '../src/stories/assets/logo.png';
+var lightTheme = create({
+    base: 'light', // 밝은 테마 설정
+    brandImage: logo,
+    brandTitle: '롯데이노베이트',
+    brandUrl: '../src/stories/assets/logo.png', //로고 적용
+});
+addons.setConfig({
+    theme: lightTheme,
+});

package/dist/esm/.storybook/preview.jsx

@@ -0,0 +1,80 @@
+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);
+};
+import React, { useEffect } from 'react';
+import { themes } from '@storybook/theming';
+import { useDarkMode } from 'storybook-dark-mode';
+import '../src/app/globals.css';
+import '../src/app/styles.css';
+import '../src/app/stories.css';
+import 'tailwindcss/tailwind.css';
+var preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+                order: [
+                    'Welcome',
+                    'Typography',
+                    'Component',
+                    'Chart',
+                    'Light Color',
+                    'Dark Color',
+                    'Light Alpha Color',
+                    'Dark Alpha Color',
+                ],
+            },
+        },
+        docs: {
+            theme: themes.light,
+        },
+        darkMode: {
+            dark: __assign(__assign({}, themes.dark), { appBg: '#272a2d', textColor: '#edeef0' }),
+            light: __assign(__assign({}, themes.light), { appBg: 'white', textColor: '#2E3438' }),
+        },
+        backgrounds: { disable: true },
+        deepControls: { enabled: true },
+    },
+};
+export default preview;
+var changeClassOnBody = function (oldClassName, newClassName) {
+    var classList = document.body.classList;
+    if (classList.contains(oldClassName)) {
+        classList.replace(oldClassName, newClassName);
+    }
+};
+var withBackground = function (Story, context) {
+    var isDarkMode = useDarkMode();
+    useEffect(function () {
+        if (isDarkMode) {
+            changeClassOnBody('light', 'dark');
+        }
+        else {
+            changeClassOnBody('dark', 'light');
+        }
+        var docsStoryElements = document.querySelectorAll('.docs-story');
+        docsStoryElements.forEach(function (element) {
+            element.style.backgroundColor = isDarkMode ? '#111113' : 'white';
+        });
+        docsStoryElements = document.querySelectorAll('.sb-show-main');
+        docsStoryElements.forEach(function (element) {
+            element.style.backgroundColor = isDarkMode ? '#111113' : 'white';
+        });
+    }, [isDarkMode]);
+    return <Story {...context}/>;
+};
+export var decorators = [withBackground];

package/dist/esm/src/app/layout.jsx

@@ -0,0 +1,13 @@
+// import { Inter } from 'next/font/google';
+import './globals.css';
+// const inter = Inter({ subsets: ['latin'] });
+export var metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (<html lang="en">
+      <body>{children}</body>
+    </html>);
+}

package/dist/esm/src/app/page.jsx

@@ -0,0 +1,36 @@
+'use client';
+import React, { useState } from 'react';
+import Logo from '../stories/assets/logo.png';
+import Login from '../stories/assets/login.svg';
+import Image from 'next/image';
+export default function Home() {
+    var _a = useState(''), username = _a[0], setUsername = _a[1];
+    var _b = useState(''), password = _b[0], setPassword = _b[1];
+    var _c = useState(false), rememberMe = _c[0], setRememberMe = _c[1];
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    return (<div className="grid grid-cols-2">
+      <div className="App text-black">
+        <div>
+          <Image src={Logo} width={300} height={0} alt="logo"/>
+          <div className="mb-3">
+            <label htmlFor="username">아이디</label>
+            <input type="text" id="username" value={username} onChange={function (e) { return setUsername(e.target.value); }} required/>
+          </div>
+          <div className="mb-3">
+            <label htmlFor="password">비밀번호</label>
+            <input type="password" id="password" value={password} onChange={function (e) { return setPassword(e.target.value); }} required/>
+          </div>
+          <div className="mb-3">
+            <label>
+              <input type="checkbox" checked={rememberMe} onChange={function (e) { return setRememberMe(e.target.checked); }}/>
+              아이디 저장
+            </label>
+          </div>
+          <button type="submit">로그인</button>
+        </div>
+      </div>
+      <div className="flex items-center justify-center">
+        <Image src={Login} width={0} height={0} alt="Login"/>
+      </div>
+    </div>);
+}

package/dist/esm/src/app/template/colorPicker.jsx

@@ -0,0 +1,19 @@
+'use client';
+import { bgColorStyle } from '../../../../lib/constants';
+var ColorPicker = function (_a) {
+    var setColorTheme = _a.setColorTheme;
+    var handleColorClick = function (color) {
+        setColorTheme(color);
+    };
+    return (<div>
+      <div className="flex flex-row flex-wrap gap-2">
+        {Object.entries(bgColorStyle).map(function (_a) {
+            var key = _a[0], value = _a[1];
+            return (<button className={"w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black")} key={key}>
+            {key.replace('Dark', '')}
+          </button>);
+        })}
+      </div>
+    </div>);
+};
+export default ColorPicker;

package/dist/esm/src/app/template/theme.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ColorPicker from './colorPicker';
+var Theme = function (_a) {
+    var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
+    var setColor = function (color) {
+        setColorTheme(color);
+        setFontColorTheme(color);
+    };
+    return (<div className="flex flex-col p-3">
+      <p className="text-2xl font-bold">Themes</p>
+      <div className="flex flex-col text-xl gap-2">
+        Accent Color
+        <ColorPicker mode={mode} setColorTheme={setColor}/>
+      </div>
+    </div>);
+};
+export default Theme;

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

@@ -20,10 +20,9 @@ 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 { cn } from '../../../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
-import { textColorStyle, weightVariants } from '../../../lib/constants';
+import { textColorStyle, weightVariants } from '../../../../../lib/constants';
 import { Heading as HeadingTheme, Theme } from '@radix-ui/themes';
 import React from 'react';
 var weights = __assign({}, weightVariants);
@@ -49,7 +48,11 @@ 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 (_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 })) }));
+    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>);
 });
 Header.displayName = 'Header';
 export default Header;

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

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

package/dist/{lib → esm/src/lib}/color/constants.js

@@ -1,6 +1,7 @@
 import { blue, crimson, teal, orange, purple, amber, slate, cyan, red, grass, brown, indigo, plum, yellow, sky, lime, } from './light';
 import { blueA, crimsonA, tealA, orangeA, purpleA, amberA, slateA, cyanA, redA, grassA, brownA, indigoA, plumA, yellowA, skyA, limeA, } from './alpha';
 export var colorOptions = [
+    // 'black',
     'slate',
     'olive',
     'sand',
@@ -29,6 +30,7 @@ export var colorOptions = [
     'yellow',
     'amber',
     'orange',
+    // 'white',
 ];
 export var alphaColorOptions = [
     'slateA',

package/dist/{lib → esm/src/lib}/color/light.js

@@ -1,3 +1,4 @@
+// 기본 그레이 색상
 export var slate = {
     1: '#fcfcfd',
     2: '#f9f9fb',

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

@@ -20,13 +20,12 @@ 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';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from '../../../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
-import { scalingVariants } from '../../../lib/constants';
+import { scalingVariants } from '../../../../../lib/constants';
 var accoridanVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -37,22 +36,35 @@ 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 (_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 })));
+    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>);
 });
 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 (_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 })));
+    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>);
 });
 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 (_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 })] })) })));
+    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>);
 });
 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 (_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 }) })));
+    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>);
 });
 Content.displayName = 'Accordion.Content';
 var Accordion = {

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

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { appearanceStyle, primaryColorStyle, weightVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { appearanceStyle, primaryColorStyle, weightVariants } from '../../../../../lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal w-fit", {
     variants: {
@@ -56,6 +55,8 @@ 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 (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
+    return (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
+      {children}
+    </AlertDialogPrimitive.Action>);
 });
 AlertDialogAction.displayName = 'AlertDialog.Action';

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

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { appearanceStyle, weightVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { appearanceStyle, weightVariants } from '../../../../../lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogCancelVariants = cva("inline-flex justify-center items-center outline-none w-fit", {
     variants: {
@@ -55,6 +54,8 @@ 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 (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: buttonClassName, children: children })));
+    return (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={buttonClassName}>
+      {children}
+    </AlertDialogPrimitive.Cancel>);
 });
 AlertDialogCancel.displayName = 'AlertDialog.Cancel';

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

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { radiusVariants, scalingVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { radiusVariants, scalingVariants } from '../../../../../lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[50%] focus:outline-none\n  translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-contentShow bg-white dark:bg-slateDark-1 \n  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]", {
     variants: {
@@ -46,6 +45,11 @@ 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 (_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 }))] }));
+    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>);
 });
 AlertDialogContent.displayName = 'AlertDialog.Content';

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

@@ -1,14 +1,3 @@
-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)
@@ -20,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from '../../../../../lib/utils/utils';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDark-12 font-normal", {
     variants: {
@@ -42,6 +30,8 @@ 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 (_jsx(AlertDialogPrimitive.Description, __assign({ className: cn(alertDialogDescriptionVariants({ size: size }), className), ref: ref }, props, { children: contentText !== null && contentText !== void 0 ? contentText : children })));
+    return (<AlertDialogPrimitive.Description className={cn(alertDialogDescriptionVariants({ size: size }), className)} ref={ref} {...props}>
+      {contentText !== null && contentText !== void 0 ? contentText : children}
+    </AlertDialogPrimitive.Description>);
 });
 AlertDialogDescription.displayName = 'AlertDialog.Description';

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

@@ -1,14 +1,3 @@
-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)
@@ -20,8 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, createContext, useContext, useMemo, } from 'react';
+import React, { forwardRef, createContext, useContext, useMemo, } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 var AlertDialogContext = createContext({
     size: 'medium',
@@ -41,6 +29,10 @@ export var AlertDialogRoot = forwardRef(function (_a, ref) {
         scaling: scaling,
         color: color,
     }); }, [radius, size, scaling, color]);
-    return (_jsx(AlertDialogContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, children: _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children })) }) }));
+    return (<AlertDialogContext.Provider value={contextValue}>
+      <div ref={ref}>
+        <AlertDialogPrimitive.Root {...props}>{children}</AlertDialogPrimitive.Root>
+      </div>
+    </AlertDialogContext.Provider>);
 });
 AlertDialogRoot.displayName = 'AlertDialog.Root';

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

@@ -1,14 +1,3 @@
-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)
@@ -20,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from '../../../../../lib/utils/utils';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark-12 font-bold", {
     variants: {
@@ -42,6 +30,8 @@ export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark
 export var AlertDialogTitle = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, titleText = _a.titleText, props = __rest(_a, ["className", "children", "titleText"]);
     var size = useAlertDialogContext().size;
-    return (_jsx(AlertDialogPrimitive.Title, __assign({ className: cn(alertDialogTitleVariants({ size: size }), className), ref: ref }, props, { children: titleText !== null && titleText !== void 0 ? titleText : children })));
+    return (<AlertDialogPrimitive.Title className={cn(alertDialogTitleVariants({ size: size }), className)} ref={ref} {...props}>
+      {titleText !== null && titleText !== void 0 ? titleText : children}
+    </AlertDialogPrimitive.Title>);
 });
 AlertDialogTitle.displayName = 'AlertDialog.Title';

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

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { radiusVariants, scalingVariants, weightVariants, primaryColorStyle, appearanceStyle, } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { radiusVariants, scalingVariants, weightVariants, primaryColorStyle, appearanceStyle, } from '../../../../../lib/constants';
 var buttonVariants = cva("inline-flex items-center transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8", {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -50,6 +49,8 @@ var buttonVariants = cva("inline-flex items-center transition-colors focus:outli
 export var AlertDialogTrigger = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, weight = _a.weight, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "weight", "color", "appearance"]);
     var buttonClassName = cn(buttonVariants({ radius: radius, scaling: scaling, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
-    return (_jsx(AlertDialogPrimitive.Trigger, __assign({ asChild: true, ref: ref, className: buttonClassName }, props, { children: children })));
+    return (<AlertDialogPrimitive.Trigger asChild ref={ref} className={buttonClassName} {...props}>
+        {children}
+      </AlertDialogPrimitive.Trigger>);
 });
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';

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

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { scalingVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { scalingVariants } from '../../../../../lib/constants';
 export var aspectRatioVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -36,7 +35,9 @@ export var aspectRatioVariants = cva('', {
 });
 var AspectRatio = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.ratio, ratio = _b === void 0 ? 16 / 9 : _b, scaling = _a.scaling, props = __rest(_a, ["children", "className", "ratio", "scaling"]);
-    return (_jsx(AspectRatioPrimitive.Root, __assign({ ratio: ratio, ref: ref }, props, { className: cn(aspectRatioVariants({ scaling: scaling }), className), children: children })));
+    return (<AspectRatioPrimitive.Root ratio={ratio} ref={ref} {...props} className={cn(aspectRatioVariants({ scaling: scaling }), className)}>
+      {children}
+    </AspectRatioPrimitive.Root>);
 });
 AspectRatio.displayName = 'AspectRatio';
 export default AspectRatio;