musae 0.2.20 → 0.2.22

package/dist/components/avatar/avatar.js

@@ -7,9 +7,8 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { AvatarClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
-import { useImageLoader } from '@aiszlab/relax';
+import { useImageLoader, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["src", "alt", "shape", "size"];
@@ -164,7 +163,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
     style: styled.avatar.style,
     ref: ref
-  }), loadStatus === "loaded" ? ( /*#__PURE__*/React.createElement("img", {
+  }), loadStatus === "loaded" ? (/*#__PURE__*/React.createElement("img", {
     draggable: false,
     src: src,
     alt: alt,

package/dist/components/avatar/group.js

@@ -5,8 +5,8 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { AvatarClassToken } from '../../utils/class-name.js';
 import Popover from '../popover/popover.js';
 import Avatar from './avatar.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
+import { clsx } from '@aiszlab/relax';
 
 var _Group = function Group(_ref) {
   var _children = _ref.children,
@@ -39,7 +39,7 @@ var _Group = function Group(_ref) {
       hidden = _Children$toArray$red2[1];
     // got hidden nodes, show ellipse node
     if (hidden.length > 0) {
-      visible.push( /*#__PURE__*/React.createElement(Popover, {
+      visible.push(/*#__PURE__*/React.createElement(Popover, {
         content: /*#__PURE__*/React.createElement(_Group, {
           max: Infinity
         }, hidden),

package/dist/components/badge/badge.js

@@ -3,12 +3,11 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { BadgeClassToken } from '../../utils/class-name.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import { isVoid } from '@aiszlab/relax';
+import { isVoid, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {

package/dist/components/bench/bench.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BenchProps } from "./types";
-declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, }: BenchProps) => React.JSX.Element;
+declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, elevation, }: BenchProps) => React.JSX.Element;
 export default Bench;

package/dist/components/bench/bench.js

@@ -2,13 +2,14 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { Layout } from '../layout/index.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { elevations } from '../theme/tokens.stylex.js';
 import Divider from '../divider/divider.js';
 import { useLogo, useNavigations } from './hooks.js';
 import Menu from '../menu/menu.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 
 var Header = Layout.Header,
   Main = Layout.Main,
@@ -49,12 +50,16 @@ var styles = {
     }
   },
   header: {
-    "default": {
-      gap: "musaex-1lsrmdg",
-      rowGap: null,
-      columnGap: null,
-      boxShadow: "musaex-1bhjvst",
-      $$css: true
+    "default": function _default(props) {
+      return [{
+        gap: "musaex-1lsrmdg",
+        rowGap: null,
+        columnGap: null,
+        boxShadow: "musaex-igitpm",
+        $$css: true
+      }, {
+        "--boxShadow": elevations[props.elevation] != null ? elevations[props.elevation] : "initial"
+      }];
     },
     navigation: {
       marginLeft: "musaex-9x39mp",
@@ -84,7 +89,9 @@ var Bench = function Bench(_ref) {
     defaultExpandedKeys = _ref.defaultExpandedKeys,
     _ref$classNames = _ref.classNames,
     _ref$classNames2 = _ref$classNames === void 0 ? {} : _ref$classNames,
-    mainClassName = _ref$classNames2.main;
+    mainClassName = _ref$classNames2.main,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? "xsmall" : _ref$elevation;
   var theme = useTheme();
   var _logo = useLogo(logo);
   var _useNavigations = useNavigations({
@@ -98,7 +105,9 @@ var Bench = function Bench(_ref) {
     selectedKeys = _useNavigations.selectedKeys;
   var styled = {
     bench: _stylex.props(styles.bench["default"]),
-    header: _stylex.props(styles.header["default"]),
+    header: _stylex.props(styles.header["default"]({
+      elevation: elevation
+    })),
     main: _stylex.props(styles.bench.main),
     sider: _stylex.props(styles.bench.sider({
       outlineColor: theme.colors[ColorToken.OutlineVariant]
@@ -116,7 +125,7 @@ var Bench = function Bench(_ref) {
   }, !!_logo && /*#__PURE__*/React.createElement("img", {
     src: _logo === null || _logo === void 0 ? void 0 : _logo.url,
     alt: "logo"
-  }), !!_logo && ( /*#__PURE__*/React.createElement("div", {
+  }), !!_logo && (/*#__PURE__*/React.createElement("div", {
     className: styled.divider.className,
     style: styled.divider.style
   }, /*#__PURE__*/React.createElement(Divider, {
@@ -132,7 +141,7 @@ var Bench = function Bench(_ref) {
     style: styled.headerNavigation.style
   }, !!selectedKeys[0] && {
     selectedKeys: [selectedKeys[0]]
-  })), trailing), sideMenuItems.length > 0 && ( /*#__PURE__*/React.createElement(Sider, {
+  })), trailing), sideMenuItems.length > 0 && (/*#__PURE__*/React.createElement(Sider, {
     className: styled.sider.className,
     style: styled.sider.style
   }, /*#__PURE__*/React.createElement(Menu, _objectSpread({

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

@@ -1,5 +1,6 @@
-import { Key, ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import type { Key, ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
+import type { ElevationToken } from "../theme/tokens.stylex";
 export type Logo = {
     /**
      * @description
@@ -75,4 +76,9 @@ export type BenchProps = ComponentProps & {
      * class names
      */
     classNames?: Partial<Record<"main", string>>;
+    /**
+     * @description
+     * elevation
+     */
+    elevation?: ElevationToken;
 };

package/dist/components/breadcrumb/breadcrumb.js

@@ -6,7 +6,7 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { BreadcrumbClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import Item from './item.js';
 import { ComponentToken } from '../../utils/component-token.js';
 

package/dist/components/breadcrumb/item.js

@@ -4,7 +4,7 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { BreadcrumbClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
@@ -76,7 +76,7 @@ var Item = function Item(_ref) {
     className: classNames[BreadcrumbClassToken.Item]
   }, isLink && /*#__PURE__*/React.createElement("a", {
     href: href
-  }, label), !isLink && label), !max && ( /*#__PURE__*/React.createElement("li", {
+  }, label), !isLink && label), !max && (/*#__PURE__*/React.createElement("li", {
     role: "separator",
     className: clsx(classNames[BreadcrumbClassToken.Separator], styled.separator.className),
     style: styled.separator.style

package/dist/components/button/button.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef } from 'react';
 import { ButtonClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { useButton } from './hooks.js';

package/dist/components/calendar/calendar.js

@@ -5,7 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { CalendarClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import Button from '../button/button.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/calendar/hooks.js

@@ -5,9 +5,8 @@ import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { CalendarClassToken } from '../../utils/class-name.js';
-import { toArray, useControlledState } from '@aiszlab/relax';
+import { clsx, toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
-import clsx from 'clsx';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
@@ -132,7 +131,7 @@ var useDateCells = function useDateCells(_ref) {
           className: "musaex-gnae0u musaex-ksl8fa"
         }
       };
-      prev.at(prev.length - 1).push( /*#__PURE__*/React.createElement("td", {
+      prev.at(prev.length - 1).push(/*#__PURE__*/React.createElement("td", {
         title: formatted,
         key: formatted,
         className: clsx(classNames[CalendarClassToken.DateCell], _objectSpread(_defineProperty({}, classNames[CalendarClassToken.DateCellSelected], isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames[CalendarClassToken.DateCellInRange], isBetween), classNames[CalendarClassToken.DateCellRangeFrom], isFrom), classNames[CalendarClassToken.DateCellRangeTo], isTo)), styled.cell.className),

package/dist/components/cascader/cascader.js

@@ -8,7 +8,7 @@ import { useOptions, useValue } from './hooks.js';
 import Menu from '../menu/menu.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { CascaderClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["mode", "separator", "options", "complex"];

package/dist/components/checkbox/checkbox.js

@@ -1,17 +1,16 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext, useMemo } from 'react';
-import { useControlledState, useEvent } from '@aiszlab/relax';
+import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
 import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { CheckboxClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import { ComponentToken } from '../../utils/component-token.js';
-import checkboxStyles from './styles.js';
+import styles from './styles.js';
 
 var Checkbox = function Checkbox(_ref) {
   var value = _ref.value,
@@ -55,16 +54,16 @@ var Checkbox = function Checkbox(_ref) {
     onChange === null || onChange === void 0 || onChange(event);
   });
   var styled = {
-    checkbox: _stylex.props(checkboxStyles.checkbox["default"], isDisabled && checkboxStyles.checkbox.disabled, checkboxStyles.checkbox.variables({
+    checkbox: _stylex.props(styles.checkbox["default"], isDisabled && styles.checkbox.disabled, styles.checkbox.variables({
       primaryColor: theme.colors[ColorToken.Primary],
       onPrimaryColor: theme.colors[ColorToken.OnPrimary],
       outlineColor: theme.colors[ColorToken.Outline]
     })),
-    trigger: _stylex.props(checkboxStyles.trigger["default"], isChecked && checkboxStyles.trigger.checked, isDisabled && checkboxStyles.trigger.disabled({
+    trigger: _stylex.props(styles.trigger["default"], isChecked && styles.trigger.checked, isDisabled && styles.trigger.disabled({
       backgroundColor: theme.colors[ColorToken.OnSurface],
       color: theme.colors[ColorToken.OnPrimary]
-    }), !isChecked && checkboxStyles.trigger.unchecked),
-    label: _stylex.props(checkboxStyles.label["default"], typography.label.small)
+    }), !isChecked && styles.trigger.unchecked),
+    label: _stylex.props(styles.label["default"], typography.label.small)
   };
   return /*#__PURE__*/React.createElement("label", {
     className: clsx(styled.checkbox.className, className, classNames[CheckboxClassToken.Checkbox]),
@@ -77,10 +76,10 @@ var Checkbox = function Checkbox(_ref) {
     "aria-checked": isChecked,
     disabled: isDisabled,
     onChange: change
-  }), children && ( /*#__PURE__*/React.createElement("span", {
+  }), children && (/*#__PURE__*/React.createElement("span", {
     className: styled.label.className,
     style: styled.label.style
   }, children)));
 };
 
-export { Checkbox as default, checkboxStyles as styles };
+export { Checkbox as default, styles };

package/dist/components/checkbox/styles.d.ts

@@ -1,4 +1,4 @@
-declare const _default: {
+declare const styles: {
     checkbox: Readonly<{
         readonly default: Readonly<{
             readonly display: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"display", "inline-flex">;
@@ -90,4 +90,4 @@ declare const _default: {
         }>;
     }>;
 };
-export default _default;
+export default styles;

package/dist/components/checkbox/styles.js

@@ -1,4 +1,4 @@
-var checkboxStyles = {
+var styles = {
   checkbox: {
     "default": {
       display: "musaex-3nfvp2",
@@ -180,4 +180,4 @@ var checkboxStyles = {
   }
 };
 
-export { checkboxStyles as default };
+export { styles as default };

package/dist/components/clock/clock.js

@@ -5,7 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ClockClassToken } from '../../utils/class-name.js';
 import { TimeUnit } from './types.js';
 import Column from './column.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import Divider from '../divider/divider.js';
 import { ComponentToken } from '../../utils/component-token.js';
 
@@ -28,7 +28,7 @@ var Clock = function Clock(_ref) {
       onChange: function onChange(_value) {
         _onChange === null || _onChange === void 0 || _onChange(Object.values(_objectSpread(_objectSpread(_objectSpread({}, [0, 0, 0]), value), {}, _defineProperty({}, index, _value))));
       }
-    }), index === columns.length - 1 ? null : ( /*#__PURE__*/React.createElement(Divider, {
+    }), index === columns.length - 1 ? null : (/*#__PURE__*/React.createElement(Divider, {
       orientation: "vertical",
       key: "".concat(unit, "-divider")
     }))];

package/dist/components/clock/column.js

@@ -3,11 +3,10 @@ import { useTimeUnit } from './hooks.js';
 import Menu from '../menu/menu.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ClockClassToken } from '../../utils/class-name.js';
-import { isVoid } from '@aiszlab/relax';
+import { isVoid, clsx } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {

package/dist/components/collapse/collapse.js

@@ -5,7 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { CollapseClassToken } from '../../utils/class-name.js';
 import CollapseItem from './item.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { useActiveKeys } from './hooks.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';

package/dist/components/collapse/item.js

@@ -6,9 +6,8 @@ import React, { useContext } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { CollapseClassToken } from '../../utils/class-name.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useUpdateEffect, useEvent } from '@aiszlab/relax';
+import { useUpdateEffect, useEvent, clsx } from '@aiszlab/relax';
 import { useAnimate } from 'framer-motion';
-import clsx from 'clsx';
 import { Context } from './context.js';
 import { useExpandable } from '../../hooks/use-expandable.js';
 import { useTheme } from '../theme/hooks.js';
@@ -111,7 +110,7 @@ var CollapseItem = function CollapseItem(_ref) {
   var _useExpandable = useExpandable(),
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
-  useUpdateEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:

package/dist/components/date-picker/date-picker.js

@@ -5,7 +5,7 @@ import { useValue } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { DatePickerClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { styles } from '../input/input.js';
 import { ComponentToken } from '../../utils/component-token.js';
 

package/dist/components/date-range-picker/date-range-picker.js

@@ -5,7 +5,7 @@ import { useValue } from './hooks.js';
 import Calendar from '../calendar/calendar.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { DateRangePickerClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 import SwapHoriz from '../icon/icons/action/swap-horiz.js';
 

package/dist/components/dialog/hooks.js

@@ -18,7 +18,7 @@ var useFooter = function useFooter(_ref) {
     _useLocale2 = _slicedToArray(_useLocale, 1),
     locale = _useLocale2[0];
   return useMemo(function () {
-    return footer !== null && footer !== void 0 ? footer : ( /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+    return footer !== null && footer !== void 0 ? footer : (/*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
       onClick: onClose,
       color: "secondary",
       variant: "text"

package/dist/components/dialog/popup.js

@@ -12,7 +12,7 @@ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modu
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { contains } from '@aiszlab/relax/dom';
 import { useClosable } from '../../hooks/use-closable.js';
 import { ComponentToken } from '../../utils/component-token.js';
@@ -126,7 +126,7 @@ var Popup = function Popup(_ref) {
     onKeyDown = _useClosable.onKeyDown,
     onOverlayClick = _useClosable.onOverlayClick;
   useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -199,13 +199,13 @@ var Popup = function Popup(_ref) {
     className: clsx(classNames[DialogClassToken.Panel], styled.panel.className),
     style: _objectSpread(_objectSpread({}, styled.panel.style), (_props$styles = props$1.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.panel),
     ref: panelRef
-  }, closer, !!props$1.title && ( /*#__PURE__*/React.createElement("div", {
+  }, closer, !!props$1.title && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Header], styled.header.className),
     style: styled.header.style
   }, props$1.title)), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Body], styled.body.className),
     style: _objectSpread(_objectSpread({}, styled.body.style), (_props$styles2 = props$1.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.body)
-  }, props$1.children), !!footer && ( /*#__PURE__*/React.createElement("div", {
+  }, props$1.children), !!footer && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Footer], styled.footer.className),
     style: styled.footer.style
   }, footer))));

package/dist/components/divider/divider.d.ts

@@ -1,4 +1,4 @@
 import { type DividerProps } from "./types";
 import React from "react";
-declare const Divider: ({ align, children, orientation, className, style, }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ align, children, orientation, className, style, margin, }: DividerProps) => React.JSX.Element;
 export default Divider;

package/dist/components/divider/divider.js

@@ -7,18 +7,43 @@ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modu
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
+import { useGutters } from '../../hooks/use-gutters.js';
 
 var styles = {
   divider: {
-    horizontal: {
-      width: "musaex-1k094eu",
-      $$css: true
+    horizontal: function horizontal(props) {
+      return [{
+        width: "musaex-1k094eu",
+        marginTop: "musaex-fdd01f",
+        marginBottom: "musaex-19qvvsl",
+        $$css: true
+      }, {
+        "--marginBlockStart": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[0]),
+        "--marginBlockEnd": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[1])
+      }];
     },
-    vertical: {
-      height: "musaex-1xj1dsn",
-      $$css: true
+    vertical: function vertical(props) {
+      return [{
+        height: "musaex-1xj1dsn",
+        marginInlineStart: "musaex-1f2nheo",
+        marginLeft: null,
+        marginRight: null,
+        marginInlineEnd: "musaex-1uoloo9",
+        $$css: true
+      }, {
+        "--marginInlineStart": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[0]),
+        "--marginInlineEnd": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[1])
+      }];
     }
   },
   simple: {
@@ -119,15 +144,22 @@ var Divider = function Divider(_ref) {
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 0 : _ref$margin;
   var classNames = useClassNames(ComponentToken.Divider);
   var offset = useOffset({
     align: align
   });
   var theme = useTheme();
   var isLabeled = !!children;
+  var margins = useGutters({
+    gutter: margin
+  });
   var styled = {
-    divider: props(styles.divider[orientation], !isLabeled && styles.simple[orientation]({
+    divider: props(styles.divider[orientation]({
+      margins: margins
+    }), !isLabeled && styles.simple[orientation]({
       backgroundColor: theme.colors[ColorToken.OutlineVariant]
     }), isLabeled && styles.labeled[orientation]({
       backgroundColor: theme.colors[ColorToken.OutlineVariant],
@@ -138,7 +170,7 @@ var Divider = function Divider(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DividerClassToken.Divider], className, styled.divider.className),
     style: _objectSpread(_objectSpread({}, styled.divider.style), style)
-  }, !!children && ( /*#__PURE__*/React.createElement("span", {
+  }, !!children && (/*#__PURE__*/React.createElement("span", {
     className: clsx(classNames[DividerClassToken.Label], styled.label.className),
     style: styled.label.style
   }, children)));

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "../../types/element";
+import type { Gutter } from "../../hooks/use-gutters";
 export type Align = "center" | "left" | "right";
 export type Orientation = "horizontal" | "vertical";
 /**
@@ -25,4 +26,9 @@ export interface DividerProps extends ComponentProps {
      * @default "horizontal"
      */
     orientation?: Orientation;
+    /**
+     * @description
+     * margin
+     */
+    margin?: Gutter;
 }

package/dist/components/drawer/popup.js

@@ -11,7 +11,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { typography } from '../theme/theme.js';
 import { contains } from '@aiszlab/relax/dom';
 import { useClosable } from '../../hooks/use-closable.js';
@@ -187,7 +187,7 @@ var Popup = function Popup(_ref) {
     onKeyDown = _useClosable.onKeyDown,
     onOverlayClick = _useClosable.onOverlayClick;
   useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:

package/dist/components/empty/empty.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { EmptyClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { typography } from '../theme/theme.js';
 import { useLocale } from '../../locale/use-locale.js';
 import { ComponentToken } from '../../utils/component-token.js';

package/dist/components/form/field/error.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useEffect } from 'react';
 import { FormClassToken } from '../../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { useAnimate, usePresence } from 'framer-motion';
 import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../../hooks/use-class-names.js';

package/dist/components/form/field/field.js

@@ -2,10 +2,9 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useMemo, cloneElement, isValidElement } from 'react';
 import { useController } from 'react-hook-form';
-import { chain, isRefable } from '@aiszlab/relax';
+import { chain, isRefable, clsx } from '@aiszlab/relax';
 import { FormClassToken } from '../../../utils/class-name.js';
 import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
 import Layout from './layout.js';
 import Error from './error.js';
 import { AnimatePresence } from 'framer-motion';