@ttoss/ui 1.30.1 → 1.30.3

package/dist/esm/index.js

@@ -1,122 +1,400 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+var __create = Object.create;
 var __defProp = Object.defineProperty;
+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 __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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 __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
+// tsup.inject.js
+import * as React from "react";
+var init_tsup_inject = __esm({
+  "tsup.inject.js"() {
+    "use strict";
+  }
+});
+
+// ../../node_modules/deepmerge/dist/cjs.js
+var require_cjs = __commonJS({
+  "../../node_modules/deepmerge/dist/cjs.js"(exports, module) {
+    "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;
+    module.exports = deepmerge_1;
+  }
+});
+
 // src/index.ts
+init_tsup_inject();
+import { BaseStyles } from "theme-ui";
 import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
 
 // src/theme/ThemeProvider.tsx
-import * as React2 from "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'
+    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
   },
-  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"
+  borders: {
+    default: coreBorders.medium
   },
-  fontWeights: {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800
-  },
-  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",
@@ -174,109 +452,59 @@ 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
 import { Global, css } from "@emotion/react";
-import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
+import { ThemeProvider as ThemeUiProvider } from "theme-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
-  theme = {},
+  theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  const mergedTheme = React2.useMemo(() => {
-    if (typeof theme === "function") {
-      return theme;
-    }
-    return merge(BruttalTheme, theme);
-  }, [theme]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ThemeUiProvider, { theme: mergedTheme, children: [
-    fonts.map((url) => {
-      return /* @__PURE__ */ jsx(
-        Global,
-        {
-          styles: css`
-                @import url('${url}');
-              `
-        },
-        url
-      );
-    }),
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ThemeUiProvider, { theme, children: [
+    /* @__PURE__ */ jsx(
+      Global,
+      {
+        styles: css`
+            ${fonts.map((url) => {
+          return `@import url('${url}');`;
+        }).join("\n")}
+          `
+      }
+    ),
     children
   ] }) });
 };
-var ThemeProvider_default = ThemeProvider;
 
 // src/theme/useTheme.ts
+init_tsup_inject();
 import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
 // src/components/Box.tsx
+init_tsup_inject();
 import { Box } from "theme-ui";
 
 // src/components/Button.tsx
-import { Button as ButtonUi } from "theme-ui";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Button = (props) => {
-  return /* @__PURE__ */ jsx2(
-    ButtonUi,
-    {
-      ...props,
-      sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
-    }
-  );
-};
-
-// src/components/Card.tsx
-import { Card } from "theme-ui";
-
-// src/components/Divider.tsx
-import { Divider } from "theme-ui";
-
-// src/components/Flex.tsx
-import { Flex } from "theme-ui";
-
-// src/components/Grid.tsx
-import { Grid } from "theme-ui";
-
-// src/components/Heading.tsx
-import { Heading } from "theme-ui";
-
-// src/components/Image.tsx
-import { Image } from "theme-ui";
-
-// src/components/Input.tsx
-import { Input } from "theme-ui";
-
-// src/components/Label.tsx
-import { Label } from "theme-ui";
-
-// src/components/Link.tsx
-import { Link } from "theme-ui";
-
-// src/components/LinearProgress.tsx
+init_tsup_inject();
+import * as React3 from "react";
 import {
-  Progress
+  Button as ButtonUi
 } from "theme-ui";
 
-// src/components/Text.tsx
-import { Text } from "theme-ui";
-
-// src/components/Select.tsx
-import { Select } from "theme-ui";
-
-// src/components/Spinner.tsx
-import { Spinner } from "theme-ui";
-
-// src/components/Radio.tsx
-import { Radio } from "theme-ui";
+// src/components/Icon.tsx
+init_tsup_inject();
 
 // ../../node_modules/@iconify-icon/react/dist/iconify.mjs
-import React3 from "react";
+init_tsup_inject();
+import React2 from "react";
 
 // ../../node_modules/iconify-icon/dist/iconify-icon.mjs
+init_tsup_inject();
 var defaultIconDimensions = Object.freeze(
   {
     left: 0,
@@ -1468,6 +1696,7 @@ function parseIconValue(value, onload) {
       value,
       name,
       data
+      // could be 'null' -> icon is missing
     };
   }
   const loading = loadIcons$1([name], () => onload(value, name, getIconData(name)));
@@ -1819,7 +2048,12 @@ function exportFunctions() {
       if (typeof preload === "object" && preload !== null) {
         (preload instanceof Array ? preload : [preload]).forEach((item) => {
           try {
-            if (typeof item !== "object" || item === null || item instanceof Array || typeof item.icons !== "object" || typeof item.prefix !== "string" || !addCollection$1(item)) {
+            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) {
@@ -2000,19 +2234,28 @@ function defineIconifyIcon(name = "iconify-icon") {
     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"
@@ -2024,9 +2267,32 @@ function defineIconifyIcon(name = "iconify-icon") {
       }, 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);
@@ -2039,6 +2305,9 @@ function defineIconifyIcon(name = "iconify-icon") {
         this._queueCheck();
       }
     }
+    /**
+     * Get/set icon
+     */
     get icon() {
       const value = this.getAttribute("icon");
       if (value && value.slice(0, 1) === "{") {
@@ -2055,12 +2324,22 @@ function defineIconifyIcon(name = "iconify-icon") {
       }
       this.setAttribute("icon", value);
     }
+    /**
+     * Get/set inline
+     */
     get inline() {
       return getInline(this);
     }
     set inline(value) {
-      this.setAttribute("inline", value ? "true" : null);
+      if (value) {
+        this.setAttribute("inline", "true");
+      } else {
+        this.removeAttribute("inline");
+      }
     }
+    /**
+     * Restart animation
+     */
     restartAnimation() {
       const state = this._state;
       if (state.rendered) {
@@ -2075,10 +2354,16 @@ function defineIconifyIcon(name = "iconify-icon") {
         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;
@@ -2087,6 +2372,9 @@ function defineIconifyIcon(name = "iconify-icon") {
         });
       }
     }
+    /**
+     * Check for changes
+     */
     _check() {
       if (!this._checkQueued) {
         return;
@@ -2107,6 +2395,9 @@ function defineIconifyIcon(name = "iconify-icon") {
         this._renderIcon(state.icon, customisations, mode);
       }
     }
+    /**
+     * Icon value has changed
+     */
     _iconChanged(newValue) {
       const icon = parseIconValue(newValue, (value, name2, data) => {
         const state = this._state;
@@ -2130,10 +2421,16 @@ function defineIconifyIcon(name = "iconify-icon") {
         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;
@@ -2154,7 +2451,11 @@ function defineIconifyIcon(name = "iconify-icon") {
           return this.getAttribute(attr);
         },
         set: function(value) {
-          this.setAttribute(attr, value);
+          if (value !== null) {
+            this.setAttribute(attr, value);
+          } else {
+            this.removeAttribute(attr);
+          }
         }
       });
     }
@@ -2170,7 +2471,7 @@ 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 = React3.forwardRef(
+var Icon = React2.forwardRef(
   (props, ref) => {
     const newProps = {
       ...props,
@@ -2185,23 +2486,124 @@ var Icon = React3.forwardRef(
     if (props.className) {
       newProps["class"] = props.className;
     }
-    return React3.createElement("iconify-icon", newProps);
+    return React2.createElement("iconify-icon", newProps);
   }
 );
 
 // src/components/Icon.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Icon2 = (props) => {
-  return /* @__PURE__ */ jsx3(Icon, { ...props });
+  return /* @__PURE__ */ jsx2(Icon, { ...props });
 };
 
+// src/components/Button.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var RenderIcon = ({ icon }) => {
+  if (!icon) {
+    return null;
+  }
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3(Icon2, { icon }) });
+  }
+  return /* @__PURE__ */ jsx3(Fragment2, { children: icon });
+};
+var MemoizedRenderIcon = React3.memo(RenderIcon);
+var Button = React3.forwardRef(
+  (props, ref) => {
+    const { children, leftIcon, rightIcon, ...restProps } = props;
+    return /* @__PURE__ */ jsxs2(
+      ButtonUi,
+      {
+        ref,
+        ...restProps,
+        sx: {
+          cursor: "pointer",
+          paddingX: "lg",
+          paddingY: "md",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "lg",
+          ...restProps.sx
+        },
+        children: [
+          /* @__PURE__ */ jsx3(MemoizedRenderIcon, { icon: leftIcon }),
+          children,
+          /* @__PURE__ */ jsx3(MemoizedRenderIcon, { icon: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+init_tsup_inject();
+import { Card } from "theme-ui";
+
+// src/components/Divider.tsx
+init_tsup_inject();
+import { Divider } from "theme-ui";
+
+// src/components/Flex.tsx
+init_tsup_inject();
+import { Flex } from "theme-ui";
+
+// src/components/Grid.tsx
+init_tsup_inject();
+import { Grid } from "theme-ui";
+
+// src/components/Heading.tsx
+init_tsup_inject();
+import { Heading } from "theme-ui";
+
+// src/components/Image.tsx
+init_tsup_inject();
+import { Image } from "theme-ui";
+
+// src/components/Input.tsx
+init_tsup_inject();
+import { Input } from "theme-ui";
+
+// src/components/Label.tsx
+init_tsup_inject();
+import { Label } from "theme-ui";
+
+// src/components/Link.tsx
+init_tsup_inject();
+import { Link } from "theme-ui";
+
+// src/components/LinearProgress.tsx
+init_tsup_inject();
+import {
+  Progress
+} from "theme-ui";
+
+// src/components/Text.tsx
+init_tsup_inject();
+import { Text } from "theme-ui";
+
+// src/components/Select.tsx
+init_tsup_inject();
+import { Select } from "theme-ui";
+
+// src/components/Spinner.tsx
+init_tsup_inject();
+import { Spinner } from "theme-ui";
+
+// src/components/Radio.tsx
+init_tsup_inject();
+import { Radio } from "theme-ui";
+
 // src/components/Slider.tsx
+init_tsup_inject();
 import { Slider } from "theme-ui";
 
 // src/components/Checkbox.tsx
+init_tsup_inject();
 import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
+init_tsup_inject();
 import * as React4 from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
@@ -2232,11 +2634,14 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
+init_tsup_inject();
 import { Textarea } from "theme-ui";
 
 // src/components/Container.tsx
+init_tsup_inject();
 import { Container } from "theme-ui";
 export {
+  BaseStyles,
   Box,
   Button,
   Card,
@@ -2259,19 +2664,23 @@ export {
   Spinner,
   Text,
   Textarea,
-  ThemeProvider_default as ThemeProvider,
+  ThemeProvider,
   useBreakpointIndex,
   useResponsiveValue,
   useTheme
 };
-/**
-* (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.3
+/*! 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
+  *)
 */