pds-dev-kit-web 2.2.189 → 2.2.191

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +4 -1
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +4 -1
  3. package/dist/src/common/styles/colorSet/UIColor.json +5 -1
  4. package/dist/src/common/styles/colorSet/index.d.ts +12 -2
  5. package/dist/src/common/styles/colorSet/index.js +2 -2
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
  7. package/dist/src/desktop/components/BoxItem/BoxItem.js +3 -5
  8. package/dist/src/desktop/components/TextButton/TextButton.d.ts +1 -1
  9. package/dist/src/desktop/components/TextButton/TextButton.js +56 -39
  10. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  11. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +56 -39
  12. package/dist/src/mobile/components/BoxItem/BoxItem.js +3 -5
  13. package/dist/src/mobile/components/TextButton/TextButton.d.ts +1 -1
  14. package/dist/src/mobile/components/TextButton/TextButton.js +44 -30
  15. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  16. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +44 -30
  17. package/package.json +1 -1
  18. package/release-note.md +3 -2
package/dist/src/common/styles/colorSet/PaletteColor_Dark.json CHANGED
@@ -376,5 +376,8 @@
376
376
  "sys_cpnt_sheet_base_53": "darkgrey70",
377
377
  "sys_widget_grey_07": "grey900",
378
378
  "sys_cpnt_sheet_base_54": "grey30",
379
- "sys_component_border_01": "grey100/opacity50"
379
+ "sys_component_border_01": "grey100/opacity50",
380
+ "sys_widget_grey_08": "grey400",
381
+ "sys_on_base_hover_01": "black/opacity05",
382
+ "sys_on_base_pressed_01": "black/opacity10"
380
383
  }
package/dist/src/common/styles/colorSet/PaletteColor_light.json CHANGED
@@ -376,5 +376,8 @@
376
376
  "sys_cpnt_sheet_base_53": "white",
377
377
  "sys_widget_grey_07": "white",
378
378
  "sys_cpnt_sheet_base_54": "grey600",
379
- "sys_component_border_01": "grey100/opacity50"
379
+ "sys_component_border_01": "grey100/opacity50",
380
+ "sys_widget_grey_08": "darkgrey500",
381
+ "sys_on_base_hover_01": "white/opacity10",
382
+ "sys_on_base_pressed_01": "white/opacity20"
380
383
  }
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -900,5 +900,9 @@
900
900
  "ui_cpnt_selcontrols_text_grey_01": "sys_text_grey_01",
901
901
  "ui_cpnt_snackbar_text": "sys_widget_grey_07",
902
902
  "ui_cpnt_snackbar_base": "sys_cpnt_sheet_base_54",
903
- "ui_140": "sys_component_border_01"
903
+ "ui_140": "sys_component_border_01",
904
+ "ui_141": "sys_widget_grey_07",
905
+ "ui_142": "sys_widget_grey_08",
906
+ "ui_143": "sys_on_base_hover_01",
907
+ "ui_144": "sys_on_base_pressed_01"
904
908
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -123,7 +123,7 @@ declare const colorSet: {
123
123
  grey450: string;
124
124
  darkgrey450: string;
125
125
  };
126
- readonly PaletteColor_light: {
126
+ readonly PaletteColor_Dark: {
127
127
  sys_container_background_01: string;
128
128
  sys_container_background_02: string;
129
129
  sys_container_background_03: string;
@@ -502,8 +502,11 @@ declare const colorSet: {
502
502
  sys_widget_grey_07: string;
503
503
  sys_cpnt_sheet_base_54: string;
504
504
  sys_component_border_01: string;
505
+ sys_widget_grey_08: string;
506
+ sys_on_base_hover_01: string;
507
+ sys_on_base_pressed_01: string;
505
508
  };
506
- readonly PaletteColor_Dark: {
509
+ readonly PaletteColor_light: {
507
510
  sys_container_background_01: string;
508
511
  sys_container_background_02: string;
509
512
  sys_container_background_03: string;
@@ -882,6 +885,9 @@ declare const colorSet: {
882
885
  sys_widget_grey_07: string;
883
886
  sys_cpnt_sheet_base_54: string;
884
887
  sys_component_border_01: string;
888
+ sys_widget_grey_08: string;
889
+ sys_on_base_hover_01: string;
890
+ sys_on_base_pressed_01: string;
885
891
  };
886
892
  readonly UIColor: {
887
893
  ui_cpnt_button_fill_base_primary: string;
@@ -1786,6 +1792,10 @@ declare const colorSet: {
1786
1792
  ui_cpnt_snackbar_text: string;
1787
1793
  ui_cpnt_snackbar_base: string;
1788
1794
  ui_140: string;
1795
+ ui_141: string;
1796
+ ui_142: string;
1797
+ ui_143: string;
1798
+ ui_144: string;
1789
1799
  };
1790
1800
  };
1791
1801
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
8
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_light: PaletteColor_light_json_1.default,
14
13
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
+ PaletteColor_light: PaletteColor_light_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -901,4 +901,8 @@ export interface UITheme {
901
901
  ui_cpnt_snackbar_text: string;
902
902
  ui_cpnt_snackbar_base: string;
903
903
  ui_140: string;
904
+ ui_141: string;
905
+ ui_142: string;
906
+ ui_143: string;
907
+ ui_144: string;
904
908
  }
package/dist/src/desktop/components/BoxItem/BoxItem.js CHANGED
@@ -89,7 +89,8 @@ function BoxItem(_a) {
89
89
  justifyContent: 'space-between',
90
90
  maxWidth: '100%',
91
91
  cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
92
- } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [chipMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] }))] })) })));
92
+ } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
93
+ (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
93
94
  }
94
95
  var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
95
96
  var theme = _a.theme;
@@ -99,9 +100,6 @@ var S_TextGroup = styled_components_1.default.div(templateObject_2 || (templateO
99
100
  var theme = _a.theme;
100
101
  return theme.spacing.spacingA;
101
102
  });
102
- var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: ", ";\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n align-items: center;\n display: flex;\n flex: ", ";\n flex-direction: row;\n justify-content: flex-end;\n"])), function (_a) {
103
- var hasRightBox = _a.hasRightBox;
104
- return hasRightBox && 3;
105
- });
103
+ var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n min-width: fit-content;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n min-width: fit-content;\n"])));
106
104
  exports.default = BoxItem;
107
105
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
12
  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
13
13
  };
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -66,9 +66,55 @@ var textColor = {
66
66
  red: 'sysTextError',
67
67
  grey_01: 'sysTextPrimary',
68
68
  grey2: 'sysTextSecondary',
69
+ grey3: undefined,
69
70
  white: 'sysTextWhite',
70
71
  white2: 'sysTextWhite'
71
72
  };
73
+ var textDisabledColor = {
74
+ none: 'sysTextTertiary',
75
+ red: 'sysTextTertiary',
76
+ grey_01: 'sysTextTertiary',
77
+ grey2: 'sysTextTertiary',
78
+ grey3: undefined,
79
+ white: 'sysTextTertiary',
80
+ white2: 'sysTextTertiary'
81
+ };
82
+ var overrideTextColor = {
83
+ none: undefined,
84
+ red: undefined,
85
+ grey_01: undefined,
86
+ grey2: undefined,
87
+ grey3: 'ui_141',
88
+ white: undefined,
89
+ white2: undefined
90
+ };
91
+ var overrideTextDisabledColor = {
92
+ none: undefined,
93
+ red: undefined,
94
+ grey_01: undefined,
95
+ grey2: undefined,
96
+ grey3: 'ui_142',
97
+ white: undefined,
98
+ white2: undefined
99
+ };
100
+ var backgroundHoverColor = {
101
+ none: 'ui_cpnt_button_line_base_hover',
102
+ red: 'ui_cpnt_button_line_base_hover',
103
+ grey_01: 'ui_cpnt_button_line_base_hover',
104
+ grey2: 'ui_cpnt_button_line_base_hover',
105
+ grey3: 'ui_143',
106
+ white: 'ui_cpnt_button_white_base_hover',
107
+ white2: 'ui_cpnt_textbutton_white_variation_base_hover'
108
+ };
109
+ var backgroundPressedColor = {
110
+ none: 'ui_cpnt_button_line_base_pressed',
111
+ red: 'ui_cpnt_button_line_base_pressed',
112
+ grey_01: 'ui_cpnt_button_line_base_pressed',
113
+ grey2: 'ui_cpnt_button_line_base_pressed',
114
+ grey3: 'ui_144',
115
+ white: 'ui_cpnt_button_white_base_pressed',
116
+ white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
117
+ };
72
118
  function TextButton(_a) {
73
119
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick", "onKeyDown"]);
74
120
  var buttonRef = (0, react_1.useRef)(null);
@@ -88,7 +134,9 @@ function TextButton(_a) {
88
134
  onClick(e);
89
135
  }
90
136
  };
91
- return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
137
+ return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
138
+ ? overrideTextDisabledColor[colorTheme]
139
+ : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
92
140
  }
93
141
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
94
142
  var size = _a.size;
@@ -97,46 +145,15 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
97
145
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
98
146
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
99
147
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
100
- var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
101
- var theme = _a.theme;
102
- return theme.ui_cpnt_button_line_base_hover;
103
- }, function (_a) {
104
- var theme = _a.theme;
105
- return theme.ui_cpnt_button_line_base_pressed;
106
- });
107
- var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
108
- var theme = _a.theme;
109
- return theme.ui_cpnt_button_white_base_hover;
110
- }, function (_a) {
111
- var theme = _a.theme;
112
- return theme.ui_cpnt_button_white_base_pressed;
113
- });
114
- var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
115
- var theme = _a.theme;
116
- return theme.ui_cpnt_textbutton_white_variation_base_hover;
117
- }, function (_a) {
118
- var theme = _a.theme;
119
- return theme.ui_cpnt_textbutton_white_variation_base_pressed;
120
- });
121
- var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n\n ", ";\n"])), function (_a) {
148
+ var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n\n ", ";\n"])), function (_a) {
122
149
  var state = _a.state;
123
150
  return (state === 'normal' ? 'pointer' : 'default');
124
151
  }, transitionStyle_1.ButtonTransition, function (_a) {
125
- var colorTheme = _a.colorTheme;
126
- switch (colorTheme) {
127
- case 'none':
128
- case 'red':
129
- case 'grey_01':
130
- return colorThemeDefault;
131
- case 'grey2':
132
- return colorThemeDefault;
133
- case 'white':
134
- return colorThemeWhite;
135
- case 'white2':
136
- return colorThemeWhite2;
137
- default:
138
- return colorThemeDefault;
139
- }
152
+ var hoverColor = _a.hoverColor, theme = _a.theme;
153
+ return theme[hoverColor];
154
+ }, function (_a) {
155
+ var pressedColor = _a.pressedColor, theme = _a.theme;
156
+ return theme[pressedColor];
140
157
  }, function (_a) {
141
158
  var size = _a.size;
142
159
  return size &&
@@ -159,4 +176,4 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
159
176
  return responsiveMode === 'use' && 'width: 100%';
160
177
  });
161
178
  exports.default = TextButton;
162
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
179
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -54,9 +54,55 @@ var textColor = {
54
54
  red: 'sysTextError',
55
55
  grey_01: 'sysTextPrimary',
56
56
  grey2: 'sysTextSecondary',
57
+ grey3: undefined,
57
58
  white: 'sysTextWhite',
58
59
  white2: 'sysTextWhite'
59
60
  };
61
+ var textDisabledColor = {
62
+ none: 'sysTextTertiary',
63
+ red: 'sysTextTertiary',
64
+ grey_01: 'sysTextTertiary',
65
+ grey2: 'sysTextTertiary',
66
+ grey3: undefined,
67
+ white: 'sysTextTertiary',
68
+ white2: 'sysTextTertiary'
69
+ };
70
+ var overrideTextColor = {
71
+ none: undefined,
72
+ red: undefined,
73
+ grey_01: undefined,
74
+ grey2: undefined,
75
+ grey3: 'ui_141',
76
+ white: undefined,
77
+ white2: undefined
78
+ };
79
+ var overrideTextDisabledColor = {
80
+ none: undefined,
81
+ red: undefined,
82
+ grey_01: undefined,
83
+ grey2: undefined,
84
+ grey3: 'ui_142',
85
+ white: undefined,
86
+ white2: undefined
87
+ };
88
+ var backgroundHoverColor = {
89
+ none: 'ui_cpnt_button_line_base_hover',
90
+ red: 'ui_cpnt_button_line_base_hover',
91
+ grey_01: 'ui_cpnt_button_line_base_hover',
92
+ grey2: 'ui_cpnt_button_line_base_hover',
93
+ grey3: 'ui_143',
94
+ white: 'ui_cpnt_button_white_base_hover',
95
+ white2: 'ui_cpnt_textbutton_white_variation_base_hover'
96
+ };
97
+ var backgroundPressedColor = {
98
+ none: 'ui_cpnt_button_line_base_pressed',
99
+ red: 'ui_cpnt_button_line_base_pressed',
100
+ grey_01: 'ui_cpnt_button_line_base_pressed',
101
+ grey2: 'ui_cpnt_button_line_base_pressed',
102
+ grey3: 'ui_144',
103
+ white: 'ui_cpnt_button_white_base_pressed',
104
+ white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
105
+ };
60
106
  function UploadTextButton(_a) {
61
107
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
62
108
  var handleClick = function (e) {
@@ -65,7 +111,9 @@ function UploadTextButton(_a) {
65
111
  }
66
112
  e.target.value = '';
67
113
  };
68
- return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
114
+ return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
115
+ ? overrideTextDisabledColor[colorTheme]
116
+ : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
69
117
  }
70
118
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
71
119
  var size = _a.size;
@@ -74,49 +122,18 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
74
122
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
75
123
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
76
124
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
77
- var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
78
- var theme = _a.theme;
79
- return theme.ui_cpnt_button_line_base_hover;
80
- }, function (_a) {
81
- var theme = _a.theme;
82
- return theme.ui_cpnt_button_line_base_pressed;
83
- });
84
- var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
85
- var theme = _a.theme;
86
- return theme.ui_cpnt_button_white_base_hover;
87
- }, function (_a) {
88
- var theme = _a.theme;
89
- return theme.ui_cpnt_button_white_base_pressed;
90
- });
91
- var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
92
- var theme = _a.theme;
93
- return theme.ui_cpnt_textbutton_white_variation_base_hover;
94
- }, function (_a) {
95
- var theme = _a.theme;
96
- return theme.ui_cpnt_textbutton_white_variation_base_pressed;
97
- });
98
- var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
125
+ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
99
126
  var disabled = _a.disabled;
100
127
  return (disabled ? 'default' : 'pointer');
101
128
  }, function (_a) {
102
129
  var theme = _a.theme;
103
130
  return theme.spacing.spacingB;
104
131
  }, transitionStyle_1.ButtonTransition, function (_a) {
105
- var colorTheme = _a.colorTheme;
106
- switch (colorTheme) {
107
- case 'none':
108
- case 'red':
109
- case 'grey_01':
110
- return colorThemeDefault;
111
- case 'grey2':
112
- return colorThemeDefault;
113
- case 'white':
114
- return colorThemeWhite;
115
- case 'white2':
116
- return colorThemeWhite2;
117
- default:
118
- return colorThemeDefault;
119
- }
132
+ var hoverColor = _a.hoverColor, theme = _a.theme;
133
+ return theme[hoverColor];
134
+ }, function (_a) {
135
+ var pressedColor = _a.pressedColor, theme = _a.theme;
136
+ return theme[pressedColor];
120
137
  }, function (_a) {
121
138
  var theme = _a.theme, fontWeight = _a.fontWeight;
122
139
  return fontWeight &&
@@ -139,4 +156,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
139
156
  return responsiveMode === 'use' && 'width: 100%';
140
157
  });
141
158
  exports.default = UploadTextButton;
142
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
159
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/mobile/components/BoxItem/BoxItem.js CHANGED
@@ -88,7 +88,8 @@ function BoxItem(_a) {
88
88
  alignItems: 'center',
89
89
  justifyContent: 'space-between',
90
90
  cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
91
- } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [chipMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] }))] })) })));
91
+ } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
92
+ (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
92
93
  }
93
94
  var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
94
95
  var theme = _a.theme;
@@ -98,9 +99,6 @@ var S_TextGroup = styled_components_1.default.div(templateObject_2 || (templateO
98
99
  var theme = _a.theme;
99
100
  return theme.spacing.spacingA;
100
101
  });
101
- var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: ", ";\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n align-items: center;\n display: flex;\n flex: ", ";\n flex-direction: row;\n justify-content: flex-end;\n"])), function (_a) {
102
- var hasRightBox = _a.hasRightBox;
103
- return hasRightBox && 3;
104
- });
102
+ var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n min-width: fit-content;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n min-width: fit-content;\n"])));
105
103
  exports.default = BoxItem;
106
104
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/mobile/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -65,9 +65,46 @@ var textColor = {
65
65
  red: 'sysTextError',
66
66
  grey_01: 'sysTextPrimary',
67
67
  grey2: 'sysTextSecondary',
68
+ grey3: undefined,
68
69
  white: 'sysTextWhite',
69
70
  white2: 'sysTextWhite'
70
71
  };
72
+ var textDisabledColor = {
73
+ none: 'sysTextTertiary',
74
+ red: 'sysTextTertiary',
75
+ grey_01: 'sysTextTertiary',
76
+ grey2: 'sysTextTertiary',
77
+ grey3: undefined,
78
+ white: 'sysTextTertiary',
79
+ white2: 'sysTextTertiary'
80
+ };
81
+ var overrideTextColor = {
82
+ none: undefined,
83
+ red: undefined,
84
+ grey_01: undefined,
85
+ grey2: undefined,
86
+ grey3: 'ui_141',
87
+ white: undefined,
88
+ white2: undefined
89
+ };
90
+ var overrideTextDisabledColor = {
91
+ none: undefined,
92
+ red: undefined,
93
+ grey_01: undefined,
94
+ grey2: undefined,
95
+ grey3: 'ui_142',
96
+ white: undefined,
97
+ white2: undefined
98
+ };
99
+ var backgroundPressedColor = {
100
+ none: 'ui_cpnt_button_line_base_pressed',
101
+ red: 'ui_cpnt_button_line_base_pressed',
102
+ grey_01: 'ui_cpnt_button_line_base_pressed',
103
+ grey2: 'ui_cpnt_button_line_base_pressed',
104
+ grey3: 'ui_144',
105
+ white: 'ui_cpnt_button_white_base_pressed',
106
+ white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
107
+ };
71
108
  function TextButton(_a) {
72
109
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
73
110
  var handleClick = function (e) {
@@ -75,7 +112,9 @@ function TextButton(_a) {
75
112
  onClick(e);
76
113
  }
77
114
  };
78
- return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" }) })));
115
+ return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
116
+ ? overrideTextDisabledColor[colorTheme]
117
+ : overrideTextColor[colorTheme], singleLineMode: "use" }) })));
79
118
  }
80
119
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
81
120
  var size = _a.size;
@@ -84,34 +123,9 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
84
123
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
85
124
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
86
125
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
87
- var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
88
- var theme = _a.theme;
89
- return theme.ui_cpnt_button_line_base_pressed;
90
- });
91
- var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
92
- var theme = _a.theme;
93
- return theme.ui_cpnt_button_white_base_pressed;
94
- });
95
- var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
96
- var theme = _a.theme;
97
- return theme.ui_cpnt_textbutton_white_variation_base_pressed;
98
- });
99
- var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
100
- var colorTheme = _a.colorTheme;
101
- switch (colorTheme) {
102
- case 'none':
103
- case 'red':
104
- case 'grey_01':
105
- return colorThemeDefault;
106
- case 'grey2':
107
- return colorThemeDefault;
108
- case 'white':
109
- return colorThemeWhite;
110
- case 'white2':
111
- return colorThemeWhite2;
112
- default:
113
- return colorThemeDefault;
114
- }
126
+ var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
127
+ var pressedColor = _a.pressedColor, theme = _a.theme;
128
+ return theme[pressedColor];
115
129
  }, function (_a) {
116
130
  var size = _a.size;
117
131
  return size &&
@@ -134,4 +148,4 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
134
148
  return responsiveMode === 'use' && 'width: 100%';
135
149
  });
136
150
  exports.default = TextButton;
137
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
151
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -54,9 +54,46 @@ var textColor = {
54
54
  red: 'sysTextError',
55
55
  grey_01: 'sysTextPrimary',
56
56
  grey2: 'sysTextSecondary',
57
+ grey3: undefined,
57
58
  white: 'sysTextWhite',
58
59
  white2: 'sysTextWhite'
59
60
  };
61
+ var textDisabledColor = {
62
+ none: 'sysTextTertiary',
63
+ red: 'sysTextTertiary',
64
+ grey_01: 'sysTextTertiary',
65
+ grey2: 'sysTextTertiary',
66
+ grey3: undefined,
67
+ white: 'sysTextTertiary',
68
+ white2: 'sysTextTertiary'
69
+ };
70
+ var overrideTextColor = {
71
+ none: undefined,
72
+ red: undefined,
73
+ grey_01: undefined,
74
+ grey2: undefined,
75
+ grey3: 'ui_141',
76
+ white: undefined,
77
+ white2: undefined
78
+ };
79
+ var overrideTextDisabledColor = {
80
+ none: undefined,
81
+ red: undefined,
82
+ grey_01: undefined,
83
+ grey2: undefined,
84
+ grey3: 'ui_142',
85
+ white: undefined,
86
+ white2: undefined
87
+ };
88
+ var backgroundPressedColor = {
89
+ none: 'ui_cpnt_button_line_base_pressed',
90
+ red: 'ui_cpnt_button_line_base_pressed',
91
+ grey_01: 'ui_cpnt_button_line_base_pressed',
92
+ grey2: 'ui_cpnt_button_line_base_pressed',
93
+ grey3: 'ui_144',
94
+ white: 'ui_cpnt_button_white_base_pressed',
95
+ white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
96
+ };
60
97
  function UploadTextButton(_a) {
61
98
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
62
99
  var handleClick = function (e) {
@@ -65,7 +102,9 @@ function UploadTextButton(_a) {
65
102
  }
66
103
  e.target.value = '';
67
104
  };
68
- return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
105
+ return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
106
+ ? overrideTextDisabledColor[colorTheme]
107
+ : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
69
108
  }
70
109
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n width: ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
71
110
  var size = _a.size;
@@ -74,37 +113,12 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
74
113
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
75
114
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
76
115
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
77
- var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
78
- var theme = _a.theme;
79
- return theme.ui_cpnt_button_line_base_pressed;
80
- });
81
- var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
82
- var theme = _a.theme;
83
- return theme.ui_cpnt_button_white_base_pressed;
84
- });
85
- var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
86
- var theme = _a.theme;
87
- return theme.ui_cpnt_textbutton_white_variation_base_pressed;
88
- });
89
- var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
116
+ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
90
117
  var theme = _a.theme;
91
118
  return theme.spacing.spacingB;
92
119
  }, transitionStyle_1.ButtonTransition, function (_a) {
93
- var colorTheme = _a.colorTheme;
94
- switch (colorTheme) {
95
- case 'none':
96
- case 'red':
97
- case 'grey_01':
98
- return colorThemeDefault;
99
- case 'grey2':
100
- return colorThemeDefault;
101
- case 'white':
102
- return colorThemeWhite;
103
- case 'white2':
104
- return colorThemeWhite2;
105
- default:
106
- return colorThemeDefault;
107
- }
120
+ var pressedColor = _a.pressedColor, theme = _a.theme;
121
+ return theme[pressedColor];
108
122
  }, function (_a) {
109
123
  var theme = _a.theme, fontWeight = _a.fontWeight;
110
124
  return fontWeight &&
@@ -127,4 +141,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
127
141
  return responsiveMode === 'use' && 'width: 100%';
128
142
  });
129
143
  exports.default = UploadTextButton;
130
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
144
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.189",
3
+ "version": "2.2.191",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.189]
2
+ ## [v2.2.191]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1325] 비율 조정 및 word-break 속성 추가
6
+ * [PDS-1325] Boxltem 우측영역에 paddingLeft 추가
7
+ * [PDS-1327] TextButton/UploadTextButton에 colorTheme : grey3 추가 건