pds-dev-kit-web-test 0.1.4 → 0.1.5

package/dist/src/desktop/components/BodyTextGroup/BodyTextGroup.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Both = exports.WithContent = exports.WithDescription = exports.TitleOnly = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BodyTextGroup_1 = __importDefault(require("./BodyTextGroup"));
+exports.default = {
+    title: 'desktop/components/BodyTextGroup',
+    component: BodyTextGroup_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화된 BodyTextGroup 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        titleStyleTheme: {
+            description: '타이틀 텍스트의 스타일을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        titleText: {
+            description: '표시할 타이틀 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        descText: {
+            description: '상세 내용을 보여주는 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        contentText: {
+            description: '본문 내용을 보여주는 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        titleTextWordBreak: {
+            description: 'titleText의 줄바꿈 형식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        descTextWordBreak: {
+            description: 'descText의 줄바꿈 형식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        contentTextWordBreak: {
+            description: 'contentText의 줄바꿈 형식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        contentFontWeight: {
+            description: '본문의 굵기를 나타냅니다.',
+            control: { type: 'inline-radio' }
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(BodyTextGroup_1.default, __assign({}, args), void 0); };
+var defaultArgs = {
+    titleText: 'pApp 활성화',
+    titleTextWordBreak: 'keep_all',
+    descTextWordBreak: 'keep_all',
+    contentTextWordBreak: 'keep_all',
+    contentFontWeight: 'regular'
+};
+exports.TitleOnly = Template.bind({});
+exports.TitleOnly.args = __assign(__assign({}, defaultArgs), { contentFontWeight: 'regular' });
+exports.WithDescription = Template.bind({});
+exports.WithDescription.args = __assign(__assign({}, defaultArgs), { descText: "pApp\uC744 \uD65C\uC131\uD654\uD569\uB2C8\uB2E4. \uAD6C\uB3C5\uC790\uC5D0\uAC8C \uD45C\uC2DC\uD558\uAE30 \uC704\uD574\uC11C\uB294, \uBC18\uB4DC\uC2DC \uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.\npApp\uC5D0\uC11C \uD45C\uC2DC\uD560 \uCF58\uD150\uCE20 \uC5C5\uB85C\uB4DC\uB098 \uBAA8\uB4E0 \uC124\uC815\uC774 \uB05D\uB0AC\uB2E4\uBA74, \uD65C\uC131\uD654 \uC0C1\uD0DC\uB85C \uBCC0\uACBD\uD574 \uC8FC\uC138\uC694.\n\uAE30\uBCF8 pApp\uC73C\uB85C \uC124\uC815\uB41C pApp\uC740 \uBE44\uD65C\uC131\uD654\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." });
+exports.WithContent = Template.bind({});
+exports.WithContent.args = __assign(__assign({}, defaultArgs), { contentText: "* \uBE44\uD65C\uC131\uD654 \uC2DC\uC5D0\uB3C4 \uB370\uC774\uD130\uB294 \uC804\uD600 \uC0AD\uC81C\uB418\uC9C0 \uC54A\uC73C\uBA70, \uC0AC\uC6A9\uB7C9\uC5D0 \uC758\uD55C \uC694\uAE08\uC740 \uBD80\uACFC\uB429\uB2C8\uB2E4.\n  \uC55E\uC73C\uB85C\uB3C4 \uC774\uC6A9\uD558\uC9C0 \uC54A\uC73C\uC2E4 \uC608\uC815\uC774\uB77C\uBA74 [pApp \uC124\uCE58 \uBC0F \uC81C\uAC70] \uBA54\uB274\uC5D0\uC11C pApp\uC744 \uC644\uC804\uD788 \uC81C\uAC70\uD574 \uC8FC\uC138\uC694." });
+exports.Both = Template.bind({});
+exports.Both.args = __assign(__assign({}, defaultArgs), { descText: "pApp\uC744 \uD65C\uC131\uD654\uD569\uB2C8\uB2E4. \uAD6C\uB3C5\uC790\uC5D0\uAC8C \uD45C\uC2DC\uD558\uAE30 \uC704\uD574\uC11C\uB294, \uBC18\uB4DC\uC2DC \uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.\npApp\uC5D0\uC11C \uD45C\uC2DC\uD560 \uCF58\uD150\uCE20 \uC5C5\uB85C\uB4DC\uB098 \uBAA8\uB4E0 \uC124\uC815\uC774 \uB05D\uB0AC\uB2E4\uBA74, \uD65C\uC131\uD654 \uC0C1\uD0DC\uB85C \uBCC0\uACBD\uD574 \uC8FC\uC138\uC694.\n\uAE30\uBCF8 pApp\uC73C\uB85C \uC124\uC815\uB41C pApp\uC740 \uBE44\uD65C\uC131\uD654\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.", contentText: "* \uBE44\uD65C\uC131\uD654 \uC2DC\uC5D0\uB3C4 \uB370\uC774\uD130\uB294 \uC804\uD600 \uC0AD\uC81C\uB418\uC9C0 \uC54A\uC73C\uBA70, \uC0AC\uC6A9\uB7C9\uC5D0 \uC758\uD55C \uC694\uAE08\uC740 \uBD80\uACFC\uB429\uB2C8\uB2E4.\n\uC55E\uC73C\uB85C\uB3C4 \uC774\uC6A9\uD558\uC9C0 \uC54A\uC73C\uC2E4 \uC608\uC815\uC774\uB77C\uBA74 [pApp \uC124\uCE58 \uBC0F \uC81C\uAC70] \uBA54\uB274\uC5D0\uC11C pApp\uC744 \uC644\uC804\uD788 \uC81C\uAC70\uD574 \uC8FC\uC138\uC694." });

package/dist/src/desktop/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 export declare type CardProps = {
     titleText?: PDSTextType;
     descText?: PDSTextType;

package/dist/src/desktop/components/Card/Card.js

@@ -3,11 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
@@ -18,14 +29,9 @@ function Card(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_CardGroups, { "x-pds-name": "Card", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectState: selectState, onClick: handleClick },
-        imageIconMode !== 'none' && (react_1.default.createElement(S_ImageIconModeBox, null, imageIconMode === 'image' && imageSrc && (react_1.default.createElement(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc })))),
-        react_1.default.createElement(S_Content, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
-            descText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })))));
+    return ((0, jsx_runtime_1.jsxs)(S_CardGroups, __assign({ "x-pds-name": "Card", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectState: selectState, onClick: handleClick }, { children: [imageIconMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_ImageIconModeBox, { children: imageIconMode === 'image' && imageSrc && ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc }, void 0)) }, void 0)), (0, jsx_runtime_1.jsxs)(S_Content, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), descText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0))] }, void 0)] }), void 0));
 }
-var S_CardGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  min-width: 144px;\n  position: relative;\n\n  &::after {\n    box-sizing: border-box;\n    border-radius: 16px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  min-width: 144px;\n  position: relative;\n\n  &::after {\n    box-sizing: border-box;\n    border-radius: 16px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])), function (_a) {
+var S_CardGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  min-width: 144px;\n  position: relative;\n\n  &::after {\n    border-radius: 16px;\n    box-shadow: ", ";\n    box-sizing: border-box;\n    content: '';\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  min-width: 144px;\n  position: relative;\n\n  &::after {\n    border-radius: 16px;\n    box-shadow: ", ";\n    box-sizing: border-box;\n    content: '';\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_card_base;
 }, function (_a) {

package/dist/src/desktop/components/Card/Card.stories.d.ts

@@ -0,0 +1,6 @@
+import Card from './Card';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof Card>;
+export default _default;
+export declare const DefaultCard: ComponentStory<typeof Card>;
+export declare const ImageCard: ComponentStory<typeof Card>;

package/dist/src/desktop/components/Card/Card.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCard = exports.DefaultCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var Card_1 = __importDefault(require("./Card"));
+exports.default = {
+    title: 'desktop/components/Card',
+    component: Card_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop 환경에 최적화된 Card 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        titleText: {
+            description: '주요 텍스트입니다.',
+            control: { type: 'text' }
+        },
+        descText: {
+            description: '상세 설명 텍스트입니다.',
+            control: { type: 'text' }
+        },
+        imageIconMode: {
+            description: '이미지 또는 아이콘 사용 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        imageSrc: {
+            description: '이미지 사용 시 주소 값입니다.',
+            control: { type: 'text' }
+        },
+        selectState: {
+            description: '상태를 결정합니다. *clickMode가 select인 경우 사용가능합니다.',
+            control: { type: 'none' }
+        },
+        onClick: {
+            action: 'onClick'
+        }
+    }
+};
+var S_CardWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
+var Template = function (args) {
+    var _a = (0, react_1.useState)('card1'), selectedCard = _a[0], setSelectedCard = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(S_CardWrapper, { children: [(0, jsx_runtime_1.jsx)(Card_1.default, __assign({}, args, { selectState: selectedCard === 'card1' ? 'selected' : 'unselected', onClick: function () { return setSelectedCard('card1'); } }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(Card_1.default, __assign({}, args, { selectState: selectedCard === 'card2' ? 'selected' : 'unselected', onClick: function () { return setSelectedCard('card2'); } }), void 0)] }, void 0));
+};
+exports.DefaultCard = Template.bind({});
+exports.DefaultCard.args = {
+    titleText: 'Card',
+    descText: '상세 설명 텍스트입니다.',
+    imageIconMode: 'none'
+};
+exports.ImageCard = Template.bind({});
+exports.ImageCard.args = {
+    titleText: 'Card',
+    descText: '상세 설명 텍스트입니다.',
+    imageIconMode: 'image',
+    imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80'
+};
+var templateObject_1;

package/dist/src/desktop/components/CardList/CardList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 declare type CardListProps = {
     children: React.ReactNode;
     rows?: number;

package/dist/src/desktop/components/CardList/CardList.js

@@ -3,15 +3,26 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function CardList(_a) {
     var children = _a.children, rows = _a.rows, columns = _a.columns, rowGap = _a.rowGap, columnGap = _a.columnGap;
-    return (react_1.default.createElement(S_CardList, { "x-pds-name": "CardList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, children));
+    return ((0, jsx_runtime_1.jsx)(S_CardList, __assign({ "x-pds-name": "CardList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, { children: children }), void 0));
 }
 var S_CardList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var rows = _a.rows;

package/dist/src/desktop/components/CardList/CardList.stories.d.ts

@@ -0,0 +1,6 @@
+import CardList from './CardList';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof CardList>;
+export default _default;
+export declare const DefaultCardList: ComponentStory<typeof CardList>;
+export declare const MultiCardList: ComponentStory<any>;

package/dist/src/desktop/components/CardList/CardList.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiCardList = exports.DefaultCardList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Card_1 = __importDefault(require("../Card/Card"));
+var Card_stories_1 = require("../Card/Card.stories");
+var CardList_1 = __importDefault(require("./CardList"));
+exports.default = {
+    title: 'desktop/components/CardList',
+    component: CardList_1.default,
+    subcomponents: { Card: Card_1.default },
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 CardList 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        children: {
+            description: 'ContextList에 들어갈 자식 요소입니다. 현재는 `Card`만 존재합니다.'
+        },
+        rows: {
+            description: 'Grid에 적용할 행의 값입니다.',
+            control: { type: 'number' }
+        },
+        columns: {
+            description: 'Grid에 적용할 열의 값입니다.',
+            control: { type: 'number' }
+        },
+        rowGap: {
+            description: '행 사이에 적용할 간격값입니다.',
+            control: { type: 'number' }
+        },
+        columnGap: {
+            description: '열 사이에 적용할 간격값입니다.',
+            control: { type: 'number' }
+        }
+    }
+};
+var Template = function (args) {
+    return (0, jsx_runtime_1.jsx)(CardList_1.default, __assign({}, args), void 0);
+};
+var ListTemplate = function (_a) {
+    var items = _a.items, args = __rest(_a, ["items"]);
+    return ((0, jsx_runtime_1.jsx)(CardList_1.default, __assign({}, args, { children: items.map(function (_a, index) {
+            var titleText = _a.titleText, descText = _a.descText, imageIconMode = _a.imageIconMode, imageSrc = _a.imageSrc;
+            return ((0, jsx_runtime_1.jsx)(Card_1.default, { titleText: titleText, descText: descText, imageIconMode: imageIconMode, imageSrc: imageSrc }, index));
+        }) }), void 0));
+};
+exports.DefaultCardList = Template.bind({});
+exports.MultiCardList = ListTemplate.bind({});
+exports.MultiCardList.args = {
+    columns: 3,
+    columnGap: 20,
+    rowGap: 30,
+    items: [
+        __assign({}, Card_stories_1.ImageCard.args),
+        __assign({}, Card_stories_1.ImageCard.args),
+        __assign({}, Card_stories_1.ImageCard.args),
+        __assign({}, Card_stories_1.ImageCard.args),
+        __assign({}, Card_stories_1.ImageCard.args),
+        __assign({}, Card_stories_1.ImageCard.args)
+    ]
+};

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export declare type ChatBubbleProps = {
     colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
     tailType?: 'none' | 'left_top' | 'right_top';

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     grey: 'ui_cpnt_list_chatbubble_base_grey',
@@ -36,32 +44,29 @@ var backgroundColorTheme = {
 };
 function ChatBubble(_a) {
     var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
-    return (react_1.default.createElement(S_ChatBubbleWrapper, null,
-        react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
-            react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),
-        react_1.default.createElement(S_ChatBubble, { colorTheme: colorTheme }, children)));
+    return ((0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Tail, __assign({ width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_ChatBubble, __assign({ colorTheme: colorTheme }, { children: children }), void 0)] }, void 0));
 }
 var none = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
 var left_top = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: -4px;\n  top: 0;\n"], ["\n  left: -4px;\n  top: 0;\n"])));
-var right_top = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: scaleX(-1);\n  right: -4px;\n  top: 0;\n"], ["\n  transform: scaleX(-1);\n  right: -4px;\n  top: 0;\n"])));
+var right_top = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: -4px;\n  top: 0;\n  transform: scaleX(-1);\n"], ["\n  right: -4px;\n  top: 0;\n  transform: scaleX(-1);\n"])));
 var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
-var S_ChatBubble = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  background-color: ", ";\n  border-radius: 8px;\n  position: relative;\n  max-width: 960px;\n  min-width: 32px;\n"], ["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  background-color: ", ";\n  border-radius: 8px;\n  position: relative;\n  max-width: 960px;\n  min-width: 32px;\n"])), function (_a) {
+var S_ChatBubble = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: 960px;\n  min-width: 32px;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: 960px;\n  min-width: 32px;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: relative;\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
 });
-var S_Tail = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  fill: ", ";\n\n  ", ";\n"], ["\n  position: absolute;\n  fill: ", ";\n\n  ", ";\n"])), function (_a) {
+var S_Tail = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  fill: ", ";\n  position: absolute;\n\n  ", ";\n"], ["\n  fill: ", ";\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     return colorTheme && theme[backgroundColorTheme[colorTheme]];
 }, function (_a) {

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.stories.d.ts

@@ -0,0 +1,8 @@
+import ChatBubble from './ChatBubble';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof ChatBubble>;
+export default _default;
+export declare const Default: ComponentStory<typeof ChatBubble>;
+export declare const Grey01: ComponentStory<typeof ChatBubble>;
+export declare const Primary: ComponentStory<typeof ChatBubble>;
+export declare const LongText: ComponentStory<typeof ChatBubble>;

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LongText = exports.Primary = exports.Grey01 = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var ChatBubble_1 = __importDefault(require("./ChatBubble"));
+exports.default = {
+    title: 'test/desktop/ChatBubble',
+    component: ChatBubble_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 ChatBubble 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        colorTheme: {
+            description: 'ChatBubble의 색상을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        tailType: {
+            description: 'ChatBubble의 tail 유형을 결정합니다.',
+            control: { type: 'inline-radio' }
+        }
+    }
+};
+var S_Spacing = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px;\n"], ["\n  margin: 24px;\n"])));
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(S_Spacing, { children: (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({}, args), void 0) }, void 0)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "Default" }, void 0)
+};
+exports.Grey01 = Template.bind({});
+exports.Grey01.args = {
+    colorTheme: 'grey',
+    children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "grey_01" }, void 0)
+};
+exports.Primary = Template.bind({});
+exports.Primary.args = {
+    colorTheme: 'brand_primary',
+    children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "primary" }, void 0),
+    tailType: 'right_top'
+};
+exports.LongText = Template.bind({});
+exports.LongText.args = {
+    children: ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." }, void 0))
+};
+var templateObject_1;

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType, PDSValueOption } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType, PDSValueOption } from '../../../common';
 declare type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
 export declare type ChatBubbleListItemProps = {
     titleText?: PDSTextType;