pds-dev-kit-web-test 2.5.3 → 2.5.5

package/dist/src/common/assets/icons/line/index.d.ts

@@ -282,13 +282,5 @@ declare const lineIcons: {
     readonly ic_warning: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_weblink: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_xmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_hero_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_hero_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_banner_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_banner_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_feed_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_feed_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_contents_operator_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_section_contents_operator_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default lineIcons;

package/dist/src/common/assets/icons/line/index.js

@@ -180,24 +180,16 @@ var Rocket_1 = __importDefault(require("./Rocket"));
 var Sales_1 = __importDefault(require("./Sales"));
 var ScrollingText_1 = __importDefault(require("./ScrollingText"));
 var Search_1 = __importDefault(require("./Search"));
-var SectionBanner32_1 = __importDefault(require("./SectionBanner32"));
-var SectionBanner40_1 = __importDefault(require("./SectionBanner40"));
 var SectionContent32_1 = __importDefault(require("./SectionContent32"));
 var SectionContent40_1 = __importDefault(require("./SectionContent40"));
 var SectionContentsCarousel32_1 = __importDefault(require("./SectionContentsCarousel32"));
 var SectionContentsCarousel40_1 = __importDefault(require("./SectionContentsCarousel40"));
-var SectionContentsOperator32_1 = __importDefault(require("./SectionContentsOperator32"));
-var SectionContentsOperator40_1 = __importDefault(require("./SectionContentsOperator40"));
 var SectionCustom32_1 = __importDefault(require("./SectionCustom32"));
 var SectionCustom40_1 = __importDefault(require("./SectionCustom40"));
 var SectionDivider32_1 = __importDefault(require("./SectionDivider32"));
 var SectionDivider40_1 = __importDefault(require("./SectionDivider40"));
-var SectionFeed32_1 = __importDefault(require("./SectionFeed32"));
-var SectionFeed40_1 = __importDefault(require("./SectionFeed40"));
 var SectionFooter32_1 = __importDefault(require("./SectionFooter32"));
 var SectionFooter40_1 = __importDefault(require("./SectionFooter40"));
-var SectionHero32_1 = __importDefault(require("./SectionHero32"));
-var SectionHero40_1 = __importDefault(require("./SectionHero40"));
 var SectionIframe32_1 = __importDefault(require("./SectionIframe32"));
 var SectionIframe40_1 = __importDefault(require("./SectionIframe40"));
 var SectionInfoBox32_1 = __importDefault(require("./SectionInfoBox32"));
@@ -575,14 +567,6 @@ var lineIcons = {
     ic_vod_shorts: VodShorts_1.default,
     ic_warning: Warning_1.default,
     ic_weblink: Weblink_1.default,
-    ic_xmark: Xmark_1.default,
-    ic_section_hero_32: SectionHero32_1.default,
-    ic_section_hero_40: SectionHero40_1.default,
-    ic_section_banner_32: SectionBanner32_1.default,
-    ic_section_banner_40: SectionBanner40_1.default,
-    ic_section_feed_32: SectionFeed32_1.default,
-    ic_section_feed_40: SectionFeed40_1.default,
-    ic_section_contents_operator_32: SectionContentsOperator32_1.default,
-    ic_section_contents_operator_40: SectionContentsOperator40_1.default
+    ic_xmark: Xmark_1.default
 };
 exports.default = lineIcons;

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -354,6 +354,5 @@
     "sys_cpnt_sheet_base_13": "grey50",
     "sys_cpnt_sheet_base_14": "grey900",
     "sys_cpnt_white_opacity60": "white/opacity60",
-    "sys_border_line_17": "darkgrey600",
-    "usr_brand_primary_opacity05": "darkblue500/opacity05"
+    "sys_border_line_17": "darkgrey600"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -354,6 +354,5 @@
     "sys_cpnt_sheet_base_13": "grey50",
     "sys_cpnt_sheet_base_14": "grey900",
     "sys_cpnt_white_opacity60": "white/opacity60",
-    "sys_border_line_17": "black/opacity00",
-    "usr_brand_primary_opacity05": "blue500/opacity05"
+    "sys_border_line_17": "black/opacity00"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -858,6 +858,5 @@
     "ui_120": "sys_cpnt_white_opacity60",
     "ui_121": "sys_component_base_03",
     "ui_cpnt_tooltip_base_border": "sys_border_line_17",
-    "ui_122": "sys_widget_green_01",
-    "ui_123": "usr_brand_primary_opacity05"
+    "ui_122": "sys_widget_green_01"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -476,7 +476,6 @@ declare const colorSet: {
         sys_cpnt_sheet_base_14: string;
         sys_cpnt_white_opacity60: string;
         sys_border_line_17: string;
-        usr_brand_primary_opacity05: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -835,7 +834,6 @@ declare const colorSet: {
         sys_cpnt_sheet_base_14: string;
         sys_cpnt_white_opacity60: string;
         sys_border_line_17: string;
-        usr_brand_primary_opacity05: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1698,7 +1696,6 @@ declare const colorSet: {
         ui_121: string;
         ui_cpnt_tooltip_base_border: string;
         ui_122: string;
-        ui_123: string;
     };
 };
 export default colorSet;

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

@@ -859,5 +859,4 @@ export interface UITheme {
     ui_121: string;
     ui_cpnt_tooltip_base_border: string;
     ui_122: string;
-    ui_123: string;
 }

package/dist/src/common/styles/ui-colors.js

@@ -9,22 +9,14 @@ function buildCascadedColors(lowLevel, highLevel, override) {
     if (override === void 0) { override = {}; }
     return Object.keys(highLevel).reduce(function (acc, key) {
         var keyInLowLevelColors = highLevel[key];
-        var hasOpacity = keyInLowLevelColors.indexOf('/') !== -1;
         var colorValue;
-        if (hasOpacity) {
-            var _a = keyInLowLevelColors.split('/'), colorKey = _a[0], opacity = _a[1];
-            var isUserBrandPrimaryColor = key.includes('usr_brand_primary');
-            if (isUserBrandPrimaryColor) {
-                colorValue = override.usr_brand_primary
-                    ? override.usr_brand_primary + lowLevel[opacity]
-                    : lowLevel[colorKey] + lowLevel[opacity];
-            }
-            else {
-                colorValue = override[key] || lowLevel[colorKey] + lowLevel[opacity];
-            }
+        if (keyInLowLevelColors.indexOf('/') !== -1) {
+            colorValue = override[key]
+                ? override[key]
+                : lowLevel[keyInLowLevelColors.split('/')[0]] + lowLevel[keyInLowLevelColors.split('/')[1]];
         }
         else {
-            colorValue = override[key] || lowLevel[keyInLowLevelColors];
+            colorValue = override[key] ? override[key] : lowLevel[keyInLowLevelColors];
         }
         acc[key] = colorValue;
         return acc;

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

@@ -6,7 +6,6 @@ type BasicFormGroupProps = {
     descText?: PDSTextType;
     captionText?: PDSTextType;
     inputForm?: JSX.Element;
-    titleRequirementMode?: 'use' | 'none';
 };
-declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode }: BasicFormGroupProps): JSX.Element;
+declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm }: BasicFormGroupProps): JSX.Element;
 export default BasicFormGroup;

package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.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++) {
@@ -14,22 +10,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
-    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? 'none' : _c;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
+    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
 }
-var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
 exports.default = BasicFormGroup;
-var templateObject_1, templateObject_2;

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

@@ -6,7 +6,6 @@ type HorizontalFormGroupProps = {
     inputForm: JSX.Element;
     labelAlignType?: 'top' | 'center';
     labelTopSpacing?: 'small' | 'medium' | 'large';
-    labelRequirementMode?: 'use' | 'none';
 };
-declare function HorizontalFormGroup({ labelText, captionText, inputForm, labelAlignType, labelTopSpacing, labelRequirementMode }: HorizontalFormGroupProps): JSX.Element;
+declare function HorizontalFormGroup({ labelText, captionText, inputForm, labelAlignType, labelTopSpacing }: HorizontalFormGroupProps): JSX.Element;
 export default HorizontalFormGroup;

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

@@ -43,8 +43,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
-    var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing, _c = _a.labelRequirementMode, labelRequirementMode = _c === void 0 ? 'none' : _c;
-    return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [labelText, labelRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" })) })), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })] }))] })));
+    var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
+    return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" })) })), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })] }))] })));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";
@@ -58,7 +58,7 @@ var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4
     var labelAlignType = _a.labelAlignType;
     return labelAlignType === 'center' ? centerArea : topArea;
 });
-var S_LabelWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  align-self: ", ";\n  display: flex;\n  grid-area: label;\n  overflow: hidden;\n\n  ", ";\n"], ["\n  align-items: center;\n  align-self: ", ";\n  display: flex;\n  grid-area: label;\n  overflow: hidden;\n\n  ", ";\n"])), function (_a) {
+var S_LabelWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-self: ", ";\n  grid-area: label;\n  overflow: hidden;\n\n  ", ";\n"], ["\n  align-self: ", ";\n  grid-area: label;\n  overflow: hidden;\n\n  ", ";\n"])), function (_a) {
     var labelAlignType = _a.labelAlignType;
     return labelAlignType === 'center' && labelAlignType;
 }, function (_a) {
@@ -67,9 +67,5 @@ var S_LabelWrapper = styled_components_1.default.div(templateObject_5 || (templa
 });
 var S_InputFormWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  grid-area: inputForm;\n"], ["\n  grid-area: inputForm;\n"])));
 var S_CaptionWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  grid-area: caption;\n"], ["\n  grid-area: caption;\n"])));
-var S_IconWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: inline-flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: inline-flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
 exports.default = HorizontalFormGroup;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -3,7 +3,6 @@ import type { PDSTabItemOption } from '../../../common/types';
 export type ItemType = PDSTabItemOption;
 type UserDesktopSideTabProps = {
     itemArray: ItemType[];
-    spacingMode?: 'use' | 'none';
 };
-declare function UserDesktopSideTab({ itemArray, spacingMode }: UserDesktopSideTabProps): JSX.Element;
+declare function UserDesktopSideTab({ itemArray }: 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, _b = _a.spacingMode, spacingMode = _b === void 0 ? 'use' : _b;
+    var itemArray = _a.itemArray;
     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({ 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));
+            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));
         }) })));
 }
 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, spacingMode = _a.spacingMode;
-    return (spacingMode === 'use' ? theme.spacing.spacingE : 0);
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;

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

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

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

@@ -52,15 +52,7 @@ 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", 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));
-            }) })));
+        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)); }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -68,7 +60,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", styleTheme: styleTheme }, { 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" }, { 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)); }) })));
     }
@@ -83,11 +75,7 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
-            return mainStyle;
-        case 'content':
-            return contentStyle;
-        case 'content2':
-            return content2Style;
+            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
         default:
             return mainStyle;
     }
@@ -111,51 +99,12 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-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.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 "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 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 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';
-    }
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -26,20 +26,7 @@ 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) {
-        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;
-    })
+    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .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/SectionMatcher/SectionMatcher.js

@@ -21,13 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var FlexGridCustomSection_1 = __importDefault(require("../../../DynamicLayout/sections/CustomSection/FlexGridCustomSection"));
 var sections_1 = require("../../sections");
 function SectionMatcher(_a) {
     var props = __rest(_a, []);
     if (props.type === 'CUSTOM') {
-        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
+        return (0, jsx_runtime_1.jsx)(FlexGridCustomSection_1.default, __assign({}, props));
     }
     var schema = props.manifest.schema;
     switch (schema) {

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

@@ -54,9 +54,8 @@ function YouTubeIframe(_a) {
             var CUED = 5;
             var stateCode = event.data;
             switch (stateCode) {
-                case BUFFERING:
-                    break;
                 case UNSTARTED:
+                case BUFFERING:
                 case CUED:
                     setIsYoutubeLoading(true);
                     break;
@@ -75,11 +74,8 @@ function YouTubeIframe(_a) {
                         var restartVideoSection = function () {
                             event.target.seekTo(section.start);
                         };
-                        var timeout = duration * 1000 - 1000;
-                        if (timeout > 0) {
-                            var id_1 = setTimeout(restartVideoSection, duration * 1000 - 1000);
-                            setTimeoutId(id_1);
-                        }
+                        var id_1 = setTimeout(restartVideoSection, duration * 1000);
+                        setTimeoutId(id_1);
                     }
                     break;
             }
@@ -233,7 +229,7 @@ function YouTubeIframe(_a) {
     }, []);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }) })] }));
 }
-var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* background-color: ", "; */\n  background-color: red;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  /* background-color: ", "; */\n  background-color: red;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
+var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_62;
 });

package/dist/src/sub/DynamicLayout/mock_samplePage.d.ts

@@ -1,5 +1,4 @@
 import type { ISection } from './types';
-export declare const youtubeBgSection: any;
 export declare const samplePageIntroSection: ISection;
 export declare const samplePageContentsCarouselSection: ISection;
 export declare const samplePageIntroSection2: ISection;