musae 0.2.26 → 0.3.0

package/dist/components/popper/hooks.cjs

@@ -0,0 +1,187 @@
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var relax = require('@aiszlab/relax');
+var useContainer = require('../../hooks/use-container.cjs');
+var dom = require('@floating-ui/dom');
+
+/**
+ * @description
+ * offset converter
+ */
+var useOffsets = function useOffsets(_ref) {
+  var _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    arrowable = _ref.arrowable;
+  var mainAxis = typeof offset === "number" ? offset : offset.mainAxis;
+  var crossAxis = typeof offset === "number" ? 0 : offset.crossAxis;
+  var alignmentAxis = typeof offset === "number" ? null : offset.alignmentAxis;
+  return React.useMemo(function () {
+    return {
+      mainAxis: 8 + (mainAxis !== null && mainAxis !== void 0 ? mainAxis : 0) + (arrowable ? 8 : 0),
+      crossAxis: crossAxis,
+      alignmentAxis: alignmentAxis
+    };
+  }, [mainAxis, crossAxis, alignmentAxis, arrowable]);
+};
+/**
+ * @description
+ * use animation
+ */
+var useAnimation = function useAnimation(_ref2) {
+  var open = _ref2.open,
+    disappearable = _ref2.disappearable,
+    onEntered = _ref2.onEntered,
+    onExit = _ref2.onExit,
+    onExited = _ref2.onExited;
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    animatableRef = _useAnimate2[0],
+    animate = _useAnimate2[1];
+  var appear = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          animatableRef.current.style.display = "";
+          _context.next = 3;
+          return animate(animatableRef.current, {
+            opacity: 1,
+            transform: "scale(1, 1)"
+          }, {
+            duration: 0.2
+          });
+        case 3:
+          _context.next = 5;
+          return onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  var disappear = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(animatableRef.current, {
+            opacity: 0,
+            transform: "scale(0, 0)"
+          }, {
+            duration: 0.2
+          }).then(function () {
+            if (!animatableRef.current) return;
+            animatableRef.current.style.display = "none";
+          })]);
+        case 2:
+          _context2.next = 4;
+          return onExited === null || onExited === void 0 ? void 0 : onExited();
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  var _disappear = React.useCallback(function () {
+    if (!disappearable) return;
+    disappear();
+  }, [disappear, disappearable]);
+  React.useLayoutEffect(function () {
+    if (open) {
+      appear();
+      return;
+    }
+    _disappear();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return {
+    animatableRef: animatableRef,
+    disappear: disappear
+  };
+};
+/**
+ * @description
+ * floating position
+ */
+var useFloating = function useFloating(_ref5) {
+  var open = _ref5.open,
+    _trigger = _ref5.trigger,
+    placement = _ref5.placement,
+    arrowable = _ref5.arrowable,
+    _offset = _ref5.offset;
+  var floatableRef = React.useRef(null);
+  var _useContainer = useContainer.useContainer({
+      container: _trigger,
+      useBody: false
+    }, [open]),
+    trigger = _useContainer.container;
+  var arrowRef = React.useRef(null);
+  // memorized offsets
+  var offsets = useOffsets({
+    offset: _offset,
+    arrowable: arrowable
+  });
+  // auto update: calc trigger dom to get position
+  // if trigger changed, re-relate
+  React.useLayoutEffect(function () {
+    var floatable = floatableRef.current;
+    if (!trigger) return;
+    if (!floatable) return;
+    var cleanup = dom.autoUpdate(trigger, floatable, function () {
+      dom.computePosition(trigger, floatable, {
+        placement: placement,
+        middleware: [dom.flip(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
+          element: arrowRef.current,
+          padding: 16
+        }), dom.size({
+          apply: function apply(_ref6) {
+            var availableWidth = _ref6.availableWidth,
+              availableHeight = _ref6.availableHeight,
+              floating = _ref6.elements.floating;
+            floating.style.maxWidth = "".concat(availableWidth, "px");
+            floating.style.maxHeight = "".concat(availableHeight, "px");
+          }
+        })]
+      }).then(function (_ref7) {
+        var x = _ref7.x,
+          y = _ref7.y,
+          middlewareData = _ref7.middlewareData,
+          _placement = _ref7.placement;
+        var _placement$split = _placement.split("-"),
+          _placement$split2 = _slicedToArray(_placement$split, 1),
+          side = _placement$split2[0];
+        // set float element styles
+        floatable.style.translate = "".concat(x, "px ").concat(y, "px");
+        // set arrow styles
+        if (middlewareData.arrow && !!arrowRef.current) {
+          var _middlewareData$arrow, _middlewareData$arrow2;
+          var offsetY = "".concat((_middlewareData$arrow = middlewareData.arrow.y) !== null && _middlewareData$arrow !== void 0 ? _middlewareData$arrow : 0 - 8, "px");
+          var offsetX = "".concat((_middlewareData$arrow2 = middlewareData.arrow.x) !== null && _middlewareData$arrow2 !== void 0 ? _middlewareData$arrow2 : 0, "px");
+          arrowRef.current.style.insetInlineStart = offsetX;
+          side === "top" && (arrowRef.current.style.insetBlockEnd = offsetY);
+          side === "bottom" && (arrowRef.current.style.insetBlockStart = offsetY);
+        }
+      })["catch"](function () {
+        return null;
+      }).then(function () {
+        requestAnimationFrame(function () {
+          floatable.style.transitionProperty = "translate";
+          floatable.style.transitionDuration = "0.1s";
+        });
+      });
+    });
+    return function () {
+      cleanup();
+    };
+  }, [placement, trigger, offsets, arrowable]);
+  return {
+    floatableRef: floatableRef,
+    arrowRef: arrowRef
+  };
+};
+
+exports.useAnimation = useAnimation;
+exports.useFloating = useFloating;
+exports.useOffsets = useOffsets;

package/dist/components/popper/{hooks.js → hooks.mjs}

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useCallback, useLayoutEffect, useRef, useMemo } from 'react';
 import { useAnimate } from 'framer-motion';
 import { useEvent } from '@aiszlab/relax';
-import { useContainer } from '../../hooks/use-container.js';
+import { useContainer } from '../../hooks/use-container.mjs';
 import { autoUpdate, computePosition, flip, offset, arrow, size } from '@floating-ui/dom';
 
 /**

package/dist/components/popper/popper.cjs

@@ -0,0 +1,26 @@
+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 portal = require('../portal/portal.cjs');
+var dropdown = require('./dropdown.cjs');
+
+var _excluded = ["destroyable", "placement", "container"];
+var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var destroyable = _ref.destroyable,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    container = _ref.container,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(portal.default, {
+    open: props.open,
+    destroyable: destroyable,
+    container: container
+  }, /*#__PURE__*/React.createElement(dropdown.default, _objectSpread(_objectSpread({}, props), {}, {
+    placement: placement,
+    ref: ref
+  })));
+});
+
+exports.default = Popper;

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

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef } from 'react';
-import Portal from '../portal/portal.js';
-import Dropdown from './dropdown.js';
+import Portal from '../portal/portal.mjs';
+import Dropdown from './dropdown.mjs';
 
 var _excluded = ["destroyable", "placement", "container"];
 var Popper = /*#__PURE__*/forwardRef(function (_ref, ref) {

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

@@ -1,6 +1,6 @@
 import type { Nullable } from "@aiszlab/relax/types";
 import type { DOMAttributes, ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 import type { Derivable, OffsetOptions, Placement } from "@floating-ui/dom";
 import type { PortalProps } from "../portal/types";
 /**

package/dist/components/portal/portal.cjs

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var reactDom = require('react-dom');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var useContainer = require('../../hooks/use-container.cjs');
+
+var Portal = function Portal(_ref) {
+  var children = _ref.children,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? true : _ref$open,
+    _ref$destroyable = _ref.destroyable,
+    destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable,
+    _ref$lockable = _ref.lockable,
+    lockable = _ref$lockable === void 0 ? false : _ref$lockable,
+    container = _ref.container;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+  var _useContainer = useContainer.useContainer({
+      container: container
+    }),
+    _container = _useContainer.container;
+  /// if render once, and is not destroyable
+  /// anyway render
+  React.useEffect(function () {
+    if (destroyable || open) {
+      setShouldRender(open);
+    }
+  }, [destroyable, open]);
+  relax.useScrollLocker(relax.isDomUsable() && lockable && open);
+  if (!(shouldRender || open)) return null;
+  if (!_container) return null;
+  return /*#__PURE__*/reactDom.createPortal(children, _container);
+};
+
+exports.default = Portal;

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

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { createPortal } from 'react-dom';
 import { useState, useEffect } from 'react';
 import { useScrollLocker, isDomUsable } from '@aiszlab/relax';
-import { useContainer } from '../../hooks/use-container.js';
+import { useContainer } from '../../hooks/use-container.mjs';
 
 var Portal = function Portal(_ref) {
   var children = _ref.children,

package/dist/components/progress/circular.cjs

@@ -0,0 +1,86 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var hooks$1 = require('./hooks.cjs');
+
+var styles = {
+  shape: function shape(props) {
+    return [{
+      r: "musaex-1o4mt57",
+      cx: "musaex-zl3kh8",
+      cy: "musaex-1lzbkzi",
+      strokeWidth: "musaex-52r2f1",
+      strokeLinecap: "musaex-1owpc8m",
+      $$css: true
+    }, {
+      "--r": props.radius != null ? props.radius : "initial",
+      "--cx": "calc(".concat(props.radius, "px + (").concat(tokens_stylex.sizes.xxxxxsmall, " / 2))") != null ? "calc(".concat(props.radius, "px + (").concat(tokens_stylex.sizes.xxxxxsmall, " / 2))") : "initial",
+      "--cy": "calc(".concat(props.radius, "px + (").concat(tokens_stylex.sizes.xxxxxsmall, " / 2))") != null ? "calc(".concat(props.radius, "px + (").concat(tokens_stylex.sizes.xxxxxsmall, " / 2))") : "initial"
+    }];
+  },
+  segment: function segment(props) {
+    return [{
+      strokeDasharray: "musaex-re62xb",
+      strokeDashoffset: "musaex-5ueuxw",
+      $$css: true
+    }, {
+      "--strokeDasharray": "".concat(props.perimeter, " ").concat(props.perimeter) != null ? "".concat(props.perimeter, " ").concat(props.perimeter) : "initial",
+      "--strokeDashoffset": props.offset != null ? props.offset : "initial"
+    }];
+  }
+};
+var Circular = function Circular(_ref) {
+  var _value = _ref.value;
+    _ref.className;
+    _ref.style;
+  var theme = hooks.useTheme();
+  var radius = 22;
+  var _useValue = hooks$1.useValue({
+      value: _value
+    }),
+    value = _useValue.value;
+  var _useCircular = hooks$1.useCircular({
+      value: value
+    }),
+    segmentPerimeter = _useCircular.segmentPerimeter,
+    segmentOffset = _useCircular.segmentOffset,
+    segmentRef = _useCircular.segmentRef;
+  var styled = {
+    progress: {
+      className: "musaex-9tu13d"
+    },
+    segment: stylex.default.props(styles.shape({
+      radius: radius
+    }), styles.segment({
+      perimeter: segmentPerimeter,
+      offset: segmentOffset
+    })),
+    track: stylex.default.props(styles.shape({
+      radius: radius
+    }))
+  };
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "48",
+    height: "48",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    className: styled.progress.className,
+    style: styled.progress.style
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: styled.track.className,
+    style: styled.track.style,
+    stroke: theme.colors[colors.ColorToken.PrimaryContainer]
+  }), /*#__PURE__*/React.createElement("circle", {
+    ref: segmentRef,
+    className: styled.segment.className,
+    style: styled.segment.style,
+    stroke: theme.colors[colors.ColorToken.Primary]
+  }));
+};
+
+exports.default = Circular;

package/dist/components/progress/{circular.js → circular.mjs}

@@ -1,9 +1,9 @@
 import React from 'react';
-import _stylex 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 { sizes } from '../theme/tokens.stylex.js';
-import { useValue, useCircular } from './hooks.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { sizes } from '../theme/tokens.stylex.mjs';
+import { useValue, useCircular } from './hooks.mjs';
 
 var styles = {
   shape: function shape(props) {

package/dist/components/progress/hooks.cjs

@@ -0,0 +1,48 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * count circle path
+ */
+var useCircular = function useCircular(_ref) {
+  var value = _ref.value;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    segmentPerimeter = _useState2[0],
+    setSegmentPerimeter = _useState2[1];
+  var segmentRef = React.useRef(null);
+  relax.useMount(function () {
+    var _segmentRef$current$g, _segmentRef$current;
+    setSegmentPerimeter((_segmentRef$current$g = (_segmentRef$current = segmentRef.current) === null || _segmentRef$current === void 0 ? void 0 : _segmentRef$current.getTotalLength()) !== null && _segmentRef$current$g !== void 0 ? _segmentRef$current$g : 0);
+  });
+  var segmentOffset = React.useMemo(function () {
+    return (100 - value) / 100 * segmentPerimeter;
+  }, [segmentPerimeter, value]);
+  return {
+    segmentPerimeter: segmentPerimeter,
+    segmentOffset: segmentOffset,
+    segmentRef: segmentRef
+  };
+};
+/**
+ * @description
+ * use value
+ */
+var useValue = function useValue(_ref2) {
+  var _value = _ref2.value;
+  var value = React.useMemo(function () {
+    return relax.clamp(_value, 0, 100);
+  }, [_value]);
+  var isMax = React.useMemo(function () {
+    return value === 100;
+  }, [value]);
+  return {
+    value: value,
+    isMax: isMax
+  };
+};
+
+exports.useCircular = useCircular;
+exports.useValue = useValue;

package/dist/components/progress/linear.cjs

@@ -0,0 +1,85 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var hooks$1 = require('./hooks.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  progress: function progress(props) {
+    return [{
+      width: "musaex-1k094eu",
+      height: "musaex-lbog1g",
+      backgroundColor: "musaex-q1mx2j",
+      borderRadius: "musaex-z7qqyb",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      $$css: true
+    }, {
+      "--backgroundColor": props.color != null ? props.color : "initial"
+    }];
+  },
+  segment: function segment(props) {
+    return [{
+      width: "musaex-17fnjtu",
+      height: "musaex-1xj1dsn",
+      borderRadius: "musaex-z7qqyb",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      backgroundColor: "musaex-q1mx2j",
+      $$css: true
+    }, {
+      "--width": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }("".concat(props.flex, "%")),
+      "--backgroundColor": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+var Linear = function Linear(_ref) {
+  var _value = _ref.value,
+    className$1 = _ref.className,
+    style = _ref.style;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Progress);
+  var theme = hooks.useTheme();
+  var _useValue = hooks$1.useValue({
+      value: _value
+    }),
+    value = _useValue.value;
+  var styled = {
+    progress: stylex.default.props(styles.progress({
+      color: theme.colors[colors.ColorToken.PrimaryContainer]
+    })),
+    segment: stylex.default.props(styles.segment({
+      flex: value,
+      color: theme.colors[colors.ColorToken.Primary]
+    }))
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.ProgressClassToken.Progress], className$1, styled.progress.className),
+    style: _objectSpread(_objectSpread({}, styled.progress.style), style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.ProgressClassToken.Segment], styled.segment.className),
+    style: styled.segment.style
+  }));
+};
+
+exports.default = Linear;

package/dist/components/progress/{linear.js → linear.mjs}

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-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 { ProgressClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ProgressClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useValue } from './hooks.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useValue } from './hooks.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   progress: function progress(props) {

package/dist/components/progress/progress.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var linear = require('./linear.cjs');
+var circular = require('./circular.cjs');
+
+var Progress = function Progress(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "linear" : _ref$variant,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value;
+  if (variant === "circular") {
+    return /*#__PURE__*/React.createElement(circular.default, {
+      value: value
+    });
+  }
+  return /*#__PURE__*/React.createElement(linear.default, {
+    value: value
+  });
+};
+
+exports.default = Progress;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import Linear from './linear.js';
-import Circular from './circular.js';
+import Linear from './linear.mjs';
+import Circular from './circular.mjs';
 
 var Progress = function Progress(_ref) {
   var _ref$variant = _ref.variant,
@@ -16,6 +16,5 @@ var Progress = function Progress(_ref) {
     value: value
   });
 };
-var Progress$1 = Progress;
 
-export { Progress$1 as default };
+export { Progress as default };

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

@@ -1,5 +1,5 @@
 import { RequiredIn } from "@aiszlab/relax/types";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 type Variant = "linear" | "circular";
 /**
  * @description

package/dist/components/quote/quote.cjs

@@ -0,0 +1,30 @@
+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 componentToken = require('../../utils/component-token.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
+var styles = require('./styles.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+
+var Quote = function Quote(_ref) {
+  var className$1 = _ref.className,
+    children = _ref.children,
+    style = _ref.style;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Quote);
+  var theme$1 = hooks.useTheme();
+  var styled = stylex.default.props(styles.default.variables({
+    outlineColor: theme$1.colors[colors.ColorToken.Outline]
+  }), styles.default.quote, theme.typography.body.small);
+  return /*#__PURE__*/React.createElement("blockquote", {
+    className: relax.clsx(classNames[className.QuoteClassToken.Quote], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, /*#__PURE__*/React.createElement("span", null, children));
+};
+
+exports.default = Quote;

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

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 import { clsx } from '@aiszlab/relax';
-import { QuoteClassToken } from '../../utils/class-name.js';
-import styles from './styles.js';
-import _stylex 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 { QuoteClassToken } from '../../utils/class-name.mjs';
+import styles from './styles.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { typography } from '../theme/theme.mjs';
 
 var Quote = function Quote(_ref) {
   var className = _ref.className,
@@ -24,6 +24,5 @@ var Quote = function Quote(_ref) {
     style: _objectSpread(_objectSpread({}, styled.style), style)
   }, /*#__PURE__*/React.createElement("span", null, children));
 };
-var Quote$1 = Quote;
 
-export { Quote$1 as default };
+export { Quote as default };