@helpdice/ui 2.5.4 → 2.5.8

package/dist/circular-progress/index.js

@@ -1,364 +1,741 @@
 'use strict';
 
-var React$1 = require('react');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
+var require$$1 = require('react');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
+var index = {};
 
-function _assertThisInitialized(e) {
-  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
-function _classCallCheck(a, n) {
-  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
-}
-function _defineProperties(e, r) {
-  for (var t = 0; t < r.length; t++) {
-    var o = r[t];
-    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
-  }
+var hasRequiredIndex;
+
+function requireIndex () {
+	if (hasRequiredIndex) return index;
+	hasRequiredIndex = 1;
+	var React = require$$1;
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+	var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+	/*
+	Based on Glamor's sheet
+	https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
+	*/ function _defineProperties(target, props) {
+	    for(var i = 0; i < props.length; i++){
+	        var descriptor = props[i];
+	        descriptor.enumerable = descriptor.enumerable || false;
+	        descriptor.configurable = true;
+	        if ("value" in descriptor) descriptor.writable = true;
+	        Object.defineProperty(target, descriptor.key, descriptor);
+	    }
+	}
+	function _createClass(Constructor, protoProps, staticProps) {
+	    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+	    return Constructor;
+	}
+	var isProd = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production";
+	var isString = function(o) {
+	    return Object.prototype.toString.call(o) === "[object String]";
+	};
+	var StyleSheet = /*#__PURE__*/ function() {
+	    function StyleSheet(param) {
+	        var ref = param === void 0 ? {} : param, _name = ref.name, name = _name === void 0 ? "stylesheet" : _name, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? isProd : _optimizeForSpeed;
+	        invariant$1(isString(name), "`name` must be a string");
+	        this._name = name;
+	        this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}";
+	        invariant$1(typeof optimizeForSpeed === "boolean", "`optimizeForSpeed` must be a boolean");
+	        this._optimizeForSpeed = optimizeForSpeed;
+	        this._serverSheet = undefined;
+	        this._tags = [];
+	        this._injected = false;
+	        this._rulesCount = 0;
+	        var node = typeof window !== "undefined" && document.querySelector('meta[property="csp-nonce"]');
+	        this._nonce = node ? node.getAttribute("content") : null;
+	    }
+	    var _proto = StyleSheet.prototype;
+	    _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {
+	        invariant$1(typeof bool === "boolean", "`setOptimizeForSpeed` accepts a boolean");
+	        invariant$1(this._rulesCount === 0, "optimizeForSpeed cannot be when rules have already been inserted");
+	        this.flush();
+	        this._optimizeForSpeed = bool;
+	        this.inject();
+	    };
+	    _proto.isOptimizeForSpeed = function isOptimizeForSpeed() {
+	        return this._optimizeForSpeed;
+	    };
+	    _proto.inject = function inject() {
+	        var _this = this;
+	        invariant$1(!this._injected, "sheet already injected");
+	        this._injected = true;
+	        if (typeof window !== "undefined" && this._optimizeForSpeed) {
+	            this._tags[0] = this.makeStyleTag(this._name);
+	            this._optimizeForSpeed = "insertRule" in this.getSheet();
+	            if (!this._optimizeForSpeed) {
+	                if (!isProd) {
+	                    console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.");
+	                }
+	                this.flush();
+	                this._injected = true;
+	            }
+	            return;
+	        }
+	        this._serverSheet = {
+	            cssRules: [],
+	            insertRule: function(rule, index) {
+	                if (typeof index === "number") {
+	                    _this._serverSheet.cssRules[index] = {
+	                        cssText: rule
+	                    };
+	                } else {
+	                    _this._serverSheet.cssRules.push({
+	                        cssText: rule
+	                    });
+	                }
+	                return index;
+	            },
+	            deleteRule: function(index) {
+	                _this._serverSheet.cssRules[index] = null;
+	            }
+	        };
+	    };
+	    _proto.getSheetForTag = function getSheetForTag(tag) {
+	        if (tag.sheet) {
+	            return tag.sheet;
+	        }
+	        // this weirdness brought to you by firefox
+	        for(var i = 0; i < document.styleSheets.length; i++){
+	            if (document.styleSheets[i].ownerNode === tag) {
+	                return document.styleSheets[i];
+	            }
+	        }
+	    };
+	    _proto.getSheet = function getSheet() {
+	        return this.getSheetForTag(this._tags[this._tags.length - 1]);
+	    };
+	    _proto.insertRule = function insertRule(rule, index) {
+	        invariant$1(isString(rule), "`insertRule` accepts only strings");
+	        if (typeof window === "undefined") {
+	            if (typeof index !== "number") {
+	                index = this._serverSheet.cssRules.length;
+	            }
+	            this._serverSheet.insertRule(rule, index);
+	            return this._rulesCount++;
+	        }
+	        if (this._optimizeForSpeed) {
+	            var sheet = this.getSheet();
+	            if (typeof index !== "number") {
+	                index = sheet.cssRules.length;
+	            }
+	            // this weirdness for perf, and chrome's weird bug
+	            // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
+	            try {
+	                sheet.insertRule(rule, index);
+	            } catch (error) {
+	                if (!isProd) {
+	                    console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info");
+	                }
+	                return -1;
+	            }
+	        } else {
+	            var insertionPoint = this._tags[index];
+	            this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint));
+	        }
+	        return this._rulesCount++;
+	    };
+	    _proto.replaceRule = function replaceRule(index, rule) {
+	        if (this._optimizeForSpeed || typeof window === "undefined") {
+	            var sheet = typeof window !== "undefined" ? this.getSheet() : this._serverSheet;
+	            if (!rule.trim()) {
+	                rule = this._deletedRulePlaceholder;
+	            }
+	            if (!sheet.cssRules[index]) {
+	                // @TBD Should we throw an error?
+	                return index;
+	            }
+	            sheet.deleteRule(index);
+	            try {
+	                sheet.insertRule(rule, index);
+	            } catch (error) {
+	                if (!isProd) {
+	                    console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info");
+	                }
+	                // In order to preserve the indices we insert a deleteRulePlaceholder
+	                sheet.insertRule(this._deletedRulePlaceholder, index);
+	            }
+	        } else {
+	            var tag = this._tags[index];
+	            invariant$1(tag, "old rule at index `" + index + "` not found");
+	            tag.textContent = rule;
+	        }
+	        return index;
+	    };
+	    _proto.deleteRule = function deleteRule(index) {
+	        if (typeof window === "undefined") {
+	            this._serverSheet.deleteRule(index);
+	            return;
+	        }
+	        if (this._optimizeForSpeed) {
+	            this.replaceRule(index, "");
+	        } else {
+	            var tag = this._tags[index];
+	            invariant$1(tag, "rule at index `" + index + "` not found");
+	            tag.parentNode.removeChild(tag);
+	            this._tags[index] = null;
+	        }
+	    };
+	    _proto.flush = function flush() {
+	        this._injected = false;
+	        this._rulesCount = 0;
+	        if (typeof window !== "undefined") {
+	            this._tags.forEach(function(tag) {
+	                return tag && tag.parentNode.removeChild(tag);
+	            });
+	            this._tags = [];
+	        } else {
+	            // simpler on server
+	            this._serverSheet.cssRules = [];
+	        }
+	    };
+	    _proto.cssRules = function cssRules() {
+	        var _this = this;
+	        if (typeof window === "undefined") {
+	            return this._serverSheet.cssRules;
+	        }
+	        return this._tags.reduce(function(rules, tag) {
+	            if (tag) {
+	                rules = rules.concat(Array.prototype.map.call(_this.getSheetForTag(tag).cssRules, function(rule) {
+	                    return rule.cssText === _this._deletedRulePlaceholder ? null : rule;
+	                }));
+	            } else {
+	                rules.push(null);
+	            }
+	            return rules;
+	        }, []);
+	    };
+	    _proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) {
+	        if (cssString) {
+	            invariant$1(isString(cssString), "makeStyleTag accepts only strings as second parameter");
+	        }
+	        var tag = document.createElement("style");
+	        if (this._nonce) tag.setAttribute("nonce", this._nonce);
+	        tag.type = "text/css";
+	        tag.setAttribute("data-" + name, "");
+	        if (cssString) {
+	            tag.appendChild(document.createTextNode(cssString));
+	        }
+	        var head = document.head || document.getElementsByTagName("head")[0];
+	        if (relativeToTag) {
+	            head.insertBefore(tag, relativeToTag);
+	        } else {
+	            head.appendChild(tag);
+	        }
+	        return tag;
+	    };
+	    _createClass(StyleSheet, [
+	        {
+	            key: "length",
+	            get: function get() {
+	                return this._rulesCount;
+	            }
+	        }
+	    ]);
+	    return StyleSheet;
+	}();
+	function invariant$1(condition, message) {
+	    if (!condition) {
+	        throw new Error("StyleSheet: " + message + ".");
+	    }
+	}
+
+	function hash(str) {
+	    var _$hash = 5381, i = str.length;
+	    while(i){
+	        _$hash = _$hash * 33 ^ str.charCodeAt(--i);
+	    }
+	    /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+	   * integers. Since we want the results to be always positive, convert the
+	   * signed int to an unsigned by doing an unsigned bitshift. */ return _$hash >>> 0;
+	}
+	var stringHash = hash;
+
+	var sanitize = function(rule) {
+	    return rule.replace(/\/style/gi, "\\/style");
+	};
+	var cache = {};
+	/**
+	 * computeId
+	 *
+	 * Compute and memoize a jsx id from a basedId and optionally props.
+	 */ function computeId(baseId, props) {
+	    if (!props) {
+	        return "jsx-" + baseId;
+	    }
+	    var propsToString = String(props);
+	    var key = baseId + propsToString;
+	    if (!cache[key]) {
+	        cache[key] = "jsx-" + stringHash(baseId + "-" + propsToString);
+	    }
+	    return cache[key];
+	}
+	/**
+	 * computeSelector
+	 *
+	 * Compute and memoize dynamic selectors.
+	 */ function computeSelector(id, css) {
+	    var selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g;
+	    // Sanitize SSR-ed CSS.
+	    // Client side code doesn't need to be sanitized since we use
+	    // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).
+	    if (typeof window === "undefined") {
+	        css = sanitize(css);
+	    }
+	    var idcss = id + css;
+	    if (!cache[idcss]) {
+	        cache[idcss] = css.replace(selectoPlaceholderRegexp, id);
+	    }
+	    return cache[idcss];
+	}
+
+	function mapRulesToStyle(cssRules, options) {
+	    if (options === void 0) options = {};
+	    return cssRules.map(function(args) {
+	        var id = args[0];
+	        var css = args[1];
+	        return /*#__PURE__*/ React__default["default"].createElement("style", {
+	            id: "__" + id,
+	            // Avoid warnings upon render with a key
+	            key: "__" + id,
+	            nonce: options.nonce ? options.nonce : undefined,
+	            dangerouslySetInnerHTML: {
+	                __html: css
+	            }
+	        });
+	    });
+	}
+	var StyleSheetRegistry = /*#__PURE__*/ function() {
+	    function StyleSheetRegistry(param) {
+	        var ref = param === void 0 ? {} : param, _styleSheet = ref.styleSheet, styleSheet = _styleSheet === void 0 ? null : _styleSheet, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? false : _optimizeForSpeed;
+	        this._sheet = styleSheet || new StyleSheet({
+	            name: "styled-jsx",
+	            optimizeForSpeed: optimizeForSpeed
+	        });
+	        this._sheet.inject();
+	        if (styleSheet && typeof optimizeForSpeed === "boolean") {
+	            this._sheet.setOptimizeForSpeed(optimizeForSpeed);
+	            this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
+	        }
+	        this._fromServer = undefined;
+	        this._indices = {};
+	        this._instancesCounts = {};
+	    }
+	    var _proto = StyleSheetRegistry.prototype;
+	    _proto.add = function add(props) {
+	        var _this = this;
+	        if (undefined === this._optimizeForSpeed) {
+	            this._optimizeForSpeed = Array.isArray(props.children);
+	            this._sheet.setOptimizeForSpeed(this._optimizeForSpeed);
+	            this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
+	        }
+	        if (typeof window !== "undefined" && !this._fromServer) {
+	            this._fromServer = this.selectFromServer();
+	            this._instancesCounts = Object.keys(this._fromServer).reduce(function(acc, tagName) {
+	                acc[tagName] = 0;
+	                return acc;
+	            }, {});
+	        }
+	        var ref = this.getIdAndRules(props), styleId = ref.styleId, rules = ref.rules;
+	        // Deduping: just increase the instances count.
+	        if (styleId in this._instancesCounts) {
+	            this._instancesCounts[styleId] += 1;
+	            return;
+	        }
+	        var indices = rules.map(function(rule) {
+	            return _this._sheet.insertRule(rule);
+	        })// Filter out invalid rules
+	        .filter(function(index) {
+	            return index !== -1;
+	        });
+	        this._indices[styleId] = indices;
+	        this._instancesCounts[styleId] = 1;
+	    };
+	    _proto.remove = function remove(props) {
+	        var _this = this;
+	        var styleId = this.getIdAndRules(props).styleId;
+	        invariant(styleId in this._instancesCounts, "styleId: `" + styleId + "` not found");
+	        this._instancesCounts[styleId] -= 1;
+	        if (this._instancesCounts[styleId] < 1) {
+	            var tagFromServer = this._fromServer && this._fromServer[styleId];
+	            if (tagFromServer) {
+	                tagFromServer.parentNode.removeChild(tagFromServer);
+	                delete this._fromServer[styleId];
+	            } else {
+	                this._indices[styleId].forEach(function(index) {
+	                    return _this._sheet.deleteRule(index);
+	                });
+	                delete this._indices[styleId];
+	            }
+	            delete this._instancesCounts[styleId];
+	        }
+	    };
+	    _proto.update = function update(props, nextProps) {
+	        this.add(nextProps);
+	        this.remove(props);
+	    };
+	    _proto.flush = function flush() {
+	        this._sheet.flush();
+	        this._sheet.inject();
+	        this._fromServer = undefined;
+	        this._indices = {};
+	        this._instancesCounts = {};
+	    };
+	    _proto.cssRules = function cssRules() {
+	        var _this = this;
+	        var fromServer = this._fromServer ? Object.keys(this._fromServer).map(function(styleId) {
+	            return [
+	                styleId,
+	                _this._fromServer[styleId]
+	            ];
+	        }) : [];
+	        var cssRules = this._sheet.cssRules();
+	        return fromServer.concat(Object.keys(this._indices).map(function(styleId) {
+	            return [
+	                styleId,
+	                _this._indices[styleId].map(function(index) {
+	                    return cssRules[index].cssText;
+	                }).join(_this._optimizeForSpeed ? "" : "\n")
+	            ];
+	        })// filter out empty rules
+	        .filter(function(rule) {
+	            return Boolean(rule[1]);
+	        }));
+	    };
+	    _proto.styles = function styles(options) {
+	        return mapRulesToStyle(this.cssRules(), options);
+	    };
+	    _proto.getIdAndRules = function getIdAndRules(props) {
+	        var css = props.children, dynamic = props.dynamic, id = props.id;
+	        if (dynamic) {
+	            var styleId = computeId(id, dynamic);
+	            return {
+	                styleId: styleId,
+	                rules: Array.isArray(css) ? css.map(function(rule) {
+	                    return computeSelector(styleId, rule);
+	                }) : [
+	                    computeSelector(styleId, css)
+	                ]
+	            };
+	        }
+	        return {
+	            styleId: computeId(id),
+	            rules: Array.isArray(css) ? css : [
+	                css
+	            ]
+	        };
+	    };
+	    /**
+	   * selectFromServer
+	   *
+	   * Collects style tags from the document with id __jsx-XXX
+	   */ _proto.selectFromServer = function selectFromServer() {
+	        var elements = Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));
+	        return elements.reduce(function(acc, element) {
+	            var id = element.id.slice(2);
+	            acc[id] = element;
+	            return acc;
+	        }, {});
+	    };
+	    return StyleSheetRegistry;
+	}();
+	function invariant(condition, message) {
+	    if (!condition) {
+	        throw new Error("StyleSheetRegistry: " + message + ".");
+	    }
+	}
+	var StyleSheetContext = /*#__PURE__*/ React.createContext(null);
+	StyleSheetContext.displayName = "StyleSheetContext";
+	function createStyleRegistry() {
+	    return new StyleSheetRegistry();
+	}
+	function StyleRegistry(param) {
+	    var configuredRegistry = param.registry, children = param.children;
+	    var rootRegistry = React.useContext(StyleSheetContext);
+	    var ref = React.useState(function() {
+	        return rootRegistry || configuredRegistry || createStyleRegistry();
+	    }), registry = ref[0];
+	    return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, {
+	        value: registry
+	    }, children);
+	}
+	function useStyleRegistry() {
+	    return React.useContext(StyleSheetContext);
+	}
+
+	// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
+	// https://github.com/reactwg/react-18/discussions/110
+	var useInsertionEffect = React__default["default"].useInsertionEffect || React.useLayoutEffect;
+	var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
+	function JSXStyle(props) {
+	    var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
+	    var insertionEffectCalled = React.useRef(false);
+	    // `registry` might not exist while server-side rendering
+	    if (!registry) {
+	        return null;
+	    }
+	    if (typeof window === "undefined") {
+	        registry.add(props);
+	        return null;
+	    }
+	    useInsertionEffect(function() {
+	        // ReactDOM removes all DOM during hydration in certain cases
+	        if (!document.head) {
+	            return;
+	        }
+	        registry.add(props);
+	        insertionEffectCalled.current = true;
+	        return function() {
+	            insertionEffectCalled.current = false;
+	            registry.remove(props);
+	        };
+	    }, [
+	        props.id,
+	        String(props.dynamic)
+	    ]);
+	    React.useLayoutEffect(function() {
+	        if (!document.head || insertionEffectCalled.current) {
+	            return;
+	        }
+	        registry.add(props);
+	        return function() {
+	            registry.remove(props);
+	        };
+	    // props.children can be string[], will be striped since id is identical
+	    }, [
+	        props.id,
+	        String(props.dynamic)
+	    ]);
+	    return null;
+	}
+	JSXStyle.dynamic = function(info) {
+	    return info.map(function(tagInfo) {
+	        var baseId = tagInfo[0];
+	        var props = tagInfo[1];
+	        return computeId(baseId, props);
+	    }).join(" ");
+	};
+
+	index.StyleRegistry = StyleRegistry;
+	index.createStyleRegistry = createStyleRegistry;
+	index.style = JSXStyle;
+	index.useStyleRegistry = useStyleRegistry;
+	return index;
 }
-function _createClass(e, r, t) {
-  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
-    writable: false
-  }), e;
+
+var style;
+var hasRequiredStyle;
+
+function requireStyle () {
+	if (hasRequiredStyle) return style;
+	hasRequiredStyle = 1;
+	style = requireIndex().style;
+	return style;
 }
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
+
+var styleExports = requireStyle();
+var _JSXStyle = /*@__PURE__*/getDefaultExportFromCjs(styleExports);
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-function _getPrototypeOf(t) {
-  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
-    return t.__proto__ || Object.getPrototypeOf(t);
-  }, _getPrototypeOf(t);
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
-function _inherits(t, e) {
-  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
-  t.prototype = Object.create(e && e.prototype, {
-    constructor: {
-      value: t,
-      writable: true,
-      configurable: true
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
     }
-  }), Object.defineProperty(t, "prototype", {
-    writable: false
-  }), e && _setPrototypeOf(t, e);
-}
-function _isNativeReflectConstruct() {
-  try {
-    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-  } catch (t) {}
-  return (_isNativeReflectConstruct = function () {
-    return !!t;
-  })();
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+    return a;
   }
-  return t;
 }
-function _possibleConstructorReturn(t, e) {
-  if (e && ("object" == typeof e || "function" == typeof e)) return e;
-  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
-  return _assertThisInitialized(t);
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return (String )(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-var VIEWBOX_WIDTH = 100;
-var VIEWBOX_HEIGHT = 100;
-var VIEWBOX_HEIGHT_HALF = 50;
-var VIEWBOX_CENTER_X = 50;
-var VIEWBOX_CENTER_Y = 50;
-
-// import * as React from 'react';
-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.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;
+function useCircularProgress(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "determinate" : _ref$variant;
+  var normalizedValue = require$$1.useMemo(function () {
+    if (variant !== "determinate") return 0;
+    return Math.min(Math.max(value, min), max);
+  }, [value, min, max, variant]);
+  var percentage = require$$1.useMemo(function () {
+    if (variant !== "determinate") return 0;
+    return (normalizedValue - min) / (max - min) * 100;
+  }, [normalizedValue, min, max, variant]);
 
-  // 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;
+  // SSR-safe animated number
+  var _useState = require$$1.useState(normalizedValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayValue = _useState2[0],
+    setDisplayValue = _useState2[1];
+  require$$1.useEffect(function () {
+    setDisplayValue(normalizedValue);
+  }, [normalizedValue]);
   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")
+    percentage: percentage,
+    displayValue: displayValue
   };
 }
 
-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();
-    }
+var statusColors = {
+  "default": "#3b82f6",
+  success: "#10b981",
+  warning: "#f59e0b",
+  error: "#ef4444"
+};
+var CircularProgress = /*#__PURE__*/require$$1.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 140 : _ref$size,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 12 : _ref$strokeWidth,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "determinate" : _ref$variant,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? "default" : _ref$status,
+    _ref$gradient = _ref.gradient,
+    gradient = _ref$gradient === void 0 ? true : _ref$gradient,
+    _ref$showPercentage = _ref.showPercentage,
+    showPercentage = _ref$showPercentage === void 0 ? true : _ref$showPercentage,
+    label = _ref.label;
+  var _useCircularProgress = useCircularProgress({
+      value: value,
+      min: min,
+      max: max,
+      variant: variant
+    }),
+    percentage = _useCircularProgress.percentage,
+    displayValue = _useCircularProgress.displayValue;
+  var radius = (size - strokeWidth) / 2;
+  var circumference = 2 * Math.PI * radius;
+  var strokeDashoffset = circumference - percentage / 100 * circumference;
+  var baseColor = statusColors[status];
 
-    // 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,
+  // SSR-SAFE ID
+  var gradientId = require$$1.useId();
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    role: "progressbar",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": variant === "determinate" ? value : undefined,
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]) + " " + "wrapper",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+      width: size,
+      height: size,
+      className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]),
+      children: [gradient && /*#__PURE__*/jsxRuntime.jsx("defs", {
+        className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]),
+        children: /*#__PURE__*/jsxRuntime.jsxs("linearGradient", {
+          id: gradientId,
+          className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]),
+          children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+            offset: "0%",
+            stopColor: baseColor,
+            className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+          }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+            offset: "100%",
+            stopColor: "#9333ea",
+            className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        stroke: "#e5e7eb",
+        fill: "none",
         strokeWidth: strokeWidth,
-        style: styles.trail
-      }), /*#__PURE__*/React__namespace.createElement(Path, {
-        className: classes.path,
-        counterClockwise: counterClockwise,
-        dashRatio: pathRatio * circleRatio,
-        pathRadius: pathRadius,
+        r: radius,
+        cx: size / 2,
+        cy: size / 2,
+        className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+      }), /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.circle, {
+        fill: "none",
+        stroke: gradient ? "url(#".concat(gradientId, ")") : baseColor,
         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(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];
-    }
+        strokeLinecap: "round",
+        strokeDasharray: circumference,
+        r: radius,
+        cx: size / 2,
+        cy: size / 2,
+        initial: false,
+        animate: {
+          strokeDashoffset: variant === "determinate" ? strokeDashoffset : circumference * 0.4,
+          rotate: variant === "indeterminate" ? 360 : 0
+        },
+        transition: variant === "indeterminate" ? {
+          repeat: Infinity,
+          duration: 1.2,
+          ease: "linear"
+        } : {
+          duration: 0.6,
+          ease: "easeOut"
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]) + " " + "label",
+      children: label !== null && label !== void 0 ? label : showPercentage && variant === "determinate" ? "".concat(Math.round(displayValue), "%") : null
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4042284457",
+      dynamic: [size * 0.18],
+      children: ".wrapper.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}svg.__jsx-style-dynamic-selector{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.label.__jsx-style-dynamic-selector{position:absolute;font-weight:700;font-size:".concat(size * 0.18, "px;}")
+    })]
   });
-  return obj;
-}
+});
+CircularProgress.displayName = "CircularProgress";
 
-exports.CircularProgress = CircularProgressbarWithChildren;
-exports.CircularProgressBar = CircularProgressbar;
-exports.buildStyles = buildStyles;
+exports.default = CircularProgress;
+exports.useCircularProgress = useCircularProgress;