@itcase/ui 1.8.1 → 1.8.3

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

@@ -1,37 +1,26 @@
 .fill {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, disabled, gradient {
-      &_$(type) {
-        &-item {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               background: var(--color-$(type)-item-$(color));
-              @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-                75, 80, 85, 90, 95 {
-                &$(alpha) {
-                  background: var(--color-$(type)-item-$(color)-$(alpha));
-                }
-              }
             }
           }
-        }
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, active {
           &-$(color) {
-            background: var(--color-$(type)-$(color));
+            background: var(--color-$(type)-fill-$(color));
           }
-        }
-      }
-    }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-primary {
-          &-active {
-            background: var(--color-$(type)-primary-active);
+
+          /*
+          &-primary {
+            &-active {
+              background: var(--color-$(type)-fill--primary-active);
+            }
           }
+          */
         }
       }
     }

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

@@ -1,81 +1,77 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-        senary, surface, error, success, warning, info, danger, gradient {
-        &_$(type) {
-          &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary,
-              senary, accent, disabled, hover {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover,
+        inverse {
+        @each $color in primary, secondary, tertiary, quaternary, accent,
+          disabled, hover, inverse {
+          /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+          &_$(type) {
+            &-item {
               &-$(color) {
                 &:hover {
                   background: var(--color-$(type)-item-$(color));
                 }
-                @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
-                  65, 75, 80, 85, 90, 95 {
-                  &$(alpha) {
+
+                /* &$(alpha) {
                     &:hover {
                       background: var(--color-$(type)-item-$(color)-$(alpha));
                     }
-                  }
-                }
+                  } */
                 &-hover {
                   &:hover {
                     background: var(--color-$(type)-item-$(color)-hover);
                   }
-                  @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
-                    65, 75, 80, 85, 90, 95 {
-                    &$(alpha) {
+
+                  /* &$(alpha) {
                       &:hover {
                         background: var(
                           --color-$(type)-item-$(color)-$(alpha)-hover
                         );
                       }
-                    }
-                  }
+                    } */
                   &-active {
                     &:hover {
                       background: var(
                         --color-$(type)-item-$(color)-active-hover
                       );
                     }
-                    @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55,
-                      60, 65, 75, 80, 85, 90, 95 {
-                      &$(alpha) {
+
+                    /* &$(alpha) {
                         &:hover {
                           background: var(
                             --color-$(type)-item-$(color)-$(alpha)-active-hover
                           );
                         }
-                      }
-                    }
+                      } */
                   }
                 }
               }
             }
-          }
-          @each $color in primary, secondary, tertiary, quaternary {
             &-$(color) {
               &:hover {
-                background: var(--color-$(type)-$(color));
+                background: var(--color-$(type)-fill-$(color));
               }
               &-hover {
                 &:hover {
-                  background: var(--color-$(type)-$(color)-hover);
+                  background: var(--color-$(type)-fill-$(color)-hover);
                 }
                 &-active {
                   &:hover {
-                    background: var(--color-$(type)-$(color)-active-hover);
+                    background: var(--color-$(type)-fill-$(color)-active-hover);
                   }
                 }
               }
               &-active {
                 &:hover {
-                  background: var(--color-$(type)-$(color)-active);
+                  background: var(--color-$(type)-fill-$(color)-active);
                 }
               }
             }
           }
+
+          /* } */
         }
       }
     }

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

@@ -1,69 +1,63 @@
 .fill {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-item {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+        &_$(type) {
+          &-item {
             &-$(color) {
               &:hover {
                 background: var(--color-$(type)-item-$(color));
               }
-              @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-                75, 80, 85, 90, 95 {
-                &$(alpha) {
+
+              /* &$(alpha) {
                   &:hover {
                     background: var(--color-$(type)-item-$(color)-$(alpha));
                   }
-                }
-              }
+                } */
               &-hover {
                 &:hover {
                   background: var(--color-$(type)-item-$(color)-hover);
                 }
-                @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
-                  65, 75, 80, 85, 90, 95 {
-                  &$(alpha) {
+
+                /* &$(alpha) {
                     &:hover {
                       background: var(
                         --color-$(type)-item-$(color)-$(alpha)-hover
                       );
                     }
-                  }
-                }
+                  } */
               }
             }
           }
-        }
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover {
           &-$(color) {
             &:hover {
-              background: var(--color-$(type)-$(color));
+              background: var(--color-$(type)-fill-$(color));
             }
             &-hover {
               &:hover {
-                background: var(--color-$(type)-$(color)-hover);
+                background: var(--color-$(type)-fill-$(color)-hover);
               }
             }
           }
-        }
-      }
-    }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-primary {
-          &:hover {
-            background: var(--color-$(type)-primary);
-          }
-          &-hover {
+
+          /*
+          &-primary {
             &:hover {
-              background: var(--color-$(type)-primary-hover);
+              background: var(--color-$(type)-fill-primary);
+            }
+            &-hover {
+              &:hover {
+                background: var(--color-$(type)-fill-primary-hover);
+              }
             }
           }
+          */
         }
+
+        /* } */
       }
     }
   }

package/dist/css/styles/opacity/opacity.css

@@ -1,7 +1,8 @@
 .opacity {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100 {
+  @each $val in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
+    90, 95 {
     &_$(val) {
-      opacity: $(val)%;
+      opacity: $(val) %;
     }
   }
 }

package/dist/css/styles/placeholder-text-color/placeholder-text-color.css

@@ -1,8 +1,10 @@
 .placeholder-text-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-text {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-text {
           &-$(color) {
             &::placeholder {
               color: var(--color-$(type)-text-$(color));

package/dist/css/styles/svg-color/svg_fill.css

@@ -1,11 +1,11 @@
 .svg {
   &_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, inverse {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               & svg {
                 stroke: none;
@@ -17,9 +17,6 @@
               }
             }
           }
-        }
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover, inverse {
           &-$(color) {
             & svg {
               stroke: none;

package/dist/css/styles/svg-color/svg_fill_hover.css

@@ -1,9 +1,11 @@
 .svg {
   &_fill_hover {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &_$(type) {
-        &-item {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               &:hover {
                 & svg {

package/dist/css/styles/svg-color/svg_path_fill.css

@@ -1,10 +1,11 @@
 .svg {
   &_path_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, inverse {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               & path {
                 fill: var(--color-$(type)-item-$(color));

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

@@ -1,11 +1,11 @@
 .text {
   &&-color {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, success, error, info, warning, danger {
-      &_$(type) {
-        &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover, inverse {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-text {
             &-$(color) {
               color: var(--color-$(type)-text-$(color));
             }

package/dist/css/styles/text-color/text-color_active.css

@@ -1,12 +1,13 @@
 .text {
   &&-color {
     &_active {
-      @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, senary, accent,
-              disabled, hover, inverse {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover,
+        inverse {
+        @each $color in primary, secondary, tertiary, quaternary, accent,
+          disabled, hover, inverse {
+          &_$(type) {
+            &-text {
               &-$(color) {
                 color: var(--color-$(type)-text-$(color));
               }

package/dist/css/styles/text-color/text-color_hover.css

@@ -1,12 +1,13 @@
 .text {
   &&-color {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
-        success, error, info, warning, inverse {
-        &_$(type) {
-          &-text {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-              disabled, hover, inverse {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover,
+        inverse {
+        @each $color in primary, secondary, tertiary, quaternary, accent,
+          disabled, hover, inverse {
+          &_$(type) {
+            &-text {
               &-$(color) {
                 &:hover {
                   color: var(--color-$(type)-text-$(color));

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1,4 +1,4 @@
-import { a as __spreadArray } from '../../tslib.es6-Bwu1Cn-t.js';
+import { a as __spreadArray } from '../../tslib.es6_es_Bwu1Cn-t.js';
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';

package/dist/hooks/useDevicePropsGenerator.js

@@ -1,5 +1,5 @@
 export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/hooks/useDeviceTargetClass.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
 import { useUserDeviceContext } from '../context/UIContext.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import './useMediaQueries/useMediaQueries.js';
 import 'react-responsive';

package/dist/hooks/useStyles/useStyles.js

@@ -5,7 +5,7 @@ import upperFirst from 'lodash/upperFirst';
 import '../../context/Notifications.js';
 import { useUserDeviceContext } from '../../context/UIContext.js';
 import styleAttributes from './styleAttributes.js';
-import '../../tslib.es6-Bwu1Cn-t.js';
+import '../../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'uuid';
 import '@itcase/common';

package/dist/hooks/useStyles.js

@@ -4,7 +4,7 @@ import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'uuid';
 import '@itcase/common';

package/dist/stories/Breadcrumbs.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as BreadcrumbsStories from '../stories/Breadcrumbs.stories'
+
+<Meta of={BreadcrumbsStories} />
+
+# Breadcrumbs
+`Breadcrumbs` -  это навигационные элементы на странице сайта,
+которые показывают текущее местоположение пользователя внутри структуры сайта
+
+## Default
+<Canvas of={BreadcrumbsStories.Default} />
+
+## IconAfter
+<Canvas of={BreadcrumbsStories.IconAfter} />

package/dist/stories/BreadcrumbsItem.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as BreadcrumbsItemStories from '../stories/BreadcrubsItem.stories'
+
+<Meta of={BreadcrumbsItemStories} />
+
+# BreadcrumbsItem
+`BreadcrumbsItem` -  это навигационный элемент на странице сайта,
+который показывает текущее местоположение пользователя внутри структуры сайта
+
+## Demo
+
+<Canvas of={BreadcrumbsItemStories.Demo} />
+
+## Icon After
+
+<Canvas of={BreadcrumbsItemStories.IconAfter} />

package/dist/stories/Image.mdx

@@ -8,8 +8,8 @@ import * as ImageStories from '../stories/Image.stories.tsx'
 
 ## Rectangular
 
-<Canvas sourceState="shown" of={ImageStories.Rectangular} />
+<Canvas sourceState="shown" of={ImageStories.Default} />
 
 ## Circular
 
-<Canvas sourceState="shown" of={ImageStories.Circular} />
+<Canvas sourceState="shown" of={ImageStories.Skeleton} />

package/dist/stories/ListItem.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Story } from '@storybook/blocks'
+
+import * as ListItemStories from '../stories/ListItem.stories'
+
+<Meta of={ListItemStories} />
+
+# ListItem
+`ListItem` - это элемент списка `List`
+
+## Demo
+<Canvas of={ListItemStories.Demo} />

package/dist/stories/Overview.mdx

@@ -1,11 +1,21 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as TooltipStories from '../stories/Tooltip.stories.tsx'
+import * as VideoStories from  '../stories/Video.stories'
 
-<Meta title="Atoms / Tooltip / Overview" />
+<Meta title="Components / Video / Overview" />
 
-# Tooltip
+# Video
 
-`Tooltip` - это небольшой фрагмент контекстной информации, который появляется, когда пользователи наводят курсор мыши на элемент пользовательского интерфейса.
+`Video` - используется для встраивания видео в разных форматах в веб-приложения
 
-<Story of={TooltipStories.surfacePrimary} />
+## Poster
+<Story of={VideoStories.Poster}/>
+
+## Mp4
+<Story of={VideoStories.Mp4}/>
+
+## Webm
+<Story of={VideoStories.Webm}/>
+
+## Ogv
+<Story of={VideoStories.Ogv}/>

package/dist/stories/Playground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as TooltipStories from '../stories/Tooltip.stories.tsx'
+import * as VideoStories from '../stories/Video.stories.tsx'
 
-<Meta title="Atoms / Tooltip / Playground" />
+<Meta title="Components / Video / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
-<Controls of={TooltipStories.surfacePrimary} />
+<Canvas sourceState="shown" of={VideoStories.Mp4} />
+<Controls of={VideoStories.Mp4} />

package/dist/stories/Playgroynd.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DadataHintFieldStories from '../stories/DadataHintField.stories'
+
+<Meta title="Components / DadataHintField / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DadataHintFieldStories.Demo} />
+<Controls of={DadataHintFieldStories.Demo} />
+

package/dist/stories/Plsyground.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as BreadcrumbsStories from '../stories/Breadcrumbs.stories'
+import * as BreadcrumbsItemStories from '../stories/BreadcrubsItem.stories'
+
+<Meta title="Atoms / Breadcrumbs / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={BreadcrumbsStories.Default} />
+<Controls of={BreadcrumbsStories.Default} />
+
+<Canvas sourceState="shown" of={BreadcrumbsItemStories.Demo} />
+<Controls of={BreadcrumbsItemStories.IconAfter} />

package/dist/types/components/Badge/appearance/badgeAccent.d.ts

@@ -2,38 +2,18 @@ declare const badgeAppearanceAccent: {
     accent: {
         dotFill: string;
         iconFill: string;
-        fill: string;
-        fillHover: string;
-        borderColor: string;
-        textColor: string;
     };
     accentPrimary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
     accentQuaternary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
     accentSecondary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
     accentTertiary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
 };
 export { badgeAppearanceAccent };