pds-dev-kit-web 2.1.0 → 2.1.2

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 (23) hide show
  1. package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +4 -4
  2. package/dist/src/desktop/components/IconButton/IconButton.d.ts +1 -1
  3. package/dist/src/desktop/components/Select/Select.js +12 -6
  4. package/dist/src/desktop/components/TextButton/TextButton.d.ts +1 -1
  5. package/dist/src/desktop/components/TextButton/TextButton.js +3 -0
  6. package/dist/src/desktop/components/TextField/TextField.js +3 -3
  7. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.d.ts +5 -3
  8. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +52 -4
  9. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  10. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +3 -0
  11. package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js +3 -3
  12. package/dist/src/mobile/components/IconButton/IconButton.d.ts +1 -1
  13. package/dist/src/mobile/components/IconButton/IconButton.js +1 -1
  14. package/dist/src/mobile/components/Select/Select.js +12 -6
  15. package/dist/src/mobile/components/TextButton/TextButton.d.ts +1 -1
  16. package/dist/src/mobile/components/TextButton/TextButton.js +3 -0
  17. package/dist/src/mobile/components/TextField/TextField.js +3 -3
  18. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.d.ts +1 -1
  19. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +1 -1
  20. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  21. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +3 -0
  22. package/package.json +1 -1
  23. package/release-note.md +5 -8
package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -180,12 +180,12 @@ function TextFieldBase(_a) {
180
180
  }
181
181
  var S_TextFieldBase = function () {
182
182
  if (textLineType === 'single') {
183
- return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
183
+ return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
184
184
  ref(e);
185
185
  if (inputRef) {
186
186
  inputRef.current = e;
187
187
  }
188
- } }), void 0), stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
188
+ } }), void 0), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
189
189
  }
190
190
  if (textLineType === 'multi') {
191
191
  return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
@@ -290,7 +290,7 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_5 ||
290
290
  var innerSpinButtonSize = _a.innerSpinButtonSize;
291
291
  return innerSpinButtonSize && innerSpinButtonSize + "px";
292
292
  });
293
- var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n flex: 1;\n line-height: ", ";\n z-index: 20;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n flex: 1;\n line-height: ", ";\n z-index: 20;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
293
+ var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n flex: 1;\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n flex: 1;\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
294
294
  var theme = _a.theme;
295
295
  return theme.desktopLineHeight.singleLine;
296
296
  }, function (_a) {
@@ -299,7 +299,7 @@ var S_Input = styled_components_1.default.input(templateObject_6 || (templateObj
299
299
  ? inputInnerSpinButtonStyle
300
300
  : '-webkit-appearance: none; margin: 0;';
301
301
  });
302
- var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n z-index: 1;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
302
+ var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n"])), function (_a) {
303
303
  var innerSpinButtonSize = _a.innerSpinButtonSize;
304
304
  return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
305
305
  }, constants_1.PIXEL_FOR_ICONS_CENTER, function (_a) {
package/dist/src/desktop/components/IconButton/IconButton.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare type IconButtonProps = {
8
8
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
9
9
  baseColorKey?: UiColors;
10
10
  borderColorKey?: UiColors;
11
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
11
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
12
12
  iconFillType?: 'fill' | 'line';
13
13
  iconName: FillIconNameKeys | LineIconNameKeys;
14
14
  iconColorKey?: UiColors;
package/dist/src/desktop/components/Select/Select.js CHANGED
@@ -63,7 +63,7 @@ function Select(_a) {
63
63
  return 'ui_cpnt_select_icon_01';
64
64
  }
65
65
  };
66
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
66
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
67
67
  }
68
68
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
69
69
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
@@ -97,14 +97,14 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
97
97
  return theme.ui_cpnt_select_text_darktheme_enabled;
98
98
  });
99
99
  var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"], ["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"])), function (_a) {
100
- var size = _a.size;
101
- return size &&
100
+ var $size = _a.$size;
101
+ return $size &&
102
102
  {
103
103
  large: large,
104
104
  medium: medium,
105
105
  small: small,
106
106
  rlarge: rlarge
107
- }[size];
107
+ }[$size];
108
108
  }, function (_a) {
109
109
  var responsiveMode = _a.responsiveMode;
110
110
  return responsiveMode === 'use' && 'width: 100%';
@@ -146,8 +146,14 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
146
146
  var theme = _a.theme;
147
147
  return theme.ui_cpnt_select_border_normal;
148
148
  }, function (_a) {
149
- var size = _a.size;
150
- return (size === 'small' ? '10px' : '14px');
149
+ var $size = _a.$size;
150
+ return $size &&
151
+ {
152
+ small: '10px',
153
+ medium: '12px',
154
+ large: '14px',
155
+ rlarge: '14px'
156
+ }[$size];
151
157
  }, function (_a) {
152
158
  var theme = _a.theme;
153
159
  return theme.ui_cpnt_select_text_hint;
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | '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/desktop/components/TextButton/TextButton.js CHANGED
@@ -60,6 +60,7 @@ var textColor = {
60
60
  none: 'usrTextBrandPrimary',
61
61
  red: 'sysTextError',
62
62
  grey_01: 'sysTextPrimary',
63
+ grey2: 'sysTextSecondary',
63
64
  white: 'sysTextWhite',
64
65
  white2: 'sysTextWhite'
65
66
  };
@@ -110,6 +111,8 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
110
111
  case 'red':
111
112
  case 'grey_01':
112
113
  return colorThemeDefault;
114
+ case 'grey2':
115
+ return colorThemeDefault;
113
116
  case 'white':
114
117
  return colorThemeWhite;
115
118
  case 'white2':
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -186,14 +186,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
186
186
  var theme = _a.theme;
187
187
  return theme.spacing.spacingB;
188
188
  });
189
- 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) {
189
+ var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
190
190
  var theme = _a.theme;
191
191
  return theme.spacing.spacingC;
192
192
  }, function (_a) {
193
193
  var theme = _a.theme;
194
194
  return theme.spacing.spacingB;
195
195
  });
196
- 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) {
196
+ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
197
197
  var theme = _a.theme;
198
198
  return theme.spacing.spacingD;
199
199
  }, function (_a) {
@@ -311,7 +311,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (t
311
311
  }
312
312
  });
313
313
  var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
314
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
314
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
315
315
  var state = _a.state;
316
316
  return (state === 'disabled' ? 'not-allowed' : 'text');
317
317
  }, function (_a) {
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  /// <reference types="react" />
2
- import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
2
+ import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
3
3
  export declare type UploadIconButtonProps = {
4
4
  fillType?: 'fill' | 'line';
5
5
  shapeType?: 'circular' | 'rectangle';
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
9
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
9
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
10
10
  iconFillType?: 'fill' | 'line';
11
11
  iconName: FillIconNameKeys | LineIconNameKeys;
12
12
  iconColorKey?: UiColors;
@@ -15,7 +15,9 @@ export declare type UploadIconButtonProps = {
15
15
  state?: 'normal' | 'disabled';
16
16
  accept?: string;
17
17
  multipleMode?: 'none' | 'use';
18
+ tooltipText?: PDSTextType;
19
+ tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
18
20
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
19
21
  };
20
- declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, onClick }: UploadIconButtonProps): JSX.Element;
22
+ declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, tooltipText, tooltipPosition, onClick }: UploadIconButtonProps): JSX.Element;
21
23
  export default UploadIconButton;
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -35,12 +35,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
35
35
  };
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
+ var react_1 = require("react");
38
39
  var styled_components_1 = __importStar(require("styled-components"));
39
40
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
40
41
  var hybrid_1 = require("../../../hybrid");
42
+ var constants_1 = require("../IconButton/constants");
43
+ var TextLabel_1 = require("../TextLabel");
41
44
  var types_1 = require("./types");
42
45
  function UploadIconButton(_a) {
43
- var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
46
+ var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, tooltipText = _a.tooltipText, _o = _a.tooltipPosition, tooltipPosition = _o === void 0 ? 'center_bottom' : _o, onClick = _a.onClick;
47
+ var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
48
+ var handleTooltipToggle = function (value) {
49
+ setIsTooltipOpen(value);
50
+ };
44
51
  var handleClick = function (e) {
45
52
  if (onClick) {
46
53
  onClick(e);
@@ -59,7 +66,7 @@ function UploadIconButton(_a) {
59
66
  }
60
67
  return types_1.iconStateColors[fillType];
61
68
  };
62
- return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0)] }), void 0));
69
+ return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onMouseEnter: function () { return tooltipText && handleTooltipToggle(true); }, onMouseLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
63
70
  }
64
71
  var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
65
72
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -67,7 +74,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
67
74
  ? ''
68
75
  : theme.ui_cpnt_button_fill_base_disabled;
69
76
  });
70
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
77
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
71
78
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
72
79
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
73
80
  }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -157,5 +164,46 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
157
164
  xsmall: xsmall
158
165
  }[baseSize];
159
166
  });
167
+ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
168
+ var baseSize = _a.baseSize;
169
+ return baseSize &&
170
+ {
171
+ xxlarge: constants_1.TOOLTIP_POSITION_SPACING.xxlarge,
172
+ large: constants_1.TOOLTIP_POSITION_SPACING.large,
173
+ medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
174
+ small: constants_1.TOOLTIP_POSITION_SPACING.small,
175
+ xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
176
+ }[baseSize];
177
+ });
178
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n bottom: ", ";\n right: 0;\n"], ["\n bottom: ", ";\n right: 0;\n"])), tooltipPositionSpacing);
179
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n right: 0;\n top: ", ";\n"], ["\n right: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
180
+ var tooltipCenterTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n bottom: ", ";\n"], ["\n bottom: ", ";\n"])), tooltipPositionSpacing);
181
+ var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n top: ", ";\n"], ["\n top: ", ";\n"])), tooltipPositionSpacing);
182
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n bottom: ", ";\n left: 0;\n"], ["\n bottom: ", ";\n left: 0;\n"])), tooltipPositionSpacing);
183
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n left: 0;\n top: ", ";\n"], ["\n left: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
184
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"])), function (_a) {
185
+ var theme = _a.theme;
186
+ return theme.ui_cpnt_button_tooltip_base;
187
+ }, function (_a) {
188
+ var theme = _a.theme;
189
+ return theme.spacing.spacingA;
190
+ }, function (_a) {
191
+ var theme = _a.theme;
192
+ return theme.spacing.spacingA + " " + theme.spacing.spacingB;
193
+ }, function (_a) {
194
+ var isTooltipOpen = _a.isTooltipOpen;
195
+ return !isTooltipOpen && 'display: none';
196
+ }, function (_a) {
197
+ var tooltipPosition = _a.tooltipPosition;
198
+ return tooltipPosition &&
199
+ {
200
+ left_top: tooltipLeftTop,
201
+ left_bottom: tooltipLeftBottom,
202
+ center_top: tooltipCenterTop,
203
+ center_bottom: tooltipCenterBottom,
204
+ right_top: tooltipRightTop,
205
+ right_bottom: tooltipRightBottom
206
+ }[tooltipPosition];
207
+ });
160
208
  exports.default = UploadIconButton;
161
- 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;
209
+ 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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | '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
@@ -49,6 +49,7 @@ var textColor = {
49
49
  none: 'usrTextBrandPrimary',
50
50
  red: 'sysTextError',
51
51
  grey_01: 'sysTextPrimary',
52
+ grey2: 'sysTextSecondary',
52
53
  white: 'sysTextWhite',
53
54
  white2: 'sysTextWhite'
54
55
  };
@@ -103,6 +104,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
103
104
  case 'red':
104
105
  case 'grey_01':
105
106
  return colorThemeDefault;
107
+ case 'grey2':
108
+ return colorThemeDefault;
106
109
  case 'white':
107
110
  return colorThemeWhite;
108
111
  case 'white2':
package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -180,7 +180,7 @@ function TextFieldBase(_a) {
180
180
  }
181
181
  var S_TextFieldBase = function () {
182
182
  if (textLineType === 'single') {
183
- return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref }), void 0), stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
183
+ return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref }), void 0), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
184
184
  }
185
185
  if (textLineType === 'multi') {
186
186
  return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref }), void 0));
@@ -272,7 +272,7 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_5 ||
272
272
  var innerSpinButtonSize = _a.innerSpinButtonSize;
273
273
  return innerSpinButtonSize && innerSpinButtonSize + "px";
274
274
  });
275
- var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n line-height: ", ";\n z-index: 20;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n line-height: ", ";\n z-index: 20;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
275
+ var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
276
276
  var theme = _a.theme;
277
277
  return theme.desktopLineHeight.singleLine;
278
278
  }, function (_a) {
@@ -281,7 +281,7 @@ var S_Input = styled_components_1.default.input(templateObject_6 || (templateObj
281
281
  ? inputInnerSpinButtonStyle
282
282
  : '-webkit-appearance: none; margin: 0;';
283
283
  });
284
- var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n z-index: 1;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
284
+ var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: ", ";\n justify-content: center;\n position: absolute;\n right: ", "px;\n width: ", ";\n"])), function (_a) {
285
285
  var innerSpinButtonSize = _a.innerSpinButtonSize;
286
286
  return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
287
287
  }, constants_1.PIXEL_FOR_ICONS_CENTER, function (_a) {
package/dist/src/mobile/components/IconButton/IconButton.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare type IconButtonProps = {
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
9
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
9
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
10
10
  iconFillType?: 'fill' | 'line';
11
11
  iconName: FillIconNameKeys | LineIconNameKeys;
12
12
  iconColorKey?: UiColors;
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -81,7 +81,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
81
81
  ? ''
82
82
  : theme.ui_cpnt_button_fill_base_disabled;
83
83
  });
84
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
84
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
85
85
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
86
86
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
87
87
  }, transitionStyle_1.ButtonTransition, function (_a) {
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -59,7 +59,7 @@ function Select(_a) {
59
59
  }
60
60
  return 'ui_cpnt_select_icon_01';
61
61
  };
62
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
62
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
63
63
  }
64
64
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
65
65
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
@@ -93,14 +93,14 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
93
93
  return theme.ui_cpnt_select_text_darktheme_enabled;
94
94
  });
95
95
  var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"], ["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"])), function (_a) {
96
- var size = _a.size;
97
- return size &&
96
+ var $size = _a.$size;
97
+ return $size &&
98
98
  {
99
99
  large: large,
100
100
  medium: medium,
101
101
  small: small,
102
102
  rlarge: rlarge
103
- }[size];
103
+ }[$size];
104
104
  }, function (_a) {
105
105
  var responsiveMode = _a.responsiveMode;
106
106
  return responsiveMode === 'use' && 'width: 100%';
@@ -131,8 +131,14 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
131
131
  var theme = _a.theme;
132
132
  return theme.ui_cpnt_select_border_normal;
133
133
  }, function (_a) {
134
- var size = _a.size;
135
- return (size === 'small' ? '10px' : '14px');
134
+ var $size = _a.$size;
135
+ return $size &&
136
+ {
137
+ small: '10px',
138
+ medium: '12px',
139
+ large: '14px',
140
+ rlarge: '14px'
141
+ }[$size];
136
142
  }, function (_a) {
137
143
  var theme = _a.theme;
138
144
  return theme.ui_cpnt_select_text_hint;
package/dist/src/mobile/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | '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
@@ -60,6 +60,7 @@ var textColor = {
60
60
  none: 'usrTextBrandPrimary',
61
61
  red: 'sysTextError',
62
62
  grey_01: 'sysTextPrimary',
63
+ grey2: 'sysTextSecondary',
63
64
  white: 'sysTextWhite',
64
65
  white2: 'sysTextWhite'
65
66
  };
@@ -98,6 +99,8 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
98
99
  case 'red':
99
100
  case 'grey_01':
100
101
  return colorThemeDefault;
102
+ case 'grey2':
103
+ return colorThemeDefault;
101
104
  case 'white':
102
105
  return colorThemeWhite;
103
106
  case 'white2':
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -186,14 +186,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
186
186
  var theme = _a.theme;
187
187
  return theme.spacing.spacingB;
188
188
  });
189
- 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) {
189
+ var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
190
190
  var theme = _a.theme;
191
191
  return theme.spacing.spacingC;
192
192
  }, function (_a) {
193
193
  var theme = _a.theme;
194
194
  return theme.spacing.spacingB;
195
195
  });
196
- 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) {
196
+ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
197
197
  var theme = _a.theme;
198
198
  return theme.spacing.spacingD;
199
199
  }, function (_a) {
@@ -298,7 +298,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_16 || (t
298
298
  }
299
299
  });
300
300
  var normalActionColor = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), backgroundActiveColor);
301
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
301
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
302
302
  var size = _a.size;
303
303
  return size &&
304
304
  {
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare type UploadIconButtonProps = {
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
9
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
9
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
10
10
  iconFillType?: 'fill' | 'line';
11
11
  iconName: FillIconNameKeys | LineIconNameKeys;
12
12
  iconColorKey?: UiColors;
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -67,7 +67,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
67
67
  ? ''
68
68
  : theme.ui_cpnt_button_fill_base_disabled;
69
69
  });
70
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
70
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
71
71
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
72
72
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
73
73
  }, transitionStyle_1.ButtonTransition, function (_a) {
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | '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
@@ -49,6 +49,7 @@ var textColor = {
49
49
  none: 'usrTextBrandPrimary',
50
50
  red: 'sysTextError',
51
51
  grey_01: 'sysTextPrimary',
52
+ grey2: 'sysTextSecondary',
52
53
  white: 'sysTextWhite',
53
54
  white2: 'sysTextWhite'
54
55
  };
@@ -91,6 +92,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
91
92
  case 'red':
92
93
  case 'grey_01':
93
94
  return colorThemeDefault;
95
+ case 'grey2':
96
+ return colorThemeDefault;
94
97
  case 'white':
95
98
  return colorThemeWhite;
96
99
  case 'white2':
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.1.0",
3
+ "version": "2.1.2",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,10 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.1.0]
3
- ## release|https://design.storybook.publ.biz/
2
+ ## [v2.1.2]
3
+ ## urgent|https://design.storybook.publ.biz/
4
4
 
5
- ### components
6
- * BasicButtonGroup 생성
7
- * Dropdown
8
- * displayType prop 추가 (icon 활용 가능하게 업데이트)
9
- * SegmentedButtonGroup 생성
10
- * Slider 생성
5
+ ### Components
6
+ * TextFieldBase
7
+ * stepper기능과 함께 들어갔던 z-index 제거