@itcase/ui 1.8.109 → 1.8.111

package/dist/components/Tile.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_C76te22j.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_Cstv1LFr.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
@@ -23,7 +23,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BnUIX0QT.js';
+import '../Link_es_XiqbdwLp.js';
 
 var tileAppearanceShape = {
     circular: {

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_C76te22j.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_Cstv1LFr.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -22,5 +22,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BnUIX0QT.js';
-import '../Text_es_CtCwsa3V.js';
+import '../Link_es_XiqbdwLp.js';
+import '../Text_es_CwV9rjFD.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_C76te22j.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_Cstv1LFr.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -22,5 +22,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BnUIX0QT.js';
-import '../Text_es_CtCwsa3V.js';
+import '../Link_es_XiqbdwLp.js';
+import '../Text_es_CwV9rjFD.js';

package/dist/components/Warning.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_C76te22j.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { I as Icon } from '../Icon_es_Cstv1LFr.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
@@ -12,7 +12,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BnUIX0QT.js';
+import '../Link_es_XiqbdwLp.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';

package/dist/css/components/Choice/Choice.css

@@ -2,7 +2,6 @@
   margin: 2px 0;
   position: relative;
   display: flex;
-
   /*
   &:not(:last-child) {
     border-right: var(--chioce-item-border-right);
@@ -23,6 +22,7 @@
     width: 100%;
     text-align: center;
     position: relative;
+    justify-content: center;
     display: flex;
     align-items: center;
     z-index: 3;
@@ -45,10 +45,15 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-height: var(--choice-item-size-$(size)-min-height);
-        padding: var(--choice-item-size-$(size)-padding);
+        min-height: var(--choice-item-$(size)-min-height);
+        padding: var(--choice-item-$(size)-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-$(size)-width);
+          height: var(--choice-item-icon-$(size)-height);
+          padding: 0;
+        }
         ^^&-label {
-          gap: var(--choice-item-size-$(size)-gap);
+          gap: var(--choice-item-$(size)-gap);
         }
       }
     }
@@ -138,30 +143,36 @@
   }
 }
 :root {
-  --choice-size-s-height: 28px;
-  --choice-size-s-min-height: 28px;
-  --choice-size-s-row-gap: 12px;
-  --choice-size-s-column-gap: 12px;
+  --choice-size-l-height: 48px;
+  --choice-size-l-min-height: 48px;
+  --choice-size-l-row-gap: 12px;
+  --choice-size-l-column-gap: 12px;
 
   --choice-size-m-row-gap: 12px;
   --choice-size-m-column-gap: 12px;
-  --choice-size-m-height: 36px;
-  --choice-size-m-min-height: 36px;
+  --choice-size-m-height: 40px;
+  --choice-size-m-min-height: 40px;
 
-  --choice-size-l-height: 40px;
-  --choice-size-l-min-height: 40px;
-  --choice-size-l-row-gap: 12px;
-  --choice-size-l-column-gap: 12px;
+  --choice-size-s-height: 28px;
+  --choice-size-s-min-height: 28px;
+  --choice-size-s-row-gap: 12px;
+  --choice-size-s-column-gap: 12px;
 
-  --choice-item-size-s-padding: 0px 6px;
-  --choice-item-size-s-min-height: 24px;
-  --choice-item-size-s-gap: 8px;
+  --choice-item-l-padding: 0px 12px;
+  --choice-item-l-min-height: 44px;
+  --choice-item-l-gap: 8px;
+  --choice-item-icon-l-width: 44px;
+  --choice-item-icon-l-height: 44px;
 
-  --choice-item-size-m-padding: 0px 12px;
-  --choice-item-size-m-min-height: 32px;
-  --choice-item-size-m-gap: 8px;
+  --choice-item-m-padding: 0px 12px;
+  --choice-item-m-min-height: 36px;
+  --choice-item-m-gap: 8px;
+  --choice-item-icon-m-width: 36px;
+  --choice-item-icon-m-height: 36px;
 
-  --choice-item-size-l-padding: 0px 12px;
-  --choice-item-size-l-min-height: 36px;
-  --choice-item-size-l-gap: 8px;
+  --choice-item-s-padding: 0px 6px;
+  --choice-item-s-min-height: 24px;
+  --choice-item-s-gap: 8px;
+  --choice-item-icon-s-width: 24px;
+  --choice-item-icon-s-height: 24px;
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -2,7 +2,6 @@
   margin: 2px 0;
   position: relative;
   display: flex;
-
   /*
   &:not(:last-child) {
     border-right: var(--chioce-item-border-right);
@@ -23,6 +22,7 @@
     width: 100%;
     text-align: center;
     position: relative;
+    justify-content: center;
     display: flex;
     align-items: center;
     z-index: 3;

package/dist/css/components/Choice/css/__item/choice__item_size.css

@@ -2,10 +2,15 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-height: var(--choice-item-size-$(size)-min-height);
-        padding: var(--choice-item-size-$(size)-padding);
+        min-height: var(--choice-item-$(size)-min-height);
+        padding: var(--choice-item-$(size)-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-$(size)-width);
+          height: var(--choice-item-icon-$(size)-height);
+          padding: 0;
+        }
         ^^&-label {
-          gap: var(--choice-item-size-$(size)-gap);
+          gap: var(--choice-item-$(size)-gap);
         }
       }
     }

package/dist/css/components/DatePicker/DatePicker.css

@@ -822,23 +822,23 @@ h2.react-datepicker__current-month {
             align-items: center;
           }
         }
-        ^^^&__day {
-          &-names {
-            margin: 0;
-            display: flex;
-          }
-          &-name {
-            width: var(--date-picker-day-width);
-            height: var(--date-picker-day-height);
-            font-size: var(--date-picker-day-name-text-size);
-            font-weight: var(--date-picker-day-name-text-weight);
-            color: var(--date-picker-day-name-text-color);
-            line-height: var(--date-picker-day-name-text-line-height);
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
+      }
+      ^^&__day {
+        &-names {
+          margin: 0;
+          display: flex;
+        }
+        &-name {
+          width: var(--date-picker-day-width);
+          height: var(--date-picker-day-height);
+          font-size: var(--date-picker-day-name-text-size);
+          font-weight: var(--date-picker-day-name-text-weight);
+          color: var(--date-picker-day-name-text-color);
+          line-height: var(--date-picker-day-name-text-line-height);
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
       }
       ^^&__month {
@@ -887,7 +887,7 @@ h2.react-datepicker__current-month {
               background: var(--date-picker-day-outside-background) !important;
               cursor: default !important;
               & .button__label {
-                color: var(--date-picker-day-ouside-ext-color) !important;
+                color: var(--date-picker-day-outside-text-color) !important;
                 cursor: default !important;
               }
             }

package/dist/css/components/Group/Group.css

@@ -213,3 +213,8 @@
     }
   }
 }
+
+:root {
+  --group-transition: all 0.2s ease 0s;
+  --group-shape-rounded: 0;
+}

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

@@ -3,19 +3,21 @@
   padding: 0;
   margin: 0;
   border: none;
+  border: solid 1px none;
   position: relative;
   box-shadow: none;
   appearance: none;
   outline: 0;
   caret-color: var(--input-caret-color);
-  &:disabled {
-    background: var(--input-state-disabled-background);
-    border: solid 1px var(--input-state-disabled-border);
+  transition: var(--input-transition);
+  /* &:disabled {
+    background: none;
+    border: solid 1px none;
     &:hover {
-      background: var(--input-state-disabled-background);
-      border: solid 1px var(--input-state-disabled-border);
+      background: none;
+      border: solid 1px none;
     }
-  }
+  } */
   &:focus {
     outline: none;
   }
@@ -32,10 +34,10 @@
 }
 .input {
   &&_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
+    @each $size in xl, l, m, s {
       &_$(size) {
-        min-height: var(--input-size-$(size)-min-height);
-        padding: var(--input-size-$(size)-padding);
+        min-height: var(--input-$(size)-min-height);
+        padding: var(--input-$(size)-padding);
       }
     }
   }
@@ -70,19 +72,19 @@
   --input-shape-rounded: 8px;
 
   /* Size */
-  --input-size-s-padding: 5px 10px;
-  --input-size-m-padding: 7px 12px;
-  --input-size-l-padding: 9px 15px;
-  --input-size-xl-padding: 13px 20px;
-  --input-size-xxl-padding: 17px 25px;
-  --input-size-s-min-height: 28px;
-  --input-size-m-min-height: 36px;
-  --input-size-l-min-height: 40px;
-  --input-size-xl-min-height: 48px;
-  --input-size-xxl-min-height: 56px;
+  --input-xl-min-height: 56px;
+  --input-xl-padding: 12px 16px;
+  --input-l-min-height: 48px;
+  --input-l-padding: 12px 12px;
+  --input-m-min-height: 40px;
+  --input-m-padding: 8px 12px;
+  --input-s-min-height: 28px;
+  --input-s-padding: 2px 6px;
 
   --input-caret-color: var(--color-accent-fill-primary);
 
+  --input-transition: all 0.3s ease 0s;
+
   /* State */
   --input-state-success-background: none;
   --input-state-success-border: var(--color-success-border-primary);