musae 0.2.3 → 0.2.4

package/README.md

@@ -13,7 +13,7 @@
 
 ```bash
 npm install musae
-## yarn add musae
+## pnpm i musae
 ```
 
 ## 🔨 Usage

package/dist/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/avatar/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ContextValue } from "./types";
 /**
  * @description

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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';

package/dist/components/button-toggle/context.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Context: import("react").Context<{}>;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/cascader/hooks.d.ts

@@ -6,14 +6,7 @@ import type { Option } from "../../types/option";
  * @description
  * cascader value
  */
-export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [
-    CascaderProps["value"],
-    ReadableOptions,
-    ReadablePaths,
-    CascaderProps["mode"],
-    close: VoidFunction,
-    Dispatch<SetStateAction<MenuItem[][]>>
-]) => {
+export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [CascaderProps["value"], ReadableOptions, ReadablePaths, CascaderProps["mode"], close: VoidFunction, Dispatch<SetStateAction<MenuItem[][]>>]) => {
     values: Map<number, Required<Pick<Option, "value" | "label">>[]>;
     onChange: (id: number) => void;
 };

package/dist/components/cascader/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { KeyOrOption, Optionable, ReadBy, ReadableOption, ReadableOptions, ReadablePaths, Value, ValueOrValues } from "./types";
 import type { MenuItem } from "../menu";
 /**

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/checkbox/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

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

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

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 /**
  * @description

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/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 import { useAnimate } from 'framer-motion';
 import clsx from 'clsx';

package/dist/components/config/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue>;
 export default Context;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { styles } from '../input/input.js';
 

package/dist/components/date-picker/hooks.d.ts

@@ -5,11 +5,7 @@ import { PickerRef } from "../picker";
  * @description
  * value
  */
-export declare const useValue: ([_value, _change, _ref]: [
-    DatePickerProps["value"],
-    DatePickerProps["onChange"],
-    RefObject<PickerRef>
-]) => {
+export declare const useValue: ([_value, _change, _ref]: [DatePickerProps["value"], DatePickerProps["onChange"], RefObject<PickerRef>]) => {
     value: import("dayjs").Dayjs | undefined;
     onChange: (value: import("dayjs").Dayjs) => void;
 };

package/dist/components/date-range-picker/hooks.d.ts

@@ -7,11 +7,7 @@ import { PickerRef } from "../picker";
  * @description
  * value
  */
-export declare const useValue: ([_value, _change, ref]: [
-    DateRangePickerProps["value"],
-    DateRangePickerProps["onChange"],
-    RefObject<PickerRef>
-]) => {
+export declare const useValue: ([_value, _change, ref]: [DateRangePickerProps["value"], DateRangePickerProps["onChange"], RefObject<PickerRef>]) => {
     value: [Partialable<Dayjs>, Partialable<Dayjs>];
     onChange: (_value: Dayjs) => void;
 };

package/dist/components/dialog/hooks.d.ts

@@ -4,8 +4,4 @@ import type { PopupProps } from "./types";
  * @description
  * footer
  */
-export declare const useFooter: ([footer, onConfirm, onClose]: [
-    footer: PopupProps["footer"],
-    onConfirm: PopupProps["onConfirm"],
-    onClose: PopupProps["onClose"]
-]) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const useFooter: ([footer, onConfirm, onClose]: [footer: PopupProps["footer"], onConfirm: PopupProps["onConfirm"], onClose: PopupProps["onClose"]]) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@aiszlab/relax/dist/dom/contains.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';
 
 const styles = {
   header: {

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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,13 +3,13 @@ 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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@aiszlab/relax/dist/dom/contains.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';
 
 const styles = {
   popup: {

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 

package/dist/components/form/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContextValue } from "./types";
 export declare const CONTEXT_VALUE: Readonly<ContextValue>;
 declare const Context: import("react").Context<ContextValue>;

package/dist/components/form/field/field.d.ts

@@ -6,5 +6,5 @@ import type { RequiredIn } from "@aiszlab/relax/types";
  * form item may not has name prop
  * if there is name prop, it will render
  */
-declare const Field: ({ required, ...props }: RequiredIn<FormItemProps, "name" | "required">) => React.JSX.Element;
+declare const Field: ({ required, children: _children, ...props }: RequiredIn<FormItemProps, "name" | "required">) => React.JSX.Element;
 export default Field;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
@@ -35,6 +35,7 @@ const styles = {
  */
 const Field = ({
   required,
+  children: _children,
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Form);
@@ -61,25 +62,25 @@ const Field = ({
     }
   });
   const children = useMemo(() => {
-    const _isValidElement = isValidElement(props$1.children);
-    if (!_isValidElement) return props$1.children;
-    const _child = props$1.children;
+    const _isValidElement = isValidElement(_children);
+    if (!_isValidElement) return _children;
+    const _child = _children;
     /// rewrite change and blur handler
     const handlers = {
       onChange: chain(_child.props.onChange, onChange),
       onBlur: chain(_child.props.onBlur, onBlur)
     };
     /// registe react hook form
-    return cloneElement(props$1.children, {
+    return cloneElement(_children, {
       name,
       value,
       ...handlers,
       invalid,
-      ...(isRefable(props$1.children) && {
+      ...(isRefable(_children) && {
         ref
       })
     });
-  }, [props$1.children, name, value, invalid, ref, onChange, onBlur]);
+  }, [_children, name, value, invalid, ref, onChange, onBlur]);
   const styled = {
     error: props(styles.error({
       color: theme.colors[ColorToken.Error]

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   col: props => [{

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Grid: {
     Row: ({ align, children, gutter, justify, className, as: As, style }: import("./types").RowProps) => import("react").JSX.Element;
     Col: ({ children, className, span, as: As, style }: import("./types").ColProps) => import("react").JSX.Element;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 
 const styles = {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Image: (({ src, alt, width, height }: import("./types").ImageProps) => import("react").JSX.Element) & {
     Group: ({ children, items }: import("./types").PreviewGroupProps) => import("react").JSX.Element;
 };

package/dist/components/image/preview/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreviewGroupContextValue } from "../types";
 declare const PreviewGroupContext: import("react").Context<PreviewGroupContextValue | null>;
 export default PreviewGroupContext;

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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';

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/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   image: props => [{

package/dist/components/input/input.d.ts

@@ -3,33 +3,33 @@ import type { InputProps, InputRef } from "./types";
 export declare const styles: Readonly<{
     readonly wrapper: (props: {
         outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        display: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"display", "flex">;
-        alignItems: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
-        cursor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"cursor", "text">;
-        minHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minHeight", string>;
-        minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minWidth", string>;
-        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
-        boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
-        margin: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"margin", string>;
-        paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingBlock", string>;
-        paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInline", string>;
-        transition: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transition", string>;
-        willChange: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"willChange", string>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
+        display: "flex";
+        alignItems: "center";
+        cursor: "text";
+        minHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        boxShadow: string;
+        margin: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        transition: string;
+        willChange: string;
+    }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
     readonly flexible: Readonly<{
         readonly minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minWidth", null>;
     }>;
     readonly focused: (props: {
         outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
+        boxShadow: string;
+    }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
     readonly invalid: (props: {
         outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        borderColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderColor", import("csstype").Property.BorderColor | undefined>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
+        boxShadow: string;
+    }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
     readonly input: Readonly<{
         readonly backgroundColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"backgroundColor", "transparent">;
         readonly outline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"outline", string>;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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';
@@ -66,18 +66,10 @@ const styles = {
     "--boxShadow": `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` != null ? `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` : "initial"
   }],
   invalid: props => [{
-    borderColor: "musae-eqt46j",
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
+    boxShadow: "musae-igitpm",
     $$css: true
   }, {
-    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+    "--boxShadow": `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` != null ? `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` : "initial"
   }],
   input: {
     backgroundColor: "musae-jbqb8w",

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 

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/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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/layout/main.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MainProps } from "./types";
 declare const Main: ({ children }: MainProps) => import("react").ReactNode;
 export default Main;

package/dist/components/loading/loading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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';

package/dist/components/menu/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ContextValue } from "./types";
 /**
  * @author murukal

package/dist/components/menu/group.d.ts

@@ -7,8 +7,8 @@ import React from "react";
  */
 declare const Group: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
     items: import("./types").MenuItem[];
-    level?: number | undefined;
-    expanded?: boolean | undefined;
+    level?: number;
+    expanded?: boolean;
     mode: import("./types").Mode;
 } & React.RefAttributes<HTMLUListElement>>;
 export default Group;

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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';

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/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.js';
 
 const styles = {

package/dist/components/menu/item.d.ts

@@ -10,7 +10,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<import("./types").MenuI
 } & import("../../types/element").ComponentProps & {
     value: React.Key;
     suffix?: React.ReactNode;
-    onClick?: ((key: React.Key) => void | Promise<void>) | undefined;
+    onClick?: import("./types").ContextValue["click"];
     children?: React.ReactNode;
     mode: import("./types").Mode;
 } & React.RefAttributes<HTMLLIElement>>;

package/dist/components/menu/item.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import { useMenuContext, useItemChildren } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes, spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';