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

package/dist/stories/segmented-control/SegmentedControl.stories.d.ts

@@ -85,13 +85,13 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Variant: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/segmented-control/{SegmentedControl.stories.jsx → SegmentedControl.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SegmentedControl, SegmentedControlItem } from '../../components/SegmentedControl';
 import { commonArgTypes, radiusOptions, sizeOptions } from '../../constants';
 var meta = {
@@ -63,39 +64,17 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<SegmentedControl {...args} defaultValue={'inbox'}>
-      <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-      <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-      <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-    </SegmentedControl>);
+    return (_jsxs(SegmentedControl, __assign({}, args, { defaultValue: 'inbox', children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] })));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {['small', 'medium', 'large'].map(function (size) { return (<SegmentedControl key={size} defaultValue={'inbox'} {...args} size={size}>
-        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-      </SegmentedControl>); })}
-  </div>);
+    return (_jsx("div", { className: "flex flex-col space-y-3", children: ['small', 'medium', 'large'].map(function (size) { return (_jsxs(SegmentedControl, __assign({ defaultValue: 'inbox' }, args, { size: size, children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] }), size)); }) }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<SegmentedControl key={radius} defaultValue={'inbox'} {...args} radius={radius}>
-        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-      </SegmentedControl>); })}
-  </div>);
+    return (_jsx("div", { className: "flex flex-col space-y-3", children: radiusOptions.map(function (radius) { return (_jsxs(SegmentedControl, __assign({ defaultValue: 'inbox' }, args, { radius: radius, children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] }), radius)); }) }));
 };
 export var Variant = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {['surface', 'classic'].map(function (appearance) { return (<SegmentedControl key={appearance} defaultValue={'inbox'} {...args} appearance={appearance}>
-        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-      </SegmentedControl>); })}
-  </div>);
+    return (_jsx("div", { className: "flex flex-col space-y-3", children: ['surface', 'classic'].map(function (appearance) { return (_jsxs(SegmentedControl, __assign({ defaultValue: 'inbox' }, args, { appearance: appearance, children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] }), appearance)); }) }));
 };

package/dist/stories/select/Select.stories.d.ts

@@ -101,16 +101,16 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Appearance: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const WithIcon: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/select/{Select.stories.jsx → Select.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select, SelectContent, SelectItem, SelectTrigger } from '../../components/Select/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
@@ -67,83 +68,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Select {...args}>
-    <SelectTrigger {...args} placeholder="Select..."/>
-    <SelectContent {...args}>
-      <SelectItem value="apple" {...args}>
-        Apple
-      </SelectItem>
-      <SelectItem value="orange" {...args}>
-        Orange
-      </SelectItem>
-    </SelectContent>
-  </Select>);
+    return (_jsxs(Select, __assign({}, args, { children: [_jsx(SelectTrigger, __assign({}, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] })));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {['small', 'medium', 'large'].map(function (size) { return (<Select key={size} size={size} {...args}>
-        <SelectTrigger {...args} placeholder="Select..."/>
-        <SelectContent {...args}>
-          <SelectItem value="apple" {...args}>
-            Apple
-          </SelectItem>
-          <SelectItem value="orange" {...args}>
-            Orange
-          </SelectItem>
-        </SelectContent>
-      </Select>); })}
-  </div>);
+    return (_jsx("div", { className: "flex gap-3", children: ['small', 'medium', 'large'].map(function (size) { return (_jsxs(Select, __assign({ size: size }, args, { children: [_jsx(SelectTrigger, __assign({}, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] }), size)); }) }));
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {['classic', 'surface', 'soft', 'ghost'].map(function (appearance) { return (<Select key={appearance} {...args}>
-        <SelectTrigger appearance={appearance} {...args} placeholder="Select..."/>
-        <SelectContent {...args}>
-          <SelectItem value="apple" {...args}>
-            Apple
-          </SelectItem>
-          <SelectItem value="orange" {...args}>
-            Orange
-          </SelectItem>
-        </SelectContent>
-      </Select>); })}
-  </div>);
+    return (_jsx("div", { className: "flex gap-3", children: ['classic', 'surface', 'soft', 'ghost'].map(function (appearance) { return (_jsxs(Select, __assign({}, args, { children: [_jsx(SelectTrigger, __assign({ appearance: appearance }, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] }), appearance)); }) }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {radiusOptions.map(function (radius) { return (<Select key={radius} {...args}>
-        <SelectTrigger radius={radius} {...args} placeholder="Select..."/>
-        <SelectContent {...args}>
-          <SelectItem value="apple" {...args}>
-            Apple
-          </SelectItem>
-          <SelectItem value="orange" {...args}>
-            Orange
-          </SelectItem>
-        </SelectContent>
-      </Select>); })}
-  </div>);
+    return (_jsx("div", { className: "flex gap-3", children: radiusOptions.map(function (radius) { return (_jsxs(Select, __assign({}, args, { children: [_jsx(SelectTrigger, __assign({ radius: radius }, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] }), radius)); }) }));
 };
 export var WithIcon = function (_a) {
     var args = __rest(_a, []);
-    return (<Select defaultValue="dark" {...args}>
-    <SelectTrigger {...args}></SelectTrigger>
-    <SelectContent {...args}>
-      <SelectItem value="dark" {...args}>
-        <div className="flex gap-2 items-center">
-          <MoonIcon />
-          <label>Dark</label>
-        </div>
-      </SelectItem>
-      <SelectItem value="light" {...args}>
-        <div className="flex gap-2 items-center">
-          <SunIcon />
-          <label>Light</label>
-        </div>
-      </SelectItem>
-    </SelectContent>
-  </Select>);
+    return (_jsxs(Select, __assign({ defaultValue: "dark" }, args, { children: [_jsx(SelectTrigger, __assign({}, args)), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "dark" }, args, { children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(MoonIcon, {}), _jsx("label", { children: "Dark" })] }) })), _jsx(SelectItem, __assign({ value: "light" }, args, { children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(SunIcon, {}), _jsx("label", { children: "Light" })] }) }))] }))] })));
 };

package/dist/stories/separator/Separator.stories.d.ts

@@ -81,13 +81,13 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Orientation: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const HorizontalSize: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const VerticalSize: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/separator/{Separator.stories.jsx → Separator.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Separator } from '../../components/Separator/index';
 import { commonArgTypes } from '../../constants';
 var meta = {
@@ -65,42 +66,17 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]">
-    Tools for building high-quality, accessible UI.
-    <Separator my="3" size="fill-large" {...args}/>
-    <div className="flex gap-3 text-slate-12 dark:text-slate-1 ">
-      Themes
-      <Separator orientation="vertical" {...args}/>
-      Primitives
-      <Separator orientation="vertical" {...args}/>
-      Icons
-      <Separator orientation="vertical" {...args}/>
-      Colors
-    </div>
-  </div>);
+    return (_jsxs("div", { className: "text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]", children: ["Tools for building high-quality, accessible UI.", _jsx(Separator, __assign({ my: "3", size: "fill-large" }, args)), _jsxs("div", { className: "flex gap-3 text-slate-12 dark:text-slate-1 ", children: ["Themes", _jsx(Separator, __assign({ orientation: "vertical" }, args)), "Primitives", _jsx(Separator, __assign({ orientation: "vertical" }, args)), "Icons", _jsx(Separator, __assign({ orientation: "vertical" }, args)), "Colors"] })] }));
 };
 export var Orientation = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-2">
-    <Separator orientation={'horizontal'} {...args}/>
-    <Separator orientation={'vertical'} {...args}/>
-  </div>);
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Separator, __assign({ orientation: 'horizontal' }, args)), _jsx(Separator, __assign({ orientation: 'vertical' }, args))] }));
 };
 export var HorizontalSize = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-96 grid gap-4">
-    <Separator orientation={'horizontal'} size={'small'} {...args}/>
-    <Separator orientation={'horizontal'} size={'medium'} {...args}/>
-    <Separator orientation={'horizontal'} size={'large'} {...args}/>
-    <Separator orientation={'horizontal'} size={'fill-large'} {...args}/>
-  </div>);
+    return (_jsxs("div", { className: "w-96 grid gap-4", children: [_jsx(Separator, __assign({ orientation: 'horizontal', size: 'small' }, args)), _jsx(Separator, __assign({ orientation: 'horizontal', size: 'medium' }, args)), _jsx(Separator, __assign({ orientation: 'horizontal', size: 'large' }, args)), _jsx(Separator, __assign({ orientation: 'horizontal', size: 'fill-large' }, args))] }));
 };
 export var VerticalSize = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="h-60 grid grid-cols-4 gap-4">
-    <Separator orientation={'vertical'} size={'small'} {...args}/>
-    <Separator orientation={'vertical'} size={'medium'} {...args}/>
-    <Separator orientation={'vertical'} size={'large'} {...args}/>
-    <Separator orientation={'vertical'} size={'fill-large'} {...args}/>
-  </div>);
+    return (_jsxs("div", { className: "h-60 grid grid-cols-4 gap-4", children: [_jsx(Separator, __assign({ orientation: 'vertical', size: 'small' }, args)), _jsx(Separator, __assign({ orientation: 'vertical', size: 'medium' }, args)), _jsx(Separator, __assign({ orientation: 'vertical', size: 'large' }, args)), _jsx(Separator, __assign({ orientation: 'vertical', size: 'fill-large' }, args))] }));
 };

package/dist/stories/skeleton/Skeleton.stories.d.ts

@@ -73,16 +73,16 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const WithChildren: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/skeleton/{Skeleton.stories.jsx → Skeleton.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from '../../components/Skeleton/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 import { ToggleSwitch } from '../../components/ToggleSwitch';
@@ -71,49 +72,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Skeleton {...args}>
-    <div>Component</div>
-  </Skeleton>);
+    return (_jsx(Skeleton, __assign({}, args, { children: _jsx("div", { children: "Component" }) })));
 };
 export var Loading = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    <Skeleton loading={true} {...args}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
-      id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
-      magna.
-    </Skeleton>
-    <Skeleton loading={false} {...args}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
-      id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
-      magna.
-    </Skeleton>
-  </div>);
+    return (_jsxs("div", { className: "", children: [_jsx(Skeleton, __assign({ loading: true }, args, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna." })), _jsx(Skeleton, __assign({ loading: false }, args, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna." }))] }));
 };
 export var WithChildren = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-4 grid-cols-2">
-    <Skeleton loading={true}>
-      <ToggleSwitch />
-    </Skeleton>
-    <Skeleton loading={false}>
-      <ToggleSwitch />
-    </Skeleton>
-  </div>);
+    return (_jsxs("div", { className: "grid gap-4 grid-cols-2", children: [_jsx(Skeleton, { loading: true, children: _jsx(ToggleSwitch, {}) }), _jsx(Skeleton, { loading: false, children: _jsx(ToggleSwitch, {}) })] }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-5">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <Skeleton loading={true} radius={radius} {...args}>
-          <div>Component</div>
-        </Skeleton>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "grid gap-5", children: radiusOptions.map(function (radius) { return (_jsx("div", { children: _jsx(Skeleton, __assign({ loading: true, radius: radius }, args, { children: _jsx("div", { children: "Component" }) })) }, radius)); }) }));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    <Skeleton loading={true} width="48px" height="48px" {...args}/>
-  </div>);
+    return (_jsx("div", { className: "", children: _jsx(Skeleton, __assign({ loading: true, width: "48px", height: "48px" }, args)) }));
 };

package/dist/stories/slider/Slider.stories.d.ts

@@ -102,13 +102,13 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Range: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/slider/{Slider.stories.jsx → Slider.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slider } from '../../components/Slider/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 var meta = {
@@ -66,29 +67,17 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60">
-    <Slider defaultValue={[50]} {...args}/>
-  </div>);
+    return (_jsx("div", { className: "w-60", children: _jsx(Slider, __assign({ defaultValue: [50] }, args)) }));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60 grid items-center gap-3">
-    <Slider defaultValue={[50]} {...args} size={'small'}></Slider>
-    <Slider defaultValue={[50]} {...args} size={'medium'}></Slider>
-    <Slider defaultValue={[50]} {...args} size={'large'}></Slider>
-  </div>);
+    return (_jsxs("div", { className: "w-60 grid items-center gap-3", children: [_jsx(Slider, __assign({ defaultValue: [50] }, args, { size: 'small' })), _jsx(Slider, __assign({ defaultValue: [50] }, args, { size: 'medium' })), _jsx(Slider, __assign({ defaultValue: [50] }, args, { size: 'large' }))] }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60">
-    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
-        <Slider key={radius} defaultValue={[50]} radius={radius} {...args}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "w-60", children: radiusOptions.map(function (radius) { return (_jsx("div", { className: "pb-1", children: _jsx(Slider, __assign({ defaultValue: [50], radius: radius }, args), radius) }, radius)); }) }));
 };
 export var Range = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60">
-    <Slider defaultValue={[20, 80]} {...args}/>
-  </div>);
+    return (_jsx("div", { className: "w-60", children: _jsx(Slider, __assign({ defaultValue: [20, 80] }, args)) }));
 };

package/dist/stories/spinner/Spinner.stories.d.ts

@@ -68,16 +68,16 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const WithChildren: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const WithButton: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/spinner/{Spinner.stories.jsx → Spinner.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Spinner } from '../../components/Spinner/index';
 import { commonArgTypes } from '../../constants';
 import { ToggleSwitch } from 'components/ToggleSwitch';
@@ -66,47 +67,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return <Spinner {...args}/>;
+    return _jsx(Spinner, __assign({}, args));
 };
 export var Loading = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-3">
-    <Spinner loading={true} {...args}>
-      Loading
-    </Spinner>
-    <Spinner loading={false} {...args}>
-      Loading
-    </Spinner>
-  </div>);
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Spinner, __assign({ loading: true }, args, { children: "Loading" })), _jsx(Spinner, __assign({ loading: false }, args, { children: "Loading" }))] }));
 };
 export var WithChildren = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-3">
-    <Spinner loading={true} {...args}>
-      <ToggleSwitch></ToggleSwitch>
-    </Spinner>
-    <Spinner loading={false} {...args}>
-      <ToggleSwitch></ToggleSwitch>
-    </Spinner>
-  </div>);
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Spinner, __assign({ loading: true }, args, { children: _jsx(ToggleSwitch, {}) })), _jsx(Spinner, __assign({ loading: false }, args, { children: _jsx(ToggleSwitch, {}) }))] }));
 };
 export var WithButton = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    <Button color="slate" className="mr-2" {...args}>
-      <Spinner {...args}/>
-    </Button>
-    <Button color="slate" {...args}>
-      <Spinner {...args} className="mr-2"/>
-      Loading
-    </Button>
-  </div>);
+    return (_jsxs("div", { children: [_jsx(Button, __assign({ color: "slate", className: "mr-2" }, args, { children: _jsx(Spinner, __assign({}, args)) })), _jsxs(Button, __assign({ color: "slate" }, args, { children: [_jsx(Spinner, __assign({}, args, { className: "mr-2" })), "Loading"] }))] }));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-3 gap-4">
-    <Spinner loading={true} {...args} size={'small'}/>
-    <Spinner loading={true} {...args} size={'medium'}/>
-    <Spinner loading={true} {...args} size={'large'}/>
-  </div>);
+    return (_jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx(Spinner, __assign({ loading: true }, args, { size: 'small' })), _jsx(Spinner, __assign({ loading: true }, args, { size: 'medium' })), _jsx(Spinner, __assign({ loading: true }, args, { size: 'large' }))] }));
 };

package/dist/stories/switch/Switch.stories.d.ts

@@ -134,13 +134,13 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Scaling: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Appearance: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/switch/{Switch.stories.jsx → Switch.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToggleSwitch } from '../../components/ToggleSwitch/index';
 import { commonArgTypes, radiusOptions, scalingOptions } from '../../constants';
 var meta = {
@@ -91,29 +92,17 @@ export var Default = {
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <ToggleSwitch {...args} size={'small'}></ToggleSwitch>
-    <ToggleSwitch {...args} size={'medium'}></ToggleSwitch>
-    <ToggleSwitch {...args} size={'large'}></ToggleSwitch>
-  </div>);
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ToggleSwitch, __assign({}, args, { size: 'small' })), _jsx(ToggleSwitch, __assign({}, args, { size: 'medium' })), _jsx(ToggleSwitch, __assign({}, args, { size: 'large' }))] }));
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {scalingOptions.map(function (scaling) { return (<ToggleSwitch key={scaling} {...args} scaling={scaling}></ToggleSwitch>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center gap-3", children: scalingOptions.map(function (scaling) { return (_jsx(ToggleSwitch, __assign({}, args, { scaling: scaling }), scaling)); }) }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <ToggleSwitch key={radius} radius={radius} {...args}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center gap-3", children: radiusOptions.map(function (radius) { return (_jsx("div", { children: _jsx(ToggleSwitch, __assign({ radius: radius }, args), radius) }, radius)); }) }));
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {['classic', 'soft', 'surface'].map(function (appearance) { return (<ToggleSwitch key={appearance} {...args} appearance={appearance}></ToggleSwitch>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center gap-3", children: ['classic', 'soft', 'surface'].map(function (appearance) { return (_jsx(ToggleSwitch, __assign({}, args, { appearance: appearance }), appearance)); }) }));
 };

package/dist/stories/tab-nav/TabNav.stories.d.ts

@@ -52,4 +52,4 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/tab-nav/{TabNav.stories.jsx → TabNav.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TabNav, TabNavLink } from '../../components/TabNav/index';
 import { commonArgTypes } from '../../constants';
 var meta = {
@@ -54,15 +55,5 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<TabNav {...args}>
-    <TabNavLink href="#" active {...args}>
-      Account
-    </TabNavLink>
-    <TabNavLink href="#" {...args}>
-      Documents
-    </TabNavLink>
-    <TabNavLink href="#" {...args}>
-      Settings
-    </TabNavLink>
-  </TabNav>);
+    return (_jsxs(TabNav, __assign({}, args, { children: [_jsx(TabNavLink, __assign({ href: "#", active: true }, args, { children: "Account" })), _jsx(TabNavLink, __assign({ href: "#" }, args, { children: "Documents" })), _jsx(TabNavLink, __assign({ href: "#" }, args, { children: "Settings" }))] })));
 };

package/dist/stories/table/Table.stories.d.ts

@@ -84,4 +84,4 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;