@itcase/ui 1.8.31 → 1.8.32

package/dist/css/components/HTMLContent/HTMLContent.css

@@ -2,43 +2,43 @@
   & h1 {
     width: 100%;
     color: var(--html-content-title-h1-color);
-    padding: var(--html-content-title-h1-padding, 0);
-    margin: var(--html-content-title-h1-margin, 0);
+    padding: var(--html-content-title-h1-padding);
+    margin: var(--html-content-title-h1-margin);
     @mixin h1;
   }
   & h2 {
     width: 100%;
     color: var(--html-content-title-h2-color);
-    padding: var(--html-content-title-h2-padding, 0);
-    margin: var(--html-content-title-h2-margin, 0);
+    padding: var(--html-content-title-h2-padding);
+    margin: var(--html-content-title-h2-margin);
     @mixin h2;
   }
   & h3 {
     width: 100%;
     color: var(--html-content-title-h3-color);
-    padding: var(--html-content-title-h3-padding, 0);
-    margin: var(--html-content-title-h3-margin, 0);
+    padding: var(--html-content-title-h3-padding);
+    margin: var(--html-content-title-h3-margin);
     @mixin h3;
   }
   & h4 {
     width: 100%;
     color: var(--html-content-title-h4-color);
-    padding: var(--html-content-title-h4-padding, 0);
-    margin: var(--html-content-title-h4-margin, 0);
+    padding: var(--html-content-title-h4-padding);
+    margin: var(--html-content-title-h4-margin);
     @mixin h4;
   }
   & h5 {
     width: 100%;
     color: var(--html-content-title-h5-color);
-    padding: var(--html-content-title-h5-padding, 0);
-    margin: var(--html-content-title-h5-margin, 0);
+    padding: var(--html-content-title-h5-padding);
+    margin: var(--html-content-title-h5-margin);
     @mixin h5;
   }
   & h6 {
     width: 100%;
     color: var(--html-content-title-h6-color);
-    padding: var(--html-content-title-h6-padding, 0);
-    margin: var(--html-content-title-h6-margin, 0);
+    padding: var(--html-content-title-h6-padding);
+    margin: var(--html-content-title-h6-margin);
     @mixin h6;
   }
 }
@@ -64,22 +64,47 @@
       }
     }
   }
+  & ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    & li {
+      padding: 0 0 16px 24px;
+    }
+    & > li {
+      gap: 32px;
+      padding: 0 0 16px 0;
+      margin: 0;
+      display: block;
+      @mixin p;
+    }
+  }
 }
 .html-content {
   & table {
-    margin: var(--html-content-table-margin, 0);
+    margin: var(--html-content-table-margin);
     @media (--mobile) {
-      margin: var(--html-content-table-margin-mobile, 0);
+      margin: var(--html-content-table-margin-mobile);
       display: flex;
     }
     & tr {
-      display: flex;
       flex-wrap: wrap;
+      @media (--mobile) {
+        display: flex;
+      }
+      & th {
+        padding: var(--html-content-table-th-padding);
+        @media (--mobile) {
+          padding: var(--html-content-table-th-padding-mobile);
+        }
+        @mixin p;
+      }
       & td {
-        padding: var(--html-content-table-td-padding, 0);
+        padding: var(--html-content-table-td-padding);
         @media (--mobile) {
-          padding: var(--html-content-table-td-padding-mobile, 0);
+          padding: var(--html-content-table-td-padding-mobile);
         }
+        @mixin p;
       }
     }
   }
@@ -87,13 +112,55 @@
 .html-content {
   & p {
     color: var(--html-content-p-color);
-    margin: var(--html-content-p-margin, 0);
+    margin: var(--html-content-p-margin);
     @mixin p;
   }
   & a {
     color: var(--html-content-link-color);
     text-decoration: none;
+    @mixin p;
   }
 }
 .html-content {
 }
+:root {
+  --html-content-p-color: 0;
+  --html-content-p-margin: 0;
+  --html-content-link-color: 0;
+
+  /* h1 */
+  --html-content-title-h1-color: 0;
+  --html-content-title-h1-padding: 0;
+  --html-content-title-h1-margin: 0;
+
+  /* h2 */
+  --html-content-title-h2-color: 0;
+  --html-content-title-h2-padding: 0;
+  --html-content-title-h2-margin: 0;
+
+  /* h3 */
+  --html-content-title-h3-color: 0;
+  --html-content-title-h3-padding: 0;
+  --html-content-title-h3-margin: 0;
+
+  /* h4 */
+  --html-content-title-h4-color: 0;
+  --html-content-title-h4-padding: 0;
+  --html-content-title-h4-margin: 0;
+
+  /* h5 */
+  --html-content-title-h5-color: 0;
+  --html-content-title-h5-padding: 0;
+  --html-content-title-h5-margin: 0;
+
+  /* h6 */
+  --html-content-title-h6-color: 0;
+  --html-content-title-h6-padding: 0;
+  --html-content-title-h6-margin: 0;
+
+  /* Table */
+  --html-content-table-margin: 0;
+  --html-content-table-margin-mobile: 0;
+  --html-content-table-td-padding: 0;
+  --html-content-table-td-padding-mobile: 0;
+}

package/dist/stories/CookiesWarningOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'
 
 import * as CookiesWarningStories from '../stories/CoockiesWarning.stories'
 
-<Meta title="Components / CookiesWarning / Overview" />
+<Meta title="Molecules / CookiesWarning / Overview" />
 
 # CookiesWarning
 

package/dist/stories/CookiesWarningPlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as CookiesWarningStories from '../stories/CoockiesWarning.stories'
 
-<Meta title="Components / CookiesWarning / Playground" />
+<Meta title="Molecules / CookiesWarning / Playground" />
 
 # Playground
 

package/dist/stories/DadataOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DadataStories from '../stories/Dadata.stories'
+
+<Meta title="Molecules / Dadata / Overview" />
+
+# Dadata
+
+`Dadata` - это текстовое поле для организаций(ru), которое выдает подсказки в выпадающем списке
+
+<Story of={DadataStories.Demo} />

package/dist/stories/DadataPlaygroynd.mdx

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

package/dist/stories/HTMLContentOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'
 
 import * as HTMLContentStories from '../stories/HTMLContent.stories'
 
-<Meta title="Components / HTMLContent / Overview" />
+<Meta title="Wrappers / HTMLContent / Overview" />
 
 # HTMLContent
 

package/dist/stories/HTMLContentPlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as HTMLContentStories from '../stories/HTMLContent.stories'
 
-<Meta title="Components / HTMLContent / Playground" />
+<Meta title="Wrappers / HTMLContent / Playground" />
 
 # Playground
 

package/dist/stories/HeroTitleOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story, Canvas } from '@storybook/blocks'
 
 import * as HeroTitleSizeStories from '../stories/HeroTitleSize.stories'
 
-<Meta title="Atoms / Hero Title / Overview" />
+<Meta title="Typography / Hero Title / Overview" />
 
 # Title
 

package/dist/stories/HeroTitlePlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as HeroTitleSizeStories from '../stories/HeroTitleSize.stories'
 
-<Meta title="Atoms / Hero Title / Playground" />
+<Meta title="Typography / Hero Title / Playground" />
 
 # Playground
 

package/dist/stories/LinkOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'
 
 import * as LinkStories from '../stories/LinkDemo.stories'
 
-<Meta title="Components / Link" />
+<Meta title="Atoms / Link" />
 
 # Link
 `Link` - это элемент, который позволяет пользователю перейти на другую страницу или ресурс

package/dist/stories/LinkPlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as LinkStories from '../stories/LinkDemo.stories'
 
-<Meta title="Components / Link / Playground" />
+<Meta title="Atoms / Link / Playground" />
 
 # Playground
 

package/dist/stories/RangeSliderOverview.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as RangeSliderStories from  '../stories/RangeSliderDemo.stories'
+
+<Meta title="Molecules / RangeSlider / Overview" />
+
+# RangeSlider
+
+`RangeSlider` - это слайдер для выбора значений в заданном диапазоне
+
+## Demo
+<Story of={RangeSliderStories.Demo}/>
+
+## Disabled
+<Story of={RangeSliderStories.Disabled}/>

package/dist/stories/RangeSliderPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as RangeSliderStories from '../stories/RangeSliderDemo.stories'
+
+<Meta title="Molecules / RangeSlider / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={RangeSliderStories.Demo} />
+<Controls of={RangeSliderStories.Demo} />

package/dist/stories/SVGContentOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'
 
 import * as SVGContentStories from  '../stories/SVGContent.stories'
 
-<Meta title="Components / SVGContent / Overview" />
+<Meta title="Wrappers / SVGContent / Overview" />
 
 # SVGContent
 

package/dist/stories/SVGContentPlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as SVGContentStories from '../stories/SVGContent.stories'
 
-<Meta title="Components / SVGContent / Playground" />
+<Meta title="Wrappers / SVGContent / Playground" />
 
 # Playground
 

package/dist/stories/ScrollOnDragOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ScrollOnDragStories from  '../stories/ScrollOnDrag.stories'
+
+<Meta title="Molecules / ScrollOnDrag / Overview" />
+
+# ScrollOnDrag
+
+`ScrollOnDrag` - компонент для отображения прокручиваемой области с эффектом `drag`
+
+## Demo
+<Story of={ScrollOnDragStories.Demo}/>

package/dist/stories/ScrollOnDragPlayground.mdx

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

package/dist/stories/ScrollbarOverview.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ScrollbarStories from '../stories/Scrollbar.stories'
+
+<Meta title="Molecules / Scrollbar / Overview" />
+
+# Scrollbar
+`Scrollbar` - компонент для отображения прокручиваемой области.
+<Story of={ScrollbarStories.Demo} />
+
+## No Default Styles
+<Story of={ScrollbarStories.NoDefaultStyles} />
+
+## Height
+<Story of={ScrollbarStories.Height} />

package/dist/stories/ScrollbarPlayground.mdx

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

package/dist/stories/SwiperOverview.mdx

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as SwiperStories from '../stories/Swiper.stories'
+import * as SwiperStories from '../stories/SwiperDemo.stories'
 
-<Meta title="Components / Swiper / Overview" />
+<Meta title="Molecules / Swiper / Overview" />
 
 # Swiper
 

package/dist/stories/SwiperPlayground.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as SwiperStories from '../stories/Swiper.stories'
+import * as SwiperStories from '../stories/SwiperDemo.stories'
 
-<Meta title="Components / Swiper / Playground" />
+<Meta title="Molecules / Swiper / Playground" />
 
 # Playground
 

package/dist/stories/TextOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'
 
 import * as TextStories from '../stories/TextSize.stories'
 
-<Meta title="Atoms / Text / Overview" />
+<Meta title="Typography / Text / Overview" />
 
 # Text
 

package/dist/stories/TextPlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as TextStories from '../stories/TextSize.stories'
 
-<Meta title="Atoms / Text / Playground" />
+<Meta title="Typography / Text / Playground" />
 
 # Playground
 

package/dist/stories/TitleOverview.mdx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'
 
 import * as TitleStories from '../stories/TitleDemo.stories'
 
-<Meta title="Atoms / Title / Overview" />
+<Meta title="Typography / Title / Overview" />
 
 # Overview
 

package/dist/stories/TitlePlayground.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 
 import * as TitleStories from '../stories/TitleDemo.stories'
 
-<Meta title="Atoms / Title / Playground" />
+<Meta title="Typography / Title / Playground" />
 
 # Playground
 

package/dist/types/components/Breadcrumbs/stories/__mock__/index.d.ts

@@ -4,7 +4,6 @@ declare const breadcrumbsListMock: {
         key: number;
         text: string;
         href: string;
-        icon: any;
     }[];
 };
 export { breadcrumbsListMock };

package/dist/types/components/Cell/stories/__mock__/index.d.ts

@@ -1,9 +1,7 @@
 declare const cellMock: {
     title: string;
-    titleIcon: any;
     titleLabel: string;
     value: string;
-    valueIcon: any;
     valueLabel: string;
 };
 export { cellMock };

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

@@ -1,10 +1,17 @@
 declare const choiceAppearanceError: {
     errorPrimary: {
         fill: string;
+        fillItem: string;
+        fillItemActive: string;
+        fillItemHover: string;
         labelTextColor: string;
         borderColor: string;
         iconAfterFill: string;
+        iconAfterFillActive: string;
         iconBeforeFill: string;
+        iconBeforeFillActive: string;
+        iconFill: string;
+        iconFillActive: string;
     };
 };
 export { choiceAppearanceError };

package/dist/types/components/Choice/stories/__mock__/index.d.ts

@@ -1,4 +1,21 @@
-export declare const options: {
-    label: string;
-    value: number;
-}[];
+declare const choiceListMock: {
+    active: {
+        value: number;
+    };
+    choices: {
+        label: string;
+        iconAfter: any;
+        iconBefore: any;
+        value: number;
+    }[];
+};
+declare const choiceListIconMock: {
+    active: {
+        value: number;
+    };
+    choices: {
+        icon: any;
+        value: number;
+    }[];
+};
+export { choiceListMock, choiceListIconMock };

package/dist/types/components/Code/appearance/codeDefault.d.ts

@@ -1,13 +1,11 @@
 declare const codeAppearanceDefault: {
     defaultPrimary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-    };
-    defaultSecondary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
+        inputBorderColor: string;
+        inputCaretColor: string;
+        inputFill: string;
+        inputFillHover: string;
+        inputPlaceholderTextColor: string;
+        inputTextColor: string;
     };
 };
 export { codeAppearanceDefault };

package/dist/types/components/Code/appearance/codeError.d.ts

@@ -1,6 +1,7 @@
 declare const codeAppearanceError: {
     errorPrimary: {
         inputBorderColor: string;
+        inputBorderColorHover: string;
         inputCaretColor: string;
         inputFill: string;
         inputFillHover: string;

package/dist/types/components/Code/appearance/codeSize.d.ts

@@ -1,13 +1,13 @@
 declare const codeAppearanceSize: {
     sizeL: {
         size: string;
-        labelTextSize: string;
         inputSize: string;
+        inputTextSize: string;
     };
     sizeM: {
         size: string;
-        labelTextSize: string;
         inputSize: string;
+        inputTextSize: string;
     };
 };
 export { codeAppearanceSize };

package/dist/types/components/Dadata/Dadata.d.ts

@@ -0,0 +1,3 @@
+import type { DadataProps } from './Dadata.interface';
+declare function Dadata(props: DadataProps): import("react/jsx-runtime").JSX.Element;
+export { Dadata };

package/dist/types/components/{DadataHintField/DadataHintField.interface.d.ts → Dadata/Dadata.interface.d.ts}

@@ -2,7 +2,7 @@ import { HTMLProps } from 'react';
 import { DaDataSuggestion } from 'react-dadata';
 import { DaDataParty } from 'react-dadata/dist/variants/party_russia/party-russia-types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-export interface DadataHintFieldProps extends StyleAttributes {
+export interface DadataProps extends StyleAttributes {
     delay?: number;
     input?: any;
     inputProps?: HTMLProps<HTMLInputElement>;

package/dist/types/components/Dadata/index.d.ts

@@ -0,0 +1 @@
+export { Dadata } from './Dadata';

package/dist/types/components/Drawer/appearance/drawerSurface.d.ts

@@ -10,11 +10,6 @@ declare const drawerAppearanceSurface: {
         closeIcon: any;
         closeIconFillIcon: string;
     };
-    surfaceQuaternary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-    };
     surfaceSecondary: {
         fill: string;
         fillHover: string;
@@ -27,5 +22,10 @@ declare const drawerAppearanceSurface: {
         fillHover: string;
         labelTextColor: string;
     };
+    surfaceQuaternary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
 };
 export { drawerAppearanceSurface };

package/dist/types/components/ScrollOnDrag/stories/__mock__/index.d.ts

@@ -0,0 +1,2 @@
+declare const scrollOnDragMock: import("react/jsx-runtime").JSX.Element;
+export { scrollOnDragMock };

package/dist/types/components/Scrollbar/stories/__mock__/index.d.ts

@@ -0,0 +1,2 @@
+declare const scrollbarMock: import("react/jsx-runtime").JSX.Element[];
+export { scrollbarMock };

package/dist/types/components/Swiper/stories/__mock__/index.d.ts

@@ -0,0 +1,2 @@
+declare const slidesMock: import("react/jsx-runtime").JSX.Element[];
+export { slidesMock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.31",
+  "version": "1.8.32",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -97,7 +97,7 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.28",
-    "@itcase/icons": "^1.1.4",
+    "@itcase/icons": "^1.1.5",
     "@itcase/storybook-config": "^1.1.14",
     "@itcase/tokens-am": "^1.1.9",
     "@itcase/tokens-baikal": "^1.1.9",