@helpdice/ui 1.1.0 → 1.1.1

package/dist/index.js

@@ -1721,7 +1721,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$1o = ["children"];
+var _excluded$1p = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1731,7 +1731,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1o);
+      props = _objectWithoutProperties(_ref, _excluded$1p);
     var _useTheme = useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1814,7 +1814,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$1n = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var _excluded$1o = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1854,7 +1854,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === undefined ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded$1n);
+    props = _objectWithoutProperties(_ref, _excluded$1o);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2002,7 +2002,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$1m = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded$1n = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -2022,7 +2022,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$resize = _ref.resize,
     resize = _ref$resize === undefined ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$1m);
+    props = _objectWithoutProperties(_ref, _excluded$1n);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2122,11 +2122,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$1l = ["hideToggle", "children"];
+var _excluded$1m = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1l);
+    props = _objectWithoutProperties(_ref, _excluded$1m);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -2288,7 +2288,7 @@ var useResize = function useResize(callback) {
   }, []);
 };
 
-var _excluded$1k = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+var _excluded$1l = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
 var CssTransition = function CssTransition(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -2303,7 +2303,7 @@ var CssTransition = function CssTransition(_ref) {
     clearTime = _ref$clearTime === undefined ? 60 : _ref$clearTime,
     _ref$name = _ref.name,
     name = _ref$name === undefined ? 'transition' : _ref$name,
-    props = _objectWithoutProperties(_ref, _excluded$1k);
+    props = _objectWithoutProperties(_ref, _excluded$1l);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -2623,7 +2623,7 @@ var AutoCompleteEmpty = function AutoCompleteEmpty(_ref) {
 };
 AutoCompleteEmpty.displayName = 'AutoCompleteEmpty';
 
-var _excluded$1j = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$1k = ["children", "type", "color", "className", "spaceRatio"];
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -2643,7 +2643,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
     className = _ref$className === undefined ? '' : _ref$className,
     _ref$spaceRatio = _ref.spaceRatio,
     spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$1j);
+    props = _objectWithoutProperties(_ref, _excluded$1k);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -12454,7 +12454,7 @@ const UserX = ({ color, strokeWidth, set }) => {
 UserX.displayName = "UserX";
 createIcon(UserX);
 
-var _excluded$1i = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+var _excluded$1j = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
 var childrenToOptionsNode = function childrenToOptionsNode(options) {
   return options.map(function (item, index) {
     var key = "auto-complete-item-".concat(index);
@@ -12502,7 +12502,7 @@ var AutoCompleteComponent = /*#__PURE__*/React.forwardRef(function (_ref, userRe
     _ref$disableFreeSolo = _ref.disableFreeSolo,
     disableFreeSolo = _ref$disableFreeSolo === undefined ? false : _ref$disableFreeSolo,
     getPopupContainer = _ref.getPopupContainer,
-    props = _objectWithoutProperties(_ref, _excluded$1i);
+    props = _objectWithoutProperties(_ref, _excluded$1j);
   var resetTimer = React.useRef();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
@@ -12644,7 +12644,7 @@ AutoCompleteComponent.Option = AutoCompleteItemComponent;
 AutoCompleteComponent.Searching = AutoCompleteSearch;
 AutoCompleteComponent.Empty = AutoCompleteEmpty;
 
-var _excluded$1h = ["src", "stacked", "text", "isSquare", "className"];
+var _excluded$1i = ["src", "stacked", "text", "isSquare", "className"];
 
 // type NativeAttrs = Omit<
 //   Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>,
@@ -12665,7 +12665,7 @@ var AvatarComponent = function AvatarComponent(_ref) {
     isSquare = _ref$isSquare === undefined ? false : _ref$isSquare,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1h);
+    props = _objectWithoutProperties(_ref, _excluded$1i);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -12715,7 +12715,7 @@ var AvatarGroup = withScale(AvatarGroupComponent);
 
 Avatar.Group = AvatarGroup;
 
-var _excluded$1g = ["type", "className", "children", "dot"];
+var _excluded$1h = ["type", "className", "children", "dot"];
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
     "default": palette.foreground,
@@ -12734,7 +12734,7 @@ var BadgeComponent = function BadgeComponent(_ref) {
     children = _ref.children,
     _ref$dot = _ref.dot,
     dot = _ref$dot === undefined ? false : _ref$dot,
-    props = _objectWithoutProperties(_ref, _excluded$1g);
+    props = _objectWithoutProperties(_ref, _excluded$1h);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -12935,7 +12935,7 @@ var LinkIconComponent = function LinkIconComponent() {
 LinkIconComponent.displayName = 'GeistLinkIcon';
 var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
 
-var _excluded$1f = ["href", "showColor", "underline", "children", "className", "block", "icon"];
+var _excluded$1g = ["href", "showColor", "underline", "children", "className", "block", "icon"];
 var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
     href = _ref$href === undefined ? '' : _ref$href,
@@ -12950,7 +12950,7 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     block = _ref$block === undefined ? false : _ref$block,
     _ref$icon = _ref.icon,
     icon = _ref$icon === undefined ? false : _ref$icon,
-    props = _objectWithoutProperties(_ref, _excluded$1f);
+    props = _objectWithoutProperties(_ref, _excluded$1g);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -12973,7 +12973,7 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);
 
-var _excluded$1e = ["href", "nextLink", "onClick", "children", "className"];
+var _excluded$1f = ["href", "nextLink", "onClick", "children", "className"];
 var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var href = _ref.href,
     _ref$nextLink = _ref.nextLink,
@@ -12982,7 +12982,7 @@ var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1e);
+    props = _objectWithoutProperties(_ref, _excluded$1f);
   var isLink = React.useMemo(function () {
     return href !== undefined || nextLink;
   }, [href, nextLink]);
@@ -13079,7 +13079,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
 };
 ButtonLoading.displayName = 'GeistButtonLoading';
 
-var _excluded$1d = ["isRight", "isSingle", "children", "className"];
+var _excluded$1e = ["isRight", "isSingle", "children", "className"];
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === undefined ? false : _ref$isRight,
@@ -13087,7 +13087,7 @@ var ButtonIcon = function ButtonIcon(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1d);
+    props = _objectWithoutProperties(_ref, _excluded$1e);
   var classes = useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -13334,7 +13334,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1c = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
@@ -13380,7 +13380,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
     filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1c);
+    var props = _objectWithoutProperties(filteredProps, _excluded$1d);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   var _useMemo = React.useMemo(function () {
@@ -13554,7 +13554,7 @@ var useButtonDropdown = function useButtonDropdown() {
   return React.useContext(ButtonDropdownContext);
 };
 
-var _excluded$1b = ["children", "onClick", "className", "main", "icon", "type"];
+var _excluded$1c = ["children", "onClick", "className", "main", "icon", "type"];
 var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
   var children = _ref.children,
     _ref$onClick = _ref.onClick,
@@ -13565,7 +13565,7 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
     main = _ref$main === undefined ? false : _ref$main,
     icon = _ref.icon,
     selfType = _ref.type,
-    props = _objectWithoutProperties(_ref, _excluded$1b);
+    props = _objectWithoutProperties(_ref, _excluded$1c);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -13602,7 +13602,7 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
 };
 ButtonDropdownItem.displayName = 'ButtonDropdownItem';
 
-var _excluded$1a = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
+var _excluded$1b = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
 var stopPropagation$1 = function stopPropagation(event) {
   event.stopPropagation();
   event.nativeEvent.stopImmediatePropagation();
@@ -13620,7 +13620,7 @@ var ButtonDropdownComponent = function ButtonDropdownComponent(_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === undefined ? false : _ref$loading,
     icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded$1a);
+    props = _objectWithoutProperties(_ref, _excluded$1b);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var ref = React.useRef(null);
@@ -13694,7 +13694,7 @@ var ButtonDropdown = withScale(ButtonDropdownComponent);
 /* "use client" */
 ButtonDropdown.Item = ButtonDropdownItem;
 
-var _excluded$19 = ["disabled", "type", "ghost", "vertical", "children", "className"];
+var _excluded$1a = ["disabled", "type", "ghost", "vertical", "children", "className"];
 var getGroupBorderColors = function getGroupBorderColors(palette, props) {
   var _props$ghost = props.ghost,
     ghost = _props$ghost === undefined ? false : _props$ghost,
@@ -13721,7 +13721,7 @@ var ButtonGroupComponent = function ButtonGroupComponent(groupProps) {
     vertical = groupProps.vertical,
     children = groupProps.children,
     className = groupProps.className,
-    props = _objectWithoutProperties(groupProps, _excluded$19);
+    props = _objectWithoutProperties(groupProps, _excluded$1a);
   var initialValue = React.useMemo(function () {
     return {
       disabled: disabled,
@@ -13778,7 +13778,7 @@ var useProportions = function useProportions(value, max) {
   }, [value, max, maxFixed]);
 };
 
-var _excluded$18 = ["value", "limit", "color", "className"];
+var _excluded$19 = ["value", "limit", "color", "className"];
 var getColor$3 = function getColor(val, palette) {
   if (val < 33) return palette.cyan;
   if (val < 66) return palette.warning;
@@ -13792,7 +13792,7 @@ var CapacityComponent = function CapacityComponent(_ref) {
     userColor = _ref.color,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$18);
+    props = _objectWithoutProperties(_ref, _excluded$19);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -13869,14 +13869,14 @@ var getStyles$1 = function getStyles(type, palette, isShadow) {
   });
 };
 
-var _excluded$17 = ["children", "className", "disableAutoMargin"];
+var _excluded$18 = ["children", "className", "disableAutoMargin"];
 var CardFooterComponent = function CardFooterComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     _ref$disableAutoMargi = _ref.disableAutoMargin,
     disableAutoMargin = _ref$disableAutoMargi === undefined ? false : _ref$disableAutoMargi,
-    props = _objectWithoutProperties(_ref, _excluded$17);
+    props = _objectWithoutProperties(_ref, _excluded$18);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -13893,12 +13893,12 @@ var CardFooterComponent = function CardFooterComponent(_ref) {
 CardFooterComponent.displayName = 'CardFooter';
 var CardFooter = withScale(CardFooterComponent);
 
-var _excluded$16 = ["className", "children"];
+var _excluded$17 = ["className", "children"];
 var CardContentComponent = function CardContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$16);
+    props = _objectWithoutProperties(_ref, _excluded$17);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
@@ -13911,11 +13911,11 @@ var CardContentComponent = function CardContentComponent(_ref) {
 CardContentComponent.displayName = 'CardContent';
 var CardContent = withScale(CardContentComponent);
 
-var _excluded$15 = ["opacity"];
+var _excluded$16 = ["opacity"];
 var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === undefined ? 0.5 : _ref$opacity,
-    props = _objectWithoutProperties(_ref, _excluded$15);
+    props = _objectWithoutProperties(_ref, _excluded$16);
   var theme = useTheme();
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton")
@@ -13941,7 +13941,7 @@ var getHostFromUrl = function getHostFromUrl(url) {
   }
 };
 
-var _excluded$14 = ["src", "disableSkeleton", "className", "maxDelay"];
+var _excluded$15 = ["src", "disableSkeleton", "className", "maxDelay"];
 var ImageComponent = function ImageComponent(_ref) {
   var src = _ref.src,
     _ref$disableSkeleton = _ref.disableSkeleton,
@@ -13950,7 +13950,7 @@ var ImageComponent = function ImageComponent(_ref) {
     className = _ref$className === undefined ? '' : _ref$className,
     _ref$maxDelay = _ref.maxDelay,
     maxDelay = _ref$maxDelay === undefined ? 3000 : _ref$maxDelay,
-    props = _objectWithoutProperties(_ref, _excluded$14);
+    props = _objectWithoutProperties(_ref, _excluded$15);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
     getScaleProps = _useScale.getScaleProps;
@@ -14046,7 +14046,7 @@ var getBrowserColors = function getBrowserColors(invert, palette) {
   };
 };
 
-var _excluded$13 = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
+var _excluded$14 = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
 var getTitle = function getTitle(title, colors) {
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title"
@@ -14081,7 +14081,7 @@ var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     anchorProps = _ref$anchorProps === undefined ? {} : _ref$anchorProps,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$13);
+    props = _objectWithoutProperties(_ref, _excluded$14);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -14117,7 +14117,7 @@ var ImageBrowser = withScale(ImageBrowserComponent);
 
 Image.Browser = ImageBrowser;
 
-var _excluded$12 = ["children", "hoverable", "className", "shadow", "type"];
+var _excluded$13 = ["children", "hoverable", "className", "shadow", "type"];
 var CardComponent = function CardComponent(_ref) {
   var children = _ref.children,
     _ref$hoverable = _ref.hoverable,
@@ -14128,7 +14128,7 @@ var CardComponent = function CardComponent(_ref) {
     shadow = _ref$shadow === undefined ? false : _ref$shadow,
     _ref$type = _ref.type,
     type = _ref$type === undefined ? 'default' : _ref$type,
-    props = _objectWithoutProperties(_ref, _excluded$12);
+    props = _objectWithoutProperties(_ref, _excluded$13);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -14250,7 +14250,7 @@ var getColors$7 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$11 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
+var _excluded$12 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
 var CheckboxComponent = function CheckboxComponent(_ref) {
   var checked = _ref.checked,
     _ref$initialChecked = _ref.initialChecked,
@@ -14265,7 +14265,7 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     type = _ref$type === undefined ? 'default' : _ref$type,
     _ref$value = _ref.value,
     value = _ref$value === undefined ? '' : _ref$value,
-    props = _objectWithoutProperties(_ref, _excluded$11);
+    props = _objectWithoutProperties(_ref, _excluded$12);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -14339,7 +14339,7 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
 CheckboxComponent.displayName = 'Checkbox';
 var Checkbox = withScale(CheckboxComponent);
 
-var _excluded$10 = ["disabled", "onChange", "value", "children", "className"];
+var _excluded$11 = ["disabled", "onChange", "value", "children", "className"];
 var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === undefined ? false : _ref$disabled,
@@ -14348,7 +14348,7 @@ var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$10);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useState = React.useState([]),
@@ -14395,7 +14395,7 @@ var CheckboxGroup = withScale(CheckboxGroupComponent);
 
 Checkbox.Group = CheckboxGroup;
 
-var _excluded$$ = ["children", "block", "className", "name", "classic"];
+var _excluded$10 = ["children", "block", "className", "name", "classic"];
 var CodeComponent = function CodeComponent(_ref) {
   var children = _ref.children,
     _ref$block = _ref.block,
@@ -14406,7 +14406,7 @@ var CodeComponent = function CodeComponent(_ref) {
     name = _ref$name === undefined ? '' : _ref$name,
     _ref$classic = _ref.classic,
     classic = _ref$classic === undefined ? false : _ref$classic,
-    props = _objectWithoutProperties(_ref, _excluded$$);
+    props = _objectWithoutProperties(_ref, _excluded$10);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme = useTheme();
@@ -14439,6 +14439,244 @@ var CodeComponent = function CodeComponent(_ref) {
 CodeComponent.displayName = 'Code';
 var Code = withScale(CodeComponent);
 
+var VIEWBOX_WIDTH = 100;
+var VIEWBOX_HEIGHT = 100;
+var VIEWBOX_HEIGHT_HALF = 50;
+var VIEWBOX_CENTER_X = 50;
+var VIEWBOX_CENTER_Y = 50;
+
+function Path(_ref) {
+  var className = _ref.className,
+    counterClockwise = _ref.counterClockwise,
+    dashRatio = _ref.dashRatio,
+    pathRadius = _ref.pathRadius,
+    strokeWidth = _ref.strokeWidth,
+    style = _ref.style;
+  return /*#__PURE__*/React__namespace.createElement("path", {
+    className: className,
+    style: Object.assign({}, style, getDashStyle({
+      pathRadius: pathRadius,
+      dashRatio: dashRatio,
+      counterClockwise: counterClockwise
+    })),
+    d: getPathDescription({
+      pathRadius: pathRadius,
+      counterClockwise: counterClockwise
+    }),
+    strokeWidth: strokeWidth,
+    fillOpacity: 0
+  });
+}
+
+// SVG path description specifies how the path should be drawn
+function getPathDescription(_ref2) {
+  var pathRadius = _ref2.pathRadius,
+    counterClockwise = _ref2.counterClockwise;
+  var radius = pathRadius;
+  var rotation = counterClockwise ? 1 : 0;
+
+  // Move to center of canvas
+  // Relative move to top canvas
+  // Relative arc to bottom of canvas
+  // Relative arc to top of canvas
+  return "\n      M ".concat(VIEWBOX_CENTER_X, ",").concat(VIEWBOX_CENTER_Y, "\n      m 0,-").concat(radius, "\n      a ").concat(radius, ",").concat(radius, " ").concat(rotation, " 1 1 0,").concat(2 * radius, "\n      a ").concat(radius, ",").concat(radius, " ").concat(rotation, " 1 1 0,-").concat(2 * radius, "\n    ");
+}
+function getDashStyle(_ref3) {
+  var counterClockwise = _ref3.counterClockwise,
+    dashRatio = _ref3.dashRatio,
+    pathRadius = _ref3.pathRadius;
+  var diameter = Math.PI * 2 * pathRadius;
+  var gapLength = (1 - dashRatio) * diameter;
+  return {
+    // Have dash be full diameter, and gap be full diameter
+    strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"),
+    // Shift dash backward by gapLength, so gap starts appearing at correct distance
+    strokeDashoffset: "".concat(counterClockwise ? -gapLength : gapLength, "px")
+  };
+}
+
+var CircularProgressbar = /*#__PURE__*/function (_React$Component) {
+  function CircularProgressbar() {
+    _classCallCheck(this, CircularProgressbar);
+    return _callSuper(this, CircularProgressbar, arguments);
+  }
+  _inherits(CircularProgressbar, _React$Component);
+  return _createClass(CircularProgressbar, [{
+    key: "getBackgroundPadding",
+    value: function getBackgroundPadding() {
+      if (!this.props.background) {
+        // Don't add padding if not displaying background
+        return 0;
+      }
+      return this.props.backgroundPadding;
+    }
+  }, {
+    key: "getPathRadius",
+    value: function getPathRadius() {
+      // The radius of the path is defined to be in the middle, so in order for the path to
+      // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
+      return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();
+    }
+
+    // Ratio of path length to trail length, as a value between 0 and 1
+  }, {
+    key: "getPathRatio",
+    value: function getPathRatio() {
+      var _this$props = this.props,
+        value = _this$props.value,
+        minValue = _this$props.minValue,
+        maxValue = _this$props.maxValue;
+      var boundedValue = Math.min(Math.max(value, minValue), maxValue);
+      return (boundedValue - minValue) / (maxValue - minValue);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        circleRatio = _this$props2.circleRatio,
+        className = _this$props2.className,
+        classes = _this$props2.classes,
+        counterClockwise = _this$props2.counterClockwise,
+        styles = _this$props2.styles,
+        strokeWidth = _this$props2.strokeWidth,
+        text = _this$props2.text;
+      var pathRadius = this.getPathRadius();
+      var pathRatio = this.getPathRatio();
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        className: "".concat(classes.root, " ").concat(className),
+        style: styles.root,
+        viewBox: "0 0 ".concat(VIEWBOX_WIDTH, " ").concat(VIEWBOX_HEIGHT),
+        "data-test-id": "CircularProgressbar"
+      }, this.props.background ? /*#__PURE__*/React__namespace.createElement("circle", {
+        className: classes.background,
+        style: styles.background,
+        cx: VIEWBOX_CENTER_X,
+        cy: VIEWBOX_CENTER_Y,
+        r: VIEWBOX_HEIGHT_HALF
+      }) : null, /*#__PURE__*/React__namespace.createElement(Path, {
+        className: classes.trail,
+        counterClockwise: counterClockwise,
+        dashRatio: circleRatio,
+        pathRadius: pathRadius,
+        strokeWidth: strokeWidth,
+        style: styles.trail
+      }), /*#__PURE__*/React__namespace.createElement(Path, {
+        className: classes.path,
+        counterClockwise: counterClockwise,
+        dashRatio: pathRatio * circleRatio,
+        pathRadius: pathRadius,
+        strokeWidth: strokeWidth,
+        style: styles.path
+      }), text ? /*#__PURE__*/React__namespace.createElement("text", {
+        className: classes.text,
+        style: styles.text,
+        x: VIEWBOX_CENTER_X,
+        y: VIEWBOX_CENTER_Y
+      }, text) : null);
+    }
+  }]);
+}(React__namespace.Component);
+_defineProperty$1(CircularProgressbar, "defaultProps", {
+  background: false,
+  backgroundPadding: 0,
+  circleRatio: 1,
+  classes: {
+    root: 'CircularProgressbar',
+    trail: 'CircularProgressbar-trail',
+    path: 'CircularProgressbar-path',
+    text: 'CircularProgressbar-text',
+    background: 'CircularProgressbar-background'
+  },
+  counterClockwise: false,
+  className: '',
+  maxValue: 100,
+  minValue: 0,
+  strokeWidth: 8,
+  styles: {
+    root: {},
+    trail: {},
+    path: {},
+    text: {},
+    background: {}
+  },
+  text: ''
+});
+
+var _excluded$$ = ["children"];
+// This is a wrapper around CircularProgressbar that allows passing children,
+// which will be vertically and horizontally centered inside the progressbar automatically.
+function CircularProgressbarWithChildren(props) {
+  props.children;
+    var circularProgressbarProps = _objectWithoutProperties(props, _excluded$$);
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    "data-test-id": "CircularProgressbarWithChildren"
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    style: {
+      position: 'relative',
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement(CircularProgressbar, circularProgressbarProps), props.children ? /*#__PURE__*/React__namespace.createElement("div", {
+    "data-test-id": "CircularProgressbarWithChildren__children",
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      marginTop: '-100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, props.children) : null));
+}
+
+function buildStyles(_ref) {
+  var rotation = _ref.rotation,
+    strokeLinecap = _ref.strokeLinecap,
+    textColor = _ref.textColor,
+    textSize = _ref.textSize,
+    pathColor = _ref.pathColor,
+    pathTransition = _ref.pathTransition,
+    pathTransitionDuration = _ref.pathTransitionDuration,
+    trailColor = _ref.trailColor,
+    backgroundColor = _ref.backgroundColor;
+  var rotationTransform = rotation == null ? undefined : "rotate(".concat(rotation, "turn)");
+  var rotationTransformOrigin = rotation == null ? undefined : 'center center';
+  return {
+    root: {},
+    path: removeUndefinedValues({
+      stroke: pathColor,
+      strokeLinecap: strokeLinecap,
+      transform: rotationTransform,
+      transformOrigin: rotationTransformOrigin,
+      transition: pathTransition,
+      transitionDuration: pathTransitionDuration == null ? undefined : "".concat(pathTransitionDuration, "s")
+    }),
+    trail: removeUndefinedValues({
+      stroke: trailColor,
+      strokeLinecap: strokeLinecap,
+      transform: rotationTransform,
+      transformOrigin: rotationTransformOrigin
+    }),
+    text: removeUndefinedValues({
+      fill: textColor,
+      fontSize: textSize
+    }),
+    background: removeUndefinedValues({
+      fill: backgroundColor
+    })
+  };
+}
+function removeUndefinedValues(obj) {
+  Object.keys(obj).forEach(function (key) {
+    if (obj[key] == null) {
+      delete obj[key];
+    }
+  });
+  return obj;
+}
+
 var CollapseIcon = function CollapseIcon(_ref) {
   var active = _ref.active;
   return /*#__PURE__*/React.createElement("svg", {
@@ -44885,6 +45123,7 @@ exports.Capacity = Capacity;
 exports.Card = Card;
 exports.CartProvider = CartProvider;
 exports.Checkbox = Checkbox;
+exports.CircularProgress = CircularProgressbarWithChildren;
 exports.Code = Code;
 exports.Collapse = Collapse;
 exports.Container = GridContainer;
@@ -44946,6 +45185,7 @@ exports.Tooltip = Tooltip;
 exports.Tree = Tree;
 exports.UiProvider = HuiProvider;
 exports.User = User;
+exports.buildStyles = buildStyles;
 exports.connect = connect;
 exports.createCartIdentifier = createCartIdentifier;
 exports.getActiveElement = getActiveElement;