@tripie-pyotato/design-system 0.0.0

package/dist/src/components/Chip/chip.stories.jsx

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccentedChip = exports.RestaurantChip = exports.Disabled = exports.Selected = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Chip_1 = require("./Chip");
+var meta = {
+    title: 'tripie-ui/Chip',
+    component: Chip_1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: '칩 컴포넌트입니다.accentedChip은 호버 시 애니메이션으로 강조됩니다.',
+            },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Chip',
+    args: {
+        children: 'Default',
+    },
+};
+exports.Selected = {
+    name: 'Chip.Selected',
+    args: {
+        children: 'Selected',
+        selected: true,
+    },
+};
+exports.Disabled = {
+    name: 'Chip.Disabled',
+    args: {
+        children: 'Disabled',
+        disabled: true,
+    },
+};
+exports.RestaurantChip = {
+    name: 'Chip.Restaurant',
+    args: {
+        children: '1',
+        className: 'restaurant',
+    },
+};
+exports.AccentedChip = {
+    name: 'Chip.Accented',
+    render: function () { return <Chip_1.default.Accented>accented Chip</Chip_1.default.Accented>; },
+};

package/dist/src/components/Chip/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./Chip"), exports);
+var Chip_1 = require("./Chip");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Chip_1.default; } });

package/dist/src/components/ChipMarker/ChipMarker.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var react_1 = require("react");
+var Chip_1 = require("../Chip/Chip");
+var chip_marker_module_scss_1 = require("./chip-marker.module.scss");
+var cx = bind_1.default.bind(chip_marker_module_scss_1.default);
+var ChipMarker = function (_a) {
+    var className = _a.className, children = _a.children, selected = _a.selected;
+    var marker = (0, react_1.useMemo)(function () {
+        return +children.split('-')[1] + 1;
+    }, [children]);
+    return (<Chip_1.default className={cx('marker', className)} selected={selected}>
+      {marker}
+    </Chip_1.default>);
+};
+exports.default = ChipMarker;

package/dist/src/components/ChipMarker/chip.stories.jsx

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondChip = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var ChipMarker_1 = require("./ChipMarker");
+var meta = {
+    title: 'tripie-ui/Chip/Marker',
+    component: ChipMarker_1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: '지도에 표시되는 Marker Chip 컴포넌트입니다. 호버 및 선택 시 색상이 강조됩니다.',
+            },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Default',
+    args: {
+        children: '0-0',
+    },
+};
+exports.SecondChip = {
+    name: 'Second',
+    args: {
+        children: '0-1',
+    },
+};

package/dist/src/components/ChipMarker/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./ChipMarker"), exports);
+var ChipMarker_1 = require("./ChipMarker");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return ChipMarker_1.default; } });

package/dist/src/components/Divider/Divider.jsx

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var variants_1 = require("../../shared/variants");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var constants_1 = require("./constants");
+var divider_module_scss_1 = require("./divider.module.scss");
+var cx = bind_1.default.bind(divider_module_scss_1.default);
+var Divider = function (_a) {
+    var className = _a.className, current = _a.current, _b = _a.variants, variants = _b === void 0 ? variants_1.ACCORDIAN_VARIANTS.DIVIDER : _b;
+    return <framer_motion_1.motion.div variants={variants} animate={current} className={cx('divider', className)}/>;
+};
+var ArticleDivider = function (_a) {
+    var item = _a.item;
+    return (<TripieContainer_1.default applyMargin="top-bottom" margin={constants_1.default[item.type]}>
+      <Divider className={cx('divider', "divider-".concat(item.type))}/>
+    </TripieContainer_1.default>);
+};
+Divider.Article = ArticleDivider;
+exports.default = Divider;

package/dist/src/components/Divider/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var HR_MARGINS = {
+    hr1: 'l',
+    hr2: 'm',
+    hr3: 'm',
+    hr4: 'sm',
+    hr5: 'xsm',
+};
+exports.default = HR_MARGINS;

package/dist/src/components/Divider/divider.stories.jsx

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleDivider5 = exports.ArticleDivider4 = exports.ArticleDivider3 = exports.ArticleDivider2 = exports.ArticleDivider1 = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Divider_1 = require("./Divider");
+var meta = {
+    title: 'tripie-ui/Divider',
+    component: Divider_1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Divider.Default',
+    // args: {},
+    render: function () { return (<>
+      content before
+      <Divider_1.default />
+      content after
+    </>); },
+};
+exports.ArticleDivider1 = {
+    name: 'Divider.Article.hr1',
+    render: function () { return (<>
+      content before
+      <Divider_1.default.Article item={{ type: 'hr1' }}/>
+      content after
+    </>); },
+};
+exports.ArticleDivider2 = {
+    name: 'Divider.Article.hr2',
+    render: function () { return (<>
+      content before
+      <Divider_1.default.Article item={{ type: 'hr2' }}/>
+      content after
+    </>); },
+};
+exports.ArticleDivider3 = {
+    name: 'Divider.Article.hr3',
+    render: function () { return (<>
+      content before
+      <Divider_1.default.Article item={{ type: 'hr3' }}/>
+      content after
+    </>); },
+};
+exports.ArticleDivider4 = {
+    name: 'Divider.Article.hr4',
+    render: function () { return (<>
+      content before
+      <Divider_1.default.Article item={{ type: 'hr4' }}/>
+      content after
+    </>); },
+};
+exports.ArticleDivider5 = {
+    name: 'Divider.Article.hr5',
+    render: function () { return (<>
+      content before
+      <Divider_1.default.Article item={{ type: 'hr5' }}/>
+      content after
+    </>); },
+};

package/dist/src/components/Divider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./Divider"), exports);
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Divider_1.default; } });

package/dist/src/components/Headings/Headings.jsx

@@ -0,0 +1,37 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var Text_1 = require("../Text/Text");
+var headings_module_scss_1 = require("./headings.module.scss");
+var style = bind_1.default.bind(headings_module_scss_1.default);
+var Heading = function (_a) {
+    var children = _a.children, className = _a.className;
+    return <Text_1.default className={style('default', className)}>{children}</Text_1.default>;
+};
+var H1 = function (_a) {
+    var children = _a.children, className = _a.className;
+    return <h1 className={style('h1', className)}>{children}</h1>;
+};
+var H2 = function (_a) {
+    var children = _a.children, className = _a.className;
+    return <h2 className={style('h2', className)}>{children}</h2>;
+};
+var H3 = function (_a) {
+    var children = _a.children, className = _a.className;
+    return <h3 className={style('h3', className)}>{children}</h3>;
+};
+var H4 = function (_a) {
+    var children = _a.children, className = _a.className;
+    return <h4 className={style('h4', className)}>{children}</h4>;
+};
+var Headline = function (_a) {
+    var children = _a.children, className = _a.className;
+    return <h4 className={style('headline', className)}>{children}</h4>;
+};
+Heading.Headline = Headline;
+Heading.H1 = H1;
+Heading.H2 = H2;
+Heading.H3 = H3;
+Heading.H4 = H4;
+exports.default = Heading;

package/dist/src/components/Headings/headings.stories.jsx

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadlineSecondary = exports.Headline = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Headings_1 = require("./Headings");
+var meta = {
+    title: 'tripie-ui/Typography/Headings',
+    tags: ['autodocs'],
+    component: Headings_1.default,
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.H1 = {
+    name: 'H1',
+    decorators: [
+        function (story) {
+            return story().type.H1({
+                children: 'Heading 1',
+            });
+        },
+    ],
+};
+exports.H2 = {
+    name: 'H2',
+    decorators: [
+        function (story) {
+            return story().type.H2({
+                children: 'Heading 2',
+            });
+        },
+    ],
+};
+exports.H3 = {
+    name: 'H3',
+    decorators: [
+        function (story) {
+            return story().type.H3({
+                children: 'Heading 3',
+            });
+        },
+    ],
+};
+exports.H4 = {
+    name: 'H4',
+    decorators: [
+        function (story) {
+            return story().type.H4({
+                children: 'Heading 4',
+            });
+        },
+    ],
+};
+exports.Headline = {
+    name: 'Headline',
+    decorators: [
+        function (story) {
+            return story().type.H4({
+                children: 'Headline',
+            });
+        },
+    ],
+};
+exports.HeadlineSecondary = {
+    name: 'Headline secondary',
+    decorators: [
+        function (story) {
+            return story().type.H4({
+                children: 'Headline',
+                className: 'secondary',
+            });
+        },
+    ],
+};

package/dist/src/components/Headings/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./Headings"), exports);
+var Headings_1 = require("./Headings");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Headings_1.default; } });

package/dist/src/components/Link/Link.jsx

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var link_1 = require("next/link");
+var Text_1 = require("../Text");
+var link_module_scss_1 = require("./link.module.scss");
+var style = bind_1.default.bind(link_module_scss_1.default);
+function UnstyledLink(_a) {
+    var children = _a.children, className = _a.className, href = _a.href, role = _a.role, props = __rest(_a, ["children", "className", "href", "role"]);
+    return (<link_1.default href={href} className={style('link', className)} role={role} {...props}>
+      <Text_1.default>{children}</Text_1.default>
+    </link_1.default>);
+}
+exports.default = UnstyledLink;

package/dist/src/components/Link/List.spec.jsx

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var vitest_1 = require("vitest");
+var Link_1 = require("./Link");
+// describe('basic math', () => {
+//   it('1+1=2', () => {
+//     expect(1 + 1).toBe(2);
+//   });
+// });
+(0, vitest_1.describe)('UnstyledLink Component', function () {
+    (0, vitest_1.beforeAll)(function () {
+        // ✅ Ensure `document` is available before running tests
+        global.document = window.document;
+    });
+    (0, vitest_1.it)('renders the link with the correct text and href', function () {
+        (0, react_1.render)(<Link_1.default href="/home">Go Home</Link_1.default>);
+        var linkElement = react_1.screen.getByRole('link', { name: /go home/i });
+        (0, vitest_1.expect)(linkElement).toBeInTheDocument();
+        (0, vitest_1.expect)(linkElement).toHaveAttribute('href', '/home');
+    });
+});

package/dist/src/components/Link/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./Link"), exports);
+var Link_1 = require("./Link");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Link_1.default; } });

package/dist/src/components/Link/link.stories.jsx

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledLink = exports.AriaSelectedFalse = exports.AriaSelectedTrue = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Link_1 = require("./Link");
+var meta = {
+    title: 'tripie-ui/Typography/Link',
+    tags: ['autodocs'],
+    component: Link_1.default,
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = (context.globals.theme || mode)[0];
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Default',
+    args: {
+        children: '기본 링크',
+        href: '#',
+    },
+};
+exports.AriaSelectedTrue = {
+    name: 'AriaSelectedTrue',
+    args: {
+        children: 'aria selected',
+        href: '#',
+        'aria-selected': true,
+    },
+};
+exports.AriaSelectedFalse = {
+    name: 'AriaSelectedFalse',
+    args: {
+        children: 'aria not selected',
+        href: '#',
+        'aria-selected': false,
+    },
+};
+exports.DisabledLink = {
+    name: 'DisabledLink',
+    args: {
+        children: 'disabled link',
+        href: '#',
+        'aria-disabled': true,
+    },
+};

package/dist/src/components/List/List.jsx

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+var bind_1 = require("classnames/bind");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var list_module_scss_1 = require("./list.module.scss");
+var cx = bind_1.default.bind(list_module_scss_1.default);
+var List = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.rowView, rowView = _b === void 0 ? false : _b;
+    return (<TripieContainer_1.default margin="m" className={cx(className)} applyMargin="top-bottom">
+      <ul className={cx('list', rowView ? 'row-view' : '')}>{children}</ul>
+    </TripieContainer_1.default>);
+};
+var ListItem = function (_a) {
+    var children = _a.children, _b = _a.justifyContent, justifyContent = _b === void 0 ? 'flex-start' : _b, _c = _a.alignItems, alignItems = _c === void 0 ? 'normal' : _c, _d = _a.gap, gap = _d === void 0 ? 'default' : _d, className = _a.className;
+    return (<li className={cx('list-item', "justify-content-".concat(justifyContent), "align-items-".concat(alignItems), "gap-".concat(gap), className)}>
+      {children}
+    </li>);
+};
+exports.ListItem = ListItem;
+var GridList = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (<TripieContainer_1.default margin="m" className={cx(className)} applyMargin="top-bottom">
+      <ul className={cx('list', 'wrap')}>{children}</ul>
+    </TripieContainer_1.default>);
+};
+List.Item = exports.ListItem;
+List.Grid = GridList;
+exports.default = List;

package/dist/src/components/List/list-item.stories.jsx

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Icon_1 = require("../TripieIcon/Icon");
+var List_1 = require("./List");
+var meta = {
+    title: 'tripie-ui/List/Item',
+    component: List_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        alignItems: {
+            options: ['normal', 'center', 'start', 'stretch', 'end'],
+            control: { type: 'radio' },
+        },
+        justifyContent: {
+            options: ['flex-start', 'center', 'flex-end'],
+            control: { type: 'radio' },
+        },
+        gap: {
+            options: ['default', 'l'],
+            control: { type: 'radio' },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+    parameters: { docs: { description: { component: '' } } },
+};
+exports.Default = {
+    name: 'Default',
+    render: function (args) {
+        return (<List_1.default.Item alignItems="normal" {...args}>
+        <Icon_1.default />
+        list item
+      </List_1.default.Item>);
+    },
+    args: {
+        alignItems: 'normal',
+        justifyContent: 'flex-start',
+        gap: 'default',
+    },
+    argTypes: {
+        alignItems: {
+            control: 'select',
+            defaultValue: 'normal',
+            description: 'flex 속성 align-items과 유사하게 동작, 직계 자식들을 교차축에 따라 정렬',
+            table: {
+                type: { summary: "'normal' | 'center' |'start' | 'stretch' | 'end'" },
+                defaultValue: { summary: 'normal' },
+            },
+        },
+        justifyContent: {
+            control: 'select',
+            defaultValue: 'flex-start',
+            description: 'flex 속성 justify-content과 유사하게 동작, "flex-start" 설정 시 플렉스 항목들을 축의 시작 부분에 정렬, "center" 설정 시 항목들을 축의 중심 부분에 정렬, "flex-end" 정렬 시 플렉스 항목들을 축의 끝 부분에 정렬',
+            table: {
+                type: { summary: "'flex-start' | 'center' | 'flex-end'" },
+                defaultValue: { summary: 'flex-start' },
+            },
+        },
+        gap: {
+            control: 'select',
+            defaultValue: 'default',
+            description: 'flex gap 속성을 "default"로 설정시 0.5rem, "l"로 설정 시 1rem',
+            table: {
+                type: { summary: "'default' | 'l'" },
+                defaultValue: { summary: 'default' },
+            },
+        },
+    },
+};
+exports.default = meta;