@helpdice/ui 2.5.8-beta.0 → 2.5.8

package/dist/image/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var theme = require('@helpdice/theme');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -61,14 +62,13 @@ function _createForOfIteratorHelper(r, e) {
     }
   };
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
+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;
 }
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
@@ -100,6 +100,27 @@ function _iterableToArrayLimit(r, l) {
 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 ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
 function _objectWithoutProperties(e, t) {
   if (null == e) return {};
   var o,
@@ -123,6 +144,20 @@ function _objectWithoutPropertiesLoose(r, 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.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -680,12 +715,14 @@ var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
     opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
     props = _objectWithoutProperties(_ref, _excluded$4);
   var theme$1 = theme.useTheme();
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2946022605", [theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.palette.accents_2, theme$1.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton")
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2946022605",
-    dynamic: [theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.palette.accents_2, theme$1.palette.accents_1, opacity]
-  }, ".skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ".concat(theme$1.palette.accents_1, ", ").concat(theme$1.palette.accents_2, ", ").concat(theme$1.palette.accents_2, ", ").concat(theme$1.palette.accents_1, " );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:").concat(opacity, ";-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}")));
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2946022605", [theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.palette.accents_2, theme$1.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton"),
+    children: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2946022605",
+      dynamic: [theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.palette.accents_2, theme$1.palette.accents_1, opacity],
+      children: ".skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ".concat(theme$1.palette.accents_1, ", ").concat(theme$1.palette.accents_2, ", ").concat(theme$1.palette.accents_2, ", ").concat(theme$1.palette.accents_1, " );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:").concat(opacity, ";-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}")
+    })
+  }));
 });
 ImageSkeleton.displayName = 'ImageSkeleton';
 
@@ -876,11 +913,13 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
-      ref: ref
-    }), children));
+    return /*#__PURE__*/jsxRuntime.jsx(ScaleContext.Provider, {
+      value: value,
+      children: /*#__PURE__*/jsxRuntime.jsx(Render, _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: ref,
+        children: children
+      }))
+    });
   });
   ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
   return ScaleFC;
@@ -938,26 +977,28 @@ var ImageComponent = function ImageComponent(_ref) {
       return clearTimeout(timer);
     };
   }, [loading]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4175752462", [theme$1.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (theme.useClasses('image', className) || "")
-  }, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(ImageSkeleton, {
-    opacity: loading ? 0.5 : 0
-  }), /*#__PURE__*/React.createElement("img", _extends({
-    ref: imageRef,
-    onLoad: imageLoaded,
-    src: url
-  }, props, {
-    className: _JSXStyle.dynamic([["4175752462", [theme$1.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (props && props.className != null && props.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4175752462",
-    dynamic: [theme$1.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]
-  }, ".image.__jsx-style-dynamic-selector{position:relative;border-radius:".concat(theme$1.layout.radius, ";overflow:hidden;max-width:100%;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}img.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";object-fit:scale-down;display:inline-block;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["4175752462", [theme$1.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (theme.useClasses('image', className) || ""),
+    children: [showSkeleton && showAnimation && /*#__PURE__*/jsxRuntime.jsx(ImageSkeleton, {
+      opacity: loading ? 0.5 : 0
+    }), /*#__PURE__*/jsxRuntime.jsx("img", _objectSpread2(_objectSpread2({
+      ref: imageRef,
+      onLoad: imageLoaded,
+      src: url
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["4175752462", [theme$1.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (props && props.className != null && props.className || "")
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4175752462",
+      dynamic: [theme$1.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')],
+      children: ".image.__jsx-style-dynamic-selector{position:relative;border-radius:".concat(theme$1.layout.radius, ";overflow:hidden;max-width:100%;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}img.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";object-fit:scale-down;display:inline-block;}")
+    })]
+  });
 };
 ImageComponent.displayName = 'Image';
 var Image = withScale(ImageComponent);
 
 var LinkIconComponent = function LinkIconComponent() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
     viewBox: "0 0 24 24",
     width: "0.9375em",
     height: "0.9375em",
@@ -967,19 +1008,21 @@ var LinkIconComponent = function LinkIconComponent() {
     strokeLinejoin: "round",
     fill: "none",
     shapeRendering: "geometricPrecision",
-    className: "jsx-3409194595" + " " + "icon"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6",
-    className: "jsx-3409194595"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M15 3h6v6",
-    className: "jsx-3409194595"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M10 14L21 3",
-    className: "jsx-3409194595"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3409194595"
-  }, ".icon.jsx-3409194595{margin:0 0 -1px 0.1875em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:currentColor;}"));
+    className: "jsx-3409194595" + " " + "icon",
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6",
+      className: "jsx-3409194595"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M15 3h6v6",
+      className: "jsx-3409194595"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M10 14L21 3",
+      className: "jsx-3409194595"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3409194595",
+      children: ".icon.jsx-3409194595{margin:0 0 -1px 0.1875em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:currentColor;}"
+    })]
+  });
 };
 LinkIconComponent.displayName = 'LinkIcon';
 var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
@@ -1045,37 +1088,42 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var classes = theme.useClasses('link', {
     block: block
   }, className);
-  return /*#__PURE__*/React.createElement("a", _extends({
+  return /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
     href: href
-  }, props, {
+  }, props), {}, {
     ref: ref,
-    className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), icon && icon, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + "link-extra"
-  }, children, arrow && /*#__PURE__*/React.createElement(LinkIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1962988967",
-    dynamic: [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]
-  }, ".link.__jsx-style-dynamic-selector,.link-extra.__jsx-style-dynamic-selector{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;line-height:inherit;gap:5px;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme$1.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
+    className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [icon && icon, /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + "link-extra",
+      children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx(LinkIcon, {})]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1962988967",
+      dynamic: [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor],
+      children: ".link.__jsx-style-dynamic-selector,.link-extra.__jsx-style-dynamic-selector{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;line-height:inherit;gap:5px;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme$1.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")
+    })]
+  }));
 });
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);
 
 var ImageBrowserHttpsIcon = function ImageBrowserHttpsIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    className: "jsx-4165143638"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M5 10.2H19V21H5V10.2Z",
-    className: "jsx-4165143638"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z",
-    className: "jsx-4165143638"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4165143638"
-  }, "svg.jsx-4165143638{width:1em;height:1em;}"));
+    className: "jsx-4165143638",
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M5 10.2H19V21H5V10.2Z",
+      className: "jsx-4165143638"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z",
+      className: "jsx-4165143638"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4165143638",
+      children: "svg.jsx-4165143638{width:1em;height:1em;}"
+    })]
+  });
 };
 var MemoImageBrowserHttpsIcon = /*#__PURE__*/React.memo(ImageBrowserHttpsIcon);
 
@@ -1097,26 +1145,33 @@ var getBrowserColors = function getBrowserColors(invert, palette) {
 
 var _excluded = ["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"
-  }, title, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "524099755",
-    dynamic: [colors.titleColor]
-  }, ".title.__jsx-style-dynamic-selector{color:".concat(colors.titleColor, ";font-size:0.75em;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title",
+    children: [title, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "524099755",
+      dynamic: [colors.titleColor],
+      children: ".title.__jsx-style-dynamic-selector{color:".concat(colors.titleColor, ";font-size:0.75em;}")
+    })]
+  });
 };
 var getAddressInput = function getAddressInput(url, showFullLink, colors, anchorProps) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "address-input"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "https"
-  }, /*#__PURE__*/React.createElement(MemoImageBrowserHttpsIcon, null)), /*#__PURE__*/React.createElement(Link, _extends({
-    href: url,
-    title: url,
-    target: "_blank"
-  }, anchorProps), showFullLink ? url : getHostFromUrl(url)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3718009574",
-    dynamic: [colors.inputBgColor]
-  }, ".address-input.__jsx-style-dynamic-selector{height:1.75em;max-width:60%;min-width:40%;background-color:".concat(colors.inputBgColor, ";color:inherit;border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;padding:0 10px;overflow:hidden;position:relative;}.address-input.__jsx-style-dynamic-selector *{font-size:0.75em;color:inherit;}.address-input.__jsx-style-dynamic-selector a{max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;color:inherit;}.https.__jsx-style-dynamic-selector{width:0.75em;height:0.75em;font-size:1em;margin-right:0.31em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;color:inherit;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;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "address-input",
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "https",
+      children: /*#__PURE__*/jsxRuntime.jsx(MemoImageBrowserHttpsIcon, {})
+    }), /*#__PURE__*/jsxRuntime.jsx(Link, _objectSpread2(_objectSpread2({
+      href: url,
+      title: url,
+      target: "_blank"
+    }, anchorProps), {}, {
+      children: showFullLink ? url : getHostFromUrl(url)
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3718009574",
+      dynamic: [colors.inputBgColor],
+      children: ".address-input.__jsx-style-dynamic-selector{height:1.75em;max-width:60%;min-width:40%;background-color:".concat(colors.inputBgColor, ";color:inherit;border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;padding:0 10px;overflow:hidden;position:relative;}.address-input.__jsx-style-dynamic-selector *{font-size:0.75em;color:inherit;}.address-input.__jsx-style-dynamic-selector a{max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;color:inherit;}.https.__jsx-style-dynamic-selector{width:0.75em;height:0.75em;font-size:1em;margin-right:0.31em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;color:inherit;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;}")
+    })]
+  });
 };
 var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var url = _ref.url,
@@ -1142,24 +1197,28 @@ var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (title) return getTitle(title, colors);
     return null;
   }, [url, showFullLink, title, colors, anchorProps]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || theme.useClasses('browser', className) || "")
-  }), /*#__PURE__*/React.createElement("header", {
-    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "traffic"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "close"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "mini"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "full"
-  })), input), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1856409351",
-    dynamic: [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]
-  }, ".browser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:".concat(theme$1.expressiveness.shadowLarge, ";max-width:100%;border-radius:").concat(theme$1.layout.radius, ";overflow:hidden;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.browser.__jsx-style-dynamic-selector .image{border-top-left-radius:0;border-top-right-radius:0;}header.__jsx-style-dynamic-selector{height:2.5em;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;position:relative;color:").concat(colors.color, ";background-color:").concat(colors.barBgColor, ";border-bottom:1px solid ").concat(colors.borderColor, ";}.traffic.__jsx-style-dynamic-selector{width:auto;position:absolute;left:").concat(theme$1.layout.gapHalf, ";top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);bottom:0;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75em;height:0.75em;max-width:20px;max-height:20px;display:inline-block;margin-right:0.5em;}.close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.full.__jsx-style-dynamic-selector{background-color:#27c93f;}")));
+  }, props), {}, {
+    className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || theme.useClasses('browser', className) || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
+      className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "traffic",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "close"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "mini"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: _JSXStyle.dynamic([["1856409351", [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf]]]) + " " + "full"
+        })]
+      }), input]
+    }), children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1856409351",
+      dynamic: [theme$1.expressiveness.shadowLarge, theme$1.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme$1.layout.gapHalf],
+      children: ".browser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:".concat(theme$1.expressiveness.shadowLarge, ";max-width:100%;border-radius:").concat(theme$1.layout.radius, ";overflow:hidden;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.browser.__jsx-style-dynamic-selector .image{border-top-left-radius:0;border-top-right-radius:0;}header.__jsx-style-dynamic-selector{height:2.5em;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;position:relative;color:").concat(colors.color, ";background-color:").concat(colors.barBgColor, ";border-bottom:1px solid ").concat(colors.borderColor, ";}.traffic.__jsx-style-dynamic-selector{width:auto;position:absolute;left:").concat(theme$1.layout.gapHalf, ";top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);bottom:0;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75em;height:0.75em;max-width:20px;max-height:20px;display:inline-block;margin-right:0.5em;}.close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.full.__jsx-style-dynamic-selector{background-color:#27c93f;}")
+    })]
+  }));
 });
 ImageBrowserComponent.displayName = 'ImageBrowser';
 var ImageBrowser = withScale(ImageBrowserComponent);

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { default as Checkbox } from './checkbox';
 export type { CheckboxProps, CheckboxGroupProps } from './checkbox';
 export { default as Code } from './code';
 export type { CodeProps } from './code';
-export { CircularProgressBar, CircularProgress, buildStyles } from './circular-progress';
+export { default as CircularProgress, useCircularProgress } from './circular-progress';
 export { default as Collapse } from './collapse';
 export type { CollapseProps, CollapseGroupProps } from './collapse';
 export { default as Description } from './description';
@@ -80,6 +80,7 @@ export { default as Spinner } from './spinner';
 export type { SpinnerProps } from './spinner';
 export { default as Table } from './table';
 export type { TableProps, TableColumnProps } from './table';
+export type { RowErrorMap, FieldError } from './table/table-types';
 export { default as Tabs } from './tabs';
 export type { TabsProps } from './tabs';
 export { default as Tag } from './tag';