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

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;

package/dist/stories/textfield/{TextField.stories.jsx → TextField.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 { TextField, TextFieldSlot } from '../../components/TextField/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 import { DotsHorizontalIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
@@ -67,54 +68,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return <TextField placeholder="Search the docs..." {...args}/>;
+    return _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <TextField placeholder="Search the docs..." {...args} size={'small'}></TextField>
-    <TextField placeholder="Search the docs..." {...args} size={'medium'}></TextField>
-    <TextField placeholder="Search the docs..." {...args} size={'large'}></TextField>
-  </div>);
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'small' })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'medium' })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'large' }))] }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
-        <TextField placeholder="Search the docs..." key={radius} radius={radius} {...args}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { children: radiusOptions.map(function (radius) { return (_jsx("div", { className: "pb-1", children: _jsx(TextField, __assign({ placeholder: "Search the docs...", radius: radius }, args), radius) }, radius)); }) }));
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {['classic', 'soft', 'surface'].map(function (appearance) { return (<div key={appearance} className="pb-1">
-        <TextField placeholder="Search the docs..." key={appearance} appearance={appearance} {...args}/>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { children: ['classic', 'soft', 'surface'].map(function (appearance) { return (_jsx("div", { className: "pb-1", children: _jsx(TextField, __assign({ placeholder: "Search the docs...", appearance: appearance }, args), appearance) }, appearance)); }) }));
 };
 export var States = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <TextField placeholder="Search the docs..." {...args}>
-      <TextFieldSlot>
-        <MagnifyingGlassIcon height="16" width="16"/>
-      </TextFieldSlot>
-    </TextField>
-
-    <TextField placeholder="Search the docs..." {...args}>
-      <TextFieldSlot side={'right'}>
-        <DotsHorizontalIcon height="14" width="14"/>
-      </TextFieldSlot>
-    </TextField>
-
-    <TextField {...args}>
-      <TextFieldSlot>
-        <MagnifyingGlassIcon height="16" width="16"/>
-      </TextFieldSlot>
-      <TextFieldSlot>
-        <DotsHorizontalIcon height="14" width="14"/>
-      </TextFieldSlot>
-    </TextField>
-  </div>);
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { children: _jsx(TextFieldSlot, { children: _jsx(MagnifyingGlassIcon, { height: "16", width: "16" }) }) })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { children: _jsx(TextFieldSlot, { side: 'right', children: _jsx(DotsHorizontalIcon, { height: "14", width: "14" }) }) })), _jsxs(TextField, __assign({}, args, { children: [_jsx(TextFieldSlot, { children: _jsx(MagnifyingGlassIcon, { height: "16", width: "16" }) }), _jsx(TextFieldSlot, { children: _jsx(DotsHorizontalIcon, { height: "14", width: "14" }) })] }))] }));
 };

package/dist/stories/toast/Toast.stories.d.ts

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

package/dist/stories/toast/{Toast.stories.jsx → Toast.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 { useState } from 'react';
 import { commonArgTypes, sizeOptions } from '../../constants';
 import { Toast, ToastDescription, ToastTitle, ToastActionButton } from 'components/Toast';
@@ -89,34 +90,15 @@ export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (<div>
-      <Button onClick={function () { return setOpen(true); }}>토스트 메세지 호출</Button>
-      <Toast openToast={open} setOpenToast={setOpen} {...args}>
-        <ToastTitle titleText={args.titleText}>토스트 타이틀</ToastTitle>
-        <ToastDescription contentText={args.contentText}>토스트 내용이 위치합니다</ToastDescription>
-        <ToastActionButton altText="액션버튼">Action</ToastActionButton>
-      </Toast>
-    </div>);
+    return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uD1A0\uC2A4\uD2B8 \uBA54\uC138\uC9C0 \uD638\uCD9C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastTitle, { titleText: args.titleText, children: "\uD1A0\uC2A4\uD2B8 \uD0C0\uC774\uD2C0" }), _jsx(ToastDescription, { contentText: args.contentText, children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "Action" })] }))] }));
 };
 export var NoTitleToast = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (<div>
-      <Button onClick={function () { return setOpen(true); }}>타이틀 없음</Button>
-      <Toast openToast={open} setOpenToast={setOpen} {...args}>
-        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
-        <ToastActionButton altText="액션버튼">닫기</ToastActionButton>
-      </Toast>
-    </div>);
+    return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uD0C0\uC774\uD2C0 \uC5C6\uC74C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastDescription, { children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "\uB2EB\uAE30" })] }))] }));
 };
 export var NoButtonToast = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (<div>
-      <Button onClick={function () { return setOpen(true); }}>버튼 없음</Button>
-      <Toast openToast={open} setOpenToast={setOpen} {...args}>
-        <ToastTitle>토스트 타이틀</ToastTitle>
-        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
-      </Toast>
-    </div>);
+    return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uBC84\uD2BC \uC5C6\uC74C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastTitle, { children: "\uD1A0\uC2A4\uD2B8 \uD0C0\uC774\uD2C0" }), _jsx(ToastDescription, { children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" })] }))] }));
 };

package/dist/stories/toggle/Toggle.stories.d.ts

@@ -100,16 +100,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 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;
 export declare const WithText: ({ ...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/toggle/{Toggle.stories.jsx → Toggle.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { commonArgTypes, radiusOptions, sizeOptions, appearanceOptions } from '../../constants';
 import { FontBoldIcon } from '@radix-ui/react-icons';
 import { Toggle, ToggleWithText } from '../../components/Toggle';
@@ -68,39 +69,21 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    <Toggle {...args} aria-label="Toggle italic">
-      <FontBoldIcon />
-    </Toggle>
-  </div>);
+    return (_jsx("div", { className: "flex items-center space-x-4", children: _jsx(Toggle, __assign({}, args, { "aria-label": "Toggle italic", children: _jsx(FontBoldIcon, {}) })) }));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {radiusOptions.map(function (radius) { return (<Toggle key={radius} aria-label="Toggle italic" {...args} radius={radius}>
-        <FontBoldIcon />
-      </Toggle>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center space-x-4", children: radiusOptions.map(function (radius) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { radius: radius, children: _jsx(FontBoldIcon, {}) }), radius)); }) }));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['small', 'medium', 'large'].map(function (size) { return (<Toggle key={size} aria-label="Toggle italic" {...args} size={size}>
-        <FontBoldIcon />
-      </Toggle>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center space-x-4", children: ['small', 'medium', 'large'].map(function (size) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { size: size, children: _jsx(FontBoldIcon, {}) }), size)); }) }));
 };
 export var WithText = function (_a) {
     var args = __rest(_a, []);
-    return (<ToggleWithText {...args} aria-label="Toggle italic" text={'Bold'}>
-    <FontBoldIcon />
-  </ToggleWithText>);
+    return (_jsx(ToggleWithText, __assign({}, args, { "aria-label": "Toggle italic", text: 'Bold', children: _jsx(FontBoldIcon, {}) })));
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (<Toggle key={appearance} aria-label="Toggle italic" {...args} appearance={appearance}>
-        <FontBoldIcon />
-      </Toggle>); })}
-  </div>);
+    return (_jsx("div", { className: "flex items-center space-x-4", children: ['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { appearance: appearance, children: _jsx(FontBoldIcon, {}) }), appearance)); }) }));
 };

package/dist/stories/toggle/ToggleGroup.stories.d.ts

@@ -98,6 +98,6 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const Default: ({ ...args }: any) => import("react").JSX.Element;
-export declare const Size: ({ ...args }: any) => import("react").JSX.Element;
-export declare const Appearance: ({ ...args }: any) => import("react").JSX.Element;
+export declare const Default: ({ ...args }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const Size: ({ ...args }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const Appearance: ({ ...args }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/toggle/{ToggleGroup.stories.jsx → ToggleGroup.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 { commonArgTypes, sizeOptions, appearanceOptions } from '../../constants';
 import { FontBoldIcon, FontItalicIcon, UnderlineIcon } from '@radix-ui/react-icons';
 import { ToggleGroup, ToggleGroupItem } from '../../components/ToggleGroup';
@@ -77,51 +78,17 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<ToggleGroup type={'single'} defaultValue={'left'} aria-label="Text alignment" {...args}>
-      <ToggleGroupItem value="left" aria-label="Left aligned" {...args}>
-        <FontBoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="center" aria-label="Center aligned" {...args}>
-        <FontItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="right" aria-label="Right aligned" {...args}>
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>);
+    return (_jsxs(ToggleGroup, __assign({ type: 'single', defaultValue: 'left', "aria-label": "Text alignment" }, args, { children: [_jsx(ToggleGroupItem, __assign({ value: "left", "aria-label": "Left aligned" }, args, { children: _jsx(FontBoldIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "center", "aria-label": "Center aligned" }, args, { children: _jsx(FontItalicIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "right", "aria-label": "Right aligned" }, args, { children: _jsx(UnderlineIcon, {}) }))] })));
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {sizeOptions
+    return (_jsx("div", { className: "flex items-center space-x-4", children: sizeOptions
             .filter(function (size) { return !['x-small', 'x-large'].includes(size); })
-            .map(function (size) { return (<ToggleGroup key={size} type={'single'} defaultValue={'left'} aria-label="Text alignment" {...args}>
-          <ToggleGroupItem value="left" aria-label="Left aligned" {...args} size={size}>
-            <FontBoldIcon />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="center" aria-label="Center aligned" {...args} size={size}>
-            <FontItalicIcon />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="right" aria-label="Right aligned" {...args} size={size}>
-            <UnderlineIcon />
-          </ToggleGroupItem>
-        </ToggleGroup>); })}
-  </div>);
+            .map(function (size) { return (_jsxs(ToggleGroup, __assign({ type: 'single', defaultValue: 'left', "aria-label": "Text alignment" }, args, { children: [_jsx(ToggleGroupItem, __assign({ value: "left", "aria-label": "Left aligned" }, args, { size: size, children: _jsx(FontBoldIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "center", "aria-label": "Center aligned" }, args, { size: size, children: _jsx(FontItalicIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "right", "aria-label": "Right aligned" }, args, { size: size, children: _jsx(UnderlineIcon, {}) }))] }), size)); }) }));
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {appearanceOptions
+    return (_jsx("div", { className: "flex items-center space-x-4", children: appearanceOptions
             .filter(function (appearance) { return !['classic', 'solid'].includes(appearance); })
-            .map(function (appearance) { return (<ToggleGroup key={appearance} type={'single'} defaultValue={'left'} aria-label="Text alignment" {...args}>
-          <ToggleGroupItem value="left" aria-label="Left aligned" {...args} appearance={appearance}>
-            <FontBoldIcon />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="center" aria-label="Center aligned" {...args} appearance={appearance}>
-            <FontItalicIcon />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="right" aria-label="Right aligned" {...args} appearance={appearance}>
-            <UnderlineIcon />
-          </ToggleGroupItem>
-        </ToggleGroup>); })}
-  </div>);
+            .map(function (appearance) { return (_jsxs(ToggleGroup, __assign({ type: 'single', defaultValue: 'left', "aria-label": "Text alignment" }, args, { children: [_jsx(ToggleGroupItem, __assign({ value: "left", "aria-label": "Left aligned" }, args, { appearance: appearance, children: _jsx(FontBoldIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "center", "aria-label": "Center aligned" }, args, { appearance: appearance, children: _jsx(FontItalicIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "right", "aria-label": "Right aligned" }, args, { appearance: appearance, children: _jsx(UnderlineIcon, {}) }))] }), appearance)); }) }));
 };

package/dist/stories/tooltip/Tooltip.stories.d.ts

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

package/dist/stories/tooltip/{Tooltip.stories.jsx → Tooltip.stories.js}

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '../../components/Tooltip/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 var meta = {
@@ -65,27 +66,13 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Tooltip content="툴팁 컴포넌트 내용입니다." {...args}>
-    <div>마우스 커서를 올려주세요</div>
-  </Tooltip>);
+    return (_jsx(Tooltip, __assign({ content: "\uD234\uD301 \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uC6A9\uC785\uB2C8\uB2E4." }, args, { children: _jsx("div", { children: "\uB9C8\uC6B0\uC2A4 \uCEE4\uC11C\uB97C \uC62C\uB824\uC8FC\uC138\uC694" }) })));
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    {radiusOptions.map(function (radius, index) { return (<div key={radius} className="flex pt-3 items-center space-x-2">
-        <Tooltip content="툴팁 컴포넌트 내용입니다." radius={radius} {...args}>
-          <div>마우스 커서를 올려주세요</div>
-        </Tooltip>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "", children: radiusOptions.map(function (radius, index) { return (_jsx("div", { className: "flex pt-3 items-center space-x-2", children: _jsx(Tooltip, __assign({ content: "\uD234\uD301 \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uC6A9\uC785\uB2C8\uB2E4.", radius: radius }, args, { children: _jsx("div", { children: "\uB9C8\uC6B0\uC2A4 \uCEE4\uC11C\uB97C \uC62C\uB824\uC8FC\uC138\uC694" }) })) }, radius)); }) }));
 };
 export var Position = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    {['top', 'right', 'left', 'bottom'].map(function (side, index) { return (<div key={side} className="flex pt-3 items-center space-x-2">
-        <Tooltip content="툴팁 컴포넌트 내용입니다." side={side} {...args}>
-          <div>마우스 커서를 올려주세요</div>
-        </Tooltip>
-      </div>); })}
-  </div>);
+    return (_jsx("div", { className: "", children: ['top', 'right', 'left', 'bottom'].map(function (side, index) { return (_jsx("div", { className: "flex pt-3 items-center space-x-2", children: _jsx(Tooltip, __assign({ content: "\uD234\uD301 \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uC6A9\uC785\uB2C8\uB2E4.", side: side }, args, { children: _jsx("div", { children: "\uB9C8\uC6B0\uC2A4 \uCEE4\uC11C\uB97C \uC62C\uB824\uC8FC\uC138\uC694" }) })) }, side)); }) }));
 };