@itcase/ui 1.4.13 → 1.5.1

package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts

@@ -1,6 +1,6 @@
 import type * as CSS from 'csstype';
-import { tOverflowProps, tTextAlignProps } from '../types';
-export interface iStyleAttributes {
+import { OverflowProps, TextAlignProps } from '@itcase/types';
+export interface StyleAttributes {
     /**
      * Layout
      */
@@ -8,16 +8,47 @@ export interface iStyleAttributes {
     alignItems?: string;
     alignSelf?: string;
     aspectRatio?: CSS.Property.AspectRatio;
+    /**
+     * Filter
+     */
+    backdropFilter?: string;
+    /**
+     * View
+     */
+    background?: string;
+    backgroundColor?: string;
     border?: string;
+    borderBottomColor?: string;
+    borderBottomEndRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomStartRadius?: string;
     borderBottomWidth?: string;
+    borderCurve?: string;
+    borderEndColor?: string;
     borderEndWidth?: string;
+    borderLeftColor?: string;
     borderLeftWidth?: string;
+    borderRadius?: string;
+    borderRightColor?: string;
     borderRightWidth?: string;
+    borderStartColor?: string;
     borderStartWidth?: string;
+    borderStyle?: string;
+    borderTopColor?: string;
+    borderTopEndRadius?: string;
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderTopStartRadius?: string;
     borderTopWidth?: string;
     bottom?: string;
+    /**
+     * Text
+     */
+    color?: string;
     columnGap?: string;
     columnWidth?: string;
+    cursor?: string;
     display?: CSS.Property.Display;
     end?: string;
     flex?: CSS.Property.Flex;
@@ -25,9 +56,31 @@ export interface iStyleAttributes {
     flexDirection?: CSS.Property.FlexDirection;
     flexShrink?: CSS.Property.FlexShrink;
     flexWrap?: CSS.Property.FlexWrap;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: CSS.Property.FontStyle;
+    fontVariant?: string;
+    fontWeight?: CSS.Property.FontWeight;
     gap?: string;
+    /**
+     * Grid
+     */
+    gridArea?: string;
+    gridAutoColumns?: string;
+    gridAutoFlow?: string;
+    gridAutoRows?: string;
+    gridColumn?: string;
+    gridColumnGap?: string;
+    gridRow?: string;
+    gridRowGap?: string;
+    gridTemplate?: string;
+    gridTemplateAreas?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
     height?: string;
     left?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
     margin?: string;
     marginBottom?: string;
     marginEnd?: string;
@@ -41,8 +94,15 @@ export interface iStyleAttributes {
     maxWidth?: string;
     minHeight?: string;
     minWidth?: string;
+    /**
+     * Image
+     */
+    objectFit?: CSS.Property.ObjectFit;
+    objectPosition?: CSS.Property.ObjectPosition;
+    opacity?: string;
     order?: CSS.Property.Order;
-    overflow?: tOverflowProps;
+    overflow?: OverflowProps;
+    overlayColor?: string;
     padding?: string;
     paddingBottom?: string;
     paddingEnd?: string;
@@ -53,12 +113,9 @@ export interface iStyleAttributes {
     paddingTop?: string;
     paddingVertical?: string;
     position?: string;
+    resizeMode?: string;
     right?: string;
     rowGap?: string;
-    start?: string;
-    top?: string;
-    width?: string;
-    zIndex?: string;
     /**
      * Shadow
      */
@@ -66,46 +123,8 @@ export interface iStyleAttributes {
     shadowOffset?: string;
     shadowOpacity?: string;
     shadowRadius?: string;
-    /**
-     * Transform
-     */
-    transform?: CSS.Property.Transform;
-    /**
-     * View
-     */
-    background?: string;
-    backgroundColor?: string;
-    borderBottomColor?: string;
-    borderBottomEndRadius?: string;
-    borderBottomLeftRadius?: string;
-    borderBottomRightRadius?: string;
-    borderBottomStartRadius?: string;
-    borderCurve?: string;
-    borderEndColor?: string;
-    borderLeftColor?: string;
-    borderRadius?: string;
-    borderRightColor?: string;
-    borderStartColor?: string;
-    borderStyle?: string;
-    borderTopColor?: string;
-    borderTopEndRadius?: string;
-    borderTopLeftRadius?: string;
-    borderTopRightRadius?: string;
-    borderTopStartRadius?: string;
-    cursor?: string;
-    opacity?: string;
-    /**
-     * Text
-     */
-    color?: string;
-    fontFamily?: string;
-    fontSize?: string;
-    fontStyle?: CSS.Property.FontStyle;
-    fontVariant?: string;
-    fontWeight?: CSS.Property.FontWeight;
-    letterSpacing?: string;
-    lineHeight?: string;
-    textAlign?: tTextAlignProps;
+    start?: string;
+    textAlign?: TextAlignProps;
     textDecorationColor?: string;
     textDecorationLine?: string;
     textDecorationStyle?: string;
@@ -113,50 +132,31 @@ export interface iStyleAttributes {
     textShadowOffset?: string;
     textShadowRadius?: string;
     textTransform?: CSS.Property.TextTransform;
-    verticalAlign?: CSS.Property.VerticalAlign;
-    writingMode?: CSS.Property.WritingMode;
-    whiteSpace?: CSS.Property.WhiteSpace;
-    /**
-     * Image
-     */
-    objectFit?: CSS.Property.ObjectFit;
-    objectPosition?: CSS.Property.ObjectPosition;
-    overlayColor?: string;
-    resizeMode?: string;
     tintColor?: string;
+    top?: string;
     /**
-     * Grid
-     */
-    gridArea?: string;
-    gridAutoColumns?: string;
-    gridAutoFlow?: string;
-    gridAutoRows?: string;
-    gridColumn?: string;
-    gridColumnGap?: string;
-    gridRow?: string;
-    gridRowGap?: string;
-    gridTemplate?: string;
-    gridTemplateAreas?: string;
-    gridTemplateColumns?: string;
-    gridTemplateRows?: string;
-    /**
-     * Filter
+     * Transform
      */
-    backdropFilter?: string;
+    transform?: CSS.Property.Transform;
+    verticalAlign?: CSS.Property.VerticalAlign;
+    whiteSpace?: CSS.Property.WhiteSpace;
+    width?: string;
+    writingMode?: CSS.Property.WritingMode;
+    zIndex?: string;
 }
 type WrappedInterface<T> = {
-    [P in keyof T as `${string & P}Wrapper`]: T[P];
+    [P in keyof T as `${P & string}Wrapper`]: T[P];
 };
 type LabelInterface<T> = {
-    [P in keyof T as `${string & P}Label`]: T[P];
+    [P in keyof T as `${P & string}Label`]: T[P];
 };
 type ImageInterface<T> = {
-    [P in keyof T as `${string & P}Image`]: T[P];
+    [P in keyof T as `${P & string}Image`]: T[P];
 };
-export interface TypeStyleWrapperAttributes extends WrappedInterface<iStyleAttributes> {
+export interface TypeStyleWrapperAttributes extends WrappedInterface<StyleAttributes> {
 }
-export interface TypeStyleLabelAttributes extends LabelInterface<iStyleAttributes> {
+export interface TypeStyleLabelAttributes extends LabelInterface<StyleAttributes> {
 }
-export interface TypeStyleImageAttributes extends ImageInterface<iStyleAttributes> {
+export interface TypeStyleImageAttributes extends ImageInterface<StyleAttributes> {
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.4.13",
+  "version": "1.5.1",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -97,19 +97,20 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.22",
-    "@itcase/config": "^1.0.39",
+    "@itcase/config": "^1.0.40",
     "@itcase/icons": "^1.0.29",
     "@itcase/storybook-config": "^1.1.9",
     "@itcase/tokens-am": "^1.1.3",
     "@itcase/tokens-baikal": "^1.1.3",
+    "@itcase/types": "^1.0.2",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "framer-motion": "^12.7.4",
+    "framer-motion": "^12.9.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.7.4",
+    "motion": "^12.9.1",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -134,7 +135,7 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@itcase/lint": "^1.1.7",
+    "@itcase/lint": "^1.1.9",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -174,7 +175,7 @@
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
-    "stylelint": "^16.18.0",
+    "stylelint": "^16.19.0",
     "typescript": "^5.8.3"
   }
 }

package/dist/DropdownItem-B3E-_Cwp.js

@@ -1,88 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-import clsx from 'clsx';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-import { D as Divider } from './Divider-BQcBkzt1.js';
-import { a as Link } from './Link-DaKqf1pb.js';
-import { T as Text } from './Text-C6NSmetx.js';
-
-function Dropdown(props) {
-    var className = props.className, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, after = props.after, isOpen = props.isOpen, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen, children = props.children;
-    var dropdownRef = useRef(null);
-    // const [isOpen, setIsOpen] = useState(false)
-    var _d = useState({
-        className: '',
-    }), animationState = _d[0], setAnimationState = _d[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, animationOpen, animationClose]);
-    // 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 propsGenerator = useDevicePropsGenerator(props);
-    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass;
-    // @ts-expect-error
-    var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: children })), after] }));
-}
-
-var dropdownItemAppearance = {
-    dev: {},
-};
-
-var dropdownItemConfig = {
-    appearance: dropdownItemAppearance,
-    setAppearance: function (appearanceConfig) {
-        dropdownItemConfig.appearance = appearanceConfig;
-    },
-};
-function DropdownItem(props) {
-    var className = props.className, appearance = props.appearance, 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, 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, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
-    // prettier-ignore
-    var appearanceConfig = (dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance]);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillDisabledClass = propsGenerator.fillDisabledClass, _a = propsGenerator.shapeClass, shapeClass = _a === void 0 ? 'l' : _a, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, _b = propsGenerator.widthClass, widthClass = _b === void 0 ? 'fixed' : _b;
-    // @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 && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
-            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(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: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }));
-}
-
-export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };

package/dist/DropdownItem-Qg-_2YWD.js

@@ -1,93 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Divider = require('./Divider-ImOOytuN.js');
-var Link = require('./Link-BnqN6ysn.js');
-var Text = require('./Text-C49zj3jO.js');
-
-function Dropdown(props) {
-    var className = props.className, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, after = props.after, isOpen = props.isOpen, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen, children = props.children;
-    var dropdownRef = React.useRef(null);
-    // const [isOpen, setIsOpen] = useState(false)
-    var _d = React.useState({
-        className: '',
-    }), animationState = _d[0], setAnimationState = _d[1];
-    var onAnimationEnd = React.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]);
-    React.useEffect(function () {
-        if (animationOpen && animationClose) {
-            setAnimationState(function () { return ({
-                className: isOpen ? animationOpen : animationClose,
-            }); });
-        }
-    }, [isOpen, animationOpen, animationClose]);
-    // Close dropdown by click outside
-    React.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 propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass;
-    // @ts-expect-error
-    var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsxRuntime.jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: children })), after] }));
-}
-
-var dropdownItemAppearance = {
-    dev: {},
-};
-
-var dropdownItemConfig = {
-    appearance: dropdownItemAppearance,
-    setAppearance: function (appearanceConfig) {
-        dropdownItemConfig.appearance = appearanceConfig;
-    },
-};
-function DropdownItem(props) {
-    var className = props.className, appearance = props.appearance, 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, 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, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
-    // prettier-ignore
-    var appearanceConfig = (dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance]);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillDisabledClass = propsGenerator.fillDisabledClass, _a = propsGenerator.shapeClass, shapeClass = _a === void 0 ? 'l' : _a, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, _b = propsGenerator.widthClass, widthClass = _b === void 0 ? 'fixed' : _b;
-    // @ts-expect-error
-    var dropdownItem = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
-            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }));
-}
-
-exports.Dropdown = Dropdown;
-exports.DropdownItem = DropdownItem;
-exports.dropdownItemAppearance = dropdownItemAppearance;
-exports.dropdownItemConfig = dropdownItemConfig;

package/dist/Icon-OJ_3E3eM.js

@@ -1,61 +0,0 @@
-import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import SVG from 'react-inlinesvg';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-import { L as LinkWrapper } from './Link-DaKqf1pb.js';
-import { T as Tooltip } from './Tooltip-5lQyt5-Y.js';
-
-var iconAppearance = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        fillSize: 40,
-        iconFill: 'accentItemPrimary',
-        iconSize: 24,
-        imageSrc: 'img/filter.svg',
-    },
-};
-
-var iconConfig = {
-    appearance: iconAppearance,
-    setAppearance: function (appearanceConfig) {
-        iconConfig.appearance = appearanceConfig;
-    },
-};
-var Icon = React.forwardRef(function Icon(props, ref) {
-    // TODO: Tooltip doesn't work that anymore
-    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
-    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
-    var ImageComponent = useMemo(function () {
-        if (SvgImage) {
-            var sizes = {};
-            if (width) {
-                sizes.width = width;
-            }
-            if (height) {
-                sizes.height = height;
-            }
-            return jsx(SvgImage, __assign({}, sizes));
-        }
-        if (imageSrc) {
-            if (imageSrc.endsWith('.svg')) {
-                return jsx(SVG, { preProcessor: removeFillStroke, src: imageSrc });
-            }
-            return jsx("img", { src: imageSrc });
-        }
-        return null;
-    }, [SvgImage, width, height, imageSrc]);
-    var propsGenerator = useDevicePropsGenerator(props);
-    var alignmentClass = propsGenerator.alignmentClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, iconFillClass = propsGenerator.iconFillClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass;
-    // @ts-expect-error
-    var iconStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
-});
-var removeFillStroke = function (code) {
-    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
-};
-
-export { Icon as I, iconAppearance as a, iconConfig as i };

package/dist/Image-BEGwuGBM.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-function Image(props) {
-    var children = props.children, after = props.after, alt = props.alt, before = props.before, caption = props.caption, className = props.className, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
-    // @ts-expect-error
-    var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass && "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass)), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass && "border-color-image_".concat(borderColorImageClass)), alt: alt || title, src: src, style: imageStyles, title: title || alt, onError: onError }), overlay, caption, children] }), after] }));
-}
-
-exports.Image = Image;

package/dist/Image-DWfyapuD.js

@@ -1,15 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-
-function Image(props) {
-    var children = props.children, after = props.after, alt = props.alt, before = props.before, caption = props.caption, className = props.className, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
-    // @ts-expect-error
-    var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass && "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass)), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass && "border-color-image_".concat(borderColorImageClass)), alt: alt || title, src: src, style: imageStyles, title: title || alt, onError: onError }), overlay, caption, children] }), after] }));
-}
-
-export { Image as I };

package/dist/stories/Dev.mdx

@@ -1,9 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks'
-
-import * as SearchInputStories from './SearchInput.stories.tsx'
-
-<Meta title="Molecules / Search / Dev Mode" />
-
-# Dev
-
-<Canvas sourceState="shown" of={SearchInputStories.Dev} />

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

@@ -1,2 +0,0 @@
-declare const alignProps: readonly ["topLeft", "topCenter", "topRight", "left", "center", "right", "bottomLeft", "bottomCenter", "bottomRight"];
-export { alignProps };

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

@@ -1,3 +0,0 @@
-declare const alignDirectionProps: readonly ["column", "column-reverse", "horizontal", "horizontal-reverse", "row", "row-reverse", "vertical", "vertical-reverse"];
-export type tAlignDirectionProps = (typeof alignDirectionProps)[number];
-export { alignDirectionProps };

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

@@ -1,3 +0,0 @@
-declare const alignmentProps: readonly ["topLeft", "topCenter", "topRight", "leftCenter", "rightCenter", "bottomRight", "bottomCenter", "bottomLeft"];
-export type tAlignmentProps = (typeof alignmentProps)[number];
-export { alignmentProps };

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

@@ -1 +0,0 @@
-export type tAppearanceKeysDefault = 'accent' | 'accentPrimary' | 'accentQuaternary' | 'accentSecondary' | 'accentTertiary' | 'any' | 'cantLoadData' | 'confirm' | 'custom' | 'default' | 'disabled' | 'error' | 'fail' | 'full' | 'ghost' | 'gradientPrimary' | 'nothingFound' | 'outlined' | 'primary' | 'refresh' | 'search' | 'secondary' | 'solid' | 'success' | 'surface' | 'surfaceDisabled' | 'surfacePrimary' | 'surfaceQuaternary' | 'surfaceSecondary' | 'surfaceTertiary' | 'unableLoadData' | 'warning';

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

@@ -1,3 +0,0 @@
-declare const borderColorProps: readonly ["accentBorderPrimary", "accentBorderSecondary", "accentBorderTertiary", "accentBorderQuaternary", "accentBorderDisabled", "primaryBorderPrimary", "primaryBorderSecondary", "primaryBorderTertiary", "primaryBorderQuaternary", "primaryBorderDisabled", "secondaryBorderPrimary", "secondaryBorderSecondary", "secondaryBorderTertiary", "secondaryBorderQuaternary", "secondaryBorderDisabled", "tertiaryBorderPrimary", "tertiaryBorderSecondary", "tertiaryBorderTertiary", "tertiaryBorderQuaternary", "tertiaryBorderDisabled", "surfaceBorderPrimary", "surfaceBorderSecondary", "surfaceBorderTertiary", "surfaceBorderQuaternary", "surfaceBorderDisabled", "surfaceBorderInverse", "errorBorderPrimary", "errorBorderSecondary", "errorBorderDisabled", "successBorderPrimary", "successBorderSecondary", "successBorderDisabled", "none"];
-export type tBorderColorProps = (typeof borderColorProps)[number];
-export { borderColorProps };

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

@@ -1,3 +0,0 @@
-declare const borderColorHoverProps: readonly ["accentBorderPrimary", "accentBorderPrimaryHover", "primaryBorderPrimary", "secondaryBorderPrimary", "tertiaryBorderPrimary", "surfaceBorderPrimary", "surfaceBorderSecondary", "surfaceBorderTertiary", "errorBorderPrimary", "errorBorderPrimaryHover", "successBorderPrimary", "surfaceBorderQuaternary"];
-export type tBorderColorHoverProps = (typeof borderColorHoverProps)[number];
-export { borderColorHoverProps };

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

@@ -1,3 +0,0 @@
-declare const borderTypeProps: readonly ["outline", "solid", "none"];
-export type tBorderTypeProps = (typeof borderTypeProps)[number];
-export { borderTypeProps };

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

@@ -1,3 +0,0 @@
-declare const borderWidthProps: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
-export type tBorderWidthProps = (typeof borderWidthProps)[number];
-export { borderWidthProps };

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

@@ -1,3 +0,0 @@
-declare const directionProps: readonly ["row", "row-reverse", "column", "column-reverse", "vertical", "horizontal"];
-export type tDirectionProps = (typeof directionProps)[number];
-export { directionProps };

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

@@ -1,3 +0,0 @@
-declare const elevationProps: readonly ["1", "2", "4", "6", "8", "12", "16", "24"];
-export type tElevationProps = (typeof elevationProps)[number];
-export { elevationProps };