musae 0.2.26 → 0.3.0

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

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
-import _List from './list.js';
-import Context from './context.js';
+import _List from './list.mjs';
+import Context from './context.mjs';
 import { useTogglable } from '@aiszlab/relax';
-import { useExpandedKeys, useSelectedKeys } from './hooks.js';
+import { useExpandedKeys, useSelectedKeys } from './hooks.mjs';
 
 var Tree = function Tree(_ref) {
   var className = _ref.className,
@@ -62,6 +62,5 @@ var Tree = function Tree(_ref) {
     style: style
   }));
 };
-var Tree$1 = Tree;
 
-export { Tree$1 as default };
+export { Tree as default };

package/dist/components/upload/upload.cjs

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var keyboard = require('../../utils/keyboard.cjs');
+var uploadeds = require('./uploadeds.cjs');
+
+var Upload = function Upload(_ref) {
+  var _onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    multiple = _ref.multiple,
+    _children = _ref.children,
+    uploader = _ref.uploader,
+    onError = _ref.onError;
+  var inputRef = React.useRef(null);
+  var uploadedsRef = React.useRef(null);
+  // file upload
+  var upload = relax.useEvent(function (files) {
+    files.forEach(function (file) {
+      var _uploadedsRef$current;
+      (_uploadedsRef$current = uploadedsRef.current) === null || _uploadedsRef$current === void 0 || _uploadedsRef$current.add(file);
+    });
+  });
+  var onChange = relax.useEvent(function (e) {
+    var files = e.target.files;
+    if (!files) return;
+    upload(Array.from(files));
+  });
+  var onClick = relax.useEvent(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
+    _onClick === null || _onClick === void 0 || _onClick();
+  });
+  var onKeyDown = relax.useEvent(function (e) {
+    if (e.key !== keyboard.Keyboard.Enter) return;
+    onClick();
+  });
+  var onDrop = function onDrop(e) {
+    var files = Array.from(e.dataTransfer.files).filter(function (_, index) {
+      // only one file when not multiple
+      if (!multiple && index > 0) return false;
+      return true;
+    });
+    upload(files);
+  };
+  var styled = {
+    input: {
+      className: "musaex-1s85apg"
+    }
+  };
+  var children = React.useMemo(function () {
+    // @ts-ignore
+    return /*#__PURE__*/React.cloneElement(_children, {
+      disabled: disabled
+    });
+  }, [_children, disabled]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onDrop: onDrop,
+    onDragOver: onDrop
+  }), /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "file",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    className: styled.input.className,
+    style: styled.input.style,
+    multiple: multiple,
+    onChange: onChange
+  }), children), /*#__PURE__*/React.createElement(uploadeds.default, {
+    ref: uploadedsRef,
+    uploader: uploader,
+    onError: onError
+  }));
+};
+
+exports.default = Upload;

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

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import { useEvent } from '@aiszlab/relax';
-import { Keyboard } from '../../utils/keyboard.js';
-import Uploadeds from './uploadeds.js';
+import { Keyboard } from '../../utils/keyboard.mjs';
+import Uploadeds from './uploadeds.mjs';
 
 var Upload = function Upload(_ref) {
   var _onClick = _ref.onClick,
@@ -74,6 +74,5 @@ var Upload = function Upload(_ref) {
     onError: onError
   }));
 };
-var Upload$1 = Upload;
 
-export { Upload$1 as default };
+export { Upload as default };

package/dist/components/upload/uploadeds.cjs

@@ -0,0 +1,116 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var loading = require('../icon/icons/mock/loading.cjs');
+var clear = require('../icon/icons/content/clear.cjs');
+
+var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var uploader = _ref.uploader,
+    onError = _ref.onError;
+  var _useState = React.useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _counter = React.useRef(0);
+  var loaded = relax.useEvent(function (id, status) {
+    // update uploaded list status
+    setItems(function (_items) {
+      var current = _items.get(id);
+      if (!current) return _items;
+      return new Map(_items).set(id, _objectSpread(_objectSpread({}, current), {}, {
+        status: status
+      }));
+    });
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      add: function () {
+        var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
+          var hasUploader, status, id, url;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                hasUploader = !!uploader;
+                status = hasUploader ? "loading" : "success"; // push current file
+                id = _counter.current++;
+                setItems(function (items) {
+                  return new Map(items).set(id, {
+                    file: file,
+                    status: status
+                  });
+                });
+                // call request by user provided
+                if (hasUploader) {
+                  _context.next = 6;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 6:
+                _context.next = 8;
+                return uploader(file)["catch"](function (error) {
+                  loaded(id, "error");
+                  onError === null || onError === void 0 || onError(error);
+                  return null;
+                });
+              case 8:
+                url = _context.sent;
+                if (url) {
+                  _context.next = 11;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 11:
+                loaded(id, "success");
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function add(_x) {
+          return _add.apply(this, arguments);
+        }
+        return add;
+      }()
+    };
+  });
+  var remove = relax.useEvent(function (id) {
+    setItems(function (_items) {
+      var next = new Map(_items);
+      next["delete"](id);
+      return next;
+    });
+  });
+  var styled = {
+    uploadeds: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-4ttznp"
+    },
+    item: {
+      className: "musaex-78zum5 musaex-6s0dn4 musaex-1lsrmdg"
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.uploadeds.className,
+    style: styled.uploadeds.style
+  }, Array.from(items.entries()).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      item = _ref3[1];
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: styled.item.className,
+      style: styled.item.style
+    }, /*#__PURE__*/React.createElement(loading.default, null), item.file.name, /*#__PURE__*/React.createElement(clear.default, {
+      onClick: function onClick() {
+        return remove(key);
+      }
+    }));
+  }));
+});
+
+exports.default = Uploadeds;

package/dist/components/upload/{uploadeds.js → uploadeds.mjs}

@@ -4,8 +4,8 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useState, useRef, useImperativeHandle } from 'react';
 import { useEvent } from '@aiszlab/relax';
-import Clear from '../icon/icons/content/clear.js';
-import Loading from '../icon/icons/mock/loading.js';
+import Loading from '../icon/icons/mock/loading.mjs';
+import Redo from '../icon/icons/content/clear.mjs';
 
 var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var uploader = _ref.uploader,
@@ -103,7 +103,7 @@ var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
       key: key,
       className: styled.item.className,
       style: styled.item.style
-    }, /*#__PURE__*/React.createElement(Loading, null), item.file.name, /*#__PURE__*/React.createElement(Clear, {
+    }, /*#__PURE__*/React.createElement(Loading, null), item.file.name, /*#__PURE__*/React.createElement(Redo, {
       onClick: function onClick() {
         return remove(key);
       }

package/dist/components/visually-hidden/visually-hidden.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 componentToken = require('../../utils/component-token.cjs');
+
+var VisuallyHidden = function VisuallyHidden(_ref) {
+  var children = _ref.children;
+  var styled = {
+    className: "musaex-1k7lhcj musaex-18eqiv3 musaex-9qdtsz musaex-10l6tqk musaex-zpqnlu"
+  };
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.VisuallyHidden);
+  return /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.VisuallyHiddenClassToken.VisuallyHidden], styled.className),
+    style: styled.style
+  }, children);
+};
+
+exports.default = VisuallyHidden;

package/dist/components/visually-hidden/{visually-hidden.js → visually-hidden.mjs}

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { VisuallyHiddenClassToken } from '../../utils/class-name.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { VisuallyHiddenClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var VisuallyHidden = function VisuallyHidden(_ref) {
   var children = _ref.children;
@@ -15,6 +15,5 @@ var VisuallyHidden = function VisuallyHidden(_ref) {
     style: styled.style
   }, children);
 };
-var VisuallyHidden$1 = VisuallyHidden;
 
-export { VisuallyHidden$1 as default };
+export { VisuallyHidden as default };

package/dist/components/waterfall/hooks.cjs

@@ -0,0 +1,60 @@
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * repaint child
+ */
+var useRepaint = function useRepaint(_ref) {
+  var columns = _ref.columns,
+    rowGap = _ref.rowGap;
+  var items = React.useRef(new Map());
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    maxHeight = _useState2[0],
+    setMaxHeight = _useState2[1];
+  var _useState3 = React.useState(new Map()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    orders = _useState4[0],
+    setOrders = _useState4[1];
+  var collect = React.useCallback(function (index, ref) {
+    items.current.set(index, ref);
+  }, []);
+  var repaint = relax.useEvent(function () {
+    // only 1 columns, no need to repaint, just display as flex
+    if (columns <= 1) return;
+    var _Array$from$reduce = Array.from(items.current.entries()).reduce(function (prev, _ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          index = _ref3[0],
+          child = _ref3[1];
+        if (!child) return prev;
+        var childHeight = child.getBoundingClientRect().height;
+        var order = prev[0].indexOf(Math.min.apply(Math, _toConsumableArray(prev[0])));
+        // count
+        prev[0][order] = prev[0][order] + (prev[0][order] && rowGap) + childHeight;
+        // set order for render
+        prev[1].set(index, order + 1);
+        return prev;
+      }, [new Array(columns).fill(0), new Map()]),
+      _Array$from$reduce2 = _slicedToArray(_Array$from$reduce, 2),
+      columnHeights = _Array$from$reduce2[0],
+      _orders = _Array$from$reduce2[1];
+    setMaxHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
+    setOrders(_orders);
+  });
+  var order = React.useCallback(function (index) {
+    var _orders$get;
+    return (_orders$get = orders.get(index)) !== null && _orders$get !== void 0 ? _orders$get : null;
+  }, [orders]);
+  return {
+    maxHeight: maxHeight,
+    collect: collect,
+    order: order,
+    items: items,
+    repaint: repaint
+  };
+};
+
+exports.useRepaint = useRepaint;

package/dist/components/waterfall/sequential.cjs

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+
+var styles = {
+  column: function column(props) {
+    return [{
+      flex: "musaex-98rzlu",
+      flexGrow: null,
+      flexShrink: null,
+      flexBasis: null,
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      rowGap: "musaex-m8a6f2",
+      overflow: "musaex-ysyzu8",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }, {
+      "--rowGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.rowGap)
+    }];
+  }
+};
+var Sequential = function Sequential(_ref) {
+  var children = _ref.children,
+    columns = _ref.columns,
+    className = _ref.className,
+    style = _ref.style,
+    rowGap = _ref.rowGap;
+  // group children into diff columns
+  // if current column do not has any child, mean this column is not need to render
+  var groupedColumns = React.useMemo(function () {
+    return children.reduce(function (_ref2, child) {
+      var _grouped$at;
+      var _ref3 = _slicedToArray(_ref2, 2),
+        grouped = _ref3[0],
+        addedIndex = _ref3[1];
+      (_grouped$at = grouped.at(addedIndex)) === null || _grouped$at === void 0 || _grouped$at.push(child);
+      var next = addedIndex + 1;
+      return [grouped, next >= columns ? 0 : next];
+    }, [Array.from({
+      length: columns
+    }, function () {
+      return [];
+    }), 0])[0].filter(function (column) {
+      return column.length > 0;
+    });
+  }, [children, columns]);
+  // convert column into react div node
+  // inject column styles
+  var _children = React.useMemo(function () {
+    var styled = stylex.default.props(styles.column({
+      rowGap: rowGap
+    }));
+    return groupedColumns.map(function (column, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styled.className,
+        style: styled.style,
+        key: index
+      }, column);
+    });
+  }, [groupedColumns, rowGap]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, _children);
+};
+
+exports.default = Sequential;

package/dist/components/waterfall/{sequential.js → sequential.mjs}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/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.mjs';
 
 var styles = {
   column: function column(props) {
@@ -51,7 +51,7 @@ var Sequential = function Sequential(_ref) {
   // convert column into react div node
   // inject column styles
   var _children = useMemo(function () {
-    var styled = props(styles.column({
+    var styled = _stylex.props(styles.column({
       rowGap: rowGap
     }));
     return groupedColumns.map(function (column, index) {

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

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

package/dist/components/waterfall/waterfall.cjs

@@ -0,0 +1,152 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var useGutters = require('../../hooks/use-gutters.cjs');
+var relax = require('@aiszlab/relax');
+var sequential = require('./sequential.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  waterfall: function waterfall(props) {
+    return [{
+      width: "musaex-1k094eu",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      flexWrap: "musaex-1a02dak",
+      alignContent: "musaex-8gbvx8",
+      height: "musaex-g7h5cd",
+      columnGap: "musaex-4rvf3u",
+      rowGap: "musaex-m8a6f2",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$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)
+    }];
+  },
+  repainted: function repainted(props) {
+    return [{
+      flexDirection: "musaex-dt5ytf",
+      height: "musaex-1jwls1v",
+      $$css: true
+    }, {
+      "--height": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.maxHeight)
+    }];
+  },
+  item: function item(props) {
+    var _props$order, _props$order2;
+    return [{
+      order: "musaex-3x427e",
+      width: "musaex-17fnjtu",
+      height: "musaex-g7h5cd",
+      $$css: true
+    }, {
+      "--order": ((_props$order = props.order) !== null && _props$order !== void 0 ? _props$order : 1) != null ? (_props$order2 = props.order) !== null && _props$order2 !== void 0 ? _props$order2 : 1 : "initial",
+      "--width": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }("calc((100% - ".concat(props.columns - 1, " * ").concat(props.columnGap, "px) / ").concat(props.columns, ")"))
+    }];
+  }
+};
+var Waterfall = function Waterfall(_ref2) {
+  var _ref2$columns = _ref2.columns,
+    columns = _ref2$columns === void 0 ? 4 : _ref2$columns,
+    _ref2$gutter = _ref2.gutter,
+    gutter = _ref2$gutter === void 0 ? 8 : _ref2$gutter,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children,
+    _ref2$sequential = _ref2.sequential,
+    sequential$1 = _ref2$sequential === void 0 ? false : _ref2$sequential,
+    className$1 = _ref2.className,
+    style = _ref2.style;
+  var _useGutters = useGutters.useGutters({
+      gutter: gutter
+    }),
+    _useGutters2 = _slicedToArray(_useGutters, 2),
+    columnGap = _useGutters2[0],
+    rowGap = _useGutters2[1];
+  var _useRepaint = hooks.useRepaint({
+      columns: columns,
+      rowGap: rowGap
+    }),
+    collect = _useRepaint.collect,
+    maxHeight = _useRepaint.maxHeight,
+    order = _useRepaint.order,
+    items = _useRepaint.items,
+    repaint = _useRepaint.repaint;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Waterfall);
+  var styled = stylex.default.props(styles.waterfall({
+    rowGap: rowGap,
+    columnGap: columnGap
+  }), !sequential$1 && maxHeight > 0 && styles.repainted({
+    maxHeight: maxHeight
+  }));
+  relax.useUpdateEffect(function () {
+    // no need to repaint when `sequential`
+    if (sequential$1) return;
+    repaint();
+  }, [rowGap]);
+  relax.useMounted(function () {
+    // no need to observer when `sequential`
+    if (sequential$1) return;
+    // observer be called when the component is mounted
+    // so in waterfall we use current time to first render
+    var resizer = new ResizeObserver(function () {
+      repaint();
+    });
+    Array.from(items.current.values()).forEach(function (node) {
+      if (!node) return;
+      resizer.observe(node);
+    });
+    return function () {
+      resizer.disconnect();
+    };
+  });
+  if (children.length === 0) return null;
+  // sequential waterfall
+  if (sequential$1) {
+    return /*#__PURE__*/React.createElement(sequential.default, {
+      columns: columns,
+      children: children,
+      rowGap: rowGap,
+      className: relax.clsx(classNames[className.WaterfallClassToken.Sequential], className$1, styled.className),
+      style: _objectSpread(_objectSpread({}, styled.style), style)
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.WaterfallClassToken.Waterfall], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children.map(function (item, index) {
+    var _stylex$props = stylex.default.props(styles.item({
+        columnGap: columnGap,
+        columns: columns,
+        order: order(index)
+      })),
+      className = _stylex$props.className,
+      style = _stylex$props.style;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: className,
+      style: style,
+      ref: function ref(_ref) {
+        collect(index, _ref);
+      }
+    }, item);
+  }));
+};
+
+exports.default = Waterfall;

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

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/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.mjs';
 import React from 'react';
-import { useRepaint } from './hooks.js';
-import { useGutters } from '../../hooks/use-gutters.js';
+import { useRepaint } from './hooks.mjs';
+import { useGutters } from '../../hooks/use-gutters.mjs';
 import { useUpdateEffect, useMounted, clsx } from '@aiszlab/relax';
-import Sequential from './sequential.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { WaterfallClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Sequential from './sequential.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { WaterfallClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   waterfall: function waterfall(props) {
@@ -87,7 +87,7 @@ var Waterfall = function Waterfall(_ref2) {
     items = _useRepaint.items,
     repaint = _useRepaint.repaint;
   var classNames = useClassNames(ComponentToken.Waterfall);
-  var styled = props(styles.waterfall({
+  var styled = _stylex.props(styles.waterfall({
     rowGap: rowGap,
     columnGap: columnGap
   }), !sequential && maxHeight > 0 && styles.repainted({
@@ -129,7 +129,7 @@ var Waterfall = function Waterfall(_ref2) {
     className: clsx(classNames[WaterfallClassToken.Waterfall], className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)
   }, children.map(function (item, index) {
-    var _stylex$props = props(styles.item({
+    var _stylex$props = _stylex.props(styles.item({
         columnGap: columnGap,
         columns: columns,
         order: order(index)
@@ -146,6 +146,5 @@ var Waterfall = function Waterfall(_ref2) {
     }, item);
   }));
 };
-var Waterfall$1 = Waterfall;
 
-export { Waterfall$1 as default };
+export { Waterfall as default };