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

package/dist/src/desktop/components/TextLabel/TextLabel.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]; } });
@@ -23,7 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 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 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
@@ -32,195 +44,187 @@ function TextLabel(_a) {
     var handleTooltipToggle = function (value) {
         setIsTooltipOpen(value);
     };
-    return (react_1.default.createElement(S_TextLabel, { "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing },
-        text,
-        requirementMode === 'use' && (react_1.default.createElement(S_AfterTextBox, { styleTheme: styleTheme },
-            react_1.default.createElement(S_IconWrapper, null,
-                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" })))),
-        tooltipText && (react_1.default.createElement(S_AfterTextBox, { styleTheme: styleTheme },
-            react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
-                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey })),
-            react_1.default.createElement(S_TooltipWrapper, { className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, "" + tooltipText)))));
+    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }, void 0) }, void 0) }), void 0)), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "" + tooltipText }), void 0)] }), void 0))] }), void 0));
 }
-var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.displayHeading;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.displayHeading;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.displayHeading;
 });
-var headingBold = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var headingBold = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.heading;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.heading;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.heading;
 });
-var wizardPageTitleBold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var wizardPageTitleBold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.wizardPageTitle;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.wizardPageTitle;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.wizardPageTitle;
 });
-var leadParaBold = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var leadParaBold = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.leadParagraph;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.leadParagraph;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.leadParagraph;
 });
-var leadParaRegular = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var leadParaRegular = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.leadParagraph;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.leadParagraph;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.leadParagraph;
 });
-var subTitleBold = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var subTitleBold = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.subtitle;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.subtitle;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.subtitle;
 });
-var subTitleRegular = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var subTitleRegular = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.subtitle;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.subtitle;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.subtitle;
 });
-var body1Bold = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body1Bold = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body1;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.body1;
 });
-var body1Regular = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body1Regular = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.body1;
 });
-var body2Bold = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body2Bold = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.body2;
 });
-var body2Regular = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body2Regular = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.body2;
 });
-var caption1Bold = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption1Bold = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.caption1;
 });
-var caption1Regular = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption1Regular = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.caption1;
 });
-var caption2Bold = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption2Bold = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption2;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.caption2;
 });
-var caption2Regular = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption2Regular = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption2;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.caption2;
 });
-var form1Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var form1Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.form1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.form1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.form1;
 });
-var form2Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var form2Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.form2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.form2;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.form2;
 });
-var blog1Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var blog1Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.blog1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.blog1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.blog1;
 });
 var sysTextPrimary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -270,7 +274,7 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (t
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_usr_brandonprimary;
 });
-var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"])), function (_a) {
+var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.5;\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.5;\n"])), function (_a) {
     var customFontSize = _a.customFontSize;
     return customFontSize;
 }, function (_a) {
@@ -281,17 +285,17 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (temp
     var colorOverride = _a.colorOverride, theme = _a.theme;
     return colorOverride && theme[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: ", ";\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: ", ";\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"])));
-var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  right: 0;\n  bottom: 20px;\n"], ["\n  right: 0;\n  bottom: 20px;\n"])));
+var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
+var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"])));
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  bottom: 20px;\n  right: 0;\n"], ["\n  bottom: 20px;\n  right: 0;\n"])));
 var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
-var tooltipRightTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  bottom: 20px;\n  left: 0;\n"], ["\n  bottom: 20px;\n  left: 0;\n"])));
 var tooltipRightBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -390,8 +394,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templ
             return 'vertical-align: middle';
     }
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 4;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 4;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {

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

@@ -0,0 +1,7 @@
+import TextLabel from './TextLabel';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof TextLabel>;
+export default _default;
+export declare const ShortText: ComponentStory<typeof TextLabel>;
+export declare const LongText: ComponentStory<typeof TextLabel>;
+export declare const LongTextWithLineBreakTab: ComponentStory<typeof TextLabel>;

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

@@ -0,0 +1,127 @@
+"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.LongTextWithLineBreakTab = exports.LongText = exports.ShortText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TextLabel_1 = __importDefault(require("./TextLabel"));
+exports.default = {
+    title: 'desktop/components/TextLabel',
+    component: TextLabel_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 TextLabel 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '표시할 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        tooltipText: {
+            description: 'hover 시 표시할 텍스트 값입니다. (부여하지 않으면 tooltip기능이 활성화 되지 않습니다.)',
+            control: { type: 'text' }
+        },
+        tooltipPosition: {
+            description: 'tooltipText 표시 위치를 결정합니다.',
+            control: { type: 'select' }
+        },
+        tooltipIconColorKey: {
+            description: 'tooltip의 아이콘 컬러 키값을 직접 입력할 수 있습니다.',
+            control: { type: 'text' }
+        },
+        textAlign: {
+            description: '텍스트 정렬 위치를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        styleTheme: {
+            description: '텍스트 스타일의 프리셋 테마입니다.',
+            control: { type: 'select' }
+        },
+        colorOverride: {
+            description: '텍스트 컬러의 키값을 직접 입력할 수 있습니다. (ui_로 시작하는 키값 부여) (color에 키값을 넣으면 colorTheme의 값은 무시됩니다.)',
+            control: { type: 'text' }
+        },
+        colorTheme: {
+            description: '텍스트 컬러의 프리셋 테마입니다.',
+            control: { type: 'select' }
+        },
+        singleLineMode: {
+            description: '텍스트의 행간을 결정합니다. none일때는 텍스트 스타일(사이즈)에 기본적으로 부여된 행간을 사용합니다. use일때는 행간 1 부여 (텍스트가 1줄로만 사용할 시 부여합니다.)',
+            control: { type: 'inline-radio' }
+        },
+        ellipsisMode: {
+            description: '말줄임표 사용을 결정합니다. lineLimit가 함께 부여되어야만 작동합니다.',
+            control: { type: 'inline-radio' }
+        },
+        lineLimit: {
+            description: 'ellipsisMode가 use 일 때, 말줄임을 적용할 행의 수를 선택합니다.',
+            control: { type: 'number' }
+        },
+        userSelectMode: {
+            description: '텍스트 블록 지정에 대한 유무를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        customFontSize: {
+            description: '직접 지정한 텍스트의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.) (*반드시 디자인 검수후에 사용가능합니다.)',
+            control: { type: 'text' }
+        },
+        customFontWeight: {
+            description: '직접 지정한 텍스트의 굵기를 결정합니다. (customFontWeight은 customFontSize를 썼을때만 사용 가능합니다.) (*반드시 디자인 검수후에 사용가능합니다.)',
+            control: { type: 'inline-radio' }
+        },
+        textDecorationType: {
+            description: '텍스트의 서식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        requirementMode: {
+            description: '텍스트 필수(*) 표시 사용 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        bulletPointMode: {
+            description: '텍스트의 글머리 기호 사용 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        wordBreak: {
+            description: '줄바꿈 형식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        letterSpacing: {
+            description: '텍스트의 사이 간격을 결정합니다. (단위도 함께 적어주어야 합니다.) (*반드시 디자인 검수후에 사용가능합니다.)',
+            control: { type: 'text' }
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(TextLabel_1.default, __assign({}, args), void 0); };
+var defaultArgs = {
+    textAlign: 'left',
+    styleTheme: 'body2Bold',
+    colorTheme: 'sysTextPrimary',
+    singleLineMode: 'none',
+    ellipsisMode: 'none',
+    userSelectMode: 'none',
+    textDecorationType: 'none',
+    requirementMode: 'none',
+    bulletPointMode: 'none',
+    wordBreak: 'keep_all'
+};
+exports.ShortText = Template.bind({});
+exports.ShortText.args = __assign(__assign({}, defaultArgs), { text: 'text' });
+exports.LongText = Template.bind({});
+exports.LongText.args = __assign(__assign({}, defaultArgs), { text: 'We are going to eat a breakfast at the Embassy coffee shop. Besides we will lunch and dinner at fancier places. Anyway, after breakfast we are going to go to the Metropolitan Museum of Art. Then we will take a bus across Central Park and go to the Museum of Natural History. Then we will head downtown and go shopping.겨울이 잠, 언덕 헤일 별 이름자를 우는 하나의 거외다. 불러 가슴속에 써 부끄러운 벌레는 사랑과 마리아 봅니다. 밤이 가난한 패, 마디씩 아직 있습니다. 별 지나가는 별을 이제 남은 아름다운 까닭입니다. 위에도 내린 속의 했던 너무나 당신은 다하지 이름과, 까닭입니다. 아직 이름과 하나에 당신은 비둘기, 봅니다. 가득 쉬이 강아지, 계십니다. 이름과, 그리워 언덕 있습니다. 하나에 이네들은 헤는 내 하나에 강아지, 슬퍼하는 계십니다. 별 오는 걱정도 나는 패, 쓸쓸함과 별 이름을 가득 거외다. 별들을 새워 이국 아무 까닭입니다. 이런 이런 이름을 차 우는 벌레는 멀듯이, 나의 새겨지는 까닭입니다. 하나 파란 멀리 벌써 아직 그러나 가슴속에 까닭입니다. 나의 별 언덕 있습니다. 노새, 소녀들의 그리워 노루, 이네들은 청춘이 마리아 까닭입니다. 불러 같이 지나고 있습니다. 같이 위에 아스라히 이국 못 까닭이요, 있습니다. 헤는 못 써 북간도에 별 너무나 멀리 이웃 까닭입니다. 우는 하나의 이름자 딴은 버리었습니다. 이국 이웃 하나에 새겨지는 듯합니다. 없이 하나에 그러나 까닭입니다. 아스라히 한 하나에 잔디가 경, 별 피어나듯이 벌레는 별들을 까닭입니다. 걱정도 하나 사랑과 있습니다. 무엇인지 릴케 이름을 멀리 어머니, 강아지, 이런 계십니다. 써 이름을 된 흙으로 봅니다. 그리워 노루, 지나가는 이 않은 나는 아이들의 계집애들의 아직 있습니다. 풀이 아스라히 봄이 라이너 내일 무성할 헤일 있습니다. 하나에 된 한 다하지 듯합니다.' });
+exports.LongTextWithLineBreakTab = Template.bind({});
+exports.LongTextWithLineBreakTab.args = __assign(__assign({}, defaultArgs), { text: 'We are going to eat a            breakfast at the            Embassy coffee shop. \nBesides we will lunch and dinner at fancier places. \nAnyway, after breakfast we are going to go to the Metropolitan Museum of Art. \nThen we will take a bus across Central Park and go to the Museum of Natural History. \nThen we will head downtown and go shopping.  \n겨울이 잠, 언덕 헤일 별 이름자를 우는 하나의 거외다. 불러 가슴속에 써 부끄러운 벌레는 사랑과 마리아 봅니다. 밤이 가난한 패, 마디씩 아직 있습니다. 별 지나가는 별을 이제 남은 아름다운 까닭입니다. 위에도 내린 속의 했던 너무나 당신은 다하지 이름과, 까닭입니다. 아직 이름과 하나에 당신은 비둘기, 봅니다. 가득 쉬이 강아지, 계십니다. 이름과, 그리워 언덕 있습니다. 하나에 이네들은 헤는 내 하나에 강아지, 슬퍼하는 계십니다. \n별 오는 걱정도 나는 패, 쓸쓸함과 별 이름을 가득 거외다. 별들을 새워 이국 아무 까닭입니다. 이런 이런 이름을 차 우는 벌레는 멀듯이, 나의 새겨지는 까닭입니다. 하나 파란 멀리 벌써 아직 그러나 가슴속에 까닭입니다. 나의 별 언덕 있습니다. 노새, 소녀들의 그리워 노루, 이네들은 청춘이 마리아 까닭입니다. 불러 같이 지나고 있습니다. 같이 위에 아스라히 이국 못 까닭이요, 있습니다. 헤는 못 써 북간도에 별 너무나 멀리 이웃 까닭입니다. \n우는 하나의 이름자 딴은 버리었습니다. 이국 이웃 하나에 새겨지는 듯합니다. 없이 하나에 그러나 까닭입니다. 아스라히 한 하나에 잔디가 경, 별 피어나듯이 벌레는 별들을 까닭입니다. 걱정도 하나 사랑과 있습니다. 무엇인지 릴케 이름을 멀리 어머니, 강아지, 이런 계십니다. 써 이름을 된 흙으로 봅니다. 그리워 노루, 지나가는 이 않은 나는 아이들의 계집애들의 아직 있습니다. 풀이 아스라히 봄이 라이너 내일 무성할 헤일 있습니다. 하나에 된 한 다하지 듯합니다.' });

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';

package/dist/src/desktop/components/UploadIconButton/UploadIconButton.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 transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -51,9 +59,7 @@ function UploadIconButton(_a) {
         }
         return types_1.iconStateColors[fillType];
     };
-    return (react_1.default.createElement(S_UploadIconButton, { "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
-        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
+    return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0)] }), void 0));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -86,12 +92,12 @@ var line2ColorTheme = (0, styled_components_1.css)(templateObject_4 || (template
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_primary;
 });
-var lineDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-color: ", ";\n  background-color: ", ";\n"], ["\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_a) {
+var lineDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_line_border_disabled;
+    return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_default;
+    return theme.ui_cpnt_button_line_border_disabled;
 });
 var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -124,7 +130,7 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
 var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'circular' && '50%';
 }, function (_a) {

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

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