pds-dev-kit-web-test 2.2.99 → 2.2.244

package/dist/src/mobile/components/DatePicker/utils.d.ts

@@ -0,0 +1,16 @@
+export declare function getWeeklyInfo(date: Date): {
+    year: number;
+    month: number;
+    day: number;
+    weekNumber: number;
+    weekNumberMonth: number;
+    weekNumberYear: number;
+    startYear: number;
+    endYear: number;
+    startMonth: number;
+    endMonth: number;
+    startDay: number;
+    endDay: number;
+    startDate: string;
+    endDate: string;
+};

package/dist/src/mobile/components/DatePicker/utils.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWeeklyInfo = void 0;
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+function getWeeklyInfo(date) {
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var dayOfWeek = date.getDay();
+    dayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    var mondayDate = new Date(date);
+    mondayDate.setDate(date.getDate() - dayOfWeek);
+    var sundayDate = new Date(date);
+    sundayDate.setDate(date.getDate() + (6 - dayOfWeek));
+    var firstDayOfMonth = new Date(year, month - 1, 1);
+    var firstDayOffset = firstDayOfMonth.getDay();
+    firstDayOffset = firstDayOffset === 0 ? 6 : firstDayOffset - 1;
+    var daysSinceFirstMonday = Math.floor((day - 1 + firstDayOffset) / 7) + 1;
+    var weekNumber = daysSinceFirstMonday;
+    if (weekNumber === 1) {
+        var daysInCurrentWeekPrevMonth = dayOfWeek;
+        var daysInCurrentWeekCurrentMonth = 7 - dayOfWeek;
+        if (daysInCurrentWeekPrevMonth > daysInCurrentWeekCurrentMonth) {
+            var prevMonth = month === 1 ? 12 : month - 1;
+            var prevYear = month === 1 ? year - 1 : year;
+            var lastDayPrevMonth = new Date(prevYear, prevMonth, 0).getDate();
+            var firstDayPrevMonth = new Date(prevYear, prevMonth - 1, 1);
+            var firstDayPrevMonthOffset = firstDayPrevMonth.getDay();
+            firstDayPrevMonthOffset = firstDayPrevMonthOffset === 0 ? 6 : firstDayPrevMonthOffset - 1;
+            weekNumber = Math.ceil((lastDayPrevMonth + firstDayPrevMonthOffset) / 7);
+        }
+    }
+    var lastDayOfMonth = new Date(year, month, 0).getDate();
+    if (day > lastDayOfMonth - 7) {
+        var remainingDaysInMonth = lastDayOfMonth - day;
+        var daysInNextMonth = 6 - dayOfWeek - remainingDaysInMonth;
+        if (daysInNextMonth > remainingDaysInMonth + 1) {
+            weekNumber = 1;
+        }
+    }
+    var weekNumberMonth = month;
+    var weekNumberYear = year;
+    if (weekNumber > 4 && day < 8) {
+        weekNumberMonth = month === 1 ? 12 : month - 1;
+        weekNumberYear = month === 1 ? year - 1 : year;
+    }
+    else if (weekNumber === 1 && day > 20) {
+        weekNumberMonth = month === 12 ? 1 : month + 1;
+        weekNumberYear = month === 12 ? year + 1 : year;
+    }
+    return {
+        year: year,
+        month: month,
+        day: day,
+        weekNumber: weekNumber,
+        weekNumberMonth: weekNumberMonth,
+        weekNumberYear: weekNumberYear,
+        startYear: mondayDate.getFullYear(),
+        endYear: sundayDate.getFullYear(),
+        startMonth: mondayDate.getMonth() + 1,
+        endMonth: sundayDate.getMonth() + 1,
+        startDay: mondayDate.getDate(),
+        endDay: sundayDate.getDate(),
+        startDate: dateHelper_1.DateHelper.formatDate(mondayDate),
+        endDate: dateHelper_1.DateHelper.formatDate(sundayDate)
+    };
+}
+exports.getWeeklyInfo = getWeeklyInfo;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { DropdownGroupInfo, DropdownValueOption } from '../../../common/types';
 type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
@@ -15,7 +16,8 @@ type Props = {
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
     fontWeight?: 'bold' | 'regular';
     groupInfoArray?: DropdownGroupInfo[];
+    scrollVisibleType?: ScrollVisibleType;
     onChange?: (option: DropdownValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, scrollVisibleType, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -57,11 +57,11 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     _e = _a.size, 
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, onChange = _a.onChange;
-    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
-    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
-    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'visible' : _j, onChange = _a.onChange;
+    var _k = (0, react_1.useState)(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _l = (0, react_1.useState)(null), selectedValue = _l[0], setSelectedValue = _l[1];
+    var _m = (0, react_1.useState)(null), contextMenuSizeOffset = _m[0], setContextMenuSizeOffset = _m[1];
+    var _o = (0, react_1.useState)(null), dropdownPositionOffset = _o[0], setDropdownPositionOffset = _o[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     /**
@@ -178,10 +178,14 @@ function Dropdown(_a) {
     };
     var getTextColorTheme = function () {
         if (colorTheme === 'none') {
-            if (isFocused) {
-                return 'sysTextPrimary';
-            }
             if (state === 'normal') {
+                var isHintTextShow = !(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;
+                if (isHintTextShow) {
+                    return 'sysTextSecondary';
+                }
+                if (isFocused) {
+                    return 'sysTextPrimary';
+                }
                 return 'sysTextPrimary';
             }
             if (state === 'read_only') {
@@ -200,10 +204,14 @@ function Dropdown(_a) {
     };
     var getTextColorOverride = function () {
         if (colorTheme === 'dark') {
-            if (isFocused) {
-                return 'ui_cpnt_dropdown_text_darktheme_enabled';
-            }
             if (state === 'normal') {
+                var isHintTextShow = !(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;
+                if (isHintTextShow) {
+                    return 'ui_cpnt_dropdown_text_darktheme_hinttext';
+                }
+                if (isFocused) {
+                    return 'ui_cpnt_dropdown_text_darktheme_enabled';
+                }
                 return 'ui_cpnt_dropdown_text_darktheme_hint';
             }
             if (state === 'read_only') {
@@ -253,7 +261,7 @@ function Dropdown(_a) {
         });
     }
     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", ref: dropdownRef, 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, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: groupInfoArray
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth(), scrollVisibleType: scrollVisibleType }, { children: groupInfoArray
                             ? Object.keys(resultByGroup).map(function (key) {
                                 var _a, _b, _c;
                                 return ((0, jsx_runtime_1.jsxs)(S_Group, __assign({ size: size, hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _a === void 0 ? void 0 : _a.title) }, { children: [((_b = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _b === void 0 ? void 0 : _b.title) && ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (_c = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _c === void 0 ? void 0 : _c.title, colorTheme: "sysTextSecondary", styleTheme: "caption1Bold", letterSpacing: "0.15em" }) }))), resultByGroup[key].map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { 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, state: el.state, displayType: displayType }) }), el.value)); })] }), key));

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 export type FloatingActionButtonProps = {
     text?: PDSTextType;
     displayType?: 'icon_only' | 'text_only' | 'icon_text';
     size?: 'xlarge' | 'large';
     fontWeight?: 'bold' | 'regular';
     iconFillType?: 'fill' | 'line';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     colorTheme?: 'none' | 'theme1' | 'theme2' | 'theme3';
     state?: 'normal' | 'disable';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+import type { PDSIconType, UiColors } from '../../../common';
 export type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle' | 'round';
@@ -8,7 +8,7 @@ export type IconButtonProps = {
     borderColorKey?: UiColors;
     iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
     iconFillType?: 'fill' | 'line';
-    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconName: PDSIconType;
     iconColorKey?: UiColors;
     shadow?: 'hidden' | 'visible';
     colorTheme?: 'none' | 'line1' | 'line2';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 export type MainButtonProps = {
     text?: PDSTextType;
     shapeType?: 'round' | 'rectangle';
@@ -10,8 +10,8 @@ export type MainButtonProps = {
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
-    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
+    iconName?: PDSIconType;
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';
     isLoading?: boolean;

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

@@ -333,21 +333,32 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
+var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1Disabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2Disabled;
 });
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -356,11 +367,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
 });
-var S_MainButton = styled_components_1.default.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_MainButton = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
 }, function (_a) {
@@ -380,6 +394,6 @@ var S_MainButton = styled_components_1.default.button(templateObject_20 || (temp
             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);
+var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = MainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;

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

@@ -1,15 +1,15 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
 type Props = {
     titleType?: 'text' | 'profile' | 'image';
     titleText?: PDSTextType;
     captionText?: PDSTextType;
     leftBtnMode?: 'none' | 'back' | 'menu' | 'close';
     displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2';
-    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconName?: PDSIconType;
     iBtn1IconFillType?: 'fill' | 'line';
     iBtn1IconColorKey?: UiColors;
-    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn2IconName?: PDSIconType;
     iBtn2IconFillType?: 'fill' | 'line';
     iBtn2IconColorKey?: UiColors;
     dividerMode?: 'none' | 'solid';

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

@@ -7,9 +7,11 @@ type TextObj = {
 };
 type MobileTabBarProps = {
     itemArray?: PDSTabItemOption[];
+    /** @description styleTheme이 'main'일 때만 colorTheme이 존재합니다. */
     colorTheme?: MobileTabBarColorThemeType;
+    styleTheme?: 'main' | 'content';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };
-declare function MobileTabBar({ itemArray, colorTheme, textArray }: MobileTabBarProps): JSX.Element;
+declare function MobileTabBar({ itemArray, colorTheme, styleTheme, textArray }: MobileTabBarProps): JSX.Element;
 export default MobileTabBar;

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

@@ -32,51 +32,84 @@ var mobileTabBarThemes = {
         activeTextColor: 'sysTextPrimary',
         inActiveTextColor: 'sysTextTertiary',
         activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
+    },
+    content: {
+        activeTextColor: 'sysTextPrimary',
+        inActiveTextColor: 'sysTextTertiary'
     }
 };
 function MobileTabBar(_a) {
-    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
+    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
+        var hasScroll_1 = styleTheme === 'content' ? true : itemArray.length > 3;
         var handleClickTabItem_1 = function (item, e) {
             if (item.onClick) {
                 item.onClick(e);
             }
         };
-        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" }) }), index)); }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, styleTheme: styleTheme, 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: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
+                                ? item.isActive
+                                    ? mobileTabBarThemes.content.activeTextColor
+                                    : mobileTabBarThemes.content.inActiveTextColor
+                                : item.isActive
+                                    ? mobileTabBarThemes[colorTheme].activeTextColor
+                                    : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && styleTheme !== 'content' && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) })));
     }
     if (textArray) {
+        var hasScroll_2 = textArray.length > 3;
         var handleClick_1 = function (value) {
             if (value) {
                 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" }) }), value.path)); }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2, styleTheme: styleTheme }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, styleTheme: styleTheme, 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", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && styleTheme !== 'content' && ((0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme }))] }), value.path)); }) })) })));
     }
     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 S_Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: -1px;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  right: 0;\n"], ["\n  background-color: ", ";\n  bottom: -1px;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  right: 0;\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
+});
+var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  flex: 1;\n  justify-content: center;\n  padding: 0 ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div {\n    white-space: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  flex: 1;\n  justify-content: center;\n  padding: 0 ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div {\n    white-space: ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive, theme = _a.theme;
     return isActive && theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
+    var hasScroll = _a.hasScroll;
+    return (hasScroll ? 'inline-flex' : 'flex');
 }, function (_a) {
-    var isActive = _a.isActive;
-    return !isActive && "display: none;";
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return (styleTheme === 'main' ? theme.spacing.spacingD : "10px");
+}, function (_a) {
+    var hasScroll = _a.hasScroll;
+    return (hasScroll ? 'nowrap' : 'normal');
 });
-var S_TabBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'content' && "1px solid ".concat(theme.ui_cpnt_divider);
+});
+var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  height: ", ";\n  width: ", ";\n\n  & > :first-child {\n    padding-left: ", ";\n  }\n\n  & > :last-child {\n    padding-right: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  height: ", ";\n  width: ", ";\n\n  & > :first-child {\n    padding-left: ", ";\n  }\n\n  & > :last-child {\n    padding-right: ", ";\n  }\n"])), function (_a) {
+    var hasScroll = _a.hasScroll;
+    return (hasScroll ? 'inline-flex' : 'flex');
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '48px' : '46px');
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '100%' : undefined);
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme === 'content' && theme.spacing.spacingE;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme === 'content' && theme.spacing.spacingE;
 });
 exports.default = MobileTabBar;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Path } from 'react-hook-form';
+import { CurrencyCode } from '../../../core/pricing';
+import type { IFormValues, PDSTextType } from '../../../common';
+import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
+export declare const DEFAULT_DECIMAL_PLACES: {
+    readonly KRW: 0;
+    readonly USD: 2;
+};
+type Props = {
+    name: Path<IFormValues>;
+    hintText?: PDSTextType;
+    defaultAmount?: number;
+    size?: 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
+    state?: 'normal' | 'read_only' | 'disabled';
+    dropdownState?: 'normal' | 'read_only';
+    customWidth?: string;
+    baseCurrency?: CurrencyCode;
+    currencies?: CurrencyCode[];
+    decimalPlaces?: Record<string, number>;
+    exchangeRates?: {
+        [key: string]: number;
+    };
+    hintTextFontWeight?: 'normal' | 'bold';
+    validation?: any;
+    useRequiredValidation?: 'none' | 'use';
+    useDotBadge?: 'none' | 'use';
+    deleteBtnMode?: 'none' | 'use';
+    minPriceAmount?: string | number;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onCurrencyChange?: (selectedCurrency: string) => void;
+    onValueChange?: (data: {
+        selectedCurrency: string;
+        baseCurrencyValue: number;
+        calculatedValue: number;
+        displayValue: string;
+    }) => void;
+} & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
+declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
+export default PriceTextField;