musae 0.2.5 → 0.2.7

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
@@ -16,7 +16,12 @@ export interface ContextValue {
      * @description
      * change handler
      */
-    change: (value: Key) => void;
+    change: (value: Key, isChecked: boolean) => void;
+    /**
+     * @description
+     * disabled
+     */
+    disabled: boolean;
 }
 /**
  * @author murukal
@@ -41,6 +46,17 @@ export interface CheckboxGroupProps {
      * @requires
      */
     children: ReactNode;
+    /**
+     * @description
+     * change handler
+     */
+    onChange?: (value: Key[]) => void;
+    /**
+     * @description
+     * disabled
+     * @default false
+     */
+    disabled?: boolean;
 }
 /**
  * @author murukal
@@ -58,15 +74,26 @@ 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;
+    /**
+     * @description
+     * disabled
+     */
+    disabled?: boolean;
 }
 /**
  * @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.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';

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.5/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,12 +1,12 @@
 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 { useEvent } from '@aiszlab/relax';
+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 { useAnimate } from 'framer-motion';
 import clsx from 'clsx';
 import { Context } from './context.js';
-import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useExpandable } from '../../hooks/use-expandable.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
@@ -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"
@@ -98,11 +98,17 @@ const CollapseItem = ({
   const isExpanded = activeKeys.has(value);
   const [collapser, animate] = useAnimate();
   const theme = useTheme();
-  useExpandEffect({
-    animate,
-    expanded: isExpanded,
-    target: collapser
-  });
+  const {
+    expand,
+    collapse
+  } = useExpandable();
+  useUpdateEffect(async () => {
+    if (isExpanded) {
+      await expand([collapser, animate]);
+      return;
+    }
+    await collapse([collapser, animate]);
+  }, [isExpanded]);
   const styled = {
     item: _stylex.props(styles.item.default({
       outlineColor: theme.colors[ColorToken.OutlineVariant]

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

package/dist/components/dialog/dialog.js

@@ -12,7 +12,7 @@ const Dialog = ({ open, dismissable = true, ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-    return (React.createElement(Portal, { open: open || _isVisible },
+    return (React.createElement(Portal, { open: open || _isVisible, lockable: true },
         React.createElement(Popup, { ...props, dismissable: true, open: open, onClosed: turnOff })));
 };
 var Dialog$1 = Dialog;

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.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 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.59_react-dom@18.3.1_react@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.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';

package/dist/components/drawer/drawer.js

@@ -12,7 +12,7 @@ const Drawer = ({ open, size = 400, dismissable = true, placement = "right", ...
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-    return (React.createElement(Portal, { open: open || _isVisible },
+    return (React.createElement(Portal, { open: open || _isVisible, lockable: true },
         React.createElement(Popup, { ...props, onClosed: turnOff, size: size, open: open, dismissable: dismissable, placement: placement })));
 };
 var Drawer$1 = Drawer;

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.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 { 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.59_react-dom@18.3.1_react@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.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 

package/dist/components/floating-action-button/floatable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { FloatableProps, FloatableRef } from "./types";
+declare const Floatable: React.ForwardRefExoticComponent<FloatableProps & React.RefAttributes<FloatableRef>>;
+export default Floatable;

package/dist/components/floating-action-button/floatable.js

@@ -0,0 +1,83 @@
+import { useIdentity, useRefs } from '@aiszlab/relax';
+import { useDraggable, useDndMonitor } from '@dnd-kit/core';
+import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Button from '../button/button.js';
+import Portal from '../portal/portal.js';
+import { useContainer } from '../../hooks/use-container.js';
+
+const styles = {
+  floatable: props => [{
+    position: "musae-10l6tqk",
+    transform: "musae-1v0jg1i",
+    willChange: "musae-1so62im",
+    right: "musae-k6ci0l",
+    insetInlineStart: null,
+    insetInlineEnd: null,
+    bottom: "musae-jnlgov",
+    zIndex: "musae-aefx0h",
+    $$css: true
+  }, {
+    "--transform": `translate3d(${props.x}px, ${props.y}px, 0)` != null ? `translate3d(${props.x}px, ${props.y}px, 0)` : "initial"
+  }],
+  fixed: {
+    position: "musae-ixxii4",
+    $$css: true
+  }
+};
+const Floatable = forwardRef(({
+  container,
+  children
+}, ref) => {
+  const [id] = useIdentity();
+  const _ref = useRef(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggable({
+    id
+  });
+  const floatableRef = useRefs(_ref, setNodeRef);
+  const {
+    container: _container,
+    isDocumentBody
+  } = useContainer({
+    container
+  });
+  const [offsetX, setOffsetX] = useState(0);
+  const [offsetY, setOffsetY] = useState(0);
+  const [clientRect, setClientRect] = useState();
+  useDndMonitor({
+    onDragEnd: event => {
+      setOffsetX(_offsetX => _offsetX + event.delta.x);
+      setOffsetY(_offsetY => _offsetY + event.delta.y);
+      setClientRect(_ref.current?.getBoundingClientRect());
+    }
+  });
+  useImperativeHandle(ref, () => {
+    return {
+      getBoundingClientRect: () => {
+        return clientRect;
+      }
+    };
+  });
+  const styled = _stylex.props(styles.floatable({
+    x: offsetX + (transform?.x ?? 0),
+    y: offsetY + (transform?.y ?? 0)
+  }), isDocumentBody && styles.fixed);
+  return React.createElement(Portal, {
+    container: _container
+  }, React.createElement("div", {
+    ref: floatableRef,
+    ...listeners,
+    ...attributes,
+    className: styled.className,
+    style: styled.style
+  }, React.createElement(Button, {
+    shape: "circular"
+  }, children)));
+});
+
+export { Floatable as default };

package/dist/components/floating-action-button/floating-action-button.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { FloatingActionButtonProps } from "./types";
+declare const FloatingActionButton: ({ container, children }: FloatingActionButtonProps) => React.JSX.Element;
+export default FloatingActionButton;

package/dist/components/floating-action-button/floating-action-button.js

@@ -0,0 +1,26 @@
+import React, { useRef } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import Floatable from './floatable.js';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { useIdentity, useEvent } from '@aiszlab/relax';
+import { useContainer } from '../../hooks/use-container.js';
+
+const FloatingActionButton = ({ container, children }) => {
+    const [id] = useIdentity();
+    const floatableRef = useRef(null);
+    const { container: _container } = useContainer({ container });
+    const modifier = useEvent((args) => {
+        const clientRect = floatableRef.current?.getBoundingClientRect();
+        return restrictToParentElement({
+            ...args,
+            ...(!!clientRect && {
+                draggingNodeRect: clientRect,
+            }),
+        });
+    });
+    return (React.createElement(DndContext, { id: id, modifiers: [modifier] },
+        React.createElement(Floatable, { ref: floatableRef, container: _container }, children)));
+};
+var FloatingActionButton$1 = FloatingActionButton;
+
+export { FloatingActionButton$1 as default };

package/dist/components/floating-action-button/index.d.ts

@@ -0,0 +1,2 @@
+import FloatingActionButton from "./floating-action-button";
+export { FloatingActionButton };

package/dist/components/floating-action-button/types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { PortalProps } from "../portal/types";
+/**
+ * @description
+ * floatable ref
+ */
+export type FloatableRef = {
+    /**
+     * @description
+     * get rect
+     */
+    getBoundingClientRect: () => DOMRect | undefined;
+};
+/**
+ * @description
+ * props
+ */
+export type FloatingActionButtonProps = {
+    /**
+     * @description
+     * container
+     */
+    container?: PortalProps["container"];
+    /**
+     * @description
+     * children
+     */
+    children?: ReactNode;
+};
+/**
+ * @description
+ * floatable props
+ */
+export type FloatableProps = {
+    /**
+     * @link {FloatingActionButtonProps.container}
+     */
+    container?: FloatingActionButtonProps["container"];
+    /**
+     * @description
+     * children
+     */
+    children?: ReactNode;
+};

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

@@ -1,5 +1,5 @@
-import { FieldError } from "react-hook-form";
-import { ComponentProps } from "../../../types/element";
+import { type FieldError } from "react-hook-form";
+import type { ComponentProps } from "../../../types/element";
 import React from "react";
 type Props = ComponentProps & {
     /**

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

@@ -2,50 +2,64 @@ import React, { useEffect } from 'react';
 import { ComponentToken, FormClassToken } from '../../../utils/class-name.js';
 import clsx from 'clsx';
 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';
+import { useTheme } from '../../theme/hooks.js';
+import { ColorToken } from '../../../utils/colors.js';
 
+const styles = {
+  error: props => [{
+    paddingInline: "musae-1xkwav8",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    color: "musae-19dipnz",
+    height: "musae-qtp20y",
+    overflow: "musae-b3r6kr",
+    overflowX: null,
+    overflowY: null,
+    $$css: true
+  }, {
+    "--color": props.color != null ? props.color : "initial"
+  }]
+};
 const Error = ({
   error,
   className,
   style
 }) => {
   const classNames = useClassNames(ComponentToken.Form);
-  const styled = {
-    className: "musae-1xkwav8 musae-1p848mt musae-ri8twg"
-  };
   const [scope, animate] = useAnimate();
   const [isPresent, safeToRemove] = usePresence();
+  const theme = useTheme();
   useEffect(() => {
     if (isPresent) {
-      const enter = async () => {
-        await animate(scope.current, {
-          height: "auto"
-        }, {
-          duration: 0.1
-        });
-      };
-      enter();
-      return;
-    }
-    const exit = async () => {
-      await animate(scope.current, {
-        height: 0
+      animate(scope.current, {
+        height: "auto"
       }, {
-        duration: 0.1
+        duration: 0.2
       });
+      return;
+    }
+    animate(scope.current, {
+      height: 0
+    }).then(() => {
       safeToRemove();
-    };
-    exit();
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isPresent]);
+  const styled = _stylex.props(styles.error({
+    color: theme.colors[ColorToken.Error]
+  }));
   return React.createElement("div", {
     className: clsx(classNames[FormClassToken.FieldError], className, styled.className),
     style: {
-      ...style,
-      ...styled.style
+      ...styled.style,
+      ...style
     },
     ref: scope
-  }, error?.message);
+  }, React.createElement("p", null, error?.message));
 };
 
 export { Error as default };

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

@@ -2,10 +2,8 @@ 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.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
-import { useTheme } from '../../theme/hooks.js';
-import { ColorToken } from '../../../utils/colors.js';
 import Layout from './layout.js';
 import Error from './error.js';
 import { AnimatePresence } from 'framer-motion';
@@ -13,18 +11,9 @@ import { typography } from '../../theme/theme.js';
 import { useClassNames } from '../../../hooks/use-class-names.js';
 
 const styles = {
-  error: props => [{
-    color: "musae-19dipnz",
-    overflow: "musae-b3r6kr",
-    overflowX: null,
-    overflowY: null,
-    $$css: true
-  }, {
-    "--color": props.color != null ? props.color : "initial"
-  }],
   supporting: {
     minHeight: "musae-1sal0kv",
-    paddingBottom: "musae-78w2x6",
+    paddingBlock: "musae-ovjknk",
     $$css: true
   }
 };
@@ -39,7 +28,6 @@ const Field = ({
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Form);
-  const theme = useTheme();
   const {
     field: {
       onBlur,
@@ -82,9 +70,6 @@ const Field = ({
     });
   }, [_children, name, value, invalid, ref, onChange, onBlur]);
   const styled = {
-    error: props(styles.error({
-      color: theme.colors[ColorToken.Error]
-    })),
     supporting: props(styles.supporting, typography.body.small)
   };
   return React.createElement("div", {
@@ -95,10 +80,10 @@ const Field = ({
   }, React.createElement("div", null, children), React.createElement("div", {
     className: clsx(classNames[FormClassToken.FieldSupporting], styled.supporting.className),
     style: styled.supporting.style
-  }, React.createElement(AnimatePresence, null, invalid && React.createElement(Error, {
-    error: error,
-    className: styled.error.className,
-    style: styled.error.style
+  }, React.createElement(AnimatePresence, {
+    mode: "wait"
+  }, invalid && React.createElement(Error, {
+    error: 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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.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 { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';