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

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;

package/dist/stories/table/{Table.stories.jsx → Table.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 { Table, TableHeader, TableRow, TableColumnHeaderCell, TableBody, TableRowHeaderCell, TableCell, } from '../../components/Table/index';
 import { commonArgTypes } from '../../constants';
 var meta = {
@@ -74,33 +75,5 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Table {...args}>
-    <TableHeader>
-      <TableRow>
-        <TableColumnHeaderCell>Full name</TableColumnHeaderCell>
-        <TableColumnHeaderCell>Email</TableColumnHeaderCell>
-        <TableColumnHeaderCell>Group</TableColumnHeaderCell>
-      </TableRow>
-    </TableHeader>
-
-    <TableBody>
-      <TableRow>
-        <TableRowHeaderCell>Danilo Sousa</TableRowHeaderCell>
-        <TableCell>danilo@examplecom</TableCell>
-        <TableCell>Developer</TableCell>
-      </TableRow>
-
-      <TableRow>
-        <TableRowHeaderCell>Zahra Ambessa</TableRowHeaderCell>
-        <TableCell>zahra@examplecom</TableCell>
-        <TableCell>Admin</TableCell>
-      </TableRow>
-
-      <TableRow>
-        <TableRowHeaderCell>Jasper Eriksson</TableRowHeaderCell>
-        <TableCell>jasper@examplecom</TableCell>
-        <TableCell>Developer</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>);
+    return (_jsxs(Table, __assign({}, args, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableColumnHeaderCell, { children: "Full name" }), _jsx(TableColumnHeaderCell, { children: "Email" }), _jsx(TableColumnHeaderCell, { children: "Group" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableRowHeaderCell, { children: "Danilo Sousa" }), _jsx(TableCell, { children: "danilo@examplecom" }), _jsx(TableCell, { children: "Developer" })] }), _jsxs(TableRow, { children: [_jsx(TableRowHeaderCell, { children: "Zahra Ambessa" }), _jsx(TableCell, { children: "zahra@examplecom" }), _jsx(TableCell, { children: "Admin" })] }), _jsxs(TableRow, { children: [_jsx(TableRowHeaderCell, { children: "Jasper Eriksson" }), _jsx(TableCell, { children: "jasper@examplecom" }), _jsx(TableCell, { children: "Developer" })] })] })] })));
 };

package/dist/stories/tabs/Tabs.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/tabs/{Tabs.stories.jsx → Tabs.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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/Tabs/index';
 import { commonArgTypes } from '../../constants';
 var meta = {
@@ -54,23 +55,5 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Tabs defaultValue="account" {...args}>
-    <TabsList {...args}>
-      <TabsTrigger value="account">Account</TabsTrigger>
-      <TabsTrigger value="documents">Documents</TabsTrigger>
-      <TabsTrigger value="settings">Settings</TabsTrigger>
-    </TabsList>
-
-    <TabsContent value="account">
-      <div>Make changes to your account</div>
-    </TabsContent>
-
-    <TabsContent value="documents">
-      <div>Access and update your documents</div>
-    </TabsContent>
-
-    <TabsContent value="settings">
-      <div>Edit your profile</div>
-    </TabsContent>
-  </Tabs>);
+    return (_jsxs(Tabs, __assign({ defaultValue: "account" }, args, { children: [_jsxs(TabsList, __assign({}, args, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "documents", children: "Documents" }), _jsx(TabsTrigger, { value: "settings", children: "Settings" })] })), _jsx(TabsContent, { value: "account", children: _jsx("div", { children: "Make changes to your account" }) }), _jsx(TabsContent, { value: "documents", children: _jsx("div", { children: "Access and update your documents" }) }), _jsx(TabsContent, { value: "settings", children: _jsx("div", { children: "Edit your profile" }) })] })));
 };

package/dist/stories/text/Text.stories.d.ts

@@ -59,16 +59,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 Weight: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Color: ({ ...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 Align: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/text/{Text.stories.jsx → Text.stories.js}

@@ -29,6 +29,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { commonArgTypes, typoSizeOptions, weightOptions } from '../../constants';
 import { Text } from '../../Typography/Text';
 import { colorOptions } from 'color/constants';
@@ -55,37 +56,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return <Text {...args}>Text Component</Text>;
+    return _jsx(Text, __assign({}, args, { children: "Text Component" }));
 };
 export var Weight = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {textWeightOption.map(function (weight, index) { return (<Text key={weight} {...args} weight={weight}>
-        Text Component
-      </Text>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center space-x-4", children: textWeightOption.map(function (weight, index) { return (_jsx(Text, __assign({}, args, { weight: weight, children: "Text Component" }), weight)); }) }));
 };
 export var Color = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {colorOptions.map(function (color) { return (<Text key={color} {...args} color={color}>
-        Text Component
-      </Text>); })}
-  </div>);
+    return (_jsx("div", { children: colorOptions.map(function (color) { return (_jsx(Text, __assign({}, args, { color: color, children: "Text Component" }), color)); }) }));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {typoSizeOptions.map(function (size) { return (<Text key={size} {...args} size={size}>
-        Text Component
-      </Text>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center space-x-4", children: typoSizeOptions.map(function (size) { return (_jsx(Text, __assign({}, args, { size: size, children: "Text Component" }), size)); }) }));
 };
 export var Align = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {['left', 'center', 'right'].map(function (align) { return (<Text key={align} {...args} align={align} as="div">
-        Text Component
-      </Text>); })}
-  </div>);
+    return (_jsx("div", { children: ['left', 'center', 'right'].map(function (align) { return (_jsx(Text, __assign({}, args, { align: align, as: "div", children: "Text Component" }), align)); }) }));
 };

package/dist/stories/textArea/TextArea.stories.d.ts

@@ -102,16 +102,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 Scaling: ({ ...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;

package/dist/stories/textArea/{TextArea.stories.jsx → TextArea.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 { TextArea } from '../../components/TextArea/index';
 import { commonArgTypes, radiusOptions, scalingOptions } from '../../constants';
 var meta = {
@@ -75,38 +76,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return <TextArea placeholder="Reply to comment…" {...args}/>;
+    return _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args));
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-5">
-    {scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="">
-        <TextArea placeholder="Reply to comment…" {...args} scaling={scaling}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "grid gap-5", children: scalingOptions.map(function (scaling, index) { return (_jsx("div", { className: "", children: _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { scaling: scaling })) }, scaling)); }) }));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <TextArea placeholder="Reply to comment…" {...args} size={'small'}></TextArea>
-    <TextArea placeholder="Reply to comment…" {...args} size={'medium'}></TextArea>
-    <TextArea placeholder="Reply to comment…" {...args} size={'large'}></TextArea>
-    <TextArea placeholder="Reply to comment…" {...args} size={'x-large'}></TextArea>
-  </div>);
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'small' })), _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'medium' })), _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'large' })), _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'x-large' }))] }));
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-3">
-    {['classic', 'soft', 'surface'].map(function (appearance, index) { return (<div key={appearance} className="">
-        <TextArea placeholder="Reply to comment…" {...args} appearance={appearance}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "grid gap-3", children: ['classic', 'soft', 'surface'].map(function (appearance, index) { return (_jsx("div", { className: "", children: _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { appearance: appearance })) }, appearance)); }) }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-3">
-    {radiusOptions.map(function (radius, index) { return (<div key={radius} className="">
-        <TextArea placeholder="Reply to comment…" {...args} radius={radius}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "grid gap-3", children: radiusOptions.map(function (radius, index) { return (_jsx("div", { className: "", children: _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { radius: radius })) }, radius)); }) }));
 };

package/dist/stories/textfield/TextField.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 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;
 export declare const States: ({ ...args }: {
     [x: string]: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;