pds-dev-kit-web-test 2.5.18 → 2.5.19

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { IFormValues, PDSTextType, UiColors, PDSIconType } from '../../../common';
 export type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
@@ -22,8 +22,8 @@ export type TextFieldProps = {
     autoMaxRows?: number;
     inputType?: string;
     state?: 'normal' | 'read_only' | 'disabled';
-    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
-    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconName?: PDSIconType;
+    iBtn2IconName?: PDSIconType;
     iBtn1IconFillType?: 'line' | 'fill';
     iBtn2IconFillType?: 'line' | 'fill';
     overrideIBtn1IconColorKey?: UiColors;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
 import type { IconCaseTooltipPositionType } from '../../../common/types/systemUI';
 export type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
@@ -9,7 +9,7 @@ export type UploadIconButtonProps = {
     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/desktop/components/UploadMainButton/UploadMainButton.d.ts

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

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

@@ -3,6 +3,7 @@ import type { PDSTabItemOption } from '../../../common/types';
 export type ItemType = PDSTabItemOption;
 type UserDesktopSideTabProps = {
     itemArray: ItemType[];
+    spacingMode?: 'use' | 'none';
 };
-declare function UserDesktopSideTab({ itemArray }: UserDesktopSideTabProps): JSX.Element;
+declare function UserDesktopSideTab({ itemArray, spacingMode }: UserDesktopSideTabProps): JSX.Element;
 export default UserDesktopSideTab;

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

@@ -22,22 +22,22 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function UserDesktopSideTab(_a) {
-    var itemArray = _a.itemArray;
+    var itemArray = _a.itemArray, _b = _a.spacingMode, spacingMode = _b === void 0 ? 'use' : _b;
     var handleClickTabItem = function (item, e) {
         if (item.onClick) {
             item.onClick(e);
         }
     };
     return ((0, jsx_runtime_1.jsx)("div", __assign({ "x-pds-name": "UserDesktopSideTab", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) {
-            return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ onClick: function (e) { return handleClickTabItem(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" }) }), index));
+            return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ spacingMode: spacingMode, onClick: function (e) { return handleClickTabItem(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" }) }), index));
         }) })));
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_userdesktopsidetab_base_area;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+    var theme = _a.theme, spacingMode = _a.spacingMode;
+    return (spacingMode === 'use' ? theme.spacing.spacingE : 0);
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;

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

@@ -4,9 +4,10 @@ type TextObj = {
     path: string;
     title: PDSTextType;
 };
+type StyleTheme = 'main' | 'content' | 'content2';
 type UserDesktopTabBarProps = {
     itemArray?: PDSTabItemOption[];
-    styleTheme?: 'main';
+    styleTheme?: StyleTheme;
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };

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

@@ -52,7 +52,15 @@ function UserDesktopTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, 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)); }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", styleTheme: styleTheme }, { children: itemArray.map(function (item, index) {
+                if (styleTheme === 'content') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", 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' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+                }
+                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));
+                }
+                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));
+            }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -60,7 +68,7 @@ function UserDesktopTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", styleTheme: styleTheme }, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
                     handleClick_1(item);
                 } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), item.path)); }) })));
     }
@@ -75,7 +83,11 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
-            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
+            return mainStyle;
+        case 'content':
+            return contentStyle;
+        case 'content2':
+            return content2Style;
         default:
             return mainStyle;
     }
@@ -99,12 +111,51 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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 contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\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  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive && theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_19;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
+});
+var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive ? theme.ui_123 : theme.ui_cpnt_sheet_base_03;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    return "0 ".concat(theme.spacing.spacingD);
+}, function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "border-radius: 24px;";
+});
+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) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme !== 'content2' && "1px solid ".concat(theme.ui_cpnt_divider);
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    switch (styleTheme) {
+        case 'content':
+            return '64px';
+        case 'content2':
+            return '96px';
+        default:
+            return '48px';
+    }
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/hybrid/components/Icon/Icon.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+import type { PDSIconType, UiColors } from '../../../common';
+type FillType = 'line' | 'fill';
 export type IconProps = {
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     size?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
     colorKey?: UiColors;
-    fillType?: 'line' | 'fill';
+    fillType?: FillType;
 } & Record<string, any>;
 declare const Icon: ({ iconName, size, colorKey, fillType }: IconProps) => JSX.Element;
 export default Icon;

package/dist/src/hybrid/components/Icon/Icon.js

@@ -6,15 +6,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("styled-components");
 var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
+var image_1 = require("../../../common/assets/icons/image");
 var line_1 = __importDefault(require("../../../common/assets/icons/line"));
+var icon_1 = require("../../../common/types/icon");
 var Icon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
     var theme = (0, styled_components_1.useTheme)();
     var isFixedSize = iconName.includes('_20') || iconName.includes('_32') || iconName.includes('_40');
     var DefaultIcon = line_1.default.ic_unavailable;
-    var SelectedIcon = fillType === 'line'
-        ? line_1.default[iconName] || fill_1.default[iconName]
-        : fill_1.default[iconName] || line_1.default[iconName];
-    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } }));
+    var svgIcons = {
+        line: line_1.default[iconName] || fill_1.default[iconName],
+        fill: fill_1.default[iconName] || line_1.default[iconName]
+    };
+    var SelectedSVGIcon = svgIcons[fillType];
+    if (icon_1.imageIconKeys.includes(iconName)) {
+        return ((0, jsx_runtime_1.jsx)("img", { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", src: image_1.imageIconSrcSet[iconName], width: size, height: size }));
+    }
+    if (icon_1.fillIconkeys.includes(iconName) || icon_1.lineIconkeys.includes(iconName)) {
+        return SelectedSVGIcon ? ((0, jsx_runtime_1.jsx)(SelectedSVGIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } }));
+    }
+    return SelectedSVGIcon ? ((0, jsx_runtime_1.jsx)(SelectedSVGIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 export type BasicListItemProps = {
     selectionMode?: 'none' | 'check' | 'radio';
     titleText: PDSTextType;
@@ -10,13 +10,13 @@ export type BasicListItemProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     imageShapeType?: 'round' | 'circular' | 'rectangle';
     imageSrc?: string;
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     iconFillType?: 'fill' | 'line';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
     captionText?: PDSTextType;
-    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconName?: PDSIconType;
     iBtn1IconFillType?: 'fill' | 'line';
-    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn2IconName?: PDSIconType;
     iBtn2IconFillType?: 'fill' | 'line';
     mBtnFillType?: 'fill' | 'line';
     mBtnText?: PDSTextType;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 export type Props = {
     colorTheme?: 'solid' | 'translucent' | 'transparent';
     headerMode?: 'none' | 'use';
@@ -9,11 +9,11 @@ export type Props = {
     onClickCaptionText?: () => void;
     titleStyleTheme?: 'headingBold' | 'subTitleBold';
     headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3';
-    headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    headerIBtn1IconName?: PDSIconType;
     headerIBtn1IconFillType?: 'line' | 'fill';
-    headerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    headerIBtn2IconName?: PDSIconType;
     headerIBtn2IconFillType?: 'line' | 'fill';
-    headerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    headerIBtn3IconName?: PDSIconType;
     headerIBtn3IconFillType?: 'line' | 'fill';
     children?: React.ReactNode;
     bodyChildren?: React.ReactNode;
@@ -26,20 +26,20 @@ export type Props = {
     submitIBtnState?: 'disabled' | 'normal';
     bodyMBtnText?: PDSTextType;
     bodySpacingMode?: 'none' | 'use';
-    submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    submitIBtnIconName?: PDSIconType;
     submitIBtnIconFillType?: 'fill' | 'line';
     footerIBtn1State?: 'disabled' | 'normal';
-    footerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn1IconName?: PDSIconType;
     footerIBtn1IconFillType?: 'fill' | 'line';
     footerIBtn1Type?: 'button' | 'upload';
     onClickFooterIBtn1?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     footerIBtn2State?: 'disabled' | 'normal';
-    footerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn2IconName?: PDSIconType;
     footerIBtn2IconFillType?: 'fill' | 'line';
     footerIBtn2Type?: 'button' | 'upload';
     onClickFooterIBtn2?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     footerIBtn3State?: 'disabled' | 'normal';
-    footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn3IconName?: PDSIconType;
     footerIBtn3IconFillType?: 'fill' | 'line';
     footerIBtn3Type?: 'button' | 'upload';
     footerIBtn3Accept?: string;

package/dist/src/mobile/components/ChatList/ChatTextField.d.ts

@@ -1,22 +1,22 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import type { PDSIconType } from '../../../common';
 import type { Props as ChatListProps } from './ChatList';
 type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     isSubmitBtnActive?: boolean;
-    submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    submitIBtnIconName?: PDSIconType;
     submitIBtnIconFillType?: 'fill' | 'line';
     footerIBtn1State?: 'disabled' | 'normal';
-    footerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn1IconName?: PDSIconType;
     footerIBtn1IconFillType?: 'fill' | 'line';
     footerIBtn1Type?: 'button' | 'upload';
     onClickFooterIBtn1?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     footerIBtn2State?: 'disabled' | 'normal';
-    footerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn2IconName?: PDSIconType;
     footerIBtn2IconFillType?: 'fill' | 'line';
     footerIBtn2Type?: 'button' | 'upload';
     onClickFooterIBtn2?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     footerIBtn3State?: 'disabled' | 'normal';
-    footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn3IconName?: PDSIconType;
     footerIBtn3IconFillType?: 'fill' | 'line';
     footerIBtn3Type?: 'button' | 'upload';
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/dist/src/mobile/components/ChatList/Footer.d.ts

@@ -1,22 +1,22 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import type { PDSIconType } from '../../../common';
 import type { Props as ChatListProps } from './ChatList';
 type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     isSubmitBtnActive: boolean;
-    submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    submitIBtnIconName?: PDSIconType;
     submitIBtnIconFillType?: 'fill' | 'line';
     footerIBtn1State?: 'disabled' | 'normal';
-    footerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn1IconName?: PDSIconType;
     footerIBtn1IconFillType?: 'fill' | 'line';
     footerIBtn1Type?: 'button' | 'upload';
     onClickFooterIBtn1?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     footerIBtn2State?: 'disabled' | 'normal';
-    footerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn2IconName?: PDSIconType;
     footerIBtn2IconFillType?: 'fill' | 'line';
     footerIBtn2Type?: 'button' | 'upload';
     onClickFooterIBtn2?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     footerIBtn3State?: 'disabled' | 'normal';
-    footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn3IconName?: PDSIconType;
     footerIBtn3IconFillType?: 'fill' | 'line';
     footerIBtn3Type?: 'button' | 'upload';
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
+import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../../common';
 type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export type ChipProps = {
     displayType?: DisplayType;
     text?: PDSTextType;
     filterIconMode?: 'none' | 'left';
     iconFillType?: 'line' | 'fill';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     overrideTextColorKey?: UiColors;
     overrideBackgroundColorKey?: UiColors;
     value?: PDSValueOption['value'];

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,7 +10,7 @@ export type MainButtonProps = {
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';

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/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { IFormValues, PDSIconType, PDSTextType, UiColors } from '../../../common';
 export type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
@@ -22,8 +22,8 @@ export type TextFieldProps = {
     autoMaxRows?: number;
     inputType?: string;
     state?: 'normal' | 'read_only' | 'disabled';
-    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
-    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconName?: PDSIconType;
+    iBtn2IconName?: PDSIconType;
     iBtn1IconFillType?: 'line' | 'fill';
     iBtn2IconFillType?: 'line' | 'fill';
     overrideIBtn1IconColorKey?: UiColors;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+import type { PDSIconType, UiColors } from '../../../common';
 export type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle' | 'round';
@@ -8,7 +8,7 @@ export type UploadIconButtonProps = {
     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/UploadMainButton/UploadMainButton.d.ts

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

package/dist/src/sub/AdminList/ToolBar/ToolBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DropdownValueOption, FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common/types';
+import type { DropdownValueOption, PDSIconType, PDSTextType, PDSValueOption } from '../../../common/types';
 type Props = {
     searchFieldHintText?: PDSTextType;
     searchFieldDefaultText?: PDSTextType;
@@ -14,11 +14,11 @@ type Props = {
     dropdownWidth?: string;
     chipMode?: 'none' | 'use';
     iBtnMode?: 'none' | 'iBtn_amount1' | 'iBtn_amount2' | 'iBtn_amount3';
-    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconName?: PDSIconType;
     iBtn1IconFillType?: 'fill' | 'line';
-    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn2IconName?: PDSIconType;
     iBtn2IconFillType?: 'fill' | 'line';
-    iBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn3IconName?: PDSIconType;
     iBtn3IconFillType?: 'fill' | 'line';
     onChangeDropdown?: (option: DropdownValueOption) => void;
     onClickChip?: (option: PDSValueOption) => void;

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

@@ -26,7 +26,20 @@ var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
     var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
-    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
+    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
+        var _a;
+        if (!section.display) {
+            return false;
+        }
+        if (section.type === 'CUSTOM' && mode !== 'EDIT') {
+            var deviceKey = device === 'DESKTOP'
+                ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
+                : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
+            var isVisible = (_a = section.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_VISIBILITY[deviceKey];
+            return isVisible;
+        }
+        return true;
+    })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
     return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js

@@ -54,8 +54,9 @@ function YouTubeIframe(_a) {
             var CUED = 5;
             var stateCode = event.data;
             switch (stateCode) {
-                case UNSTARTED:
                 case BUFFERING:
+                    break;
+                case UNSTARTED:
                 case CUED:
                     setIsYoutubeLoading(true);
                     break;
@@ -74,8 +75,11 @@ function YouTubeIframe(_a) {
                         var restartVideoSection = function () {
                             event.target.seekTo(section.start);
                         };
-                        var id_1 = setTimeout(restartVideoSection, duration * 1000);
-                        setTimeoutId(id_1);
+                        var timeout = duration * 1000 - 1000;
+                        if (timeout > 0) {
+                            var id_1 = setTimeout(restartVideoSection, duration * 1000 - 1000);
+                            setTimeoutId(id_1);
+                        }
                     }
                     break;
             }

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/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';
@@ -8,7 +8,7 @@ export type IconButtonProps = {
     borderColorKey?: UiColors;
     iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
     iconFillType?: 'fill' | 'line';
-    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconName: PDSIconType;
     iconColorKey?: UiColors;
     shadow?: 'hidden' | 'visible';
     colorTheme?: 'none' | 'line1' | 'line2';