pds-dev-kit-web 0.6.0 → 0.6.3

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 (46) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +3 -1
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +3 -1
  3. package/dist/src/common/styles/colorSet/SemanticColor.json +2 -1
  4. package/dist/src/common/styles/colorSet/UIColor.json +7 -1
  5. package/dist/src/common/styles/colorSet/index.d.ts +66 -55
  6. package/dist/src/common/styles/colorSet/index.js +2 -2
  7. package/dist/src/common/styles/colorSet/ui-type.d.ts +6 -0
  8. package/dist/src/common/styles/index.d.ts +0 -2
  9. package/dist/src/common/styles/theme.d.ts +0 -2
  10. package/dist/src/common/styles/theme.js +3 -5
  11. package/dist/src/common/styles/ui-colors.d.ts +5 -0
  12. package/dist/src/common/styles/ui-colors.js +4 -0
  13. package/dist/src/common/types/styled-components.d.ts +0 -2
  14. package/dist/src/desktop/components/Chip/Chip.js +6 -6
  15. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +1 -1
  16. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +1 -0
  17. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +2 -2
  18. package/dist/src/desktop/components/IconButton/IconButton.js +6 -2
  19. package/dist/src/desktop/components/MainButton/MainButton.js +1 -1
  20. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
  21. package/dist/src/desktop/components/StatusBlock/StatusBlock.js +1 -1
  22. package/dist/src/desktop/components/TextButton/TextButton.js +1 -1
  23. package/dist/src/desktop/components/TextField/TextField.js +29 -16
  24. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +1 -3
  25. package/dist/src/desktop/components/TextLabel/TextLabel.js +8 -9
  26. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +6 -2
  27. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +1 -1
  28. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +1 -1
  29. package/dist/src/hybrid/components/Divider/Divider.d.ts +2 -1
  30. package/dist/src/hybrid/components/Divider/Divider.js +9 -5
  31. package/dist/src/hybrid/components/Icon/Icon.d.ts +1 -6
  32. package/dist/src/hybrid/components/Icon/Icon.js +2 -2
  33. package/dist/src/mobile/components/Chip/Chip.js +6 -6
  34. package/dist/src/mobile/components/IconButton/IconButton.js +6 -2
  35. package/dist/src/mobile/components/MainButton/MainButton.js +1 -1
  36. package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js +1 -1
  37. package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
  38. package/dist/src/mobile/components/StatusBlock/StatusBlock.js +1 -1
  39. package/dist/src/mobile/components/TextButton/TextButton.js +1 -1
  40. package/dist/src/mobile/components/TextField/TextField.js +29 -16
  41. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +1 -3
  42. package/dist/src/mobile/components/TextLabel/TextLabel.js +8 -9
  43. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +6 -2
  44. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +1 -1
  45. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +1 -1
  46. package/package.json +1 -1
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var common_1 = require("../../../common");
32
32
  function TextLabel(_a) {
33
- var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.btnMode, btnMode = _h === void 0 ? 'none' : _h;
34
- return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, btnMode: btnMode }, text));
33
+ var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
34
+ return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
35
35
  }
36
36
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
37
37
  var theme = _a.theme;
@@ -245,13 +245,13 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
245
245
  });
246
246
  var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
247
247
  var colorOverride = _a.colorOverride;
248
- return colorOverride && common_1.uiColors[colorOverride];
248
+ return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
249
249
  });
250
250
  var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
251
251
  var lineLimit = _a.lineLimit;
252
252
  return lineLimit;
253
253
  });
254
- var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
254
+ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
255
255
  var textAlign = _a.textAlign;
256
256
  return textAlign;
257
257
  }, function (_a) {
@@ -295,11 +295,10 @@ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (template
295
295
  usrTextBrandOnPrimary: usrTextBrandOnPrimary
296
296
  }[colorTheme];
297
297
  }, function (_a) {
298
- var singleLineMode = _a.singleLineMode, theme = _a.theme;
299
- return singleLineMode === 'use' && "line-height: " + theme.desktopLineHeight.singleLine;
300
- }, function (_a) {
301
- var btnMode = _a.btnMode, theme = _a.theme;
302
- return btnMode === 'use' && "line-height: " + theme.desktopLineHeight.btn;
298
+ var singleLineMode = _a.singleLineMode, ellipsisMode = _a.ellipsisMode, theme = _a.theme;
299
+ return singleLineMode === 'use' &&
300
+ ellipsisMode === 'none' &&
301
+ "line-height: " + theme.desktopLineHeight.singleLine;
303
302
  }, function (_a) {
304
303
  var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
305
304
  return ellipsisMode === 'use' && lineLimit && ellipsisStyle;
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
62
62
  });
63
63
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
64
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
65
- return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
65
+ return baseColorKey
66
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
67
+ : theme.ui_cpnt_button_fill_base_primary;
66
68
  }, function (_a) {
67
69
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
68
70
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -97,7 +99,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
97
99
  return theme.ui_cpnt_button_line_base_default;
98
100
  }, function (_a) {
99
101
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
100
- return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
102
+ return borderColorKey
103
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
104
+ : theme.ui_cpnt_button_line_border_enabled;
101
105
  }, function (_a) {
102
106
  var colorTheme = _a.colorTheme;
103
107
  switch (colorTheme) {
package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -64,7 +64,7 @@ function UploadMainButton(_a) {
64
64
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
66
66
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
67
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
67
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
68
68
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
69
69
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
70
70
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -45,7 +45,7 @@ function UploadTextButton(_a) {
45
45
  };
46
46
  return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
47
47
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
48
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
48
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
49
49
  }
50
50
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n"], ["\n height: 48px;\n width: ", ";\n"])), function (_a) {
51
51
  var size = _a.size;
package/dist/src/hybrid/components/Divider/Divider.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare type DividerProps = {
3
3
  displayType?: 'line' | 'area';
4
4
  direction?: 'vertical' | 'horizontal';
5
5
  height?: number;
6
+ colorTheme?: 'none' | 'divider1';
6
7
  };
7
- declare function Divider({ displayType, direction, height }: DividerProps): JSX.Element;
8
+ declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
8
9
  export default Divider;
package/dist/src/hybrid/components/Divider/Divider.js CHANGED
@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  function Divider(_a) {
32
- var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height;
33
- return react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction });
32
+ var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
33
+ return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
34
34
  }
35
35
  var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: 100%;\n"], ["\n height: ", ";\n width: 100%;\n"])), function (_a) {
36
36
  var displayType = _a.displayType;
@@ -44,9 +44,13 @@ var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_
44
44
  var $height = _a.$height;
45
45
  return ($height ? $height + "px" : '100%');
46
46
  });
47
- var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n ", ";\n ", ";\n"])), function (_a) {
48
- var theme = _a.theme;
49
- return theme.ui_cpnt_divider;
47
+ var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
48
+ var colorTheme = _a.colorTheme, theme = _a.theme;
49
+ return colorTheme &&
50
+ {
51
+ none: "background-color: " + theme.ui_cpnt_divider + ";",
52
+ divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
53
+ }[colorTheme];
50
54
  }, function (_a) {
51
55
  var $direction = _a.$direction;
52
56
  return $direction === 'horizontal' && horizontal;
package/dist/src/hybrid/components/Icon/Icon.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  /// <reference types="react" />
2
- import fillIcons from '../../../common/assets/icons/fill';
3
- import lineIcons from '../../../common/assets/icons/line';
4
- import { uiColors } from '../../../common/styles/ui-colors';
5
- export declare type FillIconNameKeys = keyof typeof fillIcons;
6
- export declare type LineIconNameKeys = keyof typeof lineIcons;
7
- export declare type UiColors = keyof typeof uiColors;
2
+ import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
8
3
  export declare type IconProps = {
9
4
  iconName?: FillIconNameKeys | LineIconNameKeys;
10
5
  size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
package/dist/src/hybrid/components/Icon/Icon.js CHANGED
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
+ var common_1 = require("../../../common");
7
8
  var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
8
9
  var line_1 = __importDefault(require("../../../common/assets/icons/line"));
9
- var ui_colors_1 = require("../../../common/styles/ui-colors");
10
10
  var Icon = function (_a) {
11
11
  var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
12
12
  var SelectedIcon = fillType === 'line'
13
13
  ? line_1.default[iconName] || fill_1.default[iconName]
14
14
  : fill_1.default[iconName] || line_1.default[iconName];
15
- return react_1.default.createElement(SelectedIcon, { color: ui_colors_1.uiColors[colorKey], size: size });
15
+ return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorKey], size: size }));
16
16
  };
17
17
  exports.default = Icon;
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -29,21 +29,21 @@ function Chip(_a) {
29
29
  return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
30
30
  chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
31
31
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
32
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
32
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
33
33
  chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
34
34
  react_1.default.createElement(hybrid_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
35
35
  case 'information':
36
36
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClick },
37
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", btnMode: "use", colorTheme: "sysTextPrimary" })));
37
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
38
38
  case 'label':
39
39
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClick },
40
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextTertiary" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
41
41
  case 'time':
42
42
  return (react_1.default.createElement(S_TimeChip, { onClick: handleClick },
43
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextWhite" })));
43
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
44
44
  case 'removable':
45
45
  return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
46
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: "sysTextSecondary" }),
46
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
47
47
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
48
48
  react_1.default.createElement(hybrid_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
49
49
  default:
@@ -52,7 +52,7 @@ function Chip(_a) {
52
52
  react_1.default.createElement(hybrid_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
53
53
  ? 'ui_cpnt_chip_fill_icon_active_01'
54
54
  : 'ui_cpnt_chip_line_icon_02' }))),
55
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
55
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
56
56
  }
57
57
  };
58
58
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
73
73
  });
74
74
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
75
75
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
76
- return baseColorKey ? ui_colors_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
76
+ return baseColorKey
77
+ ? (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
78
+ : theme.ui_cpnt_button_fill_base_primary;
77
79
  }, function (_a) {
78
80
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
79
81
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -95,7 +97,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
95
97
  return theme.ui_cpnt_button_line_base_default;
96
98
  }, function (_a) {
97
99
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
98
- return borderColorKey ? ui_colors_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
100
+ return borderColorKey
101
+ ? (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
102
+ : theme.ui_cpnt_button_line_border_enabled;
99
103
  }, function (_a) {
100
104
  var colorTheme = _a.colorTheme;
101
105
  switch (colorTheme) {
package/dist/src/mobile/components/MainButton/MainButton.js CHANGED
@@ -98,7 +98,7 @@ function MainButton(_a) {
98
98
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
99
99
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
101
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
101
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
102
102
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
103
103
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
104
104
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js CHANGED
@@ -47,7 +47,7 @@ function MobileHeaderBar(_a) {
47
47
  return react_1.default.createElement("div", null);
48
48
  }
49
49
  return (react_1.default.createElement(S_LeftButtonBox, null,
50
- react_1.default.createElement(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, baseColorKey: "ui_cpnt_button_fill_base_transparent" })));
50
+ react_1.default.createElement(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" })));
51
51
  };
52
52
  var title = function () {
53
53
  switch (titleType) {
package/dist/src/mobile/components/ReactionButton/ReactionButton.js CHANGED
@@ -100,7 +100,7 @@ function ReactionButton(_a) {
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
101
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
102
102
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
103
- react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", btnMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
103
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
104
104
  }
105
105
  var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n display: flex;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n display: flex;\n justify-content: center;\n padding: 0;\n"])));
106
106
  var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
package/dist/src/mobile/components/StatusBlock/StatusBlock.js CHANGED
@@ -37,7 +37,7 @@ function StatusBlock(_a) {
37
37
  small: 'body2Bold'
38
38
  };
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", btnMode: "use", colorTheme: "sysTextWhite" })));
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
42
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
43
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -68,7 +68,7 @@ function TextButton(_a) {
68
68
  xsmall: 'caption1Regular'
69
69
  };
70
70
  return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
71
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
71
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
72
72
  }
73
73
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n ", ";\n"], ["\n height: 48px;\n ", ";\n"])), function (_a) {
74
74
  var size = _a.size;
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -117,12 +117,25 @@ function TextField(_a) {
117
117
  }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
118
118
  }
119
119
  };
120
- return (react_1.default.createElement("div", null,
120
+ return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
121
121
  react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
122
122
  ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
123
123
  }
124
- var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
125
- var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
124
+ var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), function (_a) {
125
+ var size = _a.size;
126
+ return size &&
127
+ {
128
+ small: 'width: 188px;',
129
+ medium: 'width: 188px;',
130
+ large: 'width: 432px;',
131
+ rlarge: 'width: 100%'
132
+ }[size];
133
+ }, function (_a) {
134
+ var responsiveMode = _a.responsiveMode;
135
+ return responsiveMode === 'use' && 'width: 100%';
136
+ });
137
+ var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
138
+ var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
126
139
  var theme = _a.theme;
127
140
  return (46 -
128
141
  Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
@@ -133,21 +146,21 @@ var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
133
146
  Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
134
147
  2;
135
148
  });
136
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
149
+ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
137
150
  var theme = _a.theme;
138
151
  return theme.spacing.spacingC;
139
152
  }, function (_a) {
140
153
  var theme = _a.theme;
141
154
  return theme.spacing.spacingC;
142
155
  });
143
- var medium = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
156
+ 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) {
144
157
  var theme = _a.theme;
145
158
  return theme.spacing.spacingC;
146
159
  }, function (_a) {
147
160
  var theme = _a.theme;
148
161
  return theme.spacing.spacingC;
149
162
  });
150
- var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
163
+ 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) {
151
164
  var theme = _a.theme;
152
165
  return theme.spacing.spacingD;
153
166
  }, function (_a) {
@@ -163,7 +176,7 @@ var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
163
176
  var textLineType = _a.textLineType;
164
177
  return textLineType === 'auto' && auto;
165
178
  });
166
- var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
179
+ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
167
180
  var theme = _a.theme;
168
181
  return theme.ui_cpnt_textfield_base_normal;
169
182
  }, function (_a) {
@@ -174,21 +187,21 @@ var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6
174
187
  return theme.ui_cpnt_textfield_border_focus;
175
188
  return theme.ui_cpnt_textfield_border_normal;
176
189
  });
177
- var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
190
+ var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
178
191
  var theme = _a.theme;
179
192
  return theme.ui_cpnt_textfield_base_disabled;
180
193
  }, function (_a) {
181
194
  var theme = _a.theme;
182
195
  return theme.ui_cpnt_textfield_border_normal;
183
196
  });
184
- var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
197
+ var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
185
198
  var theme = _a.theme;
186
199
  return theme.ui_cpnt_textfield_base_disabled;
187
200
  }, function (_a) {
188
201
  var theme = _a.theme;
189
202
  return theme.ui_cpnt_textfield_border_normal;
190
203
  });
191
- var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
204
+ var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
192
205
  var theme = _a.theme;
193
206
  return theme.ui_cpnt_textfield_base_normal;
194
207
  }, function (_a) {
@@ -199,21 +212,21 @@ var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObje
199
212
  return theme.ui_cpnt_textfield_border_darktheme_focus;
200
213
  return theme.ui_cpnt_textfield_border_darktheme_normal;
201
214
  });
202
- var dark_read_only = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
215
+ var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
203
216
  var theme = _a.theme;
204
217
  return theme.ui_cpnt_textfield_base_darktheme_disabled;
205
218
  }, function (_a) {
206
219
  var theme = _a.theme;
207
220
  return theme.ui_cpnt_textfield_border_darktheme_normal;
208
221
  });
209
- var dark_disabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
222
+ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
210
223
  var theme = _a.theme;
211
224
  return theme.ui_cpnt_textfield_base_darktheme_disabled;
212
225
  }, function (_a) {
213
226
  var theme = _a.theme;
214
227
  return theme.ui_cpnt_textfield_border_darktheme_normal;
215
228
  });
216
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
229
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
217
230
  var size = _a.size;
218
231
  return size &&
219
232
  {
@@ -244,8 +257,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
244
257
  var responsiveMode = _a.responsiveMode;
245
258
  return responsiveMode === 'use' && 'width: 100%';
246
259
  });
247
- var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
248
- var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
260
+ var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
261
+ var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
249
262
  var theme = _a.theme, colorTheme = _a.colorTheme;
250
263
  return colorTheme === 'none'
251
264
  ? theme.ui_cpnt_textfield_text_error
@@ -264,4 +277,4 @@ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObje
264
277
  return theme.spacing.spacingA;
265
278
  });
266
279
  exports.default = TextField;
267
- 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;
280
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
package/dist/src/mobile/components/TextLabel/TextLabel.d.ts CHANGED
@@ -10,7 +10,6 @@ export declare type TextLabelProps = {
10
10
  singleLineMode?: 'none' | 'use';
11
11
  ellipsisMode?: 'none' | 'use';
12
12
  lineLimit?: number;
13
- btnMode?: 'none' | 'use';
14
13
  };
15
14
  export declare type TextStyleProps = {
16
15
  textAlign?: 'left' | 'center' | 'right';
@@ -21,7 +20,6 @@ export declare type TextStyleProps = {
21
20
  singleLineMode?: 'none' | 'use';
22
21
  ellipsisMode?: 'none' | 'use';
23
22
  lineLimit?: number;
24
- btnMode?: 'none' | 'use';
25
23
  };
26
- declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit, btnMode }: TextLabelProps): JSX.Element;
24
+ declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
27
25
  export default TextLabel;
package/dist/src/mobile/components/TextLabel/TextLabel.js CHANGED
@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var common_1 = require("../../../common");
32
32
  function TextLabel(_a) {
33
- var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.btnMode, btnMode = _h === void 0 ? 'none' : _h;
34
- return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, btnMode: btnMode }, text));
33
+ var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
34
+ return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
35
35
  }
36
36
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
37
37
  var theme = _a.theme;
@@ -245,13 +245,13 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
245
245
  });
246
246
  var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
247
247
  var colorOverride = _a.colorOverride;
248
- return colorOverride && common_1.uiColors[colorOverride];
248
+ return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
249
249
  });
250
250
  var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
251
251
  var lineLimit = _a.lineLimit;
252
252
  return lineLimit;
253
253
  });
254
- var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
254
+ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: break-all;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
255
255
  var textAlign = _a.textAlign;
256
256
  return textAlign;
257
257
  }, function (_a) {
@@ -295,11 +295,10 @@ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (template
295
295
  usrTextBrandOnPrimary: usrTextBrandOnPrimary
296
296
  }[colorTheme];
297
297
  }, function (_a) {
298
- var singleLineMode = _a.singleLineMode, theme = _a.theme;
299
- return singleLineMode === 'use' && "line-height: " + theme.desktopLineHeight.singleLine;
300
- }, function (_a) {
301
- var btnMode = _a.btnMode, theme = _a.theme;
302
- return btnMode === 'use' && "line-height: " + theme.desktopLineHeight.btn;
298
+ var singleLineMode = _a.singleLineMode, ellipsisMode = _a.ellipsisMode, theme = _a.theme;
299
+ return singleLineMode === 'use' &&
300
+ ellipsisMode === 'none' &&
301
+ "line-height: " + theme.desktopLineHeight.singleLine;
303
302
  }, function (_a) {
304
303
  var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
305
304
  return ellipsisMode === 'use' && lineLimit && ellipsisStyle;
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
62
62
  });
63
63
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
64
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
65
- return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
65
+ return baseColorKey
66
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
67
+ : theme.ui_cpnt_button_fill_base_primary;
66
68
  }, function (_a) {
67
69
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
68
70
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -92,7 +94,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
92
94
  return theme.ui_cpnt_button_line_base_default;
93
95
  }, function (_a) {
94
96
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
95
- return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
97
+ return borderColorKey
98
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
99
+ : theme.ui_cpnt_button_line_border_enabled;
96
100
  }, function (_a) {
97
101
  var colorTheme = _a.colorTheme;
98
102
  switch (colorTheme) {
package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -64,7 +64,7 @@ function UploadMainButton(_a) {
64
64
  size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
66
66
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
67
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
67
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
68
68
  size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
69
69
  react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
70
70
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -45,7 +45,7 @@ function UploadTextButton(_a) {
45
45
  };
46
46
  return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
47
47
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
48
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
48
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
49
49
  }
50
50
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: ", ";\n"], ["\n height: 48px;\n width: ", ";\n"])), function (_a) {
51
51
  var size = _a.size;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "0.6.0",
3
+ "version": "0.6.3",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",