@itcase/ui 1.4.6 → 1.4.7

package/dist/components/Search.js

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon-htF_V35Y.js';
+import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -17,9 +17,9 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 import 'react-scrollbars-custom';
 
 var searchAppearance = {
@@ -34,8 +34,8 @@ var searchAppearance = {
 
 var searchInputConfig = {
     appearance: searchAppearance,
-    setAppearance: function (newComponent) {
-        searchInputConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        searchInputConfig.appearance = appearanceConfig;
     },
 };
 var SearchInput = React.forwardRef(function SearchInput(props, ref) {

package/dist/components/Segmented.js

@@ -16,22 +16,32 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
 var segmentedAppearance = {
+    default: {
+        size: 's',
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 's',
+        indicatorFill: 'accentPrimary',
+        shape: 'rounded',
+    },
     dev: {
         width: 'fill',
         fill: 'surfaceSecondary',
         fillHover: 'surfacePrimaryHover',
-        indicatorFill: 'accentPrimary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextSize: 'm',
+        indicatorFill: 'accentPrimary',
         shape: 'rounded',
     },
 };
 
 var segmentedConfig = {
     appearance: segmentedAppearance,
-    setAppearance: function (newComponent) {
-        segmentedConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        segmentedConfig.appearance = appearanceConfig;
     },
 };
 var Segmented = React.forwardRef(function (props, ref) {

package/dist/components/Select.js

@@ -1,14 +1,14 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-htF_V35Y.js';
+import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import { B as Badge } from '../Badge-C68XnlcL.js';
-import { G as Group } from '../Group-Dz8xytje.js';
+import { B as Badge } from '../Badge-BxT2_kz_.js';
+import { G as Group } from '../Group-BICb8bYQ.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles/useStyles.js';
@@ -20,9 +20,9 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 import 'lodash/castArray';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
@@ -148,8 +148,8 @@ var SelectValueContainer = function (props) {
 
 var selectConfig = {
     appearance: selectAppearance,
-    setAppearance: function (newComponent) {
-        selectConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        selectConfig.appearance = appearanceConfig;
     },
 };
 var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {

package/dist/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { T as Title } from '../Title-Dck3eHNM.js';
+import { T as Title } from '../Title-Byi9vhDt.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Switch.js

@@ -8,8 +8,8 @@ var switchAppearance = {
 
 var switchConfig = {
     appearance: switchAppearance,
-    setAppearance: function (newComponent) {
-        switchConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        switchConfig.appearance = appearanceConfig;
     },
 };
 var Switch = React.forwardRef(function Switch(props, ref) {

package/dist/components/Tab.js

@@ -4,9 +4,9 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-C68XnlcL.js';
+import { B as Badge } from '../Badge-BxT2_kz_.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
-import { a as Link } from '../Link-BhJ5BdyS.js';
+import { a as Link } from '../Link-DaKqf1pb.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,10 +17,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-htF_V35Y.js';
+import '../Icon-OJ_3E3eM.js';
 import 'react-inlinesvg';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 
 var tabAppearance = {
     accent: {

package/dist/components/Textarea.js

@@ -69,8 +69,8 @@ var textareaState = {
 var textareaConfig = {
     appearance: textareaAppearance,
     state: textareaState,
-    setAppearance: function (newComponent) {
-        textareaConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        textareaConfig.appearance = appearanceConfig;
     },
     setState: function (newComponent) {
         textareaConfig.state = newComponent;

package/dist/components/Tile.js

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-C68XnlcL.js';
+import { B as Badge } from '../Badge-BxT2_kz_.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import { T as Title } from '../Title-Dck3eHNM.js';
+import { T as Title } from '../Title-Byi9vhDt.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -16,10 +16,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-htF_V35Y.js';
+import '../Icon-OJ_3E3eM.js';
 import 'react-inlinesvg';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
 
 var tileAppearance = {
     dev: {},

package/dist/components/Title.js

@@ -1,9 +1,9 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Dck3eHNM.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Byi9vhDt.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../context/UIContext.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-BYgzNVYI.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-5lQyt5-Y.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -15,4 +15,4 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text-C6NSmetx.js';
-import '../Title-Dck3eHNM.js';
+import '../Title-Byi9vhDt.js';

package/dist/components/Video.js

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

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

@@ -57,24 +57,6 @@
     }
   }
 }
-.cell {
-  &_set {
-    &_horizontal {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-.cell {
-  &_set {
-    &_vertical {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
 .cell {
   &&_state {
     &_active {
@@ -116,22 +98,20 @@
   }
 }
 .cell {
-  &&_mode {
-    &_skeleton {
-      ^^&__data {
-        ^^^&__title,
-        ^^^&__value {
-          color: transparent;
-          background-image: linear-gradient(
-            90deg,
-            var(--color-surface-secondary),
-            var(--color-surface-tertiary),
-            var(--color-surface-secondary)
-          );
-          background-size: 200%;
-          border-radius: 6px;
-          animation: cellSkeleton 3s infinite linear;
-        }
+  &_skeleton {
+    ^&__data {
+      ^^&__title,
+      ^^&__value {
+        color: transparent;
+        background-image: linear-gradient(
+          90deg,
+          var(--color-surface-secondary),
+          var(--color-surface-tertiary),
+          var(--color-surface-secondary)
+        );
+        background-size: 200%;
+        border-radius: 6px;
+        animation: cellSkeleton 3s infinite linear;
       }
     }
   }

package/dist/css/components/HeroTitle/HeroTitle.css

@@ -4,19 +4,17 @@
   }
 }
 .hero-title {
-  &&_mode {
-    &_skeleton {
-      color: transparent;
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: heroTitleSkeleton 3s infinite linear;
-    }
+  &_skeleton {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    border-radius: 6px;
+    animation: heroTitleSkeleton 3s infinite linear;
   }
 }
 @keyframes heroTitleSkeleton {

package/dist/css/components/Image/Image.css

@@ -32,19 +32,17 @@
   }
 }
 .image {
-  &&_mode {
-    &_skeleton {
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      animation: imageSkeleton 3s infinite linear;
-      ^^&__item {
-        opacity: 0%;
-      }
+  &_skeleton {
+    background-image: linear-gradient(
+      90deg,
+      x var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    animation: imageSkeleton 3s infinite linear;
+    ^^&__item {
+      opacity: 0%;
     }
   }
 }

package/dist/css/components/Loader/Loader.css

@@ -70,6 +70,25 @@
     }
   }
 }
+.loader {
+  &_shape {
+    &_rounded {
+      border-radius: var(--loader-shape-rounded-default, 6px);
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &^^&_size_$(size) {
+          ^^^&__item {
+            border-radius: var(--loader-$(size)-shape-rounded, 6px);
+          }
+        }
+      }
+    }
+    &_circular {
+      ^^&__item {
+        border-radius: 50%;
+      }
+    }
+  }
+}
 :root {
   --loader-l-min-width: 112px;
   --loader-l-min-height: 56px;

package/dist/css/components/Title/Title.css

@@ -4,19 +4,17 @@
   }
 }
 .title {
-  &&_mode {
-    &_skeleton {
-      color: transparent;
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: titleSkeleton 3s infinite linear;
-    }
+  &_skeleton {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    border-radius: 6px;
+    animation: titleSkeleton 3s infinite linear;
   }
 }
 @keyframes titleSkeleton {

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

@@ -76,8 +76,8 @@
   &_arrow_position {
     &_top {
       &::after {
-        top: 0;
         left: 50%;
+        top: 0;
         transform: translate(
             -50%,
             calc(calc(var(--tooltip-arrow-width) / 2) * -1)
@@ -87,8 +87,8 @@
     }
     &_left {
       &::after {
-        top: 50%;
         left: 0;
+        top: 50%;
         transform: translate(
             calc(calc(var(--tooltip-arrow-width) / 2) * -1),
             -50%
@@ -106,8 +106,8 @@
     }
     &_bottom {
       &::after {
-        bottom: 0;
         left: 50%;
+        bottom: 0;
         transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2))
           rotate(45deg);
       }
@@ -150,4 +150,4 @@
     animation-name: tooltipShowAnimation;
     opacity: 100%;
   }
-}
+}

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

@@ -16,12 +16,12 @@
           }
         }
       }
-      @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) {
           background: var(--color-$(type)-$(color));
-          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-            75, 80, 85, 90, 95 {
+          @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)-$(color)-$(alpha));
             }
@@ -35,8 +35,8 @@
     &_$(type) {
       &-primary {
         background: var(--color-$(type)-primary);
-        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-          75, 80, 85, 90, 95 {
+        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75,
+          80, 85, 90, 95 {
           &$(alpha) {
             background: var(--color-$(type)-primary$(opacity));
           }

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

@@ -1,7 +1,7 @@
 .fill {
   &_active {
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
+      senary, surface, error, success, warning, info, danger, disabled, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary,
           senary, accent, active {

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

@@ -1,8 +1,8 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary,
-        quinary, senary, surface, error, success, warning, info, danger,
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+        senary, surface, error, success, warning, info, danger, disabled,
         gradient {
         &_$(type) {
           @each $color in primary, secondary, tertiary, quaternary, quinary,
@@ -15,8 +15,8 @@
           }
         }
       }
-      @each $type in accent, primary, secondary, tertiary, quaternary,
-        quinary, senary, surface, error, success, warning, info, danger,
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+        senary, surface, error, success, warning, info, danger, disabled,
         gradient {
         &_$(type) {
           &-primary {

package/dist/css/styles/fill/fill_disabled.css

@@ -1,5 +1,6 @@
 .fill {
   &_disabled {
+    /* maybe it's deprecated */
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
@@ -13,6 +14,13 @@
         }
       }
     }
+    @each $color in primary, secondary, tertiary, quaternary {
+      &-$(color) {
+        background: var(--color-disabled-$(color));
+      }
+    }
+
+    /* maybe it's deprecated */
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {

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 {
+    @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 $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
             &-$(color) {
               color: var(--color-$(type)-text-$(color));
             }

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

@@ -0,0 +1,13 @@
+.text {
+  &&-color {
+    &_disabled {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &-$(color) {
+            color: var(--color-disabled-text-$(color));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/stories/Accordion.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AccordionStories from './Accordion.stories.tsx'
+import * as AccordionStories from '../stories/Accordion.stories.tsx'
 
 <Meta of={AccordionStories} />
 

package/dist/stories/AccordionItem.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AccordionItemStories from './AccordionItem.stories.tsx'
+import * as AccordionItemStories from '../stories/AccordionItem.stories.tsx'
 
 <Meta of={AccordionItemStories} />
 

package/dist/stories/Avatar.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks'
 
 import * as AvatarStories from '../stories/Avatar.stories.tsx'
 
-<Meta of={AvatarStories} />
+<Meta title="Atoms / Badge" of={AvatarStories} />
 
 # Avatar
 

package/dist/stories/Badge.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/blocks'
+import * as BadgeStories from '../stories/Badge.stories.tsx'
+
+<Meta title="Atoms / Badge" />
+
+# Badge
+`Badge` — используется для обозначения информации о количестве. Может входить в состав разных компонентов, например, `Icon`, `Tab`, `Tile` для обозначения количества чего-либо (сообщений, уведомлений, выбранных элементов списка).
+
+## Demo
+<Canvas sourceState="shown" of={BadgeStories.Demo} />
+
+## Skeleton
+<Canvas sourceState="shown" of={BadgeStories.Skeleton} />

package/dist/stories/Button.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ButtonStories from '../stories/Button.stories.tsx'
+
+<Meta title="Atoms / Button" />
+
+# Button
+
+`Button` - это кнопка, предоставляет пользователю возможность совершить действие.
+Кнопка запускает действие, а текст или иконка информирует о том, что произойдет после нажатия.
+
+<Story of={ButtonStories.Demo} />