@itcase/ui 1.4.6 → 1.4.8

package/dist/types/types/componentProps/textSize.d.ts

@@ -1,3 +1,3 @@
-declare const textSizeProps: readonly [undefined, false, "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+declare const textSizeProps: readonly ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
 export type tTextSizeProps = (typeof textSizeProps)[number];
 export { textSizeProps };

package/dist/types/types/componentProps/textStyle.d.ts

@@ -1,3 +1,3 @@
-declare const textStyleProps: readonly [undefined, false, "normal", "italic"];
+declare const textStyleProps: readonly ["normal", "italic"];
 export type tTextStyleProps = (typeof textStyleProps)[number];
 export { textStyleProps };

package/dist/types/types/componentProps/textTag.d.ts

@@ -1,3 +1,3 @@
-declare const textTagProps: readonly [undefined, false, "p", "span"];
+declare const textTagProps: readonly ["p", "span"];
 export type tTextTagProps = (typeof textTagProps)[number];
 export { textTagProps };

package/dist/types/types/componentProps/textWeight.d.ts

@@ -1,3 +1,3 @@
-declare const textWeightProps: readonly [undefined, false, "normal", "bold", "light", "lighter", "bolder", 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+declare const textWeightProps: readonly ["normal", "bold", "light", "lighter", "bolder", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
 export type tTextWeightProps = (typeof textWeightProps)[number];
 export { textWeightProps };

package/dist/types/types/componentProps/textWrap.d.ts

@@ -1,3 +1,3 @@
-declare const textWrapProps: readonly [undefined, false, "wrap", "nowrap"];
+declare const textWrapProps: readonly ["wrap", "nowrap"];
 export type tTextWrapProps = (typeof textWrapProps)[number];
 export { textWrapProps };

package/dist/types/types/componentProps/titleSize.d.ts

@@ -1,5 +1,5 @@
-declare const titleSizeHeadingProps: readonly [undefined, false, "h1", "h2", "h3", "h4", "h5", "h6"];
-declare const titleSizeProps: readonly [undefined, false, "xxl", "xl", "l", "m", "s", "xs", "xxs"];
+declare const titleSizeHeadingProps: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+declare const titleSizeProps: readonly ["xxl", "xl", "l", "m", "s", "xs", "xxs"];
 export type tTitleSizeProps = (typeof titleSizeProps)[number];
 export type tTitleSizeHeadingProps = (typeof titleSizeHeadingProps)[number];
 export { titleSizeProps, titleSizeHeadingProps };

package/dist/types/types/componentProps/type.d.ts

@@ -1,3 +1,3 @@
-declare const typeProps: readonly [undefined, false, "accent", "primary", "secondary", "tertiary", "surface", "error", "success"];
+declare const typeProps: readonly ["accent", "primary", "secondary", "tertiary", "surface", "error", "success"];
 export type tTypeProps = (typeof typeProps)[number];
 export { typeProps };

package/dist/types/types/componentProps/underline.d.ts

@@ -1,3 +1,3 @@
-declare const underlineProps: readonly [undefined, false, "none", "underline"];
+declare const underlineProps: readonly ["none", "underline"];
 export type tUnderlineProps = (typeof underlineProps)[number];
 export { underlineProps };

package/dist/types/types/componentProps/verticalContentAlign.d.ts

@@ -1,3 +1,3 @@
-declare const verticalContentAlignProps: readonly [undefined, false, "center"];
+declare const verticalContentAlignProps: readonly ["center"];
 export type tVerticalContentAlignProps = (typeof verticalContentAlignProps)[number];
 export { verticalContentAlignProps };

package/dist/types/types/componentProps/verticalResizeMode.d.ts

@@ -1,3 +1,3 @@
-declare const verticalResizeModeProps: readonly [undefined, false, "fixed", "hug", "fill"];
+declare const verticalResizeModeProps: readonly ["fixed", "hug", "fill"];
 export type tVerticalResizeModeProps = (typeof verticalResizeModeProps)[number];
 export { verticalResizeModeProps };

package/dist/types/types/componentProps/width.d.ts

@@ -1,3 +1,3 @@
-declare const widthProps: readonly [undefined, false, "auto", "fixed", "hug", "fill"];
+declare const widthProps: readonly ["auto", "fixed", "hug", "fill"];
 export type tWidthProps = (typeof widthProps)[number];
 export { widthProps };

package/dist/types/types/componentProps/wrap.d.ts

@@ -1,3 +1,3 @@
-declare const wrapProps: readonly [undefined, false, "wrap", "no-wrap", "nowrap", "wrap-reverse"];
+declare const wrapProps: readonly ["wrap", "no-wrap", "nowrap", "wrap-reverse"];
 export type tWrapProps = (typeof wrapProps)[number];
 export { wrapProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -89,18 +89,27 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.22",
     "@itcase/config": "^1.0.26",
     "@itcase/icons": "^1.0.29",
-    "@itcase/storybook-config": "^1.1.3",
+    "@itcase/storybook-config": "^1.1.8",
+    "@itcase/tokens-am": "^1.0.28",
+    "@itcase/tokens-baikal": "^1.0.30",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.6.5",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "framer-motion": "^12.7.3",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.6.5",
+    "motion": "^12.7.3",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -125,7 +134,8 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@itcase/lint": "^1.1.4",
+    "@itcase/lint": "^1.1.5",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-image": "^3.0.3",
@@ -151,13 +161,13 @@
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "eslint": "9.24.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^15.5.1",
     "npm": "^11.3.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "react-docgen-typescript": "^2.2.2",
     "react-svg": "^16.3.0",
-    "rollup": "^4.39.0",
+    "rollup": "^4.40.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -166,10 +176,5 @@
     "storybook": "^8.6.12",
     "stylelint": "^16.18.0",
     "typescript": "^5.8.3"
-  },
-  "msw": {
-    "workerDirectory": [
-      "public"
-    ]
   }
 }

package/dist/Title-BWWyRwLY.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var UIContext = require('./cjs/context/UIContext.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-var titleAppearance = {
-    dev: {
-        textColor: 'surfaceTextPrimary',
-    },
-};
-
-var titleConfig = {
-    appearance: titleAppearance,
-    setAppearance: function (newComponent) {
-        titleConfig.appearance = newComponent;
-    },
-};
-function Title(props) {
-    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === void 0 ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
-    var _c = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
-    // @ts-expect-error
-    var appearanceConfig = titleConfig.appearance && titleConfig.appearance[appearance];
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
-    // @ts-expect-error
-    var _d = useStyles.useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
-    // Element type (h1, h2, ..., h6)
-    var Tag = React.useMemo(function () {
-        if (tag) {
-            return tag;
-        }
-        if (isMobile && sizeMobile) {
-            return sizeMobile;
-        }
-        if (isTablet && sizeTablet) {
-            return sizeTablet;
-        }
-        if (isDesktop && sizeDesktop) {
-            return sizeDesktop;
-        }
-        return size ? size : 'span';
-    }, [isMobile, isTablet, isDesktop]);
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-testid": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
-}
-
-exports.Title = Title;
-exports.titleAppearance = titleAppearance;
-exports.titleConfig = titleConfig;

package/dist/Title-Dck3eHNM.js

@@ -1,48 +0,0 @@
-import { jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import clsx from 'clsx';
-import { useUserDeviceContext } from './context/UIContext.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-
-var titleAppearance = {
-    dev: {
-        textColor: 'surfaceTextPrimary',
-    },
-};
-
-var titleConfig = {
-    appearance: titleAppearance,
-    setAppearance: function (newComponent) {
-        titleConfig.appearance = newComponent;
-    },
-};
-function Title(props) {
-    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === void 0 ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
-    var _c = useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
-    // @ts-expect-error
-    var appearanceConfig = titleConfig.appearance && titleConfig.appearance[appearance];
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
-    // @ts-expect-error
-    var _d = useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
-    // Element type (h1, h2, ..., h6)
-    var Tag = useMemo(function () {
-        if (tag) {
-            return tag;
-        }
-        if (isMobile && sizeMobile) {
-            return sizeMobile;
-        }
-        if (isTablet && sizeTablet) {
-            return sizeTablet;
-        }
-        if (isDesktop && sizeDesktop) {
-            return sizeDesktop;
-        }
-        return size ? size : 'span';
-    }, [isMobile, isTablet, isDesktop]);
-    return (jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-testid": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
-}
-
-export { Title as T, titleAppearance as a, titleConfig as t };

package/dist/cjs/components/Card.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Image = require('../../Image-BEGwuGBM.js');
-var Text = require('../../Text-C49zj3jO.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('react');
-require('lodash/camelCase');
-require('lodash/castArray');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
-require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks/useStyles/useStyles.js');
-require('lodash/maxBy');
-require('../hooks/useStyles/styleAttributes.js');
-
-function Card(props) {
-    var children = props.children, className = props.className, image = props.image, _a = props.imageShape, imageShape = _a === void 0 ? 'rounded' : _a, size = props.size, src = props.src, text = props.text, _b = props.textColor, textColor = _b === void 0 ? 'surfaceTextPrimary' : _b, _c = props.textSize, textSize = _c === void 0 ? 'p' : _c, textTag = props.textTag, title = props.title, _d = props.titleColor, titleColor = _d === void 0 ? 'surfaceTextPrimary' : _d, _e = props.titleSize, titleSize = _e === void 0 ? 'h5' : _e, _f = props.titleTag, titleTag = _f === void 0 ? 'span' : _f, type = props.type, onClick = props.onClick;
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'card', shapeClass && "card_shape_".concat(shapeClass), size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass && "resize-horizontal_".concat(widthClass)), onClick: onClick, children: jsxRuntime.jsxs("div", { className: "card__wrapper", children: [image, src && jsxRuntime.jsx(Image.Image, { className: "card__image", shape: imageShape, src: src }), jsxRuntime.jsxs("div", { className: "card__data", children: [title && (jsxRuntime.jsx(Text.Text, { className: "card__data-title", size: titleSize, tag: titleTag, textColor: titleColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "card__data-desc", size: textSize, tag: textTag, textColor: textColor, children: text }))] }), children] }) }));
-}
-
-exports.Card = Card;

package/dist/components/Card.js

@@ -1,26 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Image } from '../Image-DWfyapuD.js';
-import { T as Text } from '../Text-C6NSmetx.js';
-import '../tslib.es6-5FtW-kfi.js';
-import 'react';
-import 'lodash/camelCase';
-import 'lodash/castArray';
-import 'lodash/upperFirst';
-import '../context/UIContext.js';
-import '../hooks/useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../utils/setViewportProperty.js';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
-import '../hooks/useStyles/styleAttributes.js';
-
-function Card(props) {
-    var children = props.children, className = props.className, image = props.image, _a = props.imageShape, imageShape = _a === void 0 ? 'rounded' : _a, size = props.size, src = props.src, text = props.text, _b = props.textColor, textColor = _b === void 0 ? 'surfaceTextPrimary' : _b, _c = props.textSize, textSize = _c === void 0 ? 'p' : _c, textTag = props.textTag, title = props.title, _d = props.titleColor, titleColor = _d === void 0 ? 'surfaceTextPrimary' : _d, _e = props.titleSize, titleSize = _e === void 0 ? 'h5' : _e, _f = props.titleTag, titleTag = _f === void 0 ? 'span' : _f, type = props.type, onClick = props.onClick;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
-    return (jsx("div", { className: clsx(className, 'card', shapeClass && "card_shape_".concat(shapeClass), size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass && "resize-horizontal_".concat(widthClass)), onClick: onClick, children: jsxs("div", { className: "card__wrapper", children: [image, src && jsx(Image, { className: "card__image", shape: imageShape, src: src }), jsxs("div", { className: "card__data", children: [title && (jsx(Text, { className: "card__data-title", size: titleSize, tag: titleTag, textColor: titleColor, children: title })), text && (jsx(Text, { className: "card__data-desc", size: textSize, tag: textTag, textColor: textColor, children: text }))] }), children] }) }));
-}
-
-export { Card };

package/dist/css/components/Card/Card.css

@@ -1,18 +0,0 @@
-.card {
-  &__wrapper {
-    display: flex;
-    flex-flow: column nowrap;
-    ^&__image {
-      width: 100%;
-    }
-    ^&__data {
-      display: flex;
-      flex-flow: column nowrap;
-    }
-    ^&__icon {
-      padding: 8px 0 0 0;
-      display: flex;
-      gap: 16px;
-    }
-  }
-}

package/dist/css/tokens/colors.css

@@ -1,126 +0,0 @@
-/* stylelint-disable custom-property-empty-line-before, value-keyword-case */
-
-:root {
-  --color-accent-primary: hsla(92, 49%, 47%, 1);
-  --color-accent-secondary: hsla(92, 28%, 62%, 1);
-  --color-accent-tertiary: hsla(93, 53%, 93%, 1);
-  --color-accent-quaternary: hsla(92, 71%, 27%, 1);
-
-  --color-accent-text-primary: hsla(0, 0%, 100%, 1);
-  --color-accent-text-secondary: hsla(92, 71%, 27%, 1);
-  --color-accent-text-tertiary: hsla(92, 49%, 47%, 1);
-  --color-accent-text-quaternary: hsla(0, 0%, 100%, 1);
-
-  --color-accent-item-primary: hsla(0, 0%, 100%, 1);
-  --color-accent-item-secondary: hsla(92, 37%, 35%, 1);
-  --color-accent-item-tertiary: hsla(92, 49%, 47%, 1);
-  --color-accent-item-quaternary: hsla(0, 0%, 100%, 1);
-
-  --color-accent-border-primary: hsla(92, 37%, 35%, 1);
-  --color-accent-border-secondary: hsla(92, 37%, 35%, 1);
-  --color-accent-border-tertiary: hsla(92, 49%, 47%, 1);
-  --color-accent-border-quaternary: hsla(0, 0%, 100%, 1);
-
-  --color-primary: hsla(0, 94%, 66%, 1);
-  --color-primary-primary: hsla(0, 94%, 66%, 1);
-  --color-primary-secondary: hsla(360, 94%, 80%, 1);
-  --color-primary-hover-primary: hsla(0, 94%, 66%, 1);
-  --color-primary-hover-secondary: hsla(0, 94%, 95%, 1);
-
-  --color-primary-text-primary: hsla(0, 0%, 100%, 1);
-  --color-primary-text-secondary: hsla(0, 94%, 66%, 1);
-
-  --color-primary-item-primary: hsla(0, 0%, 100%, 1);
-  --color-primary-item-secondary: hsla(0, 94%, 66%, 1);
-
-  --color-primary-border-primary: hsla(0, 0%, 100%, 1);
-  --color-primary-border-secondary: hsla(0, 94%, 66%, 1);
-
-  --color-secondary: hsla(210, 8%, 75%, 1);
-  --color-secondary-primary: hsla(210, 8%, 75%, 1);
-  --color-secondary-primary-hover: hsla(210, 8%, 1%, 1);
-
-  --color-secondary-secondary: hsla(210, 7%, 85%, 1);
-  --color-secondary-secondary-hover: hsla(210, 8%, 95%, 1);
-
-  --color-secondary-text-primary: hsla(0, 0%, 100%, 1);
-  --color-secondary-text-secondary: hsla(0, 0%, 59%, 1);
-  --color-secondary-text-tertiary: hsla(0, 0%, 34%, 1);
-
-  --color-secondary-item-primary: hsla(0, 0%, 100%, 1);
-  --color-secondary-item-secondary: hsla(0, 0%, 59%, 1);
-
-  --color-secondary-border-primary: hsla(210, 8%, 75%, 1);
-
-  --color-tertiary-primary: hsla(50, 100%, 62%, 1);
-  --color-tertiary-secondary: hsla(50, 100%, 77%, 1);
-
-  --color-tertiary-text-primary: hsla(0, 0%, 34%, 1);
-  --color-tertiary-text-secondary: hsla(50, 100%, 62%, 1);
-
-  --color-tertiary-item-primary: hsla(0, 0%, 34%, 1);
-
-  --color-surface-primary: hsla(0, 0%, 100%, 1);
-  --color-surface-primary-hover: hsla(0, 0%, 98%, 1);
-
-  --color-surface-secondary: hsla(220, 14%, 96%, 1);
-  --color-surface-secondary-hover: hsla(0, 0%, 98%, 1);
-
-  --color-surface-tertiary: hsla(0, 0%, 85%, 1);
-  --color-surface-tertiary-hover: hsla(0, 0%, 95%, 1);
-
-  --color-surface-quaternary: hsla(0, 0%, 97%, 1);
-  --color-surface-quaternary-hover: hsla(0, 0%, 95%, 1);
-
-  --color-surface-text-primary: hsla(0, 0%, 34%, 1);
-  --color-surface-text-primary-hover: hsla(216, 99%, 63%, 1);
-  --color-surface-text-secondary: hsla(210, 9%, 56%, 1);
-  --color-surface-text-tertiary: hsla(210, 12%, 76%, 1);
-  --color-surface-text-quaternary: hsla(0, 94%, 66%, 1);
-
-  --color-surface-text-accent: hsla(216, 99%, 63%, 1);
-  --color-surface-text-accent-hover: hsla(216, 99%, 43%, 1);
-
-  --color-surface-item-primary: hsla(0, 0%, 34%, 1);
-  --color-surface-item-secondary: hsla(210, 8%, 75%, 1);
-  --color-surface-item-accent: hsla(216, 99%, 63%, 1);
-
-  --color-surface-border-primary: hsla(0, 0%, 34%, 1);
-  --color-surface-border-secondary: hsla(0, 0%, 59%, 1);
-  --color-surface-border-tertiary: hsla(210, 5%, 89%, 1);
-  --color-surface-border-accent: hsla(216, 99%, 63%, 1);
-
-  --color-gradient-primary: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
-
-  --color-success: hsla(107, 100%, 34%, 1);
-
-  --color-success-item-primary: hsla(0, 0%, 100%, 1);
-
-  --color-success-primary: hsla(107, 100%, 34%, 1);
-  --color-success-text-primary: hsla(107, 100%, 34%, 1);
-  --color-success-text-secondary: hsla(0, 0%, 100%, 1);
-
-  --color-success-border-primary: hsla(107, 100%, 34%, 1);
-
-  --color-warning-primary: hsla(43, 68%, 50%, 1);
-  --color-warning-text-primary: hsla(43, 68%, 50%, 1);
-  --color-warning-text-secondary: hsla(0, 0%, 100%, 1);
-
-  --color-warning-border-primary: hsla(43, 68%, 50%, 1);
-
-  --color-danger-primary: hsla(349, 96%, 44%, 1);
-  --color-danger-text-primary: hsla(349, 96%, 44%, 1);
-  --color-danger-text-secondary: hsla(0, 0%, 100%, 1);
-
-  --color-danger-border-primary: hsla(349, 96%, 44%, 1);
-
-  --color-error-primary: hsla(6, 99%, 57%, 1);
-  --color-error-text-primary: hsla(0, 0%, 100%, 1);
-  --color-error-text-secondary: hsla(6, 99%, 57%, 1);
-
-  --color-error-item-primary: hsla(0, 0%, 100%, 1);
-
-  --color-error-border-primary: hsla(6, 99%, 57%, 1);
-
-  --color-fader: hsla(0, 0%, 59%, 0.2);
-}

package/dist/css/tokens/elevation.css

@@ -1,10 +0,0 @@
-:root {
-  --elevation-1: 0px 1px 1px rgba(0, 0, 0, 0.24);
-  --elevation-2: 0px 2px 4px rgba(0, 0, 0, 0.24);
-  --elevation-4: 0px 2px 6px rgba(0, 0, 0, 0.24);
-  --elevation-6: 0px 2px 6px rgba(0, 0, 0, 0.24);
-  --elevation-8: 0px 4px 8px rgba(0, 0, 0, 0.16);
-  --elevation-12: 0px 6px 12px rgba(0, 0, 0, 0.16);
-  --elevation-16: 0px 8px 16px rgba(0, 0, 0, 0.16);
-  --elevation-24: 0px 16px 24px rgba(0, 0, 0, 0.12);
-}

package/dist/css/tokens/settings.css

@@ -1,31 +0,0 @@
-/* stylelint-disable custom-property-empty-line-before, value-keyword-case */
-
-:root {
-  --min-max: 375px 1440px;
-  --min: 320px;
-  --max: 1440px;
-}
-
-@media (--mobile) {
-  :root {
-    --wrapper-margin: 16px;
-  }
-}
-
-@media (--tablet), (--desktop-small), (--desktop-medium) {
-  :root {
-    --wrapper-margin: 24px;
-  }
-}
-
-@media (--desktop-normal) {
-  :root {
-    --wrapper-margin: 40px;
-  }
-}
-
-@media (--desktop) {
-  :root {
-    --wrapper-margin: 96px;
-  }
-}

package/dist/css/tokens/typography.css

@@ -1,130 +0,0 @@
-:root {
-  --typography-min-viewport: 360px;
-  --typography-max-viewport: 2560px;
-
-  --typography-h1-min: 32px;
-  --typography-h1-max: 38px;
-  --typography-h1-min-line-height: 64px;
-  --typography-h1-max-line-height: 80px;
-  --typography-h1-font: var(--font-primary);
-
-  --typography-h2-min: 26px;
-  --typography-h2-max: 32px;
-  --typography-h2-min-line-height: 46px;
-  --typography-h2-max-line-height: 58px;
-  --typography-h2-font: var(--font-primary);
-
-  --typography-h3-min: 18px;
-  --typography-h3-max: 24px;
-  --typography-h3-min-line-height: 32px;
-  --typography-h3-max-line-height: 40px;
-  --typography-h3-font: var(--font-primary);
-
-  --typography-h4-min: 16px;
-  --typography-h4-max: 18px;
-  --typography-h4-min-line-height: 24px;
-  --typography-h4-max-line-height: 30px;
-  --typography-h4-font: var(--font-primary);
-
-  --typography-h5-min: 14px;
-  --typography-h5-max: 16px;
-  --typography-h5-min-line-height: 18px;
-  --typography-h5-max-line-height: 26px;
-  --typography-h5-font: var(--font-primary);
-
-  --typography-h6-min: 12px;
-  --typography-h6-max: 18px;
-  --typography-h6-min-line-height: 16px;
-  --typography-h6-max-line-height: 24px;
-  --typography-h6-font: var(--font-primary);
-
-  --typography-p-min: 16px;
-  --typography-p-max: 24px;
-  --typography-p-min-line-height: 24px;
-  --typography-p-max-line-height: 36px;
-  --typography-p-font: var(--font-primary);
-
-  --typography-text-xxl-min: 24px;
-  --typography-text-xxl-max: 28px;
-  --typography-text-xxl-min-line-height: 24px;
-  --typography-text-xxl-max-line-height: 28px;
-  --typography-text-xxl-font: var(--font-primary);
-
-  --typography-text-xl-min: 20px;
-  --typography-text-xl-max: 24px;
-  --typography-text-xl-min-line-height: 20px;
-  --typography-text-xl-max-line-height: 24px;
-  --typography-text-xl-font: var(--font-primary);
-
-  --typography-text-l-min: 18px;
-  --typography-text-l-max: 24px;
-  --typography-text-l-min-line-height: 18px;
-  --typography-text-l-max-line-height: 24px;
-  --typography-text-l-font: var(--font-primary);
-
-  --typography-text-m-min: 16px;
-  --typography-text-m-max: 18px;
-  --typography-text-m-min-line-height: 16px;
-  --typography-text-m-max-line-height: 20px;
-  --typography-text-m-font: var(--font-primary);
-
-  --typography-text-s-min: 14px;
-  --typography-text-s-max: 18px;
-  --typography-text-s-min-line-height: 14px;
-  --typography-text-s-max-line-height: 18px;
-  --typography-text-s-font: var(--font-primary);
-
-  --typography-text-xs-min: 12px;
-  --typography-text-xs-max: 16px;
-  --typography-text-xs-min-line-height: 12px;
-  --typography-text-xs-max-line-height: 16px;
-  --typography-text-xs-font: var(--font-primary);
-
-  --typography-text-xxs-min: 10px;
-  --typography-text-xxs-max: 14px;
-  --typography-text-xxs-min-line-height: 10px;
-  --typography-text-xxs-max-line-height: 14px;
-  --typography-text-xxs-font: var(--font-primary);
-
-  --typography-email-h1: 32px;
-  --typography-email-h1-line-height: 38px;
-
-  --typography-email-h2: 26px;
-  --typography-email-h2-line-height: 32px;
-
-  --typography-email-h3: 18px;
-  --typography-email-h3-line-height: 24px;
-
-  --typography-email-h4: 24px;
-  --typography-email-h4-line-height: 30px;
-
-  --typography-email-h5: 18px;
-  --typography-email-h5-line-height: 24px;
-
-  --typography-email-h6: 12px;
-  --typography-email-h6-line-height: 18px;
-
-  --typography-email-p: 16px;
-  --typography-email-p-line-height: 24px;
-
-  --typography-email-text-xxl: 24px;
-  --typography-email-text-xxl-line-height: 28px;
-
-  --typography-email-text-xl: 20px;
-  --typography-email-text-xl-line-height: 24px;
-
-  --typography-email-text-l: 18px;
-  --typography-email-text-l-line-height: 24px;
-
-  --typography-email-text-m: 16px;
-  --typography-email-text-m-line-height: 18px;
-
-  --typography-email-text-s: 14px;
-  --typography-email-text-s-line-height: 18px;
-
-  --typography-email-text-xs: 12px;
-  --typography-email-text-xs-line-height: 16px;
-
-  --typography-email-text-xxs: 10px;
-  --typography-email-text-xxs-line-height: 14px;
-}