@helpdice/ui 1.8.4 → 2.0.5

package/dist/image/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var require$$1 = require('react-dom');
+var theme = require('@helpdice/theme');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -674,2137 +674,18 @@ function requireStyle () {
 var styleExports = requireStyle();
 var _JSXStyle = /*@__PURE__*/getDefaultExportFromCjs(styleExports);
 
-var dist = {};
-
-var hasRequiredDist;
-
-function requireDist () {
-	if (hasRequiredDist) return dist;
-	hasRequiredDist = 1;
-
-	var React$1 = React;
-	var reactDom = require$$1;
-
-	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 _arrayWithHoles(r) {
-	  if (Array.isArray(r)) return r;
-	}
-	function _arrayWithoutHoles(r) {
-	  if (Array.isArray(r)) return _arrayLikeToArray(r);
-	}
-	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 _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 _iterableToArray(r) {
-	  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-	}
-	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) {
-	        if (Object(t) !== t) return;
-	        f = !1;
-	      } 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;
-	      }
-	    }
-	    return a;
-	  }
-	}
-	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 _nonIterableSpread() {
-	  throw new TypeError("Invalid attempt to spread 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,
-	    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 t;
-	}
-	function _slicedToArray(r, e) {
-	  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-	}
-	function _toConsumableArray(r) {
-	  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
-	}
-	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 _typeof(o) {
-	  "@babel/helpers - typeof";
-
-	  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-	    return typeof o;
-	  } : function (o) {
-	    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	  }, _typeof(o);
-	}
-	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;
-	  }
-	}
-
-	var defaultToastLayout = {
-	  padding: '12px 16px',
-	  margin: '8px 0',
-	  width: '420px',
-	  maxWidth: '90vw',
-	  maxHeight: '75px',
-	  placement: 'bottomRight'
-	};
-	var defaultParams = {
-	  toasts: [],
-	  toastLayout: defaultToastLayout,
-	  updateToastLayout: function updateToastLayout(t) {
-	    return t;
-	  },
-	  updateToasts: function updateToasts(t) {
-	    return t;
-	  },
-	  lastUpdateToastId: null,
-	  updateLastToastId: function updateLastToastId() {
-	    return null;
-	  }
-	};
-	var HUIContent = /*#__PURE__*/React$1.createContext(defaultParams);
-	var useHUIContext = function useHUIContext() {
-	  return React$1.useContext(HUIContent);
-	};
-
-	var defaultFont = {
-	  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-	  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
-	  prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
-	};
-	var defaultBreakpoints = {
-	  xs: {
-	    min: '0',
-	    max: '650px'
-	  },
-	  sm: {
-	    min: '650px',
-	    max: '900px'
-	  },
-	  md: {
-	    min: '900px',
-	    max: '1280px'
-	  },
-	  lg: {
-	    min: '1280px',
-	    max: '1920px'
-	  },
-	  xl: {
-	    min: '1920px',
-	    max: '10000px'
-	  }
-	};
-	var defaultLayout = {
-	  gap: '16pt',
-	  gapNegative: '-16pt',
-	  gapHalf: '8pt',
-	  gapHalfNegative: '-8pt',
-	  gapQuarter: '4pt',
-	  gapQuarterNegative: '-4pt',
-	  pageMargin: '16pt',
-	  pageWidth: '750pt',
-	  pageWidthWithMargin: '782pt',
-	  breakpointMobile: defaultBreakpoints.xs.max,
-	  breakpointTablet: defaultBreakpoints.sm.max,
-	  radius: '6px',
-	  unit: '16px'
-	};
-
-	var palette$1 = {
-	  accents_1: '#fafafa',
-	  accents_2: '#eaeaea',
-	  accents_3: '#999',
-	  accents_4: '#888',
-	  accents_5: '#666',
-	  accents_6: '#444',
-	  accents_7: '#333',
-	  accents_8: '#111',
-	  background: '#fff',
-	  foreground: '#000',
-	  selection: '#79ffe1',
-	  secondary: '#666',
-	  code: '#f81ce5',
-	  border: '#eaeaea',
-	  error: '#e00',
-	  errorLight: '#ff1a1a',
-	  errorLighter: '#f7d4d6',
-	  errorDark: '#c50000',
-	  success: '#0070f3',
-	  successLight: '#3291ff',
-	  successLighter: '#d3e5ff',
-	  successDark: '#0761d1',
-	  warning: '#f5a623',
-	  warningLight: '#f7b955',
-	  warningLighter: '#ffefcf',
-	  warningDark: '#ab570a',
-	  cyan: '#50e3c2',
-	  cyanLighter: '#aaffec',
-	  cyanLight: '#79ffe1',
-	  cyanDark: '#29bc9b',
-	  violet: '#7928ca',
-	  violetLighter: '#e3d7fc',
-	  violetLight: '#8a63d2',
-	  violetDark: '#4c2889',
-	  purple: '#f81ce5',
-	  alert: '#ff0080',
-	  magenta: '#eb367f',
-	  link: '#0070f3'
-	};
-	var expressiveness$1 = {
-	  linkStyle: 'none',
-	  linkHoverStyle: 'none',
-	  dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
-	  scrollerStart: 'rgba(255, 255, 255, 1)',
-	  scrollerEnd: 'rgba(255, 255, 255, 0)',
-	  shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
-	  shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',
-	  shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',
-	  portalOpacity: 0.25
-	};
-	var font$1 = defaultFont;
-	var breakpoints$1 = defaultBreakpoints;
-	var layout$1 = defaultLayout;
-	var themes$1 = {
-	  type: 'light',
-	  font: font$1,
-	  layout: layout$1,
-	  palette: palette$1,
-	  breakpoints: breakpoints$1,
-	  expressiveness: expressiveness$1
-	};
-
-	var palette = {
-	  accents_1: '#111',
-	  accents_2: '#333',
-	  accents_3: '#444',
-	  accents_4: '#666',
-	  accents_5: '#888',
-	  accents_6: '#999',
-	  accents_7: '#eaeaea',
-	  accents_8: '#fafafa',
-	  background: '#000',
-	  foreground: '#fff',
-	  selection: '#f81ce5',
-	  secondary: '#888',
-	  code: '#79ffe1',
-	  border: '#333',
-	  error: '#e00',
-	  errorLighter: '#f7d4d6',
-	  errorLight: '#ff1a1a',
-	  errorDark: '#c50000',
-	  success: '#0070f3',
-	  successLighter: '#d3e5ff',
-	  successLight: '#3291ff',
-	  successDark: '#0761d1',
-	  warning: '#f5a623',
-	  warningLighter: '#ffefcf',
-	  warningLight: '#f7b955',
-	  warningDark: '#ab570a',
-	  cyan: '#50e3c2',
-	  cyanLighter: '#aaffec',
-	  cyanLight: '#79ffe1',
-	  cyanDark: '#29bc9b',
-	  violet: '#7928ca',
-	  violetLighter: '#e3d7fc',
-	  violetLight: '#8a63d2',
-	  violetDark: '#4c2889',
-	  purple: '#f81ce5',
-	  alert: '#ff0080',
-	  magenta: '#eb367f',
-	  link: '#3291ff'
-	};
-	var expressiveness = {
-	  linkStyle: 'none',
-	  linkHoverStyle: 'none',
-	  dropdownBoxShadow: '0 0 0 1px #333',
-	  scrollerStart: 'rgba(255, 255, 255, 1)',
-	  scrollerEnd: 'rgba(255, 255, 255, 0)',
-	  shadowSmall: '0 0 0 1px #333',
-	  shadowMedium: '0 0 0 1px #333',
-	  shadowLarge: '0 0 0 1px #333',
-	  portalOpacity: 0.75
-	};
-	var font = defaultFont;
-	var breakpoints = defaultBreakpoints;
-	var layout = defaultLayout;
-	var themes = {
-	  type: 'dark',
-	  font: font,
-	  layout: layout,
-	  palette: palette,
-	  breakpoints: breakpoints,
-	  expressiveness: expressiveness
-	};
-
-	var isObject = function isObject(target) {
-	  return target && _typeof(target) === 'object';
-	};
-	var _deepDuplicable = function deepDuplicable(source, target) {
-	  if (!isObject(target) || !isObject(source)) return source;
-	  var sourceKeys = Object.keys(source);
-	  var result = {};
-	  for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
-	    var key = _sourceKeys[_i];
-	    var sourceValue = source[key];
-	    var targetValue = target[key];
-	    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
-	      result[key] = targetValue.concat(sourceValue);
-	    } else if (isObject(sourceValue) && isObject(targetValue)) {
-	      result[key] = _deepDuplicable(sourceValue, _objectSpread2({}, targetValue));
-	    } else if (targetValue) {
-	      result[key] = targetValue;
-	    } else {
-	      result[key] = sourceValue;
-	    }
-	  }
-	  return result;
-	};
-	var getPresets = function getPresets() {
-	  return [themes$1, themes];
-	};
-	var getPresetStaticTheme = function getPresetStaticTheme() {
-	  return themes$1;
-	};
-	var isAvailableThemeType = function isAvailableThemeType(type) {
-	  if (!type) return false;
-	  var presetThemes = getPresets();
-	  var hasType = presetThemes.find(function (theme) {
-	    return theme.type === type;
-	  });
-	  return !hasType;
-	};
-	var isPresetTheme = function isPresetTheme(themeOrType) {
-	  if (!themeOrType) return false;
-	  var isType = typeof themeOrType === 'string';
-	  var type = isType ? themeOrType : themeOrType.type;
-	  return !isAvailableThemeType(type);
-	};
-	var hasUserCustomTheme = function hasUserCustomTheme() {
-	  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-	  return !!themes.find(function (item) {
-	    return isAvailableThemeType(item.type);
-	  });
-	};
-	var create = function create(base, custom) {
-	  if (!isAvailableThemeType(custom.type)) {
-	    throw new Error('Duplicate or unavailable theme type');
-	  }
-	  return _deepDuplicable(base, custom);
-	};
-	var createFromDark = function createFromDark(custom) {
-	  return create(themes, custom);
-	};
-	var createFromLight = function createFromLight(custom) {
-	  return create(themes$1, custom);
-	};
-	var Themes = {
-	  isPresetTheme: isPresetTheme,
-	  isAvailableThemeType: isAvailableThemeType,
-	  hasUserCustomTheme: hasUserCustomTheme,
-	  getPresets: getPresets,
-	  getPresetStaticTheme: getPresetStaticTheme,
-	  create: create,
-	  createFromDark: createFromDark,
-	  createFromLight: createFromLight
-	};
-
-	/* "use client" */
-
-	var defaultTheme = Themes.getPresetStaticTheme();
-	var ThemeContext = /*#__PURE__*/React$1.createContext(defaultTheme);
-	var useTheme = function useTheme() {
-	  return React$1.useContext(ThemeContext);
-	};
-
-	/* "use client" */
-
-	var defaultAllThemesConfig = {
-	  themes: Themes.getPresets()
-	};
-	var AllThemesContext = /*#__PURE__*/React$1.createContext(defaultAllThemesConfig);
-	var useAllThemes = function useAllThemes() {
-	  return React$1.useContext(AllThemesContext);
-	};
-
-	var ThemeProvider = function ThemeProvider(_ref) {
-	  var children = _ref.children,
-	    themeType = _ref.themeType,
-	    _ref$themes = _ref.themes,
-	    themes = _ref$themes === void 0 ? [] : _ref$themes;
-	  var _React$useState = React$1.useState({
-	      themes: Themes.getPresets()
-	    }),
-	    _React$useState2 = _slicedToArray(_React$useState, 2),
-	    allThemes = _React$useState2[0],
-	    setAllThemes = _React$useState2[1];
-	  var currentTheme = React$1.useMemo(function () {
-	    var theme = allThemes.themes.find(function (item) {
-	      return item.type === themeType;
-	    });
-	    if (theme) return theme;
-	    return Themes.getPresetStaticTheme();
-	  }, [allThemes, themeType]);
-	  React$1.useEffect(function () {
-	    if (!(themes !== null && themes !== void 0 && themes.length)) return;
-	    setAllThemes(function (last) {
-	      var safeThemes = themes.filter(function (item) {
-	        return Themes.isAvailableThemeType(item.type);
-	      });
-	      var nextThemes = Themes.getPresets().concat(safeThemes);
-	      return _objectSpread2(_objectSpread2({}, last), {}, {
-	        themes: nextThemes
-	      });
-	    });
-	  }, [themes]);
-	  return /*#__PURE__*/React$1.createElement(AllThemesContext.Provider, {
-	    value: allThemes
-	  }, /*#__PURE__*/React$1.createElement(ThemeContext.Provider, {
-	    value: currentTheme
-	  }, children));
-	};
-
-	var useCurrentState = function useCurrentState(initialState) {
-	  var _useState = React$1.useState(function () {
-	      return typeof initialState === 'function' ? initialState() : initialState;
-	    }),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    state = _useState2[0],
-	    setState = _useState2[1];
-	  var ref = React$1.useRef(initialState);
-	  React$1.useEffect(function () {
-	    ref.current = state;
-	  }, [state]);
-	  var setValue = function setValue(val) {
-	    var result = typeof val === 'function' ? val(ref.current) : val;
-	    ref.current = result;
-	    setState(result);
-	  };
-	  return [state, setValue, ref];
-	};
-
-	function getDefaultExportFromCjs (x) {
-		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-	}
-
-	var index = {};
-
-	var hasRequiredIndex;
-
-	function requireIndex () {
-		if (hasRequiredIndex) return index;
-		hasRequiredIndex = 1;
-		var React$1$1 = React$1;
-
-		function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-		var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1$1);
-
-		/*
-		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$1$1.createContext(null);
-		StyleSheetContext.displayName = "StyleSheetContext";
-		function createStyleRegistry() {
-		    return new StyleSheetRegistry();
-		}
-		function StyleRegistry(param) {
-		    var configuredRegistry = param.registry, children = param.children;
-		    var rootRegistry = React$1$1.useContext(StyleSheetContext);
-		    var ref = React$1$1.useState(function() {
-		        return rootRegistry || configuredRegistry || createStyleRegistry();
-		    }), registry = ref[0];
-		    return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, {
-		        value: registry
-		    }, children);
-		}
-		function useStyleRegistry() {
-		    return React$1$1.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$1$1.useLayoutEffect;
-		var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
-		function JSXStyle(props) {
-		    var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
-		    var insertionEffectCalled = React$1$1.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$1$1.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;
-	}
-
-	var style;
-	var hasRequiredStyle;
-
-	function requireStyle () {
-		if (hasRequiredStyle) return style;
-		hasRequiredStyle = 1;
-		style = requireIndex().style;
-		return style;
-	}
-
-	var styleExports = requireStyle();
-	var _JSXStyle = /*@__PURE__*/getDefaultExportFromCjs(styleExports);
-
-	/* "use client" */
-
-	var getId = function getId() {
-	  return Math.random().toString(32).slice(2, 10);
-	};
-	var isBrowser = function isBrowser() {
-	  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-	};
-
-	var useSSR = function useSSR() {
-	  var _useState = React$1.useState(false),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    browser = _useState2[0],
-	    setBrowser = _useState2[1];
-	  React$1.useEffect(function () {
-	    setBrowser(isBrowser());
-	  }, []);
-	  return {
-	    isBrowser: browser,
-	    isServer: !browser
-	  };
-	};
-
-	var createElement = function createElement(id) {
-	  var el = document.createElement('div');
-	  el.setAttribute('id', id);
-	  return el;
-	};
-	var usePortal = function usePortal() {
-	  var selectId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getId();
-	  var getContainer = arguments.length > 1 ? arguments[1] : undefined;
-	  var id = "helpdice-ui-".concat(selectId);
-	  var _useSSR = useSSR(),
-	    isBrowser = _useSSR.isBrowser;
-	  var _useState = React$1.useState(isBrowser ? createElement(id) : null),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    elSnapshot = _useState2[0],
-	    setElSnapshot = _useState2[1];
-	  React$1.useEffect(function () {
-	    var customContainer = getContainer ? getContainer() : null;
-	    var parentElement = customContainer || document.body;
-	    var hasElement = parentElement.querySelector("#".concat(id));
-	    var el = hasElement || createElement(id);
-	    if (!hasElement) {
-	      parentElement.appendChild(el);
-	    }
-	    setElSnapshot(el);
-	  }, []);
-	  return elSnapshot;
-	};
-
-	var _excluded$2 = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-	var CssTransition = function CssTransition(_ref) {
-	  var children = _ref.children,
-	    _ref$className = _ref.className,
-	    className = _ref$className === void 0 ? '' : _ref$className,
-	    _ref$visible = _ref.visible,
-	    visible = _ref$visible === void 0 ? false : _ref$visible,
-	    _ref$enterTime = _ref.enterTime,
-	    enterTime = _ref$enterTime === void 0 ? 60 : _ref$enterTime,
-	    _ref$leaveTime = _ref.leaveTime,
-	    leaveTime = _ref$leaveTime === void 0 ? 60 : _ref$leaveTime,
-	    _ref$clearTime = _ref.clearTime,
-	    clearTime = _ref$clearTime === void 0 ? 60 : _ref$clearTime,
-	    _ref$name = _ref.name,
-	    name = _ref$name === void 0 ? 'transition' : _ref$name,
-	    props = _objectWithoutProperties(_ref, _excluded$2);
-	  var _useState = React$1.useState(''),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    classes = _useState2[0],
-	    setClasses = _useState2[1];
-	  var _useState3 = React$1.useState(visible),
-	    _useState4 = _slicedToArray(_useState3, 2),
-	    renderable = _useState4[0],
-	    setRenderable = _useState4[1];
-	  React$1.useEffect(function () {
-	    var statusClassName = visible ? 'enter' : 'leave';
-	    var time = visible ? enterTime : leaveTime;
-	    if (visible && !renderable) {
-	      setRenderable(true);
-	    }
-	    setClasses("".concat(name, "-").concat(statusClassName));
-
-	    // set class to active
-	    var timer = setTimeout(function () {
-	      setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
-	      clearTimeout(timer);
-	    }, time);
-
-	    // remove classess when animation over
-	    var clearClassesTimer = setTimeout(function () {
-	      if (!visible) {
-	        setClasses('');
-	        setRenderable(false);
-	      }
-	      clearTimeout(clearClassesTimer);
-	    }, time + clearTime);
-	    return function () {
-	      clearTimeout(timer);
-	      clearTimeout(clearClassesTimer);
-	    };
-	  }, [visible, renderable]);
-	  if (! /*#__PURE__*/React$1.isValidElement(children) || !renderable) return null;
-	  var propsTransition = _objectSpread2(_objectSpread2({}, props), {}, {
-	    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
-	  });
-	  return /*#__PURE__*/React$1.cloneElement(children, propsTransition);
-	};
-	CssTransition.displayName = 'CssTransition';
-
-	var tuple = function tuple() {
-	  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-	    args[_key] = arguments[_key];
-	  }
-	  return args;
-	};
-	tuple('default', 'secondary', 'success', 'warning', 'error', 'abort', 'secondary-light', 'success-light', 'warning-light', 'error-light');
-	tuple('default', 'secondary', 'success', 'warning', 'error');
-	tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite');
-	tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'alert', 'purple', 'violet', 'cyan');
-	tuple('default', 'silent', 'prevent');
-	tuple('hover', 'click');
-	tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
-	tuple('start', 'center', 'end', 'left', 'right');
-
-	var makeToastActions = function makeToastActions(actions, cancelHandle) {
-	  var handler = function handler(event, userHandler) {
-	    userHandler && userHandler(event, cancelHandle);
-	  };
-	  if (!actions || !actions.length) return null;
-	  return actions.map(function (action, index) {
-	    return /*#__PURE__*/React$1.createElement("button", {
-	      color: action.passive ? 'default' : 'secondary',
-	      key: "action-".concat(index),
-	      onClick: function onClick(event) {
-	        return handler(event, action.handler);
-	      }
-	    }, action.name);
-	  });
-	};
-	var getColors = function getColors(palette, type) {
-	  var colors = {
-	    "default": palette.background,
-	    secondary: palette.secondary,
-	    success: palette.success,
-	    warning: palette.warning,
-	    error: palette.error
-	  };
-	  var isDefault = !type || type === 'default';
-	  if (isDefault) return {
-	    bgColor: colors["default"],
-	    color: palette.foreground
-	  };
-	  /**
-	   * Prevent main color change in special types.
-	   * The color will only follow the theme when it is in the default type.
-	   */
-	  return {
-	    bgColor: colors[type],
-	    color: 'white'
-	  };
-	};
-	tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
-	var isTopPlacement = function isTopPlacement(placement) {
-	  return "".concat(placement).toLowerCase().startsWith('top');
-	};
-	var isLeftPlacement = function isLeftPlacement(placement) {
-	  return "".concat(placement).toLowerCase().endsWith('left');
-	};
-	var getTranslateByPlacement = function getTranslateByPlacement(placement) {
-	  var translateInByPlacement = {
-	    topLeft: 'translate(-60px, -60px)',
-	    topRight: 'translate(60px, -60px)',
-	    bottomLeft: 'translate(-60px, 60px)',
-	    bottomRight: 'translate(60px, 60px)'
-	  };
-	  var translateOutByPlacement = {
-	    topLeft: 'translate(-50px, 15px) scale(0.85)',
-	    topRight: 'translate(50px, 15px) scale(0.85)',
-	    bottomLeft: 'translate(-50px, -15px) scale(0.85)',
-	    bottomRight: 'translate(50px, -15px) scale(0.85)'
-	  };
-	  return {
-	    enter: translateInByPlacement[placement],
-	    leave: translateOutByPlacement[placement]
-	  };
-	};
-
-	var ToastItem = /*#__PURE__*/React$1.memo(function (_ref) {
-	  var toast = _ref.toast,
-	    layout = _ref.layout;
-	  var theme = useTheme();
-	  var _useMemo = React$1.useMemo(function () {
-	      return getColors(theme.palette, toast.type);
-	    }, [theme.palette, toast.type]),
-	    color = _useMemo.color,
-	    bgColor = _useMemo.bgColor;
-	  var isReactNode = typeof toast.text !== 'string';
-	  var padding = layout.padding,
-	    margin = layout.margin,
-	    maxHeight = layout.maxHeight,
-	    maxWidth = layout.maxWidth,
-	    width = layout.width,
-	    placement = layout.placement;
-	  var _useMemo2 = React$1.useMemo(function () {
-	      return getTranslateByPlacement(placement);
-	    }, [placement]),
-	    enter = _useMemo2.enter,
-	    leave = _useMemo2.leave;
-	  return /*#__PURE__*/React$1.createElement(CssTransition, {
-	    name: "toast",
-	    visible: toast.visible,
-	    clearTime: 350
-	  }, /*#__PURE__*/React$1.createElement("div", {
-	    key: toast.id,
-	    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "toast"
-	  }, isReactNode ? toast.text : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("div", {
-	    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "message"
-	  }, toast.text), /*#__PURE__*/React$1.createElement("div", {
-	    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "action"
-	  }, makeToastActions(toast.actions, toast.cancel))), /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "1407001838",
-	    dynamic: [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]
-	  }, ".toast.__jsx-style-dynamic-selector{width:".concat(width, ";max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";background-color:").concat(bgColor, ";color:").concat(color, ";border:0;border-radius:").concat(theme.layout.radius, ";opacity:1;box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);overflow:hidden;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;font-size:0.875em;display:-webkit-box;word-break:break-all;padding-right:").concat(theme.layout.gapHalf, ";overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast-enter.__jsx-style-dynamic-selector{opacity:0;height:0;padding:0;margin:0;-webkit-transform:").concat(enter, ";-ms-transform:").concat(enter, ";transform:").concat(enter, ";}.toast-enter-active.__jsx-style-dynamic-selector{opacity:1;height:auto;margin:").concat(margin, ";padding:").concat(padding, ";-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}.toast-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);height:auto;margin:").concat(margin, ";padding:").concat(padding, ";}.toast-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(leave, ";-ms-transform:").concat(leave, ";transform:").concat(leave, ";}"))));
-	});
-
-	/* "use client" */
-
-	var classObjectToString = function classObjectToString(className) {
-	  var keys = Object.keys(className);
-	  var len = keys.length;
-	  var str = '';
-	  for (var index = 0; index < len; index++) {
-	    var key = keys[index];
-	    var val = className[keys[index]];
-	    if (!val) continue;
-	    str = str ? "".concat(str, " ").concat(String(key)) : String(key);
-	  }
-	  return str;
-	};
-	var isObjectClassName = function isObjectClassName(value) {
-	  return _typeof(value) === 'object' && !Array.isArray(value);
-	};
-	var useClasses = function useClasses() {
-	  var len = arguments.length;
-	  var classes = '';
-	  if (len === 0) return classes;
-	  for (var index = 0; index < len; index++) {
-	    var val = index < 0 || arguments.length <= index ? undefined : arguments[index];
-	    if (!val) continue;
-	    if (isObjectClassName(val)) {
-	      classes += " ".concat(classObjectToString(val));
-	    } else {
-	      classes += " ".concat(String(val).trim());
-	    }
-	  }
-	  return classes.trim();
-	};
-
-	var ToastContainer = function ToastContainer() {
-	  var theme = useTheme();
-	  var portal = usePortal('toast');
-	  var _useCurrentState = useCurrentState(false),
-	    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-	    setHovering = _useCurrentState2[1],
-	    hoveringRef = _useCurrentState2[2];
-	  var _useHUIContext = useHUIContext(),
-	    toasts = _useHUIContext.toasts,
-	    updateToasts = _useHUIContext.updateToasts,
-	    toastLayout = _useHUIContext.toastLayout,
-	    lastUpdateToastId = _useHUIContext.lastUpdateToastId;
-	  var memoizedLayout = React$1.useMemo(function () {
-	    return toastLayout;
-	  }, [toastLayout]);
-	  var toastElements = React$1.useMemo(function () {
-	    return toasts.map(function (toast) {
-	      return /*#__PURE__*/React$1.createElement(ToastItem, {
-	        toast: toast,
-	        layout: memoizedLayout,
-	        key: toast._internalIdent
-	      });
-	    });
-	  }, [toasts, memoizedLayout]);
-	  var classNames = React$1.useMemo(function () {
-	    return useClasses('toasts', {
-	      top: isTopPlacement(toastLayout.placement),
-	      left: isLeftPlacement(toastLayout.placement)
-	    });
-	  }, [memoizedLayout]);
-	  var hoverHandler = function hoverHandler(isHovering) {
-	    setHovering(isHovering);
-	    if (isHovering) {
-	      return updateToasts(function (last) {
-	        return last.map(function (toast) {
-	          if (!toast.visible) return toast;
-	          toast._timeout && window.clearTimeout(toast._timeout);
-	          return _objectSpread2(_objectSpread2({}, toast), {}, {
-	            timeout: null
-	          });
-	        });
-	      });
-	    }
-	    updateToasts(function (last) {
-	      return last.map(function (toast, index) {
-	        if (!toast.visible) return toast;
-	        toast._timeout && window.clearTimeout(toast._timeout);
-	        return _objectSpread2(_objectSpread2({}, toast), {}, {
-	          _timeout: function () {
-	            var timer = window.setTimeout(function () {
-	              toast.cancel();
-	              window.clearTimeout(timer);
-	            }, toast.delay + index * 100);
-	            return timer;
-	          }()
-	        });
-	      });
-	    });
-	  };
-	  React$1.useEffect(function () {
-	    var index = toasts.findIndex(function (r) {
-	      return r._internalIdent === lastUpdateToastId;
-	    });
-	    var toast = toasts[index];
-	    if (!toast || toast.visible || !hoveringRef.current) return;
-	    var hasVisible = toasts.find(function (r, i) {
-	      return i < index && r.visible;
-	    });
-	    if (hasVisible || !hoveringRef.current) return;
-	    hoverHandler(false);
-	  }, [toasts, lastUpdateToastId]);
-	  React$1.useEffect(function () {
-	    var timeout = null;
-	    var timer = window.setInterval(function () {
-	      if (toasts.length === 0) return;
-	      timeout = window.setTimeout(function () {
-	        var allInvisible = !toasts.find(function (r) {
-	          return r.visible;
-	        });
-	        allInvisible && updateToasts(function () {
-	          return [];
-	        });
-	        timeout && clearTimeout(timeout);
-	      }, 350);
-	    }, 5000);
-	    return function () {
-	      timer && clearInterval(timer);
-	      timeout && clearTimeout(timeout);
-	    };
-	  }, [toasts]);
-	  if (!portal) return null;
-	  if (!toasts || toasts.length === 0) return null;
-	  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React$1.createElement("div", {
-	    onMouseEnter: function onMouseEnter() {
-	      return hoverHandler(true);
-	    },
-	    onMouseLeave: function onMouseLeave() {
-	      return hoverHandler(false);
-	    },
-	    className: _JSXStyle.dynamic([["622610754", [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (classNames || "")
-	  }, toastElements, /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "622610754",
-	    dynamic: [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]
-	  }, ".toasts.__jsx-style-dynamic-selector{position:fixed;width:auto;max-width:100%;right:".concat(theme.layout.gap, ";bottom:").concat(theme.layout.gap, ";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.top.__jsx-style-dynamic-selector{bottom:unset;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:").concat(theme.layout.gap, ";}.left.__jsx-style-dynamic-selector{right:unset;left:").concat(theme.layout.gap, ";}"))), portal);
-	};
-
-	var HuiProvider = function HuiProvider(_ref) {
-	  var themes = _ref.themes,
-	    themeType = _ref.themeType,
-	    children = _ref.children;
-	  var _React$useState = React$1.useState(''),
-	    _React$useState2 = _slicedToArray(_React$useState, 2),
-	    lastUpdateToastId = _React$useState2[0],
-	    setLastUpdateToastId = _React$useState2[1];
-	  var _useCurrentState = useCurrentState([]),
-	    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-	    toasts = _useCurrentState2[0],
-	    setToasts = _useCurrentState2[1],
-	    toastsRef = _useCurrentState2[2];
-	  var _useCurrentState3 = useCurrentState(defaultToastLayout),
-	    _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
-	    toastLayout = _useCurrentState4[0],
-	    setToastLayout = _useCurrentState4[1],
-	    toastLayoutRef = _useCurrentState4[2];
-	  var updateToasts = function updateToasts(fn) {
-	    var nextToasts = fn(toastsRef.current);
-	    setToasts(nextToasts);
-	  };
-	  var updateToastLayout = function updateToastLayout(fn) {
-	    var nextLayout = fn(toastLayoutRef.current);
-	    setToastLayout(nextLayout);
-	  };
-	  var updateLastToastId = function updateLastToastId(fn) {
-	    setLastUpdateToastId(fn());
-	  };
-	  var initialValue = React$1.useMemo(function () {
-	    return {
-	      toasts: toasts,
-	      toastLayout: toastLayout,
-	      updateToasts: updateToasts,
-	      lastUpdateToastId: lastUpdateToastId,
-	      updateToastLayout: updateToastLayout,
-	      updateLastToastId: updateLastToastId
-	    };
-	  }, [toasts, toastLayout, lastUpdateToastId]);
-	  return /*#__PURE__*/React$1.createElement(HUIContent.Provider, {
-	    value: initialValue
-	  }, /*#__PURE__*/React$1.createElement(ThemeProvider, {
-	    themes: themes,
-	    themeType: themeType
-	  }, children, /*#__PURE__*/React$1.createElement(ToastContainer, null)));
-	};
-
-	// import flush from 'styled-jsx'
-
-	// export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
-
-	// export type FlushToHTML = (opts?: { nonce?: string }) => string
-
-	var CssBaseline = function CssBaseline(_ref) {
-	  var children = _ref.children;
-	  var theme = useTheme();
-	  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "3647548829",
-	    dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.code, theme.font.mono, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.accents_2, theme.layout.radius, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.border, theme.palette.selection, theme.palette.foreground]
-	  }, "html,body{background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";}html{font-size:16px;--helpdice-icons-background:").concat(theme.palette.background, ";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:").concat(theme.font.sans, ";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:").concat(theme.font.sans, ";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.link, ";-webkit-text-decoration:").concat(theme.expressiveness.linkStyle, ";text-decoration:").concat(theme.expressiveness.linkStyle, ";}a:hover{-webkit-text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";}ul,ol{padding:0;list-style-type:none;margin:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";color:").concat(theme.palette.foreground, ";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:").concat(theme.palette.code, ";font-family:").concat(theme.font.mono, ";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\`';}pre{padding:calc(").concat(theme.layout.gap, " * 0.9) ").concat(theme.layout.gap, ";margin:").concat(theme.layout.gap, " 0;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";font-family:").concat(theme.font.mono, ";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{color:").concat(theme.palette.foreground, ";font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:").concat(theme.palette.accents_2, ";}details{background-color:").concat(theme.palette.accents_1, ";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ").concat(theme.layout.gap, ") ").concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";border-radius:").concat(theme.layout.radius, ";margin:1.5em 0;border:1px solid ").concat(theme.palette.border, ";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:").concat(theme.palette.selection, ";color:").concat(theme.palette.foreground, ";}")));
-	};
-	var MemoCssBaseline = /*#__PURE__*/React$1.memo(CssBaseline);
-
-	var getElementOffset = function getElementOffset(el) {
-	  if (!el) return {
-	    top: 0,
-	    left: 0
-	  };
-	  var _el$getBoundingClient = el.getBoundingClientRect(),
-	    top = _el$getBoundingClient.top,
-	    left = _el$getBoundingClient.left;
-	  return {
-	    top: top,
-	    left: left
-	  };
-	};
-	var defaultRect$1 = {
-	  top: -1e3,
-	  left: -1e3,
-	  right: -1e3,
-	  width: 0,
-	  height: 0,
-	  elementTop: -1e3
-	};
-	var getRectFromDOMWithContainer = function getRectFromDOMWithContainer(domRect, getContainer) {
-	  if (!domRect) return defaultRect$1;
-	  var container = getContainer ? getContainer() : null;
-	  var scrollElement = container || document.documentElement;
-	  var _getElementOffset = getElementOffset(container),
-	    offsetTop = _getElementOffset.top,
-	    offsetLeft = _getElementOffset.left;
-	  return _objectSpread2(_objectSpread2({}, domRect), {}, {
-	    width: domRect.width || domRect.right - domRect.left,
-	    height: domRect.height || domRect.top - domRect.bottom,
-	    top: domRect.bottom + scrollElement.scrollTop - offsetTop,
-	    left: domRect.left + scrollElement.scrollLeft - offsetLeft,
-	    elementTop: domRect.top + scrollElement.scrollTop - offsetTop
-	  });
-	};
-	var isUnplacedRect = function isUnplacedRect(rect) {
-	  if (!rect) return true;
-	  return rect.top === defaultRect$1.top && rect.left === defaultRect$1.left;
-	};
-	var getRefRect = function getRefRect(ref, getContainer) {
-	  if (!ref || !ref.current) return defaultRect$1;
-	  var rect = ref.current.getBoundingClientRect();
-	  return getRectFromDOMWithContainer(rect, getContainer);
-	};
-	var getEventRect = function getEventRect(event, getContainer) {
-	  var _event$target;
-	  var rect = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getBoundingClientRect();
-	  if (!rect) return defaultRect$1;
-	  return getRectFromDOMWithContainer(rect, getContainer);
-	};
-	var isRefTarget = function isRefTarget(eventOrRef) {
-	  return typeof (eventOrRef === null || eventOrRef === void 0 ? void 0 : eventOrRef.target) === 'undefined';
-	};
-	var useRect = function useRect(initialState) {
-	  var _useState = React$1.useState(initialState || defaultRect$1),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    rect = _useState2[0],
-	    setRect = _useState2[1];
-	  var updateRect = function updateRect(eventOrRef, getContainer) {
-	    if (isRefTarget(eventOrRef)) return setRect(getRefRect(eventOrRef, getContainer));
-	    setRect(getEventRect(eventOrRef, getContainer));
-	  };
-	  return {
-	    rect: rect,
-	    setRect: updateRect
-	  };
-	};
-
-	var defaultToast = {
-	  delay: 2000,
-	  type: 'default'
-	};
-	var useToasts = function useToasts(layout) {
-	  var _useHUIContext = useHUIContext(),
-	    updateToasts = _useHUIContext.updateToasts,
-	    toasts = _useHUIContext.toasts,
-	    updateToastLayout = _useHUIContext.updateToastLayout,
-	    updateLastToastId = _useHUIContext.updateLastToastId;
-	  React$1.useEffect(function () {
-	    if (!layout) return;
-	    updateToastLayout(function () {
-	      return layout ? _objectSpread2(_objectSpread2({}, defaultToastLayout), layout) : defaultToastLayout;
-	    });
-	  }, []);
-	  var _cancel = function cancel(internalId) {
-	    updateToasts(function (currentToasts) {
-	      return currentToasts.map(function (item) {
-	        if (item._internalIdent !== internalId) return item;
-	        return _objectSpread2(_objectSpread2({}, item), {}, {
-	          visible: false
-	        });
-	      });
-	    });
-	    updateLastToastId(function () {
-	      return internalId;
-	    });
-	  };
-	  var removeAll = function removeAll() {
-	    updateToasts(function (last) {
-	      return last.map(function (toast) {
-	        return _objectSpread2(_objectSpread2({}, toast), {}, {
-	          visible: false
-	        });
-	      });
-	    });
-	  };
-	  var findToastOneByID = function findToastOneByID(id) {
-	    return toasts.find(function (t) {
-	      return t.id === id;
-	    });
-	  };
-	  var removeToastOneByID = function removeToastOneByID(id) {
-	    updateToasts(function (last) {
-	      return last.map(function (toast) {
-	        if (toast.id !== id) return toast;
-	        return _objectSpread2(_objectSpread2({}, toast), {}, {
-	          visible: false
-	        });
-	      });
-	    });
-	  };
-	  var setToast = function setToast(toast) {
-	    var internalIdent = "toast-".concat(getId());
-	    var delay = toast.delay || defaultToast.delay;
-	    if (toast.id) {
-	      var hasIdent = toasts.find(function (t) {
-	        return t.id === toast.id;
-	      });
-	      if (hasIdent) {
-	        throw new Error('Toast: Already have the same key: "ident"');
-	      }
-	    }
-	    updateToasts(function (last) {
-	      var newToast = {
-	        delay: delay,
-	        text: toast.text,
-	        visible: true,
-	        type: toast.type || defaultToast.type,
-	        id: toast.id || internalIdent,
-	        actions: toast.actions || [],
-	        _internalIdent: internalIdent,
-	        _timeout: window.setTimeout(function () {
-	          _cancel(internalIdent);
-	          if (newToast._timeout) {
-	            window.clearTimeout(newToast._timeout);
-	            newToast._timeout = null;
-	          }
-	        }, delay),
-	        cancel: function cancel() {
-	          return _cancel(internalIdent);
-	        }
-	      };
-	      return [].concat(_toConsumableArray(last), [newToast]);
-	    });
-	  };
-	  return {
-	    toasts: toasts,
-	    setToast: setToast,
-	    removeAll: removeAll,
-	    findToastOneByID: findToastOneByID,
-	    removeToastOneByID: removeToastOneByID
-	  };
-	};
-
-	tuple('xs', 'sm', 'md', 'lg', 'xl', 'mobile');
-	tuple('up', 'down', 'default');
-	var defaultResponsiveOptions = {
-	  match: 'default'
-	};
-	var makeQueries = function makeQueries(bp, up, down) {
-	  var queryString = function queryString(item) {
-	    var upQuery = "(min-width: ".concat(item.min, ")");
-	    var downQuery = "(max-width: ".concat(item.max, ")");
-	    return up ? upQuery : down ? downQuery : "".concat(upQuery, " and ").concat(downQuery);
-	  };
-	  var xs = queryString(bp.xs);
-	  return {
-	    xs: xs,
-	    mobile: xs,
-	    sm: queryString(bp.sm),
-	    md: queryString(bp.md),
-	    lg: queryString(bp.lg),
-	    xl: queryString(bp.xl)
-	  };
-	};
-	var useMediaQuery = function useMediaQuery(breakpoint) {
-	  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultResponsiveOptions;
-	  var _options$match = options.match,
-	    matchType = _options$match === void 0 ? 'default' : _options$match,
-	    _options$ssrMatchMedi = options.ssrMatchMedia,
-	    ssrMatchMedia = _options$ssrMatchMedi === void 0 ? null : _options$ssrMatchMedi;
-	  var supportMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-	  var theme = useTheme();
-	  var mediaQueries = React$1.useMemo(function () {
-	    var up = matchType === 'up';
-	    var down = matchType === 'down';
-	    return makeQueries(theme.breakpoints, up, down);
-	  }, [theme.breakpoints, options]);
-	  var query = React$1.useMemo(function () {
-	    return mediaQueries[breakpoint];
-	  }, [mediaQueries, breakpoint]);
-	  var matchQuery = function matchQuery(q) {
-	    return window.matchMedia(q);
-	  };
-
-	  /**
-	   * Do nothing in the server-side rendering.
-	   * If server match query fucntion is simulated, return user-defined value first.
-	   */
-	  var _useState = React$1.useState(function () {
-	      if (supportMedia) return matchQuery(query).matches;
-	      if (ssrMatchMedia && typeof ssrMatchMedia === 'function') {
-	        return ssrMatchMedia(query).matches;
-	      }
-	      return false;
-	    }),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    state = _useState2[0],
-	    setState = _useState2[1];
-	  React$1.useEffect(function () {
-	    if (!supportMedia) return;
-	    var queryList = matchQuery(query);
-	    var update = function update() {
-	      return setState(matchQuery(query).matches);
-	    };
-	    update();
-
-	    /**
-	     * addListener is deprecated. EventTarget.addEventListener is recommended.
-	     * But in some old browsers, MediaQueryList does not inherit from EventTarget.
-	     */
-	    queryList.addListener(update);
-	    return function () {
-	      queryList.removeListener(update);
-	    };
-	  }, [supportMedia]);
-	  return state;
-	};
-
-	/* "use client" */
-
-	var usePrevious = function usePrevious(state) {
-	  var ref = React$1.useRef(null);
-	  React$1.useEffect(function () {
-	    ref.current = state;
-	  });
-	  return ref ? ref.current : null;
-	};
-
-	var _excluded$1 = ["rect", "visible", "hoverHeightRatio", "hoverWidthRatio", "activeOpacity", "className"];
-	var Highlight = function Highlight(_ref) {
-	  var rect = _ref.rect,
-	    visible = _ref.visible,
-	    _ref$hoverHeightRatio = _ref.hoverHeightRatio,
-	    hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 1 : _ref$hoverHeightRatio,
-	    _ref$hoverWidthRatio = _ref.hoverWidthRatio,
-	    hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1 : _ref$hoverWidthRatio,
-	    _ref$activeOpacity = _ref.activeOpacity,
-	    activeOpacity = _ref$activeOpacity === void 0 ? 0.8 : _ref$activeOpacity,
-	    className = _ref.className,
-	    props = _objectWithoutProperties(_ref, _excluded$1);
-	  var theme = useTheme();
-	  var ref = React$1.useRef(null);
-	  var isFirstVisible = usePrevious(isUnplacedRect(rect));
-	  var position = React$1.useMemo(function () {
-	    var width = rect.width * hoverWidthRatio;
-	    var height = rect.height * hoverHeightRatio;
-	    return {
-	      width: "".concat(width, "px"),
-	      left: "".concat(rect.left + (rect.width - width) / 2, "px"),
-	      height: "".concat(height, "px"),
-	      top: "".concat(rect.elementTop + (rect.height - height) / 2, "px"),
-	      transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top'
-	    };
-	  }, [rect, hoverWidthRatio, hoverHeightRatio]);
-	  return /*#__PURE__*/React$1.createElement("div", _extends({
-	    ref: ref
-	  }, props, {
-	    className: _JSXStyle.dynamic([["603024321", [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]]]) + " " + (props && props.className != null && props.className || useClasses('highlight', className) || "")
-	  }), /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "603024321",
-	    dynamic: [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]
-	  }, ".highlight.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_2, ";position:absolute;border-radius:5px;width:").concat(position.width, ";left:").concat(position.left, ";height:").concat(position.height, ";top:").concat(position.top, ";opacity:").concat(visible ? activeOpacity : 0, ";-webkit-transition:0.15s ease;transition:0.15s ease;-webkit-transition-property:").concat(position.transition, ";transition-property:").concat(position.transition, ";}")));
-	};
-
-	var Ellipsis = function Ellipsis(_ref) {
-	  var children = _ref.children,
-	    height = _ref.height;
-	  return /*#__PURE__*/React$1.createElement("span", {
-	    className: _JSXStyle.dynamic([["822089635", [height]]])
-	  }, children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "822089635",
-	    dynamic: [height]
-	  }, "span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;}")));
-	};
-	var ellipsis = /*#__PURE__*/React$1.memo(Ellipsis);
-
-	var getRealShape = function getRealShape(el) {
-	  var defaultShape = {
-	    width: 0,
-	    height: 0
-	  };
-	  if (!el || typeof window === 'undefined') return defaultShape;
-	  var rect = el.getBoundingClientRect();
-	  var _window$getComputedSt = window.getComputedStyle(el),
-	    width = _window$getComputedSt.width,
-	    height = _window$getComputedSt.height;
-	  var getCSSStyleVal = function getCSSStyleVal(str, parentNum) {
-	    if (!str) return 0;
-	    var strVal = str.includes('px') ? +str.split('px')[0] : str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str;
-	    return Number.isNaN(+strVal) ? 0 : +strVal;
-	  };
-	  return {
-	    width: getCSSStyleVal("".concat(width), rect.width),
-	    height: getCSSStyleVal("".concat(height), rect.height)
-	  };
-	};
-	var useRealShape = function useRealShape(ref) {
-	  var _useState = React$1.useState({
-	      width: 0,
-	      height: 0
-	    }),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    state = _useState2[0],
-	    setState = _useState2[1];
-	  var update = function update() {
-	    var _getRealShape = getRealShape(ref.current),
-	      width = _getRealShape.width,
-	      height = _getRealShape.height;
-	    setState({
-	      width: width,
-	      height: height
-	    });
-	  };
-	  React$1.useEffect(function () {
-	    return update();
-	  }, [ref.current]);
-	  return [state, update];
-	};
-
-	var Expand = function Expand(_ref) {
-	  var _ref$isExpanded = _ref.isExpanded,
-	    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
-	    _ref$delay = _ref.delay,
-	    delay = _ref$delay === void 0 ? 200 : _ref$delay,
-	    children = _ref.children;
-	  var _useState = React$1.useState(isExpanded ? 'auto' : '0'),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    height = _useState2[0],
-	    setHeight = _useState2[1];
-	  var _useState3 = React$1.useState(isExpanded),
-	    _useState4 = _slicedToArray(_useState3, 2),
-	    selfExpanded = _useState4[0],
-	    setSelfExpanded = _useState4[1];
-	  var _useState5 = React$1.useState(isExpanded),
-	    _useState6 = _slicedToArray(_useState5, 2),
-	    visible = _useState6[0],
-	    setVisible = _useState6[1];
-	  var contentRef = React$1.useRef(null);
-	  var entryTimer = React$1.useRef();
-	  var leaveTimer = React$1.useRef();
-	  var resetTimer = React$1.useRef();
-	  var _useRealShape = useRealShape(contentRef),
-	    _useRealShape2 = _slicedToArray(_useRealShape, 2),
-	    state = _useRealShape2[0],
-	    updateShape = _useRealShape2[1];
-	  var classes = useClasses('container', {
-	    expanded: selfExpanded
-	  });
-	  React$1.useEffect(function () {
-	    return setHeight("".concat(state.height, "px"));
-	  }, [state.height]);
-	  React$1.useEffect(function () {
-	    // show element or reset height.
-	    // force an update once manually, even if the element does not change.
-	    // (the height of the element might be "auto")
-	    if (isExpanded) {
-	      setVisible(isExpanded);
-	    } else {
-	      updateShape();
-	      setHeight("".concat(state.height, "px"));
-	    }
-
-	    // show expand animation
-	    entryTimer.current = window.setTimeout(function () {
-	      setSelfExpanded(isExpanded);
-	      clearTimeout(entryTimer.current);
-	    }, 30);
-
-	    // Reset height after animation
-	    if (isExpanded) {
-	      resetTimer.current = window.setTimeout(function () {
-	        setHeight('auto');
-	        clearTimeout(resetTimer.current);
-	      }, delay);
-	    } else {
-	      leaveTimer.current = window.setTimeout(function () {
-	        setVisible(isExpanded);
-	        clearTimeout(leaveTimer.current);
-	      }, delay / 2);
-	    }
-	    return function () {
-	      clearTimeout(entryTimer.current);
-	      clearTimeout(leaveTimer.current);
-	      clearTimeout(resetTimer.current);
-	    };
-	  }, [isExpanded]);
-	  return /*#__PURE__*/React$1.createElement("div", {
-	    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + (classes || "")
-	  }, /*#__PURE__*/React$1.createElement("div", {
-	    ref: contentRef,
-	    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + "content"
-	  }, children), /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "1918690829",
-	    dynamic: [visible ? 'visible' : 'hidden', delay, height]
-	  }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
-	};
-	Expand.displayName = 'Expand';
-
-	/* "use client" */
-
-	var useResize = function useResize(callback) {
-	  var immediatelyInvoke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-	  React$1.useEffect(function () {
-	    var fn = function fn() {
-	      return callback();
-	    };
-	    if (immediatelyInvoke) {
-	      fn();
-	    }
-	    window.addEventListener('resize', fn);
-	    return function () {
-	      return window.removeEventListener('resize', fn);
-	    };
-	  }, []);
-	};
-
-	/* "use client" */
-
-	var useClickAnyWhere = function useClickAnyWhere(handler) {
-	  React$1.useEffect(function () {
-	    var callback = function callback(event) {
-	      return handler(event);
-	    };
-	    document.addEventListener('click', callback);
-	    return function () {
-	      return document.removeEventListener('click', callback);
-	    };
-	  }, [handler]);
-	};
-
-	/* "use client" */
-
-	var useDOMObserver = function useDOMObserver(ref) {
-	  var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-	  var config = {
-	    attributes: false,
-	    childList: true,
-	    subtree: true
-	  };
-	  React$1.useEffect(function () {
-	    if (!ref || !ref.current) return;
-	    var unmount = false;
-	    var done = function done() {
-	      if (unmount) return;
-	      callback.apply(void 0, arguments);
-	    };
-	    var observer = new MutationObserver(done);
-	    observer.observe(ref.current, config);
-	    return function () {
-	      unmount = true;
-	      observer.disconnect();
-	    };
-	  }, [ref]);
-	};
-
-	var warningStack = {};
-	var useWarning = function useWarning(message, component) {
-	  var tag = ' ';
-	  var log = "[Helpdice UI]".concat(tag, ": ").concat(message);
-	  if (typeof console === 'undefined') return;
-	  if (warningStack[log]) return;
-	  warningStack[log] = true;
-	  if (process.env.NODE_ENV !== 'production') {
-	    return console.error(log);
-	  }
-	  console.warn(log);
-	};
-
-	var defaultRect = {
-	  top: -1e3,
-	  left: -1e3,
-	  right: -1e3,
-	  width: 0
-	};
-	var Dropdown = /*#__PURE__*/React$1.memo(function (_ref) {
-	  var children = _ref.children,
-	    parent = _ref.parent,
-	    visible = _ref.visible,
-	    disableMatchWidth = _ref.disableMatchWidth,
-	    getPopupContainer = _ref.getPopupContainer;
-	  var el = usePortal('dropdown', getPopupContainer);
-	  var _useState = React$1.useState(defaultRect),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    rect = _useState2[0],
-	    setRect = _useState2[1];
-	  var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
-	  if (!parent) return null;
-
-	  /* istanbul ignore next */
-	  if (process.env.NODE_ENV !== 'production') {
-	    if (getPopupContainer && getPopupContainer()) {
-	      var _el = getPopupContainer();
-	      var style = window.getComputedStyle(_el);
-	      if (style.position === 'static') {
-	        useWarning('The element specified by "getPopupContainer" must have "position" set.');
-	      }
-	    }
-	  }
-	  var updateRect = function updateRect() {
-	    var _getRefRect = getRefRect(parent, getPopupContainer),
-	      top = _getRefRect.top,
-	      left = _getRefRect.left,
-	      right = _getRefRect.right,
-	      nativeWidth = _getRefRect.width;
-	    setRect({
-	      top: top,
-	      left: left,
-	      right: right,
-	      width: nativeWidth
-	    });
-	  };
-	  useResize(updateRect);
-	  useClickAnyWhere(function () {
-	    var _getRefRect2 = getRefRect(parent, getPopupContainer),
-	      top = _getRefRect2.top,
-	      left = _getRefRect2.left;
-	    var shouldUpdatePosition = top !== rect.top || left !== rect.left;
-	    if (!shouldUpdatePosition) return;
-	    updateRect();
-	  });
-	  useDOMObserver(parent, function () {
-	    updateRect();
-	  });
-	  React$1.useEffect(function () {
-	    if (!parent || !parent.current) return;
-	    parent.current.addEventListener('mouseenter', updateRect);
-	    /* istanbul ignore next */
-	    return function () {
-	      if (!parent || !parent.current) return;
-	      parent.current.removeEventListener('mouseenter', updateRect);
-	    };
-	  }, [parent]);
-	  var clickHandler = function clickHandler(event) {
-	    event.stopPropagation();
-	    event.nativeEvent.stopImmediatePropagation();
-	    event.preventDefault();
-	  };
-	  var mouseDownHandler = function mouseDownHandler(event) {
-	    event.preventDefault();
-	  };
-	  if (!el) return null;
-	  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React$1.createElement(CssTransition, {
-	    visible: visible
-	  }, /*#__PURE__*/React$1.createElement("div", {
-	    onClick: clickHandler,
-	    onMouseDown: mouseDownHandler,
-	    className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || "")
-	  }, children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "1644673105",
-	    dynamic: [rect.top + 2, rect.left, rect.width, rect.width]
-	  }, ".dropdown.__jsx-style-dynamic-selector{position:absolute;top:".concat(rect.top + 2, "px;left:").concat(rect.left, "px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:").concat(rect.width, "px;}.disable-match.__jsx-style-dynamic-selector{min-width:").concat(rect.width, "px;}")))), el);
-	});
-
-	var _excluded = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
-	var Backdrop = /*#__PURE__*/React$1.memo(function (_ref) {
-	  var children = _ref.children,
-	    _ref$onClick = _ref.onClick,
-	    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-	    _ref$visible = _ref.visible,
-	    visible = _ref$visible === void 0 ? false : _ref$visible,
-	    width = _ref.width,
-	    _ref$onContentClick = _ref.onContentClick,
-	    onContentClick = _ref$onContentClick === void 0 ? function () {} : _ref$onContentClick,
-	    _ref$backdropClassNam = _ref.backdropClassName,
-	    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
-	    _ref$positionClassNam = _ref.positionClassName,
-	    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
-	    _ref$layerClassName = _ref.layerClassName,
-	    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName,
-	    props = _objectWithoutProperties(_ref, _excluded);
-	  var theme = useTheme();
-	  var _useCurrentState = useCurrentState(false),
-	    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-	    setIsContentMouseDown = _useCurrentState2[1],
-	    IsContentMouseDownRef = _useCurrentState2[2];
-	  var clickHandler = function clickHandler(event) {
-	    if (IsContentMouseDownRef.current) return;
-	    onClick && onClick(event);
-	  };
-	  var mouseUpHandler = function mouseUpHandler() {
-	    if (!IsContentMouseDownRef.current) return;
-	    var timer = setTimeout(function () {
-	      setIsContentMouseDown(false);
-	      clearTimeout(timer);
-	    }, 0);
-	  };
-	  return /*#__PURE__*/React$1.createElement(CssTransition, {
-	    name: "backdrop-wrapper",
-	    visible: visible,
-	    clearTime: 300
-	  }, /*#__PURE__*/React$1.createElement("div", _extends({
-	    onClick: clickHandler,
-	    onMouseUp: mouseUpHandler
-	  }, props, {
-	    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || useClasses('backdrop', backdropClassName) || "")
-	  }), /*#__PURE__*/React$1.createElement("div", {
-	    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('layer', layerClassName) || "")
-	  }), /*#__PURE__*/React$1.createElement("div", {
-	    onClick: onContentClick,
-	    onMouseDown: function onMouseDown() {
-	      return setIsContentMouseDown(true);
-	    },
-	    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('position', positionClassName) || "")
-	  }, children), /*#__PURE__*/React$1.createElement(_JSXStyle, {
-	    id: "2021762493",
-	    dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]
-	  }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
-	});
-	Backdrop.displayName = 'Backdrop';
-
-	dist.Backdrop = Backdrop;
-	dist.CssBaseline = MemoCssBaseline;
-	dist.CssTransition = CssTransition;
-	dist.Dropdown = Dropdown;
-	dist.Ellipsis = ellipsis;
-	dist.Expand = Expand;
-	dist.Highlight = Highlight;
-	dist.Themes = Themes;
-	dist.UiProvider = HuiProvider;
-	dist.useAllThemes = useAllThemes;
-	dist.useClasses = useClasses;
-	dist.useCurrentState = useCurrentState;
-	dist.useMediaQuery = useMediaQuery;
-	dist.useRect = useRect;
-	dist.useTheme = useTheme;
-	dist.useToasts = useToasts;
-	return dist;
-}
-
-var distExports = /*@__PURE__*/ requireDist();
-
 var _excluded$4 = ["opacity"];
 var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  var theme = distExports.useTheme();
+  var theme$1 = 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")
+    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.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.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.palette.accents_1, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_2, ", ").concat(theme.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;}}")));
+    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;}}")));
 });
 ImageSkeleton.displayName = 'ImageSkeleton';
 
@@ -2923,7 +804,7 @@ var withScale = function withScale(Render) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$3);
-    var _useTheme = distExports.useTheme(),
+    var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
       pl = props.pl,
@@ -3021,7 +902,7 @@ var ImageComponent = function ImageComponent(_ref) {
   var width = getScaleProps(['width', 'w']);
   var height = getScaleProps(['height', 'h']);
   var showAnimation = !disableSkeleton && width && height;
-  var theme = distExports.useTheme();
+  var theme$1 = theme.useTheme();
   var _useState = React.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
@@ -3058,7 +939,7 @@ var ImageComponent = function ImageComponent(_ref) {
     };
   }, [loading]);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4175752462", [theme.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')]]]) + " " + (distExports.useClasses('image', className) || "")
+    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({
@@ -3066,11 +947,11 @@ var ImageComponent = function ImageComponent(_ref) {
     onLoad: imageLoaded,
     src: url
   }, props, {
-    className: _JSXStyle.dynamic([["4175752462", [theme.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 || "")
+    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.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.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;}")));
+    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;}")));
 };
 ImageComponent.displayName = 'Image';
 var Image = withScale(ImageComponent);
@@ -3155,26 +1036,26 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     arrow = _ref$arrow === void 0 ? false : _ref$arrow,
     icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  var theme = distExports.useTheme();
+  var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var linkColor = showColor || block ? theme.palette.link : 'inherit';
-  var hoverColor = showColor || block ? theme.palette.successLight : 'inherit';
+  var linkColor = showColor || block ? theme$1.palette.link : 'inherit';
+  var hoverColor = showColor || block ? theme$1.palette.successLight : 'inherit';
   var decoration = underline ? 'underline' : 'none';
-  var classes = distExports.useClasses('link', {
+  var classes = theme.useClasses('link', {
     block: block
   }, className);
   return /*#__PURE__*/React.createElement("a", _extends({
     href: href
   }, props, {
     ref: ref,
-    className: _JSXStyle.dynamic([["2838069667", [linkColor, block ? theme.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.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+    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([["2838069667", [linkColor, block ? theme.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.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + "link-extra"
+    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: "2838069667",
-    dynamic: [linkColor, block ? theme.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.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.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.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
+    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, ";}")));
 });
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);
@@ -3250,12 +1131,12 @@ var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var theme = distExports.useTheme();
+  var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var colors = React.useMemo(function () {
-    return getBrowserColors(invert, theme.palette);
-  }, [invert, theme.palette]);
+    return getBrowserColors(invert, theme$1.palette);
+  }, [invert, theme$1.palette]);
   var input = React.useMemo(function () {
     if (url) return getAddressInput(url, showFullLink, colors, anchorProps);
     if (title) return getTitle(title, colors);
@@ -3264,21 +1145,21 @@ var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, props, {
-    className: _JSXStyle.dynamic([["1856409351", [theme.expressiveness.shadowLarge, theme.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.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || distExports.useClasses('browser', className) || "")
+    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.expressiveness.shadowLarge, theme.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.layout.gapHalf]]])
+    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.expressiveness.shadowLarge, theme.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.layout.gapHalf]]]) + " " + "traffic"
+    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.expressiveness.shadowLarge, theme.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.layout.gapHalf]]]) + " " + "close"
+    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.expressiveness.shadowLarge, theme.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.layout.gapHalf]]]) + " " + "mini"
+    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.expressiveness.shadowLarge, theme.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.layout.gapHalf]]]) + " " + "full"
+    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.expressiveness.shadowLarge, theme.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.layout.gapHalf]
-  }, ".browser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:".concat(theme.expressiveness.shadowLarge, ";max-width:100%;border-radius:").concat(theme.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.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;}")));
+    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;}")));
 });
 ImageBrowserComponent.displayName = 'ImageBrowser';
 var ImageBrowser = withScale(ImageBrowserComponent);