pds-dev-kit-web 1.3.15 → 1.3.18

package/dist/src/common/assets/icons/fill/Subscribers.d.ts

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

package/dist/src/common/assets/icons/fill/Subscribers.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Subscribers = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M12.0001,12.0918 C7.6531,12.0918 4.0271,15.1768 3.1921,19.2778 C3.0031,20.2078 3.7191,21.0808 4.6691,21.0808 L19.3311,21.0808 C20.2811,21.0808 20.9971,20.2078 20.8081,19.2778 C19.9731,15.1768 16.3471,12.0918 12.0001,12.0918 M11.9739,2.9196 C9.6999,2.9196 7.8569,4.7626 7.8569,7.0366 C7.8569,9.3106 9.6999,11.1536 11.9739,11.1536 C14.2479,11.1536 16.0909,9.3106 16.0909,7.0366 C16.0909,4.7626 14.2479,2.9196 11.9739,2.9196" })));
+};
+exports.default = Subscribers;

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

@@ -36,6 +36,7 @@ declare const fillIcons: {
     readonly ic_speaker_wave_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_split_screen: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_star: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_subscribers: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_thumb_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_thumb_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_verified: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/fill/index.js

@@ -39,6 +39,7 @@ var SpeakerWave1_1 = __importDefault(require("./SpeakerWave1"));
 var SpeakerWave2_1 = __importDefault(require("./SpeakerWave2"));
 var SplitScreen_1 = __importDefault(require("./SplitScreen"));
 var Star_1 = __importDefault(require("./Star"));
+var Subscribers_1 = __importDefault(require("./Subscribers"));
 var ThumbDown_1 = __importDefault(require("./ThumbDown"));
 var ThumbUp_1 = __importDefault(require("./ThumbUp"));
 var Verified_1 = __importDefault(require("./Verified"));
@@ -90,6 +91,7 @@ var fillIcons = {
     ic_speaker_wave_2: SpeakerWave2_1.default,
     ic_split_screen: SplitScreen_1.default,
     ic_star: Star_1.default,
+    ic_subscribers: Subscribers_1.default,
     ic_thumb_down: ThumbDown_1.default,
     ic_thumb_up: ThumbUp_1.default,
     ic_verified: Verified_1.default,

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -152,5 +152,6 @@
     "sys_widget_dark_01": "grey950",
     "usr_menu_background_gradient_opacity00": "grey950/opacity00",
     "sys_border_line_white": "white",
-    "sys_component_base_white_opacity10": "white/opacity10"
+    "sys_component_base_white_opacity10": "white/opacity10",
+    "sys_cpnt_sheet_base_01": "darkgrey50"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -152,5 +152,6 @@
     "sys_widget_dark_01": "grey900",
     "usr_menu_background_gradient_opacity00": "white/opacity00",
     "sys_border_line_white": "white",
-    "sys_component_base_white_opacity10": "white/opacity10"
+    "sys_component_base_white_opacity10": "white/opacity10",
+    "sys_cpnt_sheet_base_01": "grey30"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json

@@ -29,7 +29,7 @@
     "opacity30": "4D",
     "opacity65": "A6",
     "darkgreen500": "#0ce1a8",
-    "grey70": "#F2F2F2",
+    "grey70": "#eff0f3",
     "navy500": "#313349",
     "lightgreen500": "#32d64c",
     "pink500": "#FB3A63",
@@ -52,6 +52,7 @@
     "darknavy100": "#7A82B2",
     "opacity80": "CC",
     "opacity50": "80",
-    "grey30": "#f9fafb",
-    "opacity95": "F2"
+    "grey30": "#f8f9fa",
+    "opacity95": "F2",
+    "darkgrey30": "#1d1d1e"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -426,7 +426,7 @@
     "ui_cpnt_dropdown_border_darktheme_normal": "sys_border_line_darktheme_01",
     "ui_cpnt_dropdown_border_darktheme_focus": "sys_border_line_darktheme_04",
     "ui_cpnt_dropdown_base_darktheme_disabled": "sys_component_base_darktheme_01",
-    "ui_cpnt_sheet_base": "sys_component_base_01",
+    "ui_cpnt_sheet_base": "sys_cpnt_sheet_base_01",
     "ui_cpnt_button_icon_darktheme_default": "sys_widget_grey_darktheme_02",
     "ui_cpnt_button_icon_darktheme_primary": "usr_widget_brand_primary_darktheme_01",
     "ui_cpnt_button_text_darktheme_default": "sys_text_grey_darktheme_02",
@@ -486,5 +486,6 @@
     "ui_cpnt_dropdown_text_white_hint": "sys_text_white",
     "ui_cpnt_dropdown_icon_white_default": "sys_widget_white",
     "ui_cpnt_dropdown_border_white_focus": "sys_border_line_03",
-    "ui_cpnt_dropdown_base_white_normal": "sys_component_base_white_opacity10"
+    "ui_cpnt_dropdown_base_white_normal": "sys_component_base_white_opacity10",
+    "ui_profile_image_border_brandprimary": "usr_brand_primary"
 }

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

@@ -1,5 +1,63 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+    };
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -154,8 +212,9 @@ declare const colorSet: {
         usr_menu_background_gradient_opacity00: string;
         sys_border_line_white: string;
         sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -310,6 +369,7 @@ declare const colorSet: {
         usr_menu_background_gradient_opacity00: string;
         sys_border_line_white: string;
         sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -800,63 +860,7 @@ declare const colorSet: {
         ui_cpnt_dropdown_icon_white_default: string;
         ui_cpnt_dropdown_border_white_focus: string;
         ui_cpnt_dropdown_base_white_normal: string;
-    };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
+        ui_profile_image_border_brandprimary: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var colorSet = {
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default,
-    SemanticColor: SemanticColor_json_1.default
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -487,4 +487,5 @@ export interface UITheme {
     ui_cpnt_dropdown_icon_white_default: string;
     ui_cpnt_dropdown_border_white_focus: string;
     ui_cpnt_dropdown_base_white_normal: string;
+    ui_profile_image_border_brandprimary: string;
 }

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

@@ -1,86 +1,86 @@
 import { desktopFontSize, fontWeight } from '../styles/theme';
 export interface PdsDevKitTheme {
     fontWeight: {
-        normal: string;
-        bold: string;
+        normal: '500';
+        bold: '700';
     };
     desktopFontSize: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
+        displayHeading: '40px';
+        heading: '24px';
+        leadParagraph: '20px';
+        subtitle: '18px';
+        body1: '18px';
+        body2: '16px';
+        caption1: '14px';
+        caption2: '12px';
+        form1: '16px';
+        form2: '14px';
+        blog1: '16px';
     };
     desktopLineHeight: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
-        singleLine: string;
+        displayHeading: '1.5';
+        heading: '1.5';
+        leadParagraph: '1.5';
+        subtitle: '1.5';
+        body1: '1.5';
+        body2: '1.5';
+        caption1: '1.5';
+        caption2: '1.5';
+        form1: '1.6';
+        form2: '1.6';
+        blog1: '1.6';
+        singleLine: '1';
     };
     mobileFontSize: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
+        displayHeading: '32px';
+        heading: '24px';
+        leadParagraph: '20px';
+        subtitle: '18px';
+        body1: '18px';
+        body2: '16px';
+        caption1: '14px';
+        caption2: '12px';
+        form1: '16px';
+        form2: '14px';
+        blog1: '16px';
     };
     mobileLineHeight: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
-        singleLine: string;
+        displayHeading: '1.5';
+        heading: '1.5';
+        leadParagraph: '1.5';
+        subtitle: '1.5';
+        body1: '1.5';
+        body2: '1.5';
+        caption1: '1.5';
+        caption2: '1.5';
+        form1: '1.6';
+        form2: '1.6';
+        blog1: '1.6';
+        singleLine: '1';
     };
     boxShadow: {
-        elevation0: string;
-        elevation1: string;
-        elevation2: string;
-        elevation3: string;
-        elevation4: string;
-        elevation5: string;
+        elevation0: '0 0 0 0 #0003';
+        elevation1: '0 2px 8px 0 #0003';
+        elevation2: '0 3px 12px 0 #0003';
+        elevation3: '0 4px 16px 0 #0003';
+        elevation4: '0 5px 20px 0 #0003';
+        elevation5: '0 6px 24px 0 #0003';
     };
     spacing: {
-        spacingA: string;
-        spacingB: string;
-        spacingC: string;
-        spacingD: string;
-        spacingE: string;
-        spacingF: string;
-        spacingG: string;
-        spacingH: string;
-        spacingI: string;
-        spacingJ: string;
-        spacingK: string;
-        spacingL: string;
-        spacingM: string;
-        spacingN: string;
+        spacingA: '4px';
+        spacingB: '8px';
+        spacingC: '12px';
+        spacingD: '16px';
+        spacingE: '24px';
+        spacingF: '32px';
+        spacingG: '48px';
+        spacingH: '64px';
+        spacingI: '88px';
+        spacingJ: '120px';
+        spacingK: '160px';
+        spacingL: '240px';
+        spacingM: '288px';
+        spacingN: '320px';
     };
 }
 export declare type DesktopFontSize = keyof typeof desktopFontSize;

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

@@ -189,7 +189,7 @@ function AdminList(_a) {
                 react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
         react_1.default.createElement(S_ScrollBox, { scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, react_1.default.Children.count(children) ? (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, checkboxMethods),
             react_1.default.createElement("form", null, childrenWithWidthProps))) : (react_1.default.createElement(S_EmptyTextWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center" }))))));
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }))))));
 }
 var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"])));
 var scrollVisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));

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

@@ -28,10 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.spacingMode, spacingMode = _g === void 0 ? 'use' : _g, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var validateOnChange = register(name, validation).onChange;
     function handleFocus(e) {
         if (onFocus) {
             onFocus(e);
@@ -48,16 +51,17 @@ function BlogTextField(_a) {
         }
     }
     function handleChange(e) {
+        validateOnChange(e);
         if (onChange) {
             onChange(e);
         }
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -42,8 +42,18 @@ function ContextMenuItem(_a) {
             onClick(value);
         }
     };
+    var textColorTheme;
+    if (isSelected) {
+        textColorTheme = 'sysTextPrimary';
+    }
+    if (!isSelected && state === 'normal') {
+        textColorTheme = 'sysTextSecondary';
+    }
+    if (state === 'disabled') {
+        textColorTheme = 'sysTextTertiary';
+    }
     return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary' })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -5,15 +5,16 @@ declare type DropDownValues = PDSValueOption & {
     state?: 'normal' | 'disabled';
 };
 declare type Props = {
-    size?: 'large' | 'small';
-    hintText?: TFunctionResult;
+    colorTheme?: 'none' | 'dark';
     defaultValue?: PDSValueOption;
-    valueArray: DropDownValues[];
+    hintText?: TFunctionResult;
+    maxHeightItemNumber?: number;
+    responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
+    size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
-    maxHeightItemNumber?: number;
+    valueArray: DropDownValues[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, maxHeightItemNumber, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,9 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.maxHeightItemNumber, maxHeightItemNumber = _f === void 0 ? 5 : _f, onChange = _a.onChange;
-    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedOption = _h[0], setSelectedOption = _h[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
+    var _j = (0, react_1.useState)(defaultValue), selectedOption = _j[0], setSelectedOption = _j[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedOption(defaultValue);
@@ -106,8 +106,8 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
@@ -122,9 +122,15 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '188px');
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -132,7 +138,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
     switch (state) {
         case 'disabled':

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

@@ -270,7 +270,7 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (template
 var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
 var tooltipRightTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
 var tooltipRightBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -352,7 +352,7 @@ var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templat
     }
 });
 var S_IconWrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  hyphens: auto;\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  hyphens: auto;\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {