musae 0.2.26 → 0.3.0

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

@@ -0,0 +1,94 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
+import { useController } from 'react-hook-form';
+import { chain, isRefable, clsx } from '@aiszlab/relax';
+import { FormClassToken } from '../../../utils/class-name.mjs';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import Layout from './layout.mjs';
+import Error from './error.mjs';
+import { AnimatePresence } from 'framer-motion';
+import { typography } from '../../theme/theme.mjs';
+import { useClassNames } from '../../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../../utils/component-token.mjs';
+
+var _excluded = ["required", "children", "className", "style"];
+var styles = {
+  supporting: {
+    minHeight: "musaex-1ite1z3",
+    paddingBlock: "musaex-1i37kmv",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * form item may not has name prop
+ * if there is name prop, it will render
+ */
+var Field = function Field(_ref) {
+  var required = _ref.required,
+    _children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames(ComponentToken.Form);
+  var _useController = useController({
+      name: props.name,
+      rules: {
+        required: {
+          value: required,
+          message: "".concat(props.name, " is required")
+        }
+      }
+    }),
+    _useController$field = _useController.field,
+    onBlur = _useController$field.onBlur,
+    onChange = _useController$field.onChange,
+    name = _useController$field.name,
+    value = _useController$field.value,
+    ref = _useController$field.ref,
+    _useController$fieldS = _useController.fieldState,
+    invalid = _useController$fieldS.invalid,
+    error = _useController$fieldS.error;
+  var children = useMemo(function () {
+    return Children.toArray(_children).reduce(function (_ref2, _child) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        _clonedChildren = _ref3[0],
+        isBound = _ref3[1];
+      if (isBound || ! /*#__PURE__*/isValidElement(_child)) {
+        return [_clonedChildren.concat(_child), isBound];
+      }
+      // registe react hook form
+      return [_clonedChildren.concat(/*#__PURE__*/cloneElement(_child, _objectSpread({
+        name: name,
+        value: value,
+        invalid: invalid,
+        onChange: chain(_child.props.onChange, onChange),
+        onBlur: chain(_child.props.onBlur, onBlur)
+      }, isRefable(_child) && {
+        ref: ref
+      }))), true];
+    }, [[], false]);
+  }, [_children, name, value, invalid, ref, onChange, onBlur]);
+  var styled = {
+    supporting: _stylex.props(styles.supporting, typography.body.small)
+  };
+  return /*#__PURE__*/React.createElement(Layout, {
+    label: props.label,
+    required: required,
+    className: classNames[FormClassToken.Item]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: clsx(classNames[FormClassToken.FieldSupporting], styled.supporting.className),
+    style: styled.supporting.style
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    mode: "wait"
+  }, invalid && /*#__PURE__*/React.createElement(Error, {
+    error: error
+  }))));
+};
+
+export { Field as default };

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

@@ -0,0 +1,79 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var context = require('../context.cjs');
+var index = require('../../grid/index.cjs');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var theme = require('../../theme/theme.cjs');
+var hooks = require('../../theme/hooks.cjs');
+var colors = require('../../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+
+var _excluded = ["required", "space", "className", "style"];
+var Row = index.Grid.Row,
+  Col = index.Grid.Col;
+var styles = {
+  space: {
+    marginBottom: "musaex-1w7ha7z",
+    $$css: true
+  },
+  required: function required(props) {
+    return [{
+      "::before_content": "musaex-ilz4u6",
+      "::before_color": "musaex-gyfpa5",
+      "::before_marginRight": "musaex-gcedro",
+      "::before_marginInlineStart": null,
+      "::before_marginInlineEnd": null,
+      $$css: true
+    }, {
+      "--1g451k2": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+/**
+ * @description
+ * item layout
+ */
+var Layout = function Layout(_ref) {
+  var _props$labelCol, _props$wrapperCol;
+  var required = _ref.required,
+    space = _ref.space,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextValue = React.useContext(context.default);
+  var labelCol = (_props$labelCol = props.labelCol) !== null && _props$labelCol !== void 0 ? _props$labelCol : contextValue.labelCol;
+  var wrapperCol = (_props$wrapperCol = props.wrapperCol) !== null && _props$wrapperCol !== void 0 ? _props$wrapperCol : contextValue.wrapperCol;
+  var theme$1 = hooks.useTheme();
+  var styled = {
+    item: stylex.default.props(!!space && styles.space),
+    label: stylex.default.props(required && styles.required({
+      color: theme$1.colors[colors.ColorToken.Error]
+    }), theme.typography.label.small)
+  };
+  var isLabeled = !!labelCol && !!props.label;
+  var _className = relax.clsx(className, styled.item.className);
+  var _style = _objectSpread(_objectSpread({}, styled.item.style), style);
+  if (!isLabeled) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: _className,
+      style: _style
+    }, props.children);
+  }
+  return /*#__PURE__*/React.createElement(Row, {
+    gutter: [0, 8],
+    className: _className,
+    style: _style
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: labelCol
+  }, /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(styled.label.className),
+    style: styled.label.style
+  }, props.label)), /*#__PURE__*/React.createElement(Col, {
+    span: wrapperCol
+  }, props.children));
+};
+
+exports.default = Layout;

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { type ReactNode } from "react";
-import type { ContextValue } from "../types";
+import type { ContextValue } from "musae/types/form";
+import { ComponentProps } from "musae/types/element";
 /**
  * @description
  * layout props
  */
-type Props = {
+type Props = ComponentProps & {
     /**
      * @description
      * children
@@ -41,5 +42,5 @@ type Props = {
  * @description
  * item layout
  */
-declare const Layout: ({ required, space, ...props }: Props) => React.JSX.Element;
+declare const Layout: ({ required, space, className, style, ...props }: Props) => React.JSX.Element;
 export default Layout;

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

@@ -0,0 +1,77 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useContext } from 'react';
+import Context from '../context.mjs';
+import { Grid } from '../../grid/index.mjs';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { typography } from '../../theme/theme.mjs';
+import { useTheme } from '../../theme/hooks.mjs';
+import { ColorToken } from '../../../utils/colors.mjs';
+import { clsx } from '@aiszlab/relax';
+
+var _excluded = ["required", "space", "className", "style"];
+var Row = Grid.Row,
+  Col = Grid.Col;
+var styles = {
+  space: {
+    marginBottom: "musaex-1w7ha7z",
+    $$css: true
+  },
+  required: function required(props) {
+    return [{
+      "::before_content": "musaex-ilz4u6",
+      "::before_color": "musaex-gyfpa5",
+      "::before_marginRight": "musaex-gcedro",
+      "::before_marginInlineStart": null,
+      "::before_marginInlineEnd": null,
+      $$css: true
+    }, {
+      "--1g451k2": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+/**
+ * @description
+ * item layout
+ */
+var Layout = function Layout(_ref) {
+  var _props$labelCol, _props$wrapperCol;
+  var required = _ref.required,
+    space = _ref.space,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextValue = useContext(Context);
+  var labelCol = (_props$labelCol = props.labelCol) !== null && _props$labelCol !== void 0 ? _props$labelCol : contextValue.labelCol;
+  var wrapperCol = (_props$wrapperCol = props.wrapperCol) !== null && _props$wrapperCol !== void 0 ? _props$wrapperCol : contextValue.wrapperCol;
+  var theme = useTheme();
+  var styled = {
+    item: _stylex.props(!!space && styles.space),
+    label: _stylex.props(required && styles.required({
+      color: theme.colors[ColorToken.Error]
+    }), typography.label.small)
+  };
+  var isLabeled = !!labelCol && !!props.label;
+  var _className = clsx(className, styled.item.className);
+  var _style = _objectSpread(_objectSpread({}, styled.item.style), style);
+  if (!isLabeled) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: _className,
+      style: _style
+    }, props.children);
+  }
+  return /*#__PURE__*/React.createElement(Row, {
+    gutter: [0, 8],
+    className: _className,
+    style: _style
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: labelCol
+  }, /*#__PURE__*/React.createElement("span", {
+    className: clsx(styled.label.className),
+    style: styled.label.style
+  }, props.label)), /*#__PURE__*/React.createElement(Col, {
+    span: wrapperCol
+  }, props.children));
+};
+
+export { Layout as default };

package/dist/components/form/form.cjs

@@ -0,0 +1,55 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var relax = require('@aiszlab/relax');
+var context = require('./context.cjs');
+var hooks = require('./hooks.cjs');
+
+var _excluded = ["onSubmit", "onChange", "labelCol", "wrapperCol", "children", "className", "style"];
+var Form = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange,
+    labelCol = _ref.labelCol,
+    wrapperCol = _ref.wrapperCol,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  /// use react hook form
+  var form = hooks.useForm(props.form);
+  React.useImperativeHandle(ref, function () {
+    return form;
+  });
+  var submit = form.handleSubmit(function (values) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(values);
+  });
+  relax.useMounted(function () {
+    var watched = form.watch(function (values, _ref2) {
+      var type = _ref2.type;
+      type === "change" && (onChange === null || onChange === void 0 ? void 0 : onChange(values));
+    });
+    return function () {
+      watched.unsubscribe();
+    };
+  });
+  /// context value
+  var contextValue = React.useMemo(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, context.CONTEXT_VALUE), !!labelCol && {
+      labelCol: labelCol
+    }), !!wrapperCol && {
+      wrapperCol: wrapperCol
+    });
+  }, [labelCol, wrapperCol]);
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(reactHookForm.FormProvider, _objectSpread({}, form), /*#__PURE__*/React.createElement("form", {
+    className: className,
+    style: style,
+    onSubmit: submit
+  }, children)));
+});
+
+exports.default = Form;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FormProps } from "./types";
+import type { FormProps } from "musae/types/form";
 import { type FieldValues, UseFormReturn } from "react-hook-form";
 declare const Form: React.ForwardRefExoticComponent<FormProps<FieldValues> & React.RefAttributes<UseFormReturn<FieldValues>>>;
 export default Form;

package/dist/components/form/{form.js → form.mjs}

@@ -3,8 +3,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { useMounted } from '@aiszlab/relax';
-import Context, { CONTEXT_VALUE } from './context.js';
-import { useForm } from './hooks.js';
+import Context, { CONTEXT_VALUE } from './context.mjs';
+import { useForm } from './hooks.mjs';
 
 var _excluded = ["onSubmit", "onChange", "labelCol", "wrapperCol", "children", "className", "style"];
 var Form = /*#__PURE__*/forwardRef(function (_ref, ref) {

package/dist/components/form/hooks.cjs

@@ -0,0 +1,14 @@
+var reactHookForm = require('react-hook-form');
+
+/**
+ * @description
+ * form hook api
+ */
+var useForm = function useForm(usedForm) {
+  var form = reactHookForm.useForm({
+    mode: "all"
+  });
+  return usedForm !== null && usedForm !== void 0 ? usedForm : form;
+};
+
+exports.useForm = useForm;

package/dist/components/form/index.cjs

@@ -0,0 +1,10 @@
+var form = require('./form.cjs');
+var item = require('./item.cjs');
+var hooks = require('./hooks.cjs');
+
+var Form = Object.assign(form.default, {
+  Item: item.default,
+  useForm: hooks.useForm
+});
+
+exports.Form = Form;

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

@@ -1,5 +1,2 @@
-import type { FieldValues, UseFormReturn } from "react-hook-form";
-import type { TypedForm } from "./types";
+import type { TypedForm } from "musae/types/form";
 export declare const Form: TypedForm;
-type FormRef<T extends FieldValues = FieldValues> = UseFormReturn<T>;
-export { FormRef };

package/dist/components/form/index.mjs

@@ -0,0 +1,10 @@
+import Form$1 from './form.mjs';
+import Item from './item.mjs';
+import { useForm } from './hooks.mjs';
+
+var Form = Object.assign(Form$1, {
+  Item: Item,
+  useForm: useForm
+});
+
+export { Form };

package/dist/components/form/item.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var field = require('./field/field.cjs');
+var layout = require('./field/layout.cjs');
+
+var _excluded = ["required"];
+/**
+ * @description
+ * item render
+ */
+var Item = function Item(_ref) {
+  var _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (props.name) {
+    return /*#__PURE__*/React.createElement(field.default, _objectSpread(_objectSpread({}, props), {}, {
+      name: props.name,
+      required: required
+    }));
+  }
+  return /*#__PURE__*/React.createElement(layout.default, {
+    label: props.label,
+    labelCol: props.labelCol,
+    wrapperCol: props.wrapperCol,
+    required: required,
+    className: props.className,
+    style: props.style,
+    space: true
+  }, props.children);
+};
+
+exports.default = Item;

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

@@ -1,4 +1,4 @@
-import { FormItemProps } from "./types";
+import { FormItemProps } from "musae/types/form";
 import React from "react";
 import type { FieldValues } from "react-hook-form";
 /**

package/dist/components/form/{item.js → item.mjs}

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React from 'react';
-import Field from './field/field.js';
-import Layout from './field/layout.js';
+import Field from './field/field.mjs';
+import Layout from './field/layout.mjs';
 
 var _excluded = ["required"];
 /**
@@ -24,6 +24,8 @@ var Item = function Item(_ref) {
     labelCol: props.labelCol,
     wrapperCol: props.wrapperCol,
     required: required,
+    className: props.className,
+    style: props.style,
     space: true
   }, props.children);
 };

package/dist/components/grid/col.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  col: function col(props) {
+    return [{
+      gridColumnStart: "musaex-8a1x49",
+      gridColumnEnd: "musaex-4qzwkw",
+      $$css: true
+    }, {
+      "--gridColumnEnd": "span ".concat(props.span) != null ? "span ".concat(props.span) : "initial"
+    }];
+  }
+};
+var Col = function Col(_ref) {
+  var children = _ref.children,
+    className$1 = _ref.className,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? 8 : _ref$span,
+    _ref$as = _ref.as,
+    As = _ref$as === void 0 ? "div" : _ref$as,
+    style = _ref.style;
+  var styled = stylex.default.props(styles.col({
+    span: span
+  }));
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Grid);
+  return /*#__PURE__*/React.createElement(As, {
+    className: relax.clsx(classNames[className.GridClassToken.Col], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children);
+};
+
+exports.default = Col;

package/dist/components/grid/{col.js → col.mjs}

@@ -1,10 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { GridClassToken } from '../../utils/class-name.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { GridClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   col: function col(props) {
@@ -25,7 +25,7 @@ var Col = function Col(_ref) {
     _ref$as = _ref.as,
     As = _ref$as === void 0 ? "div" : _ref$as,
     style = _ref.style;
-  var styled = props(styles.col({
+  var styled = _stylex.props(styles.col({
     span: span
   }));
   var classNames = useClassNames(ComponentToken.Grid);

package/dist/components/grid/index.cjs

@@ -0,0 +1,9 @@
+var row = require('./row.cjs');
+var col = require('./col.cjs');
+
+var Grid = {
+  Row: row.default,
+  Col: col.default
+};
+
+exports.Grid = Grid;

package/dist/components/grid/{index.js → index.mjs}

@@ -1,5 +1,5 @@
-import Row from './row.js';
-import Col from './col.js';
+import Row from './row.mjs';
+import Col from './col.mjs';
 
 var Grid = {
   Row: Row,

package/dist/components/grid/row.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useGutters = require('../../hooks/use-gutters.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  row: function row(props) {
+    return [{
+      display: "musaex-rvj5dj",
+      gridTemplateColumns: "musaex-1aeqsfb",
+      columnGap: "musaex-4rvf3u",
+      rowGap: "musaex-m8a6f2",
+      justifyItems: "musaex-167rj3e",
+      alignItems: "musaex-1bdtpbn",
+      $$css: true
+    }, {
+      "--columnGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.columnGap),
+      "--rowGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.rowGap),
+      "--justifyItems": props.justify != null ? props.justify : "initial",
+      "--alignItems": props.align != null ? props.align : "initial"
+    }];
+  }
+};
+var Row = function Row(_ref) {
+  var align = _ref.align,
+    children = _ref.children,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 0 : _ref$gutter,
+    justify = _ref.justify,
+    className$1 = _ref.className,
+    _ref$as = _ref.as,
+    As = _ref$as === void 0 ? "div" : _ref$as,
+    style = _ref.style;
+  /// col and row gap in grid
+  var _useGutters = useGutters.useGutters({
+      gutter: gutter
+    }),
+    _useGutters2 = _slicedToArray(_useGutters, 2),
+    columnGap = _useGutters2[0],
+    rowGap = _useGutters2[1];
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Grid);
+  var styled = stylex.default.props(styles.row({
+    columnGap: columnGap,
+    rowGap: rowGap,
+    justify: justify,
+    align: align
+  }));
+  return /*#__PURE__*/React.createElement(As, {
+    className: relax.clsx(classNames[className.GridClassToken.Row], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children);
+};
+
+exports.default = Row;

package/dist/components/grid/{row.js → row.mjs}

@@ -1,12 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { GridClassToken } from '../../utils/class-name.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { GridClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-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';
-import { ComponentToken } from '../../utils/component-token.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useGutters } from '../../hooks/use-gutters.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   row: function row(props) {
@@ -48,7 +48,7 @@ var Row = function Row(_ref) {
     columnGap = _useGutters2[0],
     rowGap = _useGutters2[1];
   var classNames = useClassNames(ComponentToken.Grid);
-  var styled = props(styles.row({
+  var styled = _stylex.props(styles.row({
     columnGap: columnGap,
     rowGap: rowGap,
     justify: justify,

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 import type { Gutter } from "../../hooks/use-gutters";
 export interface RowProps extends ComponentProps {
     /**