pds-dev-kit-web-test 2.7.501 → 2.7.503

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -918,6 +918,4 @@ export interface UITheme {
     ui_147: string;
     ui_sw_subsidebar_label_text_emphasis: string;
     ui_pa_figure_text_secondary: string;
-    ui_148: string;
-    ui_149: string;
 }

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

@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type BoxItemProps = {
     selectionMode?: 'none' | 'use';
-    state?: 'normal' | 'disabled' | 'read_only';
+    state?: 'normal' | 'disabled';
     checkboxMode?: 'none' | 'use';
     checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
     indicatorMode?: 'none' | 'use';

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

@@ -44,7 +44,7 @@ var paddingSpacing = {
 function BoxItem(_a) {
     var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, _o = _a.descLineLimit, descLineLimit = _o === void 0 ? 2 : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, overrideBorderColorKey = _a.overrideBorderColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
     var handleClick = function () {
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClick) {
@@ -53,7 +53,7 @@ function BoxItem(_a) {
     };
     var handleIBtn1Click = function (e) {
         e.stopPropagation();
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClickIBtn1) {
@@ -62,7 +62,7 @@ function BoxItem(_a) {
     };
     var handleIBtn2Click = function (e) {
         e.stopPropagation();
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClickIBtn2) {
@@ -71,40 +71,28 @@ function BoxItem(_a) {
     };
     var handleIBtn3Click = function (e) {
         e.stopPropagation();
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClickIBtn3) {
             onClickIBtn3(id);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
-                ? undefined
-                : selectState === 'selected'
-                    ? 'blue'
-                    : undefined, overrideBorderColorKey: state === 'disabled'
+    return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' ? undefined : selectState === 'selected' ? 'blue' : undefined, overrideBorderColorKey: state === 'disabled'
                 ? 'ui_cpnt_sheet_base'
                 : selectState === 'selected'
-                    ? state === 'read_only'
-                        ? 'ui_cpnt_sheet_border_04'
-                        : overrideBorderColorKey
-                            ? overrideBorderColorKey
-                            : undefined
+                    ? overrideBorderColorKey
+                        ? overrideBorderColorKey
+                        : undefined
                     : 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 maxWidth: '100%',
-                cursor: state === 'disabled' || state === 'read_only'
-                    ? 'default'
-                    : selectionMode === 'use'
-                        ? 'pointer'
-                        : 'default'
-            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
-                                        ? 'ui_cpnt_textlabel_sys_secondary'
-                                        : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
-                            (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state === 'normal' ? 'normal' : 'disabled', baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
+                cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
+            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
+                            (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
 }
 var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -98,7 +98,7 @@ function ReactionButton(_a) {
             return value;
         return (0, numberHelper_1.formatCompactNumber)(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;

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

@@ -4,7 +4,7 @@ type TextObj = {
     path: string;
     title: PDSTextType;
 };
-type StyleTheme = 'main' | 'content' | 'content2' | 'content3';
+type StyleTheme = 'main' | 'content' | 'content2';
 type UserDesktopTabBarProps = {
     itemArray?: PDSTabItemOption[];
     styleTheme?: StyleTheme;

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

@@ -59,9 +59,6 @@ function UserDesktopTabBar(_a) {
                 if (styleTheme === 'content2') {
                     return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content2", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
                 }
-                if (styleTheme === 'content3') {
-                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content3", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
-                }
                 return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
             }) })));
     }
@@ -91,8 +88,6 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
             return contentStyle;
         case 'content2':
             return content2Style;
-        case 'content3':
-            return content3Style;
         default:
             return mainStyle;
     }
@@ -142,11 +137,7 @@ var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateOb
     var isActive = _a.isActive;
     return isActive && "border-radius: 24px;";
 });
-var content3Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme === 'content2' && 'center';
 }, function (_a) {
@@ -154,7 +145,7 @@ var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObje
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
     var styleTheme = _a.styleTheme, theme = _a.theme;
-    return !['content2', 'content3'].includes(styleTheme) && "1px solid ".concat(theme.ui_cpnt_divider);
+    return styleTheme !== 'content2' && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
@@ -162,10 +153,9 @@ var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObje
             return '64px';
         case 'content2':
             return '96px';
-        case 'content3':
         default:
             return '48px';
     }
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type BoxItemProps = {
     selectionMode?: 'none' | 'use';
-    state?: 'normal' | 'disabled' | 'read_only';
+    state?: 'normal' | 'disabled';
     checkboxMode?: 'none' | 'use';
     checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
     indicatorMode?: 'none' | 'use';

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

@@ -44,7 +44,7 @@ var paddingSpacing = {
 function BoxItem(_a) {
     var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descLineLimit, descLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
     var handleClick = function () {
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClick) {
@@ -53,7 +53,7 @@ function BoxItem(_a) {
     };
     var handleIBtn1Click = function (e) {
         e.stopPropagation();
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClickIBtn1) {
@@ -62,7 +62,7 @@ function BoxItem(_a) {
     };
     var handleIBtn2Click = function (e) {
         e.stopPropagation();
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClickIBtn2) {
@@ -71,39 +71,27 @@ function BoxItem(_a) {
     };
     var handleIBtn3Click = function (e) {
         e.stopPropagation();
-        if (state === 'disabled' || state === 'read_only') {
+        if (state === 'disabled') {
             return;
         }
         if (onClickIBtn3) {
             onClickIBtn3(id);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
-                ? undefined
-                : selectState === 'selected'
-                    ? 'blue'
-                    : undefined, overrideBorderColorKey: state === 'disabled'
+    return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' ? undefined : selectState === 'selected' ? 'blue' : undefined, overrideBorderColorKey: state === 'disabled'
                 ? 'ui_cpnt_sheet_base'
                 : selectState === 'selected'
-                    ? state === 'read_only'
-                        ? 'ui_cpnt_sheet_border_04'
-                        : overrideBorderColorKey
-                            ? overrideBorderColorKey
-                            : undefined
+                    ? overrideBorderColorKey
+                        ? overrideBorderColorKey
+                        : undefined
                     : 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                cursor: state === 'disabled' || state === 'read_only'
-                    ? 'default'
-                    : selectionMode === 'use'
-                        ? 'pointer'
-                        : 'default'
-            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
-                                        ? 'ui_cpnt_textlabel_sys_secondary'
-                                        : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
-                            (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
+                cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
+            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
+                            (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
 }
 var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -97,7 +97,7 @@ function ReactionButton(_a) {
             return value;
         return (0, numberHelper_1.formatCompactNumber)(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n"])));
 var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -119,9 +119,9 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "px"),
         maxHeight: "".concat(maxHeight, "px"),
-        width: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px"),
+        width: "100%",
         maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: minWidth ? "".concat(minWidth, "px") : '0px'
+        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
     };
     var onClickSection = function () {
         if (!isEditMode) {
@@ -152,17 +152,17 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
                         width: '100%',
                         height: '100%'
                     } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                            // minHeight: customSectionStyles.minHeight,
                             paddingTop: padding.top,
                             paddingBottom: padding.bottom,
                             paddingRight: padding.right,
                             paddingLeft: padding.left,
-                            width: customSectionStyles.width,
-                            height: ccbCode === types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL ? 'auto' : '100%',
-                            maxHeight: customSectionStyles.maxHeight,
-                            minHeight: customSectionStyles.minHeight,
-                            maxWidth: customSectionStyles.maxWidth,
-                            minWidth: customSectionStyles.minWidth
-                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
+                            width: '100%',
+                            height: ccbCode === types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL ? 'auto' : '100%'
+                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
+                                width: customSectionStyles.width,
+                                maxWidth: customSectionStyles.maxWidth
+                            } }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
 });
 var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  /* height: 100%; */\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  /* height: 100%; */\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));

package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,9 +16,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompositions = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
-var react_i18next_1 = require("react-i18next");
-var styled_components_1 = __importDefault(require("styled-components"));
 var compositionQueryContext_1 = require("../compositionQueryContext");
 var Composition_1 = __importDefault(require("./Composition"));
 function createCompositions(_a) {
@@ -30,53 +23,13 @@ function createCompositions(_a) {
     var isQueryDataConnected = valueType === 'DATA' || valueType === 'DELEGATEDDATA';
     // 직접 입력 유형인 경우
     if (!isQueryDataConnected) {
-        var valueTypeCompositions = compositions.filter(function (composition) { return !(composition === null || composition === void 0 ? void 0 : composition.isDefault); });
-        // MANUAL ITEM이 없는 경우
-        if (!valueTypeCompositions.length) {
-            return [(0, jsx_runtime_1.jsx)(EmptyString, {}, "empty-manual-item")];
-        }
+        var valueTypeCompositions = compositions.filter(function (composition) { return !!(composition === null || composition === void 0 ? void 0 : composition.ccbManualItemUuid); });
         return valueTypeCompositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition, { ccbCode: componentBlockCode }), composition.id)); });
     }
-    if (!compositions.length) {
-        return [(0, jsx_runtime_1.jsx)("div", { children: "EMPTY TEXT" }, "empty")];
-    }
-    // 데이터 연결 유형이나, 쿼리 데이터나 키가 없는 경우
-    if (queryPath === 'NONE' || !queryPath || !queryData) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
-    }
-    var parsedQueryPath = removeFirstSegment(queryPath);
-    var queryDataValue = queryData[parsedQueryPath];
-    var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
-    if (!queryDataValue) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC5F0\uACB0\uB41C \uB370\uC774\uD130\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }, "not-found")];
-    }
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-    if (!queryDataValue.length) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uBCF4\uC5EC\uC904 \uCF58\uD150\uCE20\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "empty-item")];
-    }
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
+    var queryComposition = compositions.find(function (composition) { return !composition.ccbManualItemUuid; });
+    if (!queryDataValue)
+        return [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})];
     return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition, { ccbCode: componentBlockCode })) }), index)); });
 }
 exports.createCompositions = createCompositions;
-function removeFirstSegment(path) {
-    var segments = path.split('/');
-    return segments.slice(1).join('/');
-}
-function EmptyString() {
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
-}
-var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  padding: ", ";\n  text-align: center;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  padding: ", ";\n  text-align: center;\n  word-break: keep-all;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.desktopFontSize.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var templateObject_1;

package/dist/src/sub/DynamicLayout/mock_section.json

@@ -231,7 +231,7 @@
                                         "CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE": 1
                                     },
                                     "CB_STYLE_PROP_BORDER": {
-                                        "CB_STYLE_PROP_BORDER_SPEC_COLOR": "red",
+                                        "CB_STYLE_PROP_BORDER_SPEC_COLOR": "#FFFFFFFF",
                                         "CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER": null,
                                         "CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE": null,
                                         "CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER": null,
@@ -747,7 +747,7 @@
                                 "CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER": null
                             },
                             "CB_STYLE_PROP_BORDER": {
-                                "CB_STYLE_PROP_BORDER_SPEC_COLOR": "#cf1313fc",
+                                "CB_STYLE_PROP_BORDER_SPEC_COLOR": "#000000FF",
                                 "CB_STYLE_PROP_BORDER_SPEC_RADIUS": {
                                     "bl": 0,
                                     "br": 0,
@@ -755,7 +755,7 @@
                                     "tr": 0
                                 },
                                 "CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX": true,
-                                "CB_STYLE_PROP_BORDER_SPEC_STYLE": "SOLID",
+                                "CB_STYLE_PROP_BORDER_SPEC_STYLE": "NONE",
                                 "CB_STYLE_PROP_BORDER_SPEC_WIDTH": 2
                             }
                         },
@@ -4579,7 +4579,7 @@
                                 "CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER": null
                             },
                             "CB_STYLE_PROP_BORDER": {
-                                "CB_STYLE_PROP_BORDER_SPEC_COLOR": "#cf1313fc",
+                                "CB_STYLE_PROP_BORDER_SPEC_COLOR": "#000000FF",
                                 "CB_STYLE_PROP_BORDER_SPEC_RADIUS": {
                                     "bl": 0,
                                     "br": 0,
@@ -4587,7 +4587,7 @@
                                     "tr": 0
                                 },
                                 "CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX": true,
-                                "CB_STYLE_PROP_BORDER_SPEC_STYLE": "SOLID",
+                                "CB_STYLE_PROP_BORDER_SPEC_STYLE": "NONE",
                                 "CB_STYLE_PROP_BORDER_SPEC_WIDTH": 2
                             }
                         },