@itcase/ui 1.2.34 → 1.3.0

package/dist/components/Wrapper.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,37 +15,11 @@ import '../hooks/styleAttributes.js';
 
 function Wrapper(props) {
     var id = props.id, children = props.children, after = props.after, before = props.before, _a = props.className, className = _a === void 0 ? 'wrapper' : _a, _b = props.tag, Tag = _b === void 0 ? 'div' : _b, type = props.type;
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var resizeHorizontalClass = useDeviceTargetClass(props, {
-        prefix: 'wrapper_resize-horizontal_',
-        propsKey: 'horizontalResizing',
-    });
-    var resizeVerticalClass = useDeviceTargetClass(props, {
-        prefix: 'wrapper_resize-vertical_',
-        propsKey: 'verticalResizing',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var positionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    var wrapperPositionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'wrapperPosition',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, fillClass = classGenerator.fillClass, horizontalResizingClass = classGenerator.horizontalResizingClass, positionClass = classGenerator.positionClass, verticalResizingClass = classGenerator.verticalResizingClass, wrapperPositionClass = classGenerator.wrapperPositionClass;
     // @ts-expect-error
     var _c = useStyles(props), innerStyles = _c.inner, wrapperStyles = _c.styles;
-    return (jsx(Tag, { className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), id: id, style: wrapperStyles, children: jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass, alignClass, wrapperPositionClass), style: innerStyles, children: [before, children, after] }) }));
+    return (jsx(Tag, { className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass && "fill_".concat(fillClass), horizontalResizingClass && "wrapper_resize-horizontal_".concat(horizontalResizingClass), verticalResizingClass && "wrapper_resize-vertical_".concat(verticalResizingClass), positionClass && "position_".concat(positionClass)), id: id, style: wrapperStyles, children: jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), wrapperPositionClass && "position_".concat(wrapperPositionClass)), style: innerStyles, children: [before, children, after] }) }));
 }
 
 export { Wrapper };

package/dist/css/components/Avatar/Avatar.css

@@ -71,22 +71,23 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
     @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
       &_$(size) {
         ^^&__wrapper {
-          width: $(size) px;
-          height: $(size) px;
+          width: $(size)px;
+          height: $(size)px;
           display: flex;
           justify-content: center;
           align-items: center;
           ^^^&__image {
-            width: $(size) px;
-            height: $(size) px;
+            width: $(size)px;
+            height: $(size)px;
             & .image__item {
-              width: $(size) px;
-              height: $(size) px;
+              width: $(size)px;
+              height: $(size)px;
             }
           }
         }

package/dist/css/components/Code/Code.css

@@ -36,11 +36,3 @@
     }
   }
 }
-:root {
-  --code-input-size-compact-width: 36px;
-  --code-input-size-compact-height: 36px;
-  --code-input-size-compact-padding: 5px;
-  --code-input-size-normal-width: 48px;
-  --code-input-size-normal-height: 48px;
-  --code-input-size-normal-padding: 10px 12px;
-}

package/dist/css/components/Code/Code.tokens.css

@@ -1,4 +1,7 @@
 :root {
+  --code-input-size-compact-width: 36px;
+  --code-input-size-compact-height: 36px;
+  --code-input-size-compact-padding: 5px;
   --code-input-size-normal-width: 48px;
   --code-input-size-normal-height: 48px;
   --code-input-size-normal-padding: 10px 12px;

package/dist/hooks/useDeviceTargetClassGenerator.interface.js

@@ -0,0 +1 @@
+

package/dist/hooks/useDeviceTargetClassGenerator.js

@@ -0,0 +1,95 @@
+import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
+import { useMemo } from 'react';
+import camelCase from 'lodash/camelCase';
+import castArray from 'lodash/castArray';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import 'react/jsx-runtime';
+import './useMediaQueries.js';
+import 'react-responsive';
+
+function useDeviceTargetClassGenerator(componentProps, appearanceConfig) {
+    /** Generate a class depending on the user's device.
+     * Props:
+     *   - "componentProps" - "props" from component
+     *   - "appearanceConfig" - special appearance dictionary with styles presets
+     *
+     * Usage:
+     *   const appearanceConfig = (
+     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
+     *   )
+     *   const classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig)
+     *   ---------
+     *   const fillClass = classGenerator.getClass('fill')
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const fillClass = classGenerator.getClass('fill', { prefix: 'fill_' })
+     *   "fillClass" - is "fill_surface-secondary"
+     *   ---------
+     *   const fillClass = classGenerator.fill / classGenerator.fillClass
+     *   "fill" / "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const { fill / fillClass } = classGenerator
+     *   "fill" / "fillClass" - is "surface-secondary"
+     **/
+    var _a = useUserDeviceContext(), isMobile = _a.isMobile, isTablet = _a.isTablet, isDesktop = _a.isDesktop;
+    var deviceTargetClassGenerator = useMemo(function () {
+        var classGenerator = {
+            getClass: function (propsKey, params) {
+                if (params === void 0) { params = {}; }
+                var _a = params.prefix, prefix = _a === void 0 ? '' : _a, _b = params.replace, replace = _b === void 0 ? [/([A-Z])/g, '-$1'] : _b;
+                // prettier-ignore
+                var deviceBasePart = ((isMobile && 'Mobile') ||
+                    (isTablet && 'Tablet') ||
+                    (isDesktop && 'Desktop') ||
+                    '');
+                var valueForDevice = componentProps["".concat(propsKey).concat(deviceBasePart)];
+                var valueDefault = componentProps[propsKey];
+                var appearanceForDevice = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig["".concat(propsKey).concat(deviceBasePart)];
+                var appearanceDefault = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propsKey];
+                // prettier-ignore
+                var targetClassValue = (
+                // Value for device from props is first priority
+                valueForDevice ||
+                    // Value without device from props is second priority
+                    valueDefault ||
+                    // Value for device from appearance config is third priority
+                    appearanceForDevice ||
+                    // Value without device from appearance config is last priority
+                    appearanceDefault);
+                if (targetClassValue) {
+                    var cleanClassValue = camelCase(String(targetClassValue));
+                    if (replace) {
+                        var replaceList = castArray(replace);
+                        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+                    }
+                    return "".concat(prefix).concat(cleanClassValue).toLowerCase();
+                }
+                // If target key not exists in props and appearance config - return empty class
+                return '';
+            },
+        };
+        var generatorProxyHandler = {
+            get: function (target, prop, receiver) {
+                var args = [];
+                for (var _i = 3; _i < arguments.length; _i++) {
+                    args[_i - 3] = arguments[_i];
+                }
+                if (typeof prop === 'string') {
+                    if (!Reflect.has(target, prop)) {
+                        if (prop.endsWith('Class')) {
+                            var shortProp = prop.substring(0, prop.lastIndexOf('Class'));
+                            return target.getClass(shortProp);
+                        }
+                        return target.getClass(prop);
+                    }
+                    return Reflect.get.apply(Reflect, __spreadArray([target, prop, receiver], args, false));
+                }
+                return prop;
+            },
+        };
+        return new Proxy(classGenerator, generatorProxyHandler);
+    }, [componentProps, appearanceConfig, isDesktop, isMobile, isTablet]);
+    return deviceTargetClassGenerator;
+}
+
+export { useDeviceTargetClassGenerator };

package/dist/stories/Appearance.stories.js

@@ -1,11 +1,10 @@
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'
 
-tabConfig.setAppearance(tabAppearance)
 badgeConfig.setAppearance(badgeAppearance)
+tabConfig.setAppearance(tabAppearance)
 
 export default {
   argTypes: {

package/dist/stories/Badge.stories.js

@@ -9,7 +9,7 @@ import {
   textColorProps,
 } from '../../../constants'
 import { Badge, badgeConfig } from '../Badge'
-import { badgeAppearance } from '../Badge.appearance.'
+import { badgeAppearance } from '../Badge.appearance'
 
 badgeConfig.setAppearance(badgeAppearance)
 

package/dist/stories/Button.stories.js

@@ -1,6 +1,5 @@
 // import { icon24 } from '../../../___icons'
-import { Badge, badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { Badge, badgeAppearance, badgeConfig } from '../../Badge'
 import { Button, buttonConfig } from '../Button'
 import { buttonAppearance } from '../Button.appearance'
 import { argTypes } from './args'

package/dist/stories/Group.stories.js

@@ -6,14 +6,13 @@ import {
   widthProps,
   wrapProps,
 } from '../../../constants'
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { TabGroup } from '../TabGroup'
 
-tabConfig.setAppearance(tabAppearance)
 badgeConfig.setAppearance(badgeAppearance)
+tabConfig.setAppearance(tabAppearance)
 
 const tabs = {
   1: {

package/dist/stories/Icon.stories.js

@@ -8,14 +8,12 @@ import {
   shapeProps,
   sizePXProps,
 } from '../../../constants'
-import { Badge, badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { Badge, badgeAppearance, badgeConfig } from '../../Badge'
 import { Icon, iconConfig } from '../Icon'
 import { iconAppearance } from '../Icon.appearance'
 
-iconConfig.setAppearance(iconAppearance)
-
 badgeConfig.setAppearance(badgeAppearance)
+iconConfig.setAppearance(iconAppearance)
 
 export default {
   argTypes: {

package/dist/stories/Select.stories.js

@@ -1,4 +1,3 @@
-import { defaultSelectProps } from '../../../config/forms'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -12,19 +11,66 @@ import { Button } from '../../Button'
 import { Loader } from '../../Loader'
 import { Select } from '../index'
 
-// import { Select } from '../Select'
-
-// import { icon16 } from 'src/icons'
-
 export default {
   args: {
-    ...defaultSelectProps,
+    elevation: 8,
     isClearable: true,
     isMulti: false,
     isSearchable: false,
+    badgeAppearance: 'accent',
+    badgeSize: 'm',
+    badgeTextSize: 'm',
+    // clearIcon: icon24.Clear,
+    clearIconFill: 'surfaceItemPrimary',
+    closeMenuOnSelect: true,
+    dividerDirection: 'horizontal',
+    // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
+
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 'xxs',
+    // dropdownIcon: icon24.ChevronDownSmall,
     dropdownIconFill: 'surfaceItemPrimary',
+    // error
+    errorInputBorderColor: 'errorBorderPrimary',
+    headingFill: 'surfaceSecondary',
+    headingTextColor: 'surfaceTextPrimary',
+    headingTextSize: 'm',
+
+    headingTextWeight: '600',
     hideSelectedOptions: false,
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputBorderColorHover: 'surfaceBorderQuaternary',
+    inputCaretColor: 'secondaryItemPrimary',
+
+    inputFill: 'surfacePrimary',
+
+    inputShape: 'rounded',
+    inputTextColor: 'surfaceTextPrimary',
+    inputTextSize: 'm',
+    loadingMessage: (
+      <Loader
+        width="fill"
+        height="fill"
+        fill="surfacePrimary"
+        position="absolute"
+        left="0px"
+        right="0px"
+        zIndex="1"
+        itemFill="surfaceItemAccent"
+        set="simple"
+      />
+    ),
+
     menuItemSize: 'l',
+    multipleItemFill: 'accentPrimary',
+    multipleItemFillHover: 'accentPrimaryHover',
+    // multipleItemIcon: icon14.Remove,
+    multipleItemIconFill: 'accentItemPrimary',
+    multipleItemTextColor: 'accentTextPrimary',
+
+    multipleItemTextSize: 'm',
+
+    noOptionsSearchText: 'Ничего не найдено...',
     noOptionsText: (
       <Loader
         width="fill"
@@ -38,6 +84,10 @@ export default {
         set="simple"
       />
     ),
+    noOptionsTextColor: 'surfaceTextPrimary',
+    noOptionsTextSize: 'm',
+
+    optionBorder: 'none',
     optionFill: 'surfacePrimary',
     optionFillHover: 'surfacePrimaryHover',
     options: [
@@ -48,9 +98,22 @@ export default {
       { label: 'Планируемые', value: 'planned' },
       { label: 'Продолжены', value: 'continued' },
     ],
+    optionShape: 'rounded',
+
     optionTextColor: 'surfaceTextPrimary',
     optionTextSize: 'l',
+    placeholder: 'Выбрать...',
+
+    placeholderTextColor: 'surfaceTextQuaternary',
+
+    placeholderTextSize: 'm',
+    // appearance depending on the type of error
+    // required
+    requiredInputBorderColor: 'warningBorderPrimary',
+    showBadge: false,
     showDivider: false,
+
+    size: 'm',
   },
   argTypes: {
     elevation: {

package/dist/stories/Size.stories.js

@@ -1,5 +1,4 @@
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'

package/dist/stories/State.stories.js

@@ -1,5 +1,4 @@
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'

package/dist/stories/Tile.stories.js

@@ -17,8 +17,7 @@ import {
   titleSizeProps,
 } from '../../../constants'
 // import { icon24 } from '../../../___icons'
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Button, buttonConfig } from '../../Button'
 import { buttonAppearance } from '../../Button/Button.appearance'
 import { Tile } from '../Tile'

package/dist/stories/appearance.mdx

@@ -14,7 +14,7 @@ import { Meta } from '@storybook/blocks'
 - а также конфиг:
 
 ```
-const badgeConfig: IBadgeConfig = {
+const badgeConfig: iBadgeConfig = {
   appearance: badgeAppearance,
   setAppearance: (newComponent) => {
     badgeConfig.appearance = newComponent
@@ -25,28 +25,23 @@ const badgeConfig: IBadgeConfig = {
 - записать в переменную сокращенное название для дальнейшего использования в коде компонента:
 
 ```
-const appearanceConfig =
-  appearance && badgeConfig.appearance && badgeConfig.appearance[appearance]
+const appearanceConfig = badgeConfig.appearance && badgeConfig.appearance[appearance]
 ```
 
 - использовать для пропсов:
 
 ```
-	fillClass ||
-	(appearanceConfig?.fill &&
-		`fill_${appearanceConfig.fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase()),
+	fillClass && `fill_${fillClass}`,
 
-fillHoverClass ||
-	(appearanceConfig?.fillHover &&
-		`fill_hover_${appearanceConfig.fillHover}`?.replace(/([A-Z])/g, '-$1').toLowerCase()),
+fillHoverClass && `fill_hover_${fillHoverClass}`,
 
 textColor={textColor || appearanceConfig?.textColor}
 ```
 
-- описать варианты `Appearance` необходимо в `src/appearance/Badge/index.ts`
+- описать варианты `Appearance` необходимо в `src/components/Badge/Badge.appearance.ts`
 
 ```
-	import { badgeAppearanceType } from '../../components/Badge/Badge.interface'
+	import { badgeAppearanceType } from './Badge.interface'
 
 export const badgeAppearance: badgeAppearanceType = {
 	surfacePrimary: {

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

@@ -8,6 +8,7 @@ interface iAccordionItemEventData {
     isExpanded: boolean;
 }
 interface iAccordionProps extends iStyleAttributes {
+    [key: number | string | symbol]: any;
     borderColor?: tBorderColorProps;
     children?: Element | React.ReactNode;
     className?: string;
@@ -28,6 +29,7 @@ interface iAccordionProps extends iStyleAttributes {
 }
 interface iAccordionItemProps extends iStyleAttributes {
     id: number | string;
+    [key: number | string | symbol]: any;
     afterContent?: ReactNode;
     beforeContent?: ReactNode;
     borderColor?: tBorderColorProps;

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

@@ -1,4 +1,4 @@
-import { iAvatarConfig, IAvatarProps } from './Avatar.interface';
+import type { iAvatarConfig, iAvatarProps } from './Avatar.interface';
 declare const avatarConfig: iAvatarConfig;
-declare function Avatar(props: IAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function Avatar(props: iAvatarProps): import("react/jsx-runtime").JSX.Element;
 export { Avatar, avatarConfig };

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

@@ -2,7 +2,8 @@ import { ElementType, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { iconFillSizePropsType, iconSizePropsType, sizePXPropsType, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
 import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
-export interface IAvatarThemeColor {
+export interface iAvatarThemeColor {
+    [key: number | string | symbol]: any;
     fill?: tFillProps;
     fillHover?: tFillHoverProps;
     icon?: ElementType;
@@ -18,17 +19,19 @@ export interface IAvatarThemeColor {
     textSize?: tTextSizeProps;
     textWeight?: tTextWeightProps;
 }
-type appearanceKeysType = {} & tAppearanceKeysDefault;
+type tAppearanceKeys = tAppearanceKeysDefault & {};
 export type avatarAppearanceType = {
-    [key in appearanceKeysType]?: IAvatarThemeColor;
+    [key in tAppearanceKeys]?: iAvatarThemeColor;
 };
 export interface iAvatarConfig {
+    [key: number | string | symbol]: any;
     appearance: avatarAppearanceType | undefined;
     setAppearance: (newComponent: avatarAppearanceType) => void;
 }
-export interface IAvatarProps extends IAvatarThemeColor, iStyleAttributes {
+export interface iAvatarProps extends iAvatarThemeColor, iStyleAttributes {
+    [key: number | string | symbol]: any;
     after?: ReactNode;
-    appearance?: appearanceKeysType;
+    appearance?: tAppearanceKeys;
     before?: ReactNode;
     className?: string;
     Dot?: ReactNode;

package/dist/types/components/Avatar/index.d.ts

@@ -1 +1,2 @@
 export { Avatar, avatarConfig } from './Avatar';
+export { avatarAppearance } from './Avatar.appearance';

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

@@ -1,6 +1,6 @@
-import { IBadgeConfig, IBadgeProps } from './Badge.interface';
-declare const badgeConfig: IBadgeConfig;
-declare function Badge(props: IBadgeProps): import("react/jsx-runtime").JSX.Element;
+import type { iBadgeConfig, iBadgeProps } from './Badge.interface';
+declare const badgeConfig: iBadgeConfig;
+declare function Badge(props: iBadgeProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Badge {
     var defaultProps: {
         shape: string;

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

@@ -1,8 +1,9 @@
 import { CSSProperties, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { borderColorHoverPropsType, tBorderColorProps, borderTypePropsType, tBorderWidthProps, tFillProps, tFillHoverProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps } from '../../types';
+import { borderColorHoverPropsType, borderTypePropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps } from '../../types';
 import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
-export interface IBadgeThemeColor {
+export interface iBadgeThemeColor {
+    [key: number | string | symbol]: any;
     borderColor?: tBorderColorProps;
     borderColorHover?: borderColorHoverPropsType;
     borderType?: borderTypePropsType;
@@ -14,16 +15,18 @@ export interface IBadgeThemeColor {
     textColor?: tTextColorProps;
     textSize?: tTextSizeProps;
 }
-type appearanceKeysType = tAppearanceKeysDefault & {};
+type tAppearanceKeys = tAppearanceKeysDefault & {};
 export type badgeAppearanceType = {
-    [key in appearanceKeysType]?: IBadgeThemeColor;
+    [key in tAppearanceKeys]?: iBadgeThemeColor;
 };
-export interface IBadgeConfig {
+export interface iBadgeConfig {
+    [key: number | string | symbol]: any;
     appearance: badgeAppearanceType | undefined;
     setAppearance: (newComponent: badgeAppearanceType) => void;
 }
-export interface IBadgeProps extends IBadgeThemeColor, iStyleAttributes {
-    appearance?: appearanceKeysType;
+export interface iBadgeProps extends iBadgeThemeColor, iStyleAttributes {
+    [key: number | string | symbol]: any;
+    appearance?: tAppearanceKeys;
     children?: ReactNode;
     className?: string;
     mode?: string;

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

@@ -1,5 +1,5 @@
-import { IBreadcrumbsProps } from './Breadcrumbs.interface';
-declare function Breadcrumbs(props: IBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+import type { iBreadcrumbsProps } from './Breadcrumbs.interface';
+declare function Breadcrumbs(props: iBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Breadcrumbs {
     var defaultProps: {
         direction: string;

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

@@ -1,7 +1,9 @@
 import { ElementType, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { tDirectionProps, tFillProps, iconSizePropsType, positionPropsType, tShapeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tUnderlineProps, tWidthProps } from '../../types';
-export interface IBreadcrumbsItemProps extends iStyleAttributes {
+import { iconSizePropsType, positionPropsType, tDirectionProps, tFillProps, tShapeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tUnderlineProps, tWidthProps } from '../../types';
+export interface iBreadcrumbsItemProps extends iStyleAttributes {
+    id?: string;
+    [key: number | string | symbol]: any;
     children?: ReactNode;
     className?: string;
     cursor?: string;
@@ -11,16 +13,14 @@ export interface IBreadcrumbsItemProps extends iStyleAttributes {
     fillTablet?: tFillProps;
     href?: string;
     iconAfter?: ElementType;
-    itemIconAfter?: ElementType;
     iconAfterBgFill?: tFillProps;
     iconAfterFill?: tFillProps;
     iconAfterSize?: iconSizePropsType;
-    id?: string;
+    itemIconAfter?: ElementType;
     position?: positionPropsType;
     positionDesktop?: positionPropsType;
     positionMobile?: positionPropsType;
     positionTablet?: positionPropsType;
-    set?: string;
     shape?: tShapeProps;
     shapeDesktop?: tShapeProps;
     shapeMobile?: tShapeProps;
@@ -30,13 +30,15 @@ export interface IBreadcrumbsItemProps extends iStyleAttributes {
     textColor?: tTextColorProps;
     textColorHover?: tTextColorHoverProps;
     textSize?: tTextSizeProps;
-    onClick?: () => void;
     underline?: tUnderlineProps;
+    onClick?: () => void;
+    set?: string;
 }
-export interface IBreadcrumbsProps extends iStyleAttributes {
+export interface iBreadcrumbsProps extends iStyleAttributes {
+    [key: number | string | symbol]: any;
     breadcrumbsList?: {
-        href?: string;
         id?: string;
+        href?: string;
         text?: string;
     }[];
     children?: ReactNode;
@@ -59,7 +61,6 @@ export interface IBreadcrumbsProps extends iStyleAttributes {
     positionDesktop?: positionPropsType;
     positionMobile?: positionPropsType;
     positionTablet?: positionPropsType;
-    set?: string;
     shape?: tShapeProps;
     shapeDesktop?: tShapeProps;
     shapeMobile?: tShapeProps;
@@ -68,4 +69,5 @@ export interface IBreadcrumbsProps extends iStyleAttributes {
     widthDesktop?: tWidthProps;
     widthMobile?: tWidthProps;
     widthTablet?: tWidthProps;
+    set?: string;
 }

package/dist/types/components/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -1,3 +1,3 @@
-import { IBreadcrumbsItemProps } from './Breadcrumbs.interface';
-declare function BreadcrumbsItem(props: IBreadcrumbsItemProps): import("react/jsx-runtime").JSX.Element;
+import type { iBreadcrumbsItemProps } from './Breadcrumbs.interface';
+declare function BreadcrumbsItem(props: iBreadcrumbsItemProps): import("react/jsx-runtime").JSX.Element;
 export { BreadcrumbsItem };

package/dist/types/components/Button/Button.appearance.d.ts

@@ -1,2 +1,2 @@
-import { buttonAppearanceType } from './Button.interface';
-export declare const buttonAppearance: buttonAppearanceType;
+import { tButtonAppearance } from './Button.interface';
+export declare const buttonAppearance: tButtonAppearance;