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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SectionFeed40 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "68", height: "40", viewBox: "0 0 68 40" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M64.5129,0 C66.4389,0 67.9999,1.561 67.9999,3.487 L67.9999,36.513 C67.9999,38.439 66.4389,40 64.5129,40 L3.4869,40 C1.5609,40 -0.0001,38.439 -0.0001,36.513 L-0.0001,3.487 C-0.0001,1.561 1.5609,0 3.4869,0 Z M64.5129,2 L3.4869,2 C2.6669,2 1.9999,2.667 1.9999,3.487 L1.9999,36.513 C1.9999,37.333 2.6669,38 3.4869,38 L64.5129,38 C65.3329,38 65.9999,37.333 65.9999,36.513 L65.9999,3.487 C65.9999,2.667 65.3329,2 64.5129,2 Z M54.491,25.459 C55.154,25.459 55.691,25.996 55.691,26.659 L55.691,32.632 C55.691,33.295 55.154,33.832 54.491,33.832 L30.38,33.832 C29.717,33.832 29.18,33.295 29.18,32.632 L29.18,26.659 C29.18,25.996 29.717,25.459 30.38,25.459 L54.491,25.459 Z M54.491,6.9013 C55.154,6.9013 55.691,7.4393 55.691,8.1013 L55.691,22.4483 C55.691,23.1113 55.154,23.6483 54.491,23.6483 L30.38,23.6483 C29.717,23.6483 29.18,23.1113 29.18,22.4483 L29.18,8.1013 C29.18,7.4393 29.717,6.9013 30.38,6.9013 L54.491,6.9013 Z M25.5697,17.9736 C26.2327,17.9736 26.7697,18.5116 26.7697,19.1736 L26.7697,20.3626 C26.7697,21.0256 26.2327,21.5626 25.5697,21.5626 L13.5087,21.5626 C12.8467,21.5626 12.3087,21.0256 12.3087,20.3626 L12.3087,19.1736 C12.3087,18.5116 12.8467,17.9736 13.5087,17.9736 L25.5697,17.9736 Z M25.5697,12.5907 C26.2327,12.5907 26.7697,13.1287 26.7697,13.7907 L26.7697,14.9797 C26.7697,15.6427 26.2327,16.1797 25.5697,16.1797 L13.5087,16.1797 C12.8467,16.1797 12.3087,15.6427 12.3087,14.9797 L12.3087,13.7907 C12.3087,13.1287 12.8467,12.5907 13.5087,12.5907 L25.5697,12.5907 Z M25.5697,7.2078 C26.2327,7.2078 26.7697,7.7458 26.7697,8.4078 L26.7697,9.5968 C26.7697,10.2598 26.2327,10.7968 25.5697,10.7968 L13.5087,10.7968 C12.8467,10.7968 12.3087,10.2598 12.3087,9.5968 L12.3087,8.4078 C12.3087,7.7458 12.8467,7.2078 13.5087,7.2078 L25.5697,7.2078 Z" }) })));
+};
+exports.default = SectionFeed40;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const SectionHero32: ({ color, ...rest }: IconType) => JSX.Element;
+export default SectionHero32;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SectionHero32 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "54", height: "32", viewBox: "0 0 54 32" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M50.5128,0 C52.4388,0 53.9998,1.561 53.9998,3.487 L53.9998,28.513 C53.9998,30.439 52.4388,32 50.5128,32 L3.4868,32 C1.5608,32 -0.0002,30.439 -0.0002,28.513 L-0.0002,3.487 C-0.0002,1.561 1.5608,0 3.4868,0 Z M51.9998,13.827 L1.9998,13.827 L1.9998,28.513 C1.9998,29.2847647 2.59063737,29.921 3.34378697,29.9931807 L3.4868,30 L50.5128,30 C51.3328,30 51.9998,29.333 51.9998,28.513 L51.9998,13.827 Z" }) })));
+};
+exports.default = SectionHero32;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const SectionHero40: ({ color, ...rest }: IconType) => JSX.Element;
+export default SectionHero40;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SectionHero40 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "68", height: "40", viewBox: "0 0 68 40" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M64.5129,0 C66.4389,0 67.9999,1.561 67.9999,3.487 L67.9999,36.513 C67.9999,38.439 66.4389,40 64.5129,40 L3.4869,40 C1.5609,40 -0.0001,38.439 -0.0001,36.513 L-0.0001,3.487 C-0.0001,1.561 1.5609,0 3.4869,0 Z M65.9999,18.281 L1.9999,18.281 L1.9999,36.513 C1.9999,37.2847647 2.59073737,37.921 3.34388697,37.9931807 L3.4869,38 L64.5129,38 C65.3329,38 65.9999,37.333 65.9999,36.513 L65.9999,18.281 Z" }) })));
+};
+exports.default = SectionHero40;

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

@@ -282,5 +282,13 @@ 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,16 +180,24 @@ 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"));
@@ -567,6 +575,14 @@ var lineIcons = {
     ic_vod_shorts: VodShorts_1.default,
     ic_warning: Warning_1.default,
     ic_weblink: Weblink_1.default,
-    ic_xmark: Xmark_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
 };
 exports.default = lineIcons;

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

@@ -1,5 +1,5 @@
 export { UITheme } from './styles/colorSet/ui-type';
-export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType, Language, DropdownGroupInfo } from './types';
+export { IFormValues, FillIconNameKeys, LineIconNameKeys, ImageIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType, Language, DropdownGroupInfo } from './types';
 export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
 export { uiColors, customTheme } from './styles/ui-colors';
 export { theme } from './styles';

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

@@ -9,14 +9,22 @@ 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 (keyInLowLevelColors.indexOf('/') !== -1) {
-            colorValue = override[key]
-                ? override[key]
-                : lowLevel[keyInLowLevelColors.split('/')[0]] + lowLevel[keyInLowLevelColors.split('/')[1]];
+        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];
+            }
         }
         else {
-            colorValue = override[key] ? override[key] : lowLevel[keyInLowLevelColors];
+            colorValue = override[key] || lowLevel[keyInLowLevelColors];
         }
         acc[key] = colorValue;
         return acc;

package/dist/src/common/types/components.d.ts

@@ -1,4 +1,4 @@
-import type { FillIconNameKeys, LineIconNameKeys } from './icon';
+import type { PDSIconType } from './icon';
 import type { IconCaseTooltipPositionType } from './systemUI';
 import type { PDSTextType } from './text';
 import type { ForwardedRef } from 'react';
@@ -14,7 +14,7 @@ export type PDSTabItemOption = {
 export type ContextMenuItemValueOption = {
     text?: PDSTextType;
     value: string | number | null | boolean;
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     iconFillType?: 'fill' | 'line';
     fontWeight?: 'bold' | 'regular';
     descText?: PDSTextType;
@@ -32,7 +32,7 @@ export type AdminListDropdownValueOption = {
     value: DropdownValueOption['value'];
 };
 export type BasicButtonGroupValueOption = {
-    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconName: PDSIconType;
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
     tooltipText?: PDSTextType;
@@ -42,7 +42,7 @@ export type BasicButtonGroupValueOption = {
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 export type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
-    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconName: PDSIconType;
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
     iconColorTheme?: 'none' | 'red';

package/dist/src/common/types/icon.d.ts

@@ -1,5 +1,10 @@
-import type fillIcons from '../assets/icons/fill';
-import type lineIcons from '../assets/icons/line';
+import fillIcons from '../assets/icons/fill';
+import { imageIconSrcSet } from '../assets/icons/image';
+import lineIcons from '../assets/icons/line';
 export type FillIconNameKeys = keyof typeof fillIcons;
 export type LineIconNameKeys = keyof typeof lineIcons;
-export type PDSIconType = FillIconNameKeys | LineIconNameKeys;
+export type ImageIconNameKeys = keyof typeof imageIconSrcSet;
+export type PDSIconType = FillIconNameKeys | LineIconNameKeys | ImageIconNameKeys;
+export declare const fillIconkeys: string[];
+export declare const lineIconkeys: string[];
+export declare const imageIconKeys: string[];

package/dist/src/common/types/icon.js

@@ -1,2 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageIconKeys = exports.lineIconkeys = exports.fillIconkeys = void 0;
+var fill_1 = __importDefault(require("../assets/icons/fill"));
+var image_1 = require("../assets/icons/image");
+var line_1 = __importDefault(require("../assets/icons/line"));
+exports.fillIconkeys = Object.keys(fill_1.default);
+exports.lineIconkeys = Object.keys(line_1.default);
+exports.imageIconKeys = Object.keys(image_1.imageIconSrcSet);

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

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

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

@@ -1,4 +1,8 @@
 "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++) {
@@ -10,12 +14,22 @@ 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;
-    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 _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 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/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/desktop/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/desktop/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/desktop/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/desktop/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/desktop/components/DesktopHeaderBar/DesktopHeaderBar.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 type DesktopHeaderBarProps = {
     text?: PDSTextType;
     size?: 'xlarge' | 'large';
     leftDisplayType?: 'text' | 'icon' | 'back';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     leftBtn2Mode?: 'none' | 'mbtn' | 'tbtn';
     leftBtn2Text?: PDSTextType;
     rightBtnMode?: 'none' | 'close' | 'mbtn' | 'mbtn_fill' | 'help_window';

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTabItemOption, PDSTextType } from '../../../common/types';
+import type { PDSIconType, PDSTabItemOption, PDSTextType } from '../../../common/types';
 type ItemArray = PDSTabItemOption & {
     subArray?: PDSTabItemOption[];
     iconMode?: 'none' | 'use';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     iconFillType?: 'line' | 'fill';
 };
 type TextObj = {

package/dist/src/desktop/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' | 'disabled';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -6,6 +6,7 @@ type HorizontalFormGroupProps = {
     inputForm: JSX.Element;
     labelAlignType?: 'top' | 'center';
     labelTopSpacing?: 'small' | 'medium' | 'large';
+    labelRequirementMode?: 'use' | 'none';
 };
-declare function HorizontalFormGroup({ labelText, captionText, inputForm, labelAlignType, labelTopSpacing }: HorizontalFormGroupProps): JSX.Element;
+declare function HorizontalFormGroup({ labelText, captionText, inputForm, labelAlignType, labelTopSpacing, labelRequirementMode }: 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;
-    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 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 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-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 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 labelAlignType = _a.labelAlignType;
     return labelAlignType === 'center' && labelAlignType;
 }, function (_a) {
@@ -67,5 +67,9 @@ 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/components/IconButton/IconButton.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 IconButtonProps = {
     tooltipText?: PDSTextType;
@@ -12,7 +12,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/desktop/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/desktop/components/PageTitleTextGroup/CompoundButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 type Props = {
-    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconName?: PDSIconType;
     iconFillType?: 'fill' | 'line';
     titleText: PDSTextType;
     contentText: PDSTextType;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 type PageTitleTextGroupProps = {
     titleText: PDSTextType;
     tooltipText?: PDSTextType;
-    compoundBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    compoundBtnIconName?: PDSIconType;
     compoundBtnIconFillType?: 'fill' | 'line';
     compoundBtnTitleText?: PDSTextType;
     compoundBtnContentText?: PDSTextType;