pds-dev-kit-web-test 0.2.29 → 0.2.30

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ImageSlideProps = {
+export type ImageSlideProps = {
     status?: 'active' | 'inactive';
     src?: string[];
     imageShapeType?: 'round' | 'circular' | 'rectangle';
@@ -8,7 +8,7 @@ export declare type ImageSlideProps = {
     radius?: 8 | 16 | 24;
     borderMode?: 'use' | 'none';
 };
-export declare type ImageSlideItemProps = {
+export type ImageSlideItemProps = {
     imageSrc?: string;
 };
 declare const ImageSlide: ({ status, src, imageShapeType, imageWidth, imageRatio, radius, borderMode }: ImageSlideProps) => JSX.Element;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -56,15 +60,15 @@ var ImageSlide = function (_a) {
     var renderDotControls = function (_a) {
         var currentSlide = _a.currentSlide, slideCount = _a.slideCount;
         var dotList = __spreadArray([], Array(slideCount), true).map(function (x, i) { return ({ id: i }); });
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dotList.map(function (item, i) { return ((0, jsx_runtime_1.jsx)(S_Dot, { currentSlide: currentSlide, i: i }, item.id)); }) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dotList.map(function (item, i) { return ((0, jsx_runtime_1.jsx)(S_Dot, { currentSlide: currentSlide, i: i }, item.id)); }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(S_ImageSlideWrapper, __assign({ "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth }, { children: (0, jsx_runtime_1.jsx)(nuka_carousel_1.default, __assign({ cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : imageWidth + "px", renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, { children: src &&
+    return ((0, jsx_runtime_1.jsx)(S_ImageSlideWrapper, __assign({ "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth }, { children: (0, jsx_runtime_1.jsx)(nuka_carousel_1.default, __assign({ cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : "".concat(imageWidth, "px"), renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, { children: src &&
                 src.length > 0 &&
-                src.map(function (imageSrc, i) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_BottomGradient, { imageShapeType: imageShapeType, imageWidth: imageWidth, radius: radius }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: status === 'active' ? imageSrc : '', shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: radius, borderMode: borderMode }, void 0)] }, void 0) }, i.toString())); }) }), void 0) }), void 0));
+                src.map(function (imageSrc, i) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_BottomGradient, { imageShapeType: imageShapeType, imageWidth: imageWidth, radius: radius }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: status === 'active' ? imageSrc : '', shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: radius, borderMode: borderMode })] }) }, i.toString())); }) })) })));
 };
 var S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px;\n  display: inline-block;\n  height: 8px;\n  margin: ", ";\n  width: 8px;\n\n  ", "\n"], ["\n  border-radius: 8px;\n  display: inline-block;\n  height: 8px;\n  margin: ", ";\n  width: 8px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB + " " + theme.spacing.spacingA;
+    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingA);
 }, function (_a) {
     var currentSlide = _a.currentSlide, i = _a.i;
     return currentSlide === i
@@ -78,25 +82,25 @@ var S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_
 });
 var S_ImageSlideWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  min-width: ", ";\n  padding: ", ";\n  width: ", ";\n\n  & > .slider {\n    height: auto !important;\n  }\n  & div:focus {\n    outline: none;\n  }\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  min-width: ", ";\n  padding: ", ";\n  width: ", ";\n\n  & > .slider {\n    height: auto !important;\n  }\n  & div:focus {\n    outline: none;\n  }\n"])), function (_a) {
     var imageWidth = _a.imageWidth;
-    return imageWidth === 'responsive' ? "calc(100% - 48px)" : imageWidth + "px";
+    return imageWidth === 'responsive' ? "calc(100% - 48px)" : "".concat(imageWidth, "px");
 }, function (_a) {
     var theme = _a.theme;
-    return "0 " + theme.spacing.spacingE;
+    return "0 ".concat(theme.spacing.spacingE);
 }, function (_a) {
     var imageWidth = _a.imageWidth;
-    return imageWidth === 'responsive' ? "calc(100% - 48px)" : imageWidth + "px";
+    return imageWidth === 'responsive' ? "calc(100% - 48px)" : "".concat(imageWidth, "px");
 });
 var S_BottomGradient = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: ", ";\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: ", ";\n\n  ", "\n"], ["\n  background-image: ", ";\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return "linear-gradient(\n    to top,\n    " + theme.ui_cpnt_imageslide_dot_area_1 + ",\n    " + theme.ui_cpnt_imageslide_dot_area_2 + " 24px);";
+    return "linear-gradient(\n    to top,\n    ".concat(theme.ui_cpnt_imageslide_dot_area_1, ",\n    ").concat(theme.ui_cpnt_imageslide_dot_area_2, " 24px);");
 }, function (_a) {
     var imageWidth = _a.imageWidth;
-    return (imageWidth === 'responsive' ? '100%' : imageWidth + "px");
+    return (imageWidth === 'responsive' ? '100%' : "".concat(imageWidth, "px"));
 }, function (_a) {
     var imageShapeType = _a.imageShapeType, radius = _a.radius;
     return imageShapeType &&
         {
-            round: "border-radius: " + radius + "px;",
+            round: "border-radius: ".concat(radius, "px;"),
             circular: 'border-radius: 50%;',
             rectangle: 'border-radius: 0;'
         }[imageShapeType];

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

@@ -1,7 +1,7 @@
 import { AnimationEventHandler } from 'react';
 import type { PDSTextType, UiColors } from '../../../common';
 import type { LottieIconNameKeys } from '../../../common/assets/lotties';
-export declare type LottieReactionButtonProps = {
+export type LottieReactionButtonProps = {
     text?: PDSTextType;
     actionText?: PDSTextType;
     iconName?: LottieIconNameKeys;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -80,7 +84,7 @@ function LottieReactionButton(_a) {
             onComplete(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }, void 0), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
 }
 var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: default;\n"], ["\n  background-color: ", ";\n  cursor: default;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-export declare type MainButtonProps = {
+export type MainButtonProps = {
     text?: PDSTextType;
     shapeType?: 'round' | 'rectangle';
     fillType?: 'fill' | 'line';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -193,12 +197,12 @@ function MainButton(_a) {
     };
     var MainButtonVariation = function () {
         if (isLoading) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }, void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
         }
         if (isSubmitting) {
-            return ((0, jsx_runtime_1.jsx)(S_SubmittingMainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true }, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_SubmittingMainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true }, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }) })));
         }
-        return ((0, jsx_runtime_1.jsxs)(S_MainButton, __assign({ "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0)] }, void 0))] }), void 0));
+        return ((0, jsx_runtime_1.jsxs)(S_MainButton, __assign({ "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })] }))] })));
     };
     return MainButtonVariation();
 }
@@ -270,10 +274,10 @@ var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10
     return theme.ui_cpnt_button_line_border_darktheme_enabled;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_darktheme_hover + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_darktheme_hover, ";");
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_darktheme_pressed + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_darktheme_pressed, ";");
 });
 var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
@@ -291,10 +295,10 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_hover + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_hover, ";");
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, ";");
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var colorTheme = _a.colorTheme;
     if (colorTheme === 'none') {
@@ -393,8 +397,8 @@ var S_MainButton = styled_components_1.default.button(templateObject_20 || (temp
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
         {
-            bold: "font-weight: " + theme.fontWeight.bold,
-            regular: "font-weight: " + theme.fontWeight.normal
+            bold: "font-weight: ".concat(theme.fontWeight.bold),
+            regular: "font-weight: ".concat(theme.fontWeight.normal)
         }[fontWeight];
 });
 var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);

package/dist/src/desktop/components/PageTitleTextGroup/CompoundButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-declare type Props = {
+type Props = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
     titleText: PDSTextType;

package/dist/src/desktop/components/PageTitleTextGroup/CompoundButton.js

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -51,7 +55,7 @@ function CompoundButton(_a) {
             onMouseDown(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_CompoundButtonWrapper, __assign({ onClick: handleClick, onMouseDown: handleMouseDown }, { children: [iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), titleText && contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "body2Bold", singleLineMode: "use", colorTheme: "sysTextSecondary", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_CompoundButtonWrapper, __assign({ onClick: handleClick, onMouseDown: handleMouseDown }, { children: [iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), titleText && contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "body2Bold", singleLineMode: "use", colorTheme: "sysTextSecondary", lineLimit: 1, wordBreak: "break_all" })] }))] })));
 }
 var size = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-declare type PageTitleTextGroupProps = {
+type PageTitleTextGroupProps = {
     titleText: PDSTextType;
     tooltipText?: PDSTextType;
     compoundBtnIconName?: FillIconNameKeys | LineIconNameKeys;

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

@@ -36,7 +36,7 @@ function PageTitleTextGroup(_a) {
             onClickCompoundBtn();
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_PageTitleTextGroup, __assign({ "x-pds-name": "PageTitleTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "headingBold", tooltipText: tooltipText }, void 0), displayType === 'edit_btn' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_edit", iconFillType: "fill", iconColorKey: "ui_cpnt_button_icon_primary", baseColorKey: "ui_cpnt_button_fill_base_transparent", state: btn1State, onClick: handleClickBtn1 }, void 0)] }, void 0)), displayType === 'compound_btn' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_CompoundButtonWrapper, { children: (0, jsx_runtime_1.jsx)(CompoundButton_1.default, { iconName: compoundBtnIconName, iconFillType: compoundBtnIconFillType, titleText: compoundBtnTitleText, contentText: compoundBtnContentText, onClick: handleClickCompoundBtn }, void 0) }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_PageTitleTextGroup, __assign({ "x-pds-name": "PageTitleTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "headingBold", tooltipText: tooltipText }), displayType === 'edit_btn' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_edit", iconFillType: "fill", iconColorKey: "ui_cpnt_button_icon_primary", baseColorKey: "ui_cpnt_button_fill_base_transparent", state: btn1State, onClick: handleClickBtn1 })] })), displayType === 'compound_btn' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_CompoundButtonWrapper, { children: (0, jsx_runtime_1.jsx)(CompoundButton_1.default, { iconName: compoundBtnIconName, iconFillType: compoundBtnIconFillType, titleText: compoundBtnTitleText, contentText: compoundBtnContentText, onClick: handleClickCompoundBtn }) })] }))] })));
 }
 var S_PageTitleTextGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  min-height: 40px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  min-height: 40px;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-declare type RadioProps = {
+type RadioProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';

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

@@ -32,16 +32,16 @@ function Radio(_a) {
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return checked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }, void 0));
+                return checked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
             }
             case 'disabled': {
-                return checked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }, void 0) }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }, void 0));
+                return checked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
             }
         }
     };
     return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "desktop", htmlFor: value }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
                         ? 'ui_cpnt_selcontrols_text_default'
-                        : 'ui_cpnt_selcontrols_text_disabled' }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' }, void 0)] }), void 0));
+                        : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
 }
 var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 24px;\n"])));
 var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  position: relative;\n"])));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-export declare type ReactionButtonProps = {
+export type ReactionButtonProps = {
     text?: PDSTextType;
     iconName?: 'ic_thumb_up' | 'ic_heart' | 'ic_thumb_down' | 'ic_reply';
     status?: 'default' | 'select';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -94,7 +98,7 @@ function ReactionButton(_a) {
             return value;
         return (0, numberHelper_1.formatCompactNumber)(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }, void 0), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSValueOption, SegmentedButtonGroupValueOption } from '../../../common/types';
-export declare type SegmentedButtonGroupProps = {
+export type SegmentedButtonGroupProps = {
     size?: 'large' | 'medium' | 'small';
     value: PDSValueOption['value'] | PDSValueOption['value'][];
     valueArray: SegmentedButtonGroupValueOption[];

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -73,8 +77,8 @@ function SegmentedButtonGroup(_a) {
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectionType: selectionType }, { children: valueArray.map(function (_a, index) {
             var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: index === currentButtonIndex, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), String(currentButtonValue)));
-        }) }), void 0));
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: index === currentButtonIndex, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })))] }), String(currentButtonValue)));
+        }) })));
 }
 var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var selectionType = _a.selectionType, theme = _a.theme;
@@ -169,7 +173,7 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_13 || (tem
     return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
 }, function (_a) {
     var isTooltipOpen = _a.isTooltipOpen;
     return !isTooltipOpen && 'display: none';

package/dist/src/desktop/components/SegmentedButtonGroup/constants.js

@@ -9,7 +9,7 @@ exports.ICON_BUTTON_SIZE = {
 exports.ICON_BUTTON_TOOLTIP_SPACING = 8;
 // NOTE - iconSize 크기에 따라 위치를 이동시켜주고, iconButtonSize에 간격까지 8px을 추가해준 값입니다.(IconButton과 tooltip의 간격)
 exports.TOOLTIP_POSITION_SPACING = {
-    large: "calc(" + exports.ICON_BUTTON_SIZE.large + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
-    medium: "calc(" + exports.ICON_BUTTON_SIZE.medium + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
-    small: "calc(" + exports.ICON_BUTTON_SIZE.small + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)"
+    large: "calc(".concat(exports.ICON_BUTTON_SIZE.large, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+    medium: "calc(".concat(exports.ICON_BUTTON_SIZE.medium, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+    small: "calc(".concat(exports.ICON_BUTTON_SIZE.small, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)")
 };

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

@@ -1,10 +1,10 @@
 import type { PDSTextType } from '../../../common';
 import type { SelectHTMLAttributes } from 'react';
-declare type SelectOption = {
+type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];
 };
-declare type SelectProps = {
+type SelectProps = {
     hintText?: PDSTextType;
     defaultValue?: SelectOption;
     value?: SelectOption['value'];

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -63,7 +67,7 @@ function Select(_a) {
             return 'ui_cpnt_select_icon_01';
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 188px;\n"], ["\n  height: 40px;\n  width: 188px;\n"])));
@@ -110,7 +114,7 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     return responsiveMode === 'use' && 'width: 100%';
 }, function (_a) {
     var customWidth = _a.customWidth;
-    return customWidth && "width: " + customWidth + ";";
+    return customWidth && "width: ".concat(customWidth, ";");
 });
 var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  pointer-events: none;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  pointer-events: none;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common/types';
-export declare type Props = {
+export type Props = {
     min: number;
     max: number;
     step?: number;

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

@@ -67,10 +67,10 @@ function Slider(_a, ref) {
         if (calcValue > 100) {
             return "calc(100% - 10px)";
         }
-        return "calc(" + calcValue + "% + " + thumbOffset + "px)";
+        return "calc(".concat(calcValue, "% + ").concat(thumbOffset, "px)");
     };
     var updateFillTrackAndThumb = function (trackElement, thumbElement, thumbPosition) {
-        trackElement.style.backgroundSize = thumbPosition + " 100%";
+        trackElement.style.backgroundSize = "".concat(thumbPosition, " 100%");
         thumbElement.style.left = thumbPosition;
     };
     var changeSliderValue = function (clientX) {
@@ -132,7 +132,7 @@ function Slider(_a, ref) {
         }
         inputRef.current = node;
     };
-    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, value: value, onInput: handleChange, onClick: handleClick }, void 0), !!tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" })] })), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, isDisabled: state === 'disabled' }), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, value: value, onInput: handleChange, onClick: handleClick }), !!tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }) }))] }))] })) })), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" })] }))] })));
 }
 var S_SliderBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
 var S_SliderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: ", ";\n"], ["\n  display: flex;\n  position: relative;\n  width: ", ";\n"])), function (_a) {
@@ -150,7 +150,7 @@ var S_Tooltip = styled_components_1.default.div(templateObject_3 || (templateObj
     return theme.ui_cpnt_button_tooltip_base;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
 });
 var S_Slider = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 20px;\n  width: ", ";\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 20px;\n  width: ", ";\n"])), function (_a) {
     var isDisabled = _a.isDisabled;
@@ -171,18 +171,18 @@ var S_Track = styled_components_1.default.div(templateObject_5 || (templateObjec
 }, function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled;
     return isDisabled
-        ? "linear-gradient(" + theme.ui_cpnt_slider_track_disabled + ", " + theme.ui_cpnt_slider_track_disabled + ")"
-        : "linear-gradient(" + theme.ui_cpnt_slider_track_active + ", " + theme.ui_cpnt_slider_track_active + ")";
+        ? "linear-gradient(".concat(theme.ui_cpnt_slider_track_disabled, ", ").concat(theme.ui_cpnt_slider_track_disabled, ")")
+        : "linear-gradient(".concat(theme.ui_cpnt_slider_track_active, ", ").concat(theme.ui_cpnt_slider_track_active, ")");
 });
 var S_Thumb = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled;
     return isDisabled ? theme.ui_cpnt_slider_thumb_disabled : theme.ui_cpnt_slider_thumb_normal;
 }, function (_a) {
     var theme = _a.theme, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
-    return isDragging && !isDisabled ? "0 0 0 8px " + theme.ui_cpnt_slider_thumb_pressed_circle : 'none';
+    return isDragging && !isDisabled ? "0 0 0 8px ".concat(theme.ui_cpnt_slider_thumb_pressed_circle) : 'none';
 }, function (_a) {
     var theme = _a.theme, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
-    return !isDragging && !isDisabled && "0 0 0 8px " + theme.ui_cpnt_slider_thumb_hover_circle;
+    return !isDragging && !isDisabled && "0 0 0 8px ".concat(theme.ui_cpnt_slider_thumb_hover_circle);
 });
 var S_Range = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  height: 100%;\n  margin: 0;\n  outline: none;\n  position: absolute;\n  width: 100%;\n"], ["\n  clip: rect(0 0 0 0);\n  height: 100%;\n  margin: 0;\n  outline: none;\n  position: absolute;\n  width: 100%;\n"])));
 exports.default = (0, react_1.forwardRef)(Slider);

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-export declare type StatusBlockProps = {
+export type StatusBlockProps = {
     text?: PDSTextType;
     size?: 'large' | 'medium' | 'small';
     state?: 'basic' | 'standby' | 'proceeding' | 'cancel' | 'end' | 'error';
     width?: number | 'responsive';
 };
-export declare type StyleProps = {
+export type StyleProps = {
     $width?: number | 'responsive';
 };
 declare function StatusBlock({ text, size, state, width }: StatusBlockProps): JSX.Element;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -44,7 +48,7 @@ function StatusBlock(_a) {
         medium: 'body1Bold',
         small: 'body2Bold'
     };
-    return ((0, jsx_runtime_1.jsx)(S_StatusBlock, __assign({ "x-pds-name": "StatusBlock", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, state: state, "$width": width }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_StatusBlock, __assign({ "x-pds-name": "StatusBlock", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, state: state, "$width": width }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
@@ -81,7 +85,7 @@ var S_StatusBlock = styled_components_1.default.div(templateObject_10 || (templa
     return theme.spacing.spacingD;
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-export declare type TextButtonProps = {
+export type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     responsiveMode?: 'none' | 'use';