@ozen-ui/kit 0.73.0 → 0.74.0

package/__inner__/cjs/components/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -30,4 +30,5 @@ export type GridBaseProps = {
     className?: string;
 };
 export type GridProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridBaseProps, As>;
+export type GridRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridBaseProps, "div", "as">;

package/__inner__/cjs/components/Grid/GridItem.d.ts

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridItemColVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -22,4 +22,5 @@ export type GridItemBaseProps = {
     className?: string;
 };
 export type GridItemProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridItemBaseProps, As>;
+export type GridItemRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemBaseProps, "div", "as">;

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/b-business-dark/color-b-business-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/b-business-default/color-b-business-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/ozen-dark/color-ozen-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/ozen-default/color-ozen-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/vip-dark/color-vip-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/vip-default/color-vip-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/shadow/ozen-default/shadow-ozen-default.css

@@ -2,4 +2,4 @@
   --shadow-l: 0px 8px 32px rgb(0 0 0 / 8%);
   --shadow-m: 0px 4px 20px rgb(0 0 0 / 6%);
   --shadow-s: 0px 4px 8px rgb(0 0 0 / 3%);
-}
+}

package/__inner__/cjs/components/SectionMessage/SectionMessage.css

@@ -42,6 +42,12 @@
       --section-message-button-color: var(--color-content-error);
       --section-message-button-color-hover: var(--color-content-error-dark);
     }
+.SectionMessage_status_action {
+      --section-message-icon-color: var(--color-content-action);
+      --section-message-background-color: var(--color-background-action-light);
+      --section-message-button-color: var(--color-content-action);
+      --section-message-button-color-hover: var(--color-content-action-dark);
+    }
 .SectionMessage_size_xs {
       --section-message-padding: 12px;
       --section-message-column-gap: var(--spacing-2xs);

package/__inner__/cjs/components/SectionMessage/SectionMessage.js

@@ -6,18 +6,21 @@ require("./modules/SectionMessageButton/SectionMessageButton.css");
 require("./SectionMessage.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
-var classname_1 = require("../../utils/classname");
+var utils_1 = require("../../utils");
 var config_1 = require("./config");
 var constants_1 = require("./constants");
 var SectionMessageContext_1 = require("./SectionMessageContext");
-exports.cnSectionMessage = (0, classname_1.cn)('SectionMessage');
+exports.cnSectionMessage = (0, utils_1.cn)('SectionMessage');
 exports.SectionMessage = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'SectionMessage',
     });
-    var _a = props.status, status = _a === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = tslib_1.__rest(props, ["status", "size", "showIcon", "children", "action", "title", "className"]);
-    var iconSize = size === 'm' || size === 'l' ? 'm' : 's';
+    var _a = props.status, status = _a === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, iconProp = props.icon, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = tslib_1.__rest(props, ["status", "size", "showIcon", "icon", "children", "action", "title", "className"]);
+    var icon = (0, utils_1.renderContent)({
+        content: iconProp !== null && iconProp !== void 0 ? iconProp : config_1.SECTION_MESSAGE_ICON_BY_STATUS[status],
+        props: { size: constants_1.SECTION_MESSAGE_SIZE_TO_ICON_SIZE[size] },
+    });
     var resolveAction = function (action) {
         var actionProps = {
             variant: 'function',
@@ -36,7 +39,7 @@ exports.SectionMessage = (0, react_1.forwardRef)(function (inProps, ref) {
             size: size,
         } },
         react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnSectionMessage)({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
-            showIcon && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Icon') }, config_1.SECTION_MESSAGE_ICON_BY_STATUS[status][iconSize])),
+            showIcon && react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Icon') }, icon),
             react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Content') },
                 title && react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Title') }, title),
                 children && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Body') }, children)),

package/__inner__/cjs/components/SectionMessage/config.d.ts

@@ -1,3 +1,2 @@
-import type { ReactNode } from 'react';
-import type { SectionMessageStatusVariant } from './types';
-export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, Record<'s' | 'm', ReactNode>>>;
+import type { SectionMessageIconType, SectionMessageStatusVariant } from './types';
+export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, SectionMessageIconType>>;

package/__inner__/cjs/components/SectionMessage/config.js

@@ -1,28 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SECTION_MESSAGE_ICON_BY_STATUS = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 exports.SECTION_MESSAGE_ICON_BY_STATUS = {
-    neutral: {
-        m: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "s" }),
-    },
-    info: {
-        m: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "s" }),
-    },
-    warning: {
-        m: react_1.default.createElement(icons_1.WarningTriangleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.WarningTriangleOutlineIcon, { size: "s" }),
-    },
-    success: {
-        m: react_1.default.createElement(icons_1.CheckCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.CheckCircleOutlineIcon, { size: "s" }),
-    },
-    error: {
-        m: react_1.default.createElement(icons_1.WarningCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.WarningCircleOutlineIcon, { size: "s" }),
-    },
+    neutral: icons_1.InfoCircleOutlineIcon,
+    info: icons_1.InfoCircleOutlineIcon,
+    warning: icons_1.WarningTriangleOutlineIcon,
+    success: icons_1.CheckCircleOutlineIcon,
+    error: icons_1.WarningCircleOutlineIcon,
+    action: icons_1.InfoCircleOutlineIcon,
 };

package/__inner__/cjs/components/SectionMessage/constants.d.ts

@@ -1,2 +1,5 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { SectionMessageSizeVariant } from './types';
 export declare const SECTION_MESSAGE_DEFAULT_STATUS = "info";
 export declare const SECTION_MESSAGE_DEFAULT_SIZE = "m";
+export declare const SECTION_MESSAGE_SIZE_TO_ICON_SIZE: Readonly<Record<SectionMessageSizeVariant, IconSize>>;

package/__inner__/cjs/components/SectionMessage/constants.js

@@ -1,5 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECTION_MESSAGE_DEFAULT_SIZE = exports.SECTION_MESSAGE_DEFAULT_STATUS = void 0;
+exports.SECTION_MESSAGE_SIZE_TO_ICON_SIZE = exports.SECTION_MESSAGE_DEFAULT_SIZE = exports.SECTION_MESSAGE_DEFAULT_STATUS = void 0;
 exports.SECTION_MESSAGE_DEFAULT_STATUS = 'info';
 exports.SECTION_MESSAGE_DEFAULT_SIZE = 'm';
+exports.SECTION_MESSAGE_SIZE_TO_ICON_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'm',
+};

package/__inner__/cjs/components/SectionMessage/types.d.ts

@@ -1,10 +1,13 @@
 import type { ComponentRef, ReactElement, ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { RenderContentType } from '../../utils';
 import type { ButtonProps } from '../ButtonNext';
-export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral"];
+export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral", "action"];
 export type SectionMessageStatusVariant = (typeof sectionMessageStatusVariant)[number];
 export declare const sectionMessageSizeVariant: readonly ["xs", "s", "m", "l"];
 export type SectionMessageSizeVariant = (typeof sectionMessageSizeVariant)[number];
+export type SectionMessageIconType = RenderContentType<IconProps>['content'];
 export type SectionMessageRef = ComponentRef<'div'>;
 export type SectionMessageProps = ExtendableComponentPropsWithRef<{
     /**
@@ -17,6 +20,8 @@ export type SectionMessageProps = ExtendableComponentPropsWithRef<{
      * @default true
      */
     showIcon?: boolean;
+    /** Кастомная иконка */
+    icon?: SectionMessageIconType;
     /**
      * Размер
      * @default m

package/__inner__/cjs/components/SectionMessage/types.js

@@ -7,5 +7,6 @@ exports.sectionMessageStatusVariant = [
     'warning',
     'info',
     'neutral',
+    'action',
 ];
 exports.sectionMessageSizeVariant = ['xs', 's', 'm', 'l'];

package/__inner__/cjs/hooks/useIntersectionObserver/index.d.ts

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

package/__inner__/cjs/hooks/useIntersectionObserver/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useIntersectionObserver"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/hooks/useIntersectionObserver/types.d.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { StoredValue } from '../useStoredValue';
+export type UseIntersectionObserverElement = RefObject<Element | null | undefined> | Element | undefined | null;
+export type UseIntersectionObserverOnEntryChange = (entry: IntersectionObserverEntry | null) => void;
+export type UseIntersectionObserverOnViewChange = (inView: boolean) => void;
+export type UseIntersectionObserverOnShow = () => void;
+export type UseIntersectionObserverOnHidden = () => void;
+export type UseIntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
+    /** Вызывается при изменении entry наблюдателя */
+    onEntryChange?: UseIntersectionObserverOnEntryChange;
+    /** Вызывается при входе/выходе элемента из viewport */
+    onViewChange?: UseIntersectionObserverOnViewChange;
+    /** Вызывается при входе элемента во viewport */
+    onShow?: UseIntersectionObserverOnShow;
+    /** Вызывается при выходе элемента из viewport */
+    onHidden?: UseIntersectionObserverOnHidden;
+    /** Если `true`, то включен */
+    enabled?: boolean;
+    /** Root наблюдателя */
+    root?: UseIntersectionObserverElement;
+};
+export type UseIntersectionObserverReturn = {
+    /** Entry наблюдателя */
+    entry: StoredValue<IntersectionObserverEntry | undefined>;
+    /** Если `true`, то элемент находится во viewport */
+    inView: StoredValue<boolean>;
+    /** Функция для переподключения к наблюдателю */
+    reconnect: () => void;
+};

package/__inner__/cjs/hooks/useIntersectionObserver/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/hooks/useIntersectionObserver/useIntersectionObserver.d.ts

@@ -0,0 +1,6 @@
+import type { UseIntersectionObserverElement, UseIntersectionObserverOptions, UseIntersectionObserverReturn } from './types';
+export declare function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target: UseIntersectionObserverElement, 
+/** Параметры отслеживания */
+options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;

package/__inner__/cjs/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = useIntersectionObserver;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("../../utils");
+var useMutableRef_1 = require("../useMutableRef");
+var useStoredValue_1 = require("../useStoredValue");
+function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target, 
+/** Параметры отслеживания */
+options) {
+    var _a;
+    var isEnabled = (_a = options === null || options === void 0 ? void 0 : options.enabled) !== null && _a !== void 0 ? _a : true;
+    var savedOnEntryChange = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onEntryChange);
+    var savedOnViewChange = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onViewChange);
+    var savedOnShow = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onShow);
+    var savedOnHidden = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onHidden);
+    var entry = (0, useStoredValue_1.useStoredValue)(undefined);
+    var inView = (0, useStoredValue_1.useStoredValue)(false);
+    var observer = (0, useStoredValue_1.useStoredValue)(function () { return new IntersectionObserver(function () { }); });
+    var connect = (0, react_1.useCallback)(function () {
+        if (!isEnabled) {
+            return;
+        }
+        var element = (0, utils_1.isRef)(target) ? target.current : target;
+        if (!element) {
+            return;
+        }
+        var root = (function () {
+            var root = options === null || options === void 0 ? void 0 : options.root;
+            if (!root) {
+                return document;
+            }
+            return (0, utils_1.isRef)(options.root) ? options.root.current : options.root;
+        })();
+        observer.current = new IntersectionObserver(function (_a) {
+            var _b, _c, _d, _e, _f;
+            var _g = tslib_1.__read(_a, 1), newEntry = _g[0];
+            var previousInView = !!((_b = entry.current) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+            var currentInView = !!(newEntry === null || newEntry === void 0 ? void 0 : newEntry.isIntersecting);
+            entry.current = newEntry;
+            inView.current = currentInView;
+            (_c = savedOnEntryChange.current) === null || _c === void 0 ? void 0 : _c.call(savedOnEntryChange, newEntry !== null && newEntry !== void 0 ? newEntry : null);
+            if (previousInView === currentInView) {
+                return;
+            }
+            (_d = savedOnViewChange.current) === null || _d === void 0 ? void 0 : _d.call(savedOnViewChange, currentInView);
+            if (currentInView) {
+                (_e = savedOnShow.current) === null || _e === void 0 ? void 0 : _e.call(savedOnShow);
+            }
+            else {
+                (_f = savedOnHidden.current) === null || _f === void 0 ? void 0 : _f.call(savedOnHidden);
+            }
+        }, tslib_1.__assign(tslib_1.__assign({}, options), { root: root }));
+        observer.current.observe(element);
+    }, [
+        (0, utils_1.isRef)(target) ? target.current : target,
+        options === null || options === void 0 ? void 0 : options.rootMargin,
+        options === null || options === void 0 ? void 0 : options.threshold,
+        options === null || options === void 0 ? void 0 : options.root,
+        isEnabled,
+    ]);
+    var disconnect = (0, react_1.useCallback)(function () {
+        observer.current.disconnect();
+    }, [observer]);
+    var reconnect = (0, react_1.useCallback)(function () {
+        disconnect();
+        connect();
+    }, [disconnect, connect]);
+    (0, react_1.useEffect)(function () {
+        reconnect();
+    }, [connect]);
+    (0, react_1.useEffect)(function () { return function () {
+        disconnect();
+    }; }, []);
+    return { entry: entry, inView: inView, reconnect: reconnect };
+}

package/__inner__/cjs/utils/react/extractRef.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const extractRef: <Element extends HTMLElement>(element: RefObject<Element | null> | Element | null | undefined) => Element | null;

package/__inner__/cjs/utils/react/extractRef.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractRef = void 0;
+var isRef_1 = require("./isRef");
+var extractRef = function (element) {
+    if ((0, isRef_1.isRef)(element)) {
+        return element.current;
+    }
+    return element !== null && element !== void 0 ? element : null;
+};
+exports.extractRef = extractRef;

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

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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./extractElementsFromChildren"), exports);
+tslib_1.__exportStar(require("./extractRef"), exports);
 tslib_1.__exportStar(require("./isNodeWithDisplayName"), exports);
 tslib_1.__exportStar(require("./isRef"), exports);
 tslib_1.__exportStar(require("./resolveChildren"), exports);

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

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -30,4 +30,5 @@ export type GridBaseProps = {
     className?: string;
 };
 export type GridProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridBaseProps, As>;
+export type GridRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridBaseProps, "div", "as">;

package/__inner__/esm/components/Grid/GridItem.d.ts

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridItemColVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -22,4 +22,5 @@ export type GridItemBaseProps = {
     className?: string;
 };
 export type GridItemProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridItemBaseProps, As>;
+export type GridItemRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemBaseProps, "div", "as">;

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/color/b-business-dark/color-b-business-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/color/b-business-default/color-b-business-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/color/ozen-dark/color-ozen-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/color/ozen-default/color-ozen-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/color/vip-dark/color-vip-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/color/vip-default/color-vip-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/shadow/ozen-default/shadow-ozen-default.css

@@ -2,4 +2,4 @@
   --shadow-l: 0px 8px 32px rgb(0 0 0 / 8%);
   --shadow-m: 0px 4px 20px rgb(0 0 0 / 6%);
   --shadow-s: 0px 4px 8px rgb(0 0 0 / 3%);
-}
+}

package/__inner__/esm/components/SectionMessage/SectionMessage.css

@@ -42,6 +42,12 @@
       --section-message-button-color: var(--color-content-error);
       --section-message-button-color-hover: var(--color-content-error-dark);
     }
+.SectionMessage_status_action {
+      --section-message-icon-color: var(--color-content-action);
+      --section-message-background-color: var(--color-background-action-light);
+      --section-message-button-color: var(--color-content-action);
+      --section-message-button-color-hover: var(--color-content-action-dark);
+    }
 .SectionMessage_size_xs {
       --section-message-padding: 12px;
       --section-message-column-gap: var(--spacing-2xs);

package/__inner__/esm/components/SectionMessage/SectionMessage.js

@@ -3,9 +3,9 @@ import './modules/SectionMessageButton/SectionMessageButton.css';
 import './SectionMessage.css';
 import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
+import { renderContent, cn } from '../../utils';
 import { SECTION_MESSAGE_ICON_BY_STATUS } from './config';
-import { SECTION_MESSAGE_DEFAULT_SIZE, SECTION_MESSAGE_DEFAULT_STATUS, } from './constants';
+import { SECTION_MESSAGE_DEFAULT_SIZE, SECTION_MESSAGE_DEFAULT_STATUS, SECTION_MESSAGE_SIZE_TO_ICON_SIZE, } from './constants';
 import { SectionMessageContext } from './SectionMessageContext';
 export var cnSectionMessage = cn('SectionMessage');
 export var SectionMessage = forwardRef(function (inProps, ref) {
@@ -13,8 +13,11 @@ export var SectionMessage = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'SectionMessage',
     });
-    var _a = props.status, status = _a === void 0 ? SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = __rest(props, ["status", "size", "showIcon", "children", "action", "title", "className"]);
-    var iconSize = size === 'm' || size === 'l' ? 'm' : 's';
+    var _a = props.status, status = _a === void 0 ? SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, iconProp = props.icon, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = __rest(props, ["status", "size", "showIcon", "icon", "children", "action", "title", "className"]);
+    var icon = renderContent({
+        content: iconProp !== null && iconProp !== void 0 ? iconProp : SECTION_MESSAGE_ICON_BY_STATUS[status],
+        props: { size: SECTION_MESSAGE_SIZE_TO_ICON_SIZE[size] },
+    });
     var resolveAction = function (action) {
         var actionProps = {
             variant: 'function',
@@ -33,7 +36,7 @@ export var SectionMessage = forwardRef(function (inProps, ref) {
             size: size,
         } },
         React.createElement("div", __assign({ className: cnSectionMessage({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
-            showIcon && (React.createElement("div", { className: cnSectionMessage('Icon') }, SECTION_MESSAGE_ICON_BY_STATUS[status][iconSize])),
+            showIcon && React.createElement("div", { className: cnSectionMessage('Icon') }, icon),
             React.createElement("div", { className: cnSectionMessage('Content') },
                 title && React.createElement("div", { className: cnSectionMessage('Title') }, title),
                 children && (React.createElement("div", { className: cnSectionMessage('Body') }, children)),

package/__inner__/esm/components/SectionMessage/config.d.ts

@@ -1,3 +1,2 @@
-import type { ReactNode } from 'react';
-import type { SectionMessageStatusVariant } from './types';
-export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, Record<'s' | 'm', ReactNode>>>;
+import type { SectionMessageIconType, SectionMessageStatusVariant } from './types';
+export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, SectionMessageIconType>>;

package/__inner__/esm/components/SectionMessage/config.js

@@ -1,24 +1,9 @@
-import React from 'react';
 import { CheckCircleOutlineIcon, InfoCircleOutlineIcon, WarningCircleOutlineIcon, WarningTriangleOutlineIcon, } from '@ozen-ui/icons';
 export var SECTION_MESSAGE_ICON_BY_STATUS = {
-    neutral: {
-        m: React.createElement(InfoCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(InfoCircleOutlineIcon, { size: "s" }),
-    },
-    info: {
-        m: React.createElement(InfoCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(InfoCircleOutlineIcon, { size: "s" }),
-    },
-    warning: {
-        m: React.createElement(WarningTriangleOutlineIcon, { size: "m" }),
-        s: React.createElement(WarningTriangleOutlineIcon, { size: "s" }),
-    },
-    success: {
-        m: React.createElement(CheckCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(CheckCircleOutlineIcon, { size: "s" }),
-    },
-    error: {
-        m: React.createElement(WarningCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(WarningCircleOutlineIcon, { size: "s" }),
-    },
+    neutral: InfoCircleOutlineIcon,
+    info: InfoCircleOutlineIcon,
+    warning: WarningTriangleOutlineIcon,
+    success: CheckCircleOutlineIcon,
+    error: WarningCircleOutlineIcon,
+    action: InfoCircleOutlineIcon,
 };

package/__inner__/esm/components/SectionMessage/constants.d.ts

@@ -1,2 +1,5 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { SectionMessageSizeVariant } from './types';
 export declare const SECTION_MESSAGE_DEFAULT_STATUS = "info";
 export declare const SECTION_MESSAGE_DEFAULT_SIZE = "m";
+export declare const SECTION_MESSAGE_SIZE_TO_ICON_SIZE: Readonly<Record<SectionMessageSizeVariant, IconSize>>;

package/__inner__/esm/components/SectionMessage/constants.js

@@ -1,2 +1,8 @@
 export var SECTION_MESSAGE_DEFAULT_STATUS = 'info';
 export var SECTION_MESSAGE_DEFAULT_SIZE = 'm';
+export var SECTION_MESSAGE_SIZE_TO_ICON_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'm',
+};

package/__inner__/esm/components/SectionMessage/types.d.ts

@@ -1,10 +1,13 @@
 import type { ComponentRef, ReactElement, ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { RenderContentType } from '../../utils';
 import type { ButtonProps } from '../ButtonNext';
-export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral"];
+export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral", "action"];
 export type SectionMessageStatusVariant = (typeof sectionMessageStatusVariant)[number];
 export declare const sectionMessageSizeVariant: readonly ["xs", "s", "m", "l"];
 export type SectionMessageSizeVariant = (typeof sectionMessageSizeVariant)[number];
+export type SectionMessageIconType = RenderContentType<IconProps>['content'];
 export type SectionMessageRef = ComponentRef<'div'>;
 export type SectionMessageProps = ExtendableComponentPropsWithRef<{
     /**
@@ -17,6 +20,8 @@ export type SectionMessageProps = ExtendableComponentPropsWithRef<{
      * @default true
      */
     showIcon?: boolean;
+    /** Кастомная иконка */
+    icon?: SectionMessageIconType;
     /**
      * Размер
      * @default m

package/__inner__/esm/components/SectionMessage/types.js

@@ -4,5 +4,6 @@ export var sectionMessageStatusVariant = [
     'warning',
     'info',
     'neutral',
+    'action',
 ];
 export var sectionMessageSizeVariant = ['xs', 's', 'm', 'l'];

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

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

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

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

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

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { StoredValue } from '../useStoredValue';
+export type UseIntersectionObserverElement = RefObject<Element | null | undefined> | Element | undefined | null;
+export type UseIntersectionObserverOnEntryChange = (entry: IntersectionObserverEntry | null) => void;
+export type UseIntersectionObserverOnViewChange = (inView: boolean) => void;
+export type UseIntersectionObserverOnShow = () => void;
+export type UseIntersectionObserverOnHidden = () => void;
+export type UseIntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
+    /** Вызывается при изменении entry наблюдателя */
+    onEntryChange?: UseIntersectionObserverOnEntryChange;
+    /** Вызывается при входе/выходе элемента из viewport */
+    onViewChange?: UseIntersectionObserverOnViewChange;
+    /** Вызывается при входе элемента во viewport */
+    onShow?: UseIntersectionObserverOnShow;
+    /** Вызывается при выходе элемента из viewport */
+    onHidden?: UseIntersectionObserverOnHidden;
+    /** Если `true`, то включен */
+    enabled?: boolean;
+    /** Root наблюдателя */
+    root?: UseIntersectionObserverElement;
+};
+export type UseIntersectionObserverReturn = {
+    /** Entry наблюдателя */
+    entry: StoredValue<IntersectionObserverEntry | undefined>;
+    /** Если `true`, то элемент находится во viewport */
+    inView: StoredValue<boolean>;
+    /** Функция для переподключения к наблюдателю */
+    reconnect: () => void;
+};

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

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

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

@@ -0,0 +1,6 @@
+import type { UseIntersectionObserverElement, UseIntersectionObserverOptions, UseIntersectionObserverReturn } from './types';
+export declare function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target: UseIntersectionObserverElement, 
+/** Параметры отслеживания */
+options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;

package/__inner__/esm/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -0,0 +1,76 @@
+import { __assign, __read } from "tslib";
+import { useCallback, useEffect } from 'react';
+import { isRef } from '../../utils';
+import { useMutableRef } from '../useMutableRef';
+import { useStoredValue } from '../useStoredValue';
+export function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target, 
+/** Параметры отслеживания */
+options) {
+    var _a;
+    var isEnabled = (_a = options === null || options === void 0 ? void 0 : options.enabled) !== null && _a !== void 0 ? _a : true;
+    var savedOnEntryChange = useMutableRef(options === null || options === void 0 ? void 0 : options.onEntryChange);
+    var savedOnViewChange = useMutableRef(options === null || options === void 0 ? void 0 : options.onViewChange);
+    var savedOnShow = useMutableRef(options === null || options === void 0 ? void 0 : options.onShow);
+    var savedOnHidden = useMutableRef(options === null || options === void 0 ? void 0 : options.onHidden);
+    var entry = useStoredValue(undefined);
+    var inView = useStoredValue(false);
+    var observer = useStoredValue(function () { return new IntersectionObserver(function () { }); });
+    var connect = useCallback(function () {
+        if (!isEnabled) {
+            return;
+        }
+        var element = isRef(target) ? target.current : target;
+        if (!element) {
+            return;
+        }
+        var root = (function () {
+            var root = options === null || options === void 0 ? void 0 : options.root;
+            if (!root) {
+                return document;
+            }
+            return isRef(options.root) ? options.root.current : options.root;
+        })();
+        observer.current = new IntersectionObserver(function (_a) {
+            var _b, _c, _d, _e, _f;
+            var _g = __read(_a, 1), newEntry = _g[0];
+            var previousInView = !!((_b = entry.current) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+            var currentInView = !!(newEntry === null || newEntry === void 0 ? void 0 : newEntry.isIntersecting);
+            entry.current = newEntry;
+            inView.current = currentInView;
+            (_c = savedOnEntryChange.current) === null || _c === void 0 ? void 0 : _c.call(savedOnEntryChange, newEntry !== null && newEntry !== void 0 ? newEntry : null);
+            if (previousInView === currentInView) {
+                return;
+            }
+            (_d = savedOnViewChange.current) === null || _d === void 0 ? void 0 : _d.call(savedOnViewChange, currentInView);
+            if (currentInView) {
+                (_e = savedOnShow.current) === null || _e === void 0 ? void 0 : _e.call(savedOnShow);
+            }
+            else {
+                (_f = savedOnHidden.current) === null || _f === void 0 ? void 0 : _f.call(savedOnHidden);
+            }
+        }, __assign(__assign({}, options), { root: root }));
+        observer.current.observe(element);
+    }, [
+        isRef(target) ? target.current : target,
+        options === null || options === void 0 ? void 0 : options.rootMargin,
+        options === null || options === void 0 ? void 0 : options.threshold,
+        options === null || options === void 0 ? void 0 : options.root,
+        isEnabled,
+    ]);
+    var disconnect = useCallback(function () {
+        observer.current.disconnect();
+    }, [observer]);
+    var reconnect = useCallback(function () {
+        disconnect();
+        connect();
+    }, [disconnect, connect]);
+    useEffect(function () {
+        reconnect();
+    }, [connect]);
+    useEffect(function () { return function () {
+        disconnect();
+    }; }, []);
+    return { entry: entry, inView: inView, reconnect: reconnect };
+}

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

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const extractRef: <Element extends HTMLElement>(element: RefObject<Element | null> | Element | null | undefined) => Element | null;

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

@@ -0,0 +1,7 @@
+import { isRef } from './isRef';
+export var extractRef = function (element) {
+    if (isRef(element)) {
+        return element.current;
+    }
+    return element !== null && element !== void 0 ? element : null;
+};

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/icons": "0.73.0",
-    "@ozen-ui/logger": "0.73.0",
-    "@ozen-ui/fonts": "0.73.0"
+    "@ozen-ui/icons": "0.74.0",
+    "@ozen-ui/fonts": "0.74.0",
+    "@ozen-ui/logger": "0.74.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"

package/useDevEffect/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useDevEffect/index.js",
+	"module": "../__inner__/esm/hooks/useDevEffect/index.js",
+	"types": "../__inner__/esm/hooks/useDevEffect/index.d.ts"
+}

package/useIntersectionObserver/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useIntersectionObserver/index.js",
+	"module": "../__inner__/esm/hooks/useIntersectionObserver/index.js",
+	"types": "../__inner__/esm/hooks/useIntersectionObserver/index.d.ts"
+}