pds-dev-kit-web 0.6.0 → 0.6.3

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

@@ -123,5 +123,7 @@
     "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
     "sys_widget_green_01": "darkgreen500",
     "sys_component_base_black_opacity30": "black/opacity30",
-    "sys_area_background": "darkgrey50/opacity65"
+    "sys_area_background": "darkgrey50/opacity65",
+    "sys_border_white_opacity30": "white/opacity30",
+    "sys_container_background_wt": "grey950"
 }

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

@@ -123,5 +123,7 @@
     "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
     "sys_widget_green_01": "green500",
     "sys_component_base_black_opacity30": "black/opacity30",
-    "sys_area_background": "darkgrey50/opacity65"
+    "sys_area_background": "darkgrey50/opacity65",
+    "sys_border_white_opacity30": "white/opacity30",
+    "sys_container_background_wt": "grey30"
 }

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

@@ -51,5 +51,6 @@
     "navy100": "#6E77A9",
     "darknavy100": "#7A82B2",
     "opacity80": "CC",
-    "opacity50": "80"
+    "opacity50": "80",
+    "grey30": "#f9fafb"
 }

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

@@ -446,5 +446,11 @@
     "ui_cpnt_progressbar_02": "sys_widget_grey_04",
     "ui_36": "sys_component_base_black_opacity80",
     "ui_37": "sys_component_base_black_opacity30",
-    "ui_39": "sys_area_background"
+    "ui_39": "sys_area_background",
+    "ui_cpnt_divider_white_opacity30": "sys_border_white_opacity30",
+    "ui_pagemenucontainer_background_wt": "sys_container_background_wt",
+    "ui_contentscontainer_background_wt": "sys_container_background_wt",
+    "ui_pagemenuarea_background_wt": "sys_container_background_01",
+    "ui_contentsarea_background_wt": "sys_container_background_01",
+    "ui_cpnt_standardbanner_base_default": "sys_component_base_02"
 }

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

@@ -1,59 +1,4 @@
 declare const colorSet: {
-    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;
-    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -180,6 +125,8 @@ declare const colorSet: {
         sys_widget_green_01: string;
         sys_component_base_black_opacity30: string;
         sys_area_background: string;
+        sys_border_white_opacity30: string;
+        sys_container_background_wt: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -307,6 +254,64 @@ declare const colorSet: {
         sys_widget_green_01: string;
         sys_component_base_black_opacity30: string;
         sys_area_background: string;
+        sys_border_white_opacity30: string;
+        sys_container_background_wt: 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;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -757,6 +762,12 @@ declare const colorSet: {
         ui_36: string;
         ui_37: string;
         ui_39: string;
+        ui_cpnt_divider_white_opacity30: string;
+        ui_pagemenucontainer_background_wt: string;
+        ui_contentscontainer_background_wt: string;
+        ui_pagemenuarea_background_wt: string;
+        ui_contentsarea_background_wt: string;
+        ui_cpnt_standardbanner_base_default: 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 SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -447,4 +447,10 @@ export interface UITheme {
     ui_36: string;
     ui_37: string;
     ui_39: string;
+    ui_cpnt_divider_white_opacity30: string;
+    ui_pagemenucontainer_background_wt: string;
+    ui_contentscontainer_background_wt: string;
+    ui_pagemenuarea_background_wt: string;
+    ui_contentsarea_background_wt: string;
+    ui_cpnt_standardbanner_base_default: string;
 }

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

@@ -29,7 +29,6 @@ export declare const theme: {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     mobileFontSize: {
         displayHeading: string;
@@ -57,7 +56,6 @@ export declare const theme: {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     uiColors: import("..").UITheme;
 };

package/dist/src/common/styles/theme.d.ts

@@ -29,7 +29,6 @@ export declare const desktopLineHeight: {
     form2: string;
     blog1: string;
     singleLine: string;
-    btn: string;
 };
 export declare const mobileFontSize: {
     displayHeading: string;
@@ -57,7 +56,6 @@ export declare const mobileLineHeight: {
     form2: string;
     blog1: string;
     singleLine: string;
-    btn: string;
 };
 export declare const boxShadow: {
     elevation0: string;

package/dist/src/common/styles/theme.js

@@ -42,8 +42,7 @@ exports.desktopLineHeight = {
     form1: '1.6',
     form2: '1.6',
     blog1: '1.6',
-    singleLine: 'normal',
-    btn: '1'
+    singleLine: '1'
 };
 exports.mobileFontSize = {
     displayHeading: '32px',
@@ -70,8 +69,7 @@ exports.mobileLineHeight = {
     form1: '1.6',
     form2: '1.6',
     blog1: '1.6',
-    singleLine: 'normal',
-    btn: '1'
+    singleLine: '1'
 };
 exports.boxShadow = {
     elevation0: '0 0 0 0 #0003',
@@ -97,5 +95,5 @@ exports.spacing = {
     spacingM: '288px',
     spacingN: '320px'
 };
-var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, ui_colors_1.uiColors);
+var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK'));
 exports.default = theme;

package/dist/src/common/styles/ui-colors.d.ts

@@ -1,3 +1,8 @@
 import { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
+declare global {
+    interface Window {
+        PdsUtils: any;
+    }
+}
 export declare const customTheme: (tone: string) => any;

package/dist/src/common/styles/ui-colors.js

@@ -36,7 +36,11 @@ var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteCol
 // ui-color-build-phase
 var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
+window.PdsUtils = {
+    tone: 'DARK'
+};
 var customTheme = function (tone) {
+    window.PdsUtils.tone = tone;
     var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, colorSetting.customPalette), colorSet_1.default.UIColor);
     return buildedColors;
 };

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

@@ -30,7 +30,6 @@ export interface PdsDevKitTheme {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     mobileFontSize: {
         displayHeading: string;
@@ -58,7 +57,6 @@ export interface PdsDevKitTheme {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     boxShadow: {
         elevation0: string;

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

@@ -29,21 +29,21 @@ function Chip(_a) {
                 return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
                     chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
                         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", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
                     chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
                         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: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", btnMode: "use", colorTheme: "sysTextPrimary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextTertiary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextWhite" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: "sysTextSecondary" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
                     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:
@@ -52,7 +52,7 @@ function Chip(_a) {
                         react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
                                 ? 'ui_cpnt_chip_fill_icon_active_01'
                                 : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());

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

@@ -41,7 +41,7 @@ function DesktopTabBar(_a) {
     };
     var textLabel = function (value, isSubText) {
         if (isSubText) {
-            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', btnMode: "use" }));
+            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
         }
         if (styleTheme === 'content') {
             return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));

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

@@ -101,6 +101,7 @@ function EditApplyTextField(_a) {
     }
     var handleKeyUp = function (e) {
         if (textLineType === 'single' && e.key === 'Enter') {
+            e.preventDefault();
             e.target.blur();
             handleSubmit();
         }

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

@@ -59,11 +59,11 @@ function FloatingActionButton(_a) {
         displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
         displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
+            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
             displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"])));
 var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"], ["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"])));

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

@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -100,7 +102,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

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

@@ -98,7 +98,7 @@ function MainButton(_a) {
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
         size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));

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

@@ -100,7 +100,7 @@ function ReactionButton(_a) {
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
         react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", btnMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: 'pointer';\n  display: flex;\n  justify-content: center;\n  padding: 0;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: 'pointer';\n  display: flex;\n  justify-content: center;\n  padding: 0;\n"])));
 var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);

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

@@ -37,7 +37,7 @@ function StatusBlock(_a) {
         small: 'body2Bold'
     };
     return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", btnMode: "use", colorTheme: "sysTextWhite" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 48px;\n"], ["\n  border-radius: 8px;\n  height: 48px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 40px;\n"], ["\n  border-radius: 8px;\n  height: 40px;\n"])));

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

@@ -68,7 +68,7 @@ function TextButton(_a) {
         xsmall: 'caption1Regular'
     };
     return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  ", ";\n"], ["\n  height: 48px;\n  ", ";\n"])), function (_a) {
     var size = _a.size;

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

@@ -117,12 +117,25 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
 }
-var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
-var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
+var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            small: 'width: 188px;',
+            medium: 'width: 188px;',
+            large: 'width: 432px;',
+            rlarge: 'width: 100%'
+        }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+});
+var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
+var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return (46 -
         Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
@@ -133,21 +146,21 @@ var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
         Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
         2;
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var medium = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
@@ -163,7 +176,7 @@ var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     var textLineType = _a.textLineType;
     return textLineType === 'auto' && auto;
 });
-var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
@@ -174,21 +187,21 @@ var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6
         return theme.ui_cpnt_textfield_border_focus;
     return theme.ui_cpnt_textfield_border_normal;
 });
-var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_disabled;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_normal;
 });
-var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_disabled;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_normal;
 });
-var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
@@ -199,21 +212,21 @@ var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObje
         return theme.ui_cpnt_textfield_border_darktheme_focus;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var dark_read_only = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_darktheme_disabled;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var dark_disabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_darktheme_disabled;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -244,8 +257,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
+var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme === 'none'
         ? theme.ui_cpnt_textfield_text_error
@@ -264,4 +277,4 @@ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObje
     return theme.spacing.spacingA;
 });
 exports.default = TextField;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

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

@@ -10,7 +10,6 @@ export declare type TextLabelProps = {
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
-    btnMode?: 'none' | 'use';
 };
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
@@ -21,7 +20,6 @@ export declare type TextStyleProps = {
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
-    btnMode?: 'none' | 'use';
 };
-declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit, btnMode }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
 export default TextLabel;