@lotte-innovate/ui-component-test 0.0.6 → 0.0.8

package/dist/app/template/buttonTemplate.jsx

@@ -6,77 +6,77 @@ import Button from 'components/Button';
 import { colorOptions } from 'color/constants';
 var ButtonTemplate = function (_a) {
     var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
-    return (<div className="m-3">
-      <div className=" font-extrabold">Button</div>
-      <div className="">
-        <div className="border p-2 space-x-2">
-          <Tabs className="">
-            <TabList>
-              <Tab>Theme colors</Tab>
-              <Tab>All colors</Tab>
-              <Tab>All sizes</Tab>
-            </TabList>
-            <TabPanel>
-              <p className="">Main Color 적용 Button</p>
-              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
-                Button
-              </Button>
-              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
-                outline
-              </Button>
-            </TabPanel>
-            <TabPanel>
-              <table>
-                <tr>
-                  <th></th>
-                  <th>default</th>
-                  <th>outline</th>
-                </tr>
-                {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
-                    <th>{color}</th>
-                    <td>
-                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
-                        Button
-                      </Button>
-                    </td>
-                    <td>
-                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
-                        outline
-                      </Button>
-                    </td>
-                  </tr>); })}
-              </table>
-            </TabPanel>
-            <TabPanel>
-              <table>
-                <tr>
-                  <th></th>
-                  {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
-                </tr>
-                {scalingOptions.map(function (scale) { return (<tr key={scale}>
-                    <th>{scale}</th>
-                    {radiusOptions.map(function (radius) { return (<td key={radius}>
-                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
-                          Button
-                        </Button>
-                      </td>); })}
-                  </tr>); })}
-              </table>
-
-              <table>
-                {scalingOptions.map(function (scale) { return (<tr key={scale}>
-                    <th>{scale}</th>
-                    {radiusOptions.map(function (radius) { return (<td key={radius}>
-                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
-                          outline
-                        </Button>
-                      </td>); })}
-                  </tr>); })}
-              </table>
-            </TabPanel>
-          </Tabs>
-        </div>
-      </div>
+    return (<div className="m-3">
+      <div className=" font-extrabold">Button</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>Theme colors</Tab>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+            </TabList>
+            <TabPanel>
+              <p className="">Main Color 적용 Button</p>
+              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
+                Button
+              </Button>
+              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
+                outline
+              </Button>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  <th>default</th>
+                  <th>outline</th>
+                </tr>
+                {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                    <th>{color}</th>
+                    <td>
+                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
+                        Button
+                      </Button>
+                    </td>
+                    <td>
+                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
+                        outline
+                      </Button>
+                    </td>
+                  </tr>); })}
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
+                </tr>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
+                          Button
+                        </Button>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+
+              <table>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
+                          outline
+                        </Button>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
     </div>);
 };
 export default ButtonTemplate;

package/dist/app/template/colorPicker.jsx

@@ -5,15 +5,15 @@ var ColorPicker = function (_a) {
     var handleColorClick = function (color) {
         setColorTheme(color);
     };
-    return (<div>
-      <div className="flex flex-row flex-wrap gap-2">
+    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', '')}
+            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>
     </div>);
 };
 export default ColorPicker;

package/dist/app/template/textTemplate.jsx

@@ -6,67 +6,67 @@ 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>
+    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>
+        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>
+        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>
+        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.jsx

@@ -7,38 +7,38 @@ var Theme = function (_a) {
         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>
+    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.jsx

@@ -36,34 +36,34 @@ 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 (<AccordionPrimitive.Root className={cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className)} {...rootProps} ref={forwardedRef}>
-      {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 (<AccordionPrimitive.Item {...rootProps} ref={forwardedRef} className={cn('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className)}>
-      {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 (<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>
+    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 (<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>
+    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';

package/dist/components/AlertDialog/AlertDialogAction.jsx

@@ -53,8 +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 (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
-        {children}
+    return (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
+        {children}
       </AlertDialogPrimitive.Action>);
 });
 AlertDialogAction.displayName = 'AlertDialogAction';

package/dist/components/AlertDialog/AlertDialogCancel.jsx

@@ -50,8 +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 (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className)}>
-      {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.jsx

@@ -43,11 +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 (<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>
+    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.jsx

@@ -28,8 +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 (<AlertDialogPrimitive.Description className={cn(alertDialogDescriptionVariants({ size: size }), className)} ref={ref} {...props}>
-      {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.jsx

@@ -28,8 +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 (<AlertDialogPrimitive.Title className={cn(alertDialogTitleVariants({ size: size }), className)} ref={ref} {...props}>
-      {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.jsx

@@ -49,8 +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 (<AlertDialogPrimitive.Trigger asChild ref={ref} className={buttonClassName} {...props}>
-        {children}
+    return (<AlertDialogPrimitive.Trigger asChild ref={ref} className={buttonClassName} {...props}>
+        {children}
       </AlertDialogPrimitive.Trigger>);
 });
 AlertDialogTrigger.displayName = 'AlertDialogTrigger';

package/dist/components/AspectRatio/index.jsx

@@ -35,8 +35,8 @@ 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 (<AspectRatioPrimitive.Root ratio={ratio} ref={ref} {...props} className={cn(aspectRatioVariants({ scaling: scaling }), className)}>
-      {children}
+    return (<AspectRatioPrimitive.Root ratio={ratio} ref={ref} {...props} className={cn(aspectRatioVariants({ scaling: scaling }), className)}>
+      {children}
     </AspectRatioPrimitive.Root>);
 });
 AspectRatio.displayName = 'AspectRatio';

package/dist/components/Avatar/index.jsx

@@ -50,11 +50,11 @@ 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 (<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>
+    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';

package/dist/components/Badge/index.jsx

@@ -47,8 +47,8 @@ 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 (<div ref={ref} className={badgeClassName} {...props}>
-        {children}
+    return (<div ref={ref} className={badgeClassName} {...props}>
+        {children}
       </div>);
 });
 Badge.displayName = 'Badge';

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

@@ -23,7 +23,7 @@ export interface BubbleChartProps extends VariantProps<typeof bubbleChartVariant
     height?: string | number;
 }
 declare const bubbleChartVariants: (props?: ({
-    scaling?: "100%" | "90%" | "95%" | "105%" | "110%" | null | undefined;
+    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): React.JSX.Element;

package/dist/components/Button/index.jsx

@@ -49,8 +49,8 @@ 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 (<button ref={ref} className={buttonClassName} {...props}>
-        {children}
+    return (<button ref={ref} className={buttonClassName} {...props}>
+        {children}
       </button>);
 });
 Button.displayName = 'Button';

package/dist/components/Callout/CalloutIcon.jsx

@@ -51,12 +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 (<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}
+    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';

package/dist/components/Callout/CalloutText.jsx

@@ -35,8 +35,8 @@ export var calloutTextVariants = cva('break-words font-normal text-slate-12 dark
 export var CalloutText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, contentText = _a.contentText, props = __rest(_a, ["children", "className", "contentText"]);
     var _b = useCalloutContext(), size = _b.size, color = _b.color;
-    return (<p ref={ref} className={cn(calloutTextVariants({ size: size, color: color }), className)} {...props}>
-      {contentText !== null && contentText !== void 0 ? contentText : children}
+    return (<p ref={ref} className={cn(calloutTextVariants({ size: size, color: color }), className)} {...props}>
+      {contentText !== null && contentText !== void 0 ? contentText : children}
     </p>);
 });
 CalloutText.displayName = 'CalloutText';

package/dist/components/Callout/index.jsx

@@ -68,10 +68,10 @@ export var Callout = forwardRef(function (_a, ref) {
     };
     var calloutClassName = cn(calloutVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, colorMap[color], false), className);
     var contextValue = { size: size, scaling: scaling, color: color };
-    return (<CalloutContext.Provider value={contextValue}>
-        <CalloutTheme.Root ref={ref} {...props} className={calloutClassName}>
-          {children}
-        </CalloutTheme.Root>
+    return (<CalloutContext.Provider value={contextValue}>
+        <CalloutTheme.Root ref={ref} {...props} className={calloutClassName}>
+          {children}
+        </CalloutTheme.Root>
       </CalloutContext.Provider>);
 });
 Callout.displayName = 'Callout';