musae 0.2.6 → 0.2.7

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.7.4/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.7.4/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';
@@ -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.7.4/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.7.4/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.56_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: {

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.7.4/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,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/.pnpm/@stylexjs_stylex@0.7.4/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.56_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: {

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.7.4/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.7.4/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.7.4/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';

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.7.4/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';
 
 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.7.4/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 { useGutters } from '../../hooks/use-gutters.js';
 
 const styles = {

package/dist/components/icon/icon.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { IconProps } from "./types";
-declare const Icon: ({ as, color, size, onClick, style, className }: IconProps) => React.JSX.Element;
+declare const Icon: ({ as, color, size, onClick, style, className, ...props }: IconProps) => React.JSX.Element;
 export default Icon;

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.7.4/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 { useClassNames } from '../../hooks/use-class-names.js';
 
 const styles = {
@@ -26,7 +26,8 @@ const Icon = ({
   size,
   onClick,
   style,
-  className
+  className,
+  ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Icon);
   const asProps = useMemo(() => {
@@ -49,7 +50,8 @@ const Icon = ({
       ...styled.style,
       ...style
     },
-    onClick: onClick
+    onClick: onClick,
+    ...props$1
   }, children);
 };
 var Icon$1 = Icon;

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, FC, MouseEventHandler, ReactNode, ReactPortal } from "react";
+import type { CSSProperties, FC, HTMLAttributes, MouseEventHandler, ReactNode, ReactPortal } from "react";
 import { ComponentProps } from "../../types/element";
 export type AsProps = Required<Pick<IconProps, "size">>;
 type Size = "small" | "medium" | "large";
@@ -27,5 +27,10 @@ export interface IconProps extends ComponentProps {
      * click handler
      */
     onClick?: MouseEventHandler<HTMLSpanElement>;
+    /**
+     * @description
+     * role
+     */
+    role?: HTMLAttributes<HTMLSpanElement>["role"];
 }
 export {};

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.7.4/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 Portal from '../../portal/portal.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
@@ -98,7 +98,7 @@ const Operations = ({
   } = useContext(PreviewGroupContext) ?? {};
   const isMultiple = total > 1;
   return React.createElement(Portal, {
-    open: true
+    lockable: true
   }, React.createElement("div", {
     className: styled.operations.className,
     style: styled.operations.style

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.7.4/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';
 
 const styles = {
   image: props => [{

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

@@ -4,22 +4,22 @@ export declare const styles: Readonly<{
     readonly wrapper: (props: {
         outlineColor: CSSProperties["borderColor"];
     }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
-        display: "flex";
+        display: "inline-flex";
         alignItems: "center";
         cursor: "text";
+        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        verticalAlign: string;
         minHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
         minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
-        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        maxWidth: 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;
+        transitionProperty: string;
+        transitionDuration: 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<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{