@itcase/ui 1.2.30 → 1.2.32

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

@@ -1,10 +1,10 @@
 import { CSSProperties, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 export interface IVideoProps extends iStyleAttributes {
+    id?: string;
     children?: ReactNode;
     className?: string;
     codecs: string;
-    id?: string;
     mp4?: string;
     ogv?: string;
     position?: string;

package/dist/types/components/Wrapper/Wrapper.d.ts

@@ -1,9 +1,3 @@
 import { IWrapperProps } from './Wrapper.interface';
 declare function Wrapper(props: IWrapperProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Wrapper {
-    var defaultProps: {
-        className: string;
-        tag: string;
-    };
-}
 export { Wrapper };

package/dist/types/context/Notifications.d.ts

@@ -1,13 +1,6 @@
-import PropTypes from 'prop-types';
 import type { tId } from '@itcase/common';
 import type { iCreatedNotification, iNotificationsProviderProps } from './Notifications.interface';
 declare function NotificationsProvider(props: iNotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NotificationsProvider {
-    var propTypes: {
-        children: PropTypes.Requireable<any>;
-        initialNotificationsList: PropTypes.Requireable<any[]>;
-    };
-}
 declare function useNotifications(): never[];
 declare function useNotificationsAPI(): {
     hideNotifications: (targetId: tId) => void;

package/dist/types/context/UIContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 declare function useUserDeviceContext(): {
     isMobile: boolean;
     isTablet: boolean;
@@ -8,5 +8,13 @@ declare function useSiteMenuContext(): {
     isSiteMenuOpen: boolean;
     setIsSiteMenuOpen: () => void;
 };
-declare const UIProvider: React.NamedExoticComponent<object>;
+declare const UIProvider: React.NamedExoticComponent<iUIProvider>;
+interface iUIProvider {
+    children?: ReactNode;
+    userDeviceState?: {
+        isDesktop?: boolean;
+        isMobile?: boolean;
+        isTablet?: boolean;
+    };
+}
 export { UIProvider, useUserDeviceContext, useSiteMenuContext };

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

@@ -1 +1 @@
-export type tAppearanceKeysDefault = 'accent' | 'accentSecondary' | 'any' | 'default' | 'dev' | 'disabled' | 'error' | 'fail' | 'gradientPrimary' | 'l' | 'm' | 'primary' | 's' | 'secondary' | 'success' | 'surface' | 'surfaceDisabled' | 'surfacePrimary' | 'surfaceQuaternary' | 'surfaceSecondary' | 'surfaceTertiary' | 'warning' | 'xl' | 'xs';
+export type tAppearanceKeysDefault = 'accent' | 'accentSecondary' | 'any' | 'cantLoadData' | 'custom' | 'default' | 'dev' | 'disabled' | 'error' | 'fail' | 'gradientPrimary' | 'l' | 'm' | 'primary' | 'refresh' | 's' | 'search' | 'secondary' | 'success' | 'surface' | 'surfaceDisabled' | 'surfacePrimary' | 'surfaceQuaternary' | 'surfaceSecondary' | 'surfaceTertiary' | 'warning' | 'xl' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -73,16 +73,15 @@
   "scripts": {
     "build": "npm run build-js && npm run build-css",
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
-    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/mediaqueries.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production",
+    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production",
     "dev-js": "rollup -c -w",
-    "dev-css": "postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/mediaqueries.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production -w --verbose",
+    "dev-css": "postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production -w --verbose",
     "prepare": "husky",
     "prepack": "npm run build",
     "semantic-release": "semantic-release",
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "test-storybook": "test-storybook -c .storybook --watch"
+    "build-storybook": "storybook build"
   },
   "files": [
     "dist",
@@ -100,9 +99,9 @@
     "@itcase/common": "^1.2.16",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^11.12.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "prop-types": "^15.8.1",
     "rc-slider": "^11.1.7",
     "react": "^18.3.1",
     "react-dadata": "^2.23.3",
@@ -111,6 +110,7 @@
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.1.5",
+    "react-modal-sheet": "^3.3.0",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
@@ -130,10 +130,11 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
-    "@itcase/lint": "^1.0.18",
+    "@itcase/lint": "^1.0.31",
     "@lehoczky/postcss-fluid": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
@@ -162,10 +163,8 @@
     "babel-loader": "^9.2.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-react-docgen": "^4.2.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "eslint": "9.15.0",
-    "eslint-plugin-storybook": "^0.11.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.1",
@@ -190,16 +189,15 @@
     "postcss-preset-env": "^10.1.1",
     "postcss-pxtorem": "^6.1.0",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.3.3",
-    "rollup": "^4.27.3",
+    "prettier": "^3.4.1",
+    "rollup": "^4.27.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-preserve-directives": "^1.1.2",
+    "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.0",
     "storybook": "^8.4.5",
-    "stylelint": "^16.10.0",
-    "typescript": "^5.6.3"
-  },
-  "packageManager": "pnpm@9.14.2"
+    "stylelint": "^16.11.0",
+    "typescript": "^5.7.2"
+  }
 }

package/dist/Divider-BjB5MD6u.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-
-function Divider(props) {
-    var className = props.className;
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'divider_direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_hover_',
-        propsKey: 'fillActiveHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'divider_size_',
-        propsKey: 'size',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var hrStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
-}
-Divider.defaultProps = {
-    size: 'xs',
-};
-
-exports.Divider = Divider;

package/dist/Divider-U5UdY-ef.js

@@ -1,48 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-
-function Divider(props) {
-    var className = props.className;
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'divider_direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_hover_',
-        propsKey: 'fillActiveHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'divider_size_',
-        propsKey: 'size',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var hrStyles = useStyles(props).styles;
-    return (jsx("hr", { className: clsx(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
-}
-Divider.defaultProps = {
-    size: 'xs',
-};
-
-export { Divider as D };

package/dist/DropdownItem-CFkRx8LX.js

@@ -1,156 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { D as Divider } from './Divider-U5UdY-ef.js';
-import { L as Link } from './Link-CzC1kU5C.js';
-import { T as Text } from './Text-kxGZButz.js';
-
-function Dropdown(props) {
-    var after = props.after, before = props.before, animationClose = props.animationClose, animationOpen = props.animationOpen, children = props.children, className = props.className, set = props.set, isOpen = props.isOpen, setIsOpen = props.setIsOpen;
-    var dropdownRef = useRef(null);
-    // const [isOpen, setIsOpen] = useState(false)
-    var _a = useState({
-        className: '',
-    }), animationState = _a[0], setAnimationState = _a[1];
-    var onAnimationEnd = useCallback(function () {
-        // When component is change his visibility(display) in DOM,
-        // animation of close can run unnecessary on showing element.
-        // const dropdownElement = dropdownRef.current
-        setAnimationState(function (prevState) { return ({
-            className: isOpen ? prevState.className : '',
-        }); });
-    }, [isOpen]);
-    useEffect(function () {
-        if (animationOpen && animationClose) {
-            setAnimationState(function () { return ({
-                className: isOpen ? animationOpen : animationClose,
-            }); });
-        }
-    }, [isOpen]);
-    // Close dropdown by click outside
-    useEffect(function () {
-        // Add a handler to keep track of the click target.
-        function onClickWindow(event) {
-            var dropdownElement = dropdownRef.current;
-            if (dropdownElement && animationOpen) {
-                // Is event target inside of dropdown element
-                var isContainsTarget = dropdownElement.contains(event.target);
-                // Is dropdown element has "open" class
-                var hasOpenClass = dropdownElement.classList.contains(animationOpen);
-                if (!isContainsTarget && hasOpenClass) {
-                    // Trigger close event with animation
-                    // dropdownElement.click() - trigger "onClickWindow" again
-                    setIsOpen(false);
-                }
-            }
-        }
-        // Add event listener for current dropdown on first render
-        window.addEventListener('click', onClickWindow);
-        return function () {
-            // Remove event listener for current dropdown on unmount
-            window.removeEventListener('click', onClickWindow);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown_shape_',
-        propsKey: 'shape',
-    });
-    var elevationClass = useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    var alignmentClass = useDeviceTargetClass(props, {
-        prefix: 'alignment_',
-        propsKey: 'alignment',
-    });
-    // @ts-expect-error
-    var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass, set && "dropdown_set_".concat(set), shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass, fillHoverClass), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: children })), after] }));
-}
-Dropdown.defaultProps = {
-    animationOpen: 'dropdown_animation_open',
-    animationClose: 'dropdown_animation_close',
-    set: 'normal',
-};
-
-function DropdownItem(props) {
-    var after = props.after, before = props.before, children = props.children, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, underline = props.underline, isActive = props.isActive, isHover = props.isHover, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_hover_',
-        propsKey: 'fillActiveHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    useDeviceTargetClass(props, {
-        propsKey: 'linkFill',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_shape_',
-        propsKey: 'shape',
-    });
-    var justifyContentClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var typeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_type_',
-        propsKey: 'type',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var dropdownItem = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { href: link || href, className: clsx('dropdown__item-link', alignDirectionClass, alignClass), underline: underline, fill: linkFill, target: target, rel: rel, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: isActive ? labelTextColorActive : undefined, textColorHover: labelTextColorHover, textColorGradient: labelTextGradient, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorHover: descTextColorHover, textColorGradient: descTextGradient, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize, width: "fill" }))] }));
-}
-DropdownItem.defaultProps = {
-    size: 'l',
-    LinkComponent: 'a',
-    width: 'fixed',
-};
-
-export { Dropdown as D, DropdownItem as a };

package/dist/Loader-CU_5Ydmy.js

@@ -1,53 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { loaderAppearance } from './appearance/Loader.js';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-kxGZButz.js';
-
-// TODO: is better to use context?
-var loaderConfig = {
-    appearance: loaderAppearance,
-    setAppearance: function (newComponent) {
-        loaderConfig.appearance = newComponent;
-    },
-};
-function Loader(props) {
-    var _a;
-    var children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
-    var itemFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'itemFill',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var positionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    // @ts-expect-error
-    var loader = useStyles(props).styles;
-    var appearanceConfig = appearance && loaderConfig.appearance && loaderConfig.appearance[appearance];
-    /*
-     * TODO: set temporary variables by other way
-     */
-    var temporaryFillClass = fillClass ||
-        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-            "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase());
-    var temporaryItemFillClass = itemFillClass ||
-        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
-            "fill_".concat((_a = appearanceConfig.itemFill) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1')).toLowerCase());
-    return (jsxs("div", { className: clsx('loader', positionClass, widthClass, heightClass, temporaryFillClass, className, set && "loader_set_".concat(set)), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', temporaryItemFillClass) }), jsx("span", { className: clsx('loader__item', temporaryItemFillClass) }), jsx("span", { className: clsx('loader__item', temporaryItemFillClass) })] })), text && (jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
-}
-
-export { Loader as L, loaderConfig as l };

package/dist/Loader-Ck59IXGG.js

@@ -1,56 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var index = require('./cjs/appearance/Loader.js');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-CC0xnhmx.js');
-
-// TODO: is better to use context?
-var loaderConfig = {
-    appearance: index.loaderAppearance,
-    setAppearance: function (newComponent) {
-        loaderConfig.appearance = newComponent;
-    },
-};
-function Loader(props) {
-    var _a;
-    var children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
-    var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'itemFill',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    // @ts-expect-error
-    var loader = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && loaderConfig.appearance && loaderConfig.appearance[appearance];
-    /*
-     * TODO: set temporary variables by other way
-     */
-    var temporaryFillClass = fillClass ||
-        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-            "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase());
-    var temporaryItemFillClass = itemFillClass ||
-        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
-            "fill_".concat((_a = appearanceConfig.itemFill) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1')).toLowerCase());
-    return (jsxRuntime.jsxs("div", { className: clsx('loader', positionClass, widthClass, heightClass, temporaryFillClass, className, set && "loader_set_".concat(set)), style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', temporaryItemFillClass) }), jsxRuntime.jsx("span", { className: clsx('loader__item', temporaryItemFillClass) }), jsxRuntime.jsx("span", { className: clsx('loader__item', temporaryItemFillClass) })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
-}
-
-exports.Loader = Loader;
-exports.loaderConfig = loaderConfig;

package/dist/MenuItem-BEYVY0Vf.js

@@ -1,82 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { menuItemAppearance } from './appearance/MenuItem.js';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { L as Link } from './Link-CzC1kU5C.js';
-import { T as Text } from './Text-kxGZButz.js';
-
-var menuItemConfig = {
-    appearance: menuItemAppearance,
-    setAppearance: function (newComponent) {
-        menuItemConfig.appearance = newComponent;
-    },
-};
-function MenuItem(props) {
-    var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, href = props.href, label = props.label, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, target = props.target, textColor = props.textColor, textColorActive = props.textColorActive, textColorHover = props.textColorHover, textGradient = props.textGradient, textSize = props.textSize, textStyle = props.textStyle, textWeight = props.textWeight, textWrap = props.textWrap, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'menu-item_direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_hover_',
-        propsKey: 'fillActiveHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'menu-item_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'menu-item_shape_',
-        propsKey: 'shape',
-    });
-    var justifyContentClass = useDeviceTargetClass(props, {
-        prefix: 'menu-item_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var typeClass = useDeviceTargetClass(props, {
-        prefix: 'menu-item_type_',
-        propsKey: 'type',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var menuItem = useStyles(props).styles;
-    var appearanceConfig = appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance];
-    return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass ||
-            (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "menu-item__label", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsx(Text, { className: "menu-item__desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
-}
-MenuItem.defaultProps = {
-    direction: 'horizontal',
-    LinkComponent: 'a',
-    size: 'm',
-};
-
-export { MenuItem as M, menuItemConfig as m };

package/dist/appearance/Badge.js

@@ -1,44 +0,0 @@
-var badgeAppearance = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        textColor: 'surfaceTextPrimary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
-        textColor: 'surfaceTextPrimary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextPrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextInverse',
-    },
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        textColor: 'accentTextPrimary',
-    },
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        textColor: 'primaryTextPrimary',
-    },
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        textColor: 'secondaryTextPrimary',
-    },
-    disabled: {
-        fill: 'accentDisabled',
-        fillHover: 'none',
-        textColor: 'accentTextDisabled',
-    },
-};
-
-export { badgeAppearance };