@itcase/ui 1.2.30 → 1.2.32

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

@@ -0,0 +1,36 @@
+.modal-sheet-bottom {
+  position: relative;
+  &__container {
+    background-color: var(
+      --modal-sheet-bottom-container-background,
+      var(--color-surface-primary)
+    ) !important;
+    border-radius: var(--modal-sheet-bottom-container-border-radius, 8px 8px 0 0) !important;
+  }
+  &__header {
+    height: 32px;
+    & .react-modal-sheet-header {
+      max-height: 32px;
+    }
+    & .react-modal-sheet-drag-indicator {
+      background-color: var(
+        --modal-sheet-bottom-header-grabber,
+        var(--color-surface-item-primary)
+      ) !important;
+    }
+  }
+  &__content {
+    margin: 0 0 32px 0;
+  }
+  &__backdrop {
+    background-color: var(
+      --modal-sheet-bottom-backdrop,
+      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,9 +1,8 @@
 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 'prop-types';
 import './useMediaQueries.js';
 import 'react-responsive';
 

package/dist/hooks/useStyles.js

@@ -5,7 +5,6 @@ import upperFirst from 'lodash/upperFirst';
 import { useUserDeviceContext } from '../context/UIContext.js';
 import styleAttributes from './styleAttributes.js';
 import 'react/jsx-runtime';
-import 'prop-types';
 import './useMediaQueries.js';
 import 'react-responsive';
 

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)
 

package/dist/stories/Chips.stories.js

@@ -1,6 +1,6 @@
-import { chipsAppearance } from '../../../appearance/Chips'
 import { Icon } from '../../Icon'
 import { Chips, chipsConfig } from '../Chips'
+import { chipsAppearance } from '../Chips.appearance'
 import { argTypes } from './args'
 
 chipsConfig.setAppearance(chipsAppearance)

package/dist/stories/DatePicker.stories.js

@@ -8,7 +8,7 @@ import {
   textColorProps,
   textSizeProps,
 } from '../../../constants'
-import { icon16 } from '../../../icons'
+// import { icon16 } from '../../../___icons'
 import { Button } from '../../Button'
 import { DatePickerInput } from '../DatePicker'
 

package/dist/stories/Group.stories.js

@@ -1,5 +1,3 @@
-import { badgeAppearance } from '../../../appearance/Badge'
-import { tabAppearance } from '../../../appearance/Tab'
 import {
   directionProps,
   fillProps,
@@ -9,7 +7,9 @@ import {
   wrapProps,
 } from '../../../constants'
 import { badgeConfig } from '../../Badge'
+import { badgeAppearance } from '../../Badge/Badge.appearance.'
 import { Tab, tabConfig } from '../Tab'
+import { tabAppearance } from '../Tab.appearance'
 import { TabGroup } from '../TabGroup'
 
 tabConfig.setAppearance(tabAppearance)

package/dist/stories/Icon.stories.js

@@ -1,5 +1,3 @@
-import { badgeAppearance } from '../../../appearance/Badge'
-import { iconAppearance } from '../../../appearance/Icon'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -11,7 +9,9 @@ import {
   sizePXProps,
 } from '../../../constants'
 import { Badge, badgeConfig } from '../../Badge'
+import { badgeAppearance } from '../../Badge/Badge.appearance.'
 import { Icon, iconConfig } from '../Icon'
+import { iconAppearance } from '../Icon.appearance'
 
 iconConfig.setAppearance(iconAppearance)
 

package/dist/stories/Input.stories.js

@@ -1,6 +1,6 @@
-import { inputState } from '../../../appearance/Input'
 import { borderColorProps, textColorProps, textSizeProps } from '../../../constants'
 import { Input, inputConfig } from '../Input'
+import { inputState } from '../Input.appearance'
 
 inputConfig.setState(inputState)
 

package/dist/stories/InputPassword.stories.js

@@ -1,4 +1,3 @@
-import { InputPasswordState } from '../../../appearance/InputPassword'
 import {
   borderColorProps,
   fillProps,
@@ -7,6 +6,7 @@ import {
   textSizeProps,
 } from '../../../constants'
 import { InputPassword, inputPasswordConfig } from '../InputPassword'
+import { InputPasswordState } from '../InputPassword.appearance'
 
 inputPasswordConfig.setState(InputPasswordState)
 

package/dist/stories/Label.stories.js

@@ -1,4 +1,3 @@
-import { labelAppearance } from '../../../appearance/Label'
 import {
   borderColorProps,
   borderTypeProps,
@@ -10,6 +9,7 @@ import {
   widthProps,
 } from '../../../constants'
 import { Label, labelConfig } from '../Label'
+import { labelAppearance } from '../Label.appearance'
 
 labelConfig.setAppearance(labelAppearance)
 

package/dist/stories/Loader.stories.js

@@ -1,4 +1,3 @@
-import { loaderAppearance } from '../../../appearance/Loader'
 import {
   heightProps,
   positionProps,
@@ -7,6 +6,7 @@ import {
   widthProps,
 } from '../../../constants'
 import { Loader, loaderConfig } from '../Loader'
+import { loaderAppearance } from '../Loader.appearance'
 
 loaderConfig.setAppearance(loaderAppearance)
 

package/dist/stories/MenuItem.stories.js

@@ -1,4 +1,3 @@
-import { menuItemAppearance } from '../../../appearance/MenuItem'
 import {
   fillProps,
   shapeProps,
@@ -14,6 +13,7 @@ import {
   underlineProps,
 } from '../../../constants'
 import { MenuItem, menuItemConfig } from '../MenuItem'
+import { menuItemAppearance } from '../MenuItem.appearance'
 
 menuItemConfig.setAppearance(menuItemAppearance)
 

package/dist/stories/ModalConfirm.stories.js

@@ -1,5 +1,5 @@
-import { buttonAppearance } from '../../../appearance/Button'
 import { Button, buttonConfig } from '../../Button'
+import { buttonAppearance } from '../../Button/Button.appearance'
 import { Group } from '../../Group'
 import { Title } from '../../Title'
 import { Modal } from '../Modal'

package/dist/stories/ModalDefault.stories.js

@@ -1,5 +1,5 @@
-import { buttonAppearance } from '../../../appearance/Button'
 import { Button, buttonConfig } from '../../Button'
+import { buttonAppearance } from '../../Button/Button.appearance'
 import { Modal } from '../Modal'
 
 buttonConfig.setAppearance(buttonAppearance)

package/dist/stories/ModalSheetBottom.stories.js

@@ -0,0 +1,47 @@
+import { Group } from '../../Group'
+import { Icon } from '../../Icon'
+import { Text } from '../../Text'
+import { ModalSheetBottom } from '../ModalSheetBottom'
+
+export default {
+  argTypes: {},
+  component: ModalSheetBottom,
+  title: 'Molecules / ModalSheetBottom ',
+}
+
+export const Default = {
+  args: {
+    children: (
+      <Group padding="20px 12px" direction="vertical" justifyContent="center">
+        <Text size="m" textColor="surfaceTextPrimary">
+          company
+        </Text>
+        <Text size="xs" textColor="surfaceTextPrimary">
+          inn
+        </Text>
+      </Group>
+    ),
+    isOpenModal: true,
+    fill: 'surfaceSecondary',
+    initialSnap: 0.5,
+  },
+}
+
+export const CloseButton = {
+  args: {
+    children: (
+      <Group padding="20px 12px" direction="vertical" justifyContent="center">
+        <Text size="m" textColor="surfaceTextPrimary">
+          company
+        </Text>
+        <Text size="xs" textColor="surfaceTextPrimary">
+          inn
+        </Text>
+      </Group>
+    ),
+    isOpenModal: true,
+    closeButton: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
+    fill: 'surfaceSecondary',
+    initialSnap: 0.5,
+  },
+}

package/dist/stories/Notification.stories.js

@@ -1,8 +1,8 @@
-import { buttonAppearance } from '../../../appearance/Button'
-import { notificationItemAppearance } from '../../../appearance/Notification'
 import { textSizeProps, titleSizeProps } from '../../../constants'
 import { Button, buttonConfig } from '../../Button'
+import { buttonAppearance } from '../../Button/Button.appearance'
 import { Icon } from '../../Icon'
+import { notificationItemAppearance } from '../NotificationItem.appearance'
 import { NotificationItem, notificationItemConfig } from '../NotificationItem'
 
 buttonConfig.setAppearance(buttonAppearance)

package/dist/stories/Radio.stories.js

@@ -1,6 +1,6 @@
-import { radioState } from '../../../appearance/Radio'
 import { shapeProps, textColorProps, textSizeProps } from '../../../constants'
 import { Radio, radioConfig } from '../Radio'
+import { radioState } from '../Radio.appearance'
 
 radioConfig.setState(radioState)
 

package/dist/stories/Response.stories.js

@@ -18,49 +18,75 @@ const Default = {
   },
 }
 
-export const WithoutProps = {
+export const Dev = {
   args: {
     ...Default.args,
+    padding: 24,
+    appearance: 'dev',
+    imageSrc: 'assets/response/Search.svg',
   },
 }
 
-export const Dev = {
+export const Custom = {
   args: {
     ...Default.args,
     padding: 24,
-    appearance: 'dev',
-    imageSrc: 'assets/search.svg',
+    appearance: 'custom',
   },
 }
 
 export const Success = {
   args: {
     ...Default.args,
-    imageSrc: 'assets/response/success.svg',
-    state: 'success',
+    appearance: 'success',
+    imageSrc: 'assets/response/Success.svg',
   },
 }
 
 export const Warning = {
   args: {
     ...Default.args,
-    imageSrc: 'assets/response/warning.svg',
-    state: 'warning',
+    appearance: 'warning',
+    imageSrc: 'assets/response/Warning.svg',
   },
 }
 
 export const Error = {
   args: {
     ...Default.args,
-    imageSrc: 'assets/response/error.svg',
-    state: 'error',
+    appearance: 'error',
+    imageSrc: 'assets/response/Error.svg',
   },
 }
 
 export const Fail = {
   args: {
     ...Default.args,
-    imageSrc: 'assets/response/fail.svg',
-    state: 'fail',
+    appearance: 'fail',
+    imageSrc: 'assets/response/Fail.svg',
+  },
+}
+
+export const CantLoadData = {
+  args: {
+    ...Default.args,
+    appearance: 'cantLoadData',
+    imageSrc: 'assets/response/CantLoadData.svg',
+  },
+}
+
+export const Refresh = {
+  args: {
+    ...Default.args,
+    appearance: 'refresh',
+    imageSrc: 'assets/response/Refresh.svg',
+  },
+}
+
+export const Search = {
+  args: {
+    ...Default.args,
+    appearance: 'search',
+    imageSrc: 'assets/response/Search.svg',
   },
 }

package/dist/stories/SearchInput.stories.js

@@ -1,6 +1,5 @@
 import { SearchInput, searchInputConfig } from '@itcase/ui/components/Search'
 
-import { searchAppearance } from '../../../appearance/Search'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -9,6 +8,7 @@ import {
   textColorProps,
   textSizeProps,
 } from '../../../constants'
+import { searchAppearance } from '../Search.appearance'
 
 searchInputConfig.setAppearance(searchAppearance)
 

package/dist/stories/Size.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'
 
 badgeConfig.setAppearance(badgeAppearance)

package/dist/stories/State.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'
 
 badgeConfig.setAppearance(badgeAppearance)

package/dist/stories/Textarea.stories.js

@@ -1,6 +1,6 @@
-import { textareaState } from '../../../appearance/Textarea'
 import { borderColorProps, sizeProps, textColorProps, textSizeProps } from '../../../constants'
 import { Textarea, textareaConfig } from '../Textarea'
+import { textareaState } from '../Textarea.appearance'
 
 textareaConfig.setState(textareaState)
 

package/dist/stories/Tile.stories.js

@@ -1,5 +1,3 @@
-import { badgeAppearance } from '../../../appearance/Badge'
-import { buttonAppearance } from '../../../appearance/Button'
 import {
   alignDirectionProps,
   alignProps,
@@ -18,9 +16,11 @@ import {
   textWrapProps,
   titleSizeProps,
 } from '../../../constants'
-import { icon24 } from '../../../icons'
+// import { icon24 } from '../../../___icons'
 import { badgeConfig } from '../../Badge'
+import { badgeAppearance } from '../../Badge/Badge.appearance.'
 import { Button, buttonConfig } from '../../Button'
+import { buttonAppearance } from '../../Button/Button.appearance'
 import { Tile } from '../Tile'
 
 badgeConfig.setAppearance(badgeAppearance)
@@ -194,7 +194,7 @@ export const Default = {
         position="absolute"
         top="0"
         right="0"
-        iconBefore={icon24.Add}
+        // iconBefore={icon24.Add}
         iconBeforeFill="accentItemPrimary"
         iconBeforeSize="24"
         shape="circular"

package/dist/stories/Tooltip.stories.js

@@ -1,4 +1,3 @@
-import { tooltipAppearance } from '../../../appearance/Tooltip'
 import {
   alignDirectionProps,
   alignmentProps,
@@ -14,6 +13,7 @@ import {
   widthProps,
 } from '../../../constants'
 import { Tooltip, tooltipConfig } from '../Tooltip'
+import { tooltipAppearance } from '../Tooltip.appearance'
 
 tooltipConfig.setAppearance(tooltipAppearance)