@ozen-ui/kit 0.69.0 → 0.71.0

package/__inner__/esm/components/Title/modules/TitleTag/TitleTag.d.ts

@@ -1,3 +1,3 @@
 import type { TitleTagBaseProps } from './types';
 export declare const cnTitleTag: import("@bem-react/classname").ClassNameFormatter;
-export declare const TitleTag: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleTagBaseProps, "div">;
+export declare const TitleTag: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleTagBaseProps, "div", "as">;

package/__inner__/esm/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
 import './Tooltip.css';
 import type { TooltipBaseProps } from './types';
 export declare const cnTooltip: import("@bem-react/classname").ClassNameFormatter;
-export declare const Tooltip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TooltipBaseProps, "div">;
+export declare const Tooltip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TooltipBaseProps, "div", "as">;

package/__inner__/esm/components/Typography/Typography.d.ts

@@ -1,4 +1,4 @@
 import './Typography.css';
 import type { TypographyBaseProps } from './index';
 export declare const cnTypography: import("@bem-react/classname").ClassNameFormatter;
-export declare const Typography: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TypographyBaseProps, "div">;
+export declare const Typography: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TypographyBaseProps, "div", "as">;

package/__inner__/esm/hooks/useBreakpointsObserver/useBreakpointsObserver.js

@@ -1,24 +1,31 @@
+import { useEffect } from 'react';
 import { useOzenSSR } from '../../components/OzenProvider';
 import { calculateBreakpoints } from '../../utils/breakpoint';
 import { useEventListener } from '../useEventListener';
 import { useIsomorphicEffect } from '../useIsomorphicEffect';
 import { useStoredValue } from '../useStoredValue';
+import { useTheme } from '../useTheme';
 export function useBreakpointsObserver(onChange) {
     var ssr = useOzenSSR();
+    var theme = useTheme();
+    var breakpointToken = theme.tokens.breakpoint;
     var matches = useStoredValue(function () {
         if (ssr.config.isEnabled) {
-            return calculateBreakpoints(ssr.config.serverWidth);
+            return calculateBreakpoints(breakpointToken, ssr.config.serverWidth);
         }
-        return calculateBreakpoints(window.innerWidth);
+        return calculateBreakpoints(breakpointToken, window.innerWidth);
     });
     var recalculateMatches = function (width) {
-        var newMatches = calculateBreakpoints(width);
+        var newMatches = calculateBreakpoints(breakpointToken, width);
         var hasChanges = newMatches.currentBreakpoint !== matches.current.currentBreakpoint;
         if (hasChanges) {
             matches.current = newMatches;
             onChange === null || onChange === void 0 ? void 0 : onChange(newMatches, width);
         }
     };
+    useEffect(function () {
+        recalculateMatches(window.innerWidth);
+    }, [theme]);
     useEventListener({
         eventName: 'resize',
         handler: function () {

package/__inner__/esm/hooks/useDeprecated/index.d.ts

@@ -1,3 +1,5 @@
+export * from './base';
 export * from './component';
 export * from './hook';
+export * from './presets';
 export * from './property';

package/__inner__/esm/hooks/useDeprecated/index.js

@@ -1,3 +1,5 @@
+export * from './base';
 export * from './component';
 export * from './hook';
+export * from './presets';
 export * from './property';

package/__inner__/esm/hooks/useDeprecated/presets/index.d.ts

@@ -0,0 +1 @@
+export * from './useDeprecatedTheme';

package/__inner__/esm/hooks/useDeprecated/presets/index.js

@@ -0,0 +1 @@
+export * from './useDeprecatedTheme';

package/__inner__/esm/hooks/useDeprecated/presets/useDeprecatedTheme.d.ts

@@ -0,0 +1 @@
+export declare const useDeprecatedTheme: (isLogNeeded?: boolean) => void;

package/__inner__/esm/hooks/useDeprecated/presets/useDeprecatedTheme.js

@@ -0,0 +1,10 @@
+import { useDeprecatedBase } from '../base';
+export var useDeprecatedTheme = function (isLogNeeded) {
+    if (isLogNeeded === void 0) { isLogNeeded = true; }
+    useDeprecatedBase({
+        type: 'theme',
+        name: 'ThemeProvider',
+        nameNext: 'OzenProvider',
+        isLogNeeded: isLogNeeded,
+    });
+};

package/__inner__/esm/hooks/useTheme/index.d.ts

@@ -0,0 +1 @@
+export * from './useTheme';

package/__inner__/esm/hooks/useTheme/index.js

@@ -0,0 +1 @@
+export * from './useTheme';

package/__inner__/esm/hooks/useTheme/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("../../components/OzenProvider").Theme;

package/__inner__/esm/hooks/useTheme/useTheme.js

@@ -0,0 +1,2 @@
+import { useOzenThemeContext } from '../../components/OzenProvider';
+export var useTheme = function () { return useOzenThemeContext().theme; };

package/__inner__/esm/hooks/useThemeProps/useThemeProps.d.ts

@@ -1,7 +1,7 @@
-import { type Theme } from '../../components/ThemeProvider';
+import type { ThemeDefaultProps } from '../../components/OzenProvider';
 type UseThemeProps<T> = {
     props: T;
-    name: keyof Theme['defaultProps'];
+    name: keyof ThemeDefaultProps;
 };
 export declare const useThemeProps: <T>({ props, name }: UseThemeProps<T>) => T;
 export {};

package/__inner__/esm/hooks/useThemeProps/useThemeProps.js

@@ -1,8 +1,15 @@
 import { __assign } from "tslib";
-import { useTheme } from '../../components/ThemeProvider';
+import { useTheme as useOldTheme } from '../../components/ThemeProvider';
+import { useDeprecatedTheme } from '../useDeprecated';
+import { useTheme } from '../useTheme';
+import { useThemeSettings } from '../useThemeSettings';
 export var useThemeProps = function (_a) {
     var _b;
     var props = _a.props, name = _a.name;
-    var defaultProps = (_b = useTheme()) === null || _b === void 0 ? void 0 : _b.defaultProps;
+    var isUseNewProvider = useThemeSettings().isUseNewProvider;
+    var oldDefaultProps = (_b = useOldTheme()) === null || _b === void 0 ? void 0 : _b.defaultProps;
+    var newDefaultProps = useTheme().defaultProps;
+    var defaultProps = isUseNewProvider ? newDefaultProps : oldDefaultProps;
+    useDeprecatedTheme(!!oldDefaultProps);
     return __assign(__assign({}, defaultProps === null || defaultProps === void 0 ? void 0 : defaultProps[name]), props);
 };

package/__inner__/esm/hooks/useThemeSettings/index.d.ts

@@ -0,0 +1 @@
+export * from './useThemeSettings';

package/__inner__/esm/hooks/useThemeSettings/index.js

@@ -0,0 +1 @@
+export * from './useThemeSettings';

package/__inner__/esm/hooks/useThemeSettings/useThemeSettings.d.ts

@@ -0,0 +1 @@
+export declare function useThemeSettings(): import("../../components/OzenProvider").ThemeSettings;

package/__inner__/esm/hooks/useThemeSettings/useThemeSettings.js

@@ -0,0 +1,4 @@
+import { useOzenThemeContext } from '../../components/OzenProvider';
+export function useThemeSettings() {
+    return useOzenThemeContext().settings;
+}

package/__inner__/esm/hooks/useThemeTokens/index.d.ts

@@ -0,0 +1 @@
+export * from './useThemeTokens';

package/__inner__/esm/hooks/useThemeTokens/index.js

@@ -0,0 +1 @@
+export * from './useThemeTokens';

package/__inner__/esm/hooks/useThemeTokens/useThemeTokens.d.ts

@@ -0,0 +1 @@
+export declare function useThemeTokens(): import("../../components/OzenProvider").ThemeTokens;

package/__inner__/esm/hooks/useThemeTokens/useThemeTokens.js

@@ -0,0 +1,4 @@
+import { useTheme } from '../useTheme';
+export function useThemeTokens() {
+    return useTheme().tokens;
+}

package/__inner__/esm/hooks/useThemeVariables/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useThemeVariables';

package/__inner__/esm/hooks/useThemeVariables/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useThemeVariables';

package/__inner__/esm/hooks/useThemeVariables/types.d.ts

@@ -0,0 +1,4 @@
+import type { ThemeTokens } from '../../components/OzenProvider';
+export type UseThemeVariablesVariables = {
+    [key in keyof ThemeTokens]: ThemeTokens[key]['properties'];
+};

package/__inner__/esm/hooks/useThemeVariables/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/hooks/useThemeVariables/useThemeVariables.d.ts

@@ -0,0 +1,2 @@
+import type { UseThemeVariablesVariables } from './types';
+export declare function useThemeVariables(): UseThemeVariablesVariables;

package/__inner__/esm/hooks/useThemeVariables/useThemeVariables.js

@@ -0,0 +1,14 @@
+import { __read } from "tslib";
+import { useTheme } from '../useTheme';
+export function useThemeVariables() {
+    var theme = useTheme();
+    var tokens = theme.tokens;
+    var variables = {};
+    Object.entries(tokens).forEach(function (_a) {
+        var _b = __read(_a, 2), _tokenName = _b[0], token = _b[1];
+        var tokenName = _tokenName;
+        variables[tokenName] =
+            token.properties;
+    });
+    return variables;
+}

package/__inner__/esm/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,9 +1,15 @@
 import { themeHelper } from '../../components/ThemeProvider';
 type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+/**
+ * @deprecated Используйте {@link useThemeVariables}
+ */
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;
     };
 };
+/**
+ * @deprecated Хук устарел. Для замены используйте {@link useThemeVariables}
+ */
 export declare function useThemeVars(): ThemeVariables;
 export {};

package/__inner__/esm/hooks/useThemeVars/useThemeVars.js

@@ -3,6 +3,9 @@ import { useMemo } from 'react';
 import { useTheme, cnThemeProvider, themeHelper, } from '../../components/ThemeProvider';
 var lastThemeTokens;
 var res;
+/**
+ * @deprecated Хук устарел. Для замены используйте {@link useThemeVariables}
+ */
 export function useThemeVars() {
     var themeTokens = (useTheme() || {}).tokens;
     return useMemo(function () {

package/__inner__/esm/locale/locale.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '../components/ThemeProvider';
+import type { Theme } from '../components/OzenProvider/providers/theme/entities';
 export type Locale = Pick<Theme, 'defaultProps'>;
 export declare const ruRU: Locale;
 export declare const kkKZ: Locale;

package/__inner__/esm/locale/locale.js

@@ -23,6 +23,10 @@ export var ruRU = {
             clearText: 'Очистить',
             closeText: 'Закрыть',
         },
+        DataListCard: {
+            loadingText: 'Загрузка…',
+            noOptionsText: 'Ничего не найдено',
+        },
         Breadcrumbs: {
             'aria-label': 'Навигация',
         },
@@ -108,6 +112,10 @@ export var kkKZ = {
             clearText: 'Тазалау',
             closeText: 'Жабу',
         },
+        DataListCard: {
+            loadingText: 'Жүктеу…',
+            noOptionsText: 'Ештеңе табылған жоқ',
+        },
         Breadcrumbs: {
             'aria-label': 'Навигация',
         },
@@ -193,6 +201,10 @@ export var enUS = {
             clearText: 'Clear',
             closeText: 'Close',
         },
+        DataListCard: {
+            loadingText: 'Loading…',
+            noOptionsText: 'No options',
+        },
         Breadcrumbs: {
             'aria-label': 'Navigation',
         },

package/__inner__/esm/types/Breakpoints.d.ts

@@ -1,8 +1,13 @@
+import type { ThemeBreakpointTokenVariable } from '../components/OzenProvider';
 import type { ObjectPropertiesWithPrefix } from './object';
+/**
+ * @deprecated Используйте значение из темы
+ */
 export declare const breakpointVariant: readonly ["xs", "s", "m", "l"];
+/**
+ * @deprecated Используйте {@link ThemeBreakpointTokenVariable}
+ */
 export type BreakpointVariant = (typeof breakpointVariant)[number];
-export declare const MIN_WIDTH_BY_BREAKPOINT: Record<BreakpointVariant, number>;
-export declare const breakpointsAscending: ("s" | "m" | "l" | "xs")[];
 export declare const BREAKPOINT_PREFIX: {
     readonly IS: "is";
     readonly IS_A_LARGER_THAN: "isALargerThan";
@@ -11,10 +16,10 @@ export declare const BREAKPOINT_PREFIX: {
     readonly IS_A_SMALLER_THAN_OR_IS: "isASmallerThanOrIs";
 };
 export type BreakpointPrefix = (typeof BREAKPOINT_PREFIX)[keyof typeof BREAKPOINT_PREFIX];
-export type IsBreakpoint = ObjectPropertiesWithPrefix<Capitalize<BreakpointVariant>, typeof BREAKPOINT_PREFIX.IS, boolean>;
-export type IsALargerBreakpoint = ObjectPropertiesWithPrefix<Capitalize<BreakpointVariant>, typeof BREAKPOINT_PREFIX.IS_A_LARGER_THAN, boolean> & ObjectPropertiesWithPrefix<Capitalize<BreakpointVariant>, typeof BREAKPOINT_PREFIX.IS_A_LARGER_THAN_OR_IS, boolean>;
-export type IsASmallerBreakpoint = ObjectPropertiesWithPrefix<Capitalize<BreakpointVariant>, typeof BREAKPOINT_PREFIX.IS_A_SMALLER_THAN, boolean> & ObjectPropertiesWithPrefix<Capitalize<BreakpointVariant>, typeof BREAKPOINT_PREFIX.IS_A_SMALLER_THAN_OR_IS, boolean>;
+export type IsBreakpoint = ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS, boolean>;
+export type IsALargerBreakpoint = ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_LARGER_THAN, boolean> & ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_LARGER_THAN_OR_IS, boolean>;
+export type IsASmallerBreakpoint = ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_SMALLER_THAN, boolean> & ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_SMALLER_THAN_OR_IS, boolean>;
 export type CurrentBreakpoint = {
-    currentBreakpoint: BreakpointVariant;
+    currentBreakpoint: ThemeBreakpointTokenVariable;
 };
 export type BreakpointMatches = IsBreakpoint & IsALargerBreakpoint & IsASmallerBreakpoint & CurrentBreakpoint;

package/__inner__/esm/types/Breakpoints.js

@@ -1,22 +1,7 @@
-import { __read } from "tslib";
+/**
+ * @deprecated Используйте значение из темы
+ */
 export var breakpointVariant = ['xs', 's', 'm', 'l'];
-export var MIN_WIDTH_BY_BREAKPOINT = {
-    xs: 0,
-    s: 640,
-    m: 1024,
-    l: 1280,
-};
-export var breakpointsAscending = Object.entries(MIN_WIDTH_BY_BREAKPOINT)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    .sort(function (_c, _d) {
-    var _e = __read(_c, 2), _a = _e[0], breakpointA = _e[1];
-    var _f = __read(_d, 2), _b = _f[0], breakpointB = _f[1];
-    return breakpointA - breakpointB;
-})
-    .map(function (_c) {
-    var _d = __read(_c, 1), deviceSize = _d[0];
-    return deviceSize;
-});
 export var BREAKPOINT_PREFIX = {
     IS: 'is',
     IS_A_LARGER_THAN: 'isALargerThan',

package/__inner__/esm/types/object/index.d.ts

@@ -1,2 +1,3 @@
 export * from './objectPropertiesWithPrefix';
 export * from './withPartial';
+export * from './withRequired';

package/__inner__/esm/types/object/index.js

@@ -1,2 +1,3 @@
 export * from './objectPropertiesWithPrefix';
 export * from './withPartial';
+export * from './withRequired';

package/__inner__/esm/types/object/withRequired.d.ts

@@ -0,0 +1,3 @@
+export type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};

package/__inner__/esm/types/object/withRequired.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/utils/breakpoint/calculateIsBreakpoints.d.ts

@@ -1,2 +1,4 @@
+import type { ThemeBreakpointToken, ThemeBreakpointTokenProperties } from '../../components/OzenProvider';
 import type { BreakpointMatches } from '../../types/Breakpoints';
-export declare const calculateBreakpoints: (windowWidth: number) => BreakpointMatches;
+export declare const getBreakpointsAscending: (breakpointToken: ThemeBreakpointToken) => (keyof ThemeBreakpointTokenProperties)[];
+export declare const calculateBreakpoints: (breakpointToken: ThemeBreakpointToken, windowWidth: number) => BreakpointMatches;

package/__inner__/esm/utils/breakpoint/calculateIsBreakpoints.js

@@ -1,12 +1,12 @@
-import { __values } from "tslib";
-import { BREAKPOINT_PREFIX, breakpointsAscending, MIN_WIDTH_BY_BREAKPOINT, } from '../../types/Breakpoints';
+import { __read, __values } from "tslib";
+import { BREAKPOINT_PREFIX } from '../../types/Breakpoints';
 import { capitalizeFirstLetter } from '../capitalizeFirstLetter';
 var memoizedBreakpointsMatches = {};
 var generateIsBreakpointKey = function (prefix, breakpoint) {
     return "".concat(prefix).concat(capitalizeFirstLetter(breakpoint));
 };
 var checkIsCurrentBreakpoint = function (isBreakpoint, breakpoint) { return isBreakpoint[generateIsBreakpointKey(BREAKPOINT_PREFIX.IS, breakpoint)]; };
-var checkHasALargerThan = function (isBreakpoint, breakpoint) {
+var checkHasALargerThan = function (breakpointsAscending, isBreakpoint, breakpoint) {
     var breakpointIndex = breakpointsAscending.indexOf(breakpoint);
     var largerBreakpoints = breakpointsAscending.slice(breakpointIndex + 1, breakpointsAscending.length);
     var hasLargerBreakpointThanThis = largerBreakpoints.some(function (breakpoint) {
@@ -14,7 +14,7 @@ var checkHasALargerThan = function (isBreakpoint, breakpoint) {
     });
     return hasLargerBreakpointThanThis;
 };
-var checkHasASmallerThan = function (isBreakpoint, breakpoint) {
+var checkHasASmallerThan = function (breakpointsAscending, isBreakpoint, breakpoint) {
     var breakpointIndex = breakpointsAscending.indexOf(breakpoint);
     var smallerBreakpoints = breakpointsAscending.slice(0, breakpointIndex);
     var hasSmallerBreakpointThanThis = smallerBreakpoints.some(function (breakpoint) {
@@ -22,11 +22,11 @@ var checkHasASmallerThan = function (isBreakpoint, breakpoint) {
     });
     return hasSmallerBreakpointThanThis;
 };
-var checkIsBreakpoint = function (windowWidth, breakpoint) {
+var checkIsBreakpoint = function (minWidthByBreakpoint, breakpointsAscending, windowWidth, breakpoint) {
     var breakpointIndex = breakpointsAscending.indexOf(breakpoint);
-    var previousBreakpoint = MIN_WIDTH_BY_BREAKPOINT[breakpointsAscending[breakpointIndex - 1]];
-    var currentBreakpoint = MIN_WIDTH_BY_BREAKPOINT[breakpoint];
-    var nextBreakpoint = MIN_WIDTH_BY_BREAKPOINT[breakpointsAscending[breakpointIndex + 1]];
+    var previousBreakpoint = minWidthByBreakpoint[breakpointsAscending[breakpointIndex - 1]];
+    var currentBreakpoint = minWidthByBreakpoint[breakpoint];
+    var nextBreakpoint = minWidthByBreakpoint[breakpointsAscending[breakpointIndex + 1]];
     var isTheSmallestBreakpoint = breakpointIndex === 0;
     if (isTheSmallestBreakpoint) {
         return windowWidth < nextBreakpoint;
@@ -35,16 +35,30 @@ var checkIsBreakpoint = function (windowWidth, breakpoint) {
     if (isTheLargestBreakpoint) {
         return windowWidth >= currentBreakpoint && windowWidth > previousBreakpoint;
     }
-    return (windowWidth >= MIN_WIDTH_BY_BREAKPOINT[breakpoint] &&
+    return (windowWidth >= minWidthByBreakpoint[breakpoint] &&
         windowWidth < nextBreakpoint);
 };
-export var calculateBreakpoints = function (windowWidth) {
-    var e_1, _a;
+export var getBreakpointsAscending = function (breakpointToken) {
+    return Object.entries(breakpointToken.properties)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .sort(function (_c, _d) {
+        var _e = __read(_c, 2), _a = _e[0], breakpointA = _e[1];
+        var _f = __read(_d, 2), _b = _f[0], breakpointB = _f[1];
+        return breakpointA - breakpointB;
+    })
+        .map(function (_c) {
+        var _d = __read(_c, 1), deviceSize = _d[0];
+        return deviceSize;
+    });
+};
+export var calculateBreakpoints = function (breakpointToken, windowWidth) {
+    var e_1, _c;
     var matches = {};
+    var breakpointsAscending = getBreakpointsAscending(breakpointToken);
     try {
         for (var breakpointsAscending_1 = __values(breakpointsAscending), breakpointsAscending_1_1 = breakpointsAscending_1.next(); !breakpointsAscending_1_1.done; breakpointsAscending_1_1 = breakpointsAscending_1.next()) {
             var breakpoint = breakpointsAscending_1_1.value;
-            var isThisBreakpoint = checkIsBreakpoint(windowWidth, breakpoint);
+            var isThisBreakpoint = checkIsBreakpoint(breakpointToken.properties, breakpointsAscending, windowWidth, breakpoint);
             matches[generateIsBreakpointKey(BREAKPOINT_PREFIX.IS, breakpoint)] =
                 isThisBreakpoint;
             if (isThisBreakpoint) {
@@ -59,14 +73,14 @@ export var calculateBreakpoints = function (windowWidth) {
     catch (e_1_1) { e_1 = { error: e_1_1 }; }
     finally {
         try {
-            if (breakpointsAscending_1_1 && !breakpointsAscending_1_1.done && (_a = breakpointsAscending_1.return)) _a.call(breakpointsAscending_1);
+            if (breakpointsAscending_1_1 && !breakpointsAscending_1_1.done && (_c = breakpointsAscending_1.return)) _c.call(breakpointsAscending_1);
         }
         finally { if (e_1) throw e_1.error; }
     }
     breakpointsAscending.forEach(function (breakpoint) {
         var isCurrentBreakpoint = checkIsCurrentBreakpoint(matches, breakpoint);
-        var hasALargerThan = checkHasALargerThan(matches, breakpoint);
-        var hasASmallerThan = checkHasASmallerThan(matches, breakpoint);
+        var hasALargerThan = checkHasALargerThan(breakpointsAscending, matches, breakpoint);
+        var hasASmallerThan = checkHasASmallerThan(breakpointsAscending, matches, breakpoint);
         matches[generateIsBreakpointKey(BREAKPOINT_PREFIX.IS_A_LARGER_THAN, breakpoint)] = hasALargerThan;
         matches[generateIsBreakpointKey(BREAKPOINT_PREFIX.IS_A_SMALLER_THAN, breakpoint)] = hasASmallerThan;
         matches[generateIsBreakpointKey(BREAKPOINT_PREFIX.IS_A_LARGER_THAN_OR_IS, breakpoint)] = hasALargerThan || isCurrentBreakpoint;

package/__inner__/esm/utils/polymorphicComponentWithRef.d.ts

@@ -1,16 +1,17 @@
 import type { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';
 declare const defaultElement = "div";
-export type PolymorphicComponentPropsWithRef<Props, As extends ElementType> = Props & {
-    as?: As;
+declare const defaultName = "as";
+export type PolymorphicComponentPropsWithRef<Props, As extends ElementType, Name extends string = typeof defaultName> = Props & {
+    [key in Name]?: As;
 } & Omit<ComponentPropsWithRef<As>, keyof Props>;
-export type PolymorphicComponentPropsWithoutRef<Props, As extends ElementType> = Props & {
-    as?: As;
+export type PolymorphicComponentPropsWithoutRef<Props, As extends ElementType, Name extends string = typeof defaultName> = Props & {
+    [key in Name]?: As;
 } & Omit<ComponentPropsWithoutRef<As>, keyof Props>;
 export type PolymorphicComponentRef<As extends ElementType> = ComponentPropsWithRef<As>['ref'];
-type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As>) => ReactElement | null;
-export type PolymorphicComponentWithRef<Props, As extends ElementType> = ComponentWithAs<Props, As> & {
+type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement, Name extends string = typeof defaultName> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As, Name>) => ReactElement | null;
+export type PolymorphicComponentWithRef<Props, As extends ElementType, Name extends string = typeof defaultName> = ComponentWithAs<Props, As, Name> & {
     displayName?: string | undefined;
 };
-type ForwardRefWithAs<Props> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As>, ref: PolymorphicComponentRef<As>) => ReactElement | null;
-export declare function polymorphicComponentWithRef<Props, As extends ElementType = typeof defaultElement>(baseComponent: ForwardRefWithAs<Props>): PolymorphicComponentWithRef<Props, As>;
+type ForwardRefWithAs<Props, Name extends string = typeof defaultName> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As, Name>, ref: PolymorphicComponentRef<As>) => ReactElement | null;
+export declare function polymorphicComponentWithRef<Props, As extends ElementType = typeof defaultElement, Name extends string = typeof defaultName>(baseComponent: ForwardRefWithAs<Props, Name>): PolymorphicComponentWithRef<Props, As, Name>;
 export {};

package/__inner__/esm/utils/polymorphicComponentWithRef.js

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
 var defaultElement = 'div';
+var defaultName = 'as';
 export function polymorphicComponentWithRef(baseComponent) {
     return forwardRef(baseComponent);
 }

package/__inner__/esm/utils/react/extractElementsFromChildren.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement, ReactNode } from 'react';
+export declare const extractElementsFromChildren: <Props>(children: ReactNode, checkIsItem: (child: ReactElement) => child is ReactElement<Props>, onMatch: (element: ReactElement<Props>) => void) => void;

package/__inner__/esm/utils/react/extractElementsFromChildren.js

@@ -0,0 +1,10 @@
+import { Children } from 'react';
+import { resolveChildren } from './resolveChildren';
+export var extractElementsFromChildren = function (children, checkIsItem, onMatch) {
+    Children.forEach(resolveChildren(children), function (child) {
+        if (!checkIsItem(child)) {
+            return;
+        }
+        onMatch(child);
+    });
+};

package/__inner__/esm/utils/react/index.d.ts

@@ -1 +1,4 @@
+export * from './extractElementsFromChildren';
+export * from './isNodeWithDisplayName';
 export * from './isRef';
+export * from './resolveChildren';

package/__inner__/esm/utils/react/index.js

@@ -1 +1,4 @@
+export * from './extractElementsFromChildren';
+export * from './isNodeWithDisplayName';
 export * from './isRef';
+export * from './resolveChildren';

package/__inner__/esm/utils/react/isNodeWithDisplayName.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const isNodeWithDisplayName: (node: ReactNode, displayName: string) => boolean;

package/__inner__/esm/utils/react/isNodeWithDisplayName.js

@@ -0,0 +1,19 @@
+import { isValidElement } from 'react';
+import { isFunction } from '../isFunction';
+import { isPlainObject } from '../object';
+export var isNodeWithDisplayName = function (node, displayName) {
+    var isValid = isValidElement(node);
+    if (!isValid) {
+        return false;
+    }
+    if (!isPlainObject(node.type) && !isFunction(node.type)) {
+        return false;
+    }
+    var isEqualByTypeDisplayName = 'displayName' in node.type && node.type.displayName === displayName;
+    var isEqualByRenderDisplayName = 'render' in node.type &&
+        node.type.render &&
+        isFunction(node.type.render) &&
+        'displayName' in node.type.render &&
+        node.type.render.displayName === displayName;
+    return isEqualByTypeDisplayName || !!isEqualByRenderDisplayName;
+};

package/__inner__/esm/utils/react/resolveChildren.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const resolveChildren: (children: ReactNode) => any;

package/__inner__/esm/utils/react/resolveChildren.js

@@ -0,0 +1,4 @@
+import { isFragment } from 'react-is';
+export var resolveChildren = function (children) {
+    return isFragment(children) ? children.props.children : children;
+};

package/__inner__/esm/utils/string/index.d.ts

@@ -0,0 +1,4 @@
+export * from './toCamelCase';
+export * from './toKebabCase';
+export * from './toPascalCase';
+export * from './toSnakeCase';

package/__inner__/esm/utils/string/index.js

@@ -0,0 +1,4 @@
+export * from './toCamelCase';
+export * from './toKebabCase';
+export * from './toPascalCase';
+export * from './toSnakeCase';

package/__inner__/esm/utils/string/toCamelCase.d.ts

@@ -0,0 +1 @@
+export declare const toCamelCase: (value: string) => string;

package/__inner__/esm/utils/string/toCamelCase.js

@@ -0,0 +1,5 @@
+export var toCamelCase = function (value) {
+    return value
+        .replace(/[-_]+(.)?/g, function (_, chr) { return (chr ? chr.toUpperCase() : ''); })
+        .replace(/^\w/, function (chr) { return chr.toLowerCase(); });
+};

package/__inner__/esm/utils/string/toKebabCase.d.ts

@@ -0,0 +1 @@
+export declare const toKebabCase: (value: string) => string;

package/__inner__/esm/utils/string/toKebabCase.js

@@ -0,0 +1,7 @@
+export var toKebabCase = function (value) {
+    return value
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/\s+/g, '-')
+        .replace(/_/g, '-')
+        .toLowerCase();
+};

package/__inner__/esm/utils/string/toPascalCase.d.ts

@@ -0,0 +1 @@
+export declare const toPascalCase: (value: string) => string;

package/__inner__/esm/utils/string/toPascalCase.js

@@ -0,0 +1,5 @@
+export var toPascalCase = function (value) {
+    return value
+        .replace(/[-_]+(.)?/g, function (_, chr) { return (chr ? chr.toUpperCase() : ''); })
+        .replace(/^\w/, function (chr) { return chr.toUpperCase(); });
+};

package/__inner__/esm/utils/string/toSnakeCase.d.ts

@@ -0,0 +1 @@
+export declare const toSnakeCase: (value: string) => string;

package/__inner__/esm/utils/string/toSnakeCase.js

@@ -0,0 +1,7 @@
+export var toSnakeCase = function (value) {
+    return value
+        .replace(/([a-z0-9])([A-Z])/g, '$1_$2') // Разделяем camelCase -> camel_Case
+        .replace(/\W+/g, '_') // Заменяем пробелы и символы на _
+        .replace(/^_|_$/g, '') // Удаляем _ в начале/конце
+        .toLowerCase();
+};