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

package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.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 = {
     transparent: 'ui_cpnt_sheet_base_03',
@@ -64,7 +72,7 @@ function AnnotationSheet(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_AnnotationSheet, { "x-pds-name": "AnnotationSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+    return ((0, jsx_runtime_1.jsx)(S_AnnotationSheet, __assign({ "x-pds-name": "AnnotationSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children }), void 0));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -93,27 +101,27 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_AnnotationSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var $width = _a.$width;
-    return $width;
-}, function (_a) {
-    var $height = _a.$height;
-    return $height;
-}, function (_a) {
+var S_AnnotationSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
 }, function (_a) {
     var borderMode = _a.borderMode;
     return (borderMode === 'use' ? 'solid' : 'none');
 }, function (_a) {
     var $borderWidth = _a.$borderWidth;
     return $borderWidth + "px";
-}, function (_a) {
-    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
-    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
 }, function (_a) {
     var hasOnClick = _a.hasOnClick;
     return (hasOnClick ? 'pointer' : 'default');
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && radiusStyle;

package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.stories.d.ts

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

package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.stories.js

@@ -0,0 +1,108 @@
+"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.UseCase1MoreInformation = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = __importDefault(require("../../components/TextLabel/TextLabel"));
+var AnnotationSheet_1 = __importDefault(require("./AnnotationSheet"));
+exports.default = {
+    title: 'desktop/panels/AnnotationSheet',
+    component: AnnotationSheet_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 AnnotationSheet 패널'
+            }
+        }
+    },
+    argTypes: {
+        width: {
+            description: '너비값을 입력합니다. (px, %, vw...)',
+            control: { type: 'text' }
+        },
+        height: {
+            description: '높이값을 입력합니다. (px, %, vh...)',
+            control: { type: 'text' }
+        },
+        backgroundColorTheme: {
+            description: '미리 부여되어 있는 색상으로 배경 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBackgroundColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 배경 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        borderMode: {
+            description: '라인의 사용여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        borderWidth: {
+            description: '라인의 굵기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        borderColorTheme: {
+            description: '미리 부여되어 있는 색상으로 라인 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBorderColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 라인 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        shapeType: {
+            description: '형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        radius: {
+            description: '모서리값을 결정합니다. (*shapeType : round 일 때만 적용됩니다.)',
+            control: { type: 'inline-radio' }
+        },
+        paddingTop: {
+            description: 'padding-top 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingRight: {
+            description: 'padding-right 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingBottom: {
+            description: 'padding-bottom 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingLeft: {
+            description: 'padding-left 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        overrideCSS: {
+            description: '제공되어진 property와 value를 가지고 표현할 수 없는 경우를 자유롭게 기술하여 표현할 수 있습니다.'
+        },
+        children: {
+            description: 'sheet내부에 내용을 부여할 수 있습니다.'
+        },
+        onClick: {
+            description: '사용시에 마우스 포인터의 모양이 변경됩니다.',
+            action: 'onClick'
+        }
+    }
+};
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(AnnotationSheet_1.default, __assign({}, args, { onClick: undefined }), void 0)); };
+exports.Default = Template.bind({});
+exports.UseCase1MoreInformation = Template.bind({});
+exports.UseCase1MoreInformation.args = {
+    width: '100%',
+    children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "\uD50C\uB7AB\uD3FC\uBCC4 \uC774\uC6A9 \uC548\uB0B4", styleTheme: "caption1Bold", colorTheme: "sysTextSecondary" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "iOS \uC571/\uC548\uB4DC\uB85C\uC774\uB4DC \uC571/\uBAA8\uBC14\uC77C \uC6F9\uBE0C\uB77C\uC6B0\uC800/PC \uC6F9\uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C \uC774\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.\nPC \uC6F9\uBE0C\uB77C\uC6B0\uC800 \uAE30\uC900 Chrome 91 \uC774\uC0C1/Safari 13 \uC774\uC0C1, \uBAA8\uBC14\uC77C \uC6F9\uBE0C\uB77C\uC6B0\uC800 \uAE30\uC900 Chrome(for Android) 94 \uC774\uC0C1/Safari(on iOS) 13.1 \uC774\uC0C1\uC758 \uBC84\uC804\uC5D0\uC11C \uC11C\uBE44\uC2A4 \uC774\uC6A9\uC5D0 \uBD88\uD3B8\uD568\uC774 \uC5C6\uB3C4\uB85D \uC791\uB3D9\uB420 \uAC83\uC744 \uBCF4\uC99D\uD569\uB2C8\uB2E4.", styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "\uD658\uBD88 \uC548\uB0B4", styleTheme: "caption1Bold", colorTheme: "sysTextSecondary" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "\uBCF8 \uC11C\uBE44\uC2A4\uB294 \uB2E4\uC74C\uC758 \uACBD\uC6B0 \uD658\uBD88\uC774 \uBD88\uAC00\uD558\uB2C8 \uAD6C\uB9E4 \uC804 \uD655\uC778 \uBD80\uD0C1\uB4DC\uB9BD\uB2C8\uB2E4.\n1. \uC0C1\uD488\uC744 \uAD6C\uB9E4\uD55C\uC9C0 7\uC77C(\uCCAD\uC57D\uCCA0\uD68C \uAE30\uAC04)\uC774 \uC9C0\uB09C \uACBD\uC6B0\n2. \uC0C1\uD488\uC744 \uAD6C\uB9E4\uD55C\uC9C0 7\uC77C(\uCCAD\uC57D\uCCA0\uD68C \uAE30\uAC04)\uC774 \uC9C0\uB098\uC9C0 \uC54A\uC558\uC9C0\uB9CC, \uAD6C\uB9E4\uD55C \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD55C \uACBD\uC6B0\n3. \uCC44\uB110\uC774 \uBC1C\uD589\uD55C \uCFE0\uD3F0\uC774\uB098, \uC774\uBCA4\uD2B8 \uB2F9\uCCA8\uC744 \uD1B5\uD574 \uBB34\uC0C1\uC73C\uB85C \uC720\uB8CC \uC11C\uBE44\uC2A4 \uC774\uC6A9\uAD8C\uC744 \uBC1B\uC740 \uACBD\uC6B0\n4. \uD68C\uC6D0\uC774 \uC11C\uBE44\uC2A4 \uC774\uC6A9\uC73C\uB85C\uBD80\uD130 \uC5BB\uC740 \uC774\uC775\uC5D0 \uD574\uB2F9\uD558\uB294 \uACF5\uC81C \uB300\uC0C1 \uAE08\uC561\uC774 \uD68C\uC6D0\uC774 \uC2E4\uC81C\uB85C \uACB0\uC81C\uD55C \uAE08\uC561\uC744 \uCD08\uACFC\uD55C \uACBD\uC6B0\n5. \uD68C\uC6D0\uC774 \uC9C1\uC811 \uACB0\uC81C\uD558\uC9C0 \uC54A\uC740 \uACBD\uC6B0", styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "\uAE30\uD0C0 \uC548\uB0B4", styleTheme: "caption1Bold", colorTheme: "sysTextSecondary" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "\uBBF8\uC131\uB144\uC790\uC758 \uACBD\uC6B0, \uBC95\uC815\uB300\uB9AC\uC778\uC774 \uAD6C\uB9E4\uC5D0 \uB3D9\uC758\uD558\uC9C0 \uC54A\uC740 \uACBD\uC6B0 \uBCF8\uC778 \uB610\uB294 \uBC95\uC815\uB300\uB9AC\uC778\uC774 \uAD6C\uB9E4\uB97C \uCDE8\uC18C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0)] }, void 0)),
+    shapeType: 'round'
+};

package/dist/src/desktop/panels/ContentSheet/ContentSheet.d.ts

@@ -1,5 +1,5 @@
-import React, { CSSProperties } from 'react';
-import { UiColors } from '../../../common';
+import type { UiColors } from '../../../common';
+import type { CSSProperties } from 'react';
 declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export declare type ContentSheetProps = {
     width: string;

package/dist/src/desktop/panels/ContentSheet/ContentSheet.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 styles_1 = require("../../../common/styles");
 var backgroundColorTheme = {
@@ -67,9 +75,9 @@ function ContentSheet(_a) {
     };
     var ContentSheetVariation = function () {
         if (isLoading) {
-            return (react_1.default.createElement(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }, void 0));
         }
-        return (react_1.default.createElement(S_ContentSheet, { "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+        return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children }), void 0));
     };
     return ContentSheetVariation();
 }
@@ -100,27 +108,27 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var $width = _a.$width;
-    return $width;
-}, function (_a) {
-    var $height = _a.$height;
-    return $height;
-}, function (_a) {
+var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
 }, function (_a) {
     var borderMode = _a.borderMode;
     return (borderMode === 'use' ? 'solid' : 'none');
 }, function (_a) {
     var $borderWidth = _a.$borderWidth;
     return $borderWidth + "px";
-}, function (_a) {
-    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
-    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
 }, function (_a) {
     var hasOnClick = _a.hasOnClick;
     return (hasOnClick ? 'pointer' : 'default');
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && radiusStyle;

package/dist/src/desktop/panels/ContentSheet/ContentSheet.stories.d.ts

@@ -0,0 +1,7 @@
+import ContentSheet from './ContentSheet';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof ContentSheet>;
+export default _default;
+export declare const Default: ComponentStory<typeof ContentSheet>;
+export declare const UseCase1Community: ComponentStory<typeof ContentSheet>;
+export declare const UseCase2Thumbnail: ComponentStory<typeof ContentSheet>;

package/dist/src/desktop/panels/ContentSheet/ContentSheet.stories.js

@@ -0,0 +1,145 @@
+"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.UseCase2Thumbnail = exports.UseCase1Community = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var ReactionButton_1 = __importDefault(require("../../components/ReactionButton/ReactionButton"));
+var TextLabel_1 = __importDefault(require("../../components/TextLabel/TextLabel"));
+var ContentSheet_1 = __importDefault(require("./ContentSheet"));
+exports.default = {
+    title: 'desktop/panels/ContentSheet',
+    component: ContentSheet_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 ContentSheet 패널'
+            }
+        }
+    },
+    argTypes: {
+        width: {
+            description: '너비값을 입력합니다. (px, %, vw...)',
+            control: { type: 'text' }
+        },
+        height: {
+            description: '높이값을 입력합니다. (px, %, vh...)',
+            control: { type: 'text' }
+        },
+        backgroundColorTheme: {
+            description: '미리 부여되어 있는 색상으로 배경 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBackgroundColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 배경 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        borderMode: {
+            description: '라인의 사용여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        borderWidth: {
+            description: '라인의 굵기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        borderColorTheme: {
+            description: '미리 부여되어 있는 색상으로 라인 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBorderColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 라인 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        shapeType: {
+            description: '형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        radius: {
+            description: '모서리값을 결정합니다. (*shapeType : round 일 때만 적용됩니다.)',
+            control: { type: 'inline-radio' }
+        },
+        paddingTop: {
+            description: 'padding-top 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingRight: {
+            description: 'padding-right 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingBottom: {
+            description: 'padding-bottom 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingLeft: {
+            description: 'padding-left 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        overrideCSS: {
+            description: '제공되어진 property와 value를 가지고 표현할 수 없는 경우를 자유롭게 기술하여 표현할 수 있습니다.'
+        },
+        children: {
+            description: 'sheet내부에 내용을 부여할 수 있습니다.'
+        },
+        loadingWidth: {
+            description: '로딩 상태일때의 너비값을 입력합니다. (px, %, vw...) (없다면 width값이 적용됩니다.)',
+            control: { type: 'text' }
+        },
+        loadingHeight: {
+            description: '로딩 상태일때의 높이값을 입력합니다. (px, %, vh...) (없다면 width값이 적용됩니다.)',
+            control: { type: 'text' }
+        },
+        isLoading: {
+            description: '로딩 상태 여부를 결정합니다.',
+            control: { type: 'boolean' }
+        },
+        onClick: {
+            description: '사용시에 마우스 포인터의 모양이 변경됩니다.',
+            action: 'onClick'
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(ContentSheet_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+var S_Profile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var S_ReactionButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+exports.UseCase1Community = Template.bind({});
+exports.UseCase1Community.args = {
+    width: '100%',
+    children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Profile, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: "https://placekitten.com/300/300", shapeType: "circular", width: 48, borderMode: "use", scaleType: "cover", ratio: "1_1" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsxs)(S_TextWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "\uB2C9\uB124\uC784", styleTheme: "caption1Bold" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "9\uC2DC\uAC04 \uC804", styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" }, void 0)] }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", styleTheme: "body1Regular" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsxs)(S_ReactionButtonWrapper, { children: [(0, jsx_runtime_1.jsx)(ReactionButton_1.default, { text: 486 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(ReactionButton_1.default, { text: 10000, iconName: "ic_reply" }, void 0)] }, void 0)] }, void 0)),
+    shapeType: 'round',
+    overrideCSS: {
+        display: 'flex',
+        flexDirection: 'column'
+    }
+};
+exports.UseCase2Thumbnail = Template.bind({});
+exports.UseCase2Thumbnail.args = {
+    width: '300px',
+    backgroundColorTheme: 'transparent',
+    children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: "https://placekitten.com/300/300", ratio: "16_9", scaleType: "cover", shapeType: "round", radius: 8, width: "responsive", backgroundFillMode: "use", borderMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", styleTheme: "body1Regular", ellipsisMode: "use", lineLimit: 1 }, void 0)] }, void 0)),
+    overrideCSS: {
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '12px'
+    }
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 declare type DesktopBasicModalProps = {
     titleText: PDSTextType;
     contentText?: PDSTextType;
@@ -22,5 +22,5 @@ declare type DesktopBasicModalProps = {
     onClickMBtn3?: () => void;
     children?: React.ReactNode;
 };
-declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, bodyOverflowType, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, scrollVisibleType, children }: DesktopBasicModalProps): React.ReactPortal;
+declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, bodyOverflowType, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, scrollVisibleType, children }: DesktopBasicModalProps): import("react").ReactPortal;
 export default DesktopBasicModal;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.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]; } });
@@ -26,7 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
@@ -52,26 +64,14 @@ function DesktopBasicModal(_a) {
     var btn1Mode = ['mbtn_amount1', 'mbtn_amount2', 'mbtn_amount3'];
     var btn2Mode = ['mbtn_amount2', 'mbtn_amount3'];
     var btn3Mode = ['mbtn_amount3'];
-    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ModalOverlay, null),
-        react_1.default.createElement(S_ModalWrapper, { "x-pds-name": "DesktopBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size },
-            react_1.default.createElement(S_Header, null,
-                react_1.default.createElement(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
-            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType, scrollVisibleType: scrollVisibleType },
-                contentText && (react_1.default.createElement(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
-                children && children),
-            react_1.default.createElement(S_Footer, null,
-                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
-                react_1.default.createElement(S_Right, null,
-                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
-                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}, void 0), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType, scrollVisibleType: scrollVisibleType }, { children: [contentText && ((0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" }, void 0)), children && children] }), void 0), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && mBtn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }, void 0)) }, void 0), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && mBtn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }, void 0)) }, void 0), btn1Mode.includes(btnMode) && mBtn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 }, void 0))] }, void 0)] }, void 0)] }), void 0)] }, void 0), container);
 }
 var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
 var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 960px;\n  max-width: 1400px;\n"], ["\n  min-width: 960px;\n  max-width: 1400px;\n"])));
+var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 1400px;\n  min-width: 960px;\n"], ["\n  max-width: 1400px;\n  min-width: 960px;\n"])));
 var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
@@ -103,20 +103,23 @@ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templat
     return theme.spacing.spacingB;
 });
 var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var bodyOverflowType = _a.bodyOverflowType;
+    return bodyOverflowType;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, function (_a) {
@@ -128,9 +131,6 @@ var S_Body = styled_components_1.default.div(templateObject_10 || (templateObjec
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
-}, function (_a) {
-    var bodyOverflowType = _a.bodyOverflowType;
-    return bodyOverflowType;
 }, function (_a) {
     var scrollVisibleType = _a.scrollVisibleType, bodyOverflowType = _a.bodyOverflowType;
     return bodyOverflowType !== 'visible' &&
@@ -144,7 +144,7 @@ var S_Body = styled_components_1.default.div(templateObject_10 || (templateObjec
     var bodySpacingMode = _a.bodySpacingMode;
     return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_border;
 }, function (_a) {

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.stories.d.ts

@@ -0,0 +1,7 @@
+import DesktopBasicModal from './DesktopBasicModal';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof DesktopBasicModal>;
+export default _default;
+export declare const Default: ComponentStory<typeof DesktopBasicModal>;
+export declare const BodyScrollDefault: ComponentStory<typeof DesktopBasicModal>;
+export declare const BodyOverflowVisible: ComponentStory<typeof DesktopBasicModal>;