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

package/dist/src/common/components/BoxLayout/Grid.js

@@ -14,34 +14,16 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Grid(_a, ref) {
     var children = _a.children, gridTemplate = _a.gridTemplate, style = _a.style, className = _a.className;
-    return (react_1.default.createElement(S_Grid, { className: className, ref: ref, gridTemplate: gridTemplate, style: __assign({}, style) }, children));
+    return ((0, jsx_runtime_1.jsx)(S_Grid, __assign({ className: className, ref: ref, gridTemplate: gridTemplate, style: __assign({}, style) }, { children: children }), void 0));
 }
 var S_Grid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  ", ";\n  width: 100%;\n"], ["\n  display: grid;\n  ", ";\n  width: 100%;\n"])), function (_a) {
     var gridTemplate = _a.gridTemplate;

package/dist/src/common/components/BoxLayout/Row.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 declare type Props = {
     children: React.ReactNode;
     style?: React.CSSProperties;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/src/common/components/BoxLayout/Row.js

@@ -14,34 +14,16 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Row(_a, ref) {
     var children = _a.children, style = _a.style;
-    return (react_1.default.createElement(S_Row, { ref: ref, style: __assign({}, style) }, children));
+    return ((0, jsx_runtime_1.jsx)(S_Row, __assign({ ref: ref, style: __assign({}, style) }, { children: children }), void 0));
 }
 var S_Row = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n"])));
 exports.default = (0, react_1.forwardRef)(Row);

package/dist/src/common/components/CircularProgress/CircularProgress.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UiColors } from '../../types';
+import type { UiColors } from '../../types';
 export declare type CircularProgressProps = {
     colorKey?: UiColors;
     size?: 'large' | 'medium' | 'small' | 'xsmall';

package/dist/src/common/components/CircularProgress/CircularProgress.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,29 +33,22 @@ 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"));
 function CircularProgress(_a) {
     var _b = _a.colorKey, colorKey = _b === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c;
-    return (react_1.default.createElement(S_CircularProgressWrapper, { size: size },
-        react_1.default.createElement(S_CircularProgressContent, { colorKey: colorKey, size: size }),
-        react_1.default.createElement(S_CircularProgressContent, { colorKey: colorKey, size: size }),
-        react_1.default.createElement(S_CircularProgressContent, { colorKey: colorKey, size: size }),
-        react_1.default.createElement(S_CircularProgressContent, { colorKey: colorKey, size: size })));
+    return ((0, jsx_runtime_1.jsxs)(S_CircularProgressWrapper, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_CircularProgressContent, { colorKey: colorKey, size: size }, void 0), (0, jsx_runtime_1.jsx)(S_CircularProgressContent, { colorKey: colorKey, size: size }, void 0), (0, jsx_runtime_1.jsx)(S_CircularProgressContent, { colorKey: colorKey, size: size }, void 0), (0, jsx_runtime_1.jsx)(S_CircularProgressContent, { colorKey: colorKey, size: size }, void 0)] }), void 0));
 }
-var wrapperSizeLarge = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n"], ["\n  width: 48px;\n  height: 48px;\n"])));
-var contentSizeLarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
-var wrapperSizeMedium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n"], ["\n  width: 40px;\n  height: 40px;\n"])));
-var contentSizeMedium = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 22px;\n  height: 22px;\n"], ["\n  width: 22px;\n  height: 22px;\n"])));
-var wrapperSizeSmall = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 32px;\n  height: 32px;\n"], ["\n  width: 32px;\n  height: 32px;\n"])));
-var contentSizeSmall = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 18px;\n  height: 18px;\n"], ["\n  width: 18px;\n  height: 18px;\n"])));
-var wrapperSizeXSmall = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
-var contentSizeXSmall = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 14px;\n  height: 14px;\n"], ["\n  width: 14px;\n  height: 14px;\n"])));
-var S_CircularProgressWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n\n  ", ";\n\n  & div:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n  & div:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n  & div:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n"], ["\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n\n  ", ";\n\n  & div:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n  & div:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n  & div:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n"])), function (_a) {
+var wrapperSizeLarge = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n"], ["\n  height: 48px;\n  width: 48px;\n"])));
+var contentSizeLarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var wrapperSizeMedium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
+var contentSizeMedium = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 22px;\n  width: 22px;\n"], ["\n  height: 22px;\n  width: 22px;\n"])));
+var wrapperSizeSmall = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
+var contentSizeSmall = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  width: 18px;\n"], ["\n  height: 18px;\n  width: 18px;\n"])));
+var wrapperSizeXSmall = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var contentSizeXSmall = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 14px;\n  width: 14px;\n"], ["\n  height: 14px;\n  width: 14px;\n"])));
+var S_CircularProgressWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  & div:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n  & div:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n  & div:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n"], ["\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  & div:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n  & div:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n  & div:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -54,7 +58,7 @@ var S_CircularProgressWrapper = styled_components_1.default.div(templateObject_9
             xsmall: wrapperSizeXSmall
         }[size];
 });
-var S_CircularProgressContent = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  @keyframes circular {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  border: 3px solid ", ";\n  border-radius: 50%;\n  animation: circular 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: ", " transparent transparent\n    transparent;\n\n  ", ";\n"], ["\n  @keyframes circular {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  border: 3px solid ", ";\n  border-radius: 50%;\n  animation: circular 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: ", " transparent transparent\n    transparent;\n\n  ", ";\n"])), function (_a) {
+var S_CircularProgressContent = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  @keyframes circular {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  animation: circular 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border: 3px solid ", ";\n  border-color: ", " transparent transparent\n    transparent;\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n\n  ", ";\n"], ["\n  @keyframes circular {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  animation: circular 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border: 3px solid ", ";\n  border-color: ", " transparent transparent\n    transparent;\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, colorKey = _a.colorKey;
     return colorKey && theme[colorKey];
 }, function (_a) {

package/dist/src/common/components/CircularProgress/CircularProgress.stories.d.ts

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

package/dist/src/common/components/CircularProgress/CircularProgress.stories.js

@@ -0,0 +1,45 @@
+"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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CircularProgress_1 = __importDefault(require("./CircularProgress"));
+exports.default = {
+    title: 'test/common/components/CircularProgress',
+    component: CircularProgress_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: '컴포넌트 내부에서 쓸 수 있는 CircularProgress 공용 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        colorKey: {
+            description: '디자인 가이드에 명시되어있는 컬러 중 ui_형태의 컬러를 사용합니다.',
+            control: { type: 'select' }
+        },
+        size: {
+            description: 'width와 height의 크기를 한번에 결정합니다.',
+            control: { type: 'inline-radio' }
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    colorKey: 'ui_cpnt_icon_sys_grey_01'
+};

package/dist/src/common/components/Form/Form.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 /**
  * 스마트 폼 컴포넌트
  * @param {boolean} props.autoComplete 자동완성 기능 설정

package/dist/src/common/components/Form/Form.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,15 +33,12 @@ 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"));
 function Form(_a) {
     var autoComplete = _a.autoComplete, children = _a.children, onSubmit = _a.onSubmit, onChange = _a.onChange, displayButton = _a.displayButton;
-    return (react_1.default.createElement(S_StyledForm, { onSubmit: onSubmit, onChange: onChange, displayButton: displayButton, autoComplete: autoComplete ? 'on' : 'off' }, children));
+    return ((0, jsx_runtime_1.jsx)(S_StyledForm, __assign({ onSubmit: onSubmit, onChange: onChange, displayButton: displayButton, autoComplete: autoComplete ? 'on' : 'off' }, { children: children }), void 0));
 }
 var S_StyledForm = styled_components_1.default.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n"])), function (_a) {
     var displayButton = _a.displayButton;

package/dist/src/common/components/Navigations/ContextTextLabelNav.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ForwardedRefType } from '../../types';
+import type { ForwardedRefType } from '../../types';
 declare type Props = {
     to: string;
     text: string;

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -1,20 +1,26 @@
 "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 });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var desktop_1 = require("../../../desktop");
 var hybrid_1 = require("../../../hybrid");
 var BoxLayout_1 = require("../BoxLayout");
 var NavLink_1 = __importDefault(require("./NavLink"));
 function ContextTextLabelNav(_a, ref) {
     var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.preventLineChange, preventLineChange = _b === void 0 ? false : _b, onClick = _a.onClick;
-    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab, style: { minWidth: '100%', width: 'max-content' } },
-        react_1.default.createElement(BoxLayout_1.Row, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
-            react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })))) : (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular" })));
+    return preventLineChange ? ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ onClick: onClick, ref: ref, to: to, openNewTab: openNewTab, style: { minWidth: '100%', width: 'max-content' } }, { children: (0, jsx_runtime_1.jsxs)(BoxLayout_1.Row, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ onClick: onClick, ref: ref, to: to, openNewTab: openNewTab }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular" }, void 0) }), void 0));
 }
 exports.default = ContextTextLabelNav;

package/dist/src/common/components/Navigations/NavLink.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { CSSProperties } from 'styled-components';
 declare type Props = {
     to: string;
@@ -9,5 +9,5 @@ declare type Props = {
     onMouseOver?: () => void;
     onMouseOut?: () => void;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLAnchorElement>>;
 export default _default;

package/dist/src/common/components/Navigations/NavLink.js

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 function NavLink(_a, 
@@ -34,9 +27,7 @@ function NavLink(_a,
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 ref) {
     var to = _a.to, children = _a.children, _b = _a.openNewTab, openNewTab = _b === void 0 ? false : _b, style = _a.style, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
-    return openNewTab ? (react_1.default.createElement("div", { style: style, onClick: onClick },
-        react_1.default.createElement(S_NavLink, { href: to, target: "_blank", rel: "noopener noreferrer", onMouseOver: onMouseOver, onMouseOut: onMouseOut }, children))) : (react_1.default.createElement("div", { style: style, onClick: onClick },
-        react_1.default.createElement(S_Link, { to: to, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, children)));
+    return openNewTab ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: style, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(S_NavLink, __assign({ href: to, target: "_blank", rel: "noopener noreferrer", onMouseOver: onMouseOver, onMouseOut: onMouseOut }, { children: children }), void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)("div", __assign({ style: style, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(S_Link, __assign({ to: to, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, { children: children }), void 0) }), void 0));
 }
 var S_NavLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
 var S_Link = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));

package/dist/src/common/components/Navigations/Navs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { CSSProperties } from 'styled-components';
 declare type Props = {
     justified?: boolean;
@@ -6,5 +6,5 @@ declare type Props = {
     children: React.ReactNode;
     style?: CSSProperties;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLUListElement>>;
 export default _default;

package/dist/src/common/components/Navigations/Navs.js

@@ -3,34 +3,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Navs(_a, ref) {
     var children = _a.children, style = _a.style, _b = _a.justified, justified = _b === void 0 ? false : _b, _c = _a.vertical, vertical = _c === void 0 ? false : _c;
-    return (react_1.default.createElement(S_Nav, { ref: ref, justified: justified, vertical: vertical, style: style }, children));
+    return ((0, jsx_runtime_1.jsx)(S_Nav, __assign({ ref: ref, justified: justified, vertical: vertical, style: style }, { children: children }), void 0));
 }
 var S_Nav = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -ms-overflow-style: none; /* NOTE: Firefox */\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  list-style: none; /* NOTE: reset */\n  margin: 0; /* NOTE: reset */\n  padding: 0;\n  scrollbar-width: none; /* NOTE: IE and Edge */\n  width: 100%;\n"], ["\n  -ms-overflow-style: none; /* NOTE: Firefox */\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  list-style: none; /* NOTE: reset */\n  margin: 0; /* NOTE: reset */\n  padding: 0;\n  scrollbar-width: none; /* NOTE: IE and Edge */\n  width: 100%;\n"])), function (_a) {
     var vertical = _a.vertical;

package/dist/src/common/components/Navigations/TextLabelNav.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ForwardedRefType } from '../../types';
+import type { ForwardedRefType } from '../../types';
 declare type Props = {
     to: string;
     isActive?: boolean;

package/dist/src/common/components/Navigations/TextLabelNav.js

@@ -1,15 +1,24 @@
 "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 });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var desktop_1 = require("../../../desktop");
 var NavLink_1 = __importDefault(require("./NavLink"));
 function TextLabelNav(_a, ref) {
     var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, onClick = _a.onClick;
-    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' }, onClick: onClick },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, onClick: onClick },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular' })));
+    return preventLineChange ? ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' }, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ ref: ref, to: to, openNewTab: openNewTab, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular' }, void 0) }), void 0));
 }
 exports.default = TextLabelNav;

package/dist/src/common/components/ThreeBarProgress/ThreeBarProgress.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UiColors } from '../../types';
+import type { UiColors } from '../../types';
 export declare type ThreeBarProgressProps = {
     colorKey?: UiColors;
 };

package/dist/src/common/components/ThreeBarProgress/ThreeBarProgress.js

@@ -7,14 +7,13 @@ 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 ThreeBarProgress(_a) {
     var _b = _a.colorKey, colorKey = _b === void 0 ? 'ui_loading_three_bar' : _b;
-    return (react_1.default.createElement(S_ThreeBarProgressWrapper, null,
-        react_1.default.createElement(S_ThreeBarProgressContent, { colorKey: colorKey })));
+    return ((0, jsx_runtime_1.jsx)(S_ThreeBarProgressWrapper, { children: (0, jsx_runtime_1.jsx)(S_ThreeBarProgressContent, { colorKey: colorKey }, void 0) }, void 0));
 }
-var S_ThreeBarProgressWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 400px;\n"], ["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 400px;\n"])));
+var S_ThreeBarProgressWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  min-height: 400px;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  min-height: 400px;\n  width: 100%;\n"])));
 var S_ThreeBarProgressContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &,\n  &:before,\n  &:after {\n    background-color: ", ";\n    -webkit-animation: threeBarAnimation 1s infinite ease-in-out;\n    animation: threeBarAnimation 1s infinite ease-in-out;\n    width: 11px;\n    height: 44px;\n    min-height: 44px;\n    border-radius: 3px;\n  }\n  & {\n    color: ", ";\n    text-indent: -9999em;\n    margin: 88px auto;\n    position: relative;\n    font-size: 1px;\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation-delay: -0.16s;\n    animation-delay: -0.16s;\n  }\n  &:before,\n  &:after {\n    position: absolute;\n    top: 0;\n    content: '';\n  }\n  &:before {\n    left: -20px;\n    -webkit-animation-delay: -0.32s;\n    animation-delay: -0.32s;\n  }\n  &:after {\n    left: 20px;\n  }\n  @-webkit-keyframes threeBarAnimation {\n    0%,\n    80%,\n    100% {\n      box-shadow: 0 0;\n      height: 44px;\n    }\n    40% {\n      box-shadow: 0 -2em;\n      height: 48px;\n    }\n  }\n  @keyframes threeBarAnimation {\n    0%,\n    80%,\n    100% {\n      box-shadow: 0 0;\n      height: 44px;\n    }\n    40% {\n      box-shadow: 0 -2em;\n      height: 48px;\n    }\n  }\n"], ["\n  &,\n  &:before,\n  &:after {\n    background-color: ", ";\n    -webkit-animation: threeBarAnimation 1s infinite ease-in-out;\n    animation: threeBarAnimation 1s infinite ease-in-out;\n    width: 11px;\n    height: 44px;\n    min-height: 44px;\n    border-radius: 3px;\n  }\n  & {\n    color: ", ";\n    text-indent: -9999em;\n    margin: 88px auto;\n    position: relative;\n    font-size: 1px;\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation-delay: -0.16s;\n    animation-delay: -0.16s;\n  }\n  &:before,\n  &:after {\n    position: absolute;\n    top: 0;\n    content: '';\n  }\n  &:before {\n    left: -20px;\n    -webkit-animation-delay: -0.32s;\n    animation-delay: -0.32s;\n  }\n  &:after {\n    left: 20px;\n  }\n  @-webkit-keyframes threeBarAnimation {\n    0%,\n    80%,\n    100% {\n      box-shadow: 0 0;\n      height: 44px;\n    }\n    40% {\n      box-shadow: 0 -2em;\n      height: 48px;\n    }\n  }\n  @keyframes threeBarAnimation {\n    0%,\n    80%,\n    100% {\n      box-shadow: 0 0;\n      height: 44px;\n    }\n    40% {\n      box-shadow: 0 -2em;\n      height: 48px;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme, colorKey = _a.colorKey;
     return colorKey && theme[colorKey];

package/dist/src/common/components/ThreeBarProgress/ThreeBarProgress.stories.d.ts

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

package/dist/src/common/components/ThreeBarProgress/ThreeBarProgress.stories.js

@@ -0,0 +1,38 @@
+"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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ThreeBarProgress_1 = __importDefault(require("./ThreeBarProgress"));
+exports.default = {
+    title: 'test/common/components/ThreeBarProgress',
+    component: ThreeBarProgress_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: '레이아웃 내부에서 쓸 수 있는 ThreeBarProgress 공용 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        colorKey: {
+            description: '디자인 가이드에 명시되어있는 컬러 중 ui_형태의 컬러를 사용합니다.',
+            control: { type: 'select' }
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(ThreeBarProgress_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});

package/dist/src/common/components/index.d.ts

@@ -1,4 +1,3 @@
-import { CircularProgress } from './CircularProgress';
-import { Form } from './Form';
-import { ThreeBarProgress } from './ThreeBarProgress';
-export { CircularProgress, Form, ThreeBarProgress };
+export { CircularProgress } from './CircularProgress';
+export { Form } from './Form';
+export { ThreeBarProgress } from './ThreeBarProgress';

package/dist/src/common/decorators/withFormProvider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 declare type StoryType = () => React.ReactNode;
 export declare const withFormProvider: (storyFn: StoryType) => JSX.Element;
 export {};

package/dist/src/common/decorators/withFormProvider.js

@@ -10,14 +10,11 @@ var __assign = (this && this.__assign) || function () {
     };
     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.withFormProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable react-hooks/rules-of-hooks */
-var react_1 = __importDefault(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var components_1 = require("../components");
 var withFormProvider = function (storyFn) {
@@ -26,7 +23,6 @@ var withFormProvider = function (storyFn) {
         // eslint-disable-next-line no-console
         console.log('submit success', data);
     };
-    return (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
-        react_1.default.createElement(components_1.Form, { onSubmit: methods.handleSubmit(handleSubmit) }, storyFn())));
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: methods.handleSubmit(handleSubmit) }, { children: storyFn() }), void 0) }), void 0));
 };
 exports.withFormProvider = withFormProvider;