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

package/dist/stories/callout/Callout.stories.jsx

@@ -1,205 +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 { Callout, CalloutIcon, CalloutText } from 'components/Callout';
-import { Text } from 'Typography/Text';
-import { radiusOptions, scalingOptions, commonArgTypes, sizeOptions, appearanceOptions, } from '../../constants';
-var meta = {
-    title: 'Component/Callout',
-    component: Callout,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: '중요한 정보나 경고를 강조하기 위해 사용되는 알림 박스 컴포넌트',
-            },
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'Callout border 둥굴기' }),
-        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: 'Callout 크기' }),
-        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Callout 비율' }),
-        color: {
-            table: {
-                category: 'Props',
-                type: { summary: ['danger', 'warning', 'success', 'information'].join(' | ') },
-            },
-            options: ['danger', 'warning', 'success', 'information'],
-            control: { type: 'select' },
-            defaultValue: { summary: 'information' },
-            description: 'Toast 색',
-        },
-        contentText: __assign(__assign({}, commonArgTypes.basicText), { description: 'Callout 안에 들어가는 텍스트' }),
-        appearance: __assign(__assign({}, commonArgTypes.appearance), { table: {
-                category: 'Props',
-                type: {
-                    summary: appearanceOptions
-                        .filter(function (option) { return option !== 'classic' && option !== 'ghost' && option !== 'solid'; })
-                        .join(' | '),
-                },
-            }, description: 'Callout 스타일', options: appearanceOptions.filter(function (option) { return option !== 'classic' && option !== 'ghost' && option !== 'solid'; }) }),
-    },
-};
-export default meta;
-export var Default = function (_a) {
-    var args = __rest(_a, []);
-    return (<Callout {...args}>
-    <CalloutIcon {...args} iconType="information"/>
-    <CalloutText {...args}>시스템 점검이 예정되어 있습니다.</CalloutText>
-  </Callout>);
-};
-export var Radius = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<Callout {...args} radius={radius} key={radius}>
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>시스템 점검이 예정되어 있습니다.</CalloutText>
-      </Callout>); })}
-  </div>);
-};
-export var Size = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-5">
-    <Callout {...args} size={'small'}>
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>
-        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
-      </CalloutText>
-    </Callout>
-
-    <Callout {...args}>
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>
-        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
-      </CalloutText>
-    </Callout>
-
-    <Callout {...args} size="large">
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>
-        새로운 업데이트가 있습니다. 최신 버전을 다운로드하여 사용해 주세요.
-      </CalloutText>
-    </Callout>
-  </div>);
-};
-export var Color = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <Callout {...args} color="information">
-      <CalloutIcon {...args} iconType="information"/>
-      <CalloutText {...args}>정보 메세지</CalloutText>
-    </Callout>
-
-    <Callout {...args} color="danger">
-      <CalloutIcon {...args} iconType="danger"/>
-      <CalloutText {...args}>위험 메세지</CalloutText>
-    </Callout>
-
-    <Callout {...args} color="warning">
-      <CalloutIcon {...args} iconType="warning"/>
-      <CalloutText {...args}>경고 메세지</CalloutText>
-    </Callout>
-
-    <Callout {...args} color="success">
-      <CalloutIcon {...args} iconType="success"/>
-      <CalloutText {...args}>성공 메세지</CalloutText>
-    </Callout>
-  </div>);
-};
-export var Appearance = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <div className="flex flex-col space-y-1">
-      <Text>Soft(기준)</Text>
-      <Callout {...args} appearance="soft">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Surface</Text>
-      <Callout {...args} appearance="surface">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Outline</Text>
-      <Callout {...args} appearance="outline">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>새로운 업데이트가 있습니다. </CalloutText>
-      </Callout>
-    </div>
-  </div>);
-};
-export var Scaling = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-5">
-    {scalingOptions.map(function (scaling) { return (<Callout {...args} scaling={scaling} key={scaling}>
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>관리자에게 문의하세요.</CalloutText>
-      </Callout>); })}
-  </div>);
-};
-export var IconTypes = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex space-x-5">
-    <div className="flex flex-col space-y-1">
-      <Text>Danger</Text>
-      <Callout {...args} color="danger">
-        <CalloutIcon {...args} iconType="danger" color="danger"/>
-        <CalloutText {...args} color="danger">
-          위험 아이콘
-        </CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Warning</Text>
-      <Callout {...args} color="warning">
-        <CalloutIcon {...args} iconType="warning"/>
-        <CalloutText {...args}>경고 아이콘</CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Success</Text>
-      <Callout {...args} color="success">
-        <CalloutIcon {...args} iconType="success"/>
-        <CalloutText {...args}>성공 아이콘</CalloutText>
-      </Callout>
-    </div>
-    <div className="flex flex-col space-y-1">
-      <Text>Info</Text>
-      <Callout {...args} color="information">
-        <CalloutIcon {...args} iconType="information"/>
-        <CalloutText {...args}>정보 아이콘</CalloutText>
-      </Callout>
-    </div>
-  </div>);
-};

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>);
-};

package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx

@@ -1,170 +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, radiusOptions } from '../../constants';
-import { ChevronDownIcon } from '@radix-ui/react-icons';
-import { DropdownMenu, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuLabel, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, } from '../../components/DropdownMenu/index';
-import Button from 'components/Button';
-var meta = {
-    title: 'Component/DropdownMenu',
-    component: DropdownMenu,
-    parameters: {
-        layout: 'centered',
-        themes: {
-            themeOverride: 'dark',
-        },
-        docs: {
-            description: {
-                component: '버튼을 클릭하여 세부항목을 확인하고 하나의 항목을 선택하는 기능',
-            },
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'dropdownMenu 둥글기' }),
-        size: __assign(__assign({}, commonArgTypes.size), { table: {
-                category: 'Props',
-                type: {
-                    summary: ['small', 'medium'].join(' | '),
-                },
-            }, options: ['small', 'medium'], description: 'dropdownMenu 크기' }),
-        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'dropdownMenu scaling' }),
-        color: __assign(__assign({}, commonArgTypes.color), { description: 'dropdownMenu color' }),
-        appearance: __assign(__assign({}, commonArgTypes.appearance), { table: {
-                category: 'Props',
-                type: { summary: ['solid', 'soft'].join(' | ') },
-            }, options: ['solid', 'soft'] }),
-    },
-};
-export default meta;
-export var Default = function (_a) {
-    var args = __rest(_a, []);
-    return (<DropdownMenu>
-      <DropdownMenuTrigger {...args}>
-        <Button>
-          Options
-          <ChevronDownIcon />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent {...args}>
-        <DropdownMenuLabel {...args}>라벨</DropdownMenuLabel>
-        <DropdownMenuItem {...args} shortcut="⌘ E">
-          기본 아이템
-        </DropdownMenuItem>
-        <DropdownMenuItem {...args} disabled>
-          사용불가 아이템
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem checked {...args}>
-          체크박스1
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked={false} {...args}>
-          체크박스2
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuRadioGroup value="option1">
-          <DropdownMenuRadioItem value="option1" {...args}>
-            라디오1
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="option2" {...args}>
-            라디오2
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger {...args}>More Menu</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent {...args}>
-            <DropdownMenuItem {...args}>project</DropdownMenuItem>
-            <DropdownMenuItem {...args}>folder</DropdownMenuItem>
-
-            <DropdownMenuSeparator />
-            <DropdownMenuItem {...args}>options</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-      </DropdownMenuContent>
-    </DropdownMenu>);
-};
-export var Radius = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {radiusOptions.map(function (radius) { return (<DropdownMenu key={radius}>
-        <DropdownMenuTrigger {...args} radius={radius}>
-          <Button>
-            {radius}
-            <ChevronDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent {...args} radius={radius}>
-          <DropdownMenuItem {...args} radius={radius}>
-            메뉴1
-          </DropdownMenuItem>
-          <DropdownMenuItem {...args} radius={radius}>
-            메뉴2
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>); })}
-  </div>);
-};
-export var Size = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['small', 'medium'].map(function (size) { return (<DropdownMenu key={size}>
-        <DropdownMenuTrigger {...args} size={size}>
-          <Button>
-            {size}
-            <ChevronDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent {...args} size={size}>
-          <DropdownMenuItem {...args} size={size}>
-            메뉴1
-          </DropdownMenuItem>
-          <DropdownMenuItem {...args} size={size}>
-            메뉴2
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>); })}
-  </div>);
-};
-export var Appearance = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['solid', 'soft'].map(function (appearance) { return (<DropdownMenu key={appearance}>
-        <DropdownMenuTrigger {...args} appearance={appearance}>
-          <Button>
-            {appearance}
-            <ChevronDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent {...args}>
-          <DropdownMenuItem {...args} appearance={appearance}>
-            메뉴1
-          </DropdownMenuItem>
-          <DropdownMenuItem {...args} appearance={appearance}>
-            메뉴2
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>); })}
-  </div>);
-};

package/dist/stories/scroll-area/ScrollArea.stories.jsx

@@ -1,123 +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, sizeOptions } from '../../constants';
-import { ScrollArea } from '../../components/ScrollArea';
-import { Header } from 'Typography/Header';
-import { Text } from 'Typography/Text';
-var meta = {
-    title: 'Component/ScrollArea',
-    component: ScrollArea,
-    parameters: {
-        layout: 'centered',
-        themes: {
-            themeOverride: 'dark',
-        },
-        docs: {
-            description: {
-                component: '스크롤 가능 영역',
-            },
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'scrollArea 둥글기' }),
-        size: __assign(__assign({}, commonArgTypes.size), { table: {
-                category: 'Props',
-                type: {
-                    summary: sizeOptions
-                        .filter(function (value) { return value != 'x-small' && value != 'x-large'; })
-                        .join(' | '),
-                },
-            }, options: sizeOptions.filter(function (value) { return value != 'x-small' && value != 'x-large'; }), description: 'scrollArea 크기' }),
-    },
-};
-export default meta;
-export var Default = function (_a) {
-    var args = __rest(_a, []);
-    return (<ScrollArea type="always" scrollbars="vertical" className="h-[180px]" {...args}>
-    <div className="p-2 pr-8">
-      <Header size={'4'} mb={'2'} trim={'start'}>
-        Principles of the typographic craft
-      </Header>
-      <div className="flex flex-col gap-4">
-        <Text as="p">
-          Three fundamental aspects of typography are legibility, readability, and aesthetics.
-          Although in a non-technical sense “legible” and “readable” are often used synonymously,
-          typographically they are separate but related concepts.
-        </Text>
-
-        <Text as="p">
-          Legibility describes how easily individual characters can be distinguished from one
-          another. It is described by Walter Tracy as “the quality of being decipherable and
-          recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to
-          distinguish at small sizes, this is a problem of legibility.
-        </Text>
-
-        <Text as="p">
-          Typographers are concerned with legibility insofar as it is their job to select the
-          correct font to use. Brush Script is an example of a font containing many characters that
-          might be difficult to distinguish. The selection of cases influences the legibility of
-          typography because using only uppercase letters (all-caps) reduces legibility.
-        </Text>
-      </div>
-    </div>
-  </ScrollArea>);
-};
-export var Type = function (_a) {
-    var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-2">
-    <ScrollArea type="always" scrollbars="vertical" className="h-[150px]" {...args}>
-      <div className="flex flex-col p-2 pr-8 gap-4">
-        <Text size="2">
-          Three fundamental aspects of typography are legibility, readability, and aesthetics.
-          Although in a non-technical sense legible and readable are often used synonymously,
-          typographically they are separate but related concepts.
-        </Text>
-
-        <Text size="2">
-          Legibility describes how easily individual characters can be distinguished from one
-          another. It is described by Walter Tracy as the quality of being decipherable and
-          recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
-          at small sizes, this is a problem of legibility.
-        </Text>
-      </div>
-    </ScrollArea>
-
-    <ScrollArea type="always" scrollbars="horizontal" className="h-[150px]" {...args}>
-      <div className="gap-4 p-2 w-[700px]">
-        <Text size="2">
-          Three fundamental aspects of typography are legibility, readability, and aesthetics.
-          Although in a non-technical sense legible and readable are often used synonymously,
-          typographically they are separate but related concepts.
-        </Text>
-
-        <Text size="2">
-          Legibility describes how easily individual characters can be distinguished from one
-          another. It is described by Walter Tracy as the quality of being decipherable and
-          recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
-          at small sizes, this is a problem of legibility.
-        </Text>
-      </div>
-    </ScrollArea>
-  </div>);
-};