@itcase/ui 1.8.110 → 1.8.112

package/dist/css/components/Select/css/__single-value/select__single-value.css

@@ -1,5 +1,10 @@
 .select {
   &__single-value {
     display: flex;
+    position: relative;
+    overflow: hidden;
+    & .text {
+      white-space: nowrap;
+    }
   }
 }

package/dist/css/components/Textarea/Textarea.css

@@ -14,6 +14,7 @@
     outline: 0;
     resize: none;
     appearance: none;
+    transition: var(--textarea-transition);
     &:read-only {
       color: var(--color-surface-text-tertiary);
     }
@@ -43,15 +44,15 @@
   }
 }
 :root {
-  --textarea-shape-rounded: 8px;
-  --textarea-size-m-padding: 8px 12px;
   --textarea-min-height: 80px;
   --textarea-max-height: 80px;
   --textarea-success-border: var(--color-surface-border-tertiary);
 
+  --textarea-transition: all 0.3s ease 0s;
+
   /* Size */
-  @each $size, $value in (xxl, xl, l, m, s, xs, xxs),
-    (17px 25px, 13px 20px, 9px 15px, 7px 12px, 5px 10px, 5px 10px, 5px 10px) {
-    --textarea-size-$(size)-padding: $value;
-  }
+  --textarea-size-xl-padding: 17px 25px;
+  --textarea-size-l-padding: 13px 20px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-size-s-padding: 7px 12px;
 }

package/dist/css/styles/bundle.css

@@ -805,7 +805,6 @@ div.alignment {
           &-item {
             &-$(color) {
               background: var(--color-$(type)-item-$(color));
-
               /* &$(alpha) {
                 background: var(--color-$(type)-item-$(color)-$(alpha));
               } */
@@ -813,13 +812,11 @@ div.alignment {
           }
           &-$(color) {
             background: var(--color-$(type)-fill-$(color));
-
             /* &$(alpha) {
               background: var(--color-$(type)-$(color)-$(alpha));
             } */
           }
         }
-
         /* } */
       }
     }
@@ -1356,7 +1353,7 @@ div.alignment {
 .text_align {
   @each $align in left, center, right {
     &_$(align) {
-      text-align: ($align);
+      text-align: $(align);
     }
   }
 }
@@ -1572,49 +1569,42 @@ div.alignment {
   }
 }
 /* stylelint-disable order/order */
-span.text,
-div.text {
-  &-weight {
-    @each $val in 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 {
-      &_$(val) {
-        font-weight: $(val);
+@each $selector in div, span, li {
+  .text,
+  $(selector).text {
+    &-weight {
+      @each $val in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
+        &_$(val) {
+          font-weight: $(val);
+        }
+      }
+      &_thin {
+        font-weight: 100;
+      }
+      &_extra-light {
+        font-weight: 200;
+      }
+      &_light {
+        font-weight: 300;
+      }
+      &_normal {
+        font-weight: 400;
+      }
+      &_medium {
+        font-weight: 500;
+      }
+      &_semi-bold {
+        font-weight: 600;
+      }
+      &_bold {
+        font-weight: 700;
+      }
+      &_extra-bold {
+        font-weight: 800;
+      }
+      &_black {
+        font-weight: 900;
       }
-    }
-    &_thin {
-      font-weight: 100;
-    }
-    &_extra-light,
-    &_extralight,
-    &_ultra-light,
-    &_ultralight {
-      font-weight: 200;
-    }
-    &_light {
-      font-weight: 300;
-    }
-    &_normal {
-      font-weight: 400;
-    }
-    &_medium {
-      font-weight: 500;
-    }
-    &_semibold,
-    &_semi-bold,
-    &_demi-bold {
-      font-weight: 600;
-    }
-    &_bold {
-      font-weight: 700;
-    }
-    &_extrabold,
-    &_extra-bold,
-    &_ultrabold,
-    &_ultra-bold {
-      font-weight: 800;
-    }
-    &_black,
-    &_heavy {
-      font-weight: 900;
     }
   }
 }

package/dist/css/styles/fill/fill.css

@@ -12,7 +12,6 @@
           &-item {
             &-$(color) {
               background: var(--color-$(type)-item-$(color));
-
               /* &$(alpha) {
                 background: var(--color-$(type)-item-$(color)-$(alpha));
               } */
@@ -20,13 +19,11 @@
           }
           &-$(color) {
             background: var(--color-$(type)-fill-$(color));
-
             /* &$(alpha) {
               background: var(--color-$(type)-$(color)-$(alpha));
             } */
           }
         }
-
         /* } */
       }
     }

package/dist/css/styles/text-align/text-align.css

@@ -1,7 +1,7 @@
 .text_align {
   @each $align in left, center, right {
     &_$(align) {
-      text-align: ($align);
+      text-align: $(align);
     }
   }
 }

package/dist/css/styles/text-weight/text-weight.css

@@ -1,48 +1,41 @@
 /* stylelint-disable order/order */
 
-span.text,
-div.text {
-  &-weight {
-    @each $val in 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 {
-      &_$(val) {
-        font-weight: $(val);
+@each $selector in div, span, li {
+  .text,
+  $(selector).text {
+    &-weight {
+      @each $val in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
+        &_$(val) {
+          font-weight: $(val);
+        }
+      }
+      &_thin {
+        font-weight: 100;
+      }
+      &_extra-light {
+        font-weight: 200;
+      }
+      &_light {
+        font-weight: 300;
+      }
+      &_normal {
+        font-weight: 400;
+      }
+      &_medium {
+        font-weight: 500;
+      }
+      &_semi-bold {
+        font-weight: 600;
+      }
+      &_bold {
+        font-weight: 700;
+      }
+      &_extra-bold {
+        font-weight: 800;
+      }
+      &_black {
+        font-weight: 900;
       }
-    }
-    &_thin {
-      font-weight: 100;
-    }
-    &_extra-light,
-    &_extralight,
-    &_ultra-light,
-    &_ultralight {
-      font-weight: 200;
-    }
-    &_light {
-      font-weight: 300;
-    }
-    &_normal {
-      font-weight: 400;
-    }
-    &_medium {
-      font-weight: 500;
-    }
-    &_semibold,
-    &_semi-bold,
-    &_demi-bold {
-      font-weight: 600;
-    }
-    &_bold {
-      font-weight: 700;
-    }
-    &_extrabold,
-    &_extra-bold,
-    &_ultrabold,
-    &_ultra-bold {
-      font-weight: 800;
-    }
-    &_black,
-    &_heavy {
-      font-weight: 900;
     }
   }
 }

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -3,19 +3,23 @@ import { useMemo } from 'react';
 
 var useAppearanceConfig = function (appearance, componentConfig, isDisabled) {
     var appearanceConfig = useMemo(function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         if (appearance) {
             var appearanceProps = appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
                 var _a;
                 return (__assign(__assign({}, resultConfig), (_a = componentConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
             }, {});
-            if (isDisabled && ((_a = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _a === void 0 ? void 0 : _a.disabled)) {
-                Object.assign(appearanceProps, (_b = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _b === void 0 ? void 0 : _b.disabled);
+            if (isDisabled &&
+                (((_a = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _a === void 0 ? void 0 : _a.disabled) ||
+                    ((_b = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _b === void 0 ? void 0 : _b.disabledPrimary))) {
+                Object.assign(appearanceProps, ((_c = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _c === void 0 ? void 0 : _c.disabled) ||
+                    ((_d = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _d === void 0 ? void 0 : _d.disabledPrimary));
             }
             return appearanceProps;
         }
         if (isDisabled) {
-            return (_c = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _c === void 0 ? void 0 : _c.disabled;
+            return (((_e = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _e === void 0 ? void 0 : _e.disabled) ||
+                ((_f = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _f === void 0 ? void 0 : _f.disabledPrimary));
         }
         return {};
     }, [appearance, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance, isDisabled]);

package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts

@@ -1,16 +1,22 @@
 declare const checkboxAppearanceStyle: {
     solid: {
         borderColorCheckbox: string;
-        borderWidth: string;
+        borderColorCheckboxActive: string;
+        borderColorCheckboxActiveHover: string;
+        borderColorCheckboxHover: string;
     };
     outlined: {
         fill: string;
+        fillHover: string;
     };
     full: {};
     ghost: {
         fill: string;
+        fillHover: string;
         borderColorCheckbox: string;
-        borderWidth: string;
+        borderColorCheckboxActive: string;
+        borderColorCheckboxActiveHover: string;
+        borderColorCheckboxHover: string;
     };
 };
 export { checkboxAppearanceStyle };

package/dist/types/components/Choice/appearance/choiceDefault.d.ts

@@ -3,6 +3,7 @@ declare const choiceAppearanceDefault: {
         fill: string;
         fillItem: string;
         fillItemActive: string;
+        fillItemActiveHover: string;
         fillItemHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;

package/dist/types/components/Choice/appearance/choiceDisabled.d.ts

@@ -3,8 +3,10 @@ declare const choiceAppearanceDisabled: {
         fill: string;
         fillItem: string;
         fillItemActive: string;
-        labelTextActiveColor: string;
+        fillItemActiveHover: string;
+        fillItemHover: string;
         labelTextColor: string;
+        labelTextActiveColor: string;
         borderColor: string;
         iconAfterFill: string;
         iconAfterFillActive: string;

package/dist/types/components/Code/Code.interface.d.ts

@@ -27,6 +27,7 @@ export interface CodeProps extends CodeThemeColor, StyleAttributes {
     before?: ReactNode;
     className?: string;
     gap?: string;
+    initialValue?: string;
     inputAutoFocus?: boolean;
     inputBorderColor?: BorderColorProps;
     inputBorderColorHover?: BorderColorHoverProps;

package/dist/types/components/Input/appearance/inputDefault.d.ts

@@ -1,7 +1,7 @@
 declare const inputAppearanceDefault: {
     defaultPrimary: {
         fill: string;
-        textColorDisabled: string;
+        fillHover: string;
         borderColor: string;
         borderColorHover: string;
         textColor: string;
@@ -12,7 +12,7 @@ declare const inputAppearanceDefault: {
     };
     defaultSecondary: {
         fill: string;
-        textColorDisabled: string;
+        fillHover: string;
         borderColor: string;
         borderColorHover: string;
         textColor: string;

package/dist/types/components/Input/appearance/inputDisabled.d.ts

@@ -1,6 +1,7 @@
 declare const inputAppearanceDisabled: {
     disabledPrimary: {
         fill: string;
+        fillHover: string;
         borderColor: string;
         borderColorHover: string;
         textColor: string;

package/dist/types/components/Input/appearance/inputRequire.d.ts

@@ -1,6 +1,7 @@
 declare const inputAppearanceRequire: {
     requirePrimary: {
         fill: string;
+        fillHover: string;
         borderColor: string;
         borderColorHover: string;
         textColor: string;

package/dist/types/components/Input/appearance/inputStyle.d.ts

@@ -1,6 +1,7 @@
 declare const inputAppearanceStyle: {
     solid: {
         borderColor: string;
+        borderColorHover: string;
     };
     outlined: {
         fill: string;

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

@@ -1,14 +1,24 @@
 export declare const radioAppearance: {
     solid: {
+        fill: string;
+        fillHover: string;
         borderColor: string;
+        borderColorHover: string;
+        borderRadioColor: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
+        borderRadioColorHover: string;
     };
     outlined: {
         fill: string;
+        fillHover: string;
     };
     full: {};
     ghost: {
         fill: string;
+        fillHover: string;
         borderColor: string;
+        borderColorHover: string;
     };
     circular: {
         shape: string;
@@ -16,19 +26,19 @@ export declare const radioAppearance: {
     rounded: {
         shape: string;
     };
-    roundedS: {
+    roundedXL: {
         shape: string;
         shapeStrength: string;
     };
-    roundedM: {
+    roundedL: {
         shape: string;
         shapeStrength: string;
     };
-    roundedL: {
+    roundedM: {
         shape: string;
         shapeStrength: string;
     };
-    roundedXL: {
+    roundedS: {
         shape: string;
         shapeStrength: string;
     };
@@ -53,8 +63,10 @@ export declare const radioAppearance: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
     requirePrimary: {
         fill: string;
@@ -62,8 +74,10 @@ export declare const radioAppearance: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
     successPrimary: {
         fill: string;
@@ -71,8 +85,10 @@ export declare const radioAppearance: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
     errorPrimary: {
         fill: string;
@@ -80,19 +96,24 @@ export declare const radioAppearance: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
     defaultPrimary: {
         fill: string;
         fillCheckmark: string;
         fillDisabled: string;
-        fillRadioClass: string;
+        fillRadio: string;
+        fillRadioHover: string;
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorCheckmark: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
+        borderRadioColorHover: string;
+        shape: string;
     };
 };

package/dist/types/components/Radio/appearance/radioDefault.d.ts

@@ -3,13 +3,16 @@ declare const radioAppearanceDefault: {
         fill: string;
         fillCheckmark: string;
         fillDisabled: string;
-        fillRadioClass: string;
+        fillRadio: string;
+        fillRadioHover: string;
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorCheckmark: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
+        borderRadioColorHover: string;
+        shape: string;
     };
 };
 export { radioAppearanceDefault };

package/dist/types/components/Radio/appearance/radioDisabled.d.ts

@@ -5,8 +5,10 @@ declare const radioAppearanceDisabled: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
 };
 export { radioAppearanceDisabled };

package/dist/types/components/Radio/appearance/radioError.d.ts

@@ -5,8 +5,10 @@ declare const radioAppearanceError: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
 };
 export { radioAppearanceError };

package/dist/types/components/Radio/appearance/radioRequire.d.ts

@@ -5,8 +5,10 @@ declare const radioAppearanceRequire: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
 };
 export { radioAppearanceRequire };

package/dist/types/components/Radio/appearance/radioShape.d.ts

@@ -5,19 +5,19 @@ declare const radioAppearanceShape: {
     rounded: {
         shape: string;
     };
-    roundedS: {
+    roundedXL: {
         shape: string;
         shapeStrength: string;
     };
-    roundedM: {
+    roundedL: {
         shape: string;
         shapeStrength: string;
     };
-    roundedL: {
+    roundedM: {
         shape: string;
         shapeStrength: string;
     };
-    roundedXL: {
+    roundedS: {
         shape: string;
         shapeStrength: string;
     };

package/dist/types/components/Radio/appearance/radioStyle.d.ts

@@ -1,14 +1,24 @@
 declare const radioAppearanceStyle: {
     solid: {
+        fill: string;
+        fillHover: string;
         borderColor: string;
+        borderColorHover: string;
+        borderRadioColor: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
+        borderRadioColorHover: string;
     };
     outlined: {
         fill: string;
+        fillHover: string;
     };
     full: {};
     ghost: {
         fill: string;
+        fillHover: string;
         borderColor: string;
+        borderColorHover: string;
     };
 };
 export { radioAppearanceStyle };

package/dist/types/components/Radio/appearance/radioSuccess.d.ts

@@ -5,8 +5,10 @@ declare const radioAppearanceSuccess: {
         labelTextColor: string;
         descTextColor: string;
         borderColor: string;
-        borderColorRadio: string;
-        borderColorRadioActive: string;
+        borderRadioColor: string;
+        borderRadioColorHover: string;
+        borderRadioColorActive: string;
+        borderRadioColorActiveHover: string;
     };
 };
 export { radioAppearanceSuccess };

package/dist/types/components/Segmented/appearance/segmentedWarning.d.ts

@@ -2,6 +2,7 @@ declare const segmentedAppearanceWarning: {
     warningPrimary: {
         fill: string;
         fillActive: string;
+        fillActiveHover: string;
         fillHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;