@itcase/ui 1.8.13 → 1.8.16

package/dist/components/Tab.js

@@ -4,10 +4,10 @@ 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_es_uDX0eyDM.js';
-import { D as Divider } from '../Divider_es_CWsDM2Rm.js';
+import { B as Badge } from '../Tooltip_es_DZX2n-4A.js';
+import { D as Divider } from '../Divider_es_BdU9qjKa.js';
 import { L as Link } from '../Link_es_DkW06IM-.js';
-import { T as Text } from '../Text_es_FJGduy7Z.js';
+import { T as Text } from '../Text_es_D012qJ8s.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -20,10 +20,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_B0sySEUu.js';
 import 'react-inlinesvg';
-import '../Tooltip_es_B9hN4Zlm.js';
-import '../Title_es_eejUqSJf.js';
 
 var tabAppearanceSize = {
     sizeL: {

package/dist/components/Text.js

@@ -1,4 +1,4 @@
-export { T as Text, a as textAppearance, t as textConfig } from '../Text_es_FJGduy7Z.js';
+export { T as Text, a as textAppearance, t as textConfig } from '../Text_es_D012qJ8s.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/components/Tile.js

@@ -3,9 +3,8 @@ 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_es_uDX0eyDM.js';
-import { T as Text } from '../Text_es_FJGduy7Z.js';
-import { T as Title } from '../Title_es_eejUqSJf.js';
+import { b as Title, B as Badge } from '../Tooltip_es_DZX2n-4A.js';
+import { T as Text } from '../Text_es_D012qJ8s.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,10 +18,8 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_B0sySEUu.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_B9hN4Zlm.js';
 
 var tileAppearance = {
     dev: {},

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title_es_eejUqSJf.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_DZX2n-4A.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -17,3 +17,6 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
+import '../Text_es_D012qJ8s.js';
+import 'react-inlinesvg';
+import '../Link_es_DkW06IM-.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_B9hN4Zlm.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_DZX2n-4A.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -17,5 +17,6 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_FJGduy7Z.js';
-import '../Title_es_eejUqSJf.js';
+import '../Text_es_D012qJ8s.js';
+import 'react-inlinesvg';
+import '../Link_es_DkW06IM-.js';

package/dist/css/components/Badge/Badge.css

@@ -130,10 +130,10 @@
   --badge-type-icon-size-xs-max-height: 16px;
 
   --badge-size-xxs-padding: 0 0.5m;
-  --badge-size-xxs-min-width: 12px;
-  --badge-size-xxs-min-height: 12px;
+  --badge-size-xxs-min-width: 16px;
+  --badge-size-xxs-min-height: 16px;
   --badge-size-xxs-gap: 0px;
-  --badge-type-icon-size-xxs-max-width: 12px;
-  --badge-type-icon-size-xxs-max-height: 12px;
+  --badge-type-icon-size-xxs-max-width: 16px;
+  --badge-type-icon-size-xxs-max-height: 16px;
   --badge-shape-rounded: 0;
 }

package/dist/css/components/Chips/Chips.css

@@ -36,51 +36,55 @@
 }
 
 :root {
-  /* Rounded */
-  --chips-shape-rounded-default: 0;
-  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
-    --chips-$(size)-shape-rounded: $(value);
-  }
+  /* Default */
+  --chips-shape-rounded-default: 8px;
 
   /* Size XXL */
   --chips-xxl-gap: 0.5m;
   --chips-xxl-padding: 2m 2m;
   --chips-xxl-min-width: 48px;
   --chips-xxl-min-height: 48px;
+  --chips-xxl-shape-rounded: 8px;
 
   /* Size XL */
   --chips-xl-gap: 0.5m;
   --chips-xl-padding: 1m 1m;
   --chips-xl-min-width: 40px;
   --chips-xl-min-height: 40px;
+  --chips-xl-shape-rounded: 8px;
 
   /* Size L */
   --chips-l-gap: 0.5m;
-  --chips-l-padding: 0.5m 0.5m;
+  --chips-l-padding: 0.5m 12px;
   --chips-l-min-width: 32px;
   --chips-l-min-height: 32px;
+  --chips-l-shape-rounded: 8px;
 
   /* Size M */
   --chips-m-gap: 0.5m;
   --chips-m-padding: 0.75m 1.25m;
   --chips-m-min-width: 28px;
   --chips-m-min-height: 28px;
+  --chips-m-shape-rounded: 8px;
 
   /* Size S */
   --chips-s-gap: 0.5m;
   --chips-s-padding: 0.25m 0.5m;
   --chips-s-min-width: 24px;
   --chips-s-min-height: 24px;
+  --chips-s-shape-rounded: 8px;
 
   /* Size XS */
   --chips-xs-gap: 0.5m;
   --chips-xs-padding: 0.5m 0.5m;
   --chips-xs-min-width: 20px;
   --chips-xs-min-height: 20px;
+  --chips-xs-shape-rounded: 8px;
 
   /* Size XXS */
   --chips-xxs-gap: 0.5m;
   --chips-xxs-padding: 0.25m 0.25m;
   --chips-xxs-min-width: 16px;
   --chips-xxs-min-height: 16px;
+  --chips-xxs-shape-rounded: 8px;
 }

package/dist/css/components/DatePeriod/DatePeriod.css

@@ -0,0 +1,105 @@
+.date-period {
+  display: flex;
+}
+.date-period {
+  &&_skeleton {
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    animation: datePeriodSkeleton 3s infinite linear;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes datePeriodSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.date-period {
+  &_shape {
+    &_circular {
+      border-radius: 50%;
+    }
+    &_geometric {
+      border-radius: 0;
+    }
+    &_rounded {
+      border-radius: var(--date-period-shape-default);
+    }
+  }
+}
+.date-period {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        min-width: var(--date-period-$(size)-min-width);
+        min-height: var(--date-period-$(size)-min-height);
+        padding: var(--date-period-$(size)-padding);
+      }
+    }
+  }
+  &__datepicker-input_size {
+    @each $inputSize in xxs, xs, s, m, l, xl, xxl {
+      input&_$(inputSize) {
+        padding: var(--date-period-datepicker-input-$(inputSize)-padding);
+        min-height: var(--date-period-datepicker-input-$(inputSize)-min-height);
+      }
+    }
+  }
+}
+:root {
+  --date-period-shape-default: 8px;
+
+  /* Size XXL */
+  --date-period-xxl-padding: 2m 2m;
+  --date-period-xxl-min-width: 48px;
+  --date-period-xxl-min-height: 48px;
+  --date-period-xxl-shape-rounded: 8px;
+
+  /* Size XL */
+  --date-period-xl-padding: 1m 1m;
+  --date-period-xl-min-width: 40px;
+  --date-period-xl-min-height: 40px;
+  --date-period-xl-shape-rounded: 8px;
+
+  /* Size L */
+  --date-period-l-padding: 0.5m 0.5m;
+  --date-period-l-min-width: 32px;
+  --date-period-l-min-height: 32px;
+  --date-period-l-shape-rounded: 8px;
+  --date-period-datepicker-input-l-padding: 0.5m 12px;
+  --date-period-datepicker-input-l-min-height: 32px;
+
+  /* Size M */
+  --date-period-m-padding: 2px;
+  --date-period-m-min-width: 36px;
+  --date-period-m-min-height: 36px;
+  --date-period-m-shape-rounded: 8px;
+
+  /* Size S */
+  --date-period-s-padding: 0.25m 0.5m;
+  --date-period-s-min-width: 24px;
+  --date-period-s-min-height: 24px;
+  --date-period-s-shape-rounded: 8px;
+
+  /* Size XS */
+  --date-period-xs-padding: 0.5m 0.5m;
+  --date-period-xs-min-width: 20px;
+  --date-period-xs-min-height: 20px;
+  --date-period-xs-shape-rounded: 8px;
+
+  /* Size XXS */
+  --date-period-xxs-padding: 0.25m 0.25m;
+  --date-period-xxs-min-width: 16px;
+  --date-period-xxs-min-height: 16px;
+  --date-period-xxs-shape-rounded: 8px;
+}

package/dist/css/components/Group/Group.css

@@ -31,6 +31,7 @@
       align-items: flex-start;
       &-reverse {
         display: flex;
+        align-items: flex-start;
         flex-direction: row-reverse;
       }
     }
@@ -40,12 +41,14 @@
       align-items: flex-start;
       &-reverse {
         display: flex;
+        align-items: flex-start;
         flex-direction: column-reverse;
       }
     }
     @each $val in row, row-reverse, column, column-reverse {
       &_$(val) {
         display: flex;
+        align-items: flex-start;
         flex-direction: $(val);
       }
     }

package/dist/css/components/Icon/Icon.css

@@ -11,7 +11,7 @@
 /* stylelint-disable prettier/prettier */
 .icon {
   &_size {
-    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
+    @each $size in 12, 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
       &_$(size) {
         width: $(size)px;
         height: $(size)px;
@@ -29,7 +29,6 @@
     }
   }
 }
-/* stylelint-disable prettier/prettier */
 .icon_fill {
   @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
     senary, surface, error, success, warning, info, danger, gradient {
@@ -45,8 +44,8 @@
           }
         }
       }
-      @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) {
           & svg {
             stroke: none;
@@ -56,6 +55,31 @@
       }
     }
   }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray {
+    &_$(palette) {
+      &-item {
+        & svg {
+          stroke: none;
+          fill: var(--color-$(type)-item-$(color));
+        }
+      }
+      & svg {
+        stroke: none;
+        fill: var(--color-$(type)-fill-$(color));
+      }
+    }
+  }
 }
 .icon_fill_hover {
   @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
@@ -76,11 +100,36 @@
       }
     }
   }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray {
+    &_$(palette) {
+      &-item {
+        & svg {
+          stroke: none;
+          fill: var(--color-$(type)-item-$(color));
+        }
+      }
+      & svg {
+        stroke: none;
+        fill: var(--color-$(type)-fill-$(color));
+      }
+    }
+  }
 }
 /* stylelint-disable prettier/prettier */
 .icon_fill {
   &_size {
-    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 72 {
+    @each $size in 12, 14, 16, 20, 24, 32, 40, 48, 56, 60, 72 {
       &_$(size) {
         width: $(size)px;
         height: $(size)px;
@@ -107,17 +156,18 @@
   }
 }
 .icon {
-  &_type {
-    &_with-badge {
-      position: relative;
-      ^^&__link,
-      ^^&__item {
-        text-decoration: none;
-        @each $size in 14, 16, 20, 24, 32, 40, 56, 60, 72 {
-          &^^^&_size_$(size) {
-            & .badge {
-              transform: translate(var(--icon-size-$(size)-badge-position));
-            }
+  &_with-badge {
+    position: relative;
+    ^&__link,
+    ^&__item {
+      text-decoration: none;
+      @each $size in 12, 14, 16, 20, 24, 32, 40 {
+        &^^&_size_$(size) {
+          & ^^^&__badge {
+            top: 0;
+            right: 0;
+            position: absolute;
+            transform: translate(var(--icon-size-$(size)-badge-position));
           }
         }
       }
@@ -138,12 +188,13 @@
 }
 :root {
   --icon-transition: all 0.2s ease 0s;
-  --icon-size-24-badge-position: 12px, 12px;
+
   --icon-shape-rounded: 6px;
 
-  /* Size */
-  @each $size, $value in (14, 16, 20, 24, 32, 40, 56, 60, 72),
-    (14px, 16px, 20px, 24px, 32px, 40px, 56px, 60px, 72px) {
-    --icon-size-$(size)-badge-position: $value;
-  }
+  --icon-size-14-badge-position: 12px, -12px;
+  --icon-size-16-badge-position: 12px, -12px;
+  --icon-size-20-badge-position: 12px, -12px;
+  --icon-size-24-badge-position: 12px, -12px;
+  --icon-size-32-badge-position: 12px, -12px;
+  --icon-size-40-badge-position: 12px, -12px;
 }

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

@@ -115,12 +115,9 @@
   }
 }
 :root {
-  --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-l-padding: 14px 16px;
+  --segmented-item-size-m-padding: 12px 16px;
+  --segmented-item-size-s-padding: 8px 16px;
   --segmented-item-size-xs-padding: 4px 16px;
   --segmented-item-size-xxs-padding: 4px 16px;
 

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

@@ -25,13 +25,19 @@
     background-position: -200%;
   }
 }
+/* stylelint-disable prettier/prettier */
 .title {
   &_size {
     @each $size in h1, h2, h3, h4, h5, h6 {
-      &_$(size) {
-        padding: 0;
-        margin: 0;
-        @mixin $(size);
+      @each $gap in 12, 12, 12, 12, 12, 12 {
+        &_$(size) {
+          padding: 0;
+          margin: 0;
+          @mixin $(size);
+          ^^&__wrapper {
+            gap: $(gap)px;
+          }
+        }
       }
     }
   }
@@ -50,7 +56,7 @@
     &_horizontal {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: center;
     }
     &_vertical {
       display: flex;

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

@@ -40,7 +40,7 @@
     delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
     pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
     dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black {
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray {
     &_$(palette) {
       background: var(--color-palette-$(palette));
     }

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

@@ -24,7 +24,8 @@
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
-      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black {
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray {
       &_$(palette) {
         color: var(--color-palette-$(palette));
       }

package/dist/stories/BreadcrumbsItem.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks'
 
 import * as BreadcrumbsItemStories from '../stories/BreadcrubsItem.stories'
 
-<Meta of={BreadcrumbsItemStories} />
+<Meta title="Atoms / Breadcrumbs / BreadcrumbsItem"  of={BreadcrumbsItemStories} />
 
 # BreadcrumbsItem
 `BreadcrumbsItem` -  это навигационный элемент на странице сайта,

package/dist/stories/Plsyground.mdx

@@ -7,8 +7,6 @@ import * as BreadcrumbsItemStories from '../stories/BreadcrubsItem.stories'
 
 # Playground
 
-<Canvas sourceState="shown" of={BreadcrumbsStories.Default} />
-<Controls of={BreadcrumbsStories.Default} />
+<Canvas sourceState="shown" of={BreadcrumbsItemStories.Demo} />
 
 <Canvas sourceState="shown" of={BreadcrumbsItemStories.Demo} />
-<Controls of={BreadcrumbsItemStories.IconAfter} />

package/dist/stories/Text.mdx

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

package/dist/types/components/Accordion/Accordion.appearance.d.ts

@@ -1,3 +1,2 @@
-import { AccordionAppearanceType, AccordionItemAppearanceType } from './Accordion.interface';
+import { AccordionAppearanceType } from './Accordion.interface';
 export declare const accordionAppearance: AccordionAppearanceType;
-export declare const accordionItemAppearance: AccordionItemAppearanceType;

package/dist/types/components/Accordion/appearance/accordionSize.d.ts

@@ -0,0 +1,59 @@
+declare const accordionAppearanceSize: {
+    sizeXXL: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+    sizeXL: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+    sizeL: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+    sizeM: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+    sizeS: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+    sizeXS: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+    sizeXXS: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: string;
+        iconAfterSize: string;
+        iconBeforeFillSize: string;
+        iconBeforeSize: string;
+    };
+};
+export { accordionAppearanceSize };

package/dist/types/components/Accordion/appearance/accordionStyle.d.ts

@@ -0,0 +1,16 @@
+declare const accordionAppearanceStyle: {
+    full: {
+        borderColor: string;
+    };
+    ghost: {
+        fill: string;
+        borderColor: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    solid: {
+        borderColor: string;
+    };
+};
+export { accordionAppearanceStyle };

package/dist/types/components/Accordion/appearance/accordionSurface.d.ts

@@ -0,0 +1,26 @@
+declare const accordionAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        titleTextColor: string;
+        labelTextColor: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { accordionAppearanceSurface };

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

@@ -1,4 +1,4 @@
 import { Accordion, accordionConfig } from './Accordion';
-import { accordionAppearance, accordionItemAppearance } from './Accordion.appearance';
+import { accordionAppearance } from './Accordion.appearance';
 import { AccordionItem, accordionItemConfig } from './AccordionItem';
-export { Accordion, AccordionItem, accordionConfig, accordionItemConfig, accordionAppearance, accordionItemAppearance, };
+export { Accordion, AccordionItem, accordionConfig, accordionItemConfig, accordionAppearance, };