@itcase/ui 1.8.122 → 1.8.123

package/dist/components/Tab.js

@@ -45,56 +45,42 @@ var tabAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 's',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
         dividerSize: 's',
     },
     sizeXL: {
         size: 'xl',
         labelTextSize: 's',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
         dividerSize: 's',
     },
     sizeL: {
         size: 'l',
         labelTextSize: 's',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
         dividerSize: 's',
     },
     sizeM: {
         size: 'm',
         labelTextSize: 's',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
         dividerSize: 's',
     },
     sizeS: {
         size: 's',
         labelTextSize: 's',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
         dividerSize: 's',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
     },
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xs',
-        badgeAppearanceSize: 'sizeXL',
-        badgeSize: 'xxs',
-        badgeTextSize: 'xxs',
+        badgeAppearanceSize: 'sizeXXS',
         dividerSize: 's',
     },
 };
@@ -138,12 +124,26 @@ var tabAppearanceSurface = {
         fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextAccent',
+        borderColor: 'surfaceBorderPrimary',
+        borderColorActive: 'surfaceBorderPrimary',
+        badgeAppearance: 'accentPrimary solid circular',
+        dividerFillActive: 'accentPrimary',
         dividerFillDisabled: 'accentDisabled',
+        iconFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'surfaceTertiary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceQuaternary',
+        labelTextColor: 'surfaceTextInverse',
+        labelTextColorActive: 'surfaceTextInverse',
         borderColor: 'surfaceBorderPrimary',
         borderColorActive: 'surfaceBorderPrimary',
-        badgeAppearance: 'accentPrimary',
         badgeAppearance: 'accentPrimary solid circular',
         dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
         iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceSecondary: {
@@ -154,12 +154,11 @@ var tabAppearanceSurface = {
         fillHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
         borderColor: 'surfaceBorderPrimary',
         borderColorActive: 'surfaceBorderPrimary',
-        badgeAppearance: 'accentPrimary',
         badgeAppearance: 'accentPrimary solid circular',
         dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
         iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
@@ -170,28 +169,11 @@ var tabAppearanceSurface = {
         fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
         borderColor: 'surfaceBorderPrimary',
         borderColorActive: 'surfaceBorderPrimary',
-        badgeAppearance: 'accentPrimary',
         badgeAppearance: 'accentPrimary solid circular',
         dividerFillActive: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillActive: 'accentPrimary',
-        fillActiveHover: 'surfaceTertiary',
-        fillDisabled: 'surfaceDisabled',
-        fillHover: 'surfaceQuaternary',
-        labelTextColor: 'surfaceTextInverse',
-        labelTextColorActive: 'surfaceTextInverse',
         dividerFillDisabled: 'accentDisabled',
-        borderColor: 'surfaceBorderPrimary',
-        borderColorActive: 'surfaceBorderPrimary',
-        badgeAppearance: 'accentPrimary',
-        badgeAppearance: 'accentPrimary solid circular',
-        dividerFillActive: 'accentPrimary',
         iconFillIcon: 'surfaceItemPrimary',
     },
 };
@@ -218,18 +200,20 @@ var tabConfig = {
     },
 };
 function Tab(props) {
-    var dataTour = props.dataTour, className = props.className, appearance = props.appearance, label = props.label, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, badgeValue = props.badgeValue, href = props.href, link = props.link, rel = props.rel, target = props.target, before = props.before, after = props.after, _b = props.isActive, isActive = _b === void 0 ? false : _b, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
+    var appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, label = props.label, badgeValue = props.badgeValue, href = props.href, link = props.link, rel = props.rel, target = props.target, before = props.before, after = props.after, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
     var appearanceConfig = useAppearanceConfig(appearance, tabConfig, isDisabled);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var rootClasses = useActiveClasses({
-        isDisabled: isDisabled,
         propsGenerator: propsGenerator,
         isActive: isActive,
+        isDisabled: isDisabled,
     }).rootClasses;
-    var justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, dividerFillDisabled = propsGenerator.dividerFillDisabled, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerFill = propsGenerator.dividerFill, dividerFillActive = propsGenerator.dividerFillActive, dividerFillActiveHover = propsGenerator.dividerFillActiveHover, dividerFillHover = propsGenerator.dividerFillHover, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, linkFill = propsGenerator.linkFill, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerFill = propsGenerator.dividerFill, dividerFillActive = propsGenerator.dividerFillActive, dividerFillActiveHover = propsGenerator.dividerFillActiveHover, dividerFillDisabled = propsGenerator.dividerFillDisabled, dividerFillHover = propsGenerator.dividerFillHover, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, linkFill = propsGenerator.linkFill, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var tab = useStyles(props).styles;
-    return (jsx("div", { dataTour: dataTour, className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && "tab_size_".concat(sizeClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), widthClass && "width_".concat(widthClass), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), isSkeleton && "tab_skeleton", onClick && 'cursor_type_pointer'), style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, isDisabled: isDisabled, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), Boolean(badgeValue) && (jsx(Badge, { appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tab__icon_after'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsx(Divider, { className: clsx('tab__divider'), width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isDisabled: isDisabled, isActive: isActive })] })), after] }) }));
+    console.log(badgeAppearance);
+    console.log(badgeAppearanceSize);
+    return (jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && "tab_size_".concat(sizeClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), widthClass && "width_".concat(widthClass), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), isSkeleton && "tab_skeleton", onClick && 'cursor_type_pointer'), "data-test-id": dataTestId && "".concat(dataTestId, "Tab"), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsx(Badge, { appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tab__icon_after'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsx(Divider, { className: clsx('tab__divider'), width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
 }
 
 function TabGroup(props) {

package/dist/css/components/Checkmark/Checkmark.css

@@ -19,6 +19,8 @@
       &_$(size) {
         width: var(--checkmark-$(size)-width);
         height: var(--checkmark-$(size)-height);
+        min-width: var(--checkmark-$(size)-width);
+        min-height: var(--checkmark-$(size)-height);
         & svg {
           transform: scale($(scale));
         }

package/dist/css/components/DatePeriod/DatePeriod.css

@@ -1,5 +1,8 @@
 .date-period {
   display: flex;
+  &__datepicker {
+    min-width: 220px;
+  }
 }
 .date-period {
   &&_skeleton {

package/dist/css/components/Input/Input.css

@@ -10,14 +10,6 @@
   outline: 0;
   caret-color: var(--input-caret-color);
   transition: var(--input-transition);
-  /* &:disabled {
-    background: none;
-    border: solid 1px none;
-    &:hover {
-      background: none;
-      border: solid 1px none;
-    }
-  } */
   &:focus {
     outline: none;
   }

package/dist/css/components/InputPassword/InputPassword.css

@@ -1,56 +1,38 @@
 .input-password {
+  width: 100%;
   position: relative;
   &__icon {
     position: absolute;
-    right: 8px;
     top: 50%;
+    right: 8px;
     transform: translate(0, -50%);
   }
   &__input {
-    border: none;
-    appearance: none;
+    width: 100%;
+    min-width: unset;
     padding: 0;
     margin: 0;
-    min-width: unset;
+    border: none;
+    border: solid 1px none;
+    position: relative;
     box-shadow: none;
+    appearance: none;
     outline: 0;
-    position: relative;
     caret-color: var(--input-password-caret-color);
+    transition: var(--input-password-transition);
     &:focus {
       outline: none;
     }
-    &:hover {
-      border: solid 1px var(--input-password-state-hover-border);
-      background: var(--input-password-state-hover-background);
-    }
-    &&_state {
-      &_success {
-        border: solid 1px var(--input-password-state-success-border);
-        background: var(--input-password-state-success-background);
-      }
-      &_error {
-        border: solid 1px var(--input-password-state-error-border);
-        background: var(--input-password-state-error-background);
-      }
-      &_focus {
-        border: solid 1px var(--input-password-state-focus-border);
-        background: var(--input-password-state-focus-background);
-      }
-    }
   }
 }
 .input-password {
   &__input {
     &_shape {
-      &_rounded {
-        border-radius: var(--input-password-shape-rounded);
-        position: relative;
-      }
       &_underline {
-        position: relative;
         border-left: none !important;
-        border-right: none !important;
         border-top: none !important;
+        border-right: none !important;
+        position: relative;
       }
     }
   }
@@ -58,26 +40,36 @@
 .input-password {
   &__input {
     &&_size {
-      @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
+      @each $size in xl, l, m, s {
         &_$(size) {
-          padding: var(--input-password-size-$(size)-padding);
+          min-height: var(--input-password-$(size)-min-height);
+          padding: var(--input-password-$(size)-padding);
+        }
+      }
+    }
+  }
+}
+.input-password {
+  &&_state {
+    @each $state in error, success, require, disabled, focus {
+      &_$(state) {
+        & .input {
+          background: var(--input-state-$(state)-background);
+          border: solid 1px var(--input-state-$(state)-border);
         }
       }
     }
   }
 }
 :root {
-  --input-password-size-xs-padding: 4px 8px;
-  --input-password-size-s-padding: 5px 10px;
-  --input-password-size-m-padding: 7px 12px;
-  --input-password-size-l-padding: 9px 15px;
-  --input-password-size-xl-padding: 15px 20px;
-  --input-password-size-xxl-padding: 18px 25px;
-
-  --input-password-size-tiny-padding: 4px 8px;
-  --input-password-size-compact-padding: 5px 10px;
-  --input-password-size-normal-padding: 7px 12px;
-  --input-password-size-large-padding: 9px 15px;
+  --input-password-xl-min-height: 56px;
+  --input-password-xl-padding: 12px 16px;
+  --input-password-l-min-height: 48px;
+  --input-password-l-padding: 12px 12px;
+  --input-password-m-min-height: 40px;
+  --input-password-m-padding: 8px 12px;
+  --input-password-s-min-height: 28px;
+  --input-password-s-padding: 2px 6px;
 
   --input-password-state-focus-border: var(--color-active-border-primary);
   --input-password-state-focus-background: none;
@@ -88,5 +80,4 @@
   --input-password-state-hover-border: var(--color-surface-border-quaternary);
   --input-password-state-hover-background: none;
   --input-password-caret-color: var(--color-accent-fill-primary);
-  --input-password-shape-rounded: 0;
 }

package/dist/types/components/InputPassword/InputPassword.appearance.d.ts

@@ -1,2 +1,179 @@
-import { InputPasswordAppearanceType } from './InputPassword.interface';
-export declare const inputPasswordAppearance: InputPasswordAppearanceType;
+export declare const inputPasswordAppearance: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    successPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    successSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    defaultPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        textColorDisabled: string;
+        caret: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    defaultSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        textColorDisabled: string;
+        caret: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    errorPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    errorSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    solid: {
+        borderColor: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    full: {
+        borderColor: string;
+    };
+    ghost: {
+        fill: string;
+        borderColor: string;
+    };
+    requirePrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    requireSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    disabledSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
+    };
+    sizeXXL: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+    sizeXL: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+    sizeL: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+    sizeM: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+    sizeS: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+    sizeXS: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+    sizeXXS: {
+        size: string;
+        textSize: string;
+        iconFillSize: string;
+        iconSize: string;
+    };
+};

package/dist/types/components/InputPassword/appearance/inputPasswordDefault.d.ts

@@ -6,8 +6,10 @@ declare const inputPasswordAppearanceDefault: {
         textColor: string;
         textColorDisabled: string;
         caret: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
+        placeholderTextColor: string;
     };
     defaultSecondary: {
         fill: string;
@@ -16,8 +18,9 @@ declare const inputPasswordAppearanceDefault: {
         textColor: string;
         textColorDisabled: string;
         caret: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
 };

package/dist/types/components/InputPassword/appearance/inputPasswordDisabled.d.ts

@@ -4,16 +4,18 @@ declare const inputPasswordAppearanceDisabled: {
         borderColor: string;
         borderHover: string;
         textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
     disabledSecondary: {
         fill: string;
         borderColor: string;
         borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
 };

package/dist/types/components/InputPassword/appearance/inputPasswordError.d.ts

@@ -4,16 +4,18 @@ declare const inputPasswordAppearanceError: {
         borderColor: string;
         borderHover: string;
         textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
     errorSecondary: {
         fill: string;
         borderColor: string;
         borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
 };

package/dist/types/components/InputPassword/appearance/inputPasswordRequire.d.ts

@@ -4,16 +4,18 @@ declare const inputPasswordAppearanceRequire: {
         borderColor: string;
         borderHover: string;
         textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
     requireSecondary: {
         fill: string;
         borderColor: string;
         borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
+        iconFill: string;
+        iconRevealableHide: string;
+        iconRevealableShow: string;
         placeholderTextColor: string;
     };
 };

package/dist/types/components/InputPassword/appearance/inputPasswordShape.d.ts

@@ -0,0 +1,25 @@
+declare const inputPasswordAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { inputPasswordAppearanceShape };