pds-dev-kit-web-test 2.7.92 → 2.7.94

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js

@@ -44,17 +44,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
-var components_1 = require("../../components");
 var styled_components_1 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 function DesktopHeadlessModal(_a) {
-    var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, onClose = _a.onClose, _e = _a.footerMode, footerMode = _e === void 0 ? 'none' : _e, _f = _a.btnMode, btnMode = _f === void 0 ? 'mbtn_amount2' : _f, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _g = _a.mBtn1State, mBtn1State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.mBtn3State, mBtn3State = _j === void 0 ? 'normal' : _j, _k = _a.mBtn1Type, mBtn1Type = _k === void 0 ? 'button' : _k, _l = _a.mBtn2Type, mBtn2Type = _l === void 0 ? 'button' : _l, _m = _a.mBtn3Type, mBtn3Type = _m === void 0 ? 'button' : _m, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
+    var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopHeadlessModal');
         return modalRoot;
     })[0];
+    var targetRef = (0, react_1.useRef)(null);
     var handleClickOutside = function (e) {
         e.stopPropagation();
         if (dimmedClickCloseMode === 'use') {
@@ -65,24 +65,35 @@ function DesktopHeadlessModal(_a) {
     };
     (0, react_1.useLayoutEffect)(function () {
         var root = document.getElementById('root');
+        var isScrolling;
+        var handleScroll = function () {
+            if (targetRef.current) {
+                targetRef.current.classList.add('scrollMoving');
+            }
+            isScrolling = setTimeout(function () {
+                var _a;
+                (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('scrollMoving');
+            }, 500);
+        };
         if (!root) {
             return;
         }
+        if (targetRef.current) {
+            targetRef.current.onscroll = handleScroll;
+        }
         root.appendChild(container);
         return function () {
             root.removeChild(container);
+            clearTimeout(isScrolling);
         };
     }, []);
-    var btn1Mode = ['mbtn_amount1', 'mbtn_amount2', 'mbtn_amount3'];
-    var btn2Mode = ['mbtn_amount2', 'mbtn_amount3'];
-    var btn3Mode = ['mbtn_amount3'];
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Body, __assign({ scrollVisibleType: scrollVisibleType }, { children: body && body })), footerMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && mBtn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && mBtn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 })) }), btn1Mode.includes(btnMode) && mBtn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 }))] })] }))] }))] }), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsx)(S_ModalWrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body })) }))] }), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -93,51 +104,29 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
     return theme.boxShadow.elevation4;
 }, function (_a) {
     var size = _a.size;
-    return size === 'rlarge' ? '960px' : size === 'rxlarge' ? '1200px' : undefined;
+    return size === 'rlarge' && '960px';
 }, function (_a) {
     var size = _a.size;
     var sizes = {
         small: '400px',
         medium: '688px',
         large: '960px',
-        rlarge: '60vw',
-        xlarge: '1200px',
-        rxlarge: '70vw'
+        rlarge: '60vw'
     };
     return sizes[size];
 }, animationStyle_1.modalOnAni);
 var scrollInvisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n"], ["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"], ["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"])), function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
-    return ({
-        visible: scrollbarStyle_1.scrollbarWithPaddingStyle,
-        hidden: scrollInvisible
-    }[scrollVisibleType]);
-});
-var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
-var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
-var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_modal_border;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return scrollVisibleType &&
+        {
+            moving: scrollInvisible,
+            visible: scrollbarStyle_1.scrollbarWithPaddingStyle,
+            hidden: scrollInvisible
+        }[scrollVisibleType];
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
 });
 exports.default = DesktopHeadlessModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 export type DesktopTutorialModalInfoType = {
     sideTabTitleText: PDSTextType;
@@ -14,8 +13,7 @@ type DesktopTutorialModalProps = {
     modalTitleText: PDSTextType;
     infoArray: DesktopTutorialModalInfoType[];
     sequenceMode?: 'use' | 'none';
-    scrollVisibleType?: ScrollVisibleType;
     onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopTutorialModal({ modalTitleText, infoArray, sequenceMode, scrollVisibleType, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
+declare function DesktopTutorialModal({ modalTitleText, infoArray, sequenceMode, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
 export default DesktopTutorialModal;

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.js

@@ -21,14 +21,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importDefault(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 var Components_1 = require("./Components");
 function DesktopTutorialModal(_a) {
-    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _b = _a.sequenceMode, sequenceMode = _b === void 0 ? 'use' : _b, _c = _a.scrollVisibleType, scrollVisibleType = _c === void 0 ? 'visible' : _c, onClose = _a.onClose;
+    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _b = _a.sequenceMode, sequenceMode = _b === void 0 ? 'use' : _b, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopTutorialModal');
@@ -44,7 +44,7 @@ function DesktopTutorialModal(_a) {
             root.removeChild(container);
         };
     }, []);
-    var _d = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _d[0], setSelectedItem = _d[1];
+    var _c = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _c[0], setSelectedItem = _c[1];
     var sideTabTitleArray = infoArray.map(function (data, index) {
         return {
             title: data.sideTabTitleText,
@@ -70,7 +70,7 @@ function DesktopTutorialModal(_a) {
     };
     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": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" })] })] }), infoArray
                         .filter(function (data, index) { return selectedItem === "".concat(data.sideTabTitleText).concat(index); })
-                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, __assign({ scrollVisibleType: scrollVisibleType }, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] })), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: sequenceMode === 'use' && selectedItemIndex !== lastIndex ? ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_arrow_right", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickNextBtn })) : ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })) })] }))] }), container);
+                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] }), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: sequenceMode === 'use' && selectedItemIndex !== lastIndex ? ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_arrow_right", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickNextBtn })) : ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })) })] }))] }), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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;
@@ -114,13 +114,7 @@ var S_InfoBox = styled_components_1.default.div(templateObject_7 || (templateObj
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
-}, function (_a) {
-    var scrollVisibleType = _a.scrollVisibleType;
-    return ({
-        visible: scrollbarStyle_1.scrollbarStyle,
-        hidden: scrollbarStyle_1.scrollInvisible
-    }[scrollVisibleType]);
-});
+}, scrollbarStyle_1.scrollbarStyle);
 var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  display: flex;\n  height: 88px;\n  min-height: 88px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  display: flex;\n  height: 88px;\n  min-height: 88px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;

package/dist/src/desktop/panels/SectionSheet/SectionSheet.d.ts

@@ -1,5 +1,4 @@
 import type { UiColors } from '../../../common';
-import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { CSSProperties } from 'react';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type SectionSheetProps = {
@@ -19,7 +18,6 @@ export type SectionSheetProps = {
     paddingLeft?: PaddingSpacingType;
     overrideCSS?: CSSProperties;
     children: React.ReactNode;
-    scrollVisibleType?: ScrollVisibleType;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type StyleProps = {
@@ -38,7 +36,6 @@ export type StyleProps = {
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
     hasOnClick?: boolean;
-    scrollVisibleType?: ScrollVisibleType;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -56,5 +53,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, scrollVisibleType, onClick }: SectionSheetProps): JSX.Element;
+declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
 export default SectionSheet;

package/dist/src/desktop/panels/SectionSheet/SectionSheet.js

@@ -39,7 +39,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
@@ -71,13 +70,13 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function SectionSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick, scrollVisibleType: scrollVisibleType }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -106,7 +105,7 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
 }, function (_a) {
@@ -142,13 +141,6 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
-}, function (_a) {
-    var scrollVisibleType = _a.scrollVisibleType;
-    return scrollVisibleType &&
-        {
-            visible: scrollbarStyle_1.scrollbarStyle,
-            hidden: scrollbarStyle_1.scrollInvisible
-        }[scrollVisibleType];
 }, advancedCSS);
 exports.default = SectionSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/desktop/panels/index.d.ts

@@ -4,8 +4,7 @@ import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType } from './DesktopBasicModalWithTab';
 import { DesktopHeadlessModal } from './DesktopHeadlessModal';
 import { DesktopTutorialModal, DesktopTutorialModalInfoType } from './DesktopTutorialModal';
-import LocalizedContentModal from './LocalizedContentModal';
 import { SectionSheet } from './SectionSheet';
-export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, LocalizedContentModal, SectionSheet };
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, SectionSheet };
 export { DesktopBasicModalWithTabInfoType };
 export { DesktopTutorialModalInfoType };

package/dist/src/desktop/panels/index.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionSheet = exports.LocalizedContentModal = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
 var AnnotationSheet_1 = require("./AnnotationSheet");
 Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
 var ContentSheet_1 = require("./ContentSheet");
@@ -16,7 +13,5 @@ var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
 var DesktopTutorialModal_1 = require("./DesktopTutorialModal");
 Object.defineProperty(exports, "DesktopTutorialModal", { enumerable: true, get: function () { return DesktopTutorialModal_1.DesktopTutorialModal; } });
-var LocalizedContentModal_1 = __importDefault(require("./LocalizedContentModal"));
-exports.LocalizedContentModal = LocalizedContentModal_1.default;
 var SectionSheet_1 = require("./SectionSheet");
 Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

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

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import type { UiColors } from '../../../common/types';
 export type DividerProps = {
     displayType?: 'line' | 'area';
     direction?: 'vertical' | 'horizontal';
     height?: number;
     colorTheme?: 'none' | 'divider1' | 'divider2';
-    overrideColorKey?: UiColors;
 };
-declare function Divider({ displayType, direction, height, colorTheme, overrideColorKey }: DividerProps): JSX.Element;
+declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
 export default Divider;

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

@@ -30,8 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 function Divider(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, overrideColorKey = _a.overrideColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme, overrideColorKey: overrideColorKey }));
+    var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
+    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
 }
 var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"], ["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType, theme = _a.theme;
@@ -63,22 +63,20 @@ var divider2Color = (0, styled_components_1.css)(templateObject_4 || (templateOb
     var theme = _a.theme;
     return theme.ui_cpnt_divider_white_opacity00;
 });
-var S_Divider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  ", ";\n"], ["\n  ", ";\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_Divider = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var $direction = _a.$direction;
     return $direction === 'horizontal' && horizontal;
 }, function (_a) {
     var $direction = _a.$direction, displayType = _a.displayType;
     return $direction === 'vertical' && displayType === 'line' && vertical;
 }, function (_a) {
-    var overrideColorKey = _a.overrideColorKey, theme = _a.theme, colorTheme = _a.colorTheme;
-    if (overrideColorKey)
-        return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), theme[overrideColorKey]);
-    return (colorTheme &&
+    var colorTheme = _a.colorTheme;
+    return colorTheme &&
         {
             divider1: divider1Color,
             divider2: divider2Color,
             none: ''
-        }[colorTheme]);
+        }[colorTheme];
 });
 exports.default = Divider;
-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/mobile/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -23,9 +23,7 @@ export type TextFieldBaseProps = {
     max?: number;
     maxLength?: number;
     textSize: DesktopFontSize;
-    customFontSize?: string;
     textWeight: FontWeight;
-    hintTextWeight?: FontWeight;
     fieldPaddingRight?: number;
     fieldPaddingLeft?: number;
     fieldHeight?: number;
@@ -48,5 +46,5 @@ export type TextFieldBaseProps = {
     onTarget?: () => void;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, customFontSize, textWeight, hintTextWeight, fieldPaddingRight, fieldPaddingLeft, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, textWeight, fieldPaddingRight, fieldPaddingLeft, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -61,11 +61,11 @@ var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, _m = _a.hintTextWeight, hintTextWeight = _m === void 0 ? 'normal' : _m, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _o = _a.fieldHeight, fieldHeight = _o === void 0 ? 48 : _o, _p = _a.deleteIconMode, deleteIconMode = _p === void 0 ? 'use' : _p, _q = _a.deleteIconSize, deleteIconSize = _q === void 0 ? 20 : _q, _r = _a.deleteIconColor, deleteIconColor = _r === void 0 ? 'ui_cpnt_button_icon_disabled' : _r, suffixText = _a.suffixText, _s = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _s === void 0 ? 'none' : _s, isFocused = _a.isFocused, _t = _a.autoComplete, autoComplete = _t === void 0 ? 'on' : _t, _u = _a.stepperMode, stepperMode = _u === void 0 ? 'none' : _u, _v = _a.stepperRightSpacing, stepperRightSpacing = _v === void 0 ? 1 : _v, _w = _a.innerSpinButtonSize, innerSpinButtonSize = _w === void 0 ? 16 : _w, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "customFontSize", "textWeight", "hintTextWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
-    var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, setValue = _x.setValue, getValues = _x.getValues, clearErrors = _x.clearErrors;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
+    var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
     var timeout;
     var suffixTextRef = (0, react_1.useRef)(null);
-    var _y = (0, react_1.useState)(0), suffixTextWidth = _y[0], setSuffixTextWidth = _y[1];
+    var _x = (0, react_1.useState)(0), suffixTextWidth = _x[0], setSuffixTextWidth = _x[1];
     // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
     (0, react_1.useEffect)(function () {
         var calculateDivWidth = function () {
@@ -165,7 +165,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _z = register(name, validation), ref = _z.ref, refRest = __rest(_z, ["ref"]);
+    var _y = register(name, validation), ref = _y.ref, refRest = __rest(_y, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -226,13 +226,13 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
+            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     textAreaRef.current = e;
                 }, onInput: handleResizeHeight })));
@@ -314,8 +314,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
         }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize, customFontSize = _a.customFontSize;
-    return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
 }, function (_a) {
     var textWeight = _a.textWeight;
     return common_1.fontWeight[textWeight];
@@ -334,11 +334,11 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
         }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize, customFontSize = _a.customFontSize;
-    return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
 }, function (_a) {
-    var textWeight = _a.textWeight, hintTextWeight = _a.hintTextWeight;
-    return common_1.fontWeight[hintTextWeight || textWeight];
+    var textWeight = _a.textWeight;
+    return common_1.fontWeight[textWeight];
 }, function (_a) {
     var textSize = _a.textSize;
     return common_1.desktopLineHeight[textSize];
@@ -449,7 +449,7 @@ var stepper = (0, styled_components_1.css)(templateObject_13 || (templateObject_
     }
     return;
 });
-var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
 }, function (_a) {
@@ -478,23 +478,19 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
     return theme.ui_cpnt_textfield_text_typed;
 });
 var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
-    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
+    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&
-        "max-height: ".concat(customFontSize
-            ? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMaxRows
-            : Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-                Number(common_1.desktopLineHeight[textSize]) *
-                autoMaxRows, "px;");
+        "max-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+            Number(common_1.desktopLineHeight[textSize]) *
+            autoMaxRows, "px;");
 }, function (_a) {
-    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
+    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMinRows &&
         fieldHeight &&
-        "min-height: ".concat(customFontSize
-            ? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMinRows
-            : Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-                Number(common_1.desktopLineHeight[textSize]) *
-                autoMinRows, "px;");
+        "min-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+            Number(common_1.desktopLineHeight[textSize]) *
+            autoMinRows, "px;");
 });
 var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;

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

@@ -9,7 +9,8 @@ export type ChatBubbleListItemProps = {
     colorTheme?: ColorThemeType;
     timeMode?: 'none' | 'use';
     timeText?: PDSTextType;
-    labelText?: PDSTextType;
+    countMode?: 'none' | 'use';
+    countText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
     children?: React.ReactNode;
@@ -17,5 +18,5 @@ export type ChatBubbleListItemProps = {
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;