aidos-ui 5.0.0 → 5.0.2

package/dist/index.js

@@ -1,8 +1,8 @@
-import React33, { useId, useContext, useMemo, cloneElement, useState, useRef, useEffect, useCallback, useSyncExternalStore, createContext, startTransition } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React34, { useState, useId, useContext, useMemo, cloneElement, useRef, useEffect, useCallback, useSyncExternalStore, createContext, startTransition } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Icon as Icon$1 } from '@iconify/react';
 
-// src/BaseView.tsx
+// src/Avatar.tsx
 
 // src/hash.ts
 function hash(source, modulus) {
@@ -604,9 +604,9 @@ var styles = {
     flexShrink: 1
   }
 };
-var BaseView = React33.forwardRef(function BaseView2({ jss, children, tag, grow, shrink, relative, ...otherProps }, ref) {
+var BaseView = React34.forwardRef(function BaseView2({ jss, children, tag, grow, shrink, relative, ...otherProps }, ref) {
   const Tag = tag ?? "div";
-  return React33.createElement(
+  return React34.createElement(
     Tag,
     {
       ...otherProps,
@@ -621,6 +621,279 @@ var BaseView = React33.forwardRef(function BaseView2({ jss, children, tag, grow,
     children
   );
 });
+var styles2 = {
+  root: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    " svg": {
+      height: "inherit",
+      width: "inherit"
+    }
+  },
+  xsmall: {
+    height: 8,
+    width: 8
+  },
+  small: {
+    height: 12,
+    width: 12
+  },
+  medium: {
+    height: 18,
+    width: 18
+  },
+  large: {
+    height: 24,
+    width: 24
+  },
+  xlarge: {
+    height: 32,
+    width: 32
+  },
+  xxlarge: {
+    height: 48,
+    width: 48
+  },
+  xxxlarge: {
+    height: 64,
+    width: 64
+  }
+};
+function Icon({
+  icon,
+  size,
+  color,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      "aria-label": ariaLabel,
+      jss: [
+        styles2.root,
+        size === "xsmall" && styles2.xsmall,
+        size === "small" && styles2.small,
+        size === "medium" && styles2.medium,
+        size === "large" && styles2.large,
+        size === "xlarge" && styles2.xlarge,
+        size === "xxlarge" && styles2.xxlarge,
+        size === "xxxlarge" && styles2.xxxlarge,
+        getTextColor(color)
+      ],
+      children: /* @__PURE__ */ jsx(Icon$1, { icon: `lucide:${icon}`, width: "100%", height: "100%" })
+    }
+  );
+}
+
+// src/typography.ts
+var fontSize = {
+  xsmall: cssVar("--font-xsmall"),
+  small: cssVar("--font-small"),
+  medium: cssVar("--font-medium"),
+  large: cssVar("--font-large"),
+  xlarge: cssVar("--font-xlarge"),
+  xxlarge: cssVar("--font-xxlarge"),
+  xxxlarge: cssVar("--font-xxxlarge")
+};
+var lineHeight = {
+  xsmall: 14 / 10,
+  small: 16 / 12,
+  medium: 20 / 14,
+  large: 24 / 18,
+  xlarge: 28 / 22,
+  xxlarge: 34 / 28,
+  xxxlarge: 42 / 36
+};
+function getTypography(size) {
+  return {
+    fontSize: fontSize[size],
+    lineHeight: lineHeight[size]
+  };
+}
+function Text({
+  children,
+  color = "primary",
+  size = "medium",
+  align = "none",
+  bold = false,
+  ellipsis = "default",
+  grow,
+  type: Type = "span",
+  jss,
+  htmlFor,
+  ...elementProps
+}) {
+  if (ellipsis === "default") {
+    ellipsis = Type === "span" || Type === "label";
+  }
+  const isHeading = Type === "h1" || Type === "h2" || Type === "h3" || Type === "h4";
+  const className = toClassnames([
+    getTextColor(color),
+    { ...getTypography(size), padding: 0, margin: 0 },
+    isHeading && { fontWeight: "inherit" },
+    bold && { fontWeight: 600 },
+    align === "center" && { textAlign: "center" },
+    ellipsis && {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    grow && { flexGrow: 1 },
+    jss
+  ]);
+  return /* @__PURE__ */ jsx(Type, { ...elementProps, className, htmlFor, children });
+}
+function Label({ size = "medium", type = "label", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function Span({ size = "medium", type = "span", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function P({ size = "medium", type = "p", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H1({ size = "xxlarge", type = "h1", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H2({ size = "xlarge", type = "h2", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H3({ size = "large", type = "h3", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H4({ size = "medium", type = "h4", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function Li({ size = "medium", type = "li", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+var dimensions = {
+  small: 24,
+  medium: 34,
+  large: 48
+};
+var textSizes = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+function normalizeName(name) {
+  return name.normalize("NFKC").trim();
+}
+function getInitial(name) {
+  const normalized = normalizeName(name);
+  if (normalized === "") return null;
+  const meaningfulCharacter = normalized.match(/[\p{L}\p{N}]/u)?.[0];
+  const character = meaningfulCharacter ?? Array.from(normalized)[0];
+  return Array.from(character.toLocaleUpperCase())[0] ?? null;
+}
+function getGradient(name) {
+  const seed = hash(normalizeName(name).toLocaleLowerCase());
+  const firstHue = seed % 360;
+  const secondHue = (firstHue + 35 + seed % 55) % 360;
+  return `radial-gradient(circle at 24% 18%, hsl(${secondHue} 68% 58%), transparent 54%), linear-gradient(145deg, hsl(${firstHue} 62% 48%), hsl(${secondHue} 58% 38%))`;
+}
+var Avatar = React34.forwardRef(function Avatar2({ name, src, size = "medium", badge, jss }, ref) {
+  const [failedSrc, setFailedSrc] = useState();
+  const dimension = dimensions[size];
+  const initial = getInitial(name);
+  const showImage = src != null && src !== "" && failedSrc !== src;
+  return /* @__PURE__ */ jsxs(
+    BaseView,
+    {
+      ref,
+      tag: "span",
+      role: "img",
+      "aria-label": name || "User",
+      jss: [
+        {
+          position: "relative",
+          display: "inline-flex",
+          width: dimension,
+          height: dimension,
+          flex: `0 0 ${dimension}px`,
+          verticalAlign: "middle"
+        },
+        jss
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          BaseView,
+          {
+            tag: "span",
+            jss: {
+              position: "relative",
+              display: "flex",
+              width: "100%",
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              borderRadius: "50%",
+              background: getGradient(name),
+              color: cssVar("--light-text"),
+              userSelect: "none"
+            },
+            children: [
+              initial == null ? /* @__PURE__ */ jsx(Icon, { icon: "user", size: textSizes[size], color: "light" }) : /* @__PURE__ */ jsx(
+                Span,
+                {
+                  size: textSizes[size],
+                  color: "light",
+                  bold: true,
+                  "aria-hidden": "true",
+                  jss: { lineHeight: 1, textShadow: "0 1px 2px rgba(0, 0, 0, 0.2)" },
+                  children: initial
+                }
+              ),
+              showImage && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: (image) => {
+                    if (image?.complete && image.naturalWidth === 0) {
+                      setFailedSrc(src);
+                    }
+                  },
+                  src,
+                  alt: "",
+                  draggable: false,
+                  onError: () => setFailedSrc(src),
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                  }
+                },
+                src
+              )
+            ]
+          }
+        ),
+        badge != null && /* @__PURE__ */ jsx(
+          BaseView,
+          {
+            tag: "span",
+            "aria-hidden": "true",
+            jss: {
+              position: "absolute",
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              borderRadius: "50%",
+              boxShadow: `0 0 0 2px ${cssVar("--overlay-background")}`,
+              pointerEvents: "none"
+            },
+            children: badge
+          }
+        )
+      ]
+    }
+  );
+});
+Avatar.displayName = "Avatar";
 var sizes2 = {
   xsmall: 4,
   small: 6,
@@ -652,7 +925,7 @@ function Badge({
 }
 
 // src/Interactable.tsx
-var styles2 = {
+var styles3 = {
   root: {
     cursor: "pointer",
     display: "inline-flex",
@@ -725,18 +998,18 @@ function getInteractableJSS({
   border
 }) {
   return [
-    styles2.root,
-    color === "primary" && styles2.primary,
-    color === "secondary" && styles2.secondary,
-    color === "negative" && styles2.negative,
-    color === "inverse" && styles2.inverse,
+    styles3.root,
+    color === "primary" && styles3.primary,
+    color === "secondary" && styles3.secondary,
+    color === "negative" && styles3.negative,
+    color === "inverse" && styles3.inverse,
     border && {
       border: `1px solid ${getCSSColor(color, disabled, bare)}`
     },
-    bare && styles2.bare,
-    disabled && styles2.disabled,
+    bare && styles3.bare,
+    disabled && styles3.disabled,
     !bare && !disabled && { boxShadow: cssVar("--shadow-sm") },
-    styles2.opacityHover,
+    styles3.opacityHover,
     animateInteraction && !disabled && {
       position: "relative",
       ":active": {
@@ -790,6 +1063,9 @@ var getInteractableListItemJSS = ({
       flexGrow: 1,
       borderRadius: cssVar("--border-radius-m"),
       textDecoration: "none",
+      ":focus-visible": {
+        outlineOffset: -2
+      },
       ":hover": {
         backgroundColor: cssVar("--hovered-background")
       },
@@ -814,7 +1090,7 @@ var getInteractableListItemJSS = ({
     }
   ];
 };
-var BaseButton = React33.forwardRef(function BaseButton2({
+var BaseButton = React34.forwardRef(function BaseButton2({
   onClick,
   children,
   jss,
@@ -855,90 +1131,7 @@ var BaseButton = React33.forwardRef(function BaseButton2({
     }
   );
 });
-
-// src/typography.ts
-var fontSize = {
-  xsmall: cssVar("--font-xsmall"),
-  small: cssVar("--font-small"),
-  medium: cssVar("--font-medium"),
-  large: cssVar("--font-large"),
-  xlarge: cssVar("--font-xlarge"),
-  xxlarge: cssVar("--font-xxlarge"),
-  xxxlarge: cssVar("--font-xxxlarge")
-};
-var lineHeight = {
-  xsmall: 14 / 10,
-  small: 16 / 12,
-  medium: 20 / 14,
-  large: 24 / 18,
-  xlarge: 28 / 22,
-  xxlarge: 34 / 28,
-  xxxlarge: 42 / 36
-};
-function getTypography(size) {
-  return {
-    fontSize: fontSize[size],
-    lineHeight: lineHeight[size]
-  };
-}
-function Text({
-  children,
-  color = "primary",
-  size = "medium",
-  align = "none",
-  bold = false,
-  ellipsis = "default",
-  grow,
-  type: Type = "span",
-  jss,
-  htmlFor,
-  ...elementProps
-}) {
-  if (ellipsis === "default") {
-    ellipsis = Type === "span" || Type === "label";
-  }
-  const isHeading = Type === "h1" || Type === "h2" || Type === "h3" || Type === "h4";
-  const className = toClassnames([
-    getTextColor(color),
-    { ...getTypography(size), padding: 0, margin: 0 },
-    isHeading && { fontWeight: "inherit" },
-    bold && { fontWeight: 600 },
-    align === "center" && { textAlign: "center" },
-    ellipsis && {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    grow && { flexGrow: 1 },
-    jss
-  ]);
-  return /* @__PURE__ */ jsx(Type, { ...elementProps, className, htmlFor, children });
-}
-function Label({ size = "medium", type = "label", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function Span({ size = "medium", type = "span", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function P({ size = "medium", type = "p", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function H1({ size = "xxlarge", type = "h1", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function H2({ size = "xlarge", type = "h2", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function H3({ size = "large", type = "h3", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function H4({ size = "medium", type = "h4", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-function Li({ size = "medium", type = "li", ...rest }) {
-  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
-}
-var BaseInput = React33.forwardRef(function BaseInput2({
+var BaseInput = React34.forwardRef(function BaseInput2({
   jss,
   label,
   labelPosition = "end",
@@ -971,8 +1164,8 @@ var BaseInput = React33.forwardRef(function BaseInput2({
     label && labelPosition === "end" && labelElement
   ] });
 });
-var BaseLinkComponentOverrideContext = React33.createContext((props) => /* @__PURE__ */ jsx("a", { ...props }));
-var BaseLink = React33.forwardRef(function BaseLink2({
+var BaseLinkComponentOverrideContext = React34.createContext((props) => /* @__PURE__ */ jsx("a", { ...props }));
+var BaseLink = React34.forwardRef(function BaseLink2({
   onClick,
   children,
   jss,
@@ -1017,7 +1210,7 @@ var BaseLink = React33.forwardRef(function BaseLink2({
     }
   );
 });
-var FlexLayout = React33.forwardRef(function FlexLayout2({
+var FlexLayout = React34.forwardRef(function FlexLayout2({
   jss,
   gap = "none",
   justify = "none",
@@ -1045,10 +1238,10 @@ var FlexLayout = React33.forwardRef(function FlexLayout2({
     }
   );
 });
-var Column = React33.forwardRef(function Column2(props, ref) {
+var Column = React34.forwardRef(function Column2(props, ref) {
   return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "column", ...props });
 });
-var BaseList = React33.forwardRef(function BaseList2({ jss, ...otherProps }, ref) {
+var BaseList = React34.forwardRef(function BaseList2({ jss, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
     Column,
     {
@@ -1069,10 +1262,10 @@ var BaseList = React33.forwardRef(function BaseList2({ jss, ...otherProps }, ref
     }
   );
 });
-var BaseListAddOn = React33.forwardRef(function BaseListAddOn2(props, ref) {
+var BaseListAddOn = React34.forwardRef(function BaseListAddOn2(props, ref) {
   return /* @__PURE__ */ jsx(BaseView, { ...props, ref });
 });
-var Row = React33.forwardRef(function Row2(props, ref) {
+var Row = React34.forwardRef(function Row2(props, ref) {
   return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "row", ...props });
 });
 function TextPairing({
@@ -1157,7 +1350,7 @@ function TextPairing({
   }
   return textElement;
 }
-var BaseListItem = React33.forwardRef(function BaseListItem2({
+var BaseListItem = React34.forwardRef(function BaseListItem2({
   children,
   jss,
   headline,
@@ -1227,71 +1420,7 @@ function Box({
     }
   );
 }
-var styles3 = {
-  root: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    " svg": {
-      height: "inherit",
-      width: "inherit"
-    }
-  },
-  xsmall: {
-    height: 8,
-    width: 8
-  },
-  small: {
-    height: 12,
-    width: 12
-  },
-  medium: {
-    height: 18,
-    width: 18
-  },
-  large: {
-    height: 24,
-    width: 24
-  },
-  xlarge: {
-    height: 32,
-    width: 32
-  },
-  xxlarge: {
-    height: 48,
-    width: 48
-  },
-  xxxlarge: {
-    height: 64,
-    width: 64
-  }
-};
-function Icon({
-  icon,
-  size,
-  color,
-  ariaLabel
-}) {
-  return /* @__PURE__ */ jsx(
-    BaseView,
-    {
-      "aria-label": ariaLabel,
-      jss: [
-        styles3.root,
-        size === "xsmall" && styles3.xsmall,
-        size === "small" && styles3.small,
-        size === "medium" && styles3.medium,
-        size === "large" && styles3.large,
-        size === "xlarge" && styles3.xlarge,
-        size === "xxlarge" && styles3.xxlarge,
-        size === "xxxlarge" && styles3.xxxlarge,
-        getTextColor(color)
-      ],
-      children: /* @__PURE__ */ jsx(Icon$1, { icon: `lucide:${icon}`, width: "100%", height: "100%" })
-    }
-  );
-}
-var Button = React33.forwardRef(function Button2({
+var Button = React34.forwardRef(function Button2({
   children,
   color,
   bare,
@@ -1561,7 +1690,7 @@ var THU = dateFormatter.format(new Date(2e3, 1, 10));
 var FRI = dateFormatter.format(new Date(2e3, 1, 11));
 var SAT = dateFormatter.format(new Date(2e3, 1, 12));
 var SUN = dateFormatter.format(new Date(2e3, 1, 13));
-var Calendar = React33.forwardRef(function Calendar2({
+var Calendar = React34.forwardRef(function Calendar2({
   date,
   cell,
   header,
@@ -1814,7 +1943,7 @@ function Circle({
     }
   );
 }
-var IconButton = React33.forwardRef(function IconButton2({ icon, color, bare, disabled, jss, label, ...buttonProps }, ref) {
+var IconButton = React34.forwardRef(function IconButton2({ icon, color, bare, disabled, jss, label, ...buttonProps }, ref) {
   return /* @__PURE__ */ jsxs(
     BaseButton,
     {
@@ -1871,7 +2000,7 @@ function Toggle({
     }
   );
 }
-var DarkModeContext = React33.createContext({
+var DarkModeContext = React34.createContext({
   enabled: false,
   toggle: () => {
   }
@@ -1938,7 +2067,7 @@ function DarkModeToggle() {
     }
   );
 }
-var InputFrame = React33.forwardRef(function InputFrame2({ children, jss, ...rowProps }, ref) {
+var InputFrame = React34.forwardRef(function InputFrame2({ children, jss, ...rowProps }, ref) {
   return /* @__PURE__ */ jsx(
     Row,
     {
@@ -1977,7 +2106,7 @@ var InputFrame = React33.forwardRef(function InputFrame2({ children, jss, ...row
     }
   );
 });
-var NumericInputSegment = React33.forwardRef(
+var NumericInputSegment = React34.forwardRef(
   function NumericInputSegment2({
     value,
     label,
@@ -2534,7 +2663,7 @@ function DateCalendar({
     )
   ] });
 }
-var DateInput = React33.forwardRef(function DateInput2({
+var DateInput = React34.forwardRef(function DateInput2({
   date,
   onDateChange,
   label,
@@ -2719,7 +2848,7 @@ var styles6 = {
     }
   }
 };
-var DatetimeInput = React33.forwardRef(function DatetimeInput2({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) {
+var DatetimeInput = React34.forwardRef(function DatetimeInput2({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) {
   return /* @__PURE__ */ jsxs(Row, { jss: styles6.root, children: [
     icon && /* @__PURE__ */ jsx(Box, { padding: "medium", children: /* @__PURE__ */ jsx(Icon, { size: "medium", color: "secondary", icon }) }),
     /* @__PURE__ */ jsx(
@@ -2805,7 +2934,7 @@ var Dialog = ({
     /* @__PURE__ */ jsx(BaseView, { jss: styles8.content, children })
   ] });
 };
-var DialogContext = React33.createContext({
+var DialogContext = React34.createContext({
   setDialog: () => {
   }
 });
@@ -2892,7 +3021,7 @@ function guid() {
     return v.toString(16);
   });
 }
-var IconLink = React33.forwardRef(function IconLink2({ icon, color, bare, disabled, jss, ...otherProps }, ref) {
+var IconLink = React34.forwardRef(function IconLink2({ icon, color, bare, disabled, jss, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
     BaseLink,
     {
@@ -2924,7 +3053,7 @@ var IconLink = React33.forwardRef(function IconLink2({ icon, color, bare, disabl
     }
   );
 });
-var Link = React33.forwardRef(function Link2({
+var Link = React34.forwardRef(function Link2({
   children,
   color,
   bare,
@@ -3030,7 +3159,7 @@ function List({
     }
   );
 }
-var ListButtonItem = React33.forwardRef(function ListButtonItem2({
+var ListButtonItem = React34.forwardRef(function ListButtonItem2({
   onClick,
   color = "secondary",
   disabled = false,
@@ -3089,10 +3218,10 @@ function ListHeaderItem({
     }
   );
 }
-var ListItem = React33.forwardRef(function ListItem2(props, ref) {
+var ListItem = React34.forwardRef(function ListItem2(props, ref) {
   return /* @__PURE__ */ jsx(BaseListItem, { ...props, jss: props.jss, ref, children: ({ content }) => content });
 });
-var ListLinkItem = React33.forwardRef(function ListLinkItem2({
+var ListLinkItem = React34.forwardRef(function ListLinkItem2({
   onClick,
   href,
   disabled = false,
@@ -3651,13 +3780,13 @@ function Providers({
     initialValue: false,
     loadingValue: false
   });
-  const toggleDarkMode = React33.useCallback(
+  const toggleDarkMode = React34.useCallback(
     () => setDarkModeEnabled((x) => !x),
     [setDarkModeEnabled]
   );
   return /* @__PURE__ */ jsx(JSSProvider, { themes, children: /* @__PURE__ */ jsx(DarkModeProvider, { enabled: darkModeEnabled, toggle: toggleDarkMode, children: /* @__PURE__ */ jsx(DialogProvider, { children }) }) });
 }
-var RangeInput = React33.forwardRef(function RangeInput2({
+var RangeInput = React34.forwardRef(function RangeInput2({
   value,
   onValueChange,
   jssRoot,
@@ -3724,7 +3853,7 @@ var RangeInput = React33.forwardRef(function RangeInput2({
     }
   );
 });
-var StackContext = React33.createContext({
+var StackContext = React34.createContext({
   subscribe: () => {
     return () => {
     };
@@ -3864,7 +3993,7 @@ function Select({
   );
 }
 function stateMachineContextFactory(stateMachineConfig) {
-  const StateMachineContext = React33.createContext({
+  const StateMachineContext = React34.createContext({
     subscribe: () => {
       throw new Error("Not implemented");
     },
@@ -3972,7 +4101,7 @@ function createStorage({
   }
   function useStorage(selector) {
     const [localState, setLocalState] = useState(() => selector(state.current));
-    const { subscribe } = React33.useContext(StorageContext);
+    const { subscribe } = React34.useContext(StorageContext);
     useEffect(() => {
       return subscribe((newState) => {
         const newLocalState = selector(newState);
@@ -3982,11 +4111,11 @@ function createStorage({
     return localState;
   }
   function useMutation() {
-    const { mutate } = React33.useContext(StorageContext);
+    const { mutate } = React34.useContext(StorageContext);
     return mutate;
   }
   function usePersist() {
-    const { persist } = React33.useContext(StorageContext);
+    const { persist } = React34.useContext(StorageContext);
     return persist;
   }
   const dbPromise = new Promise((resolve, reject) => {
@@ -4106,7 +4235,7 @@ function Sublist({
   jss,
   secondaryAddOn
 }) {
-  const [collapsed, setCollapsed] = React33.useState(initialState.collapsed);
+  const [collapsed, setCollapsed] = React34.useState(initialState.collapsed);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ListButtonItem,
@@ -4511,7 +4640,7 @@ function Tabs({
     }
   );
 }
-var TextArea = React33.forwardRef(function TextArea2({
+var TextArea = React34.forwardRef(function TextArea2({
   jss,
   onValueChange,
   value,
@@ -4549,7 +4678,7 @@ var TextArea = React33.forwardRef(function TextArea2({
     }
   );
 });
-var TextInput = React33.forwardRef(function TextInput2({
+var TextInput = React34.forwardRef(function TextInput2({
   value,
   onValueChange,
   jssRoot,
@@ -4661,7 +4790,7 @@ function parseSegments2(segments, base) {
     minute
   );
 }
-var TimeInput = React33.forwardRef(function TimeInput2({
+var TimeInput = React34.forwardRef(function TimeInput2({
   time,
   onTimeChange,
   label,
@@ -4929,6 +5058,6 @@ function usePromise(promiseFactory, inputs, initialValue) {
   return [value, error];
 }
 
-export { Badge, BaseButton, BaseInput, BaseLink, BaseLinkComponentOverrideContext, BaseList, BaseListAddOn, BaseListItem, BaseView, Box, Button, ButtonGroup, Calendar, Card, Checkbox, Circle, Column, DESKTOP_MEDIA, DarkModeContext, DarkModeProvider, DarkModeToggle, DateInput, DatetimeInput, Dialog, DialogProvider, FlexLayout, H1, H2, H3, H4, Icon, IconButton, IconLink, JSSProvider, JSServerStyles, LAPTOP, LAPTOP_MEDIA, Label, Li, Link, List, ListButtonItem, ListDivider, ListHeaderItem, ListItem, ListLinkItem, ListSpacer, MOBILE, MOBILE_MEDIA, MenuIcon, NavigationSplitView, OnVisible, P, Popover, PopoverTrigger, ProgressBar, ProgressCircle, Providers, RangeInput, RootView, Row, Select, Span, StackContextProvider, StaticCheckbox, Sublist, SubmitIconInput, TABLET, TABLET_MEDIA, TabBar, Table, Tabs, Text, TextArea, TextInput, TextInputWithState, TextPairing, TimeInput, Toggle, Tooltip, baseStyles, createEmitter, createStorage, cssVar, darkTheme, desktop, getBackground, getBaseStyles, getColorValue, getCookie, getMargin, getMaterial, getPadding, getSize, getSpacing, getTextColor, guid, hasCookie, hash, laptop, lightTheme, mobile, numberToBase, sizes3 as sizes, stateMachineContextFactory, tablet, timeFormatter, toClassnames, useCookie, useDialog, useIsTopOfStack, useKeyboard, useNavigation, usePromise, useRefEffect, useStream };
+export { Avatar, Badge, BaseButton, BaseInput, BaseLink, BaseLinkComponentOverrideContext, BaseList, BaseListAddOn, BaseListItem, BaseView, Box, Button, ButtonGroup, Calendar, Card, Checkbox, Circle, Column, DESKTOP_MEDIA, DarkModeContext, DarkModeProvider, DarkModeToggle, DateInput, DatetimeInput, Dialog, DialogProvider, FlexLayout, H1, H2, H3, H4, Icon, IconButton, IconLink, JSSProvider, JSServerStyles, LAPTOP, LAPTOP_MEDIA, Label, Li, Link, List, ListButtonItem, ListDivider, ListHeaderItem, ListItem, ListLinkItem, ListSpacer, MOBILE, MOBILE_MEDIA, MenuIcon, NavigationSplitView, OnVisible, P, Popover, PopoverTrigger, ProgressBar, ProgressCircle, Providers, RangeInput, RootView, Row, Select, Span, StackContextProvider, StaticCheckbox, Sublist, SubmitIconInput, TABLET, TABLET_MEDIA, TabBar, Table, Tabs, Text, TextArea, TextInput, TextInputWithState, TextPairing, TimeInput, Toggle, Tooltip, baseStyles, createEmitter, createStorage, cssVar, darkTheme, desktop, getBackground, getBaseStyles, getColorValue, getCookie, getMargin, getMaterial, getPadding, getSize, getSpacing, getTextColor, guid, hasCookie, hash, laptop, lightTheme, mobile, numberToBase, sizes3 as sizes, stateMachineContextFactory, tablet, timeFormatter, toClassnames, useCookie, useDialog, useIsTopOfStack, useKeyboard, useNavigation, usePromise, useRefEffect, useStream };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map