@itcase/ui 1.9.10 → 1.9.12

package/dist/{ChipsGroup_cjs_BaaOwVai.js → ChipsGroup_cjs_BQ27ybIx.js}

@@ -332,14 +332,15 @@ function Chips(props) {
 }
 
 function ChipsGroup(props) {
-    const { className, chipsList, dataTestId, dataTour, horizontalScroll, style, onClick, children, } = props;
+    const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
-                ? children
-                : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
+    const { styles: groupStyles } = useStyles.useStyles(props);
+    console.log();
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
+            ? children
+            : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: () => onClick(item) }, item.id))) }));
 }
 
 exports.Chips = Chips;

package/dist/{ChipsGroup_es_5mF_atdB.js → ChipsGroup_es_DFVf6wUN.js}

@@ -330,14 +330,15 @@ function Chips(props) {
 }
 
 function ChipsGroup(props) {
-    const { className, chipsList, dataTestId, dataTour, horizontalScroll, style, onClick, children, } = props;
+    const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
-                ? children
-                : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
+    const { styles: groupStyles } = useStyles(props);
+    console.log();
+    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
+            ? children
+            : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: () => onClick(item) }, item.id))) }));
 }
 
 export { Chips as C, chipsAppearance as a, ChipsGroup as b, chipsConfig as c };

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_BaaOwVai.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BQ27ybIx.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/cjs/components/DatePeriod.js

@@ -7,7 +7,7 @@ var luxon = require('luxon');
 var common = require('@itcase/common');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_BaaOwVai.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BQ27ybIx.js');
 var DatePicker = require('../../DatePicker_cjs_D9q-RqJu.js');
 require('react-select');
 require('../../Icon_cjs_NpWSQezS.js');

package/dist/cjs/components/Tile.js

@@ -123,31 +123,31 @@ const tileAppearanceSurface = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
 };
 

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_5mF_atdB.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_DFVf6wUN.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/components/DatePeriod.js

@@ -5,7 +5,7 @@ import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_5mF_atdB.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_DFVf6wUN.js';
 import { D as DatePickerInput } from '../DatePicker_es_C8h_4BAl.js';
 import 'react-select';
 import '../Icon_es_CJuX1p1_.js';

package/dist/components/Tile.js

@@ -121,31 +121,31 @@ const tileAppearanceSurface = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'accentPrimary',
-        iconFillIcon: 'surfaceItemPrimary',
+        iconAppearance: 'accentPrimary',
     },
 };
 

package/dist/css/mixins/mixin_typography_print.css

@@ -0,0 +1,112 @@
+@define-mixin h1-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h1-print),
+    var(--typography-h1-line-height-print), var(--typography-h1-font-print);
+}
+
+@define-mixin h2-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h2-print),
+    var(--typography-h2-line-height-print), var(--typography-h2-font-print);
+}
+
+@define-mixin h3-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h3-print),
+    var(--typography-h3-line-height-print), var(--typography-h3-font-print);
+}
+
+@define-mixin h4-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h4-print),
+    var(--typography-h4-line-height-print), var(--typography-h4-font-print);
+}
+
+@define-mixin h5-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h5-print),
+    var(--typography-h5-line-height-print), var(--typography-h5-font-print);
+}
+
+@define-mixin h6-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h6-print),
+    var(--typography-h6-line-height-print), var(--typography-h6-font-print);
+}
+
+@define-mixin hero_h1-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero1-print),
+    var(--typography-hero1-line-height-print),
+    var(--typography-hero1-font-print);
+}
+
+@define-mixin hero_h2-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero2-print),
+    var(--typography-hero2-line-height-print),
+    var(--typography-hero2-font-print);
+}
+
+@define-mixin hero_h3-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero3-print),
+    var(--typography-hero3-line-height-print),
+    var(--typography-hero3-font-print);
+}
+
+@define-mixin hero_h4-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero4-print),
+    var(--typography-hero4-line-height-print),
+    var(--typography-hero4-font-print);
+}
+
+@define-mixin hero_h5-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero5-print),
+    var(--typography-hero5-line-height-print),
+    var(--typography-hero5-font-print);
+}
+
+@define-mixin hero_h6-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero6-print),
+    var(--typography-hero6-line-height-print),
+    var(--typography-hero6-font-print);
+}
+
+@define-mixin p-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-p-print),
+    var(--typography-p-line-height-print), var(--typography-p-font-print);
+}
+
+@define-mixin text-xxl-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xxl-print),
+    var(--typography-text-xxl-line-height-print),
+    var(--typography-text-xxl-font-print);
+}
+
+@define-mixin text-xl-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xl-print),
+    var(--typography-text-xl-line-height-print),
+    var(--typography-text-xl-font-print);
+}
+
+@define-mixin text-l-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-l-print),
+    var(--typography-text-l-line-height-print),
+    var(--typography-text-l-font-print);
+}
+
+@define-mixin text-m-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-m-print),
+    var(--typography-text-m-line-height-print),
+    var(--typography-text-m-font-print);
+}
+
+@define-mixin text-s-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-s-print),
+    var(--typography-text-s-line-height-print),
+    var(--typography-text-s-font-print);
+}
+
+@define-mixin text-xs-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xs-print),
+    var(--typography-text-xs-line-height-print),
+    var(--typography-text-xs-font-print);
+}
+
+@define-mixin text-xxs-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xxs-print),
+    var(--typography-text-xxs-line-height-print),
+    var(--typography-text-xxs-font-print);
+}

package/dist/css/styles/bundles.css

@@ -43855,6 +43855,9 @@ textarea.fill {
     &_tertiary {
       font-family: var(--font-tertiary);
     }
+    &_print {
+      font-family: var(--font-print);
+    }
 }
 .text-gradient {
   &_primary {
@@ -99311,6 +99314,41 @@ div.swiper-pagination {
         margin: 0;
         @mixin text-xxs;
       }
+      &_xxl {
+        padding: 0;
+        margin: 0;
+        @mixin text-xxl-print;
+      }
+      &_xl {
+        padding: 0;
+        margin: 0;
+        @mixin text-xl-print;
+      }
+      &_l {
+        padding: 0;
+        margin: 0;
+        @mixin text-l-print;
+      }
+      &_m {
+        padding: 0;
+        margin: 0;
+        @mixin text-m-print;
+      }
+      &_s {
+        padding: 0;
+        margin: 0;
+        @mixin text-s-print;
+      }
+      &_xs {
+        padding: 0;
+        margin: 0;
+        @mixin text-xs-print;
+      }
+      &_xxs {
+        padding: 0;
+        margin: 0;
+        @mixin text-xxs-print;
+      }
       &_h1 {
         padding: 0;
         margin: 0;
@@ -99341,13 +99379,95 @@ div.swiper-pagination {
         margin: 0;
         @mixin h6;
       }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin h1-print;
+      }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin h2-print;
+      }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin h3-print;
+      }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin h4-print;
+      }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin h5-print;
+      }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin h6-print;
+      }
       &_p {
         padding: 0;
         margin: 0;
         @mixin p;
       }
+      &_$(sizeP) {
+        padding: 0;
+        margin: 0;
+        @mixin p-print;
+      }
   }
 }
+/* .text {
+  &_size {
+
+    @each $sizeText in xxl, xl, l, m, s, xs, xxs {
+      &_$(sizeText) {
+        padding: 0;
+        margin: 0;
+        @mixin text-$(sizeText);
+      }
+    }
+    @each $sizeTextPrint in xxl, xl, l, m, s, xs, xxs {
+      &_$(sizeTextPrint) {
+        padding: 0;
+        margin: 0;
+        @mixin text-$(sizeTextPrint)-print;
+      }
+    }
+    @each $size in h1, h2, h3, h4, h5, h6 {
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin $(size);
+      }
+    }
+    @each $sizePrint in h1, h2, h3, h4, h5, h6 {
+      &_$(sizePrint) {
+        padding: 0;
+        margin: 0;
+        @mixin $(size)-print;
+      }
+    }
+    @each $sizeP in p {
+      &_$(sizeP) {
+        padding: 0;
+        margin: 0;
+        @mixin $(sizeP);
+      }
+    }
+    @each $sizePPrint in p {
+      &_$(sizePPrint) {
+        padding: 0;
+        margin: 0;
+        @mixin $(sizePPrint)-print;
+      }
+    }
+  }
+} */
 .textarea {
   width: 100%;
   min-width: 100%;

package/dist/types/components/Tile/Tile.interface.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { AlignProps, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, FillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, ShapeStrengthProps, SizeProps, TextAlignProps, TextColorProps, TextSizeProps, TextWeightProps, TextWrapProps, TitleSizeProps } from '@itcase/types';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 type TileAppearanceProps = {
+    badgeAppearance?: AppearanceKeysDefault;
     badgeAppearanceSize?: AppearanceSizeKey;
     badgeShape?: ShapeProps;
     badgeSize?: SizeProps;
@@ -69,4 +70,4 @@ type TileConfig = {
     appearance: TileAppearance;
     setAppearance: (appearanceConfig: TileAppearance) => void;
 };
-export type { TileAppearanceProps, TileAppearance, TileConfig, TileProps };
+export type { TileAppearance, TileAppearanceProps, TileConfig, TileProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.10",
+  "version": "1.9.12",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -101,11 +101,11 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
-    "@itcase/common": "^1.2.33",
+    "@itcase/common": "^1.2.34",
     "@itcase/icons": "^1.2.23",
-    "@itcase/storybook-config": "^1.2.24",
-    "@itcase/tokens-am": "^1.1.31",
-    "@itcase/tokens-baikal": "^1.1.31",
+    "@itcase/storybook-config": "^1.2.28",
+    "@itcase/tokens-am": "^1.1.33",
+    "@itcase/tokens-baikal": "^1.1.33",
     "@itcase/tokens-palette": "^1.1.29",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -139,8 +139,8 @@
     "@babel/preset-react": "^7.28.5",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@itcase/config": "^1.0.63",
-    "@itcase/lint": "^1.1.68",
+    "@itcase/config": "^1.0.68",
+    "@itcase/lint": "^1.1.69",
     "@itcase/types": "^1.1.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^6.1.0",
@@ -168,13 +168,13 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
-    "rollup": "^4.53.2",
+    "rollup": "^4.53.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.9",
-    "storybook": "^10.0.7",
+    "storybook": "^10.0.8",
     "stylelint": "^16.25.0",
     "typescript": "^5.9.3"
   }