pds-dev-kit-web-test 0.2.28 → 0.2.30

package/dist/src/desktop/components/ChatBubbleListItem/Popup.js

@@ -30,13 +30,13 @@ function getHAutoPlacement(_a) {
     var targetRect = _a.targetRect, popupRect = _a.popupRect;
     var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
     var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
-    return (leftSpaced ? 'left' : 'right') + "-" + (topSpaced ? 'end' : 'start');
+    return "".concat(leftSpaced ? 'left' : 'right', "-").concat(topSpaced ? 'end' : 'start');
 }
 function getVAutoPlacement(_a) {
     var targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
     var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
     var topSpaced = targetRect.bottom + popupRect.height > (wrapperHeight || window.innerWidth);
-    return (topSpaced ? 'top' : 'bottom') + "-" + (leftSpaced ? 'end' : 'start');
+    return "".concat(topSpaced ? 'top' : 'bottom', "-").concat(leftSpaced ? 'end' : 'start');
 }
 function getVCenterPlacement(_a) {
     var targetRect = _a.targetRect, popupRect = _a.popupRect;
@@ -73,93 +73,93 @@ function updatePosition(_a) {
     var normPlacement = getNormalizedPlacement({ placement: placement, targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
     switch (normPlacement) {
         case 'top':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'top-start':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
             popupElem.style.width = 'auto';
             break;
         case 'top-end':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left + targetRect.width - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'top-both':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left + "px";
-            popupElem.style.width = targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
+            popupElem.style.width = "".concat(targetRect.width, "px");
             break;
         case 'top-center':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom-start':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom-end':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.right - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom-both':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left + "px";
-            popupElem.style.width = targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
+            popupElem.style.width = "".concat(targetRect.width, "px");
             break;
         case 'bottom-center':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left-start':
-            popupElem.style.top = targetRect.top + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top, "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left-end':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left-center':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right-start':
-            popupElem.style.top = targetRect.top + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right-end':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right-center':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         default:
@@ -209,9 +209,9 @@ function Popup(_a) {
         }
     }
     if (!popupRootRef || !popupRootRef.current || !isOpen) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    var popupComponent = ((0, jsx_runtime_1.jsx)(S_Popup, __assign({ ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, { children: typeof children === 'function' ? children(normPlacement) : children }), void 0));
+    var popupComponent = ((0, jsx_runtime_1.jsx)(S_Popup, __assign({ ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, { children: typeof children === 'function' ? children(normPlacement) : children })));
     return (0, react_dom_1.createPortal)(popupComponent, popupRootRef.current);
 }
 exports.Popup = Popup;
@@ -223,7 +223,7 @@ var S_Popup = styled_components_1.default.div(templateObject_1 || (templateObjec
 function PopupProvider(_a) {
     var children = _a.children;
     var ref = (0, react_1.useRef)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopupContext.Provider, __assign({ value: ref }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { ref: ref }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopupContext.Provider, __assign({ value: ref }, { children: children })), (0, jsx_runtime_1.jsx)("div", { ref: ref })] }));
 }
 exports.PopupProvider = PopupProvider;
 var templateObject_1;

package/dist/src/desktop/components/ChatList/Body.js

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -81,7 +85,7 @@ var Body = react_1.default.forwardRef(function (_a, ref) {
         }
         setIsButtonShow(true);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatMessageBox, __assign({ id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref }, { children: [children, (0, jsx_runtime_1.jsx)(EndOfList, {}, void 0)] }), void 0), bodyChildren, isButtonShow && ((0, jsx_runtime_1.jsx)(S_BottomButtonWrapper, { children: (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn }, void 0) }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatMessageBox, __assign({ id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref }, { children: [children, (0, jsx_runtime_1.jsx)(EndOfList, {})] })), bodyChildren, isButtonShow && ((0, jsx_runtime_1.jsx)(S_BottomButtonWrapper, { children: (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn }) }))] })));
 });
 var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-export declare type Props = {
+export type Props = {
     colorTheme?: 'solid' | 'translucent' | 'transparent';
     headerMode?: 'none' | 'use';
     titleText?: PDSTextType;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -86,7 +90,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var callBackAfterScrollToBottom = function () {
         reset();
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
 });
 var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor, theme = _a.theme;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys } from '../../../common';
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
+type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     isSubmitBtnActive?: boolean;
     submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
     submitIBtnIconFillType?: 'fill' | 'line';

package/dist/src/desktop/components/ChatList/ChatTextField.js

@@ -34,23 +34,23 @@ function ChatTextField(_a) {
     };
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_FooterContentWrapper, __assign({ footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName }, { children: [footerIBtn3IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn3Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
                             ? 'ui_cpnt_button_icon_primary'
-                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 }, void 0)) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
                             ? 'ui_cpnt_button_icon_primary'
-                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3, accept: footerIBtn3Accept }, void 0)) }, void 0)), footerIBtn2IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn2Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3, accept: footerIBtn3Accept })) })), footerIBtn2IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn2Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
                             ? 'ui_cpnt_button_icon_primary'
-                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 }, void 0)) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
                             ? 'ui_cpnt_button_icon_primary'
-                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_TextFieldWrapper, { children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, colorTheme: colorTheme === 'transparent' ? 'transparent' : 'none', enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" }, void 0) }, void 0), footerIBtn1IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn1Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })) })), (0, jsx_runtime_1.jsx)(S_TextFieldWrapper, { children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, colorTheme: colorTheme === 'transparent' ? 'transparent' : 'none', enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" }) }), footerIBtn1IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn1Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
                             ? 'ui_cpnt_button_icon_primary'
-                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 }, void 0)) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
                             ? 'ui_cpnt_button_icon_primary'
-                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }, void 0)] }), void 0) }, void 0));
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })) })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' })] })) }));
 }
 var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;
     return footerIBtn2IconName || footerIBtn3IconName
-        ? "" + theme.spacing.spacingC
-        : "" + theme.spacing.spacingE;
+        ? "".concat(theme.spacing.spacingC)
+        : "".concat(theme.spacing.spacingE);
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys } from '../../../common';
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
+type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     isSubmitBtnActive: boolean;
     submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
     submitIBtnIconFillType?: 'fill' | 'line';

package/dist/src/desktop/components/ChatList/Footer.js

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ChatTextField_1 = __importDefault(require("./ChatTextField"));
 function Footer(_a) {
     var colorTheme = _a.colorTheme, footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, isSubmitBtnActive = _a.isSubmitBtnActive, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChatTextField_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }, void 0), (0, jsx_runtime_1.jsx)(S_FooterChildrenWrapper, { children: footerChildren }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChatTextField_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }), (0, jsx_runtime_1.jsx)(S_FooterChildrenWrapper, { children: footerChildren })] }));
 }
 var S_FooterChildrenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/ChatList/Header.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'onClickHeaderIBtn1'>;
+type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'onClickHeaderIBtn1'>;
 declare function Header({ colorTheme, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, onClickHeaderIBtn1 }: Props): JSX.Element;
 export default Header;

package/dist/src/desktop/components/ChatList/Header.js

@@ -24,7 +24,7 @@ var iconColors = {
 };
 function Header(_a) {
     var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" }, void 0)), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }, void 0)] }, void 0)), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }, void 0)] }, void 0))] }, void 0), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })] }))] }), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/ChatList/useAutoScrollToBottom.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     behavior?: 'auto' | 'smooth';
     heightOfEndOfList?: number;
 };

package/dist/src/desktop/components/ChatList/useAutoScrollToBottom.js

@@ -25,7 +25,7 @@ function useAutoScrollToBottom(_a) {
         setScrollTrigger(function (prev) { return !prev; });
     }, []);
     function EndOfList() {
-        return (0, jsx_runtime_1.jsx)("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef }, void 0);
+        return (0, jsx_runtime_1.jsx)("li", { style: { listStyle: 'none', height: "".concat(heightOfEndOfList, "px") }, ref: scrollRef });
     }
     return {
         triggerScrollToBottom: triggerScrollToBottom,

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
 import type { IFormValues, PDSTextType } from '../../../common';
-declare type CheckboxProps = {
+type CheckboxProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';

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

@@ -37,16 +37,16 @@ function Checkbox(_a) {
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }, void 0));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
             }
             case 'disabled': {
-                return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }, void 0) }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }, void 0));
+                return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }) }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
             }
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name, isDisabled: state === 'disabled' }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
                             ? 'ui_cpnt_selcontrols_text_default'
-                            : 'ui_cpnt_selcontrols_text_disabled' }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }), void 0)] }), void 0) }), void 0));
+                            : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));
 var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: inline-flex;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: inline-flex;\n"])), function (_a) {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
-declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
-export declare type ChipProps = {
+type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
+export type ChipProps = {
     displayType?: DisplayType;
     text?: PDSTextType;
     filterIconMode?: 'none' | 'left';

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

@@ -49,20 +49,20 @@ function Chip(_a) {
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
-                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" }, void 0)] }, void 0))] }), void 0));
+                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
             case 'information':
-                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
+                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'label':
-                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
+                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'time':
-                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
+                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'removable':
-                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }, void 0) }), void 0)] }), void 0));
+                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
             default:
-                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }), void 0));
+                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: chipType() }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: chipType() })));
 }
 exports.default = Chip;
 var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
@@ -79,7 +79,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     return isActive ? '' : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
-    return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
+    return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
 });
 var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ContextMenuProps = {
+type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
     maxHeight?: number;

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

@@ -22,7 +22,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
     var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
-    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "desktop", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "desktop", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children })));
 }
 var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 3;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
@@ -35,7 +35,7 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
     return theme.boxShadow.elevation4;
 }, function (_a) {
     var maxHeight = _a.maxHeight;
-    return (maxHeight ? maxHeight + "px" : 'none');
+    return (maxHeight ? "".concat(maxHeight, "px") : 'none');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
@@ -50,7 +50,7 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
     return 'max-content';
 }, function (_a) {
     var customWidth = _a.customWidth;
-    return customWidth && "width: " + customWidth + ";min-width: " + customWidth + ";";
+    return customWidth && "width: ".concat(customWidth, ";min-width: ").concat(customWidth, ";");
 });
 exports.default = ContextMenu;
 var templateObject_1;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
 import type { ContextMenuItemValueOption } from '../../../common/types';
-export declare type ContextMenuItemProps = {
+export type ContextMenuItemProps = {
     option?: ContextMenuItemValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -69,7 +73,7 @@ function ContextMenuItem(_a) {
     };
     return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled', displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') &&
                 option &&
-                'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), ' '] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0));
+                'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-declare type DesktopAlertDialogProps = {
+type DesktopAlertDialogProps = {
     iconMode?: 'none' | 'success' | 'error' | 'warning' | 'information';
     titleText?: PDSTextType;
     contentText: PDSTextType;

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

@@ -48,10 +48,10 @@ 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" }, void 0)), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" }, void 0)), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" }, void 0)), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }, void 0))] }, void 0));
+            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 react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}, void 0), (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" }, void 0), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" }, void 0)), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }, void 0))] }, void 0)] }, void 0), (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" }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), 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" }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }, void 0))] }, void 0)] }), void 0)] }, void 0), container);
+    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 }))] })] }))] }), container);
 }
 var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: ", ";\n"], ["\n  display: flex;\n  margin: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-declare type DesktopHeaderBarProps = {
+type DesktopHeaderBarProps = {
     text?: PDSTextType;
     size?: 'xlarge' | 'large';
     leftDisplayType?: 'text' | 'icon' | 'back';