aidos-ui 5.0.3 → 5.0.5

package/dist/index.js

@@ -1,4 +1,4 @@
-import React34, { useState, useId, useContext, useMemo, cloneElement, useRef, useEffect, useCallback, useSyncExternalStore, createContext, startTransition } from 'react';
+import React35, { useState, Children, 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';
 
@@ -231,6 +231,11 @@ function getMaterial(material) {
       };
   }
 }
+function getSurface(surface) {
+  return {
+    backgroundColor: surface === "primary" ? cssVar("--primary-background") : surface === "secondary" ? cssVar("--secondary-background") : cssVar("--overlay-background")
+  };
+}
 var sizes = {
   xsmall: cssVar("--spacing-xs"),
   small: cssVar("--spacing-s"),
@@ -283,20 +288,20 @@ function getMargin(margin) {
 var lightTheme = {
   /* Background */
   ["--overlay-background"]: "rgb(255, 255, 255)",
-  ["--primary-background"]: "rgb(248, 248, 250)",
-  ["--secondary-background"]: "rgb(242, 242, 245)",
-  ["--divider"]: "rgb(218, 218, 222)",
+  ["--primary-background"]: "rgb(247, 248, 251)",
+  ["--secondary-background"]: "rgb(240, 242, 246)",
+  ["--divider"]: "rgb(216, 219, 226)",
   ["--strong-divider"]: "rgb(100, 100, 100)",
-  ["--pressed-background"]: "rgb(226, 226, 230)",
-  ["--hovered-background"]: "rgb(238, 238, 241)",
-  ["--selected-background"]: "rgb(232, 232, 236)",
-  ["--nav-bar"]: "rgb(244, 244, 246)",
+  ["--pressed-background"]: "rgb(224, 227, 234)",
+  ["--hovered-background"]: "rgb(235, 238, 244)",
+  ["--selected-background"]: "rgb(228, 232, 240)",
+  ["--nav-bar"]: "rgb(242, 244, 248)",
   ["--material-aurora"]: "radial-gradient(120% 90% at 0% 10%, rgba(66, 184, 131, 0.04), transparent 58%), radial-gradient(110% 100% at 100% 90%, rgba(70, 132, 255, 0.055), transparent 62%), linear-gradient(145deg, rgba(248, 249, 252, 0.96), rgba(236, 240, 245, 0.92))",
   ["--material-dawn"]: "radial-gradient(110% 90% at 10% 100%, rgba(255, 162, 105, 0.13), transparent 60%), radial-gradient(100% 85% at 90% 0%, rgba(120, 166, 255, 0.09), transparent 60%), linear-gradient(145deg, rgba(252, 248, 246, 0.96), rgba(244, 238, 242, 0.92))",
   ["--material-mist"]: "radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 65%), linear-gradient(145deg, rgba(247, 248, 250, 0.82), rgba(235, 237, 241, 0.78))",
   ["--material-twilight"]: "radial-gradient(115% 95% at 0% 10%, rgba(103, 91, 214, 0.1), transparent 60%), radial-gradient(110% 90% at 100% 100%, rgba(196, 105, 151, 0.07), transparent 62%), linear-gradient(145deg, rgba(243, 242, 249, 0.97), rgba(229, 231, 241, 0.93))",
   /* Effects */
-  ["--warning"]: "rgb(255, 204, 0)",
+  ["--warning"]: "rgb(166, 107, 0)",
   ["--highlight"]: "rgb(0, 122, 255)",
   ["--outline"]: "rgb(103, 176, 255)",
   ["--light-highlight"]: "rgb(220, 232, 245)",
@@ -346,15 +351,15 @@ var lightTheme = {
 };
 var darkTheme = {
   /* Background */
-  ["--overlay-background"]: "rgb(35, 36, 37)",
-  ["--primary-background"]: "rgb(42, 43, 46)",
-  ["--secondary-background"]: "rgb(65, 66, 67)",
-  ["--divider"]: "rgb(70, 72, 73)",
+  ["--overlay-background"]: "rgb(42, 45, 52)",
+  ["--primary-background"]: "rgb(34, 36, 42)",
+  ["--secondary-background"]: "rgb(47, 50, 58)",
+  ["--divider"]: "rgb(61, 65, 75)",
   ["--strong-divider"]: "rgb(100, 100, 100)",
-  ["--pressed-background"]: "rgb(90, 92, 93)",
-  ["--hovered-background"]: "rgb(50, 53, 54)",
-  ["--selected-background"]: "rgb(65, 68, 69)",
-  ["--nav-bar"]: "rgb(34, 35, 36)",
+  ["--pressed-background"]: "rgb(70, 75, 86)",
+  ["--hovered-background"]: "rgb(48, 52, 61)",
+  ["--selected-background"]: "rgb(56, 61, 72)",
+  ["--nav-bar"]: "rgb(29, 31, 37)",
   ["--material-aurora"]: "radial-gradient(120% 90% at 0% 10%, rgba(45, 160, 112, 0.065), transparent 58%), radial-gradient(110% 100% at 100% 90%, rgba(66, 126, 245, 0.08), transparent 62%), linear-gradient(145deg, rgba(39, 41, 43, 0.96), rgba(27, 30, 33, 0.94))",
   ["--material-dawn"]: "radial-gradient(110% 90% at 10% 100%, rgba(255, 139, 92, 0.095), transparent 60%), radial-gradient(100% 85% at 90% 0%, rgba(104, 145, 235, 0.08), transparent 60%), linear-gradient(145deg, rgba(43, 38, 39, 0.96), rgba(30, 30, 36, 0.94))",
   ["--material-mist"]: "radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.025), transparent 65%), linear-gradient(145deg, rgba(48, 50, 53, 0.82), rgba(30, 32, 35, 0.8))",
@@ -525,9 +530,9 @@ var getBackground = (color) => {
 var MOBILE = 750;
 var TABLET = 1e3;
 var LAPTOP = 1200;
-var MOBILE_MEDIA = `@media (min-width: 0px) and (max-width: ${MOBILE}px)`;
-var TABLET_MEDIA = `@media (min-width: ${MOBILE}px) and (max-width: ${TABLET}px)`;
-var LAPTOP_MEDIA = `@media (min-width: ${TABLET}px) and (max-width: ${LAPTOP}px)`;
+var MOBILE_MEDIA = `@media (min-width: 0px) and (max-width: ${MOBILE - 1}px)`;
+var TABLET_MEDIA = `@media (min-width: ${MOBILE}px) and (max-width: ${TABLET - 1}px)`;
+var LAPTOP_MEDIA = `@media (min-width: ${TABLET}px) and (max-width: ${LAPTOP - 1}px)`;
 var DESKTOP_MEDIA = `@media (min-width: ${LAPTOP}px)`;
 function mobile(jss) {
   return {
@@ -559,6 +564,9 @@ var textColorStyles = {
   highlight: {
     color: cssVar("--highlight-text")
   },
+  warning: {
+    color: cssVar("--warning")
+  },
   negative: {
     color: cssVar("--negative-text")
   },
@@ -604,9 +612,9 @@ var styles = {
     flexShrink: 1
   }
 };
-var BaseView = React34.forwardRef(function BaseView2({ jss, children, tag, grow, shrink, relative, ...otherProps }, ref) {
+var BaseView = React35.forwardRef(function BaseView2({ jss, children, tag, grow, shrink, relative, ...otherProps }, ref) {
   const Tag = tag ?? "div";
-  return React34.createElement(
+  return React35.createElement(
     Tag,
     {
       ...otherProps,
@@ -660,12 +668,7 @@ var styles2 = {
     width: 64
   }
 };
-function Icon({
-  icon,
-  size,
-  color,
-  ariaLabel
-}) {
+function Icon({ icon, size, color, ariaLabel, jss }) {
   return /* @__PURE__ */ jsx(
     BaseView,
     {
@@ -679,7 +682,8 @@ function Icon({
         size === "xlarge" && styles2.xlarge,
         size === "xxlarge" && styles2.xxlarge,
         size === "xxxlarge" && styles2.xxxlarge,
-        getTextColor(color)
+        getTextColor(color),
+        jss
       ],
       children: /* @__PURE__ */ jsx(Icon$1, { icon: `lucide:${icon}`, width: "100%", height: "100%" })
     }
@@ -788,13 +792,24 @@ function getInitial(name) {
   const character = meaningfulCharacter ?? Array.from(normalized)[0];
   return Array.from(character.toLocaleUpperCase())[0] ?? null;
 }
+var avatarPalettes = [
+  ["#eed1cf", "#d6aaa9"],
+  ["#efd5bd", "#d8ae8c"],
+  ["#e6d9b9", "#c8b887"],
+  ["#ceddc5", "#a8c09d"],
+  ["#c6ded8", "#97bdb4"],
+  ["#c9dbea", "#9ebbd2"],
+  ["#d0d2ea", "#a7abd1"],
+  ["#ddcde9", "#baa1cf"],
+  ["#e6ccdc", "#c4a0b6"]
+];
+var avatarTextColor = "rgb(42, 45, 52)";
 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%))`;
+  const palette = avatarPalettes[seed % avatarPalettes.length];
+  return `radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.45), transparent 52%), linear-gradient(145deg, ${palette[0]}, ${palette[1]})`;
 }
-var Avatar = React34.forwardRef(function Avatar2({ name, src, size = "medium", badge, jss }, ref) {
+var Avatar = React35.forwardRef(function Avatar2({ name, src, size = "medium", badge, jss }, ref) {
   const [failedSrc, setFailedSrc] = useState();
   const dimension = dimensions[size];
   const initial = getInitial(name);
@@ -832,18 +847,26 @@ var Avatar = React34.forwardRef(function Avatar2({ name, src, size = "medium", b
               overflow: "hidden",
               borderRadius: "50%",
               background: getGradient(name),
-              color: cssVar("--light-text"),
+              color: avatarTextColor,
               userSelect: "none"
             },
             children: [
-              initial == null ? /* @__PURE__ */ jsx(Icon, { icon: "user", size: textSizes[size], color: "light" }) : /* @__PURE__ */ jsx(
+              initial == null ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "user",
+                  size: textSizes[size],
+                  color: "light",
+                  jss: { color: avatarTextColor }
+                }
+              ) : /* @__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)" },
+                  jss: { color: avatarTextColor, lineHeight: 1 },
                   children: initial
                 }
               ),
@@ -879,12 +902,13 @@ var Avatar = React34.forwardRef(function Avatar2({ name, src, size = "medium", b
             "aria-hidden": "true",
             jss: {
               position: "absolute",
-              right: 0,
-              bottom: 0,
+              right: "14.65%",
+              bottom: "14.65%",
               display: "flex",
               borderRadius: "50%",
               boxShadow: `0 0 0 2px ${cssVar("--overlay-background")}`,
-              pointerEvents: "none"
+              pointerEvents: "none",
+              transform: "translate(50%, 50%)"
             },
             children: badge
           }
@@ -894,6 +918,84 @@ var Avatar = React34.forwardRef(function Avatar2({ name, src, size = "medium", b
   );
 });
 Avatar.displayName = "Avatar";
+var FlexLayout = React35.forwardRef(function FlexLayout2({
+  jss,
+  gap = "none",
+  justify = "none",
+  align = "none",
+  padding = "none",
+  direction = "column",
+  surface,
+  basis,
+  ...otherProps
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      ref,
+      jss: [
+        {
+          display: "flex",
+          flexDirection: direction,
+          gap: getSpacing(gap),
+          justifyContent: justify,
+          alignItems: align,
+          minWidth: 0,
+          ...basis != null ? { flexBasis: typeof basis === "number" ? `${basis}px` : basis } : {}
+        },
+        getPadding(padding),
+        surface && getSurface(surface),
+        jss
+      ],
+      ...otherProps
+    }
+  );
+});
+var Row = React35.forwardRef(function Row2({ wrap = false, jss, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    FlexLayout,
+    {
+      ref,
+      direction: "row",
+      jss: [wrap && { flexWrap: "wrap" }, jss],
+      ...otherProps
+    }
+  );
+});
+var AvatarStack = React35.forwardRef(function AvatarStack2({ children, overlap = 8, jss, ...otherProps }, ref) {
+  const items = Children.toArray(children);
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      ...otherProps,
+      ref,
+      align: "center",
+      gap: "none",
+      jss: [
+        {
+          isolation: "isolate",
+          width: "fit-content"
+        },
+        jss
+      ],
+      children: items.map((child, index) => /* @__PURE__ */ jsx(
+        BaseView,
+        {
+          tag: "span",
+          jss: {
+            position: "relative",
+            zIndex: items.length - index,
+            display: "inline-flex",
+            marginLeft: index === 0 ? 0 : -overlap
+          },
+          children: child
+        },
+        index
+      ))
+    }
+  );
+});
+AvatarStack.displayName = "AvatarStack";
 var sizes2 = {
   xsmall: 4,
   small: 6,
@@ -1090,7 +1192,7 @@ var getInteractableListItemJSS = ({
     }
   ];
 };
-var BaseButton = React34.forwardRef(function BaseButton2({
+var BaseButton = React35.forwardRef(function BaseButton2({
   onClick,
   children,
   jss,
@@ -1131,7 +1233,7 @@ var BaseButton = React34.forwardRef(function BaseButton2({
     }
   );
 });
-var BaseInput = React34.forwardRef(function BaseInput2({
+var BaseInput = React35.forwardRef(function BaseInput2({
   jss,
   label,
   labelPosition = "end",
@@ -1164,8 +1266,8 @@ var BaseInput = React34.forwardRef(function BaseInput2({
     label && labelPosition === "end" && labelElement
   ] });
 });
-var BaseLinkComponentOverrideContext = React34.createContext((props) => /* @__PURE__ */ jsx("a", { ...props }));
-var BaseLink = React34.forwardRef(function BaseLink2({
+var BaseLinkComponentOverrideContext = React35.createContext((props) => /* @__PURE__ */ jsx("a", { ...props }));
+var BaseLink = React35.forwardRef(function BaseLink2({
   onClick,
   children,
   jss,
@@ -1210,51 +1312,39 @@ var BaseLink = React34.forwardRef(function BaseLink2({
     }
   );
 });
-var FlexLayout = React34.forwardRef(function FlexLayout2({
-  jss,
-  gap = "none",
-  justify = "none",
-  align = "none",
-  padding = "none",
-  direction = "column",
-  ...otherProps
-}, ref) {
+var Column = React35.forwardRef(function Column2(props, ref) {
+  return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "column", ...props });
+});
+var BaseList = React35.forwardRef(function BaseList2({ jss, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
-    BaseView,
+    Column,
     {
-      ref,
+      ...otherProps,
+      tag: "ul",
       jss: [
         {
-          display: "flex",
-          flexDirection: direction,
-          gap: getSpacing(gap),
-          justifyContent: justify,
-          alignItems: align
+          listStyle: "none",
+          margin: 0
         },
-        getPadding(padding),
         jss
       ],
-      ...otherProps
+      ref
     }
   );
 });
-var Column = React34.forwardRef(function Column2(props, ref) {
-  return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "column", ...props });
-});
-var BaseList = React34.forwardRef(function BaseList2({ jss, ...otherProps }, ref) {
+var BaseListAddOn = React35.forwardRef(function BaseListAddOn2({ jss, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
-    Column,
+    BaseView,
     {
       ...otherProps,
-      tag: "ul",
       jss: [
         {
-          listStyle: "none",
-          margin: 0,
-          paddingTop: 0,
-          paddingRight: 0,
-          paddingBottom: 0,
-          paddingLeft: 0
+          display: "flex",
+          width: 34,
+          height: 34,
+          flex: "0 0 34px",
+          alignItems: "center",
+          justifyContent: "center"
         },
         jss
       ],
@@ -1262,12 +1352,6 @@ var BaseList = React34.forwardRef(function BaseList2({ jss, ...otherProps }, ref
     }
   );
 });
-var BaseListAddOn = React34.forwardRef(function BaseListAddOn2(props, ref) {
-  return /* @__PURE__ */ jsx(BaseView, { ...props, ref });
-});
-var Row = React34.forwardRef(function Row2(props, ref) {
-  return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "row", ...props });
-});
 function TextPairing({
   headline,
   body,
@@ -1276,10 +1360,10 @@ function TextPairing({
   headlineAddOn,
   bodyColor = "secondary",
   bodySize = "medium",
-  bodyEllipsis = true,
+  bodyEllipsis = false,
   addOn,
   addOnPosition = "start",
-  gap = "small",
+  gap = "medium",
   align = "stretch",
   grow,
   shrink,
@@ -1305,12 +1389,14 @@ function TextPairing({
           Row,
           {
             align: "center",
+            gap: "small",
             jss: {
-              textAlign: "start"
+              textAlign: "start",
+              minWidth: 0
             },
             children: [
               /* @__PURE__ */ jsx(Text, { bold: headlineBold, color: headlineColor, size: headlineSize, children: headline }),
-              headlineAddOn && /* @__PURE__ */ jsx(BaseView, { children: headlineAddOn })
+              headlineAddOn && /* @__PURE__ */ jsx(BaseView, { jss: { flexShrink: 0 }, children: headlineAddOn })
             ]
           }
         ),
@@ -1350,7 +1436,7 @@ function TextPairing({
   }
   return textElement;
 }
-var BaseListItem = React34.forwardRef(function BaseListItem2({
+var BaseListItem = React35.forwardRef(function BaseListItem2({
   children,
   jss,
   headline,
@@ -1360,6 +1446,7 @@ var BaseListItem = React34.forwardRef(function BaseListItem2({
   body,
   bodySize = "small",
   bodyColor = "secondary",
+  bodyEllipsis = true,
   addOn,
   addOnPosition,
   outerAddOn,
@@ -1385,6 +1472,7 @@ var BaseListItem = React34.forwardRef(function BaseListItem2({
       body,
       bodySize,
       bodyColor: disabled ? "subtle" : bodyColor,
+      bodyEllipsis,
       grow: true,
       shrink: false
     }
@@ -1401,7 +1489,7 @@ var BaseListItem = React34.forwardRef(function BaseListItem2({
         children: children({ content })
       }
     ),
-    outerAddOn && /* @__PURE__ */ jsx(BaseView, { role: "gridcell", children: outerAddOn })
+    outerAddOn && /* @__PURE__ */ jsx(BaseListAddOn, { role: "gridcell", children: outerAddOn })
   ] });
 });
 function Box({
@@ -1420,7 +1508,7 @@ function Box({
     }
   );
 }
-var Button = React34.forwardRef(function Button2({
+var Button = React35.forwardRef(function Button2({
   children,
   color,
   bare,
@@ -1690,7 +1778,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 = React34.forwardRef(function Calendar2({
+var Calendar = React35.forwardRef(function Calendar2({
   date,
   cell,
   header,
@@ -1783,6 +1871,11 @@ var variantStyles = {
     backgroundColor: cssVar("--overlay-background"),
     borderRadius: cssVar("--border-radius-xl"),
     boxShadow: cssVar("--shadow-lg")
+  },
+  flat: {
+    backgroundColor: cssVar("--overlay-background"),
+    borderRadius: 0,
+    boxShadow: "none"
   }
 };
 function Card({
@@ -1943,7 +2036,7 @@ function Circle({
     }
   );
 }
-var IconButton = React34.forwardRef(function IconButton2({ icon, color, bare, disabled, jss, label, ...buttonProps }, ref) {
+var IconButton = React35.forwardRef(function IconButton2({ icon, color, bare, disabled, jss, label, ...buttonProps }, ref) {
   return /* @__PURE__ */ jsxs(
     BaseButton,
     {
@@ -2000,7 +2093,7 @@ function Toggle({
     }
   );
 }
-var DarkModeContext = React34.createContext({
+var DarkModeContext = React35.createContext({
   enabled: false,
   toggle: () => {
   }
@@ -2067,7 +2160,7 @@ function DarkModeToggle() {
     }
   );
 }
-var InputFrame = React34.forwardRef(function InputFrame2({ children, jss, ...rowProps }, ref) {
+var InputFrame = React35.forwardRef(function InputFrame2({ children, jss, ...rowProps }, ref) {
   return /* @__PURE__ */ jsx(
     Row,
     {
@@ -2106,7 +2199,7 @@ var InputFrame = React34.forwardRef(function InputFrame2({ children, jss, ...row
     }
   );
 });
-var NumericInputSegment = React34.forwardRef(
+var NumericInputSegment = React35.forwardRef(
   function NumericInputSegment2({
     value,
     label,
@@ -2663,7 +2756,7 @@ function DateCalendar({
     )
   ] });
 }
-var DateInput = React34.forwardRef(function DateInput2({
+var DateInput = React35.forwardRef(function DateInput2({
   date,
   onDateChange,
   label,
@@ -2848,7 +2941,7 @@ var styles6 = {
     }
   }
 };
-var DatetimeInput = React34.forwardRef(function DatetimeInput2({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) {
+var DatetimeInput = React35.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(
@@ -2934,7 +3027,7 @@ var Dialog = ({
     /* @__PURE__ */ jsx(BaseView, { jss: styles8.content, children })
   ] });
 };
-var DialogContext = React34.createContext({
+var DialogContext = React35.createContext({
   setDialog: () => {
   }
 });
@@ -3021,7 +3114,7 @@ function guid() {
     return v.toString(16);
   });
 }
-var IconLink = React34.forwardRef(function IconLink2({ icon, color, bare, disabled, jss, ...otherProps }, ref) {
+var IconLink = React35.forwardRef(function IconLink2({ icon, color, bare, disabled, jss, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
     BaseLink,
     {
@@ -3053,7 +3146,7 @@ var IconLink = React34.forwardRef(function IconLink2({ icon, color, bare, disabl
     }
   );
 });
-var Link = React34.forwardRef(function Link2({
+var Link = React35.forwardRef(function Link2({
   children,
   color,
   bare,
@@ -3143,6 +3236,7 @@ var Link = React34.forwardRef(function Link2({
 function List({
   ariaLabel,
   jss,
+  gap = "small",
   autofocus = false,
   navigation = true,
   ...otherProps
@@ -3155,11 +3249,12 @@ function List({
       "aria-label": ariaLabel,
       ref: rootRef,
       jss: [{ overflow: "hidden" }, jss],
+      gap,
       ...otherProps
     }
   );
 }
-var ListButtonItem = React34.forwardRef(function ListButtonItem2({
+var ListButtonItem = React35.forwardRef(function ListButtonItem2({
   onClick,
   color = "secondary",
   disabled = false,
@@ -3218,10 +3313,26 @@ function ListHeaderItem({
     }
   );
 }
-var ListItem = React34.forwardRef(function ListItem2(props, ref) {
-  return /* @__PURE__ */ jsx(BaseListItem, { ...props, jss: props.jss, ref, children: ({ content }) => content });
+var ListItem = React35.forwardRef(function ListItem2({
+  bodyEllipsis = false,
+  bodySize = "medium",
+  padding = "none",
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseListItem,
+    {
+      ...props,
+      bodyEllipsis,
+      bodySize,
+      padding,
+      jss: props.jss,
+      ref,
+      children: ({ content }) => content
+    }
+  );
 });
-var ListLinkItem = React34.forwardRef(function ListLinkItem2({
+var ListLinkItem = React35.forwardRef(function ListLinkItem2({
   onClick,
   href,
   disabled = false,
@@ -3780,13 +3891,13 @@ function Providers({
     initialValue: false,
     loadingValue: false
   });
-  const toggleDarkMode = React34.useCallback(
+  const toggleDarkMode = React35.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 = React34.forwardRef(function RangeInput2({
+var RangeInput = React35.forwardRef(function RangeInput2({
   value,
   onValueChange,
   jssRoot,
@@ -3853,7 +3964,7 @@ var RangeInput = React34.forwardRef(function RangeInput2({
     }
   );
 });
-var StackContext = React34.createContext({
+var StackContext = React35.createContext({
   subscribe: () => {
     return () => {
     };
@@ -3912,7 +4023,7 @@ function RootView({
         flexShrink: 1,
         flexBasis: "0%",
         overflow: "auto",
-        backgroundColor: cssVar("--secondary-background"),
+        backgroundColor: cssVar("--primary-background"),
         minHeight: "600px"
       },
       children
@@ -3993,7 +4104,7 @@ function Select({
   );
 }
 function stateMachineContextFactory(stateMachineConfig) {
-  const StateMachineContext = React34.createContext({
+  const StateMachineContext = React35.createContext({
     subscribe: () => {
       throw new Error("Not implemented");
     },
@@ -4101,7 +4212,7 @@ function createStorage({
   }
   function useStorage(selector) {
     const [localState, setLocalState] = useState(() => selector(state.current));
-    const { subscribe } = React34.useContext(StorageContext);
+    const { subscribe } = React35.useContext(StorageContext);
     useEffect(() => {
       return subscribe((newState) => {
         const newLocalState = selector(newState);
@@ -4111,11 +4222,11 @@ function createStorage({
     return localState;
   }
   function useMutation() {
-    const { mutate } = React34.useContext(StorageContext);
+    const { mutate } = React35.useContext(StorageContext);
     return mutate;
   }
   function usePersist() {
-    const { persist } = React34.useContext(StorageContext);
+    const { persist } = React35.useContext(StorageContext);
     return persist;
   }
   const dbPromise = new Promise((resolve, reject) => {
@@ -4235,7 +4346,7 @@ function Sublist({
   jss,
   secondaryAddOn
 }) {
-  const [collapsed, setCollapsed] = React34.useState(initialState.collapsed);
+  const [collapsed, setCollapsed] = React35.useState(initialState.collapsed);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ListButtonItem,
@@ -4313,8 +4424,7 @@ var styles12 = {
     getMaterial("aurora"),
     {
       borderRadius: cssVar("--border-radius-xl"),
-      boxShadow: cssVar("--shadow-md"),
-      overflow: "hidden"
+      boxShadow: cssVar("--shadow-md")
     }
   ],
   horizontal: {
@@ -4353,16 +4463,17 @@ var styles12 = {
     borderRadius: cssVar("--border-radius-l"),
     justifyContent: "center",
     textDecoration: "none",
-    userSelect: "none"
+    userSelect: "none",
+    ":focus-visible": {
+      outlineOffset: -2
+    }
   },
   horizontalItem: {
     flex: 1,
     minWidth: 0
   },
-  floatingItem: {
-    ":focus-visible": {
-      outlineOffset: -2
-    }
+  defaultItem: {
+    borderRadius: 0
   },
   floatingHorizontalItem: {
     minWidth: "auto"
@@ -4387,6 +4498,10 @@ function TabBar({
   ...otherProps
 }) {
   const horizontal = direction === "row";
+  const selectedIndex = tabs.findIndex((tab) => tab.selected === true);
+  const root = useNavigation({
+    initialIndex: selectedIndex === -1 ? 0 : selectedIndex
+  });
   return /* @__PURE__ */ jsxs(
     BaseView,
     {
@@ -4404,6 +4519,7 @@ function TabBar({
         /* @__PURE__ */ jsx(
           FlexLayout,
           {
+            ref: root,
             ...otherProps,
             direction,
             align,
@@ -4415,7 +4531,7 @@ function TabBar({
               const tabJSS = [
                 styles12.item,
                 horizontal ? styles12.horizontalItem : styles12.verticalItem,
-                variant === "floating" && styles12.floatingItem,
+                variant === "default" && styles12.defaultItem,
                 variant === "floating" && horizontal && styles12.floatingHorizontalItem,
                 selected && {
                   backgroundColor: cssVar("--light-highlight")
@@ -4554,6 +4670,7 @@ function Tabs({
       role: "tablist",
       jss: [
         variant === "segmented" && {
+          isolation: "isolate",
           backgroundColor: cssVar("--hovered-background"),
           borderRadius: cssVar("--border-radius-l"),
           maxWidth: "100%",
@@ -4614,9 +4731,10 @@ function Tabs({
                 },
                 variant === "segmented" && {
                   position: "relative",
+                  zIndex: selected ? 1 : 0,
                   borderRadius: cssVar("--border-radius-m"),
                   backgroundColor: selected ? cssVar("--overlay-background") : "transparent",
-                  boxShadow: selected ? cssVar("--shadow-sm") : "none",
+                  boxShadow: selected ? `0 0 0 1px ${cssVar("--divider")}, 0 0 4px color-mix(in srgb, ${cssVar("--primary-text")} 10%, transparent)` : "none",
                   transition: `background-color ${cssVar("--transition-fast")}, box-shadow ${cssVar("--transition-fast")}`,
                   ":hover": {
                     backgroundColor: selected ? cssVar("--overlay-background") : cssVar("--hovered-background")
@@ -4650,7 +4768,7 @@ function Tabs({
     }
   );
 }
-var TextArea = React34.forwardRef(function TextArea2({
+var TextArea = React35.forwardRef(function TextArea2({
   jss,
   onValueChange,
   value,
@@ -4688,7 +4806,7 @@ var TextArea = React34.forwardRef(function TextArea2({
     }
   );
 });
-var TextInput = React34.forwardRef(function TextInput2({
+var TextInput = React35.forwardRef(function TextInput2({
   value,
   onValueChange,
   jssRoot,
@@ -4800,7 +4918,7 @@ function parseSegments2(segments, base) {
     minute
   );
 }
-var TimeInput = React34.forwardRef(function TimeInput2({
+var TimeInput = React35.forwardRef(function TimeInput2({
   time,
   onTimeChange,
   label,
@@ -4916,6 +5034,44 @@ var TimeInput = React34.forwardRef(function TimeInput2({
     field
   ] });
 });
+var Toolbar = React35.forwardRef(function Toolbar2({
+  headline,
+  body,
+  leading,
+  actions,
+  actionsGap = "medium",
+  headlineColor,
+  headlineSize = "xlarge",
+  headlineBold = true,
+  bodyColor,
+  bodySize,
+  bodyEllipsis = false,
+  gap = "large",
+  align = "center",
+  justify = "space-between",
+  ...otherProps
+}, ref) {
+  return /* @__PURE__ */ jsxs(Row, { ref, gap, align, justify, ...otherProps, children: [
+    /* @__PURE__ */ jsx(
+      TextPairing,
+      {
+        headline,
+        body,
+        addOn: leading,
+        headlineColor,
+        headlineSize,
+        headlineBold,
+        bodyColor,
+        bodySize,
+        bodyEllipsis,
+        grow: true,
+        shrink: true
+      }
+    ),
+    actions != null && /* @__PURE__ */ jsx(Row, { align: "center", gap: actionsGap, jss: { flexShrink: 0 }, children: actions })
+  ] });
+});
+Toolbar.displayName = "Toolbar";
 var styles14 = {
   tooltip: {
     top: "auto",
@@ -5068,6 +5224,6 @@ function usePromise(promiseFactory, inputs, initialValue) {
   return [value, error];
 }
 
-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 };
+export { Avatar, AvatarStack, 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, Toolbar, Tooltip, baseStyles, createEmitter, createStorage, cssVar, darkTheme, desktop, getBackground, getBaseStyles, getColorValue, getCookie, getMargin, getMaterial, getPadding, getSize, getSpacing, getSurface, 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