@itcase/ui 1.4.13 → 1.5.0

package/dist/css/components/Pagination/Pagination.css

@@ -17,7 +17,8 @@
   &__input {
     background: var(--color-surface-primary);
     padding: 3px 7px;
-    border: 1px solid var(--pagination-input-color, --color-surface-border-tertiary);
+    border: solid 1px
+      var(--pagination-input-color, --color-surface-border-tertiary);
     border-radius: 8px;
     position: relative;
     display: flex;
@@ -28,7 +29,8 @@
 }
 .pagination {
   &__container {
-    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+    @each $val in flex-start, flex-end, center, space-between, space-around,
+      space-evenly {
       &_justify-content_$(val) {
         justify-content: $(val);
       }
@@ -39,12 +41,15 @@
   &__container {
     margin: var(--paginator-margin, initial);
     ^&__item {
-      min-width: var(--paginator-item-width, 40px);
-      min-height: var(--paginator-item-height, 40px);
+      min-width: var(--paginator-item-width);
+      min-height: var(--paginator-item-height);
       background: var(--paginator-item-default-fill);
       padding: 0 8px;
-      border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
-      border-radius: var(--paginator-item-border-radius, 6px);
+      border: var(
+        --paginator-item-border,
+        solid 1px var(--paginator-item-default-border)
+      );
+      border-radius: var(--paginator-item-border-radius);
       display: flex;
       transition: var(--paginator-item-transition);
       cursor: pointer;
@@ -75,7 +80,10 @@
     border: solid 1px var(--paginator-item-active-border);
     &&_state {
       &_active {
-        background: var(--paginator-item-active-background, var(--color-accent-primary));
+        background: var(
+          --paginator-item-active-background,
+          var(--color-accent-primary)
+        );
         &:hover {
           background: var(--paginator-item-active-fill-hover);
         }
@@ -101,7 +109,7 @@
         & svg {
           fill: var(--paginator-item-disabled-icon);
         }
-        display: var(--pagination-item-state-disabled-display, initial);
+        display: var(--pagination-item-state-disabled-display);
       }
     }
   }

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -2,12 +2,15 @@
   &__container {
     margin: var(--paginator-margin, initial);
     ^&__item {
-      min-width: var(--paginator-item-width, 40px);
-      min-height: var(--paginator-item-height, 40px);
+      min-width: var(--paginator-item-width);
+      min-height: var(--paginator-item-height);
       background: var(--paginator-item-default-fill);
       padding: 0 8px;
-      border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
-      border-radius: var(--paginator-item-border-radius, 6px);
+      border: var(
+        --paginator-item-border,
+        solid 1px var(--paginator-item-default-border)
+      );
+      border-radius: var(--paginator-item-border-radius);
       display: flex;
       transition: var(--paginator-item-transition);
       cursor: pointer;

package/dist/css/components/Pagination/css/__item/pagination__item_state_active.css

@@ -3,7 +3,10 @@
     border: solid 1px var(--paginator-item-active-border);
     &&_state {
       &_active {
-        background: var(--paginator-item-active-background, var(--color-accent-primary));
+        background: var(
+          --paginator-item-active-background,
+          var(--color-accent-primary)
+        );
         &:hover {
           background: var(--paginator-item-active-fill-hover);
         }

package/dist/css/components/Pagination/css/__item/pagination__item_state_disabled.css

@@ -13,7 +13,7 @@
         & svg {
           fill: var(--paginator-item-disabled-icon);
         }
-        display: var(--pagination-item-state-disabled-display, initial);
+        display: var(--pagination-item-state-disabled-display);
       }
     }
   }

package/dist/css/components/Radio/Radio.css

@@ -70,7 +70,7 @@
   &_shape {
     &_rounded {
       ^^&__item {
-        border-radius: var(--radio-item-shape-rounded, 4px);
+        border-radius: var(--radio-item-shape-rounded);
         position: relative;
         overflow: hidden;
       }
@@ -87,11 +87,12 @@
 .radio {
   &_checkmark {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
           &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-              disabled, hover {
+            @each $color in primary, secondary, tertiary, quaternary, quinary,
+              senary, accent, disabled, hover {
               &-$(color) {
                 & ^^^^^&__input {
                   &:checked {
@@ -111,3 +112,7 @@
     }
   }
 }
+:root {
+  --radio-state-border-hover: var(--color-surface-border-tertiary);
+  --radio-success-border: var(--color-surface-border-tertiary);
+}

package/dist/css/components/RangeSlider/RangeSlider.css

@@ -298,7 +298,7 @@
       top: 0;
       border-radius: 50%;
       &-1 {
-        margin:0 0 0 12px;
+        margin: 0 0 0 12px;
       }
       &-2 {
         margin: 0 0 0 -12px;
@@ -313,7 +313,8 @@
 .range-slider-rail-fill {
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary,
+        accent, disabled, hover {
         &-$(color) {
           & .rc-slider-rail {
             background: var(--color-$(type)-$(color));
@@ -327,7 +328,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover {
           &-$(color) {
             & .rc-slider-track {
               background: var(--color-$(type)-item-$(color));
@@ -342,7 +344,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover {
           &-$(color) {
             & .rc-slider-handle {
               background: var(--color-$(type)-item-$(color));
@@ -357,7 +360,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover {
           &-$(color) {
             &-hover {
               & .rc-slider-handle {
@@ -376,7 +380,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover {
           &-$(color) {
             & .rc-slider-handle-dragging {
               background: var(--color-$(type)-item-$(color));
@@ -391,7 +396,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover {
           &-$(color) {
             &-hover {
               & .rc-slider-handle-dragging {
@@ -411,7 +417,7 @@
   &_set {
     &_inputs {
       ^^&__after {
-        margin:  8px 0 16px 0;
+        margin: 8px 0 16px 0;
       }
     }
   }

package/dist/css/components/ScrollToView/ScrollToView.css

@@ -1,8 +1,8 @@
 .scroll-to-view {
   &_text-color {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary,
-        quinary, senary, surface, success, error, info, warning {
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+        senary, surface, success, error, info, warning {
         &_$(type) {
           &-text {
             @each $color in primary, secondary, tertiary, quaternary, quinary,

package/dist/css/components/Search/Search.css

@@ -84,14 +84,14 @@
 .search-input {
   &_shape {
     &_rounded {
-      border-radius: var(--search-input-shape-rounded, 6px);
+      border-radius: var(--search-input-shape-rounded);
       position: relative;
     }
   }
 }
 .search-input {
   &_size {
-    @each $size in compact, normal, s, l {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);
@@ -114,18 +114,26 @@
   }
 }
 :root {
-  --search-input-normal-padding: 8px;
-  --search-input-normal-gap: 8px;
-  --search-input-normal-line-height: 24px;
+  --search-input-xxl-padding: 8px 7px;
+  --search-input-xxl-gap: 6px;
 
-  --search-input-compact-padding: 8px;
-  --search-input-compact-gap: 4px;
+  --search-input-xl-padding: 8px 7px;
+  --search-input-xl-gap: 6px;
 
-  --search-input-l-padding: 8px 7px;
+  --search-input-l-padding: 2px 7px;
   --search-input-l-gap: 6px;
 
+  --search-input-m-padding: 2px 7px;
+  --search-input-m-gap: 6px;
+
   --search-input-s-padding: 2px 7px;
   --search-input-s-gap: 6px;
 
+  --search-input-xs-padding: 2px 7px;
+  --search-input-xs-gap: 6px;
+
+  --search-input-xxs-padding: 2px 7px;
+  --search-input-xxs-gap: 6px;
+
   --search-shape-rounded: 8px;
 }

package/dist/css/components/Search/css/search-input/search-input_shape.css

@@ -1,7 +1,7 @@
 .search-input {
   &_shape {
     &_rounded {
-      border-radius: var(--search-input-shape-rounded, 6px);
+      border-radius: var(--search-input-shape-rounded);
       position: relative;
     }
   }

package/dist/css/components/Search/css/search-input/search-input_size.css

@@ -1,6 +1,6 @@
 .search-input {
   &_size {
-    @each $size in compact, normal, s, l {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);

package/dist/css/components/Segmented/Segmented.css

@@ -9,14 +9,13 @@
       ^^&__indicator {
         width: var(--segmented-active-width);
         height: 100%;
-        padding: 8px 0;
         border-radius: 8px;
         position: absolute;
         content: '';
         display: block;
         box-shadow:
-          0 3px 8px rgba(0, 0, 0, 0.12),
-          0 3px 1px rgba(0, 0, 0, 0.04);
+          0 3px 8px rgb(0, 0, 0, 0.12),
+          0 3px 1px rgb(0, 0, 0, 0.04);
         left: var(--segmented-active-x-pos);
         top: 0;
         z-index: 1;
@@ -30,7 +29,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        /* &::after {
+        &::after {
           width: 1px;
           height: 100%;
           background: var(--color-surface-border-tertiary);
@@ -43,7 +42,7 @@
           &::after {
             display: none;
           }
-        } */
+        }
         &_state_active {
           & label {
             color: #fff;
@@ -79,7 +78,7 @@
 .segmented {
   &_shape {
     &_rounded {
-      border-radius: var(--segmented-shape-rounded, 8px);
+      border-radius: var(--segmented-shape-rounded);
     }
     &_circular {
       border-radius: 50%;
@@ -88,7 +87,7 @@
 }
 .segmented {
   &_size {
-    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl {
+    @each $size in normal, compact, xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__item {
           &-label {
@@ -119,5 +118,9 @@
   --segmented-item-size-normal-padding: 12px 24px;
   --segmented-item-size-compact-padding: 6px 16px;
 
+  --segmented-item-size-l-padding: 4px 16px;
+  --segmented-item-size-m-padding: 4px 16px;
   --segmented-item-size-s-padding: 4px 16px;
+  --segmented-item-size-xs-padding: 4px 16px;
+  --segmented-item-size-xxs-padding: 4px 16px;
 }

package/dist/css/components/Select/Select.css

@@ -130,7 +130,7 @@
   &__control {
     &_shape {
       &_rounded {
-        border-radius: var(--select-control-shape-rounded, 6px);
+        border-radius: var(--select-control-shape-rounded);
       }
       &_circular {
         border-radius: 50%;
@@ -170,7 +170,7 @@
 .select {
   &__input-container {
     flex: 1;
-    @each $sizeText in xxs, xs, s, m, l, xl, xxl {
+    @each $sizeText in xxl, xl, l, m, s, xs, xxs {
       &.text_size_$(sizeText) {
         & input {
           @mixin text-$(sizeText);
@@ -180,8 +180,8 @@
     @each $type in accent, primary, secondary, tertiary, surface, success, error {
       &.text-color_$(type) {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-            disabled, hover {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
             &-$(color) {
               & input {
                 color: var(--color-$(type)-text-$(color));
@@ -206,9 +206,9 @@
     &-list {
       &-item {
         &_size {
-          @each $size in xs, s, m, l, xl, xxl {
+          @each $size in xxl, xl, l, m, s, xs, xxs {
             &_$(size) {
-              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding);
             }
           }
         }
@@ -222,8 +222,8 @@
     width: 100%;
     background: var(--color-surface-primary);
     padding: 12px 0;
-    margin: var(--select-menu-margin, 0);
-    border-radius: var(--select-menu-border-radius, 0);
+    margin: var(--select-menu-margin);
+    border-radius: var(--select-menu-border-radius);
     border-top: none;
     position: absolute;
     left: 0;
@@ -280,8 +280,8 @@
 
 .select__multi-value {
   &-wrapper {
-    padding: var(--select-multi-value-padding, 4px 6px);
-    border-radius: var(--select-multi-value-border-radius, 6px);
+    padding: var(--select-multi-value-padding);
+    border-radius: var(--select-multi-value-border-radius);
     ^&__label {
       display: flex;
     }

package/dist/css/components/Select/css/__control/select__control_shape.css

@@ -2,7 +2,7 @@
   &__control {
     &_shape {
       &_rounded {
-        border-radius: var(--select-control-shape-rounded, 6px);
+        border-radius: var(--select-control-shape-rounded);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Select/css/__input-container/select__input-container.css

@@ -1,7 +1,7 @@
 .select {
   &__input-container {
     flex: 1;
-    @each $sizeText in xxs, xs, s, m, l, xl, xxl {
+    @each $sizeText in xxl, xl, l, m, s, xs, xxs {
       &.text_size_$(sizeText) {
         & input {
           @mixin text-$(sizeText);
@@ -11,8 +11,8 @@
     @each $type in accent, primary, secondary, tertiary, surface, success, error {
       &.text-color_$(type) {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-            disabled, hover {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
             &-$(color) {
               & input {
                 color: var(--color-$(type)-text-$(color));

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -3,9 +3,9 @@
     &-list {
       &-item {
         &_size {
-          @each $size in xs, s, m, l, xl, xxl {
+          @each $size in xxl, xl, l, m, s, xs, xxs {
             &_$(size) {
-              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding);
             }
           }
         }

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -3,8 +3,8 @@
     width: 100%;
     background: var(--color-surface-primary);
     padding: 12px 0;
-    margin: var(--select-menu-margin, 0);
-    border-radius: var(--select-menu-border-radius, 0);
+    margin: var(--select-menu-margin);
+    border-radius: var(--select-menu-border-radius);
     border-top: none;
     position: absolute;
     left: 0;

package/dist/css/components/Select/css/__multi-value/select__multi-value.css

@@ -1,7 +1,7 @@
 .select__multi-value {
   &-wrapper {
-    padding: var(--select-multi-value-padding, 4px 6px);
-    border-radius: var(--select-multi-value-border-radius, 6px);
+    padding: var(--select-multi-value-padding);
+    border-radius: var(--select-multi-value-border-radius);
     ^&__label {
       display: flex;
     }

package/dist/css/components/Switch/Switch.css

@@ -56,7 +56,7 @@
 }
 .switch {
   &&_size {
-    @each $size in normal, compact, s, m {
+    @each $size in xxl, xl, l, m, s, xs, xxs, normal, compact, s, m {
       &_$(size) {
         min-width: var(--switch-size-$(size)-width);
         min-height: var(--switch-size-$(size)-height);
@@ -66,3 +66,21 @@
     }
   }
 }
+:root {
+  --switch-size-normal-width: 52px;
+  --switch-size-normal-height: 32px;
+
+  --switch-size-compact-width: 40px;
+  --switch-size-compact-height: 24px;
+
+  --switch-size-xl-width: 40px;
+  --switch-size-xl-height: 24px;
+
+  --switch-size-l-width: 40px;
+  --switch-size-l-height: 24px;
+
+  --switch-size-m-width: 40px;
+  --switch-size-m-height: 24px;
+  --switch-size-s-width: 40px;
+  --switch-size-s-height: 24px;
+}

package/dist/css/components/Tab/Tab.css

@@ -47,7 +47,7 @@ div.tab-reset {
 .tab {
   &_shape {
     &_rounded {
-      border-radius: var(--tab-shape-rounded, 12px);
+      border-radius: var(--tab-shape-rounded);
     }
     &_circular {
       border-radius: 50%;
@@ -56,7 +56,7 @@ div.tab-reset {
 }
 .tab {
   &_size {
-    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl {
+    @each $size in normal, compact, xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__wrapper {
           display: flex;

package/dist/css/components/Text/Text.css

@@ -26,7 +26,7 @@
 }
 .text {
   &_size {
-    @each $sizeText in xxs, xs, s, m, l, xl, xxl {
+    @each $sizeText in xxl, xl, l, m, s, xs, xxs {
       &_$(sizeText) {
         padding: 0;
         margin: 0;

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

@@ -18,7 +18,7 @@
 .textarea {
   &_shape {
     &_rounded {
-      border-radius: var(--textarea-shape-rounded, 4px);
+      border-radius: var(--textarea-shape-rounded);
       position: relative;
     }
     &_underline {
@@ -31,7 +31,7 @@
 }
 .textarea {
   &&_size {
-    @each $sizeValue in xs, s, m, l, xl, xxl {
+    @each $sizeValue in xxl, xl, l, m, s, xs, xxs {
       &_$(sizeValue) {
         padding: var(--textarea-size-$(sizeValue)-padding);
       }

package/dist/css/components/Tile/Tile.css

@@ -1,19 +1,19 @@
 .tile {
   &__wrapper {
     position: relative;
-    flex: var(--tile-wrapper-flex, auto);
+    flex: var(--tile-wrapper-flex);
     & > .group:first-of-type {
-      flex: var(--tile-wrapper-group-flex, auto);
+      flex: var(--tile-wrapper-group-flex);
     }
   }
   &__title {
-    margin-right: var(--tile-title-margin-right, initial);
+    margin-right: var(--tile-title-margin-right);
   }
 }
 .tile {
   &_shape {
     &_rounded {
-      border-radius: var(--tile-shape-rounded, 12px);
+      border-radius: var(--tile-shape-rounded);
     }
     &_circular {
       border-radius: 50%;
@@ -22,10 +22,10 @@
 }
 .tile {
   &_size {
-    @each $size in normal, compact {
+    @each $size in xxl, xl, l, m, s, xs, xxs, normal, compact {
       &_$(size) {
-        padding: var(--tile-size-$(size)-padding);
         min-width: var(--tile-size-$(size)-min-width);
+        padding: var(--tile-size-$(size)-padding);
         & ^^&__wrapper {
           display: flex;
           flex-flow: column;
@@ -38,10 +38,19 @@
 .tile {
   &_type {
     &_icon {
-      padding: var(--tile-type-icon-padding, 16px);
+      padding: var(--tile-type-icon-padding);
       ^^&__icon {
         margin: 0 0 16px 0;
       }
     }
   }
 }
+:root {
+  --tile-size-normal-padding: 24px;
+  --tile-size-normal-gap: 24px;
+  --tile-size-normal-min-width: 320px;
+
+  --tile-wrapper-flex: 1 1;
+  --tile-wrapper-group-flex: 1;
+  --tile-title-margin-right: 40px;
+}

package/dist/css/components/Tooltip/Tooltip.css

@@ -47,7 +47,7 @@
 .tooltip {
   &_shape {
     &_rounded {
-      border-radius: var(--tooltip-shape-rounded-default, 12px);
+      border-radius: var(--tooltip-shape-rounded-default);
     }
   }
 }
@@ -62,7 +62,7 @@
       content: '';
       display: block;
       z-index: 0;
-      background-color: var(--tooltip-arrow-color, #fff);
+      background-color: var(--tooltip-arrow-color);
     }
     ^&__inner {
       position: relative;
@@ -151,3 +151,17 @@
     opacity: 100%;
   }
 }
+
+:root {
+  --tooltip-size-m-padding: 0;
+  --tooltip-size-s-padding: 0;
+
+  --tooltip-size-m-gap: 0;
+  --tooltip-size-s-gap: 0;
+
+  --tooltip-arrow-width: 14px;
+  --tooltip-arrow-height: 14px;
+  --tooltip-arrow-radius: 2px;
+
+  --tooltip-arrow-color: var(--color-surface-primary);
+}

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1,10 +1,13 @@
-import { b as __spreadArray } from '../../tslib.es6-5FtW-kfi.js';
+import { a as __spreadArray } from '../../tslib.es6-Bwu1Cn-t.js';
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
 import upperFirst from 'lodash/upperFirst';
+import '../../context/Notifications.js';
 import { useUserDeviceContext } from '../../context/UIContext.js';
 import 'react/jsx-runtime';
+import 'uuid';
+import '@itcase/common';
 import '../useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../../utils/setViewportProperty.js';