@lotte-innovate/ui-component-test 0.0.14 → 0.0.16

package/dist/stories/checkbox/CheckboxGroup.stories.jsx

@@ -1,144 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { commonArgTypes, appearanceOptions, sizeOptions } from '../../../src/constants';
-import { CheckboxGroupItem, CheckboxGroup } from 'components/CheckboxGroup';
-var meta = {
-    title: 'Component/CheckboxGroup',
-    component: CheckboxGroupItem,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: '여러 체크박스를 그룹화하여 관련된 옵션을 함께 관리할 수 있는 컴포넌트',
-            },
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        size: __assign(__assign({}, commonArgTypes.size), { table: {
-                category: 'Props',
-                type: {
-                    summary: sizeOptions
-                        .filter(function (option) { return option !== 'x-small' && option !== 'x-large'; })
-                        .join(' | '),
-                },
-            }, options: sizeOptions.filter(function (option) { return option !== 'x-small' && option !== 'x-large'; }), description: '체크박스 크기' }),
-        radius: __assign(__assign({}, commonArgTypes.radius), { description: '체크박스 둥글기' }),
-        color: __assign(__assign({}, commonArgTypes.color), { description: '체크박스 메인 색' }),
-        appearance: __assign(__assign({}, commonArgTypes.appearance), { description: '체크박스 스타일', table: {
-                category: 'Props',
-                type: {
-                    summary: appearanceOptions
-                        .filter(function (option) { return option !== 'ghost' && option !== 'outline' && option !== 'solid'; })
-                        .join(' | '),
-                },
-            }, options: appearanceOptions.filter(function (option) { return option !== 'ghost' && option !== 'outline' && option !== 'solid'; }) }),
-    },
-    args: {},
-};
-export default meta;
-export var Default = function (_a) {
-    var args = __rest(_a, []);
-    return (<CheckboxGroup defaultValue={['apple']}>
-    <CheckboxGroupItem id={'apple'} {...args}>
-      사과🍎
-    </CheckboxGroupItem>
-    <CheckboxGroupItem id={'orange'} {...args}>
-      오렌지🍊
-    </CheckboxGroupItem>
-    <CheckboxGroupItem id={'banana'} {...args}>
-      바나나🍌
-    </CheckboxGroupItem>
-  </CheckboxGroup>);
-};
-export var Size = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-6">
-    <CheckboxGroup size={'small'} defaultValue={['size-s1']}>
-      <CheckboxGroupItem id="size-s1" {...args}>
-        Agree to Terms and Conditions
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="size-s2" {...args}>
-        Agree to Privacy Policy
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup size={'medium'} defaultValue={['size-m1']}>
-      <CheckboxGroupItem id="size-m1" {...args}>
-        Agree to Terms and Conditions
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="size-m2" {...args}>
-        Agree to Privacy Policy
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup size={'large'} defaultValue={['size-l1']}>
-      <CheckboxGroupItem id="size-l1" {...args}>
-        Agree to Terms and Conditions
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="size-l2" {...args}>
-        Agree to Privacy Policy
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-  </div>);
-};
-export var Radius = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-6">
-    <CheckboxGroup defaultValue={['radius-none-1']} radius={'none'}>
-      <CheckboxGroupItem id="radius-none-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-none-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup defaultValue={['radius-small-1']} radius={'small'}>
-      <CheckboxGroupItem id="radius-small-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-small-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup defaultValue={['radius-medium-1']} radius={'medium'}>
-      <CheckboxGroupItem id="radius-medium-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-medium-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup defaultValue={['radius-large-1']} radius={'large'}>
-      <CheckboxGroupItem id="radius-large-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-large-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-  </div>);
-};

package/dist/stories/context-menu/ContextMenu.stories.d.ts

@@ -1,113 +0,0 @@
-/// <reference types="react" />
-import { IRadius } from 'types';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("@radix-ui/react-context-menu").ContextMenuProps & import("components/ContextMenu").ContextMenuProps & import("react").RefAttributes<never>>;
-    parameters: {
-        layout: string;
-        themes: {
-            themeOverride: string;
-        };
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-    argTypes: {
-        radius: {
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: IRadius[];
-            control: {
-                type: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        scaling: {
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            control: {
-                type: string;
-            };
-            options: import("types").IScaling[];
-            defaultValue: {
-                summary: string;
-            };
-        };
-        size: {
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: import("types").ISize[];
-            description: string;
-            control: {
-                type: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        color: {
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: import("types").IColor[];
-            control: {
-                type: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        appearance: {
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: import("types").IAppearance[];
-            control: {
-                type: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-    };
-};
-export default meta;
-export declare const Default: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;
-export declare const Radius: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;
-export declare const Size: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;
-export declare const Appearance: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;

package/dist/stories/context-menu/ContextMenu.stories.jsx

@@ -1,155 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { radiusOptions, commonArgTypes, sizeOptions, appearanceOptions } from '../../constants';
-import { ContextMenuContent, ContextMenu, ContextMenuTrigger, ContextMenuLabel, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSubTrigger, ContextMenuSubContent, } from 'components/ContextMenu';
-import { Text } from 'Typography/Text';
-var meta = {
-    title: 'Component/ContextMenu',
-    component: ContextMenu,
-    parameters: {
-        layout: 'centered',
-        themes: {
-            themeOverride: 'dark',
-        },
-        docs: {
-            description: {
-                component: '우클릭 또는 특정 인터랙션 시 나타나는 컨텍스트 메뉴 컴포넌트',
-            },
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'ContextMenu 둥굴기' }),
-        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'ContextMenu 비율' }),
-        size: __assign(__assign({}, commonArgTypes.size), { table: {
-                category: 'Props',
-                type: {
-                    summary: sizeOptions
-                        .filter(function (option) { return option === 'small' || option === 'medium'; })
-                        .join(' | '),
-                },
-            }, options: sizeOptions.filter(function (option) { return option === 'small' || option === 'medium'; }), description: 'Menubar 크기' }),
-        color: __assign(__assign({}, commonArgTypes.color), { description: 'Menubar 메인 색' }),
-        appearance: {
-            description: 'MenubarItem 스타일',
-            table: {
-                category: 'Props',
-                type: {
-                    summary: appearanceOptions
-                        .filter(function (option) { return option === 'solid' || option === 'soft'; })
-                        .join(' | '),
-                },
-            },
-            options: appearanceOptions.filter(function (option) { return option === 'solid' || option === 'soft'; }),
-            control: { type: 'select' },
-            defaultValue: { summary: 'solid' },
-        },
-    },
-};
-export default meta;
-export var Default = function (_a) {
-    var args = __rest(_a, []);
-    return (<ContextMenu {...args}>
-    <ContextMenuTrigger>
-      <Text>Right-click here.</Text>
-    </ContextMenuTrigger>
-    <ContextMenuContent>
-      <ContextMenuLabel>라벨</ContextMenuLabel>
-      <ContextMenuItem shortcut="⌘ T">기본 아이템</ContextMenuItem>
-      <ContextMenuItem disabled>사용불가 아이템</ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuGroup>
-        <ContextMenuItem>그룹 아이템1</ContextMenuItem>
-        <ContextMenuItem>그룹 아이템2</ContextMenuItem>
-      </ContextMenuGroup>
-      <ContextMenuSeparator />
-      <ContextMenuCheckboxItem checked>checked 아이템</ContextMenuCheckboxItem>
-      <ContextMenuCheckboxItem checked={false}>unchecked 아이템</ContextMenuCheckboxItem>
-      <ContextMenuSeparator />
-      <ContextMenuRadioGroup value={'apple'}>
-        <ContextMenuRadioItem value={'apple'}>라디오 아이템1</ContextMenuRadioItem>
-        <ContextMenuRadioItem value={'banana'}>라디오 아이템2</ContextMenuRadioItem>
-      </ContextMenuRadioGroup>
-      <ContextMenuSeparator />
-      <ContextMenuSubTrigger>
-        More Menu{' '}
-        <ContextMenuSubContent>
-          <ContextMenuItem>서브 아이템1</ContextMenuItem>
-          <ContextMenuItem>서브 아이템2</ContextMenuItem>
-        </ContextMenuSubContent>
-      </ContextMenuSubTrigger>
-    </ContextMenuContent>
-  </ContextMenu>);
-};
-export var Radius = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    {radiusOptions.map(function (radius) { return (<ContextMenu key={radius} radius={radius} {...args}>
-        <ContextMenuTrigger className="w-[100px]">{radius}</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem>메뉴1</ContextMenuItem>
-          <ContextMenuItem>메뉴2</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>); })}
-  </div>);
-};
-export var Size = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    <ContextMenu size={'small'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">small</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-
-    <ContextMenu size={'medium'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">medium</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  </div>);
-};
-export var Appearance = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    <ContextMenu appearance={'solid'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">solid</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-
-    <ContextMenu appearance={'soft'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">soft</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  </div>);
-};

package/dist/stories/data-list/DataList.stories.d.ts

@@ -1,97 +0,0 @@
-/// <reference types="react" />
-import { IScaling } from 'types';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/data-list").RootProps & import("react").RefAttributes<HTMLDListElement>, "ref"> & import("components/DataList").DataListProps & import("react").RefAttributes<HTMLDListElement>>;
-    parameters: {
-        layout: string;
-        themes: {
-            themeOverride: string;
-        };
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-    argTypes: {
-        scaling: {
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            control: {
-                type: string;
-            };
-            options: IScaling[];
-            defaultValue: {
-                summary: string;
-            };
-        };
-        size: {
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: import("types").ISize[];
-            description: string;
-            control: {
-                type: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        color: {
-            description: string;
-            defaultValue: {
-                summary: string;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: import("types").IColor[];
-            control: {
-                type: string;
-            };
-        };
-        orientation: {
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-            options: string[];
-            control: {
-                type: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-            description: string;
-        };
-    };
-};
-export default meta;
-export declare const Default: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;
-export declare const Orientation: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;
-export declare const Scaling: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;
-export declare const Size: ({ ...args }: {
-    [x: string]: any;
-}) => import("react").JSX.Element;

package/dist/stories/data-list/DataList.stories.jsx

@@ -1,185 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { DataList, DataListItem, DataListLabel, DataListValue } from 'components/DataList';
-import Badge from 'components/Badge';
-import { scalingOptions, commonArgTypes, sizeOptions } from '../../constants';
-import Button from 'components/Button';
-var meta = {
-    title: 'Component/DataList',
-    component: DataList,
-    parameters: {
-        layout: 'centered',
-        themes: {
-            themeOverride: 'dark',
-        },
-        docs: {
-            description: {
-                component: '목록 형태로 메타 데이터 표시하는 컴포넌트',
-            },
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'DataList 비율' }),
-        size: __assign(__assign({}, commonArgTypes.size), { table: {
-                category: 'Props',
-                type: {
-                    summary: sizeOptions
-                        .filter(function (option) { return option !== 'x-small' && option !== 'x-large'; })
-                        .join(' | '),
-                },
-            }, options: sizeOptions.filter(function (option) { return option !== 'x-small' && option !== 'x-large'; }), description: 'DataList 크기' }),
-        color: __assign(__assign({}, commonArgTypes.color), { description: 'DataList 값 매인색', defaultValue: { summary: 'black' } }),
-        orientation: {
-            table: {
-                category: 'Props',
-                type: {
-                    summary: ['horizontal', 'vertical'].join(' | '),
-                },
-            },
-            options: ['horizontal', 'vertical'],
-            control: { type: 'select' },
-            defaultValue: { summary: 'horizontal' },
-            description: 'DataList 방향',
-        },
-    },
-};
-export default meta;
-export var Default = function (_a) {
-    var args = __rest(_a, []);
-    return (<DataList {...args}>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>상태</DataListLabel>
-      <DataListValue {...args}>
-        <Badge appearance="soft" {...args}>
-          배지
-        </Badge>
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        <Button {...args}>버튼</Button>
-      </DataListValue>
-    </DataListItem>
-  </DataList>);
-};
-export var Orientation = function (_a) {
-    var args = __rest(_a, []);
-    return (<DataList {...args} orientation={'vertical'}>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>상태</DataListLabel>
-      <DataListValue {...args}>
-        <Badge appearance="soft" {...args}>
-          배지
-        </Badge>
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        <Button {...args}>버튼</Button>
-      </DataListValue>
-    </DataListItem>
-  </DataList>);
-};
-export var Scaling = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-7">
-    {scalingOptions.map(function (scaling) { return (<DataList {...args} key={scaling} scaling={scaling}>
-        <DataListItem {...args}>
-          <DataListLabel {...args}>{scaling}</DataListLabel>
-          <DataListValue {...args}>
-            텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-          </DataListValue>
-        </DataListItem>
-        <DataListItem {...args}>
-          <DataListLabel {...args}>{scaling}</DataListLabel>
-          <DataListValue {...args}>
-            텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-          </DataListValue>
-        </DataListItem>
-      </DataList>); })}
-  </div>);
-};
-export var Size = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-7">
-    <DataList size={'small'}>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>small</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>small</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-    </DataList>
-
-    <DataList size={'medium'}>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>medium</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>medium</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-    </DataList>
-
-    <DataList size={'large'}>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>large</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>large</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-    </DataList>
-  </div>);
-};