function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useMemo } from "react";
import Box from "../../atoms/box/box";
import { pearl } from "../../../pearl";
const BaseProgress = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  atoms
}, ref) => {
  const {
    value,
    ...otherContainerProps
  } = atoms.container;
  const calculatedWidth = useMemo(() => `${value || 0}%`, [value]);
  return /*#__PURE__*/React.createElement(Box, _extends({}, otherContainerProps, {
    ref: ref,
    accessible: true,
    accessibilityRole: "progressbar",
    accessibilityLabel: otherContainerProps.accessibilityLabel
  }), /*#__PURE__*/React.createElement(Box, _extends({}, atoms.bar, {
    animate: {
      w: calculatedWidth
    },
    borderRadius: value === 100 ? atoms.bar.borderTopLeftRadius : undefined
  })));
}));

/** The Progress component is a visual indicator of completion percentage. */
const Progress = pearl(BaseProgress, {
  componentName: "Progress",
  type: "molecule",
  animatable: true
}, undefined, {
  partForOverridenAnimationProps: "container",
  partForOverridenNativeProps: "container",
  partForOverridenStyleProps: "container"
});
Progress.displayName = "Progress";
export default Progress;
//# sourceMappingURL=progress.js.map