@lotte-innovate/ui-component-test 0.0.10 → 0.0.11

package/dist/app/template/colorPicker.jsx

@@ -0,0 +1,19 @@
+'use client';
+import { bgColorStyle } from '../../constants';
+var ColorPicker = function (_a) {
+    var setColorTheme = _a.setColorTheme, mode = _a.mode;
+    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/app/template/textTemplate.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITheme, IScaling, IWeight, IColor } from 'types';
 import 'react-tabs/style/react-tabs.css';
 type ITextTemplate = {
@@ -6,5 +7,5 @@ type ITextTemplate = {
     colorTheme: IColor;
     mode: ITheme;
 };
-declare const TextTemplate: ({ scalingTheme, fontWeightTheme, colorTheme, mode }: ITextTemplate) => import("react/jsx-runtime").JSX.Element;
+declare const TextTemplate: ({ scalingTheme, fontWeightTheme, colorTheme, mode }: ITextTemplate) => React.JSX.Element;
 export default TextTemplate;

package/dist/app/template/textTemplate.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { scalingOptions, weightOptions } from '../../constants';
+import { Text } from '../../Typography/Text';
+import { colorOptions } from 'color/constants';
+var TextTemplate = function (_a) {
+    var scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Text</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+              <Tab>All weights</Tab>
+            </TabList>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                      <td>{color}</td>
+                      <td>
+                        <Text 
+        // scaling={scalingTheme}
+        weight={fontWeightTheme} color={color}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {scalingOptions === null || scalingOptions === void 0 ? void 0 : scalingOptions.map(function (scale) { return (<tr key={scale}>
+                      <td>{scale}</td>
+                      <td>
+                        <Text 
+        // scaling={scale}
+        weight={fontWeightTheme} color={colorTheme}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {weightOptions === null || weightOptions === void 0 ? void 0 : weightOptions.map(function (weight) { return (<tr key={weight}>
+                      <td>{weight}</td>
+                      <td>
+                        <Text 
+        // scaling={scalingTheme}
+        weight={weight} color={colorTheme}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default TextTemplate;

package/dist/app/template/theme.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { IColor, IRadius, IScaling, IWeight } from 'types';
 type ITheme = {
     setRadiusTheme: Dispatch<SetStateAction<IRadius>>;
@@ -8,5 +8,5 @@ type ITheme = {
     setFontColorTheme: Dispatch<SetStateAction<IColor>>;
     mode: string;
 };
-declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => import("react/jsx-runtime").JSX.Element;
+declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => React.JSX.Element;
 export default Theme;

package/dist/app/template/theme.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import ColorPicker from './colorPicker';
+import { radiusOptions, scalingOptions, weightOptions } from '../../constants';
+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 className="flex gap-4">
+        <div className="flex gap-2">
+          <p>Radius</p>
+          <select className="border border-gray-900" onChange={function (e) { return setRadiusTheme(e.target.value); }} defaultValue={'full'}>
+            {radiusOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <p>Scaling</p>
+          <select className="border border-gray-900" onChange={function (e) { return setScalingTheme(e.target.value); }}>
+            {scalingOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <p>Font Weight</p>
+          <select className="border border-gray-900" onChange={function (e) { return setFontWeightTheme(e.target.value); }} defaultValue={'semibold'}>
+            {weightOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+      </div>
+    </div>);
+};
+export default Theme;

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

@@ -20,7 +20,6 @@ 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';
@@ -37,22 +36,35 @@ var accoridanVariants = cva('', {
 });
 export var Accordion = 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>);
 });
 Accordion.displayName = 'AccordionRoot';
 export var AccordionItem = 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('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className), children: children })));
+    return (<AccordionPrimitive.Item {...rootProps} ref={forwardedRef} className={cn('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className)}>
+      {children}
+    </AccordionPrimitive.Item>);
 });
 AccordionItem.displayName = 'AccordionItem';
 export var AccordionTrigger = 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(" w-[278px] group flex h-[44px] cursor-default items-center justify-between py-[10px] px-[20px] 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:dark:bg-slateDarkA-3 disabled:text-slateA-3 disabled:dark:text-slateDarkA-8", className), children: [children, _jsx(ChevronDownIcon, { className: "ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180", "aria-hidden": true })] })) })));
+    return (<AccordionPrimitive.Header {...rootProps} className={cn('flex', className)}>
+      <AccordionPrimitive.Trigger {...rootProps} ref={forwardedRef} className={cn(" w-[278px] group flex h-[44px] cursor-default items-center justify-between py-[10px] px-[20px] 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:dark:bg-slateDarkA-3 disabled:text-slateA-3 disabled:dark:text-slateDarkA-8", className)}>
+        {children}
+        <ChevronDownIcon className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180" aria-hidden/>
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>);
 });
 AccordionTrigger.displayName = 'AccordionTrigger';
 export var AccordionContent = 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('w-[278px] max-h-[800px] bg-slateA-2 dark:bg-slateDarkA-2 border-t border-t-slateA-4 dark:border-t-slateDarkA-4 text-slateA-11 dark:text-slateDarkA-11 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[16px]', className), children: _jsx("div", { className: "px-[20px] py-[15px] text-base font-normal h-auto max-h-[1000px] overflow-y-auto", children: children }) })));
+    return (<AccordionPrimitive.Content {...rootProps} ref={forwardedRef} className={cn('w-[278px] max-h-[800px] bg-slateA-2 dark:bg-slateDarkA-2 border-t border-t-slateA-4 dark:border-t-slateDarkA-4 text-slateA-11 dark:text-slateDarkA-11 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[16px]', className)}>
+      <div className="px-[20px] py-[15px] text-base font-normal h-auto max-h-[1000px] overflow-y-auto">
+        {children}
+      </div>
+    </AccordionPrimitive.Content>);
 });
 AccordionContent.displayName = 'AccordionContent';
 export default Accordion;

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

@@ -20,11 +20,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 'utils/utils';
+import { cn } from '../../utils/utils';
 import { appearanceStyle, primaryColorStyle, weightVariants } from '../../constants';
 export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal", {
     variants: {
@@ -54,6 +53,8 @@ export var alertDialogActionVariants = cva("inline-flex items-center justify-cen
 export var AlertDialogAction = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "weight", "size", "color", "appearance"]);
     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 = 'AlertDialogAction';

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

@@ -20,11 +20,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 'utils/utils';
+import { cn } from '../../utils/utils';
 import { weightVariants } from '../../constants';
 export var alertDialogCancelVariants = cva("inline-flex justify-center items-center text-slate-11 bg-slate-3 outline-none border-none\n    dark:text-slateDark-11 dark:bg-slateDark-3 dark:hover:bg-slateDarkA-4\n    active:border-none hover:cursor-pointer hover:bg-slateA-4", {
     variants: {
@@ -51,6 +50,8 @@ export var alertDialogCancelVariants = cva("inline-flex justify-center items-cen
 });
 export var AlertDialogCancel = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, size = _a.size, weight = _a.weight, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, props = __rest(_a, ["className", "children", "radius", "size", "weight", "appearance"]);
-    return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className), children: children })));
+    return (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className)}>
+      {children}
+    </AlertDialogPrimitive.Cancel>);
 });
 AlertDialogCancel.displayName = 'AlertDialogCancel';

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

@@ -20,11 +20,10 @@ 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 'utils/utils';
+import { cn } from '../../utils/utils';
 import { radiusVariants, scalingVariants } from '../../constants';
 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: {
@@ -44,6 +43,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, radius = _a.radius, size = _a.size, scaling = _a.scaling, props = __rest(_a, ["className", "children", "radius", "size", "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 = 'AlertDialogContent';

package/dist/components/AlertDialog/{AlertDialogDescription.js → 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 'utils/utils';
+import { cn } from '../../utils/utils';
 export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDark-12 font-normal", {
     variants: {
         size: {
@@ -40,6 +28,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, size = _a.size, contentText = _a.contentText, props = __rest(_a, ["className", "children", "size", "contentText"]);
-    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 = 'AlertDialogDescription';

package/dist/components/AlertDialog/{AlertDialogTitle.js → 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 'utils/utils';
+import { cn } from '../../utils/utils';
 export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark-12 font-bold", {
     variants: {
         size: {
@@ -40,6 +28,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, size = _a.size, titleText = _a.titleText, props = __rest(_a, ["className", "children", "size", "titleText"]);
-    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 = 'AlertDialogTitle';

package/dist/components/AlertDialog/{AlertDialogTrigger.js → 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 { radiusVariants, scalingVariants, weightVariants, primaryColorStyle, appearanceStyle, } from '../../constants';
-import { cn } from 'utils/utils';
+import { cn } from '../../utils/utils';
 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 = 'AlertDialogTrigger';

package/dist/components/AlertDialog/{index.js → index.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 } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 export * from './AlertDialogTrigger';
 export * from './AlertDialogContent';
@@ -31,7 +19,7 @@ export * from './AlertDialogCancel';
 export * from './AlertDialogAction';
 export var AlertDialog = forwardRef(function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children }));
+    return <AlertDialogPrimitive.Root {...props}>{children}</AlertDialogPrimitive.Root>;
 });
 AlertDialog.displayName = 'AlertDialog';
 export default AlertDialog;

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

@@ -20,11 +20,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 AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { cva } from 'class-variance-authority';
-import { cn } from 'utils/utils';
+import { cn } from '../../utils/utils';
 import { scalingVariants } from '../../constants';
 export var aspectRatioVariants = cva('', {
     variants: {
@@ -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;

package/dist/components/Avatar/{index.js → index.jsx}

@@ -20,11 +20,10 @@ 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 AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva } from 'class-variance-authority';
-import { cn } from 'utils/utils';
+import { cn } from '../../utils/utils';
 import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants, } from '../../constants';
 var AvatarVariants = cva('font-medium', {
     variants: {
@@ -51,7 +50,12 @@ var AvatarVariants = cva('font-medium', {
 });
 var Avatar = forwardRef(function (_a, ref) {
     var className = _a.className, fallbackClassName = _a.fallbackClassName, radius = _a.radius, scaling = _a.scaling, size = _a.size, fallbackText = _a.fallbackText, imagePath = _a.imagePath, alt = _a.alt, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color"]);
-    return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className) }, props, { ref: ref, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full object-cover border-none", src: imagePath, alt: alt }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: 300, children: fallbackText })] })));
+    return (<AvatarPrimitive.Root className={cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className)} {...props} ref={ref}>
+        <AvatarPrimitive.Image className="h-full w-full object-cover border-none" src={imagePath} alt={alt}/>
+        <AvatarPrimitive.Fallback className={cn("leading-1 flex h-full w-full items-center justify-center", className)} delayMs={300}>
+          {fallbackText}
+        </AvatarPrimitive.Fallback>
+      </AvatarPrimitive.Root>);
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/dist/components/Badge/{index.js → index.jsx}

@@ -20,8 +20,7 @@ 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 { cn } from 'utils/utils';
 import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants, weightVariants, } from '../../constants';
@@ -48,7 +47,9 @@ var BadgeVariants = cva('inline-flex items-center transition-colors focus:outlin
 var Badge = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, scaling = _a.scaling, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "scaling", "weight", "size", "color", "appearance"]);
     var badgeClassName = cn(BadgeVariants({ radius: radius, scaling: scaling, weight: weight, size: size, color: color }), appearanceStyle(appearance, color, false), className);
-    return (_jsx("div", __assign({ ref: ref, className: badgeClassName }, props, { children: children })));
+    return (<div ref={ref} className={badgeClassName} {...props}>
+        {children}
+      </div>);
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/components/BubbleChart/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PointStyle } from 'types';
 import { VariantProps } from 'class-variance-authority';
 export interface BubbleChartProps extends VariantProps<typeof bubbleChartVariants> {
@@ -25,7 +26,7 @@ declare const bubbleChartVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const BubbleChart: {
-    ({ className, datasets, scaling, width, height, ...props }: BubbleChartProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, datasets, scaling, width, height, ...props }: BubbleChartProps): React.JSX.Element;
     displayName: string;
 };
 export default BubbleChart;

package/dist/components/BubbleChart/{index.js → index.jsx}

@@ -20,12 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Bubble } from 'react-chartjs-2';
 import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from 'chart.js/auto';
 import { scalingVariants } from '../../constants';
 import { cva } from 'class-variance-authority';
-import { cn } from 'utils/utils';
+import { cn } from '../../utils/utils';
 ChartJS.register(LinearScale, PointElement, Tooltip, Legend);
 var bubbleChartVariants = cva('', {
     variants: {
@@ -37,7 +37,7 @@ var bubbleChartVariants = cva('', {
 });
 export var BubbleChart = function (_a) {
     var className = _a.className, datasets = _a.datasets, scaling = _a.scaling, width = _a.width, height = _a.height, props = __rest(_a, ["className", "datasets", "scaling", "width", "height"]);
-    return (_jsx(Bubble, __assign({ data: { datasets: datasets }, className: cn(bubbleChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
+    return (<Bubble data={{ datasets: datasets }} className={cn(bubbleChartVariants({ scaling: scaling }), className)} width={width} height={height} {...props}/>);
 };
 BubbleChart.displayName = 'BubbleChart';
 export default BubbleChart;

package/dist/components/Button/{index.js → 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 { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
-import { cn } from 'utils/utils';
+import { cn } from '../../utils/utils';
 import { radiusVariants, weightVariants, primaryColorStyle, appearanceStyle, scalingVariants, } from '../../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 justify-center", {
     variants: {
@@ -50,7 +49,9 @@ var buttonVariants = cva("inline-flex items-center transition-colors focus:outli
 export var Button = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, 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, ["className", "children", "radius", "scaling", "size", "weight", "color", "appearance"]);
     var buttonClassName = cn(buttonVariants({ radius: radius, scaling: scaling, size: size, weight: weight, color: color }), appearanceStyle(appearance, color, true), className);
-    return (_jsx("button", __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
+    return (<button ref={ref} className={buttonClassName} {...props}>
+        {children}
+      </button>);
 });
 Button.displayName = 'Button';
 export default Button;

package/dist/components/Callout/{CalloutIcon.js → CalloutIcon.jsx}

@@ -20,11 +20,10 @@ 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 { Callout as CalloutTheme } from '@radix-ui/themes';
 import { cva } from 'class-variance-authority';
-import { cn } from 'utils/utils';
+import { cn } from '../../utils/utils';
 import { ExclamationTriangleIcon, InfoCircledIcon, LockClosedIcon, CheckCircledIcon, } from '@radix-ui/react-icons';
 import { scalingVariants } from '../../constants';
 import { useCalloutContext } from '.';
@@ -52,6 +51,12 @@ var calloutIconVariants = cva('flex items-center text-slate-12 dark:text-slateDa
 export var CalloutIcon = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, iconType = _a.iconType, props = __rest(_a, ["children", "className", "iconType"]);
     var _b = useCalloutContext(), scaling = _b.scaling, size = _b.size, color = _b.color;
-    return (_jsxs(CalloutTheme.Icon, __assign({ ref: ref, className: cn(calloutIconVariants({ color: color, size: size, scaling: scaling }), className) }, props, { children: [iconType === 'danger' && _jsx(ExclamationTriangleIcon, {}), iconType === 'warning' && _jsx(LockClosedIcon, {}), iconType === 'success' && _jsx(CheckCircledIcon, {}), iconType === 'information' && _jsx(InfoCircledIcon, {}), children] })));
+    return (<CalloutTheme.Icon ref={ref} className={cn(calloutIconVariants({ color: color, size: size, scaling: scaling }), className)} {...props}>
+      {iconType === 'danger' && <ExclamationTriangleIcon />}
+      {iconType === 'warning' && <LockClosedIcon />}
+      {iconType === 'success' && <CheckCircledIcon />}
+      {iconType === 'information' && <InfoCircledIcon />}
+      {children}
+    </CalloutTheme.Icon>);
 });
 CalloutIcon.displayName = 'CalloutIcon';