@itcase/ui 1.8.27 → 1.8.29

package/dist/components/Video.js

@@ -16,16 +16,9 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
 
 function Video(props) {
-    var id = props.id, className = props.className, type = props.type, position = props.position, mp4 = props.mp4, ogv = props.ogv, poster = props.poster, webm = props.webm, children = props.children;
-    // @ts-expect-error
+    var id = props.id, className = props.className, position = props.position, mp4 = props.mp4, ogv = props.ogv, poster = props.poster, webm = props.webm, children = props.children;
     var videoStyles = useStyles(props).styles;
-    return (jsxs("div", { id: id, className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), style: videoStyles, children: [jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && (jsx("source", { type: "video/webm", src: webm, 
-                        // @ts-expect-error
-                        codecs: "vp8, vorbis" })), ogv && (jsx("source", { type: "video/ogg", src: ogv, 
-                        // @ts-expect-error
-                        codecs: "theora, vorbis" })), mp4 && (jsx("source", { type: "video/mp4", src: mp4, 
-                        // @ts-expect-error
-                        codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
+    return (jsxs("div", { id: id, className: clsx('video', className, poster && "video_poster", position && "video_position_".concat(position)), style: videoStyles, children: [jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && jsx("source", { type: "video/webm", src: webm, codecs: "vp8, vorbis" }), ogv && jsx("source", { type: "video/ogg", src: ogv, codecs: "theora, vorbis" }), mp4 && (jsx("source", { type: "video/mp4", src: mp4, codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
 }
 
 export { Video };

package/dist/context/Notifications.js

@@ -7,9 +7,9 @@ import { axiosInstanceITCase } from '@itcase/common';
 
 var STATUSES = {
     error: 'error',
+    warning: 'warning',
     info: 'info',
     success: 'success',
-    warning: 'warning',
 };
 var NotificationsContext = createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -125,6 +125,7 @@ function createNotification(notification, onClose) {
     var title = '';
     var text = '';
     var status = STATUSES.warning;
+    // let appearance = STATUSES.appearance
     var closeByTime = 4500;
     var textColor = '';
     if (typeof notification === 'string') {

package/dist/css/components/Accordion/Accordion.css

@@ -1,10 +1,5 @@
 .accordion {
-  border-radius: var(--accordion-border-radius);
-  &__wrapper {
-    width: 100%;
-    max-width: var(--max);
-    margin: 0 auto;
-  }
+  width: 100%;
 }
 .accordion {
   &_direction {
@@ -48,12 +43,16 @@
   }
 }
 .accordion-item {
+  width: 100%;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  gap: 14px;
+  &__header {
+    width: 100%;
+    display: flex;
+  }
   &__title {
-    flex: 1;
+    position: relative;
   }
   &__icon {
     align-self: flex-start;
@@ -75,7 +74,15 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        padding: var(--accordion-item-$(size)-padding);
+        ^^&__header {
+          padding: var(--accordion-item-header-$(size)-padding);
+          gap: var(--accordion-item-header-$(size)-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-$(size)-padding);
+          }
+        }
       }
     }
   }
@@ -88,9 +95,27 @@
   }
 }
 :root {
-  --accordion-item-shape-rounded: 12px;
-  --accordion-item-xs-padding: 10px 8px;
-  --accordion-item-l-padding: 14px 12px;
-  --accordion-border-radius: 0;
-  --accordion-shape-rounded: 0;
+  --accordion-item-header-xxl-padding: 14px 12px;
+  --accordion-item-header-xl-padding: 14px 12px;
+  --accordion-item-header-l-padding: 14px 12px;
+  --accordion-item-header-m-padding: 12px;
+  --accordion-item-header-s-padding: 12px;
+  --accordion-item-header-xs-padding: 10px 8px;
+  --accordion-item-header-xxs-padding: 12px;
+
+  --accordion-item-header-xxl-gap: 8px;
+  --accordion-item-header-xl-gap: 8px;
+  --accordion-item-header-l-gap: 8px;
+  --accordion-item-header-m-gap: 8px;
+  --accordion-item-header-s-gap: 8px;
+  --accordion-item-header-xs-gap: 8px;
+  --accordion-item-header-xxs-gap: 8px;
+
+  --accordion-item-content-xxl-padding: 14px 12px;
+  --accordion-item-content-xl-padding: 14px 12px;
+  --accordion-item-content-l-padding: 14px 12px;
+  --accordion-item-content-m-padding: 12px;
+  --accordion-item-content-s-padding: 12px;
+  --accordion-item-content-xs-padding: 10px 8px;
+  --accordion-item-content-xxs-padding: 12px;
 }

package/dist/css/components/Avatar/Avatar.css

@@ -13,6 +13,9 @@
       right: var(--avatar-icon-right);
       bottom: var(--avatar-icon-bottom);
     }
+    ^&__badge {
+      position: absolute;
+    }
   }
   div&__dropdown {
     margin: 10px 0 0 0;
@@ -27,9 +30,9 @@
     ^&__wrapper {
       background-image: linear-gradient(
         90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
+        var(--color-surface-fill-secondary),
+        var(--color-surface-fill-tertiary),
+        var(--color-surface-fill-secondary)
       );
       background-size: 200%;
       animation: avatarSkeleton 3s infinite linear;
@@ -72,7 +75,7 @@
 /* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
-    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144,
+    @each $size in 16, 20, 24, 32, 40, 48, 56, 96, 144, 240,
       240 {
       &_$(size) {
         ^^&__wrapper {
@@ -81,6 +84,10 @@
           display: flex;
           justify-content: center;
           align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-$(size)-position-right);
+            bottom: var(--avatar-badge-$(size)-position-bottom);
+          }
           ^^^&__image {
             width: $(size)px;
             height: $(size)px;
@@ -94,20 +101,41 @@
     }
   }
 }
-.avatar {
-  &_status {
-    position: relative;
-    & .dot {
-      position: absolute;
-      right: var(--avatar-dot-position-right);
-      bottom: var(--avatar-dot-position-bottom);
-    }
-  }
+.avatar_status {
+  position: relative;
 }
 :root {
   --avatar-icon-right: -4px;
   --avatar-icon-bottom: -3px;
-  --avatar-shape-rounded: 0;
-  --avatar-dot-position-right: 0;
-  --avatar-dot-position-bottom: 0;
+  
+  --avatar-badge-16-position-right: 0;
+  --avatar-badge-16-position-bottom: 0;
+
+  --avatar-badge-20-position-right: 0;
+  --avatar-badge-20-position-bottom: 0;
+
+  --avatar-badge-24-position-right: 0;
+  --avatar-badge-24-position-bottom: 0;
+
+  --avatar-badge-32-position-right: 0;
+  --avatar-badge-32-position-bottom: 0;
+
+  --avatar-badge-40-position-right: 0;
+  --avatar-badge-40-position-bottom: 0;
+
+  --avatar-badge-48-position-right: 0;
+  --avatar-badge-48-position-bottom: 0;
+
+  --avatar-badge-56-position-right: 0;
+  --avatar-badge-56-position-bottom: 0;
+
+  --avatar-badge-96-position-right: 0;
+  --avatar-badge-96-position-bottom: 0;
+
+  --avatar-badge-144-position-right: 0;
+  --avatar-badge-144-position-bottom: 0;
+
+  --avatar-badge-240-position-right: 0;
+  --avatar-badge-240-position-bottom: 0;
+
 }

package/dist/css/components/AvatarStack/AvatarStack.css

@@ -1,11 +1,8 @@
 div.avatar {
   &-stack {
-    margin: 0 0 0 4px;
     display: flex;
     align-items: center;
     &__item {
-      margin: 0 -4px;
-      border-radius: 100px;
       position: relative;
       transition: all 0.3s ease;
       cursor: pointer;
@@ -14,6 +11,7 @@ div.avatar {
         transition: all 0.3s ease;
       }
       &-text {
+        border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -52,3 +50,40 @@ div.avatar {
     }
   }
 }
+div.avatar-stack {
+  &_size {
+    @each $size in 56, 40, 32, 24, 20, 16 {
+      &_$(size) {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-$(size)-gap);
+          }
+        }
+      }
+    }
+  }
+}
+.avatar-stack {
+  &&-skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: avatarStackSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes avatarStackSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}

package/dist/css/components/Button/Button.css

@@ -137,6 +137,7 @@
 
   /* Size M */
   --button-m-gap: 0.5m;
+  --button-m-padding: 0.25m 0.5m;
   --button-m-min-width: 28px;
   --button-m-min-height: 28px;
 

package/dist/css/components/Cell/Cell.css

@@ -7,14 +7,11 @@
       flex-flow: row nowrap;
       justify-content: space-between;
       align-items: center;
-      gap: 8px;
       ^^&__title,
       ^^&__value {
         width: 100%;
       }
     }
-    ^&__icon {
-    }
     &-equal ^&__data {
       width: 50%;
     }
@@ -26,23 +23,33 @@
       &_vertical {
         display: flex;
         flex-direction: column;
-        gap: var(--cell-vertical-gap);
+        &-reverse {
+          display: flex;
+          flex-direction: column-reverse;
+        }
       }
       &_horizontal {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        gap: var(--cell-horizontal-gap);
+        &-reverse {
+          display: flex;
+          flex-direction: row-reverse;
+        }
       }
     }
   }
 }
 .cell {
   &_size {
-    @each $size in s, m, l, xl {
+    @each $size in xl, l, m, s {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--cell-size-$(size)-padding);
+          gap: var(--cell-size-$(size)-gap);
+          ^^^&__data {
+            gap: var(--cell-size-$(size)-data-gap);
+          }
         }
       }
     }
@@ -57,18 +64,6 @@
     }
   }
 }
-.cell {
-  &&_state {
-    &_active {
-    }
-  }
-}
-.cell {
-  &&_state {
-    &_disabled {
-    }
-  }
-}
 .cell {
   &_reset-gap {
     ^&__wrapper {
@@ -83,20 +78,6 @@
     }
   }
 }
-.cell {
-  &_reverse {
-    ^&__wrapper {
-      &_direction {
-        &_horizontal {
-          flex-direction: row-reverse;
-        }
-        &_vertical {
-          flex-direction: column-reverse;
-        }
-      }
-    }
-  }
-}
 .cell {
   &_skeleton {
     ^&__data {
@@ -105,9 +86,9 @@
         color: transparent;
         background-image: linear-gradient(
           90deg,
-          var(--color-surface-secondary),
-          var(--color-surface-tertiary),
-          var(--color-surface-secondary)
+          var(--color-surface-fill-secondary),
+          var(--color-surface-fill-tertiary),
+          var(--color-surface-fill-secondary)
         );
         background-size: 200%;
         border-radius: 6px;
@@ -125,10 +106,19 @@
   }
 }
 :root {
-  --cell-vertical-gap: 4px;
-  --cell-horizontal-gap: 8px;
-  --cell-border-radius: 0;
-  @each $size, $value in (s, m, l, xl), (6px, 6px, 6px, 6px) {
-    --cell-size-$(size)-padding: $value;
-  }
+  --cell-size-xl-padding: 4px 6px;
+  --cell-size-xl-gap: 4px;
+  --cell-size-xl-data-gap: 8px;
+
+  --cell-size-l-padding: 4px 6px;
+  --cell-size-l-gap: 4px;
+  --cell-size-l-data-gap: 8px;
+
+  --cell-size-m-padding: 4px 6px;
+  --cell-size-m-gap: 4px;
+  --cell-size-m-data-gap: 8px;
+
+  --cell-size-s-padding: 4px 6px;
+  --cell-size-s-gap: 4px;
+  --cell-size-s-data-gap: 8px;
 }

package/dist/css/components/Checkbox/Checkbox.css

@@ -2,14 +2,13 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  gap: var(--checkbox-row-gap) var(--checkbox-column-gap);
   &__item {
-    min-width: 16px;
-    min-height: 16px;
     font-size: 0;
     line-height: 0;
     position: relative;
     display: flex;
+    justify-content: center;
+    align-items: center;
     align-self: start;
     cursor: pointer;
     grid-row-start: span 3;
@@ -26,6 +25,17 @@
       z-index: 3;
       cursor: pointer;
       appearance: none;
+      &:checked {
+        & ~ ^^^&__state-checkmark {
+          border-width: inherit;
+          border-style: inherit;
+          display: block;
+          border-bottom-style: solid;
+          border-bottom-width: 2px;
+          border-right-style: solid;
+          border-right-width: 2px;
+        }
+      }
     }
     ^&__state {
       display: flex;
@@ -50,10 +60,17 @@
       top: 50%;
       z-index: 2;
       transform: translate(-50%, -50%) rotate(45deg);
-      border-bottom-style: solid;
-      border-bottom-width: 2px;
-      border-right-style: solid;
-      border-right-width: 2px;
+    }
+    ^&__state-indeterminate {
+      height: 2px;
+      margin: 0 6px;
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 50%;
+      right: 0;
+      z-index: 2;
+      transform: translate(0, -50%);
     }
   }
 }
@@ -64,9 +81,9 @@
     animation: checkboxSkeleton 3s infinite linear !important;
     background-image: linear-gradient(
       90deg,
-      var(--color-surface-secondary),
-      var(--color-surface-tertiary),
-      var(--color-surface-secondary)
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
     ) !important;
     & * {
       opacity: 0%;
@@ -81,6 +98,24 @@
     background-position: -200%;
   }
 }
+.checkbox {
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      padding: var(--checkbox-$(size)-padding);
+      gap: var(--checkbox-$(size)-gap);
+      ^&__item {
+        width: var(--checkbox-area-$(size)-width);
+        height: var(--checkbox-area-$(size)-height);
+        ^^&__state {
+          width: var(--checkbox-$(size)-width);
+          height: var(--checkbox-$(size)-height);
+          max-width: var(--checkbox-$(size)-width);
+          max-height: var(--checkbox-$(size)-height);
+        }
+      }
+    }
+  }
+}
 .checkbox {
   &_shape {
     &_rounded {
@@ -90,38 +125,28 @@
     }
   }
 }
-.checkbox {
-  &_checkmark {
-    &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success,
-        error {
-        &_$(type) {
-          &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary,
-              senary, accent, disabled, hover {
-              &-$(color) {
-                & ^^^^^&__input {
-                  &:checked {
-                    & ~ ^^^^^^^&__state {
-                      &-checkmark {
-                        border-color: var(--color-$(type)-item-$(color));
-                        display: block;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
 :root {
   --checkbox-column-gap: 12px;
   --checkbox-row-gap: 4px;
   --checkbox-success-border: var(--color-success-border-secondary);
   --checkbox-error-border: var(--color-error-border-secondary);
   --checkbox-focus-border: var(--color-surface-border-quaternary);
+
+  --checkbox-area-m-width: 24px;
+  --checkbox-area-m-height: 24px;
+  --checkbox-m-width: 16px;
+  --checkbox-m-height: 16px;
+  --checkbox-m-gap: 0 2px;
+
+  --checkbox-area-xs-width: 16px;
+  --checkbox-area-xs-height: 16px;
+  --checkbox-xs-width: 12px;
+  --checkbox-xs-height: 12px;
+  --checkbox-xs-gap: 0 2px;
+
+  --checkbox-area-xxs-width: 14px;
+  --checkbox-area-xxs-height: 14px;
+  --checkbox-xxs-width: 10px;
+  --checkbox-xxs-height: 10px;
+  --checkbox-xxs-gap: 0 2px;
 }

package/dist/css/components/Code/Code.css

@@ -38,6 +38,12 @@
   }
 }
 .code__input {
+  border: none;
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
   &_shape {
     &_rounded {
       border-radius: var(--code-input-shape-rounded);
@@ -47,12 +53,36 @@
     }
   }
 }
+.code__input {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: codeSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes codeSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
   --code-input-shape-rounded: 0;
-  @each $size, $width, $height, $padding, $gap in (l, m), (56px, 48px),
-    (56px, 48px), (8px, 8px) {
-    --code-input-size-$(size)-width: $width;
-    --code-input-size-$(size)-height: $height;
-    --code-size-$(size)-gap: $gap;
-  }
+  --code-input-size-l-width: 56px;
+  --code-input-size-l-height: 48px;
+  --code-input-size-l-gap: 8px;
+  --code-input-size-m-width: 48px;
+  --code-input-size-m-height: 40px;
+  --code-input-size-m-gap: 6px;
 }

package/dist/css/components/CookiesWarning/CookiesWarning.css

@@ -21,6 +21,9 @@
     background: var(--color-surface-fill-primary);
     padding: 32px;
     position: relative;
+    flex-direction: column;
+    display: flex;
+    gap: 16px;
     @media (--mobile) {
       min-width: auto;
     }

package/dist/css/components/Divider/Divider.css

@@ -50,6 +50,30 @@
     }
   }
 }
+.divider {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: dividerSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes dividerSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
   --divider-l-height: 3px;
   --divider-m-height: 2px;

package/dist/css/components/Drawer/Drawer.css

@@ -33,6 +33,17 @@
     opacity: 100% !important;
     backdrop-filter: var(--drawer-overlay-filter) !important;
   }
+  &__close {
+    justify-content: flex-end;
+    position: relative;
+    padding: 3m 3m 0 3m;
+    display: flex;
+  }
+  &__header {
+    display: flex;
+    flex-direction: column;
+    padding: 0 3m 3m 3m;
+  }
   &__wrapper {
     flex: 1;
   }