@itcase/ui 1.2.31 → 1.2.32

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

@@ -0,0 +1,117 @@
+:root {
+  {/* new tokens general */}
+  --button-xxl-shape-rounded: 6px;
+  --button-xl-shape-rounded: 6px;
+  --button-l-shape-rounded: 6px;
+  --button-m-shape-rounded: 6px;
+  --button-s-shape-rounded: 6px;
+  --button-xs-shape-rounded: 6px;
+  --button-xxs-shape-rounded: 6px;
+  
+  --button-with-icon-xxl-gap: 4px;
+  --button-with-icon-xl-gap: 4px;
+  --button-with-icon-l-gap: 4px;
+  --button-with-icon-m-gap: 4px;
+  --button-with-icon-s-gap: 4px;
+  --button-with-icon-xs-gap: 4px;
+  --button-with-icon-xxs-gap: 4px;
+
+  {/* filled paddings with sizes */}
+  --button-with-icon-filled-xxl-padding: 16px;
+  --button-with-icon-filled-xl-padding: 8px 12px;
+  --button-with-icon-filled-l-padding: 4px 8px;
+  --button-with-icon-filled-m-padding: 6px 8px;
+  --button-with-icon-filled-s-padding: 4px;
+  --button-with-icon-filled-xs-padding: 2px 4px;
+  --button-with-icon-filled-xxs-padding: 1px 4px;
+
+  --button-label-filled-xxl-padding: 16px;
+  --button-label-filled-xl-padding: 8px 12px;
+  --button-label-filled-l-padding: 4px 8px;
+  --button-label-filled-m-padding: 2px 8px;
+  --button-label-filled-s-padding: 0px 4px;
+  --button-label-filled-xs-padding: 0px 4px;
+  --button-label-filled-xxs-padding: 0px 4px;
+
+  --button-icon-filled-xxl-padding: 16px;
+  --button-icon-filled-xl-padding: 8px;
+  --button-icon-filled-l-padding: 4px;
+  --button-icon-filled-m-padding: 6px;
+  --button-icon-filled-s-padding: 4px;
+  --button-icon-filled-xs-padding: 2px;
+  --button-icon-filled-xxs-padding: 1px;
+
+  --button-loader-filled-xxl-padding: 28px 50px;
+  --button-loader-filled-xl-padding: 20px 50px;
+  --button-loader-filled-l-padding: 16px 50px;
+  --button-loader-filled-m-padding: 14px 50px;
+  --button-loader-filled-s-padding: 12px 50px;
+  --button-loader-filled-xs-padding: 10px 50px;
+  --button-loader-filled-xxs-padding: 8px 50px;
+
+  {/* outlined paddings with sizes */}
+  --button-with-icon-outlined-xxl-padding: 15px;
+  --button-with-icon-outlined-xl-padding: 7px 11px;
+  --button-with-icon-outlined-l-padding: 3px 7px;
+  --button-with-icon-outlined-m-padding: 5px 7px;
+  --button-with-icon-outlined-s-padding: 3px;
+  --button-with-icon-outlined-xs-padding: 1px 3px;
+  --button-with-icon-outlined-xxs-padding: 0px 3px;
+
+  --button-label-outlined-xxl-padding: 15px;
+  --button-label-outlined-xl-padding: 7px 11px;
+  --button-label-outlined-l-padding: 3px 7px;
+  --button-label-outlined-m-padding: 1px 7px;
+  --button-label-outlined-s-padding: 0px 3px;
+  --button-label-outlined-xs-padding: 0px 3px;
+  --button-label-outlined-xxs-padding: 0px 3px;
+
+  --button-icon-outlined-xxl-padding: 15px;
+  --button-icon-outlined-xl-padding: 7px;
+  --button-icon-outlined-l-padding: 3px;
+  --button-icon-outlined-m-padding: 5px;
+  --button-icon-outlined-s-padding: 3px;
+  --button-icon-outlined-xs-padding: 1px;
+  --button-icon-outlined-xxs-padding: 0px;
+
+  --button-loader-outlined-xxl-padding: 27px 49px;
+  --button-loader-outlined-xl-padding: 19px 49px;
+  --button-loader-outlined-l-padding: 15px 49px;
+  --button-loader-outlined-m-padding: 13px 49px;
+  --button-loader-outlined-s-padding: 11px 49px;
+  --button-loader-outlined-xs-padding: 9px 49px;
+  --button-loader-outlined-xxs-padding: 7px 49px;
+
+  {/* ghost paddings with sizes */}
+  --button-with-icon-ghost-xxl-padding: 16px;
+  --button-with-icon-ghost-xl-padding: 8px 12px;
+  --button-with-icon-ghost-l-padding: 4px 8px;
+  --button-with-icon-ghost-m-padding: 6px 8px;
+  --button-with-icon-ghost-s-padding: 4px;
+  --button-with-icon-ghost-xs-padding: 2px 4px;
+  --button-with-icon-ghost-xxs-padding: 1px 4px;
+
+  --button-label-ghost-xxl-padding: 16px;
+  --button-label-ghost-xl-padding: 8px 12px;
+  --button-label-ghost-l-padding: 4px 8px;
+  --button-label-ghost-m-padding: 2px 8px;
+  --button-label-ghost-s-padding: 0px 4px;
+  --button-label-ghost-xs-padding: 0px 4px;
+  --button-label-ghost-xxs-padding: 0px 4px;
+
+  --button-icon-ghost-xxl-padding: 16px;
+  --button-icon-ghost-xl-padding: 8px;
+  --button-icon-ghost-l-padding: 4px;
+  --button-icon-ghost-m-padding: 6px;
+  --button-icon-ghost-s-padding: 4px;
+  --button-icon-ghost-xs-padding: 2px;
+  --button-icon-ghost-xxs-padding: 1px;
+
+  --button-loader-ghost-xxl-padding: 28px 50px;
+  --button-loader-ghost-xl-padding: 20px 50px;
+  --button-loader-ghost-l-padding: 16px 50px;
+  --button-loader-ghost-m-padding: 14px 50px;
+  --button-loader-ghost-s-padding: 12px 50px;
+  --button-loader-ghost-xs-padding: 10px 50px;
+  --button-loader-ghost-xxs-padding: 8px 50px;
+}

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

@@ -0,0 +1,4 @@
+:root {
+  --checkbox-column-gap: 8px;
+  --checkbox-row-gap: 4px;
+}

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

@@ -0,0 +1,9 @@
+:root {
+  --chips-size-xxs-padding: 0px 8px;
+  --chips-size-xs-padding: 1px 10px;
+  --chips-size-s-padding: 2px 10px;
+  --chips-size-m-padding: 4px 10px;
+  --chips-size-l-padding: 5px 10px;
+  --chips-size-xl-padding: 9px 10px;
+  --chips-size-xxl-padding: 13px 12px;
+}

package/dist/css/components/Choice/Choice.tokens.css

@@ -0,0 +1,17 @@
+:root {
+  --choice-item-size-xs-padding: 1px 8px;
+  --choice-item-size-s-padding: 5px 10px;
+  --choice-item-size-m-padding: 7px 12px;
+  --choice-item-size-l-padding: 9px 15px;
+  --choice-item-size-xl-padding: 13px 20px;
+  --choice-item-size-xxl-padding: 17px 25px;
+  --choice-item-size-tiny-padding: 1px 8px;
+  --choice-item-size-compact-padding: 5px 10px;
+  --choice-item-size-normal-padding: 7px 12px;
+  --choice-item-size-large-padding: 9px 15px;
+
+  --choice-item-background-hover: var(--color-surface-primary-hover);
+  --choice-item-background-active: var(--color-surface-tertiary);
+
+  --choice-item-icon-padding: 3px 2px;
+}

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

@@ -0,0 +1,5 @@
+:root {
+  --code-input-size-normal-width: 48px;
+  --code-input-size-normal-height: 48px;
+  --code-input-size-normal-padding: 10px 12px;
+}

package/dist/css/components/DadataHintField/DadataHintField.tokens.css

@@ -0,0 +1,4 @@
+:root {
+  --react-dadata-padding: 7px 12px;
+  --react-dadata-border-radius: 8px;
+}

package/dist/css/components/DatePicker/DatePicker.tokens.css

@@ -0,0 +1,38 @@
+:root {
+  --date-picker-input-border-radius: 6px;
+
+  --date-picker-background: var(--color-surface-primary);
+  --date-picker-padding: 24px 12px;
+  --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
+  --date-picker-border-radius: 12px;
+  --date-picker-border: 1px solid var(--color-surface-tertiary);
+
+  --date-picker-day-width: 40px;
+  --date-picker-day-height: 40px;
+  --date-picker-day-padding: 8px 0;
+  --date-picker-day-border-radius: 8px;
+
+  --date-picker-day-hover-background: var(--color-accent-tertiary);
+  --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
+
+  --date-picker-day-range-background: var(--color-accent-tertiary);
+  --date-picker-day-range-text-color: var(--color-accent-text-secondary);
+  --date-picker-day-range-border-radius: 0;
+  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
+  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
+
+  --date-picker-day-today-background: var(--color-surface-secondary);
+  --date-picker-day-today-border-radius: 12px;
+  --date-picker-day-today-text-color: var(--color-surface-text-primary);
+
+  --date-picker-day-weekend-background: var(--color-surface-primary);
+  --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
+  --date-picker-day-weekend-outside-text-color: var(--color-secondary-text-disabled);
+
+  --date-picker-day-selected-background: var(--color-accent-primary);
+  --date-picker-day-selected-background-hover: var(--color-accent-primary-hover);
+  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
+
+  --date-picker-day-outside-background: var(--color-surface-primary);
+  --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);
+}

package/dist/css/components/Dot/Dot.tokens.css

@@ -0,0 +1,10 @@
+:root {
+  --dot-size-s-width: 12px;
+  --dot-size-s-height: 12px;
+
+  --dot-size-m-width: 16px;
+  --dot-size-m-height: 16px;
+
+  --dot-size-l-width: 20px;
+  --dot-size-l-height: 20px;
+}

package/dist/css/components/Dropdown/Dropdown.tokens.css

@@ -0,0 +1,33 @@
+:root {
+  --dropdown-item-size-xs-padding: 0;
+  --dropdown-item-size-xs-gap: 8px;
+
+  --dropdown-item-size-l-padding: 10px 12px;
+  --dropdown-item-size-l-gap: 12px;
+}
+
+@keyframes dropDownAnimationOpen {
+  0% {
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+    opacity: 0%;
+  }
+  100% {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    opacity: 100%;
+  }
+}
+
+@keyframes dropDownAnimationClose {
+  0% {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    opacity: 100%;
+  }
+  100% {
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+    opacity: 0%;
+  }
+}

package/dist/css/components/Grid/Grid.tokens.css

@@ -0,0 +1,4 @@
+:root {
+  --grid-row-transition: all 0.2s ease 0s;
+  --grid-item-transition: all 0.2s ease 0s;
+}

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

@@ -0,0 +1,3 @@
+:root {
+  --group-transition: all 0.2s ease 0s;
+}

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

@@ -12,17 +12,17 @@
   &_size {
     @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
       &_$(size) {
-        width: $(size) px;
-        height: $(size) px;
-        min-width: $(size) px;
-        min-height: $(size) px;
-        font-size: $(size) px;
+        width: $(size)px;
+        height: $(size)px;
+        min-width: $(size)px;
+        min-height: $(size)px;
+        font-size: $(size)px;
         display: flex;
         justify-content: center;
         align-items: center;
         & > svg {
-          width: $(size) px;
-          height: $(size) px;
+          width: $(size)px;
+          height: $(size)px;
         }
       }
     }

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

@@ -0,0 +1,3 @@
+:root {
+  --icon-size-24-badge-position: 14px, -12px;
+}

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

@@ -0,0 +1,3 @@
+:root {
+  --image-shape-rounded: 6px;
+}

package/dist/css/components/Input/Input.tokens.css

@@ -0,0 +1,29 @@
+:root {
+  --input-shape-rounded: 8px;
+
+  --input-size-xs-padding: 1px 8px;
+  --input-size-s-padding: 5px 10px;
+  --input-size-m-padding: 7px 12px;
+  --input-size-l-padding: 9px 15px;
+  --input-size-xl-padding: 13px 20px;
+  --input-size-xxl-padding: 17px 25px;
+
+  --input-size-tiny-padding: 1px 8px;
+  --input-size-compact-padding: 5px 10px;
+  --input-size-normal-padding: 7px 12px;
+  --input-size-large-padding: 9px 15px;
+
+  --input-success-border: var(--color-surface-border-tertiary);
+
+  --input-state-focus-border: var(--color-surface-border-quaternary);
+  --input-state-focus-background: none;
+  --input-state-error-border: var(--color-error-border-primary);
+  --input-state-error-background: none;
+  --input-state-required-border: var(--color-warning-text-primary);
+  --input-state-required-background: none;
+  --input-state-custom-border: var(--color-info-primary);
+  --input-state-custom-background: none;
+  --input-state-hover-border: var(--color-surface-border-quaternary);
+  --input-state-hover-background: none;
+  --input-caret-color: var(--color-accent-primary);
+}

package/dist/css/components/InputPassword/InputPassword.tokens.css

@@ -0,0 +1,23 @@
+:root {
+  --input-password-size-xs-padding: 4px 8px;
+  --input-password-size-s-padding: 5px 10px;
+  --input-password-size-m-padding: 7px 12px;
+  --input-password-size-l-padding: 9px 15px;
+  --input-password-size-xl-padding: 15px 20px;
+  --input-password-size-xxl-padding: 18px 25px;
+
+  --input-password-size-tiny-padding: 4px 8px;
+  --input-password-size-compact-padding: 5px 10px;
+  --input-password-size-normal-padding: 7px 12px;
+  --input-password-size-large-padding: 9px 15px;
+
+  --input-password-state-focus-border: var(--color-active-border-primary);
+  --input-password-state-focus-background: none;
+  --input-password-state-error-border: var(--color-error-border-primary);
+  --input-password-state-error-background: none;
+  --input-password-state-success-border: var(--color-success-border-primary);
+  --input-password-state-success-background: none;
+  --input-password-state-hover-border: var(--color-surface-border-quaternary);
+  --input-password-state-hover-background: none;
+  --input-password-caret-color: var(--color-accent-primary);
+}

package/dist/css/components/Label/Label.tokens.css

@@ -0,0 +1,19 @@
+:root {
+  --label-shape-rounded-default: 6px;
+
+  --label-size-xxl-shape-rounded: 12px;
+  --label-size-xl-shape-rounded: 6px;
+  --label-size-l-shape-rounded: 6px;
+  --label-size-m-shape-rounded: 12px;
+  --label-size-s-shape-rounded: 12px;
+  --label-size-xs-shape-rounded: 12px;
+  --label-size-xxs-shape-rounded: 12px;
+
+  --label-size-xxl-padding: 10px 10px;
+  --label-size-xl-padding: 7px 8px;
+  --label-size-l-padding: 4px 6px;
+  --label-size-m-padding: 2px 8px;
+  --label-size-s-padding: 2px 6px;
+  --label-size-xs-padding: 0px 4px;
+  --label-size-xxs-padding: 0px 4px;
+}

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

@@ -0,0 +1,3 @@
+.loader {
+  border-radius: var(--button-size-xl-shape-rounded);
+}

package/dist/css/components/Logo/Logo.tokens.css

@@ -0,0 +1,10 @@
+:root {
+  --logo-size-l-width: 240px;
+  --logo-size-l-height: 90px;
+
+  --logo-size-m-width: 200px;
+  --logo-size-m-height: 75px;
+
+  --logo-size-s-width: 140px;
+  --logo-size-s-height: 52px;
+}

package/dist/css/components/Menu/Menu.tokens.css

@@ -0,0 +1,5 @@
+:root {
+  --menu-type-border-width: fit-content;
+  --menu-type-border-border: 1px solid var(--color-surface-border-tertiary);
+  --menu-type-border-border-radius: 6px;
+}

package/dist/css/components/MenuItem/MenuItem.tokens.css

@@ -0,0 +1,9 @@
+:root {
+  --menu-item-shape-rounded: 6px;
+
+  --menu-item-set-filter-padding: 10px 16px;
+  --menu-item-set-filter-border-right: 1px solid var(--color-surface-border-tertiary);
+  --menu-item-set-filter-active-color: var(--color-surface-item-accent);
+
+  --menu-item-set-subitem-padding-left: 32px;
+}

package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css

@@ -1,4 +1,5 @@
 .modal-sheet-bottom {
+  position: relative;
   &__container {
     background-color: var(
       --modal-sheet-bottom-container-background,
@@ -7,6 +8,7 @@
     border-radius: var(--modal-sheet-bottom-container-border-radius, 8px 8px 0 0) !important;
   }
   &__header {
+    height: 32px;
     & .react-modal-sheet-header {
       max-height: 32px;
     }
@@ -26,4 +28,9 @@
       var(--color-surface-inverse-50)
     ) !important;
   }
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
 }

package/dist/css/components/Overlay/Overlay.tokens.css

@@ -0,0 +1,4 @@
+:root {
+  --overlay-fill: hsla(0, 0%, 0%, 0.4);
+  --overlay-blur: 20px;
+}

package/dist/css/components/Pagination/Pagination.tokens.css

@@ -0,0 +1,25 @@
+:root {
+  --paginator-margin: 0;
+
+  --paginator-item-width: 32px;
+  --paginator-item-height: 32px;
+  --paginator-item-border: none;
+  --paginator-item-border-radius: 50%;
+
+  --pagination-item-state-disabled-display: none;
+
+  --paginator-item-transition: all 0.2s ease 0s;
+
+  --paginator-item-default-fill: var(--color-surface-primary);
+  --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
+  --paginator-item-default-text: var(--color-surface-text-primary);
+
+  --paginator-item-active-fill: var(--color-accent-primary);
+  --paginator-item-active-fill-hover: var(--color-accent-primary);
+  --paginator-item-active-text: var(--color-accent-text-primary);
+
+  --paginator-item-disabled-fill: none;
+  --paginator-item-disabled-fill-hover: none;
+  --paginator-item-disabled-text: var(--color-surface-text-primary);
+  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
+}

package/dist/css/components/Radio/Radio.tokens.css

@@ -0,0 +1,3 @@
+:root {
+  --radio-success-border: var(--color-surface-border-tertiary);
+}

package/dist/css/components/Search/Search.tokens.css

@@ -0,0 +1,8 @@
+:root {
+  --search-input-normal-padding: 8px;
+  --search-input-normal-gap: 8px;
+  --search-input-normal-line-height: 24px;
+
+  --search-input-compact-padding: 8px;
+  --search-input-compact-gap: 4px;
+}

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

@@ -0,0 +1,4 @@
+:root {
+  --segmented-item-size-normal-padding: 12px 24px;
+  --segmented-item-size-compact-padding: 6px 16px;
+}

package/dist/css/components/Select/Select.tokens.css

@@ -0,0 +1,29 @@
+:root {
+  --select-size-xs-padding: 0px 8px;
+  --select-size-s-padding: 3px 10px;
+  --select-size-m-padding: 5px 12px;
+  --select-size-l-padding: 7px 15px;
+  --select-size-xl-padding: 11px 20px;
+  --select-size-xxl-padding: 15px 25px;
+
+  --select-size-tiny-padding: 0px 8px;
+  --select-size-compact-padding: 3px 10px;
+  --select-size-normal-padding: 5px 12px;
+  --select-size-large-padding: 7px 15px;
+
+  --select-menu-border-radius: 12px;
+  --select-menu-margin: 0;
+
+  --select-multi-value-padding: 2px 6px;
+
+  --select-control-shape-rounded: 8px;
+
+  --select-success-border: var(--color-surface-border-tertiary);
+
+  --select-menu-list-item-size-xs-padding: 2px 8px;
+  --select-menu-list-item-size-s-padding: 6px 10px;
+  --select-menu-list-item-size-m-padding: 8px 12px;
+  --select-menu-list-item-size-l-padding: 10px 12px;
+  --select-menu-list-item-size-xl-padding: 14px 20px;
+  --select-menu-list-item-size-xxl-padding: 18px 25px;
+}

package/dist/css/components/Switch/Switch.tokens.css

@@ -0,0 +1,7 @@
+:root {
+  --switch-size-normal-width: 52px;
+  --switch-size-normal-height: 32px;
+
+  --switch-size-compact-width: 40px;
+  --switch-size-compact-height: 24px;
+}

package/dist/css/components/Tab/Tab.tokens.css

@@ -0,0 +1,28 @@
+:root {
+  --tab-size-normal-padding: 12px;
+  --tab-size-normal-gap: 4px;
+
+  --tab-size-compact-padding: 12px;
+  --tab-size-compact-gap: 4px;
+
+  --tab-size-xxs-padding: 0px;
+  --tab-size-xxs-gap: 4px;
+
+  --tab-size-xs-padding: 3px;
+  --tab-size-xs-gap: 4px;
+
+  --tab-size-s-padding: 5px;
+  --tab-size-s-gap: 4px;
+
+  --tab-size-m-padding: 7px;
+  --tab-size-m-gap: 4px;
+
+  --tab-size-l-padding: 11px;
+  --tab-size-l-gap: 4px;
+
+  --tab-size-xl-padding: 15px;
+  --tab-size-xl-gap: 4px;
+
+  --tab-size-xxl-padding: 19px;
+  --tab-size-xxl-gap: 4px;
+}

package/dist/css/components/Textarea/Textarea.tokens.css

@@ -0,0 +1,7 @@
+:root {
+  --textarea-shape-rounded: 8px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-min-height: 80px;
+  --textarea-max-height: 80px;
+  --textarea-success-border: var(--color-surface-border-tertiary);
+}

package/dist/css/components/Tile/Tile.tokens.css

@@ -0,0 +1,9 @@
+:root {
+  --tile-size-normal-padding: 24px;
+  --tile-size-normal-gap: 24px;
+  --tile-size-normal-min-width: 320px;
+
+  --tile-wrapper-flex: 1 1;
+  --tile-wrapper-group-flex: 1;
+  --tile-title-margin-right: 40px;
+}

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

@@ -17,6 +17,9 @@
             stroke: none;
             fill: var(--color-$(type)-$(color));
           }
+          & path {
+            fill: var(--color-$(type)-item-$(color));
+          }
         }
       }
     }

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

@@ -0,0 +1,15 @@
+.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  {
+          &-$(color) {
+            & path {
+              fill: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/tokens/typography.css

@@ -1,6 +1,6 @@
 :root {
   --typography-min-viewport: 360px;
-  --typography-max-viewport: 1920px;
+  --typography-max-viewport: 2560px;
 
   --typography-h1-min: 32px;
   --typography-h1-max: 38px;

package/dist/hooks/useDeviceTargetClass.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import castArray from 'lodash/castArray';
 import camelCase from 'lodash/camelCase';
+import castArray from 'lodash/castArray';
 import { useUserDeviceContext } from '../context/UIContext.js';
 import 'react/jsx-runtime';
 import './useMediaQueries.js';

package/dist/stories/Appearance.stories.js

@@ -1,7 +1,7 @@
-import { badgeAppearance } from '../../../appearance/Badge'
-import { tabAppearance } from '../../../appearance/Tab'
 import { badgeConfig } from '../../Badge'
+import { badgeAppearance } from '../../Badge/Badge.appearance.'
 import { Tab, tabConfig } from '../Tab'
+import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'
 
 tabConfig.setAppearance(tabAppearance)

package/dist/stories/Badge.stories.js

@@ -1,4 +1,3 @@
-import { badgeAppearance } from '../../../appearance/Badge'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -10,6 +9,7 @@ import {
   textColorProps,
 } from '../../../constants'
 import { Badge, badgeConfig } from '../Badge'
+import { badgeAppearance } from '../Badge.appearance.'
 
 badgeConfig.setAppearance(badgeAppearance)
 

package/dist/stories/Button.stories.js

@@ -1,8 +1,8 @@
-import { badgeAppearance } from '../../../appearance/Badge'
-import { buttonAppearance } from '../../../appearance/Button'
-import { icon24 } from '../../../icons'
+// import { icon24 } from '../../../___icons'
 import { Badge, badgeConfig } from '../../Badge'
+import { badgeAppearance } from '../../Badge/Badge.appearance.'
 import { Button, buttonConfig } from '../Button'
+import { buttonAppearance } from '../Button.appearance'
 import { argTypes } from './args'
 
 badgeConfig.setAppearance(badgeAppearance)

package/dist/stories/Checkbox.stories.js

@@ -1,6 +1,6 @@
-import { checkboxState } from '../../../appearance/Checkbox'
 import { fillProps, textColorProps, textSizeProps } from '../../../constants'
 import { Checkbox, checkboxConfig } from '../Checkbox'
+import { checkboxState } from '../Checkbox.appearance'
 
 checkboxConfig.setState(checkboxState)