pds-dev-kit-web-test 2.2.98 → 2.2.244

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

@@ -51,6 +51,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
@@ -66,11 +67,66 @@ var textColor = {
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
     grey2: 'sysTextSecondary',
+    grey3: undefined,
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
+var iconColor = {
+    none: 'ui_cpnt_button_icon_primary',
+    red: 'ui_cpnt_button_icon_error',
+    grey_01: 'ui_cpnt_button_icon_enabled',
+    grey2: 'ui_cpnt_button_icon_default',
+    grey3: 'ui_141',
+    white: 'ui_cpnt_sidebar_icon_01',
+    white2: 'ui_cpnt_sidebar_icon_01'
+};
+var textDisabledColor = {
+    none: 'sysTextTertiary',
+    red: 'sysTextTertiary',
+    grey_01: 'sysTextTertiary',
+    grey2: 'sysTextTertiary',
+    grey3: undefined,
+    white: 'sysTextTertiary',
+    white2: 'sysTextTertiary'
+};
+var overrideTextColor = {
+    none: undefined,
+    red: undefined,
+    grey_01: undefined,
+    grey2: undefined,
+    grey3: 'ui_141',
+    white: undefined,
+    white2: undefined
+};
+var overrideTextDisabledColor = {
+    none: undefined,
+    red: undefined,
+    grey_01: undefined,
+    grey2: undefined,
+    grey3: 'ui_142',
+    white: undefined,
+    white2: undefined
+};
+var backgroundHoverColor = {
+    none: 'ui_cpnt_button_line_base_hover',
+    red: 'ui_cpnt_button_line_base_hover',
+    grey_01: 'ui_cpnt_button_line_base_hover',
+    grey2: 'ui_cpnt_button_line_base_hover',
+    grey3: 'ui_143',
+    white: 'ui_cpnt_button_white_base_hover',
+    white2: 'ui_cpnt_textbutton_white_variation_base_hover'
+};
+var backgroundPressedColor = {
+    none: 'ui_cpnt_button_line_base_pressed',
+    red: 'ui_cpnt_button_line_base_pressed',
+    grey_01: 'ui_cpnt_button_line_base_pressed',
+    grey2: 'ui_cpnt_button_line_base_pressed',
+    grey3: 'ui_144',
+    white: 'ui_cpnt_button_white_base_pressed',
+    white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
+};
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick", "onKeyDown"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick", "onKeyDown"]);
     var buttonRef = (0, react_1.useRef)(null);
     /**
      * @when keydown 이벤트가 있을 때만
@@ -88,55 +144,26 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
+                    ? overrideTextDisabledColor[colorTheme]
+                    : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size === 'rlarge' && 'width: 100%';
 });
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
-});
-var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_white_base_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_white_base_pressed;
-});
-var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textbutton_white_variation_base_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
-});
-var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
+var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var colorTheme = _a.colorTheme;
-    switch (colorTheme) {
-        case 'none':
-        case 'red':
-        case 'grey_01':
-            return colorThemeDefault;
-        case 'grey2':
-            return colorThemeDefault;
-        case 'white':
-            return colorThemeWhite;
-        case 'white2':
-            return colorThemeWhite2;
-        default:
-            return colorThemeDefault;
-    }
+    var hoverColor = _a.hoverColor, theme = _a.theme;
+    return theme[hoverColor];
+}, function (_a) {
+    var pressedColor = _a.pressedColor, theme = _a.theme;
+    return theme[pressedColor];
 }, function (_a) {
     var size = _a.size;
     return size &&
@@ -159,4 +186,4 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,51 +1,29 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
+import type { IFormValues, PDSTextType, UiColors, PDSIconType } from '../../../common';
+import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
 export type TextFieldProps = {
     name: Path<IFormValues>;
-    hintText?: PDSTextType;
-    defaultText?: PDSTextType;
-    textAlign?: 'left' | 'center' | 'right';
     prefixText?: PDSTextType;
-    suffixText?: PDSTextType;
-    validation?: {
-        [key: string]: any;
-    };
     validationPoint?: 'onChange' | 'onBlur';
-    preventBlankMode?: 'none' | 'trim' | 'all';
-    enterSubmitMode?: 'none' | 'use';
     size?: 'small' | 'medium' | 'large' | 'rlarge';
     responsiveMode?: 'none' | 'use';
-    textLineType?: 'single' | 'multi' | 'auto';
-    multiRows?: number;
-    autoMinRows?: number;
-    autoMaxRows?: number;
-    inputType?: string;
-    state?: 'normal' | 'read_only' | 'disabled';
-    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
-    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconName?: PDSIconType;
+    iBtn2IconName?: PDSIconType;
     iBtn1IconFillType?: 'line' | 'fill';
     iBtn2IconFillType?: 'line' | 'fill';
     overrideIBtn1IconColorKey?: UiColors;
     overrideIBtn2IconColorKey?: UiColors;
-    colorTheme?: 'none' | 'dark' | 'transparent';
-    max?: number;
-    maxLength?: number;
-    min?: number;
     customWidth?: string;
-    autoComplete?: string;
     numberStepperMode?: 'none' | 'use';
     numberStep?: number;
     fontWeight?: 'bold' | 'regular';
+    hintTextFontWeight?: 'normal' | 'bold';
     deleteBtnMode?: 'none' | 'use';
-    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    scrollVisibleType?: ScrollVisibleType;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
-    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
-    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
-    onTarget?: () => void;
-};
-declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
+} & Partial<TextFieldBaseProps>;
+declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, hintTextFontWeight, deleteBtnMode, scrollVisibleType, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -42,6 +42,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var types_1 = require("../../../common/types");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -50,7 +52,7 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.hintTextFontWeight, hintTextFontWeight = _v === void 0 ? 'normal' : _v, _w = _a.deleteBtnMode, deleteBtnMode = _w === void 0 ? 'use' : _w, _x = _a.scrollVisibleType, scrollVisibleType = _x === void 0 ? 'visible' : _x, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -66,10 +68,10 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
         disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
     };
-    var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
-    var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
-    var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
-    var isError = Object.keys(errors).some(function (error) { return error === name; });
+    var _y = (0, react_1.useState)(false), isFocused = _y[0], setIsFocused = _y[1];
+    var _z = (0, react_hook_form_1.useFormContext)(), register = _z.register, trigger = _z.trigger, errors = _z.formState.errors;
+    var _0 = register(name, validation), validateOnChange = _0.onChange, validateOnBlur = _0.onBlur;
+    var isError = (0, types_1.getErrorByName)(errors, name);
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
             onClickIBtn1();
@@ -122,25 +124,49 @@ function TextField(_a) {
         trigger(name);
     }
     var S_TextField = function () {
+        var deleteIconColor = 'ui_cpnt_button_icon_disabled';
+        switch (colorTheme) {
+            case 'dark': {
+                deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
+                break;
+            }
+            case 'transparent': {
+                deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
+                break;
+            }
+        }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
         if (textLineType === 'single') {
-            var deleteIconColor = 'ui_cpnt_button_icon_disabled';
-            switch (colorTheme) {
-                case 'dark': {
-                    deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
-                    break;
-                }
-                case 'transparent': {
-                    deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
-                    break;
-                }
-            }
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(S_PrefixText, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],
@@ -155,7 +181,7 @@ function TextField(_a) {
                                         }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
@@ -317,7 +343,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (t
     }
 });
 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);
-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) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __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  ", "\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\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -357,9 +383,19 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (t
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: ".concat(customWidth, ";");
+}, function (_a) {
+    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
+    return (textLineType === 'multi' || textLineType === 'auto') &&
+        scrollVisibleType && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      textarea {\n        ", "\n      }\n    "], ["\n      textarea {\n        ", "\n      }\n    "])), scrollVisibleType === 'visible' ? scrollbarStyle_1.scrollbarStyle : scrollbarStyle_1.scrollInvisible);
+}, function (_a) {
+    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
+    return (textLineType === 'multi' || textLineType === 'auto') &&
+        scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      padding-right: 0px;\n    "], ["\n      padding-right: 0px;\n    "])));
 });
-var S_RightBox = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+var S_RightBox = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_RightBox_Auto = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"], ["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"])));
+var S_RightBox_Multi = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"], ["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     switch (colorTheme) {
         case 'none': {
@@ -383,5 +419,6 @@ var S_Error = styled_components_1.default.div(templateObject_21 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
+var S_PrefixText = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  display: flex;\n  min-width: fit-content;\n"], ["\n  display: flex;\n  min-width: fit-content;\n"])));
 exports.default = TextField;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSTextType, UiColors } from '../../../common';
+import type { PDSTextType, UiColors, TextLabelStyleThemeType, TextLabelColorThemeType } from '../../../common';
 import type { TextCaseTooltipPositionType } from '../../../common/types/systemUI';
 export type TextLabelProps = {
     text: PDSTextType;
@@ -8,9 +8,9 @@ export type TextLabelProps = {
     tooltipPosition?: TextCaseTooltipPositionType;
     tooltipIconColorKey?: UiColors;
     textAlign?: 'left' | 'center' | 'right';
-    styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form1Bold' | 'form2Regular' | 'form2Bold' | 'blog1Regular';
+    styleTheme?: TextLabelStyleThemeType;
     colorOverride?: UiColors;
-    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    colorTheme?: TextLabelColorThemeType;
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
@@ -26,6 +26,7 @@ export type TextLabelProps = {
 export type TextStyleProps = {
     textAlign?: TextLabelProps['textAlign'];
     tooltipPosition?: TextLabelProps['tooltipPosition'];
+    tooltipText?: TextLabelProps['tooltipText'];
     styleTheme?: TextLabelProps['styleTheme'];
     colorOverride?: UiColors;
     colorTheme?: TextLabelProps['colorTheme'];

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

@@ -361,7 +361,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
 var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  position: relative;\n  text-align: ", ";\n  white-space: pre-wrap;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  position: relative;\n  text-align: ", ";\n  white-space: pre-wrap;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -463,9 +463,12 @@ var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_47 || (te
 var form1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
 var form2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n  margin-bottom: 2px;\n"], ["\n  margin-bottom: 2px;\n"])));
 var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"])), function (_a) {
+var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
+}, function (_a) {
+    var tooltipText = _a.tooltipText;
+    return (tooltipText ? '0' : '12px');
 }, function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme &&
@@ -492,7 +495,7 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templ
             blog1Regular: blog1RAfterTextBox
         }[styleTheme];
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
+var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n"])));
 var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
     var tooltipPositionCss = _a.tooltipPositionCss;
     return tooltipPositionCss;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
 import type { IconCaseTooltipPositionType } from '../../../common/types/systemUI';
 export type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
@@ -9,7 +9,7 @@ export type UploadIconButtonProps = {
     borderColorKey?: UiColors;
     iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
     iconFillType?: 'fill' | 'line';
-    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconName: PDSIconType;
     iconColorKey?: UiColors;
     shadow?: 'hidden' | 'visible';
     colorTheme?: 'none' | 'line1' | 'line2';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 type UploadMainButtonProps = {
     text?: PDSTextType;
     shapeType?: 'round' | 'rectangle';
@@ -10,8 +10,8 @@ type UploadMainButtonProps = {
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
-    iconName?: FillIconNameKeys | LineIconNameKeys;
-    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
+    iconName?: PDSIconType;
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';

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

@@ -322,14 +322,21 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
+var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1Disabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2Disabled;
 });
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
@@ -339,23 +346,30 @@ var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObje
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __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    padding: 0;\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"], ["\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    padding: 0;\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"])), function (_a) {
+var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __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    padding: 0;\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  ", "\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    padding: 0;\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  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_hover;
+    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_pressed;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;
 });
-var S_UploadMainButton = styled_components_1.default.label(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
+var S_UploadMainButton = styled_components_1.default.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
@@ -378,7 +392,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_20 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
-var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = UploadMainButton;
-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, templateObject_21, templateObject_22;
+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, templateObject_21, templateObject_22, templateObject_23, templateObject_24;

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

@@ -6,7 +6,7 @@ type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;