musae 0.2.5 → 0.2.6

package/README.md

@@ -6,14 +6,14 @@
 - 📦 A set of high-quality React components out of the box.
 - 🛡 Written in TypeScript with predictable static types.
 - ⚙️ Whole package of design resources and development tools.
-- 🌍 Internationalization support for dozens of languages.
 - 🎨 Powerful theme customization based on CSS-in-JS.
 
 ## 📦 Install
 
 ```bash
 npm install musae
-## pnpm i musae
+## pnpm add musae
+## yarn add musae
 ```
 
 ## 🔨 Usage
@@ -23,4 +23,6 @@ import React from "react";
 import { Button } from "musae";
 
 const App = () => <Button>PRESS ME</Button>;
+
+export default App;
 ```

package/dist/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/breadcrumb/item.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';

package/dist/components/button/button.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { useButton } from './hooks.js';
 import Ripple from '../ripple/ripple.js';
@@ -25,6 +25,7 @@ const styles = {
     transitionProperty: "musae-fagghw",
     transitionDuration: "musae-1d8287x",
     willChange: "musae-19v51jg",
+    flexShrink: "musae-2lah0s",
     $$css: true
   },
   small: {

package/dist/components/calendar/calendar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import Button from '../button/button.js';

package/dist/components/calendar/hooks.js

@@ -5,7 +5,7 @@ import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
 import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -41,21 +41,21 @@ const styles = {
     $$css: true
   },
   range: {
-    "::before_insetInlineStart": "musae-1kfboi8",
+    "::before_insetInlineStart": "musae-1682cnc",
     "::before_left": null,
     "::before_right": null,
-    "::before_insetInlineEnd": "musae-1x8jx26",
+    "::before_insetInlineEnd": "musae-typ5od",
     $$css: true
   },
   from: {
     "::before_insetInlineStart": "musae-fbisj7",
     "::before_left": null,
     "::before_right": null,
-    "::before_insetInlineEnd": "musae-1x8jx26",
+    "::before_insetInlineEnd": "musae-typ5od",
     $$css: true
   },
   to: {
-    "::before_insetInlineStart": "musae-1kfboi8",
+    "::before_insetInlineStart": "musae-1682cnc",
     "::before_left": null,
     "::before_right": null,
     "::before_insetInlineEnd": "musae-1gkks1t",

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CheckboxProps } from "./types";
-declare const Checkbox: ({ value, className, style, children, ...props }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ value, className, style, children, onChange, ...props }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/dist/components/checkbox/checkbox.js

@@ -4,7 +4,7 @@ import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';
@@ -143,6 +143,7 @@ const Checkbox = ({
   className,
   style,
   children,
+  onChange,
   ...props$1
 }) => {
   const contextValue = useContext(Context);
@@ -154,14 +155,15 @@ const Checkbox = ({
   /// check current checkbox is checked
   /// if there is context value, use context value
   /// else use controlled state
-  const isChecked = useMemo(() => contextValue ? contextValue.value.has(value) : _isChecked, [_isChecked, contextValue, value]);
+  const isChecked = useMemo(() => contextValue && !!value ? contextValue.value.has(value) : _isChecked, [_isChecked, contextValue, value]);
   /// change handler
   /// if there is context value, just notify context
   /// else change the controlled state
   const change = useCallback(event => {
-    contextValue?.change(value);
+    !!value && contextValue?.change(value);
     _setIsChecked(event.target.checked);
-  }, [_setIsChecked, contextValue, value]);
+    onChange?.(event);
+  }, [_setIsChecked, contextValue, value, onChange]);
   const styled = {
     checkbox: {
       className: "musae-3nfvp2 musae-6s0dn4 musae-1ypdohk"

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

@@ -1,3 +1,3 @@
-export declare const Checkbox: (({ value, className, style, children, ...props }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
+export declare const Checkbox: (({ value, className, style, children, onChange, ...props }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
     Group: (props: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
-import type { Key, ReactNode } from "react";
+import type { ChangeEvent, Key, ReactNode } from "react";
 import type { ComponentProps } from "../../types/element";
 /**
  * @author murukal
@@ -58,15 +58,21 @@ export interface CheckboxProps extends ComponentProps {
     /**
      * @description
      * value
-     * @requires
+     * @default void 0
      */
-    value: Key;
+    value?: Key;
     /**
      * @description
      * children
      * @default void 0
      */
     children?: ReactNode;
+    /**
+     * @description
+     * change handler
+     * @default void 0
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * @author murukal

package/dist/components/clock/column.js

@@ -4,7 +4,7 @@ import Menu from '../menu/menu.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
 import { isVoid } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/collapse/collapse.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
 import CollapseItem from './item.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useActiveKeys } from './hooks.js';
 import { Context } from './context.js';

package/dist/components/collapse/item.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 import { useAnimate } from 'framer-motion';
 import clsx from 'clsx';
@@ -17,7 +17,7 @@ const styles = {
       borderBottomWidth: "musae-lntmim",
       borderBottomStyle: "musae-1q0q8m5",
       borderBottomColor: "musae-43481e",
-      ":last-of-type_borderBottomWidth": "musae-zm6erk",
+      ":last-of-type_borderBottomWidth": "musae-xt7lk8",
       $$css: true
     }, {
       "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"

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

@@ -4,7 +4,7 @@ import Calendar from '../calendar/calendar.js';
 import { useValue } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, DatePickerClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { styles } from '../input/input.js';
 

package/dist/components/dialog/popup.js

@@ -3,13 +3,13 @@ import { useFooter } from './hooks.js';
 import { useAnimate } from 'framer-motion';
 import { ComponentToken, DialogClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 clsx from 'clsx';
 import { useDismissable } from '../../hooks/use-dismissable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.55_react-dom@18.3.1_react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.56_react-dom@18.3.1_react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   header: {
@@ -19,8 +19,8 @@ const styles = {
   },
   overlay: props => [{
     position: "musae-10l6tqk",
-    top: "musae-9oc6z4",
-    left: "musae-1tjciyl",
+    top: "musae-13vifvy",
+    left: "musae-u96u03",
     insetInlineStart: null,
     insetInlineEnd: null,
     width: "musae-n9wirt",
@@ -137,7 +137,7 @@ const Popup = ({
   }, [open]);
   const styled = {
     popup: {
-      className: "musae-ixxii4 musae-9oc6z4 musae-1tjciyl musae-n9wirt musae-1dr59a3 musae-47corl musae-1tv1kli musae-78zum5 musae-l56j7k musae-6s0dn4"
+      className: "musae-ixxii4 musae-13vifvy musae-u96u03 musae-n9wirt musae-1dr59a3 musae-47corl musae-1tv1kli musae-78zum5 musae-l56j7k musae-6s0dn4"
     },
     overlay: props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]

package/dist/components/divider/divider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useOffset } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, DividerClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';

package/dist/components/drawer/popup.js

@@ -3,18 +3,18 @@ import { useAnimate } from 'framer-motion';
 import { PLACEMENTS } from './hooks.js';
 import { ComponentToken, DrawerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 { typography } from '../theme/theme.js';
 import { useDismissable } from '../../hooks/use-dismissable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.55_react-dom@18.3.1_react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.56_react-dom@18.3.1_react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   popup: {
     position: "musae-ixxii4",
-    inset: "musae-ezip7x",
+    inset: "musae-10a8y8t",
     insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
@@ -29,7 +29,7 @@ const styles = {
   },
   overlay: props => [{
     position: "musae-10l6tqk",
-    inset: "musae-ezip7x",
+    inset: "musae-10a8y8t",
     insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
@@ -61,44 +61,44 @@ const styles = {
     "--transform": props.transform != null ? props.transform : "initial"
   }],
   right: props => [{
-    right: "musae-15gpytn",
+    right: "musae-3m8u43",
     insetInlineStart: null,
     insetInlineEnd: null,
-    top: "musae-9oc6z4",
-    bottom: "musae-1sh2tzk",
+    top: "musae-13vifvy",
+    bottom: "musae-1ey2m1c",
     width: "musae-17fnjtu",
     $$css: true
   }, {
     "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size)
   }],
   left: props => [{
-    left: "musae-1tjciyl",
+    left: "musae-u96u03",
     insetInlineStart: null,
     insetInlineEnd: null,
-    top: "musae-9oc6z4",
-    bottom: "musae-1sh2tzk",
+    top: "musae-13vifvy",
+    bottom: "musae-1ey2m1c",
     width: "musae-17fnjtu",
     $$css: true
   }, {
     "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size)
   }],
   bottom: props => [{
-    bottom: "musae-1sh2tzk",
-    left: "musae-1tjciyl",
+    bottom: "musae-1ey2m1c",
+    left: "musae-u96u03",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-15gpytn",
+    right: "musae-3m8u43",
     height: "musae-1jwls1v",
     $$css: true
   }, {
     "--height": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size)
   }],
   top: props => [{
-    top: "musae-9oc6z4",
-    left: "musae-1tjciyl",
+    top: "musae-13vifvy",
+    left: "musae-u96u03",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-15gpytn",
+    right: "musae-3m8u43",
     height: "musae-1jwls1v",
     $$css: true
   }, {
@@ -187,7 +187,7 @@ const Popup = ({
   }, [open]);
   const styled = {
     popup: {
-      className: "musae-ixxii4 musae-ezip7x musae-47corl musae-mn8nw1"
+      className: "musae-ixxii4 musae-10a8y8t musae-47corl musae-mn8nw1"
     },
     overlay: props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]

package/dist/components/empty/empty.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, EmptyClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 

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

@@ -2,7 +2,7 @@ import React, { useMemo, isValidElement, cloneElement } from 'react';
 import { useController } from 'react-hook-form';
 import { chain, isRefable } from '@aiszlab/relax';
 import { ComponentToken, FormClassToken } from '../../../utils/class-name.js';
-import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Context from '../context.js';
 import { Grid } from '../../grid/index.js';
-import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../../theme/theme.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';

package/dist/components/grid/col.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   col: props => [{

package/dist/components/grid/row.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
 
 const styles = {

package/dist/components/icon/icon.js

@@ -2,7 +2,7 @@ import React, { useMemo, createElement } from 'react';
 import { isFunction } from '@aiszlab/relax';
 import { ComponentToken, IconClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 
 const styles = {

package/dist/components/image/image.js

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
 import Preview from './preview/preview.js';
 import PreviewGroupContext from './preview/context.js';
-import { useBoolean, useEvent } from '@aiszlab/relax';
+import { useBoolean, useImageLoader, useEvent } from '@aiszlab/relax';
 
 const Image = ({ src, alt, width, height }) => {
     const [isOpen, { turnOn, turnOff }] = useBoolean(false);
     const contextValue = useContext(PreviewGroupContext);
+    const status = useImageLoader({ src });
     const click = useEvent(() => {
         // if current image is in preview group
         // just use preview group to preview image
@@ -17,7 +18,7 @@ const Image = ({ src, alt, width, height }) => {
         turnOn();
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { src: src, alt: alt, onClick: click, width: width, height: height }),
+        status === "loaded" && React.createElement("img", { src: src, alt: alt, onClick: click, width: width, height: height }),
         isOpen && !contextValue && React.createElement(Preview, { src: src, onClose: turnOff, alt: alt })));
 };
 

package/dist/components/image/preview/operations.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import Portal from '../../portal/portal.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
@@ -13,10 +13,10 @@ import KeyboardArrowRight from '../../icon/icons/hardware/keyboard-arrow-right.j
 const styles = {
   footer: props => [{
     position: "musae-ixxii4",
-    left: "musae-1tjciyl",
+    left: "musae-u96u03",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-15gpytn",
+    right: "musae-3m8u43",
     bottom: "musae-1ii70tt",
     display: "musae-78zum5",
     flexDirection: "musae-dt5ytf",
@@ -74,7 +74,7 @@ const Operations = ({
       className: "musae-1qtgrog musae-14l26ut"
     },
     navigations: {
-      className: "musae-ixxii4 musae-1tjciyl musae-15gpytn musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
+      className: "musae-ixxii4 musae-u96u03 musae-3m8u43 musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
     },
     footer: _stylex.props(styles.footer({
       color: theme.colors[ColorToken.OnSurface]

package/dist/components/image/preview/preview.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Dialog from '../../dialog/dialog.js';
 import Operations from './operations.js';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   image: props => [{

package/dist/components/input/input.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputEvents, useWrapperEvents } from './hooks.js';
 import { useControlledState, useFocus } from '@aiszlab/relax';
 import { ComponentToken, InputClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/layout/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme } from '../theme/hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 
@@ -14,7 +14,7 @@ const styles = {
     paddingRight: null,
     marginBottom: "musae-hq7bbv",
     position: "musae-7wzq59",
-    top: "musae-9oc6z4",
+    top: "musae-13vifvy",
     zIndex: "musae-1ac462h",
     display: "musae-78zum5",
     alignItems: "musae-6s0dn4",

package/dist/components/layout/layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from '../grid/index.js';
 import { useChildren, ChildToken } from './hooks.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/loading/loading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, LoadingClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
@@ -66,7 +66,7 @@ const styles = {
     "::after_content": "musae-1s928wv",
     "::after_display": "musae-hkezso",
     "::after_position": "musae-1j6awrg",
-    "::after_inset": "musae-1799ia1",
+    "::after_inset": "musae-arstr8",
     "::after_insetInline": null,
     "::after_insetInlineStart": null,
     "::after_insetInlineEnd": null,

package/dist/components/menu/group.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import Item from './item.js';
 import { useMenuContext } from './hooks.js';
 import { useRefs } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useExpandEffect } from '../../hooks/use-expand-effect.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -44,6 +44,20 @@ const styles = {
     }, {
       "--color": props.color != null ? props.color : "initial"
     }],
+    horizontal: {
+      display: "musae-78zum5",
+      flexDirection: "musae-1q0g3np",
+      gap: "musae-vbka3v",
+      rowGap: null,
+      columnGap: null,
+      $$css: true
+    },
+    vertical: {
+      $$css: true
+    },
+    inline: {
+      $$css: true
+    },
     hidden: {
       display: "musae-1s85apg",
       $$css: true
@@ -104,7 +118,7 @@ const Group = forwardRef(({
   const styled = {
     group: props(styles.group.default({
       color: theme.colors[ColorToken.OnSurface]
-    }), !expanded && styles.group.hidden),
+    }), styles.group[mode], !expanded && styles.group.hidden),
     submenu: props(styles.submenu[mode])
   };
   return React.createElement("ul", {

package/dist/components/menu/hooks.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback, useContext } from 'react';
 import Context from './context.js';
 import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.js';
 
 const styles = {