@ttoss/ui 1.30.0 → 1.30.2

package/dist/index.js

@@ -6,6 +6,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,14 +26,136 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// tsup.inject.js
+var React;
+var init_tsup_inject = __esm({
+  "tsup.inject.js"() {
+    "use strict";
+    React = __toESM(require("react"));
+  }
+});
+
+// ../../node_modules/deepmerge/dist/cjs.js
+var require_cjs = __commonJS({
+  "../../node_modules/deepmerge/dist/cjs.js"(exports, module2) {
+    "use strict";
+    init_tsup_inject();
+    var isMergeableObject = function isMergeableObject2(value) {
+      return isNonNullObject(value) && !isSpecial(value);
+    };
+    function isNonNullObject(value) {
+      return !!value && typeof value === "object";
+    }
+    function isSpecial(value) {
+      var stringValue = Object.prototype.toString.call(value);
+      return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+    }
+    var canUseSymbol = typeof Symbol === "function" && Symbol.for;
+    var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for("react.element") : 60103;
+    function isReactElement(value) {
+      return value.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    function emptyTarget(val) {
+      return Array.isArray(val) ? [] : {};
+    }
+    function cloneUnlessOtherwiseSpecified(value, options) {
+      return options.clone !== false && options.isMergeableObject(value) ? deepmerge2(emptyTarget(value), value, options) : value;
+    }
+    function defaultArrayMerge(target, source, options) {
+      return target.concat(source).map(function(element) {
+        return cloneUnlessOtherwiseSpecified(element, options);
+      });
+    }
+    function getMergeFunction(key, options) {
+      if (!options.customMerge) {
+        return deepmerge2;
+      }
+      var customMerge = options.customMerge(key);
+      return typeof customMerge === "function" ? customMerge : deepmerge2;
+    }
+    function getEnumerableOwnPropertySymbols(target) {
+      return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+        return Object.propertyIsEnumerable.call(target, symbol);
+      }) : [];
+    }
+    function getKeys(target) {
+      return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+    }
+    function propertyIsOnObject(object, property) {
+      try {
+        return property in object;
+      } catch (_) {
+        return false;
+      }
+    }
+    function propertyIsUnsafe(target, key) {
+      return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+    }
+    function mergeObject(target, source, options) {
+      var destination = {};
+      if (options.isMergeableObject(target)) {
+        getKeys(target).forEach(function(key) {
+          destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+        });
+      }
+      getKeys(source).forEach(function(key) {
+        if (propertyIsUnsafe(target, key)) {
+          return;
+        }
+        if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+          destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+        } else {
+          destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+        }
+      });
+      return destination;
+    }
+    function deepmerge2(target, source, options) {
+      options = options || {};
+      options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+      options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+      options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+      var sourceIsArray = Array.isArray(source);
+      var targetIsArray = Array.isArray(target);
+      var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+      if (!sourceAndTargetTypesMatch) {
+        return cloneUnlessOtherwiseSpecified(source, options);
+      } else if (sourceIsArray) {
+        return options.arrayMerge(target, source, options);
+      } else {
+        return mergeObject(target, source, options);
+      }
+    }
+    deepmerge2.all = function deepmergeAll(array, options) {
+      if (!Array.isArray(array)) {
+        throw new Error("first argument should be an array");
+      }
+      return array.reduce(function(prev, next) {
+        return deepmerge2(prev, next, options);
+      }, {});
+    };
+    var deepmerge_1 = deepmerge2;
+    module2.exports = deepmerge_1;
+  }
+});
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BaseStyles: () => import_theme_ui23.BaseStyles,
   Box: () => import_theme_ui3.Box,
   Button: () => Button,
   Card: () => import_theme_ui5.Card,
@@ -36,7 +165,7 @@ __export(src_exports, {
   Flex: () => import_theme_ui7.Flex,
   Grid: () => import_theme_ui8.Grid,
   Heading: () => import_theme_ui9.Heading,
-  Icon: () => Icon,
+  Icon: () => Icon2,
   Image: () => import_theme_ui10.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => import_theme_ui11.Input,
@@ -49,122 +178,261 @@ __export(src_exports, {
   Spinner: () => import_theme_ui17.Spinner,
   Text: () => import_theme_ui15.Text,
   Textarea: () => import_theme_ui21.Textarea,
-  ThemeProvider: () => ThemeProvider_default,
+  ThemeProvider: () => ThemeProvider,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
+init_tsup_inject();
+var import_theme_ui23 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
-var React2 = __toESM(require("react"));
+init_tsup_inject();
 
 // ../theme/dist/esm/index.js
+init_tsup_inject();
+var import_deepmerge = __toESM(require_cjs());
+var fontSizes = {
+  "2xs": "0.5rem",
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+var fontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800
+};
+var letterSpacings = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+var space = {
+  none: 0,
+  "2xs": "2px",
+  xs: "3px",
+  sm: "5px",
+  md: "8px",
+  lg: "13px",
+  xl: "21px",
+  "2xl": "34px",
+  "3xl": "55px",
+  "4xl": "89px",
+  "5xl": "144px",
+  "6xl": "233px",
+  "7xl": "377px"
+};
+var coreFonts = {
+  main: '"Atkinson Hyperlegible", sans-serif',
+  contrast: '"Work Sans", sans-serif',
+  monospace: '"Inconsolata", sans-serif'
+};
+var brandColors = {
+  complimentary: "#f5f5f5",
+  main: "#292c2a",
+  darkNeutral: "#515389",
+  accent: "#0000ff",
+  lightNeutral: "#e3e3e3"
+};
+var coreColors = {
+  ...brandColors,
+  gray100: "#f0f1f3",
+  gray200: "#ced1d7",
+  gray300: "#acb1ba",
+  gray400: "#8b919e",
+  gray500: "#6b7280",
+  gray600: "#535863",
+  gray700: "#3b3f46",
+  gray800: "#23252a",
+  gray900: "#0b0b0d",
+  black: "#000000",
+  red100: "#ffebeb",
+  red200: "#fdbfbf",
+  red300: "#f99595",
+  red400: "#f56c6c",
+  red500: "#ef4444",
+  red600: "#e42828",
+  red700: "#c62121",
+  white: "#ffffff"
+};
+var coreBorders = {
+  none: "0px solid",
+  thin: "1px solid",
+  medium: "2px solid",
+  thick: "4px solid"
+};
+var coreRadii = {
+  sharp: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  "2xl": "16px",
+  "3xl": "24px",
+  circle: "9999px"
+};
 var BruttalTheme = {
+  /**
+   * Tokens
+   */
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  space,
   colors: {
-    text: "#0D0D0D",
-    background: "#fff",
-    backgroundBrand: "#C2C2C2",
-    primary: "#0D0D0D",
-    secondary: "#639",
-    gray: "#555",
-    muted: "#f6f6f6",
-    danger: "red",
-    accent: "#0000FF",
-    textOnSurface: "#FFFFFF"
+    background: coreColors.lightNeutral,
+    text: coreColors.gray900,
+    muted: coreColors.gray200,
+    outline: coreColors.gray200,
+    primary: coreColors.main,
+    onPrimary: coreColors.white,
+    secondary: coreColors.gray500,
+    onSecondary: coreColors.white,
+    highlight: coreColors.darkNeutral,
+    onHighlight: coreColors.white,
+    accent: coreColors.accent,
+    onAccent: coreColors.white,
+    neutral: coreColors.white,
+    onNeutral: coreColors.gray900
   },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
   fonts: {
-    body: '"Inconsolata", sans-serif',
-    heading: '"Work Sans", sans-serif',
-    monospace: '"Inconsolata", sans-serif'
-  },
-  fontSizes: {
-    xxs: "0.5rem",
-    xs: "0.75rem",
-    sm: "0.875rem",
-    base: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem",
-    "7xl": "4.5rem",
-    "8xl": "6rem",
-    "9xl": "8rem"
+    h1: coreFonts.contrast,
+    h2: coreFonts.contrast,
+    h3: coreFonts.contrast,
+    h4: coreFonts.contrast,
+    h5: coreFonts.contrast,
+    h6: coreFonts.contrast,
+    body: coreFonts.main,
+    highlight: coreFonts.main,
+    caption: coreFonts.monospace
   },
-  fontWeights: {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800
+  borders: {
+    default: coreBorders.medium
   },
-  letterSpacings: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0em",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em"
+  radii: {
+    default: coreRadii.sm
   },
+  /**
+   * Global styles
+   */
   styles: {
     root: {
       fontFamily: "body",
       fontWeight: "normal"
-    },
-    a: {
-      color: "primary",
-      textDecoration: "underline",
-      cursor: "pointer",
-      fontFamily: "body"
-    },
-    progress: {
-      color: "primary",
-      backgroundColor: "background"
     }
   },
-  borders: [0, "3px solid #0D0D0D"],
+  /**
+   * Components
+   */
   buttons: {
-    cta: {
-      color: "white",
-      backgroundColor: "primary"
-    },
-    muted: {
-      color: "text",
-      backgroundColor: "muted"
-    },
-    danger: {
-      color: "white",
-      backgroundColor: "danger"
+    accent: {
+      backgroundColor: "accent",
+      color: "onAccent",
+      fontFamily: "highlight",
+      fontWeight: "bold",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "accent",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
+      }
     },
     primary: {
+      backgroundColor: "primary",
+      color: "onPrimary",
+      fontFamily: "body",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "outline",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":active": {
+        backgroundColor: "primary",
+        color: "onPrimary",
+        borderColor: "outline"
+      },
       ":disabled": {
-        backgroundColor: "backgroundBrand",
-        cursor: "default"
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
       }
     },
     secondary: {
-      color: "text",
-      backgroundColor: "white",
-      borderColor: "text",
-      borderWidth: 1,
-      borderStyle: "solid",
+      backgroundColor: "secondary",
+      color: "onSecondary",
+      fontFamily: "body",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "outline",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
+      }
+    },
+    neutral: {
+      backgroundColor: "neutral",
+      color: "onNeutral",
+      fontFamily: "body",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "outline",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
       ":disabled": {
-        opacity: 0.5,
-        cursor: "default"
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
       }
+    },
+    danger: {
+      color: "white",
+      backgroundColor: "danger"
     }
   },
   cards: {
     primary: {
-      backgroundColor: "background",
+      backgroundColor: "primary",
       border: "1px solid black",
       padding: [4, 5],
       display: "flex",
@@ -222,7 +490,8 @@ var BruttalTheme = {
 };
 var BruttalFonts = [
   "https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900",
-  "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900"
+  "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900",
+  "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 ];
 
 // src/theme/ThemeProvider.tsx
@@ -231,114 +500,2150 @@ var import_theme_ui = require("theme-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ThemeProvider = ({
   children,
-  theme = {},
+  theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  const mergedTheme = React2.useMemo(() => {
-    if (typeof theme === "function") {
-      return theme;
-    }
-    return (0, import_theme_ui.merge)(BruttalTheme, theme);
-  }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, { theme: mergedTheme, children: [
-    fonts.map((url) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react.Global,
-        {
-          styles: import_react.css`
-                @import url('${url}');
-              `
-        },
-        url
-      );
-    }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react.Global,
+      {
+        styles: import_react.css`
+            ${fonts.map((url) => {
+          return `@import url('${url}');`;
+        }).join("\n")}
+          `
+      }
+    ),
     children
   ] }) });
 };
-var ThemeProvider_default = ThemeProvider;
 
 // src/theme/useTheme.ts
+init_tsup_inject();
 var import_theme_ui2 = require("theme-ui");
 var useTheme = import_theme_ui2.useThemeUI;
 
 // src/components/Box.tsx
+init_tsup_inject();
 var import_theme_ui3 = require("theme-ui");
 
 // src/components/Button.tsx
+init_tsup_inject();
+var React3 = __toESM(require("react"));
 var import_theme_ui4 = require("theme-ui");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_theme_ui4.Button,
-    {
+
+// src/components/Icon.tsx
+init_tsup_inject();
+
+// ../../node_modules/@iconify-icon/react/dist/iconify.mjs
+init_tsup_inject();
+var import_react2 = __toESM(require("react"), 1);
+
+// ../../node_modules/iconify-icon/dist/iconify-icon.mjs
+init_tsup_inject();
+var defaultIconDimensions = Object.freeze(
+  {
+    left: 0,
+    top: 0,
+    width: 16,
+    height: 16
+  }
+);
+var defaultIconTransformations = Object.freeze({
+  rotate: 0,
+  vFlip: false,
+  hFlip: false
+});
+var defaultIconProps = Object.freeze({
+  ...defaultIconDimensions,
+  ...defaultIconTransformations
+});
+var defaultExtendedIconProps = Object.freeze({
+  ...defaultIconProps,
+  body: "",
+  hidden: false
+});
+var defaultIconSizeCustomisations = Object.freeze({
+  width: null,
+  height: null
+});
+var defaultIconCustomisations = Object.freeze({
+  ...defaultIconSizeCustomisations,
+  ...defaultIconTransformations
+});
+function rotateFromString(value, defaultValue = 0) {
+  const units = value.replace(/^-?[0-9.]*/, "");
+  function cleanup(value2) {
+    while (value2 < 0) {
+      value2 += 4;
+    }
+    return value2 % 4;
+  }
+  if (units === "") {
+    const num = parseInt(value);
+    return isNaN(num) ? 0 : cleanup(num);
+  } else if (units !== value) {
+    let split = 0;
+    switch (units) {
+      case "%":
+        split = 25;
+        break;
+      case "deg":
+        split = 90;
+    }
+    if (split) {
+      let num = parseFloat(value.slice(0, value.length - units.length));
+      if (isNaN(num)) {
+        return 0;
+      }
+      num = num / split;
+      return num % 1 === 0 ? cleanup(num) : 0;
+    }
+  }
+  return defaultValue;
+}
+var separator = /[\s,]+/;
+function flipFromString(custom, flip) {
+  flip.split(separator).forEach((str) => {
+    const value = str.trim();
+    switch (value) {
+      case "horizontal":
+        custom.hFlip = true;
+        break;
+      case "vertical":
+        custom.vFlip = true;
+        break;
+    }
+  });
+}
+var defaultCustomisations = {
+  ...defaultIconCustomisations,
+  preserveAspectRatio: ""
+};
+function getCustomisations(node) {
+  const customisations = {
+    ...defaultCustomisations
+  };
+  const attr = (key, def) => node.getAttribute(key) || def;
+  customisations.width = attr("width", null);
+  customisations.height = attr("height", null);
+  customisations.rotate = rotateFromString(attr("rotate", ""));
+  flipFromString(customisations, attr("flip", ""));
+  customisations.preserveAspectRatio = attr("preserveAspectRatio", attr("preserveaspectratio", ""));
+  return customisations;
+}
+function haveCustomisationsChanged(value1, value2) {
+  for (const key in defaultCustomisations) {
+    if (value1[key] !== value2[key]) {
+      return true;
+    }
+  }
+  return false;
+}
+var matchIconName = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+var stringToIcon = (value, validate, allowSimpleName, provider = "") => {
+  const colonSeparated = value.split(":");
+  if (value.slice(0, 1) === "@") {
+    if (colonSeparated.length < 2 || colonSeparated.length > 3) {
+      return null;
+    }
+    provider = colonSeparated.shift().slice(1);
+  }
+  if (colonSeparated.length > 3 || !colonSeparated.length) {
+    return null;
+  }
+  if (colonSeparated.length > 1) {
+    const name2 = colonSeparated.pop();
+    const prefix = colonSeparated.pop();
+    const result = {
+      provider: colonSeparated.length > 0 ? colonSeparated[0] : provider,
+      prefix,
+      name: name2
+    };
+    return validate && !validateIconName(result) ? null : result;
+  }
+  const name = colonSeparated[0];
+  const dashSeparated = name.split("-");
+  if (dashSeparated.length > 1) {
+    const result = {
+      provider,
+      prefix: dashSeparated.shift(),
+      name: dashSeparated.join("-")
+    };
+    return validate && !validateIconName(result) ? null : result;
+  }
+  if (allowSimpleName && provider === "") {
+    const result = {
+      provider,
+      prefix: "",
+      name
+    };
+    return validate && !validateIconName(result, allowSimpleName) ? null : result;
+  }
+  return null;
+};
+var validateIconName = (icon, allowSimpleName) => {
+  if (!icon) {
+    return false;
+  }
+  return !!((icon.provider === "" || icon.provider.match(matchIconName)) && (allowSimpleName && icon.prefix === "" || icon.prefix.match(matchIconName)) && icon.name.match(matchIconName));
+};
+function mergeIconTransformations(obj1, obj2) {
+  const result = {};
+  if (!obj1.hFlip !== !obj2.hFlip) {
+    result.hFlip = true;
+  }
+  if (!obj1.vFlip !== !obj2.vFlip) {
+    result.vFlip = true;
+  }
+  const rotate = ((obj1.rotate || 0) + (obj2.rotate || 0)) % 4;
+  if (rotate) {
+    result.rotate = rotate;
+  }
+  return result;
+}
+function mergeIconData(parent, child) {
+  const result = mergeIconTransformations(parent, child);
+  for (const key in defaultExtendedIconProps) {
+    if (key in defaultIconTransformations) {
+      if (key in parent && !(key in result)) {
+        result[key] = defaultIconTransformations[key];
+      }
+    } else if (key in child) {
+      result[key] = child[key];
+    } else if (key in parent) {
+      result[key] = parent[key];
+    }
+  }
+  return result;
+}
+function getIconsTree(data, names) {
+  const icons = data.icons;
+  const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
+  const resolved = /* @__PURE__ */ Object.create(null);
+  function resolve(name) {
+    if (icons[name]) {
+      return resolved[name] = [];
+    }
+    if (!(name in resolved)) {
+      resolved[name] = null;
+      const parent = aliases[name] && aliases[name].parent;
+      const value = parent && resolve(parent);
+      if (value) {
+        resolved[name] = [parent].concat(value);
+      }
+    }
+    return resolved[name];
+  }
+  (names || Object.keys(icons).concat(Object.keys(aliases))).forEach(resolve);
+  return resolved;
+}
+function internalGetIconData(data, name, tree) {
+  const icons = data.icons;
+  const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
+  let currentProps = {};
+  function parse(name2) {
+    currentProps = mergeIconData(
+      icons[name2] || aliases[name2],
+      currentProps
+    );
+  }
+  parse(name);
+  tree.forEach(parse);
+  return mergeIconData(data, currentProps);
+}
+function parseIconSet(data, callback) {
+  const names = [];
+  if (typeof data !== "object" || typeof data.icons !== "object") {
+    return names;
+  }
+  if (data.not_found instanceof Array) {
+    data.not_found.forEach((name) => {
+      callback(name, null);
+      names.push(name);
+    });
+  }
+  const tree = getIconsTree(data);
+  for (const name in tree) {
+    const item = tree[name];
+    if (item) {
+      callback(name, internalGetIconData(data, name, item));
+      names.push(name);
+    }
+  }
+  return names;
+}
+var optionalPropertyDefaults = {
+  provider: "",
+  aliases: {},
+  not_found: {},
+  ...defaultIconDimensions
+};
+function checkOptionalProps(item, defaults) {
+  for (const prop in defaults) {
+    if (prop in item && typeof item[prop] !== typeof defaults[prop]) {
+      return false;
+    }
+  }
+  return true;
+}
+function quicklyValidateIconSet(obj) {
+  if (typeof obj !== "object" || obj === null) {
+    return null;
+  }
+  const data = obj;
+  if (typeof data.prefix !== "string" || !obj.icons || typeof obj.icons !== "object") {
+    return null;
+  }
+  if (!checkOptionalProps(obj, optionalPropertyDefaults)) {
+    return null;
+  }
+  const icons = data.icons;
+  for (const name in icons) {
+    const icon = icons[name];
+    if (!name.match(matchIconName) || typeof icon.body !== "string" || !checkOptionalProps(
+      icon,
+      defaultExtendedIconProps
+    )) {
+      return null;
+    }
+  }
+  const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
+  for (const name in aliases) {
+    const icon = aliases[name];
+    const parent = icon.parent;
+    if (!name.match(matchIconName) || typeof parent !== "string" || !icons[parent] && !aliases[parent] || !checkOptionalProps(
+      icon,
+      defaultExtendedIconProps
+    )) {
+      return null;
+    }
+  }
+  return data;
+}
+var dataStorage = /* @__PURE__ */ Object.create(null);
+function newStorage(provider, prefix) {
+  return {
+    provider,
+    prefix,
+    icons: /* @__PURE__ */ Object.create(null),
+    missing: /* @__PURE__ */ new Set()
+  };
+}
+function getStorage(provider, prefix) {
+  const providerStorage = dataStorage[provider] || (dataStorage[provider] = /* @__PURE__ */ Object.create(null));
+  return providerStorage[prefix] || (providerStorage[prefix] = newStorage(provider, prefix));
+}
+function addIconSet(storage2, data) {
+  if (!quicklyValidateIconSet(data)) {
+    return [];
+  }
+  return parseIconSet(data, (name, icon) => {
+    if (icon) {
+      storage2.icons[name] = icon;
+    } else {
+      storage2.missing.add(name);
+    }
+  });
+}
+function addIconToStorage(storage2, name, icon) {
+  try {
+    if (typeof icon.body === "string") {
+      storage2.icons[name] = { ...icon };
+      return true;
+    }
+  } catch (err) {
+  }
+  return false;
+}
+function listIcons$1(provider, prefix) {
+  let allIcons = [];
+  const providers = typeof provider === "string" ? [provider] : Object.keys(dataStorage);
+  providers.forEach((provider2) => {
+    const prefixes = typeof provider2 === "string" && typeof prefix === "string" ? [prefix] : Object.keys(dataStorage[provider2] || {});
+    prefixes.forEach((prefix2) => {
+      const storage2 = getStorage(provider2, prefix2);
+      allIcons = allIcons.concat(
+        Object.keys(storage2.icons).map(
+          (name) => (provider2 !== "" ? "@" + provider2 + ":" : "") + prefix2 + ":" + name
+        )
+      );
+    });
+  });
+  return allIcons;
+}
+var simpleNames = false;
+function allowSimpleNames(allow) {
+  if (typeof allow === "boolean") {
+    simpleNames = allow;
+  }
+  return simpleNames;
+}
+function getIconData(name) {
+  const icon = typeof name === "string" ? stringToIcon(name, true, simpleNames) : name;
+  if (icon) {
+    const storage2 = getStorage(icon.provider, icon.prefix);
+    const iconName = icon.name;
+    return storage2.icons[iconName] || (storage2.missing.has(iconName) ? null : void 0);
+  }
+}
+function addIcon$1(name, data) {
+  const icon = stringToIcon(name, true, simpleNames);
+  if (!icon) {
+    return false;
+  }
+  const storage2 = getStorage(icon.provider, icon.prefix);
+  return addIconToStorage(storage2, icon.name, data);
+}
+function addCollection$1(data, provider) {
+  if (typeof data !== "object") {
+    return false;
+  }
+  if (typeof provider !== "string") {
+    provider = data.provider || "";
+  }
+  if (simpleNames && !provider && !data.prefix) {
+    let added = false;
+    if (quicklyValidateIconSet(data)) {
+      data.prefix = "";
+      parseIconSet(data, (name, icon) => {
+        if (icon && addIcon$1(name, icon)) {
+          added = true;
+        }
+      });
+    }
+    return added;
+  }
+  const prefix = data.prefix;
+  if (!validateIconName({
+    provider,
+    prefix,
+    name: "a"
+  })) {
+    return false;
+  }
+  const storage2 = getStorage(provider, prefix);
+  return !!addIconSet(storage2, data);
+}
+function iconExists$1(name) {
+  return !!getIconData(name);
+}
+function getIcon$1(name) {
+  const result = getIconData(name);
+  return result ? {
+    ...defaultIconProps,
+    ...result
+  } : null;
+}
+function sortIcons(icons) {
+  const result = {
+    loaded: [],
+    missing: [],
+    pending: []
+  };
+  const storage2 = /* @__PURE__ */ Object.create(null);
+  icons.sort((a, b) => {
+    if (a.provider !== b.provider) {
+      return a.provider.localeCompare(b.provider);
+    }
+    if (a.prefix !== b.prefix) {
+      return a.prefix.localeCompare(b.prefix);
+    }
+    return a.name.localeCompare(b.name);
+  });
+  let lastIcon = {
+    provider: "",
+    prefix: "",
+    name: ""
+  };
+  icons.forEach((icon) => {
+    if (lastIcon.name === icon.name && lastIcon.prefix === icon.prefix && lastIcon.provider === icon.provider) {
+      return;
+    }
+    lastIcon = icon;
+    const provider = icon.provider;
+    const prefix = icon.prefix;
+    const name = icon.name;
+    const providerStorage = storage2[provider] || (storage2[provider] = /* @__PURE__ */ Object.create(null));
+    const localStorage = providerStorage[prefix] || (providerStorage[prefix] = getStorage(provider, prefix));
+    let list;
+    if (name in localStorage.icons) {
+      list = result.loaded;
+    } else if (prefix === "" || localStorage.missing.has(name)) {
+      list = result.missing;
+    } else {
+      list = result.pending;
+    }
+    const item = {
+      provider,
+      prefix,
+      name
+    };
+    list.push(item);
+  });
+  return result;
+}
+function removeCallback(storages, id) {
+  storages.forEach((storage2) => {
+    const items = storage2.loaderCallbacks;
+    if (items) {
+      storage2.loaderCallbacks = items.filter((row) => row.id !== id);
+    }
+  });
+}
+function updateCallbacks(storage2) {
+  if (!storage2.pendingCallbacksFlag) {
+    storage2.pendingCallbacksFlag = true;
+    setTimeout(() => {
+      storage2.pendingCallbacksFlag = false;
+      const items = storage2.loaderCallbacks ? storage2.loaderCallbacks.slice(0) : [];
+      if (!items.length) {
+        return;
+      }
+      let hasPending = false;
+      const provider = storage2.provider;
+      const prefix = storage2.prefix;
+      items.forEach((item) => {
+        const icons = item.icons;
+        const oldLength = icons.pending.length;
+        icons.pending = icons.pending.filter((icon) => {
+          if (icon.prefix !== prefix) {
+            return true;
+          }
+          const name = icon.name;
+          if (storage2.icons[name]) {
+            icons.loaded.push({
+              provider,
+              prefix,
+              name
+            });
+          } else if (storage2.missing.has(name)) {
+            icons.missing.push({
+              provider,
+              prefix,
+              name
+            });
+          } else {
+            hasPending = true;
+            return true;
+          }
+          return false;
+        });
+        if (icons.pending.length !== oldLength) {
+          if (!hasPending) {
+            removeCallback([storage2], item.id);
+          }
+          item.callback(
+            icons.loaded.slice(0),
+            icons.missing.slice(0),
+            icons.pending.slice(0),
+            item.abort
+          );
+        }
+      });
+    });
+  }
+}
+var idCounter = 0;
+function storeCallback(callback, icons, pendingSources) {
+  const id = idCounter++;
+  const abort = removeCallback.bind(null, pendingSources, id);
+  if (!icons.pending.length) {
+    return abort;
+  }
+  const item = {
+    id,
+    icons,
+    callback,
+    abort
+  };
+  pendingSources.forEach((storage2) => {
+    (storage2.loaderCallbacks || (storage2.loaderCallbacks = [])).push(item);
+  });
+  return abort;
+}
+var storage = /* @__PURE__ */ Object.create(null);
+function setAPIModule(provider, item) {
+  storage[provider] = item;
+}
+function getAPIModule(provider) {
+  return storage[provider] || storage[""];
+}
+function listToIcons(list, validate = true, simpleNames2 = false) {
+  const result = [];
+  list.forEach((item) => {
+    const icon = typeof item === "string" ? stringToIcon(item, validate, simpleNames2) : item;
+    if (icon) {
+      result.push(icon);
+    }
+  });
+  return result;
+}
+var defaultConfig = {
+  resources: [],
+  index: 0,
+  timeout: 2e3,
+  rotate: 750,
+  random: false,
+  dataAfterTimeout: false
+};
+function sendQuery(config, payload, query, done) {
+  const resourcesCount = config.resources.length;
+  const startIndex = config.random ? Math.floor(Math.random() * resourcesCount) : config.index;
+  let resources;
+  if (config.random) {
+    let list = config.resources.slice(0);
+    resources = [];
+    while (list.length > 1) {
+      const nextIndex = Math.floor(Math.random() * list.length);
+      resources.push(list[nextIndex]);
+      list = list.slice(0, nextIndex).concat(list.slice(nextIndex + 1));
+    }
+    resources = resources.concat(list);
+  } else {
+    resources = config.resources.slice(startIndex).concat(config.resources.slice(0, startIndex));
+  }
+  const startTime = Date.now();
+  let status = "pending";
+  let queriesSent = 0;
+  let lastError;
+  let timer = null;
+  let queue = [];
+  let doneCallbacks = [];
+  if (typeof done === "function") {
+    doneCallbacks.push(done);
+  }
+  function resetTimer() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function abort() {
+    if (status === "pending") {
+      status = "aborted";
+    }
+    resetTimer();
+    queue.forEach((item) => {
+      if (item.status === "pending") {
+        item.status = "aborted";
+      }
+    });
+    queue = [];
+  }
+  function subscribe(callback, overwrite) {
+    if (overwrite) {
+      doneCallbacks = [];
+    }
+    if (typeof callback === "function") {
+      doneCallbacks.push(callback);
+    }
+  }
+  function getQueryStatus() {
+    return {
+      startTime,
+      payload,
+      status,
+      queriesSent,
+      queriesPending: queue.length,
+      subscribe,
+      abort
+    };
+  }
+  function failQuery() {
+    status = "failed";
+    doneCallbacks.forEach((callback) => {
+      callback(void 0, lastError);
+    });
+  }
+  function clearQueue() {
+    queue.forEach((item) => {
+      if (item.status === "pending") {
+        item.status = "aborted";
+      }
+    });
+    queue = [];
+  }
+  function moduleResponse(item, response, data) {
+    const isError = response !== "success";
+    queue = queue.filter((queued) => queued !== item);
+    switch (status) {
+      case "pending":
+        break;
+      case "failed":
+        if (isError || !config.dataAfterTimeout) {
+          return;
+        }
+        break;
+      default:
+        return;
+    }
+    if (response === "abort") {
+      lastError = data;
+      failQuery();
+      return;
+    }
+    if (isError) {
+      lastError = data;
+      if (!queue.length) {
+        if (!resources.length) {
+          failQuery();
+        } else {
+          execNext();
+        }
+      }
+      return;
+    }
+    resetTimer();
+    clearQueue();
+    if (!config.random) {
+      const index = config.resources.indexOf(item.resource);
+      if (index !== -1 && index !== config.index) {
+        config.index = index;
+      }
+    }
+    status = "completed";
+    doneCallbacks.forEach((callback) => {
+      callback(data);
+    });
+  }
+  function execNext() {
+    if (status !== "pending") {
+      return;
+    }
+    resetTimer();
+    const resource = resources.shift();
+    if (resource === void 0) {
+      if (queue.length) {
+        timer = setTimeout(() => {
+          resetTimer();
+          if (status === "pending") {
+            clearQueue();
+            failQuery();
+          }
+        }, config.timeout);
+        return;
+      }
+      failQuery();
+      return;
+    }
+    const item = {
+      status: "pending",
+      resource,
+      callback: (status2, data) => {
+        moduleResponse(item, status2, data);
+      }
+    };
+    queue.push(item);
+    queriesSent++;
+    timer = setTimeout(execNext, config.rotate);
+    query(resource, payload, item.callback);
+  }
+  setTimeout(execNext);
+  return getQueryStatus;
+}
+function initRedundancy(cfg) {
+  const config = {
+    ...defaultConfig,
+    ...cfg
+  };
+  let queries = [];
+  function cleanup() {
+    queries = queries.filter((item) => item().status === "pending");
+  }
+  function query(payload, queryCallback, doneCallback) {
+    const query2 = sendQuery(
+      config,
+      payload,
+      queryCallback,
+      (data, error) => {
+        cleanup();
+        if (doneCallback) {
+          doneCallback(data, error);
+        }
+      }
+    );
+    queries.push(query2);
+    return query2;
+  }
+  function find(callback) {
+    return queries.find((value) => {
+      return callback(value);
+    }) || null;
+  }
+  const instance = {
+    query,
+    find,
+    setIndex: (index) => {
+      config.index = index;
+    },
+    getIndex: () => config.index,
+    cleanup
+  };
+  return instance;
+}
+function createAPIConfig(source) {
+  let resources;
+  if (typeof source.resources === "string") {
+    resources = [source.resources];
+  } else {
+    resources = source.resources;
+    if (!(resources instanceof Array) || !resources.length) {
+      return null;
+    }
+  }
+  const result = {
+    resources,
+    path: source.path || "/",
+    maxURL: source.maxURL || 500,
+    rotate: source.rotate || 750,
+    timeout: source.timeout || 5e3,
+    random: source.random === true,
+    index: source.index || 0,
+    dataAfterTimeout: source.dataAfterTimeout !== false
+  };
+  return result;
+}
+var configStorage = /* @__PURE__ */ Object.create(null);
+var fallBackAPISources = [
+  "https://api.simplesvg.com",
+  "https://api.unisvg.com"
+];
+var fallBackAPI = [];
+while (fallBackAPISources.length > 0) {
+  if (fallBackAPISources.length === 1) {
+    fallBackAPI.push(fallBackAPISources.shift());
+  } else {
+    if (Math.random() > 0.5) {
+      fallBackAPI.push(fallBackAPISources.shift());
+    } else {
+      fallBackAPI.push(fallBackAPISources.pop());
+    }
+  }
+}
+configStorage[""] = createAPIConfig({
+  resources: ["https://api.iconify.design"].concat(fallBackAPI)
+});
+function addAPIProvider$1(provider, customConfig) {
+  const config = createAPIConfig(customConfig);
+  if (config === null) {
+    return false;
+  }
+  configStorage[provider] = config;
+  return true;
+}
+function getAPIConfig(provider) {
+  return configStorage[provider];
+}
+function listAPIProviders() {
+  return Object.keys(configStorage);
+}
+function emptyCallback$1() {
+}
+var redundancyCache = /* @__PURE__ */ Object.create(null);
+function getRedundancyCache(provider) {
+  if (!redundancyCache[provider]) {
+    const config = getAPIConfig(provider);
+    if (!config) {
+      return;
+    }
+    const redundancy = initRedundancy(config);
+    const cachedReundancy = {
+      config,
+      redundancy
+    };
+    redundancyCache[provider] = cachedReundancy;
+  }
+  return redundancyCache[provider];
+}
+function sendAPIQuery(target, query, callback) {
+  let redundancy;
+  let send2;
+  if (typeof target === "string") {
+    const api = getAPIModule(target);
+    if (!api) {
+      callback(void 0, 424);
+      return emptyCallback$1;
+    }
+    send2 = api.send;
+    const cached = getRedundancyCache(target);
+    if (cached) {
+      redundancy = cached.redundancy;
+    }
+  } else {
+    const config = createAPIConfig(target);
+    if (config) {
+      redundancy = initRedundancy(config);
+      const moduleKey = target.resources ? target.resources[0] : "";
+      const api = getAPIModule(moduleKey);
+      if (api) {
+        send2 = api.send;
+      }
+    }
+  }
+  if (!redundancy || !send2) {
+    callback(void 0, 424);
+    return emptyCallback$1;
+  }
+  return redundancy.query(query, send2, callback)().abort;
+}
+var browserCacheVersion = "iconify2";
+var browserCachePrefix = "iconify";
+var browserCacheCountKey = browserCachePrefix + "-count";
+var browserCacheVersionKey = browserCachePrefix + "-version";
+var browserStorageHour = 36e5;
+var browserStorageCacheExpiration = 168;
+function getStoredItem(func, key) {
+  try {
+    return func.getItem(key);
+  } catch (err) {
+  }
+}
+function setStoredItem(func, key, value) {
+  try {
+    func.setItem(key, value);
+    return true;
+  } catch (err) {
+  }
+}
+function removeStoredItem(func, key) {
+  try {
+    func.removeItem(key);
+  } catch (err) {
+  }
+}
+function setBrowserStorageItemsCount(storage2, value) {
+  return setStoredItem(storage2, browserCacheCountKey, value.toString());
+}
+function getBrowserStorageItemsCount(storage2) {
+  return parseInt(getStoredItem(storage2, browserCacheCountKey)) || 0;
+}
+var browserStorageConfig = {
+  local: true,
+  session: true
+};
+var browserStorageEmptyItems = {
+  local: /* @__PURE__ */ new Set(),
+  session: /* @__PURE__ */ new Set()
+};
+var browserStorageStatus = false;
+function setBrowserStorageStatus(status) {
+  browserStorageStatus = status;
+}
+var _window = typeof window === "undefined" ? {} : window;
+function getBrowserStorage(key) {
+  const attr = key + "Storage";
+  try {
+    if (_window && _window[attr] && typeof _window[attr].length === "number") {
+      return _window[attr];
+    }
+  } catch (err) {
+  }
+  browserStorageConfig[key] = false;
+}
+function iterateBrowserStorage(key, callback) {
+  const func = getBrowserStorage(key);
+  if (!func) {
+    return;
+  }
+  const version = getStoredItem(func, browserCacheVersionKey);
+  if (version !== browserCacheVersion) {
+    if (version) {
+      const total2 = getBrowserStorageItemsCount(func);
+      for (let i = 0; i < total2; i++) {
+        removeStoredItem(func, browserCachePrefix + i.toString());
+      }
+    }
+    setStoredItem(func, browserCacheVersionKey, browserCacheVersion);
+    setBrowserStorageItemsCount(func, 0);
+    return;
+  }
+  const minTime = Math.floor(Date.now() / browserStorageHour) - browserStorageCacheExpiration;
+  const parseItem = (index) => {
+    const name = browserCachePrefix + index.toString();
+    const item = getStoredItem(func, name);
+    if (typeof item !== "string") {
+      return;
+    }
+    try {
+      const data = JSON.parse(item);
+      if (typeof data === "object" && typeof data.cached === "number" && data.cached > minTime && typeof data.provider === "string" && typeof data.data === "object" && typeof data.data.prefix === "string" && callback(data, index)) {
+        return true;
+      }
+    } catch (err) {
+    }
+    removeStoredItem(func, name);
+  };
+  let total = getBrowserStorageItemsCount(func);
+  for (let i = total - 1; i >= 0; i--) {
+    if (!parseItem(i)) {
+      if (i === total - 1) {
+        total--;
+        setBrowserStorageItemsCount(func, total);
+      } else {
+        browserStorageEmptyItems[key].add(i);
+      }
+    }
+  }
+}
+function initBrowserStorage() {
+  if (browserStorageStatus) {
+    return;
+  }
+  setBrowserStorageStatus(true);
+  for (const key in browserStorageConfig) {
+    iterateBrowserStorage(key, (item) => {
+      const iconSet = item.data;
+      const provider = item.provider;
+      const prefix = iconSet.prefix;
+      const storage2 = getStorage(
+        provider,
+        prefix
+      );
+      if (!addIconSet(storage2, iconSet).length) {
+        return false;
+      }
+      const lastModified = iconSet.lastModified || -1;
+      storage2.lastModifiedCached = storage2.lastModifiedCached ? Math.min(storage2.lastModifiedCached, lastModified) : lastModified;
+      return true;
+    });
+  }
+}
+function updateLastModified(storage2, lastModified) {
+  const lastValue = storage2.lastModifiedCached;
+  if (lastValue && lastValue >= lastModified) {
+    return lastValue === lastModified;
+  }
+  storage2.lastModifiedCached = lastModified;
+  if (lastValue) {
+    for (const key in browserStorageConfig) {
+      iterateBrowserStorage(key, (item) => {
+        const iconSet = item.data;
+        return item.provider !== storage2.provider || iconSet.prefix !== storage2.prefix || iconSet.lastModified === lastModified;
+      });
+    }
+  }
+  return true;
+}
+function storeInBrowserStorage(storage2, data) {
+  if (!browserStorageStatus) {
+    initBrowserStorage();
+  }
+  function store(key) {
+    let func;
+    if (!browserStorageConfig[key] || !(func = getBrowserStorage(key))) {
+      return;
+    }
+    const set = browserStorageEmptyItems[key];
+    let index;
+    if (set.size) {
+      set.delete(index = Array.from(set).shift());
+    } else {
+      index = getBrowserStorageItemsCount(func);
+      if (!setBrowserStorageItemsCount(func, index + 1)) {
+        return;
+      }
+    }
+    const item = {
+      cached: Math.floor(Date.now() / browserStorageHour),
+      provider: storage2.provider,
+      data
+    };
+    return setStoredItem(
+      func,
+      browserCachePrefix + index.toString(),
+      JSON.stringify(item)
+    );
+  }
+  if (data.lastModified && !updateLastModified(storage2, data.lastModified)) {
+    return;
+  }
+  if (!Object.keys(data.icons).length) {
+    return;
+  }
+  if (data.not_found) {
+    data = Object.assign({}, data);
+    delete data.not_found;
+  }
+  if (!store("local")) {
+    store("session");
+  }
+}
+function emptyCallback() {
+}
+function loadedNewIcons(storage2) {
+  if (!storage2.iconsLoaderFlag) {
+    storage2.iconsLoaderFlag = true;
+    setTimeout(() => {
+      storage2.iconsLoaderFlag = false;
+      updateCallbacks(storage2);
+    });
+  }
+}
+function loadNewIcons(storage2, icons) {
+  if (!storage2.iconsToLoad) {
+    storage2.iconsToLoad = icons;
+  } else {
+    storage2.iconsToLoad = storage2.iconsToLoad.concat(icons).sort();
+  }
+  if (!storage2.iconsQueueFlag) {
+    storage2.iconsQueueFlag = true;
+    setTimeout(() => {
+      storage2.iconsQueueFlag = false;
+      const { provider, prefix } = storage2;
+      const icons2 = storage2.iconsToLoad;
+      delete storage2.iconsToLoad;
+      let api;
+      if (!icons2 || !(api = getAPIModule(provider))) {
+        return;
+      }
+      const params = api.prepare(provider, prefix, icons2);
+      params.forEach((item) => {
+        sendAPIQuery(provider, item, (data) => {
+          if (typeof data !== "object") {
+            item.icons.forEach((name) => {
+              storage2.missing.add(name);
+            });
+          } else {
+            try {
+              const parsed = addIconSet(
+                storage2,
+                data
+              );
+              if (!parsed.length) {
+                return;
+              }
+              const pending = storage2.pendingIcons;
+              if (pending) {
+                parsed.forEach((name) => {
+                  pending.delete(name);
+                });
+              }
+              storeInBrowserStorage(storage2, data);
+            } catch (err) {
+              console.error(err);
+            }
+          }
+          loadedNewIcons(storage2);
+        });
+      });
+    });
+  }
+}
+var loadIcons$1 = (icons, callback) => {
+  const cleanedIcons = listToIcons(icons, true, allowSimpleNames());
+  const sortedIcons = sortIcons(cleanedIcons);
+  if (!sortedIcons.pending.length) {
+    let callCallback = true;
+    if (callback) {
+      setTimeout(() => {
+        if (callCallback) {
+          callback(
+            sortedIcons.loaded,
+            sortedIcons.missing,
+            sortedIcons.pending,
+            emptyCallback
+          );
+        }
+      });
+    }
+    return () => {
+      callCallback = false;
+    };
+  }
+  const newIcons = /* @__PURE__ */ Object.create(null);
+  const sources = [];
+  let lastProvider, lastPrefix;
+  sortedIcons.pending.forEach((icon) => {
+    const { provider, prefix } = icon;
+    if (prefix === lastPrefix && provider === lastProvider) {
+      return;
+    }
+    lastProvider = provider;
+    lastPrefix = prefix;
+    sources.push(getStorage(provider, prefix));
+    const providerNewIcons = newIcons[provider] || (newIcons[provider] = /* @__PURE__ */ Object.create(null));
+    if (!providerNewIcons[prefix]) {
+      providerNewIcons[prefix] = [];
+    }
+  });
+  sortedIcons.pending.forEach((icon) => {
+    const { provider, prefix, name } = icon;
+    const storage2 = getStorage(provider, prefix);
+    const pendingQueue = storage2.pendingIcons || (storage2.pendingIcons = /* @__PURE__ */ new Set());
+    if (!pendingQueue.has(name)) {
+      pendingQueue.add(name);
+      newIcons[provider][prefix].push(name);
+    }
+  });
+  sources.forEach((storage2) => {
+    const { provider, prefix } = storage2;
+    if (newIcons[provider][prefix].length) {
+      loadNewIcons(storage2, newIcons[provider][prefix]);
+    }
+  });
+  return callback ? storeCallback(callback, sortedIcons, sources) : emptyCallback;
+};
+var loadIcon$1 = (icon) => {
+  return new Promise((fulfill, reject) => {
+    const iconObj = typeof icon === "string" ? stringToIcon(icon, true) : icon;
+    if (!iconObj) {
+      reject(icon);
+      return;
+    }
+    loadIcons$1([iconObj || icon], (loaded) => {
+      if (loaded.length && iconObj) {
+        const data = getIconData(iconObj);
+        if (data) {
+          fulfill({
+            ...defaultIconProps,
+            ...data
+          });
+          return;
+        }
+      }
+      reject(icon);
+    });
+  });
+};
+function testIconObject(value) {
+  try {
+    const obj = typeof value === "string" ? JSON.parse(value) : value;
+    if (typeof obj.body === "string") {
+      return {
+        ...obj
+      };
+    }
+  } catch (err) {
+  }
+}
+function parseIconValue(value, onload) {
+  const name = typeof value === "string" ? stringToIcon(value, true, true) : null;
+  if (!name) {
+    const data2 = testIconObject(value);
+    return {
+      value,
+      data: data2
+    };
+  }
+  const data = getIconData(name);
+  if (data !== void 0 || !name.prefix) {
+    return {
+      value,
+      name,
+      data
+      // could be 'null' -> icon is missing
+    };
+  }
+  const loading = loadIcons$1([name], () => onload(value, name, getIconData(name)));
+  return {
+    value,
+    name,
+    loading
+  };
+}
+function getInline(node) {
+  return node.hasAttribute("inline");
+}
+var isBuggedSafari = false;
+try {
+  isBuggedSafari = navigator.vendor.indexOf("Apple") === 0;
+} catch (err) {
+}
+function getRenderMode(body, mode) {
+  switch (mode) {
+    case "svg":
+    case "bg":
+    case "mask":
+      return mode;
+  }
+  if (mode !== "style" && (isBuggedSafari || body.indexOf("<a") === -1)) {
+    return "svg";
+  }
+  return body.indexOf("currentColor") === -1 ? "bg" : "mask";
+}
+var unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
+var unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
+function calculateSize$1(size, ratio, precision) {
+  if (ratio === 1) {
+    return size;
+  }
+  precision = precision || 100;
+  if (typeof size === "number") {
+    return Math.ceil(size * ratio * precision) / precision;
+  }
+  if (typeof size !== "string") {
+    return size;
+  }
+  const oldParts = size.split(unitsSplit);
+  if (oldParts === null || !oldParts.length) {
+    return size;
+  }
+  const newParts = [];
+  let code = oldParts.shift();
+  let isNumber = unitsTest.test(code);
+  while (true) {
+    if (isNumber) {
+      const num = parseFloat(code);
+      if (isNaN(num)) {
+        newParts.push(code);
+      } else {
+        newParts.push(Math.ceil(num * ratio * precision) / precision);
+      }
+    } else {
+      newParts.push(code);
+    }
+    code = oldParts.shift();
+    if (code === void 0) {
+      return newParts.join("");
+    }
+    isNumber = !isNumber;
+  }
+}
+var isUnsetKeyword = (value) => value === "unset" || value === "undefined" || value === "none";
+function iconToSVG(icon, customisations) {
+  const fullIcon = {
+    ...defaultIconProps,
+    ...icon
+  };
+  const fullCustomisations = {
+    ...defaultIconCustomisations,
+    ...customisations
+  };
+  const box = {
+    left: fullIcon.left,
+    top: fullIcon.top,
+    width: fullIcon.width,
+    height: fullIcon.height
+  };
+  let body = fullIcon.body;
+  [fullIcon, fullCustomisations].forEach((props) => {
+    const transformations = [];
+    const hFlip = props.hFlip;
+    const vFlip = props.vFlip;
+    let rotation = props.rotate;
+    if (hFlip) {
+      if (vFlip) {
+        rotation += 2;
+      } else {
+        transformations.push(
+          "translate(" + (box.width + box.left).toString() + " " + (0 - box.top).toString() + ")"
+        );
+        transformations.push("scale(-1 1)");
+        box.top = box.left = 0;
+      }
+    } else if (vFlip) {
+      transformations.push(
+        "translate(" + (0 - box.left).toString() + " " + (box.height + box.top).toString() + ")"
+      );
+      transformations.push("scale(1 -1)");
+      box.top = box.left = 0;
+    }
+    let tempValue;
+    if (rotation < 0) {
+      rotation -= Math.floor(rotation / 4) * 4;
+    }
+    rotation = rotation % 4;
+    switch (rotation) {
+      case 1:
+        tempValue = box.height / 2 + box.top;
+        transformations.unshift(
+          "rotate(90 " + tempValue.toString() + " " + tempValue.toString() + ")"
+        );
+        break;
+      case 2:
+        transformations.unshift(
+          "rotate(180 " + (box.width / 2 + box.left).toString() + " " + (box.height / 2 + box.top).toString() + ")"
+        );
+        break;
+      case 3:
+        tempValue = box.width / 2 + box.left;
+        transformations.unshift(
+          "rotate(-90 " + tempValue.toString() + " " + tempValue.toString() + ")"
+        );
+        break;
+    }
+    if (rotation % 2 === 1) {
+      if (box.left !== box.top) {
+        tempValue = box.left;
+        box.left = box.top;
+        box.top = tempValue;
+      }
+      if (box.width !== box.height) {
+        tempValue = box.width;
+        box.width = box.height;
+        box.height = tempValue;
+      }
+    }
+    if (transformations.length) {
+      body = '<g transform="' + transformations.join(" ") + '">' + body + "</g>";
+    }
+  });
+  const customisationsWidth = fullCustomisations.width;
+  const customisationsHeight = fullCustomisations.height;
+  const boxWidth = box.width;
+  const boxHeight = box.height;
+  let width;
+  let height;
+  if (customisationsWidth === null) {
+    height = customisationsHeight === null ? "1em" : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
+    width = calculateSize$1(height, boxWidth / boxHeight);
+  } else {
+    width = customisationsWidth === "auto" ? boxWidth : customisationsWidth;
+    height = customisationsHeight === null ? calculateSize$1(width, boxHeight / boxWidth) : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
+  }
+  const attributes = {};
+  const setAttr = (prop, value) => {
+    if (!isUnsetKeyword(value)) {
+      attributes[prop] = value.toString();
+    }
+  };
+  setAttr("width", width);
+  setAttr("height", height);
+  attributes.viewBox = box.left.toString() + " " + box.top.toString() + " " + boxWidth.toString() + " " + boxHeight.toString();
+  return {
+    attributes,
+    body
+  };
+}
+var detectFetch = () => {
+  let callback;
+  try {
+    callback = fetch;
+    if (typeof callback === "function") {
+      return callback;
+    }
+  } catch (err) {
+  }
+};
+var fetchModule = detectFetch();
+function setFetch(fetch2) {
+  fetchModule = fetch2;
+}
+function getFetch() {
+  return fetchModule;
+}
+function calculateMaxLength(provider, prefix) {
+  const config = getAPIConfig(provider);
+  if (!config) {
+    return 0;
+  }
+  let result;
+  if (!config.maxURL) {
+    result = 0;
+  } else {
+    let maxHostLength = 0;
+    config.resources.forEach((item) => {
+      const host = item;
+      maxHostLength = Math.max(maxHostLength, host.length);
+    });
+    const url = prefix + ".json?icons=";
+    result = config.maxURL - maxHostLength - config.path.length - url.length;
+  }
+  return result;
+}
+function shouldAbort(status) {
+  return status === 404;
+}
+var prepare = (provider, prefix, icons) => {
+  const results = [];
+  const maxLength = calculateMaxLength(provider, prefix);
+  const type = "icons";
+  let item = {
+    type,
+    provider,
+    prefix,
+    icons: []
+  };
+  let length = 0;
+  icons.forEach((name, index) => {
+    length += name.length + 1;
+    if (length >= maxLength && index > 0) {
+      results.push(item);
+      item = {
+        type,
+        provider,
+        prefix,
+        icons: []
+      };
+      length = name.length;
+    }
+    item.icons.push(name);
+  });
+  results.push(item);
+  return results;
+};
+function getPath(provider) {
+  if (typeof provider === "string") {
+    const config = getAPIConfig(provider);
+    if (config) {
+      return config.path;
+    }
+  }
+  return "/";
+}
+var send = (host, params, callback) => {
+  if (!fetchModule) {
+    callback("abort", 424);
+    return;
+  }
+  let path = getPath(params.provider);
+  switch (params.type) {
+    case "icons": {
+      const prefix = params.prefix;
+      const icons = params.icons;
+      const iconsList = icons.join(",");
+      const urlParams = new URLSearchParams({
+        icons: iconsList
+      });
+      path += prefix + ".json?" + urlParams.toString();
+      break;
+    }
+    case "custom": {
+      const uri = params.uri;
+      path += uri.slice(0, 1) === "/" ? uri.slice(1) : uri;
+      break;
+    }
+    default:
+      callback("abort", 400);
+      return;
+  }
+  let defaultError = 503;
+  fetchModule(host + path).then((response) => {
+    const status = response.status;
+    if (status !== 200) {
+      setTimeout(() => {
+        callback(shouldAbort(status) ? "abort" : "next", status);
+      });
+      return;
+    }
+    defaultError = 501;
+    return response.json();
+  }).then((data) => {
+    if (typeof data !== "object" || data === null) {
+      setTimeout(() => {
+        if (data === 404) {
+          callback("abort", data);
+        } else {
+          callback("next", defaultError);
+        }
+      });
+      return;
+    }
+    setTimeout(() => {
+      callback("success", data);
+    });
+  }).catch(() => {
+    callback("next", defaultError);
+  });
+};
+var fetchAPIModule = {
+  prepare,
+  send
+};
+function toggleBrowserCache(storage2, value) {
+  switch (storage2) {
+    case "local":
+    case "session":
+      browserStorageConfig[storage2] = value;
+      break;
+    case "all":
+      for (const key in browserStorageConfig) {
+        browserStorageConfig[key] = value;
+      }
+      break;
+  }
+}
+var nodeAttr = "data-style";
+var customStyle = "";
+function appendCustomStyle(style) {
+  customStyle = style;
+}
+function updateStyle(parent, inline) {
+  let styleNode = Array.from(parent.childNodes).find((node) => node.hasAttribute && node.hasAttribute(nodeAttr));
+  if (!styleNode) {
+    styleNode = document.createElement("style");
+    styleNode.setAttribute(nodeAttr, nodeAttr);
+    parent.appendChild(styleNode);
+  }
+  styleNode.textContent = ":host{display:inline-block;vertical-align:" + (inline ? "-0.125em" : "0") + "}span,svg{display:block}" + customStyle;
+}
+function exportFunctions() {
+  setAPIModule("", fetchAPIModule);
+  allowSimpleNames(true);
+  let _window2;
+  try {
+    _window2 = window;
+  } catch (err) {
+  }
+  if (_window2) {
+    initBrowserStorage();
+    if (_window2.IconifyPreload !== void 0) {
+      const preload = _window2.IconifyPreload;
+      const err = "Invalid IconifyPreload syntax.";
+      if (typeof preload === "object" && preload !== null) {
+        (preload instanceof Array ? preload : [preload]).forEach((item) => {
+          try {
+            if (
+              // Check if item is an object and not null/array
+              typeof item !== "object" || item === null || item instanceof Array || // Check for 'icons' and 'prefix'
+              typeof item.icons !== "object" || typeof item.prefix !== "string" || // Add icon set
+              !addCollection$1(item)
+            ) {
+              console.error(err);
+            }
+          } catch (e) {
+            console.error(err);
+          }
+        });
+      }
+    }
+    if (_window2.IconifyProviders !== void 0) {
+      const providers = _window2.IconifyProviders;
+      if (typeof providers === "object" && providers !== null) {
+        for (const key in providers) {
+          const err = "IconifyProviders[" + key + "] is invalid.";
+          try {
+            const value = providers[key];
+            if (typeof value !== "object" || !value || value.resources === void 0) {
+              continue;
+            }
+            if (!addAPIProvider$1(key, value)) {
+              console.error(err);
+            }
+          } catch (e) {
+            console.error(err);
+          }
+        }
+      }
+    }
+  }
+  const _api2 = {
+    getAPIConfig,
+    setAPIModule,
+    sendAPIQuery,
+    setFetch,
+    getFetch,
+    listAPIProviders
+  };
+  return {
+    enableCache: (storage2) => toggleBrowserCache(storage2, true),
+    disableCache: (storage2) => toggleBrowserCache(storage2, false),
+    iconExists: iconExists$1,
+    getIcon: getIcon$1,
+    listIcons: listIcons$1,
+    addIcon: addIcon$1,
+    addCollection: addCollection$1,
+    calculateSize: calculateSize$1,
+    buildIcon: iconToSVG,
+    loadIcons: loadIcons$1,
+    loadIcon: loadIcon$1,
+    addAPIProvider: addAPIProvider$1,
+    appendCustomStyle,
+    _api: _api2
+  };
+}
+function iconToHTML(body, attributes) {
+  let renderAttribsHTML = body.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+  for (const attr in attributes) {
+    renderAttribsHTML += " " + attr + '="' + attributes[attr] + '"';
+  }
+  return '<svg xmlns="http://www.w3.org/2000/svg"' + renderAttribsHTML + ">" + body + "</svg>";
+}
+function encodeSVGforURL(svg) {
+  return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
+}
+function svgToURL(svg) {
+  return 'url("data:image/svg+xml,' + encodeSVGforURL(svg) + '")';
+}
+var monotoneProps = {
+  "background-color": "currentColor"
+};
+var coloredProps = {
+  "background-color": "transparent"
+};
+var propsToAdd = {
+  image: "var(--svg)",
+  repeat: "no-repeat",
+  size: "100% 100%"
+};
+var propsToAddTo = {
+  "-webkit-mask": monotoneProps,
+  "mask": monotoneProps,
+  "background": coloredProps
+};
+for (const prefix in propsToAddTo) {
+  const list = propsToAddTo[prefix];
+  for (const prop in propsToAdd) {
+    list[prefix + "-" + prop] = propsToAdd[prop];
+  }
+}
+function fixSize(value) {
+  return value + (value.match(/^[-0-9.]+$/) ? "px" : "");
+}
+function renderSPAN(data, icon, useMask) {
+  const node = document.createElement("span");
+  let body = data.body;
+  if (body.indexOf("<a") !== -1) {
+    body += "<!-- " + Date.now() + " -->";
+  }
+  const renderAttribs = data.attributes;
+  const html = iconToHTML(body, {
+    ...renderAttribs,
+    width: icon.width + "",
+    height: icon.height + ""
+  });
+  const url = svgToURL(html);
+  const svgStyle = node.style;
+  const styles = {
+    "--svg": url,
+    "width": fixSize(renderAttribs.width),
+    "height": fixSize(renderAttribs.height),
+    ...useMask ? monotoneProps : coloredProps
+  };
+  for (const prop in styles) {
+    svgStyle.setProperty(prop, styles[prop]);
+  }
+  return node;
+}
+function renderSVG(data) {
+  const node = document.createElement("span");
+  node.innerHTML = iconToHTML(data.body, data.attributes);
+  return node.firstChild;
+}
+function renderIcon(parent, state) {
+  const iconData = state.icon.data;
+  const customisations = state.customisations;
+  const renderData = iconToSVG(iconData, customisations);
+  if (customisations.preserveAspectRatio) {
+    renderData.attributes["preserveAspectRatio"] = customisations.preserveAspectRatio;
+  }
+  const mode = state.renderedMode;
+  let node;
+  switch (mode) {
+    case "svg":
+      node = renderSVG(renderData);
+      break;
+    default:
+      node = renderSPAN(renderData, {
+        ...defaultIconProps,
+        ...iconData
+      }, mode === "mask");
+  }
+  const oldNode = Array.from(parent.childNodes).find((node2) => {
+    const tag = node2.tagName && node2.tagName.toUpperCase();
+    return tag === "SPAN" || tag === "SVG";
+  });
+  if (oldNode) {
+    if (node.tagName === "SPAN" && oldNode.tagName === node.tagName) {
+      oldNode.setAttribute("style", node.getAttribute("style"));
+    } else {
+      parent.replaceChild(node, oldNode);
+    }
+  } else {
+    parent.appendChild(node);
+  }
+}
+function setPendingState(icon, inline, lastState) {
+  const lastRender = lastState && (lastState.rendered ? lastState : lastState.lastRender);
+  return {
+    rendered: false,
+    inline,
+    icon,
+    lastRender
+  };
+}
+function defineIconifyIcon(name = "iconify-icon") {
+  let customElements;
+  let ParentClass;
+  try {
+    customElements = window.customElements;
+    ParentClass = window.HTMLElement;
+  } catch (err) {
+    return;
+  }
+  if (!customElements || !ParentClass) {
+    return;
+  }
+  const ConflictingClass = customElements.get(name);
+  if (ConflictingClass) {
+    return ConflictingClass;
+  }
+  const attributes = [
+    // Icon
+    "icon",
+    // Mode
+    "mode",
+    "inline",
+    // Customisations
+    "width",
+    "height",
+    "rotate",
+    "flip"
+  ];
+  const IconifyIcon = class extends ParentClass {
+    /**
+     * Constructor
+     */
+    constructor() {
+      super();
+      // Root
+      __publicField(this, "_shadowRoot");
+      // State
+      __publicField(this, "_state");
+      // Attributes check queued
+      __publicField(this, "_checkQueued", false);
+      const root = this._shadowRoot = this.attachShadow({
+        mode: "open"
+      });
+      const inline = getInline(this);
+      updateStyle(root, inline);
+      this._state = setPendingState({
+        value: ""
+      }, inline);
+      this._queueCheck();
+    }
+    /**
+     * Observed attributes
+     */
+    static get observedAttributes() {
+      return attributes.slice(0);
+    }
+    /**
+     * Observed properties that are different from attributes
+     *
+     * Experimental! Need to test with various frameworks that support it
+     */
+    /*
+    static get properties() {
+        return {
+            inline: {
+                type: Boolean,
+                reflect: true,
+            },
+            // Not listing other attributes because they are strings or combination
+            // of string and another type. Cannot have multiple types
+        };
+    }
+    */
+    /**
+     * Attribute has changed
+     */
+    attributeChangedCallback(name2) {
+      if (name2 === "inline") {
+        const newInline = getInline(this);
+        const state = this._state;
+        if (newInline !== state.inline) {
+          state.inline = newInline;
+          updateStyle(this._shadowRoot, newInline);
+        }
+      } else {
+        this._queueCheck();
+      }
+    }
+    /**
+     * Get/set icon
+     */
+    get icon() {
+      const value = this.getAttribute("icon");
+      if (value && value.slice(0, 1) === "{") {
+        try {
+          return JSON.parse(value);
+        } catch (err) {
+        }
+      }
+      return value;
+    }
+    set icon(value) {
+      if (typeof value === "object") {
+        value = JSON.stringify(value);
+      }
+      this.setAttribute("icon", value);
+    }
+    /**
+     * Get/set inline
+     */
+    get inline() {
+      return getInline(this);
+    }
+    set inline(value) {
+      if (value) {
+        this.setAttribute("inline", "true");
+      } else {
+        this.removeAttribute("inline");
+      }
+    }
+    /**
+     * Restart animation
+     */
+    restartAnimation() {
+      const state = this._state;
+      if (state.rendered) {
+        const root = this._shadowRoot;
+        if (state.renderedMode === "svg") {
+          try {
+            root.lastChild.setCurrentTime(0);
+            return;
+          } catch (err) {
+          }
+        }
+        renderIcon(root, state);
+      }
+    }
+    /**
+     * Get status
+     */
+    get status() {
+      const state = this._state;
+      return state.rendered ? "rendered" : state.icon.data === null ? "failed" : "loading";
+    }
+    /**
+     * Queue attributes re-check
+     */
+    _queueCheck() {
+      if (!this._checkQueued) {
+        this._checkQueued = true;
+        setTimeout(() => {
+          this._check();
+        });
+      }
+    }
+    /**
+     * Check for changes
+     */
+    _check() {
+      if (!this._checkQueued) {
+        return;
+      }
+      this._checkQueued = false;
+      const state = this._state;
+      const newIcon = this.getAttribute("icon");
+      if (newIcon !== state.icon.value) {
+        this._iconChanged(newIcon);
+        return;
+      }
+      if (!state.rendered) {
+        return;
+      }
+      const mode = this.getAttribute("mode");
+      const customisations = getCustomisations(this);
+      if (state.attrMode !== mode || haveCustomisationsChanged(state.customisations, customisations)) {
+        this._renderIcon(state.icon, customisations, mode);
+      }
+    }
+    /**
+     * Icon value has changed
+     */
+    _iconChanged(newValue) {
+      const icon = parseIconValue(newValue, (value, name2, data) => {
+        const state = this._state;
+        if (state.rendered || this.getAttribute("icon") !== value) {
+          return;
+        }
+        const icon2 = {
+          value,
+          name: name2,
+          data
+        };
+        if (icon2.data) {
+          this._gotIconData(icon2);
+        } else {
+          state.icon = icon2;
+        }
+      });
+      if (icon.data) {
+        this._gotIconData(icon);
+      } else {
+        this._state = setPendingState(icon, this._state.inline, this._state);
+      }
+    }
+    /**
+     * Got new icon data, icon is ready to (re)render
+     */
+    _gotIconData(icon) {
+      this._checkQueued = false;
+      this._renderIcon(icon, getCustomisations(this), this.getAttribute("mode"));
+    }
+    /**
+     * Re-render based on icon data
+     */
+    _renderIcon(icon, customisations, attrMode) {
+      const renderedMode = getRenderMode(icon.data.body, attrMode);
+      const inline = this._state.inline;
+      renderIcon(this._shadowRoot, this._state = {
+        rendered: true,
+        icon,
+        inline,
+        customisations,
+        attrMode,
+        renderedMode
+      });
+    }
+  };
+  attributes.forEach((attr) => {
+    if (!(attr in IconifyIcon.prototype)) {
+      Object.defineProperty(IconifyIcon.prototype, attr, {
+        get: function() {
+          return this.getAttribute(attr);
+        },
+        set: function(value) {
+          if (value !== null) {
+            this.setAttribute(attr, value);
+          } else {
+            this.removeAttribute(attr);
+          }
+        }
+      });
+    }
+  });
+  const functions = exportFunctions();
+  for (const key in functions) {
+    IconifyIcon[key] = IconifyIcon.prototype[key] = functions[key];
+  }
+  customElements.define(name, IconifyIcon);
+  return IconifyIcon;
+}
+var IconifyIconComponent = defineIconifyIcon() || exportFunctions();
+var { enableCache, disableCache, iconExists, getIcon, listIcons, addIcon, addCollection, calculateSize, buildIcon, loadIcons, loadIcon, addAPIProvider, _api } = IconifyIconComponent;
+
+// ../../node_modules/@iconify-icon/react/dist/iconify.mjs
+var Icon = import_react2.default.forwardRef(
+  (props, ref) => {
+    const newProps = {
       ...props,
-      sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
+      ref
+    };
+    if (typeof props.icon === "object") {
+      newProps.icon = JSON.stringify(props.icon);
     }
-  );
+    if (!props.inline) {
+      delete newProps.inline;
+    }
+    if (props.className) {
+      newProps["class"] = props.className;
+    }
+    return import_react2.default.createElement("iconify-icon", newProps);
+  }
+);
+
+// src/components/Icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Icon2 = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...props });
 };
 
+// src/components/Button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RenderIcon = ({ icon }) => {
+  if (!icon) {
+    return null;
+  }
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2, { icon }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: icon });
+};
+var MemoizedRenderIcon = React3.memo(RenderIcon);
+var Button = React3.forwardRef(
+  (props, ref) => {
+    const { children, leftIcon, rightIcon, ...restProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_theme_ui4.Button,
+      {
+        ref,
+        ...restProps,
+        sx: {
+          cursor: "pointer",
+          paddingX: "lg",
+          paddingY: "md",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "lg",
+          ...restProps.sx
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoizedRenderIcon, { icon: leftIcon }),
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoizedRenderIcon, { icon: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
 // src/components/Card.tsx
+init_tsup_inject();
 var import_theme_ui5 = require("theme-ui");
 
 // src/components/Divider.tsx
+init_tsup_inject();
 var import_theme_ui6 = require("theme-ui");
 
 // src/components/Flex.tsx
+init_tsup_inject();
 var import_theme_ui7 = require("theme-ui");
 
 // src/components/Grid.tsx
+init_tsup_inject();
 var import_theme_ui8 = require("theme-ui");
 
 // src/components/Heading.tsx
+init_tsup_inject();
 var import_theme_ui9 = require("theme-ui");
 
 // src/components/Image.tsx
+init_tsup_inject();
 var import_theme_ui10 = require("theme-ui");
 
 // src/components/Input.tsx
+init_tsup_inject();
 var import_theme_ui11 = require("theme-ui");
 
 // src/components/Label.tsx
+init_tsup_inject();
 var import_theme_ui12 = require("theme-ui");
 
 // src/components/Link.tsx
+init_tsup_inject();
 var import_theme_ui13 = require("theme-ui");
 
 // src/components/LinearProgress.tsx
+init_tsup_inject();
 var import_theme_ui14 = require("theme-ui");
 
 // src/components/Text.tsx
+init_tsup_inject();
 var import_theme_ui15 = require("theme-ui");
 
 // src/components/Select.tsx
+init_tsup_inject();
 var import_theme_ui16 = require("theme-ui");
 
 // src/components/Spinner.tsx
+init_tsup_inject();
 var import_theme_ui17 = require("theme-ui");
 
 // src/components/Radio.tsx
+init_tsup_inject();
 var import_theme_ui18 = require("theme-ui");
 
-// src/components/Icon.tsx
-var import_react2 = require("@iconify/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({ icon, sx, iconProps, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_theme_ui15.Text, { sx, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Icon, { ...iconProps, icon }) });
-};
-
 // src/components/Slider.tsx
+init_tsup_inject();
 var import_theme_ui19 = require("theme-ui");
 
 // src/components/Checkbox.tsx
+init_tsup_inject();
 var import_theme_ui20 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
-var React3 = __toESM(require("react"));
+init_tsup_inject();
+var React4 = __toESM(require("react"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React3.useState(0);
-  React3.useEffect(() => {
+  const [progress, setProgress] = React4.useState(0);
+  React4.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((oldProgress) => {
         if (oldProgress === MAX_PROGRESS) {
@@ -363,12 +2668,15 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
+init_tsup_inject();
 var import_theme_ui21 = require("theme-ui");
 
 // src/components/Container.tsx
+init_tsup_inject();
 var import_theme_ui22 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BaseStyles,
   Box,
   Button,
   Card,
@@ -396,3 +2704,18 @@ var import_theme_ui22 = require("theme-ui");
   useResponsiveValue,
   useTheme
 });
+/*! Bundled license information:
+
+iconify-icon/dist/iconify-icon.mjs:
+  (**
+  * (c) Iconify
+  *
+  * For the full copyright and license information, please view the license.txt
+  * files at https://github.com/iconify/iconify
+  *
+  * Licensed under MIT.
+  *
+  * @license MIT
+  * @version 1.0.5
+  *)
+*/