@astral/ui 4.91.2 → 4.92.1

package/node/components/Tabs/Tabs.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const Tabs = ({ className, ...tabsProps }) => {
     const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
-    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef, className: (0, classNames_1.classNames)(className, constants_1.tabsClassnames.root) }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef, className: (0, cn_1.cn)(className, constants_1.tabsClassnames.root) }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
 };
 exports.Tabs = Tabs;

package/node/components/Tag/useLogic/useLogic.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
 const useLogic = ({ onDelete, variant, disabled, size, className, }) => {
     const handleDelete = (event) => {
         event.stopPropagation();
         onDelete?.(event);
     };
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.tagClassnames.root, {
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)(constants_1.tagClassnames.root, {
         [constants_1.tagClassnames.variantText]: variant === 'text',
         [constants_1.tagClassnames.variantContained]: variant === 'contained',
         [constants_1.tagClassnames.variantLight]: variant === 'light',

package/node/components/TagBadge/TagBadge.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Tag_1 = require("../Tag");
 const TagContext_1 = require("../Tag/TagContext");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const styles_1 = require("./styles");
 /**
  * Badge для использования внутри компонента Tag
  */
 const TagBadge = ({ color = 'primary', checked, disabled, checkedColor, className, ...props }) => {
     const { variant } = (0, react_1.useContext)(TagContext_1.TagContext);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { withBorder: false, color: "white", "$color": color, "$variant": variant, "$isChecked": checked, "$isDisabled": disabled, className: (0, classNames_1.classNames)(className, Tag_1.tagClassnames.badge), ...props }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { withBorder: false, color: "white", "$color": color, "$variant": variant, "$isChecked": checked, "$isDisabled": disabled, className: (0, cn_1.cn)(className, Tag_1.tagClassnames.badge), ...props }));
 };
 exports.TagBadge = TagBadge;

package/node/components/TextField/TextField.js

@@ -4,7 +4,7 @@ exports.TextField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const FormHelperText_1 = require("../FormHelperText");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 exports.TextField = (0, react_1.forwardRef)(({ success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className, disabled, ...props }, ref) => {
@@ -40,7 +40,7 @@ exports.TextField = (0, react_1.forwardRef)(({ success, error, helperText: helpe
         }
         onBlur?.(event);
     };
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, {
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)(className, {
         [constants_1.textFieldClassnames.hideHelperText]: hideHelperText,
         [constants_1.textFieldClassnames.disabled]: disabled,
     }), [className, hideHelperText, disabled]);

package/node/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -17,5 +17,5 @@ const tooltipCva = (0, cva_1.cva)(constants_1.tooltipClassnames.root, {
 });
 exports.Tooltip = (0, react_1.forwardRef)((props, ref) => {
     const { title, placement = 'top', size = 'medium', withoutContainer = true, children, className, tooltipStyle, width, ...restProps } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTooltip, { ref: ref, title: title, size: size, placement: placement, arrow: true, className: (0, classNames_1.classNames)(className, tooltipCva({ withoutMaxWidth: Boolean(width) })), style: tooltipStyle, ...restProps, children: withoutContainer ? (children) : ((0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { className: constants_1.tooltipClassnames.contentWrapper, children: children })) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTooltip, { ref: ref, title: title, size: size, placement: placement, arrow: true, className: (0, cn_1.cn)(className, tooltipCva({ withoutMaxWidth: Boolean(width) })), style: tooltipStyle, ...restProps, children: withoutContainer ? (children) : ((0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { className: constants_1.tooltipClassnames.contentWrapper, children: children })) }));
 });

package/node/components/Tooltip/useLogic/useLogic.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const personalDataSecurity_1 = require("../../personalDataSecurity");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const useLogic = (props) => {
     const { children, className: propClassName, width, style, ...restProps } = props;
     const hidePersonalDataClassName = (0, personalDataSecurity_1.useHidePersonalData)({
         type: 'container',
     });
-    const className = (0, classNames_1.classNames)(propClassName, {
+    const className = (0, cn_1.cn)(propClassName, {
         [hidePersonalDataClassName]: children.props.className?.includes(hidePersonalDataClassName),
     });
     const tooltipStyle = {

package/node/components/Tree/TreeList/TreeList.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const TreeItem_1 = require("./TreeItem");
@@ -11,6 +11,6 @@ const INITIAL_LEVEL = 0;
 const TreeList = (props) => {
     const { listProps, itemProps } = (0, useLogic_1.useLogic)(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, classNames_1.classNames)(className, constants_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, constants_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
 };
 exports.TreeList = TreeList;

package/node/components/TreeLikeList/TreeLikeList.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeLikeList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tree_1 = require("../Tree");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const styles_1 = require("./styles");
 const TreeItem_1 = require("./TreeItem");
 const useLogic_1 = require("./useLogic");
@@ -11,6 +11,6 @@ const INITIAL_LEVEL = 0;
 const TreeLikeList = (props) => {
     const { listProps, itemProps } = (0, useLogic_1.useLogic)(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, classNames_1.classNames)(className, Tree_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, Tree_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
 };
 exports.TreeLikeList = TreeLikeList;

package/node/components/Typography/Typography.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Typography = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
@@ -20,5 +20,5 @@ const typographyCva = (0, cva_1.cva)(constants_1.typographyClassnames.root, {
 });
 exports.Typography = (0, react_1.forwardRef)(({ children, color, colorIntensity = '800', component, withoutCalt, className, isTabularNums, ...props }, ref) => {
     const typographyColor = (0, hooks_1.useTypographyColor)({ color, colorIntensity });
-    return ((0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: (0, classNames_1.classNames)(typographyCva({ isTabularNums, withoutCalt }), className), children: children }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: (0, cn_1.cn)(typographyCva({ isTabularNums, withoutCalt }), className), children: children }));
 });

package/node/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -4,7 +4,7 @@ exports.LoadingPlaceholder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Loader_1 = require("../../Loader");
 const Typography_1 = require("../../Typography");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
@@ -12,11 +12,11 @@ const styles_1 = require("./styles");
  */
 const LoadingPlaceholder = ({ title, content, isShowLoader = true, className, }) => {
     if (!isShowLoader) {
-        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: (0, classNames_1.classNames)(constants_1.loadingPlaceholderClassnames.root, className) }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: (0, cn_1.cn)(constants_1.loadingPlaceholderClassnames.root, className) }));
     }
     if (content) {
-        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: (0, classNames_1.classNames)(constants_1.loadingPlaceholderClassnames.root, className), children: content }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: (0, cn_1.cn)(constants_1.loadingPlaceholderClassnames.root, className), children: content }));
     }
-    return ((0, jsx_runtime_1.jsxs)(styles_1.LoadingContainer, { className: (0, classNames_1.classNames)(constants_1.loadingPlaceholderClassnames.root, className), children: [(0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.LoadingContainer, { className: (0, cn_1.cn)(constants_1.loadingPlaceholderClassnames.root, className), children: [(0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title })] }));
 };
 exports.LoadingPlaceholder = LoadingPlaceholder;

package/node/components/utils/classNames/classNames.d.ts

@@ -1 +1 @@
-export { default as classNames } from 'classnames';
+export { default as classNames } from 'clsx';

package/node/components/utils/classNames/classNames.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classNames = void 0;
-var classnames_1 = require("classnames");
-Object.defineProperty(exports, "classNames", { enumerable: true, get: function () { return __importDefault(classnames_1).default; } });
+var clsx_1 = require("clsx");
+Object.defineProperty(exports, "classNames", { enumerable: true, get: function () { return __importDefault(clsx_1).default; } });

package/node/components/utils/cn/cn.d.ts

@@ -0,0 +1 @@
+export { default as cn } from 'clsx';

package/node/components/utils/cn/cn.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+var clsx_1 = require("clsx");
+Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return __importDefault(clsx_1).default; } });

package/node/components/utils/cn/index.d.ts

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

package/node/components/utils/cn/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./cn"), exports);

package/node/components/utils/cn/public.d.ts

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

package/node/components/utils/cn/public.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./cn"), exports);

package/node/hook-form/EditableText/EditableText.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tooltip_1 = require("../../components/Tooltip");
-const classNames_1 = require("../../components/utils/classNames");
+const cn_1 = require("../../components/utils/cn");
 const constants_1 = require("./constants");
 const EditingForm_1 = require("./EditingForm");
 const styles_1 = require("./styles");
@@ -26,7 +26,7 @@ const EditableText = (props) => {
         if (showEditIconMode === 'none') {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(styles_1.StyledEditIcon, { "$iconPosition": iconPosition, className: (0, classNames_1.classNames)({
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledEditIcon, { "$iconPosition": iconPosition, className: (0, cn_1.cn)({
                 [constants_1.editableTextClassnames.showIconOnHover]: showEditIconMode === 'onHover',
             }) }));
     };

package/node/hook-form/FormFilters/AllFiltersButton/useLogic/useLogic.js

@@ -4,7 +4,7 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const useViewportType_1 = require("../../../../components/useViewportType");
-const classNames_1 = require("../../../../components/utils/classNames");
+const cn_1 = require("../../../../components/utils/cn");
 const constants_1 = require("../../../FormFiltersSearchField/constants");
 const constants_2 = require("../../../FormQuickFilters/constants");
 const constants_3 = require("../../constants");
@@ -37,7 +37,7 @@ const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasS
         return (filledValuesCount - (searchValue ? 1 : 0) - (quickFiltersValue ? 1 : 0));
     };
     const allFiltersButtonClassName = (0, react_1.useMemo)(() => {
-        return (0, classNames_1.classNames)({
+        return (0, cn_1.cn)({
             [constants_3.formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
             [constants_3.formFiltersClassnames.showAllFiltersButtonOnLaptop]: hasMainFilters || hasSecondaryFilters,
             [constants_3.formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,

package/node/hook-form/FormMobilePhoneField/FormMobilePhoneField.js

@@ -4,7 +4,7 @@ exports.FormMobilePhoneField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const MaskField_1 = require("../../components/MaskField");
 const personalDataSecurity_1 = require("../../components/personalDataSecurity");
-const classNames_1 = require("../../components/utils/classNames");
+const cn_1 = require("../../components/utils/cn");
 const useFormFieldProps_1 = require("../useFormFieldProps");
 const MOBILE_PHONE_MASK = '+{7} (000) 000-00-00';
 /**
@@ -21,7 +21,7 @@ const FormMobilePhoneField = ({ isHidePersonalData, inputProps, ...props }) => {
     });
     return ((0, jsx_runtime_1.jsx)(MaskField_1.MaskField, { inputProps: {
             ...inputProps,
-            className: (0, classNames_1.classNames)(inputProps?.className, hidePersonalDataClassname),
+            className: (0, cn_1.cn)(inputProps?.className, hidePersonalDataClassname),
         }, placeholder: "+7 (9**) ***-**-**", ...fieldProps, mask: MOBILE_PHONE_MASK, autoComplete: "tel" }));
 };
 exports.FormMobilePhoneField = FormMobilePhoneField;

package/node/hook-form/FormPageLayout/FormPageLayout.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormPageLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../../components/utils/classNames");
+const cn_1 = require("../../components/utils/cn");
 const Form_1 = require("../Form");
 const FormPageLayoutBase_1 = require("../FormPageLayoutBase");
 const FormPageFooter_1 = require("./FormPageFooter");
@@ -13,7 +13,7 @@ const styles_1 = require("./styles");
 const FormPageLayout = (props) => {
     const { form, children, ...restProps } = props;
     const { secondaryActions, submitButtonText, ...restFormProps } = form;
-    return ((0, jsx_runtime_1.jsx)(FormPageLayoutBase_1.FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: (0, classNames_1.classNames)({
+    return ((0, jsx_runtime_1.jsx)(FormPageLayoutBase_1.FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: (0, cn_1.cn)({
             [FormPageLayoutBase_1.formPageContentClassnames.formPageContentSecondaryActions]: Boolean(secondaryActions),
         }), children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(Form_1.Form, { ...restFormProps, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(styles_1.FormContent, { children: children }), (0, jsx_runtime_1.jsx)(FormPageFooter_1.FormPageFooter, { isDisabled: isDisabled, submitButtonText: submitButtonText, secondaryActions: secondaryActions })] })) }));
 };

package/node/hook-form/FormPageLayoutBase/FormPageLayoutBase.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const PageAside_1 = require("../../components/PageAside");
 const PageContext_1 = require("../../components/PageContext");
 const PageLayoutContainer_1 = require("../../components/PageLayoutContainer");
-const classNames_1 = require("../../components/utils/classNames");
+const cn_1 = require("../../components/utils/cn");
 const FormMobileActions_1 = require("./FormMobileActions");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
@@ -16,6 +16,6 @@ const useLogic_1 = require("./useLogic");
 const FormPageLayoutBase = (props) => {
     const { pageContentProps, headerProps, renderChildrenProps, headerActions } = (0, useLogic_1.useLogic)(props);
     const { className, aside, children, alert, contentClassname, header } = props;
-    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: Boolean(aside), mobileTitleActions: (0, jsx_runtime_1.jsx)(FormMobileActions_1.FormMobileActions, { actions: headerActions }), children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: className, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.MobileAlertWrapper, { children: alert }), (0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsx)(styles_1.StyledPageHeader, { ...headerProps })), (0, jsx_runtime_1.jsx)(styles_1.StyledPageContent, { className: (0, classNames_1.classNames)(contentClassname), isFormPaddingDisable: true, ...pageContentProps, children: children(renderChildrenProps) }), aside && !(0, react_1.isValidElement)(aside) && ((0, jsx_runtime_1.jsx)(PageAside_1.PageAside, { ...aside })), (0, react_1.isValidElement)(aside) && aside] })] }));
+    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: Boolean(aside), mobileTitleActions: (0, jsx_runtime_1.jsx)(FormMobileActions_1.FormMobileActions, { actions: headerActions }), children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: className, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.MobileAlertWrapper, { children: alert }), (0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsx)(styles_1.StyledPageHeader, { ...headerProps })), (0, jsx_runtime_1.jsx)(styles_1.StyledPageContent, { className: (0, cn_1.cn)(contentClassname), isFormPaddingDisable: true, ...pageContentProps, children: children(renderChildrenProps) }), aside && !(0, react_1.isValidElement)(aside) && ((0, jsx_runtime_1.jsx)(PageAside_1.PageAside, { ...aside })), (0, react_1.isValidElement)(aside) && aside] })] }));
 };
 exports.FormPageLayoutBase = FormPageLayoutBase;

package/node/hook-form/FormWizardPageLayout/FormWizardPageLayout.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormWizardPageLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../../components/utils/classNames");
+const cn_1 = require("../../components/utils/cn");
 const FormPageLayoutBase_1 = require("../FormPageLayoutBase");
 const FormWizard_1 = require("../FormWizard");
 const FormWizardFooter_1 = require("./FormWizardFooter");
@@ -14,7 +14,7 @@ const FormWizardPageLayout = (props) => {
     const { header, aside, formWizard, alert } = props;
     const { form, isDisabled: externalDisabled, secondaryActions } = formWizard;
     const { isShowFullActions, isShowNavigateButtons } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(FormPageLayoutBase_1.FormPageLayoutBase, { header: header, aside: aside, formProps: { isDisabled: externalDisabled, form, secondaryActions }, contentClassname: (0, classNames_1.classNames)({
+    return ((0, jsx_runtime_1.jsx)(FormPageLayoutBase_1.FormPageLayoutBase, { header: header, aside: aside, formProps: { isDisabled: externalDisabled, form, secondaryActions }, contentClassname: (0, cn_1.cn)({
             [FormPageLayoutBase_1.formPageContentClassnames.formPageContentSecondaryActions]: isShowNavigateButtons,
             [FormPageLayoutBase_1.formPageContentClassnames.formWizardPageContentActions]: isShowFullActions,
         }), alert: alert, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsx)(FormWizard_1.FormWizard, { isDisabled: isDisabled, ...formWizard, customFooter: (footerProps) => ((0, jsx_runtime_1.jsx)(FormWizardFooter_1.FormWizardFooter, { ...footerProps, secondaryActions: secondaryActions })) })) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.91.2",
+  "version": "4.92.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -11,8 +11,8 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.5",
     "@mui/material": "5.13.0",
-    "classnames": "^2.5.1",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "colord": "^2.9.3",
     "dayjs": "^1.11.5",
     "react-imask": "6.4.2",