musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/fab/fab.cjs

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles = require('./styles.cjs');
 var React = require('react');
 var relax = require('@aiszlab/relax');
 var className = require('@aiszlab/relax/class-name');
 var useContainer = require('../../hooks/use-container.cjs');
 var portal = require('../portal/portal.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var context = require('./context.cjs');
 
@@ -39,17 +41,8 @@ var Fab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var buttonRef = relax.useComposedRef(_buttonRef, ref, draggableRef);
   var styled = {
-    button: {
-      0: {
-        className: "musaex-1ypdohk musaex-67bb7w musaex-14dcsj8 musaex-1aovfyv musaex-1azhs7y musaex-1lkkojn"
-      },
-      1: {
-        className: "musaex-1ypdohk musaex-67bb7w musaex-14dcsj8 musaex-1lkkojn musaex-1wbxb08 musaex-1g9fk1a"
-      }
-    }[!!isDragged << 0],
-    icon: {
-      className: "musaex-47corl musaex-3nfvp2"
-    }
+    button: stylex.props(styles.default.base, isDragged && styles.default.dragged),
+    icon: stylex.props(styles.default.icon)
   };
   var onClick = relax.useEvent(function (event) {
     click === null || click === void 0 || click(event);

package/dist/components/fab/fab.mjs

@@ -1,12 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { forwardRef, useRef } from 'react';
 import { useDraggable, useComposedRef, useEvent } from '@aiszlab/relax';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useContainer } from '../../hooks/use-container.mjs';
 import Portal from '../portal/portal.mjs';
 import IconButton from '../icon-button/icon-button.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CLASS_NAMES } from './context.mjs';
 
@@ -15,7 +17,7 @@ var Fab = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var container = _ref.container,
     children = _ref.children,
     click = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props$1 = _objectWithoutProperties(_ref, _excluded);
   var _buttonRef = useRef(null);
   var _useContainer = useContainer({
       container: container
@@ -35,17 +37,8 @@ var Fab = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classNames = useClassNames(CLASS_NAMES);
   var buttonRef = useComposedRef(_buttonRef, ref, draggableRef);
   var styled = {
-    button: {
-      0: {
-        className: "musaex-1ypdohk musaex-67bb7w musaex-14dcsj8 musaex-1aovfyv musaex-1azhs7y musaex-1lkkojn"
-      },
-      1: {
-        className: "musaex-1ypdohk musaex-67bb7w musaex-14dcsj8 musaex-1lkkojn musaex-1wbxb08 musaex-1g9fk1a"
-      }
-    }[!!isDragged << 0],
-    icon: {
-      className: "musaex-47corl musaex-3nfvp2"
-    }
+    button: props(styles.base, isDragged && styles.dragged),
+    icon: props(styles.icon)
   };
   var onClick = useEvent(function (event) {
     click === null || click === void 0 || click(event);
@@ -63,7 +56,7 @@ var Fab = /*#__PURE__*/forwardRef(function (_ref, ref) {
       "--movement-y": "".concat(movementY, "px")
     }),
     ripple: false
-  }, props), /*#__PURE__*/React.createElement("span", {
+  }, props$1), /*#__PURE__*/React.createElement("span", {
     className: styled.icon.className,
     style: styled.icon.style
   }, children)));

package/dist/components/fab/styles.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  base: {
+    kkrTdU: "musaex-1ypdohk",
+    kfzvcC: "musaex-67bb7w",
+    k3aq6I: "musaex-14dcsj8",
+    kt4wiu: "musaex-1aovfyv",
+    krVfgx: "musaex-1azhs7y",
+    kTCo9J: "musaex-1lkkojn",
+    $$css: true
+  },
+  dragged: {
+    kt4wiu: null,
+    krVfgx: null,
+    kLqNvP: "musaex-1wbxb08",
+    k87sOh: "musaex-1g9fk1a",
+    $$css: true
+  },
+  icon: {
+    kfzvcC: "musaex-47corl",
+    k1xSpc: "musaex-3nfvp2",
+    $$css: true
+  }
+};
+
+exports.default = styles;

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

@@ -0,0 +1,23 @@
+declare const styles: Readonly<{
+    readonly base: Readonly<{
+        readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
+        readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "auto">;
+        readonly transform: import("@stylexjs/stylex").StyleXClassNameFor<"transform", "translateX(var(--movement-x)) translateY(var(--movement-y))">;
+        readonly insetInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineEnd", string>;
+        readonly insetBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockEnd", string>;
+        readonly ":not(#\\#)": import("@stylexjs/stylex").StyleXClassNameFor<":not(#\\#)", {
+            readonly position: "absolute";
+        }>;
+    }>;
+    readonly dragged: Readonly<{
+        readonly insetInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineEnd", null>;
+        readonly insetBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockEnd", null>;
+        readonly insetInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineStart", "var(--left)">;
+        readonly insetBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockStart", "var(--top)">;
+    }>;
+    readonly icon: Readonly<{
+        readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "none">;
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
+    }>;
+}>;
+export default styles;

package/dist/components/fab/styles.mjs

@@ -0,0 +1,25 @@
+var styles = {
+  base: {
+    kkrTdU: "musaex-1ypdohk",
+    kfzvcC: "musaex-67bb7w",
+    k3aq6I: "musaex-14dcsj8",
+    kt4wiu: "musaex-1aovfyv",
+    krVfgx: "musaex-1azhs7y",
+    kTCo9J: "musaex-1lkkojn",
+    $$css: true
+  },
+  dragged: {
+    kt4wiu: null,
+    krVfgx: null,
+    kLqNvP: "musaex-1wbxb08",
+    k87sOh: "musaex-1g9fk1a",
+    $$css: true
+  },
+  icon: {
+    kfzvcC: "musaex-47corl",
+    k1xSpc: "musaex-3nfvp2",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/form/__test__/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

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

@@ -6,9 +6,11 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _regenerator = require('@babel/runtime/helpers/regenerator');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('../styles.cjs');
 var React = require('react');
 var className = require('@aiszlab/relax/class-name');
 var react = require('motion/react');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
 var context = require('../context.cjs');
 var useThemeColorVars = require('../../../hooks/use-theme-color-vars.cjs');
@@ -58,9 +60,7 @@ var Error = function Error(_ref) {
       }
     }, _callee);
   })), [isPresent]);
-  var styled = {
-    className: "musaex-jt36v0 musaex-1yke8k6 musaex-qtp20y musaex-b3r6kr"
-  };
+  var styled = stylex.props(styles.default.error.base);
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.fieldError, className$1, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), _themeColorVars), style),

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

@@ -2,9 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from '../styles.mjs';
 import React, { useContext, useRef } from 'react';
 import { stringify } from '@aiszlab/relax/class-name';
 import { usePresence, animate } from 'motion/react';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useAsyncEffect } from '@aiszlab/relax';
 import Context from '../context.mjs';
 import { useThemeColorVars } from '../../../hooks/use-theme-color-vars.mjs';
@@ -54,9 +56,7 @@ var Error = function Error(_ref) {
       }
     }, _callee);
   })), [isPresent]);
-  var styled = {
-    className: "musaex-jt36v0 musaex-1yke8k6 musaex-qtp20y musaex-b3r6kr"
-  };
+  var styled = props(styles.error.base);
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.fieldError, className, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), _themeColorVars), style),

package/dist/components/form/field/field.cjs

@@ -56,13 +56,14 @@ var Field = function Field(_ref) {
       })), true];
     }, [[], false]).at(0);
   }, [_children, name, value, isInvalid, change]);
+  var isSupportingHidden = supporting$1 === false || supporting$1 === null;
   return /*#__PURE__*/React.createElement(layout.default, {
     label: props.label,
     required: required,
     className: classNames.item,
-    supporting: /*#__PURE__*/React.createElement(React.Fragment, null, !!supporting$1 && /*#__PURE__*/React.createElement(supporting.default, null, supporting$1), /*#__PURE__*/React.createElement(react.AnimatePresence, {
+    supporting: !isSupportingHidden && (/*#__PURE__*/React.createElement(React.Fragment, null, !!supporting$1 && /*#__PURE__*/React.createElement(supporting.default, null, supporting$1), /*#__PURE__*/React.createElement(react.AnimatePresence, {
       mode: "wait"
-    }, isInvalid && /*#__PURE__*/React.createElement(error.default, null, error$1)))
+    }, isInvalid && /*#__PURE__*/React.createElement(error.default, null, error$1))))
   }, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.field, className$1),
     style: style

package/dist/components/form/field/field.mjs

@@ -52,13 +52,14 @@ var Field = function Field(_ref) {
       })), true];
     }, [[], false]).at(0);
   }, [_children, name, value, isInvalid, change]);
+  var isSupportingHidden = supporting === false || supporting === null;
   return /*#__PURE__*/React.createElement(Layout, {
     label: props.label,
     required: required,
     className: classNames.item,
-    supporting: /*#__PURE__*/React.createElement(React.Fragment, null, !!supporting && /*#__PURE__*/React.createElement(Supporting, null, supporting), /*#__PURE__*/React.createElement(AnimatePresence, {
+    supporting: !isSupportingHidden && (/*#__PURE__*/React.createElement(React.Fragment, null, !!supporting && /*#__PURE__*/React.createElement(Supporting, null, supporting), /*#__PURE__*/React.createElement(AnimatePresence, {
       mode: "wait"
-    }, isInvalid && /*#__PURE__*/React.createElement(Error, null, error)))
+    }, isInvalid && /*#__PURE__*/React.createElement(Error, null, error))))
   }, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.field, className),
     style: style

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles = require('../styles.cjs');
 var React = require('react');
 var context = require('../context.cjs');
 var index = require('../../grid/index.cjs');
@@ -16,21 +17,6 @@ var _excluded = ["required", "space", "className", "style", "supporting"],
   _excluded2 = ["classNames"];
 var Row = index.Grid.Row,
   Col = index.Grid.Col;
-var styles = {
-  required: {
-    kgeoSG: "musaex-ilz4u6",
-    kxBb7d: "musaex-mn6ncs",
-    kiZrQH: "musaex-jwu8jq",
-    $$css: true
-  },
-  supporting: {
-    kAzted: "musaex-5ihfrj",
-    kg3NbH: "musaex-1v4gb6w",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    $$css: true
-  }
-};
 /**
  * @description
  * item layout
@@ -52,14 +38,9 @@ var Layout = function Layout(_ref) {
   var isLabeled = labelCol > 0 && !!props.label;
   var _themeColorVars = useThemeColorVars.useThemeColorVars(["error"]);
   var styled = {
-    item: {
-      0: {},
-      1: {
-        className: "musaex-12wjv6a"
-      }
-    }[!!(space && !supporting) << 0],
-    label: stylex.props(required && styles.required, theme.$label.small),
-    supporting: stylex.props(styles.supporting, theme.$body.small)
+    item: stylex.props(space && !supporting && styles.default.layout.space),
+    label: stylex.props(required && styles.default.layout.required, theme.$label.small),
+    supporting: stylex.props(styles.default.layout.supporting, theme.$body.small)
   };
   return /*#__PURE__*/React.createElement(Row, {
     gutter: [0, 8],

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

@@ -1,5 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from '../styles.mjs';
 import React, { useContext } from 'react';
 import Context from '../context.mjs';
 import { Grid } from '../../grid/index.mjs';
@@ -12,21 +13,6 @@ var _excluded = ["required", "space", "className", "style", "supporting"],
   _excluded2 = ["classNames"];
 var Row = Grid.Row,
   Col = Grid.Col;
-var styles = {
-  required: {
-    kgeoSG: "musaex-ilz4u6",
-    kxBb7d: "musaex-mn6ncs",
-    kiZrQH: "musaex-jwu8jq",
-    $$css: true
-  },
-  supporting: {
-    kAzted: "musaex-5ihfrj",
-    kg3NbH: "musaex-1v4gb6w",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    $$css: true
-  }
-};
 /**
  * @description
  * item layout
@@ -48,14 +34,9 @@ var Layout = function Layout(_ref) {
   var isLabeled = labelCol > 0 && !!props$1.label;
   var _themeColorVars = useThemeColorVars(["error"]);
   var styled = {
-    item: {
-      0: {},
-      1: {
-        className: "musaex-12wjv6a"
-      }
-    }[!!(space && !supporting) << 0],
-    label: props(required && styles.required, $label.small),
-    supporting: props(styles.supporting, $body.small)
+    item: props(space && !supporting && styles.layout.space),
+    label: props(required && styles.layout.required, $label.small),
+    supporting: props(styles.layout.supporting, $body.small)
   };
   return /*#__PURE__*/React.createElement(Row, {
     gutter: [0, 8],

package/dist/components/form/field/supporting.cjs

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('../styles.cjs');
 var React = require('react');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var hooks = require('../../theme/hooks.cjs');
 
 var Supporting = function Supporting(_ref) {
   var children = _ref.children;
   var theme = hooks.useTheme();
-  var styled = {
-    className: "musaex-p1ujoc musaex-1yke8k6"
-  };
+  var styled = stylex.props(styles.default.supporting.base);
   return /*#__PURE__*/React.createElement("div", {
     className: styled.className,
     style: _objectSpread(_objectSpread({}, styled.style), {}, {

package/dist/components/form/field/supporting.mjs

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from '../styles.mjs';
 import React from 'react';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../../theme/hooks.mjs';
 
 var Supporting = function Supporting(_ref) {
   var children = _ref.children;
   var theme = useTheme();
-  var styled = {
-    className: "musaex-p1ujoc musaex-1yke8k6"
-  };
+  var styled = props(styles.supporting.base);
   return /*#__PURE__*/React.createElement("div", {
     className: styled.className,
     style: _objectSpread(_objectSpread({}, styled.style), {}, {

package/dist/components/form/form.cjs

@@ -9,6 +9,8 @@ var context = require('./context.cjs');
 var useForm = require('./hooks/use-form.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var styles = require('./styles.cjs');
 
 /**
  * Form Component
@@ -22,7 +24,9 @@ var Form = function Form(_ref) {
     style = _ref.style,
     onChange = _ref.onChange,
     value = _ref.value,
-    defaultValue = _ref.defaultValue;
+    defaultValue = _ref.defaultValue,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? "default" : _ref$layout;
   var _form = useForm.useForm({
     form: form$1,
     onChange: onChange,
@@ -30,6 +34,7 @@ var Form = function Form(_ref) {
     defaultValue: defaultValue
   });
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var styled = stylex.props(styles.default.form.base, layout === "inline" && styles.default.form.inline);
   return /*#__PURE__*/React.createElement(context.default.Provider, {
     value: _objectSpread(_objectSpread({}, context.DEFAULT_CONTEXT_VALUE), {}, {
       classNames: classNames
@@ -40,8 +45,8 @@ var Form = function Form(_ref) {
       form: _form[form.FORM_TOKEN]
     }
   }, /*#__PURE__*/React.createElement("form", {
-    className: className.stringify(classNames.form, className$1),
-    style: style
+    className: className.stringify(classNames.form, styled.className, className$1),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
   }, children)));
 };
 

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

@@ -6,5 +6,5 @@ import type { FormProps } from "../../types/form";
  *
  * @author murukal <tutu@fantufantu.com>
  */
-declare const Form: <T extends FieldsValue>({ children, form, className, style, onChange, value, defaultValue, }: FormProps<T>) => React.JSX.Element;
+declare const Form: <T extends FieldsValue>({ children, form, className, style, onChange, value, defaultValue, layout, }: FormProps<T>) => React.JSX.Element;
 export default Form;

package/dist/components/form/form.mjs

@@ -5,6 +5,8 @@ import Context, { CLASS_NAMES, DEFAULT_CONTEXT_VALUE, FormContext } from './cont
 import { useForm } from './hooks/use-form.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import styles from './styles.mjs';
 
 /**
  * Form Component
@@ -18,7 +20,9 @@ var Form = function Form(_ref) {
     style = _ref.style,
     onChange = _ref.onChange,
     value = _ref.value,
-    defaultValue = _ref.defaultValue;
+    defaultValue = _ref.defaultValue,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? "default" : _ref$layout;
   var _form = useForm({
     form: form,
     onChange: onChange,
@@ -26,6 +30,7 @@ var Form = function Form(_ref) {
     defaultValue: defaultValue
   });
   var classNames = useClassNames(CLASS_NAMES);
+  var styled = props(styles.form.base, layout === "inline" && styles.form.inline);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: _objectSpread(_objectSpread({}, DEFAULT_CONTEXT_VALUE), {}, {
       classNames: classNames
@@ -36,8 +41,8 @@ var Form = function Form(_ref) {
       form: _form[FORM_TOKEN]
     }
   }, /*#__PURE__*/React.createElement("form", {
-    className: stringify(classNames.form, className),
-    style: style
+    className: stringify(classNames.form, styled.className, className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
   }, children)));
 };
 

package/dist/components/form/item.cjs

@@ -30,7 +30,8 @@ var Item = function Item(_ref) {
       className: className$1,
       style: style,
       name: props.name,
-      required: required
+      required: required,
+      supporting: supporting$1
     }));
   }
   return /*#__PURE__*/React.createElement(layout.default, {

package/dist/components/form/item.mjs

@@ -26,7 +26,8 @@ var Item = function Item(_ref) {
       className: className,
       style: style,
       name: props.name,
-      required: required
+      required: required,
+      supporting: supporting
     }));
   }
   return /*#__PURE__*/React.createElement(Layout, {

package/dist/components/form/styles.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var form = {
+  base: {
+    $$css: true
+  },
+  inline: {
+    k1xSpc: "musaex-78zum5",
+    kwnvtZ: "musaex-1a02dak",
+    kGNEyG: "musaex-1cy8zhl",
+    k1C7PZ: "musaex-1ccab4z",
+    $$css: true
+  }
+};
+var layout = {
+  space: {
+    k1K539: "musaex-12wjv6a",
+    $$css: true
+  },
+  required: {
+    kgeoSG: "musaex-ilz4u6",
+    kxBb7d: "musaex-mn6ncs",
+    kiZrQH: "musaex-jwu8jq",
+    $$css: true
+  },
+  supporting: {
+    kAzted: "musaex-5ihfrj",
+    kg3NbH: "musaex-1v4gb6w",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    $$css: true
+  }
+};
+var supporting = {
+  base: {
+    kMwMTN: "musaex-p1ujoc",
+    kqGvvJ: "musaex-1yke8k6",
+    $$css: true
+  }
+};
+var error = {
+  base: {
+    kMwMTN: "musaex-jt36v0",
+    kqGvvJ: "musaex-1yke8k6",
+    kZKoxP: "musaex-qtp20y",
+    kVQacm: "musaex-b3r6kr",
+    $$css: true
+  }
+};
+var styles = {
+  form: form,
+  layout: layout,
+  supporting: supporting,
+  error: error
+};
+
+exports.default = styles;

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

@@ -0,0 +1,44 @@
+declare const styles: {
+    form: Readonly<{
+        readonly base: Readonly<{}>;
+        readonly inline: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexWrap: import("@stylexjs/stylex").StyleXClassNameFor<"flexWrap", "wrap">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "flex-start">;
+            readonly columnGap: import("@stylexjs/stylex").StyleXClassNameFor<"columnGap", string>;
+        }>;
+    }>;
+    layout: Readonly<{
+        readonly space: Readonly<{
+            readonly marginBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"marginBlockEnd", string>;
+        }>;
+        readonly required: Readonly<{
+            readonly "::before": import("@stylexjs/stylex").StyleXClassNameFor<"::before", {
+                readonly content: "\"*\"";
+                readonly color: "var(--color-error)";
+                readonly marginRight: import("@stylexjs/stylex").StyleXVar<string>;
+            }>;
+        }>;
+        readonly supporting: Readonly<{
+            readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+        }>;
+    }>;
+    supporting: Readonly<{
+        readonly base: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-secondary)">;
+            readonly marginBlock: import("@stylexjs/stylex").StyleXClassNameFor<"marginBlock", string>;
+        }>;
+    }>;
+    error: Readonly<{
+        readonly base: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-error)">;
+            readonly marginBlock: import("@stylexjs/stylex").StyleXClassNameFor<"marginBlock", string>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", 0>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/form/styles.mjs

@@ -0,0 +1,55 @@
+var form = {
+  base: {
+    $$css: true
+  },
+  inline: {
+    k1xSpc: "musaex-78zum5",
+    kwnvtZ: "musaex-1a02dak",
+    kGNEyG: "musaex-1cy8zhl",
+    k1C7PZ: "musaex-1ccab4z",
+    $$css: true
+  }
+};
+var layout = {
+  space: {
+    k1K539: "musaex-12wjv6a",
+    $$css: true
+  },
+  required: {
+    kgeoSG: "musaex-ilz4u6",
+    kxBb7d: "musaex-mn6ncs",
+    kiZrQH: "musaex-jwu8jq",
+    $$css: true
+  },
+  supporting: {
+    kAzted: "musaex-5ihfrj",
+    kg3NbH: "musaex-1v4gb6w",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    $$css: true
+  }
+};
+var supporting = {
+  base: {
+    kMwMTN: "musaex-p1ujoc",
+    kqGvvJ: "musaex-1yke8k6",
+    $$css: true
+  }
+};
+var error = {
+  base: {
+    kMwMTN: "musaex-jt36v0",
+    kqGvvJ: "musaex-1yke8k6",
+    kZKoxP: "musaex-qtp20y",
+    kVQacm: "musaex-b3r6kr",
+    $$css: true
+  }
+};
+var styles = {
+  form: form,
+  layout: layout,
+  supporting: supporting,
+  error: error
+};
+
+export { styles as default };