pds-dev-kit-web-test 0.0.3 → 0.0.6

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -70,7 +70,8 @@ var ContainersBox = function (_a) {
             WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
-            WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+            WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
@@ -111,7 +112,8 @@ var ContainersBox = function (_a) {
                 WTO_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             {
                 WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -151,7 +153,8 @@ var ContainersBox = function (_a) {
                 WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 {
@@ -192,7 +195,8 @@ var ContainersBox = function (_a) {
                     WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
                     WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
                     WTQ_1: '',
-                    WTS_1: ''
+                    WTS_1: '',
+                    WTS_2: ''
                 }[layoutType],
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
 };

package/dist/src/desktop/{components → panels}/DesktopBasicModal/DesktopBasicModal.js

@@ -30,8 +30,7 @@ var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
-var MainButton_1 = require("../MainButton");
-var TextLabel_1 = require("../TextLabel");
+var components_1 = require("../../components");
 function DesktopBasicModal(_a) {
     var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, children = _a.children;
     var container = (0, react_1.useState)(function () {
@@ -56,16 +55,16 @@ function DesktopBasicModal(_a) {
         react_1.default.createElement(S_ModalOverlay, null),
         react_1.default.createElement(S_ModalWrapper, { size: size },
             react_1.default.createElement(S_Header, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
+                react_1.default.createElement(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
             react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType },
-                contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
+                contentText && (react_1.default.createElement(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
             react_1.default.createElement(hybrid_1.Divider, null),
             react_1.default.createElement(S_Footer, null,
-                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
+                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
                 react_1.default.createElement(S_Right, null,
-                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
-                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(MainButton_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
+                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
+                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), 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  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/{components → panels}/DesktopHeadlessModal/DesktopHeadlessModal.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-declare type DesktopBasicModalProps = {
+declare type DesktopHeadlessModalProps = {
     body: React.ReactNode;
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     dimmedClickCloseMode?: 'use' | 'none';
     scrollVisibleType?: 'hidden' | 'moving' | 'visible';
     onClose?: () => void;
 };
-declare function DesktopBasicModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopBasicModalProps): React.ReactPortal;
-export default DesktopBasicModal;
+declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): React.ReactPortal;
+export default DesktopHeadlessModal;

package/dist/src/desktop/{components → panels}/DesktopHeadlessModal/DesktopHeadlessModal.js

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
-function DesktopBasicModal(_a) {
+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 ? 'hidden' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
-        modalRoot.setAttribute('id', 'DesktopBasicModal');
+        modalRoot.setAttribute('id', 'DesktopHeadlessModal');
         return modalRoot;
     })[0];
     var targetRef = (0, react_1.useRef)(null);
@@ -117,5 +117,5 @@ var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject
     var scrollVisibleType = _a.scrollVisibleType;
     return scrollVisibleType === 'moving' && scrollVisible;
 });
-exports.default = DesktopBasicModal;
+exports.default = DesktopHeadlessModal;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,3 @@
+import { DesktopBasicModal } from './DesktopBasicModal';
+import { DesktopHeadlessModal } from './DesktopHeadlessModal';
+export { DesktopBasicModal, DesktopHeadlessModal };

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopHeadlessModal = exports.DesktopBasicModal = void 0;
+var DesktopBasicModal_1 = require("./DesktopBasicModal");
+Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
+var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
+Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });

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

@@ -32,31 +32,34 @@ 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;
     return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
 }
-var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
+var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType;
     return displayType &&
         {
             line: '1px',
             area: '16px'
         }[displayType];
+}, function (_a) {
+    var displayType = _a.displayType, theme = _a.theme;
+    return displayType &&
+        {
+            line: theme.ui_cpnt_divider,
+            area: theme.ui_cpnt_divider_area
+        }[displayType];
 });
 var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"], ["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"])), function (_a) {
     var $height = _a.$height;
     return ($height ? $height + "px" : '100%');
 });
-var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme &&
-        {
-            none: "background-color: " + theme.ui_cpnt_divider + ";",
-            divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
-        }[colorTheme];
-}, function (_a) {
+var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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 colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme === 'divider1' && "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";";
 });
 exports.default = Divider;
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -4,14 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var common_1 = require("../../../common");
+var styled_components_1 = require("styled-components");
 var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../../common/assets/icons/line"));
 var Icon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
+    var theme = (0, styled_components_1.useTheme)();
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+    return (react_1.default.createElement(SelectedIcon, { color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 declare type SwitchProps = {
+    name: string;
     status?: 'off' | 'on';
     state?: 'normal' | 'disabled';
-    name: string;
     onClick?: (status: boolean) => void;
 };
-declare function Switch({ status, state, name, onClick }: SwitchProps): JSX.Element;
+declare function Switch({ name, status, state, onClick }: SwitchProps): JSX.Element;
 export default Switch;

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

@@ -3,54 +3,28 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Switch(_a) {
-    var _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onClick = _a.onClick;
-    var _d = (0, react_1.useState)(false), checked = _d[0], setChecked = _d[1];
+    var name = _a.name, _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick;
     var handleChange = function (e) {
-        setChecked(e.target.checked);
         onClick && onClick(e.target.checked);
     };
-    (0, react_1.useEffect)(function () {
-        if (status === 'off') {
-            setChecked(false);
-        }
-        if (status === 'on') {
-            setChecked(true);
-        }
-    }, [status]);
     return (react_1.default.createElement(S_Switch, null,
-        react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: checked, disabled: state === 'disabled', onChange: handleChange }),
+        react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }),
         react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
 }
 var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"], ["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"])));
-var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"])), function (_a) {
+var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: ", ";\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: ", ";\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return disabled ? theme.ui_cpnt_selcontrols_base_off_disabled : theme.ui_cpnt_selcontrols_base_off;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;

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

@@ -151,7 +151,7 @@ function TextFieldBase(_a) {
         textAreaRef.current.style.height = textAreaRef.current.scrollHeight + "px";
     }, []);
     function deleteValue() {
-        setValue(name, '');
+        setValue(name, '', { shouldDirty: true });
     }
     // NOTE: input의 type이 number일때, e나 E의 경우 숫자로 취급되어 입력이 가능하지만, publ의 기획상 막아야하기 때문에 생성한 함수
     var preventEKeyword = function (e) {

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

@@ -5,9 +5,9 @@ declare type BasicListProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText?: PDSTextType;
     captionText?: PDSTextType;
-    columns: 1 | 2 | 3 | 4 | 5 | 6;
-    columnSpacing: 0 | 16 | 24;
-    rowSpacing: 0 | 24 | 32 | 48 | 64;
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    columnSpacing?: 0 | 16 | 24;
+    rowSpacing?: 0 | 24 | 32 | 48 | 64;
 };
 declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
 export default BasicList;

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

@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
     checkboxId?: number | string;
     radioId?: string;
     radioValue?: string;
+    switchName?: string;
+    switchState?: 'normal' | 'disabled';
+    switchStatus?: 'off' | 'on';
     onClick?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
 export default BasicListItem;

package/dist/src/mobile/components/BasicListItem/BasicListItem.js

@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
 var Radio_1 = require("../Radio");
 var TextLabel_1 = require("../TextLabel");
 function BasicListItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
     var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
                     captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
                         react_1.default.createElement(S_TextWrapper, null,
-                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
+                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
             react_1.default.createElement(S_RightBox, { displayType: displayType },
                 (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
                 (displayType === 'ibtn_amount1' ||
                     displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
                 displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
-                    react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
+                displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
+                    react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
         react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
 }

package/dist/src/mobile/components/Card/Card.js

@@ -35,7 +35,7 @@ var S_CardGroups = styled_components_1.default.div(templateObject_1 || (template
     return theme.boxShadow.elevation2 + ", 0 0 0 2px " + theme.ui_cpnt_card_selected_border + " inset";
 });
 var S_ImageIconModeBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  div {\n    border-radius: 16px 16px 0 0;\n  }\n"], ["\n  div {\n    border-radius: 16px 16px 0 0;\n  }\n"])));
-var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });

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

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
@@ -56,36 +57,38 @@ function Chip(_a) {
         switch (displayType) {
             case 'category_choice':
                 return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
-                    id !== value && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
-                        react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
-                    isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
+                    !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
+                    isActive && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
                 return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
                     react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
                         react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
             default:
                 return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
                     filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
                         react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  gap: 4px;\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  gap: 4px;\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {
@@ -98,13 +101,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
 });
-var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
-    return isActive
-        ? "margin-left: " + theme.spacing.spacingA + "px"
-        : "margin-right: " + theme.spacing.spacingA + "px";
-});
-var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+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  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"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -114,7 +111,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -124,11 +121,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
+var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -138,23 +135,23 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_FilterIconWrapper = 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.spacingA;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -13,7 +13,7 @@ function ContextMenu(_a) {
     var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
     return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, 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  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"])), function (_a) {
+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-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {

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

@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
         textColorTheme = 'sysTextPrimary';
     }
     if (!isSelected && state === 'normal') {
-        textColorTheme = 'sysTextSecondary';
+        textColorTheme = 'sysTextPrimary';
     }
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';
@@ -67,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected

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

@@ -7,6 +7,7 @@ declare type DropDownValues = PDSValueOption & {
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     defaultValue?: PDSValueOption;
+    value?: PDSValueOption;
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     responsiveMode?: 'none' | 'use';
@@ -16,5 +17,5 @@ declare type Props = {
     valueArray: DropDownValues[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ colorTheme, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;