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

package/dist/src/mobile/components/Dropdown/Dropdown.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];
@@ -190,7 +194,7 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }) }, el.value)); }) })) })))] })));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -244,7 +248,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_5 || (templateOb
         }[size];
 }, function (_a) {
     var customWidth = _a.customWidth;
-    return customWidth && "width: " + customWidth + ";";
+    return customWidth && "width: ".concat(customWidth, ";");
 });
 var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
@@ -360,7 +364,7 @@ var S_Select = styled_components_1.default.div(templateObject_14 || (templateObj
         }[size];
 }, function (_a) {
     var customWidth = _a.customWidth;
-    return customWidth && "width: " + customWidth + ";";
+    return customWidth && "width: ".concat(customWidth, ";");
 }, transitionStyle_1.InputTransition, function (_a) {
     var state = _a.state;
     return state === 'normal' && normalActionColor;

package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-export declare type FloatingActionButtonProps = {
+export type FloatingActionButtonProps = {
     text?: PDSTextType;
     displayType?: 'icon_only' | 'text_only' | 'icon_text';
     size?: 'xlarge' | 'large';

package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.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];
@@ -57,7 +61,7 @@ function FloatingActionButton(_a) {
         }
         return 'ui_cpnt_button_icon_on_primary';
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'icon_only' && ((0, jsx_runtime_1.jsx)(S_ButtonIconOnly, __assign({ "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }, void 0) }), void 0)), displayType !== 'icon_only' && ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [displayType === 'text_only' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined }, void 0)), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined }, void 0)] }, void 0))] }), void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'icon_only' && ((0, jsx_runtime_1.jsx)(S_ButtonIconOnly, __assign({ "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }) }))), displayType !== 'icon_only' && ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [displayType === 'text_only' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined })), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined })] }))] })))] }));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"])));
 var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"], ["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"])));
@@ -84,7 +88,7 @@ var S_ButtonIconOnly = styled_components_1.default.button(templateObject_5 || (t
 });
 var S_Button = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  padding: ", ";\n  ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  padding: ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return "0 " + theme.spacing.spacingE;
+    return "0 ".concat(theme.spacing.spacingE);
 }, floatingActionButtonStyle);
 exports.default = FloatingActionButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/components/HorizontalFormGroup/HorizontalFormGroup.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-declare type HorizontalFormGroupProps = {
+type HorizontalFormGroupProps = {
     labelText: PDSTextType;
     captionText?: PDSTextType;
     inputForm: JSX.Element;

package/dist/src/mobile/components/HorizontalFormGroup/HorizontalFormGroup.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];
@@ -40,7 +44,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
-    return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 }, void 0)) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }, void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }, void 0), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" })) })), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })] }))] })));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";

package/dist/src/mobile/components/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
-export declare type IconButtonProps = {
+export type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle' | 'round';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';

package/dist/src/mobile/components/IconButton/IconButton.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,7 +77,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }) })));
 }
 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;
@@ -118,7 +122,7 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     }
 }, function (_a) {
     var theme = _a.theme;
-    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n  ;";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, "\n  ;");
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
@@ -146,7 +150,7 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_13 || (templat
     return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
 }, function (_a) {
     var theme = _a.theme, shadow = _a.shadow;
-    return shadow === 'visible' && "box-shadow: " + theme.boxShadow.elevation2;
+    return shadow === 'visible' && "box-shadow: ".concat(theme.boxShadow.elevation2);
 }, function (_a) {
     var fillType = _a.fillType;
     return fillType &&

package/dist/src/mobile/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/mobile/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": "mobile", 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": "mobile", 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/mobile/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/mobile/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];
@@ -81,7 +85,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": "mobile", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: state === 'normal' ? handleTouchStart : undefined, onTouchEnd: state === 'normal' ? handleTouchEnd : undefined, onMouseDown: handleTouchStart, onClick: handleTouchEnd, 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": "mobile", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: state === 'normal' ? handleTouchStart : undefined, onTouchEnd: state === 'normal' ? handleTouchEnd : undefined, onMouseDown: handleTouchStart, onClick: handleTouchEnd, 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/mobile/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/mobile/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_MainButton, __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_MainButton, __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": "mobile", 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": "mobile", 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();
 }
@@ -267,7 +271,7 @@ 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_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;
@@ -285,7 +289,7 @@ 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_pressed + ";";
+    return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, ";");
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var colorTheme = _a.colorTheme;
     if (colorTheme === 'none') {
@@ -372,8 +376,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/mobile/components/MobileAlertDialog/MobileAlertDialog.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-declare type MobileAlertDialogProps = {
+type MobileAlertDialogProps = {
     iconMode?: 'none' | 'success' | 'error' | 'warning' | 'information';
     titleText?: PDSTextType;
     contentText: PDSTextType;

package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js

@@ -48,14 +48,14 @@ function MobileAlertDialog(_a) {
     var btn3Mode = ['tbtn_amount3'];
     var iconContainer = function () {
         if (iconMode !== 'none') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" }, void 0)), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" }, void 0)), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" }, void 0)), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }, void 0))] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
         }
     };
     var renderingSpacing = function () {
         if (titleText || iconMode !== 'none')
-            return (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0);
+            return (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" });
     };
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}, void 0), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MobileAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [iconContainer(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" }, void 0)), renderingSpacing(), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body2Regular" }, void 0))] }, void 0), (0, jsx_runtime_1.jsxs)(S_Footer, __assign({ btnStack: btnStack }, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: btnStack === 'side' ? 'width' : 'height' }, void 0), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: btnStack === 'side' ? 'width' : 'height' }, void 0), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }, void 0))] }), void 0)] }), void 0)] }, void 0), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MobileAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [iconContainer(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), renderingSpacing(), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body2Regular" }))] }), (0, jsx_runtime_1.jsxs)(S_Footer, __assign({ btnStack: btnStack }, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: btnStack === 'side' ? 'width' : 'height' }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: btnStack === 'side' ? 'width' : 'height' }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }))] }))] }))] }), container);
 }
 var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
-declare type Props = {
+type Props = {
     titleType?: 'text' | 'profile' | 'image';
     titleText?: PDSTextType;
     captionText?: PDSTextType;

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -55,33 +55,33 @@ function MobileHeaderBar(_a) {
     var leftIcon = function () {
         var iconName = getLeftIconName();
         if (!iconName) {
-            return (0, jsx_runtime_1.jsx)("div", {}, void 0);
+            return (0, jsx_runtime_1.jsx)("div", {});
         }
-        return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }, void 0) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
     };
     var title = function () {
         switch (titleType) {
             case 'text': {
                 if (captionText) {
-                    return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0)] }, void 0));
+                    return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
                 }
-                return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0) }, void 0));
+                return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
             }
             case 'profile': {
-                return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0));
+                return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
             }
             case 'image': {
-                return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }, void 0));
+                return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }));
             }
         }
     };
     var iBtn = function () {
         if (displayType === 'none') {
-            return (0, jsx_runtime_1.jsx)("div", {}, void 0);
+            return (0, jsx_runtime_1.jsx)("div", {});
         }
-        return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State }, void 0)), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }, void 0))] }, void 0));
+        return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), leftIcon()] }, void 0), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }, void 0), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), iBtn()] }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
 }
 var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"])), function (_a) {
     var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
@@ -91,7 +91,7 @@ var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (tem
     return theme.ui_cpnt_headerbar_base_area;
 }, function (_a) {
     var hasBorder = _a.hasBorder, theme = _a.theme;
-    return hasBorder && "1px solid " + theme.ui_cpnt_divider;
+    return hasBorder && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
     var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
     return (expand || hasCaptionText ? 'auto' : '56px');

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import type { PDSTabItemOption, PDSTextType } from '../../../common/types';
-declare type MobileTabBarColorThemeType = 'none' | 'grey_01';
-declare type TextObj = {
+type MobileTabBarColorThemeType = 'none' | 'grey_01';
+type TextObj = {
     path: string;
     title: PDSTextType;
 };
-declare type MobileTabBarProps = {
+type MobileTabBarProps = {
     itemArray?: PDSTabItemOption[];
     colorTheme?: MobileTabBarColorThemeType;
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js

@@ -46,7 +46,7 @@ function MobileTabBar(_a) {
         };
         return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive
                         ? mobileTabBarThemes[colorTheme].activeTextColor
-                        : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }, void 0) }), index)); }) }), void 0));
+                        : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }) }), index)); }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -54,9 +54,9 @@ function MobileTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0) }), value.path)); }) }), void 0));
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), value.path)); }) })));
     }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  padding: 0 ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  padding: 0 ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive, theme = _a.theme;

package/dist/src/mobile/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/mobile/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": "mobile", htmlFor: value }, { children: [icon(), (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  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\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/mobile/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';