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

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

@@ -53,7 +53,7 @@ function DesktopAlertDialog(_a) {
     var btn3Mode = ['tbtn_amount3'];
     var icon = function () {
         if (iconMode !== 'none') {
-            return ((0, jsx_runtime_1.jsxs)(S_IconWrapper, { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
         }
     };
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [icon(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1, onKeyDown: function (e) { return handleKeyDown(e); } }))] })] }))] }), container);
@@ -62,13 +62,12 @@ var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-var S_TextBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
+var S_TextBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ModalOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_dimmed;
 }, animationStyle_1.dialogOverlayOnAni);
-var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {
@@ -78,18 +77,18 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templa
     var theme = _a.theme;
     return theme.boxShadow.elevation5;
 }, animationStyle_1.dialogOnAni);
-var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n  padding: ", " ", "\n    ", " ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n  padding: ", " ", "\n    ", " ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 });
 exports.default = DesktopAlertDialog;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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 = {
@@ -16,7 +16,7 @@ type TextObj = {
 };
 type DesktopTabBarProps = {
     itemArray?: ItemArray[];
-    styleTheme?: 'main' | 'content' | 'content_black';
+    styleTheme?: 'main' | 'content' | 'content2' | 'content_black';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };

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

@@ -60,23 +60,26 @@ function DesktopTabBar(_a) {
         };
         var textLabel_1 = function (item, isSubText) {
             if (isSubText) {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
             if (styleTheme === 'content_black') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
             if (styleTheme === 'content') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
+            }
+            if (styleTheme === 'content2') {
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
             if (styleTheme === 'main') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return !item.disabled && handelClickTabItem_1(item, e); }, disabled: item.disabled }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
                                                     ? styleTheme === 'content'
                                                         ? 'ui_cpnt_textlabel_usr_brandprimary'
                                                         : 'ui_cpnt_textlabel_sys_primary'
-                                                    : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
+                                                    : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, disabled: subItem.disabled, onClick: function (e) { return !subItem.disabled && handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -95,6 +98,9 @@ function DesktopTabBar(_a) {
             if (styleTheme === 'content') {
                 return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
+            if (styleTheme === 'content2') {
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
+            }
             if (styleTheme === 'main') {
                 return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
             }
@@ -115,7 +121,7 @@ var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (tem
     return styleTheme !== 'main' && "border-bottom: 1px solid ".concat(theme.ui_cpnt_divider, ";");
 }, function (_a) {
     var styleTheme = _a.styleTheme;
-    return (styleTheme === 'main' ? '52px' : '40px');
+    return styleTheme === 'main' ? '52px' : styleTheme === 'content2' ? '32px' : '40px';
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -137,8 +143,8 @@ var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObj
     var styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? '3px' : '2px');
 }, function (_a) {
-    var isActive = _a.isActive;
-    return !isActive && "display: none;";
+    var isActive = _a.isActive, styleTheme = _a.styleTheme;
+    return (!isActive || styleTheme === 'content2') && "display: none;";
 });
 // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
 var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
@@ -158,12 +164,22 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
 });
-var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"])), function (_a) {
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  height: 100%;\n  padding: 0\n    ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"], ["\n  align-items: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  height: 100%;\n  padding: 0\n    ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'content2' ? 'flex-strat' : 'flex-end');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
+}, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
-    return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
+    return styleTheme === 'main' || styleTheme === 'content2' ? 0 : theme.spacing.spacingA;
 }, tabIndicator, textOffset, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
-    return styleTheme === 'main' ? theme.spacing.spacingA : theme.spacing.spacingB;
+    return styleTheme === 'main'
+        ? theme.spacing.spacingA
+        : styleTheme === 'content2'
+            ? theme.spacing.spacingC
+            : theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? theme.spacing.spacingA : '7px';
@@ -171,15 +187,18 @@ var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (
 var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"], ["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"])));
 var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
-    return styleTheme !== 'main' && theme.ui_cpnt_tabbar_base_area_sub;
+    return styleTheme !== 'main' && styleTheme !== 'content2' && theme.ui_cpnt_tabbar_base_area_sub;
 }, function (_a) {
     var styleTheme = _a.styleTheme;
-    return styleTheme === 'main' && "border-bottom: 1px solid #EFF0F3;";
+    return (styleTheme === 'main' || styleTheme === 'content2') && "border-bottom: 1px solid #EFF0F3;";
 }, function (_a) {
     var styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? '26px' : '32px');
 });
-var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
+}, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? theme.spacing.spacingD : theme.spacing.spacingE;
 }, function (_a) {

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

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

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

@@ -57,11 +57,11 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     _e = _a.size, 
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, onChange = _a.onChange;
-    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
-    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
-    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'visible' : _j, onChange = _a.onChange;
+    var _k = (0, react_1.useState)(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _l = (0, react_1.useState)(null), selectedValue = _l[0], setSelectedValue = _l[1];
+    var _m = (0, react_1.useState)(null), contextMenuSizeOffset = _m[0], setContextMenuSizeOffset = _m[1];
+    var _o = (0, react_1.useState)(null), dropdownPositionOffset = _o[0], setDropdownPositionOffset = _o[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     /**
@@ -178,10 +178,10 @@ function Dropdown(_a) {
     };
     var getTextColorTheme = function () {
         if (colorTheme === 'none') {
-            if (isFocused) {
-                return 'sysTextPrimary';
-            }
             if (state === 'normal') {
+                if (isFocused) {
+                    return 'sysTextPrimary';
+                }
                 return 'sysTextPrimary';
             }
             if (state === 'read_only') {
@@ -199,11 +199,21 @@ function Dropdown(_a) {
         }
     };
     var getTextColorOverride = function () {
-        if (colorTheme === 'dark') {
-            if (isFocused) {
-                return 'ui_cpnt_dropdown_text_darktheme_enabled';
+        if (colorTheme === 'none') {
+            var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+            if (isHintTextShow) {
+                return 'ui_cpnt_form_text_hint';
             }
+        }
+        if (colorTheme === 'dark') {
             if (state === 'normal') {
+                var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+                if (isHintTextShow) {
+                    return 'ui_cpnt_dropdown_text_darktheme_hinttext';
+                }
+                if (isFocused) {
+                    return 'ui_cpnt_dropdown_text_darktheme_enabled';
+                }
                 return 'ui_cpnt_dropdown_text_darktheme_hint';
             }
             if (state === 'read_only') {
@@ -253,7 +263,7 @@ function Dropdown(_a) {
         });
     }
     return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", ref: dropdownRef, size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: groupInfoArray
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth(), scrollVisibleType: scrollVisibleType }, { children: groupInfoArray
                             ? Object.keys(resultByGroup).map(function (key) {
                                 var _a, _b, _c;
                                 return ((0, jsx_runtime_1.jsxs)(S_Group, __assign({ size: size, hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _a === void 0 ? void 0 : _a.title) }, { children: [((_b = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _b === void 0 ? void 0 : _b.title) && ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (_c = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _c === void 0 ? void 0 : _c.title, colorTheme: "sysTextSecondary", styleTheme: "caption1Bold", letterSpacing: "0.15em" }) }))), resultByGroup[key].map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); })] }), key));

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

@@ -12,6 +12,7 @@ type UserProfile = {
     src: string;
     href: string;
     leftIconButton?: React.ReactNode;
+    leftIconButton2?: React.ReactNode;
     overrideUserProfile?: React.ReactNode;
 };
 export type Props = {

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

@@ -93,7 +93,7 @@ function DynamicDesktopNavBar(_a) {
     function handleClickInternalMenuItemNav(url) {
         dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
     }
-    return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isFixedWidth: isFixedWidth, isPreview: isPreview, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview, isFixedWidth: isFixedWidth, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isFixedWidth: isFixedWidth, isPreview: isPreview, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, leftIconButton2: userProfile.leftIconButton2, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview, isFixedWidth: isFixedWidth, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, leftIconButton2: userProfile.leftIconButton2, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
 }
 var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  grid-column-gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  grid-column-gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.d.ts

@@ -4,6 +4,7 @@ type Props = {
     src: string;
     to: string;
     leftIconButton?: React.ReactNode;
+    leftIconButton2?: React.ReactNode;
     overrideUserProfile?: React.ReactNode;
     style?: CSSProperties;
 };

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.js

@@ -24,8 +24,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Navigations_1 = require("../../../../common/components/Navigations");
 var hybrid_1 = require("../../../../hybrid");
 function UserProfile(_a, ref) {
-    var src = _a.src, to = _a.to, overrideUserProfile = _a.overrideUserProfile, leftIconButton = _a.leftIconButton, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style, ref: ref }, { children: overrideUserProfile ? ((0, jsx_runtime_1.jsx)(S_OverrideUserProfile, { children: overrideUserProfile })) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
+    var src = _a.src, to = _a.to, overrideUserProfile = _a.overrideUserProfile, leftIconButton = _a.leftIconButton, leftIconButton2 = _a.leftIconButton2, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style, ref: ref }, { children: overrideUserProfile ? ((0, jsx_runtime_1.jsx)(S_OverrideUserProfile, { children: overrideUserProfile })) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton2 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton2, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
 }
 var S_UserProfile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"])));
 var S_OverrideUserProfile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: max-content;\n"], ["\n  width: max-content;\n"])));

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType, IFormValues } from '../../../common';
 export type EditApplyTextFieldProps = {
     name: Path<IFormValues>;
@@ -21,6 +22,7 @@ export type EditApplyTextFieldProps = {
     maxLength?: number;
     min?: number;
     customWidth?: string;
+    scrollVisibleType?: ScrollVisibleType;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -30,5 +32,5 @@ export type EditApplyTextFieldProps = {
     /** @deprecated v1.5 해당 prop 대신 Form의 onSubmit을 사용하세요. */
     onClickSubmitBtn?: (...args: any) => any;
 };
-declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
+declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, scrollVisibleType, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
 export default EditApplyTextField;

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

@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -49,11 +50,11 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function EditApplyTextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
-    var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, reset = _l.reset, _m = _l.formState, errors = _m.errors, isSubmitSuccessful = _m.isSubmitSuccessful;
-    var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
-    var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
-    var _q = (0, react_1.useState)(defaultText !== null && defaultText !== void 0 ? defaultText : ''), prevValue = _q[0], setPrevValue = _q[1];
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'visible' : _l, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var _m = (0, react_hook_form_1.useFormContext)(), register = _m.register, setValue = _m.setValue, trigger = _m.trigger, watch = _m.watch, reset = _m.reset, _o = _m.formState, errors = _o.errors, isSubmitSuccessful = _o.isSubmitSuccessful;
+    var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
+    var _q = (0, react_1.useState)(false), isOpen = _q[0], setIsOpen = _q[1];
+    var _r = (0, react_1.useState)(defaultText !== null && defaultText !== void 0 ? defaultText : ''), prevValue = _r[0], setPrevValue = _r[1];
     var ref = (0, react_1.useRef)();
     var currentValue = watch(name);
     var validateOnChange = register(name, validation).onChange;
@@ -160,7 +161,7 @@ function EditApplyTextField(_a) {
             return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: "use", textLineType: "single", inputType: inputType, state: state, min: min, max: max, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: ref }) }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
 }
 var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  ", "\n"], ["\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size, responsiveMode = _a.responsiveMode;
@@ -246,7 +247,7 @@ var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templ
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_pressed;
 });
-var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -271,8 +272,16 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11
 }, transitionStyle_1.InputTransition, function (_a) {
     var state = _a.state;
     return state === 'normal' && normalActionColor;
+}, function (_a) {
+    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
+    return (textLineType === 'multi' || textLineType === 'auto') &&
+        scrollVisibleType && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      textarea {\n        ", "\n      }\n    "], ["\n      textarea {\n        ", "\n      }\n    "])), scrollVisibleType === 'visible' ? scrollbarStyle_1.scrollbarStyle : scrollbarStyle_1.scrollInvisible);
+}, function (_a) {
+    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
+    return (textLineType === 'multi' || textLineType === 'auto') &&
+        scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      padding-right: 1px;\n    "], ["\n      padding-right: 1px;\n    "])));
 });
-var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_text_error;
 }, function (_a) {
@@ -291,6 +300,6 @@ var S_Error = styled_components_1.default.div(templateObject_12 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_ButtonBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"], ["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"])));
+var S_ButtonBox = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"], ["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"])));
 exports.default = EditApplyTextField;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { LocalizedContentConfig } from '../../../common/types';
+export type LocalizedButtonProps = {
+    localizedContentModalConfig: LocalizedContentConfig;
+    state?: 'normal' | 'disabled' | undefined;
+};
+declare function LocalizedButton({ localizedContentModalConfig, state }: LocalizedButtonProps): JSX.Element;
+export default LocalizedButton;