@sanity/ui 5.0.0-alpha.1 → 5.0.0-alpha.11

package/dist/index.js

@@ -1,1872 +1,2195 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import clsx from "clsx";
-import { isValidElement, useRef, useEffect, lazy, Suspense, Children, useId, useState, cloneElement } from "react";
-import { SpinnerIcon, RemoveIcon, CheckmarkIcon } from "@sanity/icons";
-const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Activity, Children, Suspense, cloneElement, isValidElement, lazy, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { SpinnerIcon } from "@sanity/icons/Spinner";
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
+import { RemoveIcon } from "@sanity/icons/Remove";
+import { CloseIcon } from "@sanity/icons/Close";
+import { createPortal } from "react-dom";
+import SelectIcon from "@sanity/icons/Select";
 function getProps(componentProps, propDefs) {
-  const {
-    allComponentProps,
-    allPropDefs
-  } = flattenCompositeProps(componentProps, propDefs), restProps = {};
-  let className = componentProps?.className || "", style = componentProps?.style || {};
-  for (const key in allComponentProps) {
-    const propDef = allPropDefs?.[key], propValue = allComponentProps[key];
-    if (!(propDef && "className" in propDef && propDef.className || propDef?.type === "conditional")) {
-      restProps[key] = propValue;
-      continue;
-    }
-    if (Array.isArray(propValue))
-      for (let i = 0, len = Math.min(propValue.length, BREAKPOINTS_LENGTH); i < len; i++) {
-        const resolvedPropDef = getResolvedPropDef(propValue[i], propDef);
-        resolvedPropDef && (className = clsx(className, getClassName(propValue[i], resolvedPropDef, i)), style = {
-          ...style,
-          ...getStyle(propValue[i], resolvedPropDef, i)
-        });
-      }
-    else {
-      const resolvedPropDef = getResolvedPropDef(propValue, propDef);
-      if (!resolvedPropDef) {
-        restProps[key] = propValue;
-        continue;
-      }
-      className = clsx(className, getClassName(propValue, resolvedPropDef)), style = {
-        ...style,
-        ...getStyle(propValue, resolvedPropDef)
-      };
-    }
-  }
-  return {
-    ...restProps,
-    className,
-    style
-  };
+	let { allComponentProps, allPropDefs } = flattenCompositeProps(componentProps, propDefs), restProps = {}, className = componentProps?.className || "", style = componentProps?.style || {};
+	for (let key in allComponentProps) {
+		let propDef = allPropDefs?.[key], propValue = allComponentProps[key];
+		if (!(propDef && "className" in propDef && propDef.className || propDef?.type === "conditional")) {
+			restProps[key] = propValue;
+			continue;
+		}
+		if (Array.isArray(propValue)) for (let i = 0, len = Math.min(propValue.length, 6); i < len; i++) {
+			let resolvedPropDef = getResolvedPropDef(propValue[i], propDef);
+			resolvedPropDef && (className = clsx(className, getClassName(propValue[i], resolvedPropDef, i)), style = {
+				...style,
+				...getStyle(propValue[i], resolvedPropDef, i)
+			});
+		}
+		else {
+			let resolvedPropDef = getResolvedPropDef(propValue, propDef);
+			if (!resolvedPropDef) {
+				restProps[key] = propValue;
+				continue;
+			}
+			className = clsx(className, getClassName(propValue, resolvedPropDef)), style = {
+				...style,
+				...getStyle(propValue, resolvedPropDef)
+			};
+		}
+	}
+	return {
+		...restProps,
+		className,
+		style
+	};
 }
 function getResolvedPropDef(propValue, propDef) {
-  if (propDef?.type !== "conditional")
-    return propDef;
-  const resolvedPropDef = propDef.resolve(propValue);
-  return resolvedPropDef && "className" in resolvedPropDef && resolvedPropDef.className ? resolvedPropDef : null;
+	if (propDef?.type !== "conditional") return propDef;
+	let resolvedPropDef = propDef.resolve(propValue);
+	return resolvedPropDef && "className" in resolvedPropDef && resolvedPropDef.className ? resolvedPropDef : null;
 }
 function getClassName(propValue, propDef, bp) {
-  if (propDef.type === "union" && propDef.values?.includes(propValue))
-    return `${PREFIX}-${propDef.className}${typeof propValue == "string" ? `-${propValue}` : propValue}${bp ? `-bp-${bp}` : ""}`;
-  if (propDef.type === "string" || propDef.type === "number")
-    return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}`;
-  if (propDef.type === "boolean") {
-    if (propValue)
-      return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}`;
-    if (!propValue && propDef.inverseClassName)
-      return `${PREFIX}-${propDef.inverseClassName}${bp ? `-bp-${bp}` : ""}`;
-  }
-  return "";
+	if (propDef.type === "union" && propDef.values?.includes(propValue)) return `sui-${propDef.className}${typeof propValue == "string" ? `-${propValue}` : propValue}${bp ? `-bp-${bp}` : ""}`;
+	if (propDef.type === "string" || propDef.type === "number") return `sui-${propDef.className}${bp ? `-bp-${bp}` : ""}`;
+	if (propDef.type === "boolean") {
+		if (propValue) return `sui-${propDef.className}${bp ? `-bp-${bp}` : ""}`;
+		if (!propValue && propDef.inverseClassName) return `sui-${propDef.inverseClassName}${bp ? `-bp-${bp}` : ""}`;
+	}
+	return "";
 }
 function getStyle(propValue, propDef, bp) {
-  return (propDef.type === "string" || propDef.type === "number") && propDef.variable ? {
-    [`${propDef.variable}${bp ? `-bp-${bp}` : ""}`]: propValue
-  } : {};
+	return (propDef.type === "string" || propDef.type === "number") && propDef.variable ? { [`${propDef.variable}${bp ? `-bp-${bp}` : ""}`]: propValue } : {};
 }
 function flattenCompositeProps(componentProps, propDefs) {
-  const props = {
-    allComponentProps: {},
-    allPropDefs: {}
-  };
-  for (const key in componentProps)
-    if (propDefs?.[key] && propDefs?.[key].type === "composite")
-      for (const compositeKey in propDefs?.[key].composition) {
-        const compositeValue = getCompositeValue(componentProps[key], propDefs[key], compositeKey);
-        props.allComponentProps[compositeKey] = compositeValue, props.allPropDefs[compositeKey] = propDefs[key].composition[compositeKey]?.propDef;
-      }
-    else
-      props.allComponentProps[key] = componentProps[key], props.allPropDefs[key] = propDefs?.[key];
-  return props;
+	let props = {
+		allComponentProps: {},
+		allPropDefs: {}
+	};
+	for (let key in componentProps) if (propDefs?.[key] && propDefs?.[key].type === "composite") for (let compositeKey in propDefs?.[key].composition) {
+		let compositeValue = getCompositeValue(componentProps[key], propDefs[key], compositeKey);
+		props.allComponentProps[compositeKey] = compositeValue, props.allPropDefs[compositeKey] = propDefs[key].composition[compositeKey]?.propDef;
+	}
+	else props.allComponentProps[key] = componentProps[key], props.allPropDefs[key] = propDefs?.[key];
+	return props;
 }
 function getCompositeValue(propValue, propDef, key) {
-  if (!("composition" in propDef))
-    return;
-  const mapping = propDef.composition[key]?.mapping;
-  let compositeValue;
-  if (Array.isArray(propValue)) {
-    compositeValue = [];
-    for (let i = 0, len = propValue.length; i < len; i++)
-      compositeValue[i] = mapping?.[propValue[i]];
-  } else
-    compositeValue = mapping?.[propValue];
-  return compositeValue;
+	if (!("composition" in propDef)) return;
+	let mapping = propDef.composition[key]?.mapping, compositeValue;
+	if (Array.isArray(propValue)) {
+		compositeValue = [];
+		for (let i = 0, len = propValue.length; i < len; i++) compositeValue[i] = mapping?.[propValue[i]];
+	} else compositeValue = mapping?.[propValue];
+	return compositeValue;
 }
-const HASH = "162541";
 function suffixClassName(className) {
-  return `${className}-${HASH}`;
+	return `${className}-8b95a0`;
 }
-const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
-  border: {
-    type: "boolean",
-    className: "border",
-    inverseClassName: "border-none"
-  },
-  borderTop: {
-    type: "boolean",
-    className: "border-top",
-    inverseClassName: "border-top-none"
-  },
-  borderRight: {
-    type: "boolean",
-    className: "border-right",
-    inverseClassName: "border-right-none"
-  },
-  borderBottom: {
-    type: "boolean",
-    className: "border-bottom",
-    inverseClassName: "border-bottom-none"
-  },
-  borderLeft: {
-    type: "boolean",
-    className: "border-left",
-    inverseClassName: "border-left-none"
-  },
-  radius: {
-    type: "union",
-    className: "radius",
-    values: RADIUS
-  }
+const borderProps = {
+	border: {
+		type: "boolean",
+		className: "border",
+		inverseClassName: "border-none"
+	},
+	borderTop: {
+		type: "boolean",
+		className: "border-top",
+		inverseClassName: "border-top-none"
+	},
+	borderRight: {
+		type: "boolean",
+		className: "border-right",
+		inverseClassName: "border-right-none"
+	},
+	borderBottom: {
+		type: "boolean",
+		className: "border-bottom",
+		inverseClassName: "border-bottom-none"
+	},
+	borderLeft: {
+		type: "boolean",
+		className: "border-left",
+		inverseClassName: "border-left-none"
+	},
+	radius: {
+		type: "union",
+		className: "radius",
+		values: [
+			0,
+			1,
+			2,
+			3,
+			4,
+			5,
+			6,
+			"full"
+		]
+	}
 }, flexChildProps = {
-  flexBasis: {
-    type: "string",
-    className: "flex-basis",
-    variable: "--flex-basis"
-  },
-  flexGrow: {
-    type: "number",
-    className: "flex-grow",
-    variable: "--flex-grow"
-  },
-  flexShrink: {
-    type: "number",
-    className: "flex-shrink",
-    variable: "--flex-shrink"
-  }
+	flexBasis: {
+		type: "string",
+		className: "flex-basis",
+		variable: "--flex-basis"
+	},
+	flexGrow: {
+		type: "number",
+		className: "flex-grow",
+		variable: "--flex-grow"
+	},
+	flexShrink: {
+		type: "number",
+		className: "flex-shrink",
+		variable: "--flex-shrink"
+	}
 }, gridChildProps = {
-  gridColumn: {
-    type: "string",
-    className: "grid-column",
-    variable: "--grid-column"
-  },
-  gridColumnStart: {
-    type: "string",
-    className: "grid-column-start",
-    variable: "--grid-column-start"
-  },
-  gridColumnEnd: {
-    type: "string",
-    className: "grid-column-end",
-    variable: "--grid-column-end"
-  },
-  gridRow: {
-    type: "string",
-    className: "grid-row",
-    variable: "--grid-row"
-  },
-  gridRowStart: {
-    type: "string",
-    className: "grid-row-start",
-    variable: "--grid-row-start"
-  },
-  gridRowEnd: {
-    type: "string",
-    className: "grid-row-end",
-    variable: "--grid-row-end"
-  }
+	gridColumn: {
+		type: "string",
+		className: "grid-column",
+		variable: "--grid-column"
+	},
+	gridColumnStart: {
+		type: "string",
+		className: "grid-column-start",
+		variable: "--grid-column-start"
+	},
+	gridColumnEnd: {
+		type: "string",
+		className: "grid-column-end",
+		variable: "--grid-column-end"
+	},
+	gridRow: {
+		type: "string",
+		className: "grid-row",
+		variable: "--grid-row"
+	},
+	gridRowStart: {
+		type: "string",
+		className: "grid-row-start",
+		variable: "--grid-row-start"
+	},
+	gridRowEnd: {
+		type: "string",
+		className: "grid-row-end",
+		variable: "--grid-row-end"
+	}
 }, heightProps = {
-  height: {
-    type: "string",
-    className: "height",
-    variable: "--height"
-  },
-  minHeight: {
-    type: "string",
-    className: "min-height",
-    variable: "--min-height"
-  },
-  maxHeight: {
-    type: "string",
-    className: "max-height",
-    variable: "--max-height"
-  }
-}, SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], SPACE_AUTO = [...SPACE, "auto"], SPACE_INHERIT = [...SPACE, "inherit"], SPACE_AUTO_NEGATIVE = [-9, -8, -7, -6, -5, -4, -3, -2, -1, ...SPACE, "auto"], marginProps = {
-  margin: {
-    type: "union",
-    className: "m",
-    values: SPACE_AUTO_NEGATIVE
-  },
-  marginX: {
-    type: "union",
-    className: "mx",
-    values: SPACE_AUTO_NEGATIVE
-  },
-  marginY: {
-    type: "union",
-    className: "my",
-    values: SPACE_AUTO_NEGATIVE
-  },
-  marginTop: {
-    type: "union",
-    className: "mt",
-    values: SPACE_AUTO_NEGATIVE
-  },
-  marginRight: {
-    type: "union",
-    className: "mr",
-    values: SPACE_AUTO_NEGATIVE
-  },
-  marginBottom: {
-    type: "union",
-    className: "mb",
-    values: SPACE_AUTO_NEGATIVE
-  },
-  marginLeft: {
-    type: "union",
-    className: "ml",
-    values: SPACE_AUTO_NEGATIVE
-  }
-}, OVERFLOW = ["visible", "hidden", "auto", "scroll", "clip"], overflowProps = {
-  overflow: {
-    type: "union",
-    className: "overflow",
-    values: OVERFLOW
-  },
-  overflowX: {
-    type: "union",
-    className: "overflow-x",
-    values: OVERFLOW
-  },
-  overflowY: {
-    type: "union",
-    className: "overflow-y",
-    values: OVERFLOW
-  }
+	height: {
+		type: "string",
+		className: "height",
+		variable: "--height"
+	},
+	minHeight: {
+		type: "string",
+		className: "min-height",
+		variable: "--min-height"
+	},
+	maxHeight: {
+		type: "string",
+		className: "max-height",
+		variable: "--max-height"
+	}
+}, SPACE = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+], SPACE_AUTO = [...SPACE, "auto"], SPACE_INHERIT = [...SPACE, "inherit"], SPACE_AUTO_NEGATIVE = [
+	-9,
+	-8,
+	-7,
+	-6,
+	-5,
+	-4,
+	-3,
+	-2,
+	-1,
+	...SPACE,
+	"auto"
+], marginProps = {
+	margin: {
+		type: "union",
+		className: "m",
+		values: SPACE_AUTO_NEGATIVE
+	},
+	marginX: {
+		type: "union",
+		className: "mx",
+		values: SPACE_AUTO_NEGATIVE
+	},
+	marginY: {
+		type: "union",
+		className: "my",
+		values: SPACE_AUTO_NEGATIVE
+	},
+	marginTop: {
+		type: "union",
+		className: "mt",
+		values: SPACE_AUTO_NEGATIVE
+	},
+	marginRight: {
+		type: "union",
+		className: "mr",
+		values: SPACE_AUTO_NEGATIVE
+	},
+	marginBottom: {
+		type: "union",
+		className: "mb",
+		values: SPACE_AUTO_NEGATIVE
+	},
+	marginLeft: {
+		type: "union",
+		className: "ml",
+		values: SPACE_AUTO_NEGATIVE
+	}
+}, OVERFLOW = [
+	"visible",
+	"hidden",
+	"auto",
+	"scroll",
+	"clip"
+], overflowProps = {
+	overflow: {
+		type: "union",
+		className: "overflow",
+		values: OVERFLOW
+	},
+	overflowX: {
+		type: "union",
+		className: "overflow-x",
+		values: OVERFLOW
+	},
+	overflowY: {
+		type: "union",
+		className: "overflow-y",
+		values: OVERFLOW
+	}
 }, paddingProps = {
-  padding: {
-    type: "union",
-    className: "p",
-    values: SPACE
-  },
-  paddingX: {
-    type: "union",
-    className: "px",
-    values: SPACE
-  },
-  paddingY: {
-    type: "union",
-    className: "py",
-    values: SPACE
-  },
-  paddingTop: {
-    type: "union",
-    className: "pt",
-    values: SPACE
-  },
-  paddingRight: {
-    type: "union",
-    className: "pr",
-    values: SPACE
-  },
-  paddingBottom: {
-    type: "union",
-    className: "pb",
-    values: SPACE
-  },
-  paddingLeft: {
-    type: "union",
-    className: "pl",
-    values: SPACE
-  }
-}, POSITION = ["absolute", "fixed", "relative", "static", "sticky"], positionProps = {
-  position: {
-    type: "union",
-    className: "position",
-    values: POSITION
-  },
-  inset: {
-    type: "union",
-    className: "inset",
-    values: SPACE_AUTO
-  },
-  top: {
-    type: "union",
-    className: "top",
-    values: SPACE_AUTO
-  },
-  right: {
-    type: "union",
-    className: "right",
-    values: SPACE_AUTO
-  },
-  bottom: {
-    type: "union",
-    className: "bottom",
-    values: SPACE_AUTO
-  },
-  left: {
-    type: "union",
-    className: "left",
-    values: SPACE_AUTO
-  }
-}, SHADOW = [0, 1, 2, 3, 4, 5], shadowProps = {
-  shadow: {
-    type: "union",
-    className: "shadow",
-    values: SHADOW
-  }
-}, TONE = ["neutral", "positive", "suggest", "caution", "critical"], toneProps = {
-  tone: {
-    type: "union",
-    className: "tone",
-    values: TONE
-  }
-}, widthProps = {
-  width: {
-    type: "string",
-    className: "width",
-    variable: "--width"
-  },
-  minWidth: {
-    type: "string",
-    className: "min-width",
-    variable: "--min-width"
-  },
-  maxWidth: {
-    type: "string",
-    className: "max-width",
-    variable: "--max-width"
-  }
-}, zIndexProps = {
-  zIndex: {
-    type: "number",
-    className: "z-index",
-    variable: "--z-index"
-  }
-}, layoutProps = {
-  ...toneProps,
-  ...widthProps,
-  ...heightProps,
-  ...marginProps,
-  ...borderProps,
-  ...paddingProps,
-  ...positionProps,
-  ...overflowProps,
-  ...flexChildProps,
-  ...gridChildProps,
-  ...shadowProps,
-  ...zIndexProps
-}, DISPLAY_BLOCK = ["block", "inline-block", "none"], DISPLAY_FLEX = ["flex", "inline-flex", "none"], DISPLAY_GRID = ["grid", "inline-grid", "none"], boxProps = {
-  as: {
-    type: "string"
-  },
-  display: {
-    type: "union",
-    className: "display",
-    values: DISPLAY_BLOCK
-  },
-  ...layoutProps
+	padding: {
+		type: "union",
+		className: "p",
+		values: SPACE
+	},
+	paddingX: {
+		type: "union",
+		className: "px",
+		values: SPACE
+	},
+	paddingY: {
+		type: "union",
+		className: "py",
+		values: SPACE
+	},
+	paddingTop: {
+		type: "union",
+		className: "pt",
+		values: SPACE
+	},
+	paddingRight: {
+		type: "union",
+		className: "pr",
+		values: SPACE
+	},
+	paddingBottom: {
+		type: "union",
+		className: "pb",
+		values: SPACE
+	},
+	paddingLeft: {
+		type: "union",
+		className: "pl",
+		values: SPACE
+	}
+}, positionProps = {
+	position: {
+		type: "union",
+		className: "position",
+		values: [
+			"absolute",
+			"fixed",
+			"relative",
+			"static",
+			"sticky"
+		]
+	},
+	inset: {
+		type: "union",
+		className: "inset",
+		values: SPACE_AUTO
+	},
+	top: {
+		type: "union",
+		className: "top",
+		values: SPACE_AUTO
+	},
+	right: {
+		type: "union",
+		className: "right",
+		values: SPACE_AUTO
+	},
+	bottom: {
+		type: "union",
+		className: "bottom",
+		values: SPACE_AUTO
+	},
+	left: {
+		type: "union",
+		className: "left",
+		values: SPACE_AUTO
+	}
+}, shadowProps = { shadow: {
+	type: "union",
+	className: "shadow",
+	values: [
+		0,
+		1,
+		2,
+		3,
+		4,
+		5
+	]
+} }, toneProps = { tone: {
+	type: "union",
+	className: "tone",
+	values: [
+		"neutral",
+		"positive",
+		"suggest",
+		"caution",
+		"critical"
+	]
+} }, widthProps = {
+	width: {
+		type: "string",
+		className: "width",
+		variable: "--width"
+	},
+	minWidth: {
+		type: "string",
+		className: "min-width",
+		variable: "--min-width"
+	},
+	maxWidth: {
+		type: "string",
+		className: "max-width",
+		variable: "--max-width"
+	}
+}, zIndexProps = { zIndex: {
+	type: "number",
+	className: "z-index",
+	variable: "--z-index"
+} }, layoutProps = {
+	...toneProps,
+	...widthProps,
+	...heightProps,
+	...marginProps,
+	...borderProps,
+	...paddingProps,
+	...positionProps,
+	...overflowProps,
+	...flexChildProps,
+	...gridChildProps,
+	...shadowProps,
+	...zIndexProps
+}, DISPLAY_BLOCK = [
+	"block",
+	"inline-block",
+	"none"
+], DISPLAY_FLEX = [
+	"flex",
+	"inline-flex",
+	"none"
+], DISPLAY_GRID = [
+	"grid",
+	"inline-grid",
+	"none"
+], boxProps = {
+	as: { type: "string" },
+	display: {
+		type: "union",
+		className: "display",
+		values: DISPLAY_BLOCK
+	},
+	...layoutProps
 }, boxClassName = suffixClassName("sui-Box");
+/** @public */
 function Box(t0) {
-  const $ = c(12);
-  let T0, children, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      display: t22,
-      ...props
-    } = t0, display = t22 === void 0 ? "block" : t22, {
-      as,
-      children: t3,
-      className,
-      style: t4,
-      ...t5
-    } = getProps({
-      display,
-      ...props
-    }, boxProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(boxClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
-  let t2;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Box", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+	let $ = c(12), T0, children, rest, style, t1;
+	if ($[0] !== t0) {
+		let { display: t2, ...props } = t0, { as, children: t3, className, style: t4, ...t5 } = getProps({
+			display: t2 === void 0 ? "block" : t2,
+			...props
+		}, boxProps);
+		children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(boxClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Box",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 }
-const ALIGN_ITEMS = ["baseline", "center", "flex-end", "flex-start", "stretch"], JUSTIFY_CONTENT = ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"], FLEX_DIRECTION = ["row", "row-reverse", "column", "column-reverse"], FLEX_WRAP = ["wrap", "wrap-reverse", "nowrap"], flexParentProps = {
-  alignItems: {
-    type: "union",
-    className: "align-items",
-    values: ALIGN_ITEMS
-  },
-  justifyContent: {
-    type: "union",
-    className: "justify-content",
-    values: JUSTIFY_CONTENT
-  },
-  flexDirection: {
-    type: "union",
-    className: "flex-direction",
-    values: FLEX_DIRECTION
-  },
-  flexWrap: {
-    type: "union",
-    className: "flex",
-    values: FLEX_WRAP
-  }
+const flexParentProps = {
+	alignItems: {
+		type: "union",
+		className: "align-items",
+		values: [
+			"baseline",
+			"center",
+			"flex-end",
+			"flex-start",
+			"stretch"
+		]
+	},
+	justifyContent: {
+		type: "union",
+		className: "justify-content",
+		values: [
+			"flex-start",
+			"flex-end",
+			"center",
+			"space-between",
+			"space-around",
+			"space-evenly"
+		]
+	},
+	flexDirection: {
+		type: "union",
+		className: "flex-direction",
+		values: [
+			"row",
+			"row-reverse",
+			"column",
+			"column-reverse"
+		]
+	},
+	flexWrap: {
+		type: "union",
+		className: "flex",
+		values: [
+			"wrap",
+			"wrap-reverse",
+			"nowrap"
+		]
+	}
 }, gapProps = {
-  gap: {
-    type: "union",
-    className: "gap",
-    values: SPACE_INHERIT
-  },
-  rowGap: {
-    type: "union",
-    className: "row-gap",
-    values: SPACE_INHERIT
-  },
-  columnGap: {
-    type: "union",
-    className: "column-gap",
-    values: SPACE_INHERIT
-  }
+	gap: {
+		type: "union",
+		className: "gap",
+		values: SPACE_INHERIT
+	},
+	rowGap: {
+		type: "union",
+		className: "row-gap",
+		values: SPACE_INHERIT
+	},
+	columnGap: {
+		type: "union",
+		className: "column-gap",
+		values: SPACE_INHERIT
+	}
 }, flexProps = {
-  as: {
-    type: "string"
-  },
-  display: {
-    type: "union",
-    className: "display",
-    values: DISPLAY_FLEX
-  },
-  ...flexParentProps,
-  ...gapProps,
-  ...layoutProps
+	as: { type: "string" },
+	display: {
+		type: "union",
+		className: "display",
+		values: DISPLAY_FLEX
+	},
+	...flexParentProps,
+	...gapProps,
+	...layoutProps
 }, flexClassName = suffixClassName("sui-Flex");
+/** @public */
 function Flex(t0) {
-  const $ = c(12);
-  let T0, children, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      display: t22,
-      ...props
-    } = t0, display = t22 === void 0 ? "flex" : t22, {
-      as,
-      children: t3,
-      className,
-      style: t4,
-      ...t5
-    } = getProps({
-      display,
-      ...props
-    }, flexProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(flexClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
-  let t2;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Flex", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+	let $ = c(12), T0, children, rest, style, t1;
+	if ($[0] !== t0) {
+		let { display: t2, ...props } = t0, { as, children: t3, className, style: t4, ...t5 } = getProps({
+			display: t2 === void 0 ? "flex" : t2,
+			...props
+		}, flexProps);
+		children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(flexClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Flex",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 }
-const FONT_WEIGHT = ["regular", "medium", "semibold", "bold"], TEXT_ALIGN = ["left", "center", "right", "justify"], typographyProps = {
-  align: {
-    type: "union",
-    className: "text",
-    values: TEXT_ALIGN
-  },
-  muted: {
-    type: "boolean",
-    className: "text-muted",
-    inverseClassName: "text-default"
-  },
-  trim: {
-    type: "boolean",
-    className: "text-trim",
-    inverseClassName: "text-trim-none"
-  },
-  truncate: {
-    type: "conditional",
-    resolve: (value) => value === 1 ? {
-      type: "number",
-      className: "text-overflow"
-    } : {
-      type: "number",
-      className: "line-clamp",
-      variable: "--line-clamp"
-    }
-  },
-  weight: {
-    type: "union",
-    className: "weight",
-    values: FONT_WEIGHT
-  },
-  ...marginProps,
-  ...toneProps
-}, ICON_SIZE = [0, 1, 2, 3, 4], iconProps = {
-  icon: {
-    type: "string"
-  },
-  size: {
-    type: "union",
-    className: "icon-body",
-    values: ICON_SIZE
-  },
-  muted: typographyProps.muted,
-  ...toneProps,
-  ...marginProps
+const typographyProps = {
+	align: {
+		type: "union",
+		className: "text",
+		values: [
+			"left",
+			"center",
+			"right",
+			"justify"
+		]
+	},
+	muted: {
+		type: "boolean",
+		className: "text-muted",
+		inverseClassName: "text-default"
+	},
+	trim: {
+		type: "boolean",
+		className: "text-trim",
+		inverseClassName: "text-trim-none"
+	},
+	truncate: {
+		type: "conditional",
+		resolve: (value) => value === 1 ? {
+			type: "number",
+			className: "text-overflow"
+		} : {
+			type: "number",
+			className: "line-clamp",
+			variable: "--line-clamp"
+		}
+	},
+	weight: {
+		type: "union",
+		className: "weight",
+		values: [
+			"regular",
+			"medium",
+			"semibold",
+			"bold"
+		]
+	},
+	...marginProps,
+	...toneProps
+}, ICON_SIZE = [
+	0,
+	1,
+	2,
+	3,
+	4
+], iconProps = {
+	icon: { type: "string" },
+	size: {
+		type: "union",
+		className: "icon-body",
+		values: ICON_SIZE
+	},
+	muted: typographyProps.muted,
+	...toneProps,
+	...marginProps
 }, iconClassName = suffixClassName("sui-Icon");
+/** @public */
 function Icon(t0) {
-  const $ = c(12);
-  let T0, props, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      size: t22,
-      ...t32
-    } = t0;
-    props = t32;
-    const size = t22 === void 0 ? 2 : t22, {
-      className,
-      style: t4,
-      icon: Component,
-      ...t5
-    } = getProps({
-      size,
-      ...props
-    }, iconProps);
-    style = t4, rest = t5, T0 = Component, t1 = clsx(iconClassName, className), $[0] = t0, $[1] = T0, $[2] = props, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    T0 = $[1], props = $[2], rest = $[3], style = $[4], t1 = $[5];
-  const t2 = props["aria-label"] ? void 0 : !0;
-  let t3;
-  return $[6] !== T0 || $[7] !== rest || $[8] !== style || $[9] !== t1 || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, { className: t1, "data-ui": "Icon", style, "aria-hidden": t2, ...rest }), $[6] = T0, $[7] = rest, $[8] = style, $[9] = t1, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
+	let $ = c(12), T0, props, rest, style, t1;
+	if ($[0] !== t0) {
+		let { size: t2, ...t3 } = t0;
+		props = t3;
+		let { className, style: t4, icon: Component, ...t5 } = getProps({
+			size: t2 === void 0 ? 2 : t2,
+			...props
+		}, iconProps);
+		style = t4, rest = t5, T0 = Component, t1 = clsx(iconClassName, className), $[0] = t0, $[1] = T0, $[2] = props, $[3] = rest, $[4] = style, $[5] = t1;
+	} else T0 = $[1], props = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2 = !props["aria-label"] || void 0, t3;
+	return $[6] !== T0 || $[7] !== rest || $[8] !== style || $[9] !== t1 || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		"data-ui": "Icon",
+		style,
+		"aria-hidden": t2,
+		...rest
+	}), $[6] = T0, $[7] = rest, $[8] = style, $[9] = t1, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 }
-const spinnerProps = {
-  size: {
-    type: "union",
-    className: "icon-body",
-    values: ICON_SIZE
-  }
-}, spinnerClassName = suffixClassName("sui-Spinner");
+const spinnerProps = { size: {
+	type: "union",
+	className: "icon-body",
+	values: ICON_SIZE
+} }, spinnerClassName = suffixClassName("sui-Spinner");
+/** @public */
 function Spinner(t0) {
-  const $ = c(12);
-  let T0, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    const {
-      size: t32,
-      ...props
-    } = t0, size = t32 === void 0 ? 2 : t32, {
-      className,
-      style: t4,
-      ...t5
-    } = getProps({
-      size,
-      ...props
-    }, spinnerProps);
-    style = t4, rest = t5, T0 = Icon, t1 = SpinnerIcon, t2 = clsx(spinnerClassName, className), $[0] = t0, $[1] = T0, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2;
-  } else
-    T0 = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5];
-  let t3;
-  return $[6] !== T0 || $[7] !== rest || $[8] !== style || $[9] !== t1 || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, { icon: t1, className: t2, style, "data-ui": "Spinner", role: "status", "aria-label": "Loading...", ...rest }), $[6] = T0, $[7] = rest, $[8] = style, $[9] = t1, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
+	let $ = c(12), T0, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		let { size: t3, ...props } = t0, { className, style: t4, ...t5 } = getProps({
+			size: t3 === void 0 ? 2 : t3,
+			...props
+		}, spinnerProps);
+		style = t4, rest = t5, T0 = Icon, t1 = SpinnerIcon, t2 = clsx(spinnerClassName, className), $[0] = t0, $[1] = T0, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2;
+	} else T0 = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5];
+	let t3;
+	return $[6] !== T0 || $[7] !== rest || $[8] !== style || $[9] !== t1 || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, {
+		icon: t1,
+		className: t2,
+		style,
+		"data-ui": "Spinner",
+		role: "status",
+		"aria-label": "Loading...",
+		...rest
+	}), $[6] = T0, $[7] = rest, $[8] = style, $[9] = t1, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 }
-const TEXT_SIZE = [0, 1, 2, 3, 4], textProps = {
-  as: {
-    type: "string"
-  },
-  size: {
-    type: "union",
-    className: "text-body",
-    values: TEXT_SIZE
-  },
-  ...typographyProps
+const textProps = {
+	as: { type: "string" },
+	size: {
+		type: "union",
+		className: "text-body",
+		values: [
+			0,
+			1,
+			2,
+			3,
+			4
+		]
+	},
+	...typographyProps
 }, textClassName = suffixClassName("sui-Text");
+/** @public */
 function Text(t0) {
-  const $ = c(15);
-  let T0, children, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    t2 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const {
-        size: t32,
-        ...props
-      } = t0, size = t32 === void 0 ? 2 : t32, {
-        as,
-        children: t4,
-        className,
-        style: t5,
-        ...t6
-      } = getProps({
-        size,
-        ...props
-      }, textProps);
-      children = t4, style = t5, rest = t6;
-      const Component = as || "span";
-      if (props.truncate && props.trim) {
-        const t7 = clsx(textClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t8 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp";
-        let t9;
-        $[7] !== t8 ? (t9 = clsx("sui-overflow-hidden", t8), $[7] = t8, $[8] = t9) : t9 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t7, style, "data-ui": "Text", ...rest, children: /* @__PURE__ */ jsx("span", { className: t9, children }) });
-        break bb0;
-      }
-      T0 = Component, t1 = clsx(textClassName, "sui-overflow-hidden", className);
-    }
-    $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
-  if (t2 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
-    return t2;
-  let t3;
-  return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Text", ...rest, children }), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
+	let $ = c(15), T0, children, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let { size: t3, ...props } = t0, { as, children: t4, className, style: t5, ...t6 } = getProps({
+				size: t3 === void 0 ? 2 : t3,
+				...props
+			}, textProps);
+			children = t4, style = t5, rest = t6;
+			let Component = as || "span";
+			if (props.truncate && props.trim) {
+				let t7 = clsx(textClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t8 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp", t9;
+				$[7] === t8 ? t9 = $[8] : (t9 = clsx("sui-overflow-hidden", t8), $[7] = t8, $[8] = t9), t2 = /* @__PURE__ */ jsx(Component, {
+					className: t7,
+					style,
+					"data-ui": "Text",
+					...rest,
+					children: /* @__PURE__ */ jsx("span", {
+						className: t9,
+						children
+					})
+				});
+				break bb0;
+			}
+			T0 = Component, t1 = clsx(textClassName, props.truncate && "sui-overflow-hidden", className);
+		}
+		$[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
+	let t3;
+	return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Text",
+		...rest,
+		children
+	}), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
 }
-const BUTTON_DENSITY = ["regular", "loose"], BUTTON_LEVEL = ["primary", "secondary", "tertiary"], BUTTON_TONE = ["neutral", "critical"], buttonProps = {
-  as: {
-    type: "string"
-  },
-  density: {
-    type: "composite",
-    values: BUTTON_DENSITY,
-    composition: {
-      gap: {
-        propDef: gapProps.gap,
-        mapping: {
-          regular: 2,
-          loose: 3
-        }
-      },
-      padding: {
-        propDef: paddingProps.padding,
-        mapping: {
-          regular: 2,
-          loose: 3
-        }
-      },
-      minHeight: {
-        propDef: heightProps.minHeight,
-        mapping: {
-          regular: "25px",
-          loose: "33px"
-        }
-      },
-      minWidth: {
-        propDef: widthProps.minWidth,
-        mapping: {
-          regular: "25px",
-          loose: "33px"
-        }
-      }
-    }
-  },
-  fullWidth: {
-    type: "boolean",
-    className: "width-full",
-    inverseClassName: "width-auto"
-  },
-  iconStart: {
-    type: "string"
-  },
-  iconEnd: {
-    type: "string"
-  },
-  level: {
-    type: "union",
-    className: "button-level",
-    values: BUTTON_LEVEL
-  },
-  loading: {
-    type: "boolean"
-  },
-  text: {
-    type: "string"
-  },
-  tone: {
-    type: "union",
-    className: "tone",
-    values: BUTTON_TONE
-  }
+const buttonProps = {
+	as: { type: "string" },
+	density: {
+		type: "composite",
+		values: ["regular", "loose"],
+		composition: {
+			gap: {
+				propDef: gapProps.gap,
+				mapping: {
+					regular: 2,
+					loose: 3
+				}
+			},
+			padding: {
+				propDef: paddingProps.padding,
+				mapping: {
+					regular: 2,
+					loose: 3
+				}
+			},
+			minHeight: {
+				propDef: heightProps.minHeight,
+				mapping: {
+					regular: "25px",
+					loose: "33px"
+				}
+			},
+			minWidth: {
+				propDef: widthProps.minWidth,
+				mapping: {
+					regular: "25px",
+					loose: "33px"
+				}
+			}
+		}
+	},
+	fullWidth: {
+		type: "boolean",
+		className: "width-full",
+		inverseClassName: "width-auto"
+	},
+	iconStart: { type: "string" },
+	iconEnd: { type: "string" },
+	level: {
+		type: "union",
+		className: "button-level",
+		values: [
+			"primary",
+			"secondary",
+			"tertiary"
+		]
+	},
+	loading: { type: "boolean" },
+	text: { type: "string" },
+	tone: {
+		type: "union",
+		className: "tone",
+		values: ["neutral", "critical"]
+	}
 }, buttonClassName = suffixClassName("sui-Button");
+/** @public */
 function Button(t0) {
-  const $ = c(26);
-  let T0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9;
-  if ($[0] !== t0) {
-    const {
-      density: t122,
-      level: t13,
-      tone: t14,
-      ...props
-    } = t0, density = t122 === void 0 ? "regular" : t122, level = t13 === void 0 ? "primary" : t13, tone = t14 === void 0 ? "neutral" : t14, {
-      as,
-      children,
-      className,
-      disabled,
-      style,
-      iconStart: IconStart,
-      iconEnd: IconEnd,
-      loading,
-      text,
-      ...rest
-    } = getProps({
-      density,
-      level,
-      tone,
-      ...props
-    }, buttonProps);
-    T0 = as || "button", t1 = clsx(buttonClassName, "sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius2 sui-position-relative sui-overflow-hidden", className), t2 = style, t3 = "Button", t4 = disabled || loading, t5 = loading ? !0 : void 0, t6 = rest, t7 = loading && /* @__PURE__ */ jsx(Flex, { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, {}) }), t8 = IconStart && (isValidElement(IconStart) ? IconStart : /* @__PURE__ */ jsx(Icon, { icon: IconStart, marginX: -1, marginY: -2, size: 1 })), t9 = text && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", trim: !0, children: text }), t10 = children, t11 = IconEnd && (isValidElement(IconEnd) ? IconEnd : /* @__PURE__ */ jsx(Icon, { icon: IconEnd, marginX: -1, marginY: -2, size: 1 })), $[0] = t0, $[1] = T0, $[2] = t1, $[3] = t10, $[4] = t11, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5, $[9] = t6, $[10] = t7, $[11] = t8, $[12] = t9;
-  } else
-    T0 = $[1], t1 = $[2], t10 = $[3], t11 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8], t6 = $[9], t7 = $[10], t8 = $[11], t9 = $[12];
-  let t12;
-  return $[13] !== T0 || $[14] !== t1 || $[15] !== t10 || $[16] !== t11 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9 ? (t12 = /* @__PURE__ */ jsxs(T0, { className: t1, style: t2, "data-ui": t3, disabled: t4, "aria-busy": t5, ...t6, children: [
-    t7,
-    t8,
-    t9,
-    t10,
-    t11
-  ] }), $[13] = T0, $[14] = t1, $[15] = t10, $[16] = t11, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = t8, $[24] = t9, $[25] = t12) : t12 = $[25], t12;
+	let $ = c(26), T0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9;
+	if ($[0] !== t0) {
+		let { density: t12, level: t13, tone: t14, ...props } = t0, { as, children, className, disabled, style, iconStart: IconStart, iconEnd: IconEnd, loading, text, ...rest } = getProps({
+			density: t12 === void 0 ? "regular" : t12,
+			level: t13 === void 0 ? "primary" : t13,
+			tone: t14 === void 0 ? "neutral" : t14,
+			...props
+		}, buttonProps);
+		T0 = as || "button", t1 = clsx(buttonClassName, "sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius2 sui-position-relative sui-overflow-hidden", className), t2 = style, t3 = "Button", t4 = disabled || loading, t5 = loading ? !0 : void 0, t6 = rest, t7 = loading && /* @__PURE__ */ jsx(Flex, {
+			position: "absolute",
+			inset: 0,
+			alignItems: "center",
+			justifyContent: "center",
+			children: /* @__PURE__ */ jsx(Spinner, {})
+		}), t8 = IconStart && (isValidElement(IconStart) ? IconStart : /* @__PURE__ */ jsx(Icon, {
+			icon: IconStart,
+			marginX: -1,
+			marginY: -2,
+			size: 1
+		})), t9 = text && /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			weight: "medium",
+			trim: !0,
+			children: text
+		}), t10 = children, t11 = IconEnd && (isValidElement(IconEnd) ? IconEnd : /* @__PURE__ */ jsx(Icon, {
+			icon: IconEnd,
+			marginX: -1,
+			marginY: -2,
+			size: 1
+		})), $[0] = t0, $[1] = T0, $[2] = t1, $[3] = t10, $[4] = t11, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5, $[9] = t6, $[10] = t7, $[11] = t8, $[12] = t9;
+	} else T0 = $[1], t1 = $[2], t10 = $[3], t11 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8], t6 = $[9], t7 = $[10], t8 = $[11], t9 = $[12];
+	let t12;
+	return $[13] !== T0 || $[14] !== t1 || $[15] !== t10 || $[16] !== t11 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9 ? (t12 = /* @__PURE__ */ jsxs(T0, {
+		className: t1,
+		style: t2,
+		"data-ui": t3,
+		disabled: t4,
+		"aria-busy": t5,
+		...t6,
+		children: [
+			t7,
+			t8,
+			t9,
+			t10,
+			t11
+		]
+	}), $[13] = T0, $[14] = t1, $[15] = t10, $[16] = t11, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = t8, $[24] = t9, $[25] = t12) : t12 = $[25], t12;
 }
-const DENSITY = ["compact", "regular", "loose"], cardProps = {
-  as: {
-    type: "string"
-  },
-  density: {
-    type: "composite",
-    values: DENSITY,
-    composition: {
-      gap: {
-        propDef: gapProps.gap,
-        mapping: {
-          compact: 2,
-          regular: 3,
-          loose: 4
-        }
-      },
-      padding: {
-        propDef: paddingProps.padding,
-        mapping: {
-          compact: 3,
-          regular: 4,
-          loose: 5
-        }
-      },
-      radius: {
-        propDef: borderProps.radius,
-        mapping: {
-          compact: 2,
-          regular: 3,
-          loose: 4
-        }
-      }
-    }
-  },
-  ...toneProps,
-  ...marginProps
+const DENSITY = [
+	"compact",
+	"regular",
+	"loose"
+], cardProps = {
+	as: { type: "string" },
+	density: {
+		type: "composite",
+		values: DENSITY,
+		composition: {
+			gap: {
+				propDef: gapProps.gap,
+				mapping: {
+					compact: 2,
+					regular: 3,
+					loose: 4
+				}
+			},
+			padding: {
+				propDef: paddingProps.padding,
+				mapping: {
+					compact: 3,
+					regular: 4,
+					loose: 5
+				}
+			},
+			radius: {
+				propDef: borderProps.radius,
+				mapping: {
+					compact: 2,
+					regular: 3,
+					loose: 4
+				}
+			}
+		}
+	},
+	...toneProps,
+	...marginProps
 }, cardClassName = suffixClassName("sui-Card");
+/** @public */
 function Card(t0) {
-  const $ = c(12);
-  let T0, children, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      density: t22,
-      tone: t3,
-      ...props
-    } = t0, density = t22 === void 0 ? "regular" : t22, tone = t3 === void 0 ? "neutral" : t3, {
-      as,
-      children: t4,
-      className,
-      style: t5,
-      ...t6
-    } = getProps({
-      density,
-      tone,
-      ...props
-    }, cardProps);
-    children = t4, style = t5, rest = t6, T0 = as || "div", t1 = clsx(cardClassName, "sui-border", className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
-  let t2;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Card", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+	let $ = c(12), T0, children, rest, style, t1;
+	if ($[0] !== t0) {
+		let { density: t2, tone: t3, ...props } = t0, { as, children: t4, className, style: t5, ...t6 } = getProps({
+			density: t2 === void 0 ? "regular" : t2,
+			tone: t3 === void 0 ? "neutral" : t3,
+			...props
+		}, cardProps);
+		children = t4, style = t5, rest = t6, T0 = as || "div", t1 = clsx(cardClassName, "sui-border", className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Card",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 }
 const labelProps = {
-  disabled: {
-    type: "boolean"
-  },
-  error: {
-    type: "boolean"
-  },
-  ...marginProps
+	disabled: { type: "boolean" },
+	error: { type: "boolean" },
+	...marginProps
 }, labelClassName = suffixClassName("sui-Label");
+/** @beta */
 function Label(props) {
-  const $ = c(18);
-  let T0, children, rest, style, t0, t1, t2, t3;
-  if ($[0] !== props) {
-    const {
-      children: t42,
-      className,
-      style: t5,
-      disabled,
-      error,
-      ...t6
-    } = getProps(props, labelProps);
-    children = t42, style = t5, rest = t6, T0 = Text, t0 = "label", t1 = 1, t2 = disabled, t3 = clsx(labelClassName, "sui-display-flex sui-align-items-center sui-gap2", error && "sui-error", className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1, $[7] = t2, $[8] = t3;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6], t2 = $[7], t3 = $[8];
-  let t4;
-  return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, { as: t0, size: t1, muted: t2, className: t3, style, "data-ui": "Label", ...rest, children }), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4) : t4 = $[17], t4;
+	let $ = c(18), T0, children, rest, style, t0, t1, t2, t3;
+	if ($[0] !== props) {
+		let { children: t4, className, style: t5, disabled, error, ...t6 } = getProps(props, labelProps);
+		children = t4, style = t5, rest = t6, T0 = Text, t0 = "label", t1 = 1, t2 = disabled, t3 = clsx(labelClassName, "sui-display-flex sui-align-items-center sui-gap2", error && "sui-error", className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1, $[7] = t2, $[8] = t3;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6], t2 = $[7], t3 = $[8];
+	let t4;
+	return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		size: t1,
+		muted: t2,
+		className: t3,
+		style,
+		"data-ui": "Label",
+		...rest,
+		children
+	}), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4) : t4 = $[17], t4;
 }
 const visuallyHiddenProps = {
-  as: {
-    type: "string"
-  },
-  visibleOnFocus: {
-    type: "boolean",
-    className: "sui-visually-hidden-visible"
-  }
+	as: { type: "string" },
+	visibleOnFocus: {
+		type: "boolean",
+		className: "sui-visually-hidden-visible"
+	}
 }, visuallyHiddenClassName = suffixClassName("sui-VisuallyHidden");
+/** @public */
 function VisuallyHidden(props) {
-  const $ = c(12);
-  let T0, children, rest, style, t0;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: t12,
-      className,
-      style: t2,
-      ...t3
-    } = getProps(props, visuallyHiddenProps);
-    children = t12, style = t2, rest = t3, T0 = as || "span", t0 = clsx(visuallyHiddenClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5];
-  let t1;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, { className: t0, style, "data-ui": "VisuallyHidden", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t0, $[11] = t1) : t1 = $[11], t1;
+	let $ = c(12), T0, children, rest, style, t0;
+	if ($[0] !== props) {
+		let { as, children: t1, className, style: t2, ...t3 } = getProps(props, visuallyHiddenProps);
+		children = t1, style = t2, rest = t3, T0 = as || "span", t0 = clsx(visuallyHiddenClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5];
+	let t1;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, {
+		className: t0,
+		style,
+		"data-ui": "VisuallyHidden",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t0, $[11] = t1) : t1 = $[11], t1;
 }
 const checkboxProps = {
-  error: {
-    type: "boolean"
-  },
-  indeterminate: {
-    type: "boolean"
-  },
-  label: {
-    type: "string"
-  },
-  ...marginProps
+	error: { type: "boolean" },
+	indeterminate: { type: "boolean" },
+	label: { type: "string" },
+	...marginProps
 }, checkboxClassName = suffixClassName("sui-Checkbox"), checkboxInputClassName = suffixClassName("sui-CheckboxInput"), checkboxMarkClassName = suffixClassName("sui-CheckboxMark");
+/** @beta */
 function Checkbox(props) {
-  const $ = c(6), inputRef = useRef(null), {
-    className,
-    style,
-    disabled,
-    error,
-    indeterminate,
-    label,
-    ...rest
-  } = getProps(props, checkboxProps);
-  useEffect(() => {
-    inputRef.current && (inputRef.current.indeterminate = indeterminate);
-  }, [indeterminate]);
-  const t0 = clsx(checkboxClassName, className), T0 = Box, t1 = "span", t2 = clsx(checkboxMarkClassName, error && "sui-error");
-  let t3;
-  $[0] !== indeterminate ? (t3 = indeterminate ? /* @__PURE__ */ jsx(RemoveIcon, {}) : /* @__PURE__ */ jsx(CheckmarkIcon, {}), $[0] = indeterminate, $[1] = t3) : t3 = $[1];
-  let t4;
-  return $[2] !== T0 || $[3] !== t2 || $[4] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, { as: t1, className: t2, position: "relative", radius: 2, width: "17px", height: "17px", children: t3 }), $[2] = T0, $[3] = t2, $[4] = t3, $[5] = t4) : t4 = $[5], /* @__PURE__ */ jsxs(Label, { className: t0, style, "data-ui": "Checkbox", disabled, error, children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "checkbox", className: checkboxInputClassName, ref: inputRef, disabled, ...rest }),
-    t4,
-    label
-  ] });
+	let $ = c(6), inputRef = useRef(null), { className, style, disabled, error, indeterminate, label, ...rest } = getProps(props, checkboxProps);
+	useEffect(() => {
+		inputRef.current && (inputRef.current.indeterminate = indeterminate);
+	}, [indeterminate, inputRef]);
+	let t0 = clsx(checkboxClassName, "sui-position-relative", className), T0 = Box, t2 = clsx(checkboxMarkClassName, error && "sui-error"), t3;
+	$[0] === indeterminate ? t3 = $[1] : (t3 = jsx(indeterminate ? RemoveIcon : CheckmarkIcon, {}), $[0] = indeterminate, $[1] = t3);
+	let t4;
+	return $[2] !== T0 || $[3] !== t2 || $[4] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, {
+		as: "span",
+		className: t2,
+		position: "relative",
+		radius: 2,
+		width: "17px",
+		height: "17px",
+		children: t3
+	}), $[2] = T0, $[3] = t2, $[4] = t3, $[5] = t4) : t4 = $[5], /* @__PURE__ */ jsxs(Label, {
+		className: t0,
+		style,
+		"data-ui": "Checkbox",
+		disabled,
+		error,
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				as: "input",
+				type: "checkbox",
+				className: checkboxInputClassName,
+				ref: inputRef,
+				disabled,
+				...rest
+			}),
+			t4,
+			label
+		]
+	});
 }
-const CODE_TAG = ["pre", "span"], CODE_SIZE = [0, 1, 2, 3, 4], codeProps = {
-  as: {
-    type: "union",
-    values: CODE_TAG
-  },
-  language: {
-    type: "string"
-  },
-  size: {
-    type: "union",
-    className: "text-code",
-    values: CODE_SIZE
-  },
-  muted: typographyProps.muted,
-  trim: typographyProps.trim,
-  weight: typographyProps.weight,
-  ...marginProps
-}, LazyRefractor = lazy(() => import("./_chunks-es/LazyRefractor.js")), codeClassName = suffixClassName("sui-Code");
+const codeProps = {
+	as: {
+		type: "union",
+		values: ["pre", "span"]
+	},
+	language: { type: "string" },
+	size: {
+		type: "union",
+		className: "text-code",
+		values: [
+			0,
+			1,
+			2,
+			3,
+			4
+		]
+	},
+	muted: typographyProps.muted,
+	trim: typographyProps.trim,
+	weight: typographyProps.weight,
+	...marginProps
+}, LazyRefractor = lazy(() => import("./LazyRefractor-CQ22IeXB.js")), codeClassName = suffixClassName("sui-Code");
+/** @public */
 function Code(t0) {
-  const $ = c(22);
-  let T0, children, language, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    t2 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const {
-        size: t32,
-        ...props
-      } = t0, size = t32 === void 0 ? 2 : t32, {
-        as,
-        children: t42,
-        className,
-        language: t52,
-        style: t62,
-        ...t7
-      } = getProps({
-        size,
-        ...props
-      }, codeProps);
-      children = t42, language = t52, style = t62, rest = t7;
-      const Component = as || "pre";
-      if (!language) {
-        t2 = /* @__PURE__ */ jsx(Component, { className: clsx(codeClassName, className), style, "data-ui": "Code", ...rest, children: /* @__PURE__ */ jsx("code", { children }) });
-        break bb0;
-      }
-      T0 = Component, t1 = clsx(codeClassName, className);
-    }
-    $[0] = t0, $[1] = T0, $[2] = children, $[3] = language, $[4] = rest, $[5] = style, $[6] = t1, $[7] = t2;
-  } else
-    T0 = $[1], children = $[2], language = $[3], rest = $[4], style = $[5], t1 = $[6], t2 = $[7];
-  if (t2 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
-    return t2;
-  let t3;
-  $[8] !== children ? (t3 = /* @__PURE__ */ jsx("code", { children }), $[8] = children, $[9] = t3) : t3 = $[9];
-  let t4;
-  $[10] !== children || $[11] !== language ? (t4 = /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }), $[10] = children, $[11] = language, $[12] = t4) : t4 = $[12];
-  let t5;
-  $[13] !== t3 || $[14] !== t4 ? (t5 = /* @__PURE__ */ jsx(Suspense, { fallback: t3, children: t4 }), $[13] = t3, $[14] = t4, $[15] = t5) : t5 = $[15];
-  let t6;
-  return $[16] !== T0 || $[17] !== rest || $[18] !== style || $[19] !== t1 || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Code", ...rest, children: t5 }), $[16] = T0, $[17] = rest, $[18] = style, $[19] = t1, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+	let $ = c(22), T0, children, language, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let { size: t3, ...props } = t0, { as, children: t4, className, language: t5, style: t6, ...t7 } = getProps({
+				size: t3 === void 0 ? 2 : t3,
+				...props
+			}, codeProps);
+			children = t4, language = t5, style = t6, rest = t7;
+			let Component = as || "pre";
+			if (!language) {
+				t2 = /* @__PURE__ */ jsx(Component, {
+					className: clsx(codeClassName, className),
+					style,
+					"data-ui": "Code",
+					...rest,
+					children: /* @__PURE__ */ jsx("code", { children })
+				});
+				break bb0;
+			}
+			T0 = Component, t1 = clsx(codeClassName, className);
+		}
+		$[0] = t0, $[1] = T0, $[2] = children, $[3] = language, $[4] = rest, $[5] = style, $[6] = t1, $[7] = t2;
+	} else T0 = $[1], children = $[2], language = $[3], rest = $[4], style = $[5], t1 = $[6], t2 = $[7];
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
+	let t3;
+	$[8] === children ? t3 = $[9] : (t3 = /* @__PURE__ */ jsx("code", { children }), $[8] = children, $[9] = t3);
+	let t4;
+	$[10] !== children || $[11] !== language ? (t4 = /* @__PURE__ */ jsx(LazyRefractor, {
+		language,
+		value: children
+	}), $[10] = children, $[11] = language, $[12] = t4) : t4 = $[12];
+	let t5;
+	$[13] !== t3 || $[14] !== t4 ? (t5 = /* @__PURE__ */ jsx(Suspense, {
+		fallback: t3,
+		children: t4
+	}), $[13] = t3, $[14] = t4, $[15] = t5) : t5 = $[15];
+	let t6;
+	return $[16] !== T0 || $[17] !== rest || $[18] !== style || $[19] !== t1 || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Code",
+		...rest,
+		children: t5
+	}), $[16] = T0, $[17] = rest, $[18] = style, $[19] = t1, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
 }
-const CONTAINER_SIZE = [0, 1, 2, 3, 4, 5], containerProps = {
-  as: {
-    type: "string"
-  },
-  size: {
-    type: "union",
-    className: "container",
-    values: CONTAINER_SIZE
-  },
-  ...layoutProps
+const CONTAINER_SIZE = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5
+], containerProps = {
+	as: { type: "string" },
+	size: {
+		type: "union",
+		className: "container",
+		values: CONTAINER_SIZE
+	},
+	...layoutProps
 }, containerClassName = suffixClassName("sui-Container");
+/** @public */
 function Container(t0) {
-  const $ = c(12);
-  let T0, children, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      marginX: t22,
-      ...props
-    } = t0, marginX = t22 === void 0 ? "auto" : t22, {
-      as,
-      children: t3,
-      className,
-      style: t4,
-      ...t5
-    } = getProps({
-      marginX,
-      ...props
-    }, containerProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(containerClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
-  let t2;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Container", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+	let $ = c(12), T0, children, rest, style, t1;
+	if ($[0] !== t0) {
+		let { marginX: t2, size: t3, ...props } = t0, { as, children: t4, className, style: t5, ...t6 } = getProps({
+			marginX: t2 === void 0 ? "auto" : t2,
+			size: t3 === void 0 ? 2 : t3,
+			...props
+		}, containerProps);
+		children = t4, style = t5, rest = t6, T0 = as || "div", t1 = clsx(containerClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Container",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 }
-const dividerProps = {
-  ...marginProps
-}, dividerClassName = suffixClassName("sui-Divider");
+const headingProps = {
+	as: {
+		type: "union",
+		values: [
+			"h1",
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6"
+		]
+	},
+	size: {
+		type: "union",
+		className: "text-heading",
+		values: [
+			0,
+			1,
+			2,
+			3,
+			4,
+			5,
+			6,
+			7,
+			8,
+			9
+		]
+	},
+	...typographyProps
+}, headingClassName = suffixClassName("sui-Heading");
+/** @public */
+function Heading(t0) {
+	let $ = c(15), T0, children, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let { size: t3, weight: t4, ...props } = t0, { as, children: t5, className, style: t6, ...t7 } = getProps({
+				size: t3 === void 0 ? 2 : t3,
+				weight: t4 === void 0 ? "bold" : t4,
+				...props
+			}, headingProps);
+			children = t5, style = t6, rest = t7;
+			let Component = as || "h2";
+			if (props.truncate && props.trim) {
+				let t8 = clsx(headingClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t9 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp", t10;
+				$[7] === t9 ? t10 = $[8] : (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10), t2 = /* @__PURE__ */ jsx(Component, {
+					className: t8,
+					style,
+					"data-ui": "Heading",
+					...rest,
+					children: /* @__PURE__ */ jsx("span", {
+						className: t10,
+						children
+					})
+				});
+				break bb0;
+			}
+			T0 = Component, t1 = clsx(headingClassName, props.truncate && "sui-overflow-hidden", className);
+		}
+		$[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
+	let t3;
+	return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Heading",
+		...rest,
+		children
+	}), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
+}
+const iconButtonProps = {
+	"aria-label": { type: "string" },
+	as: buttonProps.as,
+	icon: { type: "string" }
+}, iconButtonClassName = suffixClassName("sui-IconButton");
+/** @public */
+function IconButton(props) {
+	let $ = c(16), IconProp, T0, rest, style, t0, t1;
+	if ($[0] !== props) {
+		let { as, className, style: t2, icon: t3, ...t4 } = getProps(props, iconButtonProps);
+		style = t2, IconProp = t3, rest = t4;
+		let Component = as || "button";
+		T0 = Button, t0 = Component, t1 = clsx(iconButtonClassName, className), $[0] = props, $[1] = IconProp, $[2] = T0, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
+	} else IconProp = $[1], T0 = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
+	let t2;
+	$[7] === IconProp ? t2 = $[8] : (t2 = /* @__PURE__ */ jsx(Icon, {
+		icon: IconProp,
+		margin: -2,
+		size: 1
+	}), $[7] = IconProp, $[8] = t2);
+	let t3;
+	return $[9] !== T0 || $[10] !== rest || $[11] !== style || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		className: t1,
+		style,
+		"data-ui": "IconButton",
+		...rest,
+		children: t2
+	}), $[9] = T0, $[10] = rest, $[11] = style, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
+}
+const dialogProps = {
+	header: { type: "string" },
+	open: { type: "boolean" },
+	size: {
+		type: "union",
+		className: "container",
+		values: CONTAINER_SIZE
+	},
+	topAnchor: {
+		type: "string",
+		className: "top-anchor",
+		variable: "--top-anchor"
+	}
+}, dialogClassName = suffixClassName("sui-Dialog"), dialogContentClassName = suffixClassName("sui-DialogContent"), dialogFooterClassName = suffixClassName("sui-DialogFooter");
+function DialogRoot(t0) {
+	let $ = c(17), { open: t1, size: t2, ...props } = t0, open = t1 !== void 0 && t1, { children, className, style, header, onClose, ...rest } = getProps({
+		size: t2 === void 0 ? 0 : t2,
+		...props
+	}, dialogProps), dialogRef = useRef(null), headerId = useId(), dialogClasses = clsx(dialogClassName, `${props.topAnchor ? "sui-mx-auto" : "sui-m-auto"} sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto`), t3, t4;
+	$[0] === open ? (t3 = $[1], t4 = $[2]) : (t3 = () => {
+		let dialogElement = dialogRef.current;
+		if (dialogElement) return open ? dialogElement.open || dialogElement.showModal() : dialogElement.open && dialogElement.close(), () => {
+			dialogElement.close();
+		};
+	}, t4 = [open], $[0] = open, $[1] = t3, $[2] = t4), useEffect(t3, t4);
+	let t6 = header ? headerId : void 0, t7 = clsx(dialogClasses, className), t8;
+	$[3] !== header || $[4] !== headerId ? (t8 = header ? /* @__PURE__ */ jsx(Heading, {
+		trim: !0,
+		size: 1,
+		id: headerId,
+		children: header
+	}) : /* @__PURE__ */ jsx("div", {}), $[3] = header, $[4] = headerId, $[5] = t8) : t8 = $[5];
+	let t9;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": "Close",
+		level: "tertiary",
+		icon: CloseIcon,
+		onClick: () => dialogRef.current?.close()
+	}), $[6] = t9) : t9 = $[6];
+	let t10;
+	$[7] === t8 ? t10 = $[8] : (t10 = /* @__PURE__ */ jsxs(Flex, {
+		flexShrink: 0,
+		justifyContent: "space-between",
+		alignItems: "center",
+		children: [t8, t9]
+	}), $[7] = t8, $[8] = t10);
+	let t11;
+	return $[9] !== children || $[10] !== onClose || $[11] !== rest || $[12] !== style || $[13] !== t10 || $[14] !== t6 || $[15] !== t7 ? (t11 = /* @__PURE__ */ jsxs("dialog", {
+		...rest,
+		ref: dialogRef,
+		closedby: "any",
+		"aria-labelledby": t6,
+		onClose,
+		className: t7,
+		style,
+		"data-ui": "Dialog",
+		children: [t10, children]
+	}), $[9] = children, $[10] = onClose, $[11] = rest, $[12] = style, $[13] = t10, $[14] = t6, $[15] = t7, $[16] = t11) : t11 = $[16], t11;
+}
+function DialogContent(props) {
+	let $ = c(12), T0, children, style, t0, t1;
+	if ($[0] !== props) {
+		let { children: t2, className, style: t3, ...rest } = getProps(props, {});
+		children = t2, style = t3, T0 = Box, t0 = rest, t1 = clsx(dialogContentClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+	} else T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		...t0,
+		className: t1,
+		style,
+		"data-ui": "DialogContent",
+		flexGrow: 1,
+		overflowY: "auto",
+		children
+	}), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+function DialogFooter(props) {
+	let $ = c(12), T0, children, style, t0, t1;
+	if ($[0] !== props) {
+		let { children: t2, className, style: t3, ...rest } = getProps(props, {});
+		children = t2, style = t3, T0 = Box, t0 = rest, t1 = clsx(dialogFooterClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+	} else T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		...t0,
+		className: t1,
+		style,
+		"data-ui": "DialogFooter",
+		flexShrink: 0,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+DialogRoot.displayName = "Dialog";
+/**
+* @beta
+*
+* Renders a modal dialog element — should not be used for nonmodal dialogs.
+* Modal dialogs make their containing documents inert, and render on the topmost
+* layer within that containing document; they must be dimissed before the containing
+* document and its contents become unblocked. They also trap focus within the bounds
+* of the dialog element and its descendants.
+*
+* For more on dialogs and modality, refer to the HTML specification for the dialog element:
+* https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
+*/
+const Dialog = DialogRoot;
+DialogRoot.Content = DialogContent, DialogRoot.Footer = DialogFooter;
+const dividerProps = { ...marginProps }, dividerClassName = suffixClassName("sui-Divider");
+/** @public */
 function Divider(props) {
-  const $ = c(8);
-  let rest, style, t0;
-  if ($[0] !== props) {
-    const {
-      className,
-      style: t12,
-      ...t2
-    } = getProps(props, dividerProps);
-    style = t12, rest = t2, t0 = clsx(dividerClassName, "sui-border-none sui-border-top", className), $[0] = props, $[1] = rest, $[2] = style, $[3] = t0;
-  } else
-    rest = $[1], style = $[2], t0 = $[3];
-  let t1;
-  return $[4] !== rest || $[5] !== style || $[6] !== t0 ? (t1 = /* @__PURE__ */ jsx("hr", { className: t0, style, "data-ui": "Divider", ...rest }), $[4] = rest, $[5] = style, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
+	let $ = c(8), rest, style, t0;
+	if ($[0] !== props) {
+		let { className, style: t1, ...t2 } = getProps(props, dividerProps);
+		style = t1, rest = t2, t0 = clsx(dividerClassName, "sui-border-none sui-border-top", className), $[0] = props, $[1] = rest, $[2] = style, $[3] = t0;
+	} else rest = $[1], style = $[2], t0 = $[3];
+	let t1;
+	return $[4] !== rest || $[5] !== style || $[6] !== t0 ? (t1 = /* @__PURE__ */ jsx("hr", {
+		className: t0,
+		style,
+		"data-ui": "Divider",
+		...rest
+	}), $[4] = rest, $[5] = style, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
 }
-const EYEBROW_SIZE = [0, 1, 2, 3, 4], eyebrowProps = {
-  as: {
-    type: "string"
-  },
-  size: {
-    type: "union",
-    className: "text-eyebrow",
-    values: EYEBROW_SIZE
-  },
-  ...typographyProps
+const eyebrowProps = {
+	as: { type: "string" },
+	size: {
+		type: "union",
+		className: "text-eyebrow",
+		values: [
+			0,
+			1,
+			2,
+			3,
+			4
+		]
+	},
+	...typographyProps
 }, eyebrowClassName = suffixClassName("sui-Eyebrow");
+/** @public */
 function Eyebrow(t0) {
-  const $ = c(15);
-  let T0, children, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    t2 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const {
-        size: t32,
-        weight: t4,
-        ...props
-      } = t0, size = t32 === void 0 ? 2 : t32, weight = t4 === void 0 ? "semibold" : t4, {
-        as,
-        children: t5,
-        className,
-        style: t6,
-        ...t7
-      } = getProps({
-        size,
-        weight,
-        ...props
-      }, eyebrowProps);
-      children = t5, style = t6, rest = t7;
-      const Component = as || "span";
-      if (props.truncate && props.trim) {
-        const t8 = clsx(eyebrowClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t9 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp";
-        let t10;
-        $[7] !== t9 ? (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10) : t10 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t8, style, "data-ui": "Eyebrow", ...rest, children: /* @__PURE__ */ jsx("span", { className: t10, children }) });
-        break bb0;
-      }
-      T0 = Component, t1 = clsx(eyebrowClassName, "sui-overflow-hidden", className);
-    }
-    $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
-  if (t2 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
-    return t2;
-  let t3;
-  return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Eyebrow", ...rest, children }), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
+	let $ = c(15), T0, children, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let { size: t3, weight: t4, ...props } = t0, { as, children: t5, className, style: t6, ...t7 } = getProps({
+				size: t3 === void 0 ? 2 : t3,
+				weight: t4 === void 0 ? "semibold" : t4,
+				...props
+			}, eyebrowProps);
+			children = t5, style = t6, rest = t7;
+			let Component = as || "span";
+			if (props.truncate && props.trim) {
+				let t8 = clsx(eyebrowClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t9 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp", t10;
+				$[7] === t9 ? t10 = $[8] : (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10), t2 = /* @__PURE__ */ jsx(Component, {
+					className: t8,
+					style,
+					"data-ui": "Eyebrow",
+					...rest,
+					children: /* @__PURE__ */ jsx("span", {
+						className: t10,
+						children
+					})
+				});
+				break bb0;
+			}
+			T0 = Component, t1 = clsx(eyebrowClassName, props.truncate && "sui-overflow-hidden", className);
+		}
+		$[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
+	let t3;
+	return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Eyebrow",
+		...rest,
+		children
+	}), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
 }
-const GRID_AUTO_FLOW = ["row", "column", "row dense", "column dense", "dense"], gridParentProps = {
-  gridAutoFlow: {
-    type: "union",
-    className: "grid-auto-flow",
-    values: GRID_AUTO_FLOW
-  },
-  gridAutoColumns: {
-    type: "string",
-    className: "grid-auto-columns",
-    variable: "--grid-auto-columns"
-  },
-  gridAutoRows: {
-    type: "string",
-    className: "grid-auto-rows",
-    variable: "--grid-auto-rows"
-  },
-  gridTemplateColumns: {
-    type: "string",
-    className: "grid-template-columns",
-    variable: "--grid-template-columns"
-  },
-  gridTemplateRows: {
-    type: "string",
-    className: "grid-template-rows",
-    variable: "--grid-template-rows"
-  }
-}, gridProps = {
-  as: {
-    type: "string"
-  },
-  display: {
-    type: "union",
-    className: "display",
-    values: DISPLAY_GRID
-  },
-  ...gridParentProps,
-  ...gapProps,
-  ...layoutProps
+const gridProps = {
+	as: { type: "string" },
+	display: {
+		type: "union",
+		className: "display",
+		values: DISPLAY_GRID
+	},
+	gridAutoFlow: {
+		type: "union",
+		className: "grid-auto-flow",
+		values: [
+			"row",
+			"column",
+			"row dense",
+			"column dense",
+			"dense"
+		]
+	},
+	gridAutoColumns: {
+		type: "string",
+		className: "grid-auto-columns",
+		variable: "--grid-auto-columns"
+	},
+	gridAutoRows: {
+		type: "string",
+		className: "grid-auto-rows",
+		variable: "--grid-auto-rows"
+	},
+	gridTemplateColumns: {
+		type: "string",
+		className: "grid-template-columns",
+		variable: "--grid-template-columns"
+	},
+	gridTemplateRows: {
+		type: "string",
+		className: "grid-template-rows",
+		variable: "--grid-template-rows"
+	},
+	...gapProps,
+	...layoutProps
 }, gridClassName = suffixClassName("sui-Grid");
+/** @public */
 function Grid(t0) {
-  const $ = c(12);
-  let T0, children, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      display: t22,
-      ...props
-    } = t0, display = t22 === void 0 ? "grid" : t22, {
-      as,
-      children: t3,
-      className,
-      style: t4,
-      ...t5
-    } = getProps({
-      display,
-      ...props
-    }, gridProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(gridClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
-  let t2;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Grid", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
-}
-const hStackProps = {
-  as: {
-    type: "string"
-  },
-  gap: gapProps.gap
-}, hStackClassName = suffixClassName("sui-HStack");
-function HStack(props) {
-  const $ = c(14);
-  let T0, children, rest, style, t0, t1;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: t22,
-      className,
-      style: t3,
-      ...t4
-    } = getProps(props, hStackProps);
-    children = t22, style = t3, rest = t4;
-    const Component = as || "div";
-    T0 = Flex, t0 = Component, t1 = clsx(hStackClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
-  let t2;
-  return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "HStack", display: "inline-flex", alignItems: "center", flexWrap: "wrap", ...rest, children }), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
-}
-const HEADING_TAG = ["h1", "h2", "h3", "h4", "h5", "h6"], HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], headingProps = {
-  as: {
-    type: "union",
-    values: HEADING_TAG
-  },
-  size: {
-    type: "union",
-    className: "text-heading",
-    values: HEADING_SIZE
-  },
-  ...typographyProps
-}, headingClassName = suffixClassName("sui-Heading");
-function Heading(t0) {
-  const $ = c(15);
-  let T0, children, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    t2 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const {
-        size: t32,
-        weight: t4,
-        ...props
-      } = t0, size = t32 === void 0 ? 2 : t32, weight = t4 === void 0 ? "bold" : t4, {
-        as,
-        children: t5,
-        className,
-        style: t6,
-        ...t7
-      } = getProps({
-        size,
-        weight,
-        ...props
-      }, headingProps);
-      children = t5, style = t6, rest = t7;
-      const Component = as || "h2";
-      if (props.truncate && props.trim) {
-        const t8 = clsx(headingClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t9 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp";
-        let t10;
-        $[7] !== t9 ? (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10) : t10 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t8, style, "data-ui": "Heading", ...rest, children: /* @__PURE__ */ jsx("span", { className: t10, children }) });
-        break bb0;
-      }
-      T0 = Component, t1 = clsx(headingClassName, "sui-overflow-hidden", className);
-    }
-    $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
-  if (t2 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
-    return t2;
-  let t3;
-  return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Heading", ...rest, children }), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
+	let $ = c(12), T0, children, rest, style, t1;
+	if ($[0] !== t0) {
+		let { display: t2, ...props } = t0, { as, children: t3, className, style: t4, ...t5 } = getProps({
+			display: t2 === void 0 ? "grid" : t2,
+			...props
+		}, gridProps);
+		children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(gridClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		className: t1,
+		style,
+		"data-ui": "Grid",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 }
-const iconButtonProps = {
-  "aria-label": {
-    type: "string"
-  },
-  as: buttonProps.as,
-  icon: {
-    type: "string"
-  }
-}, iconButtonClassName = suffixClassName("sui-IconButton");
-function IconButton(props) {
-  const $ = c(16);
-  let IconProp, T0, rest, style, t0, t1;
-  if ($[0] !== props) {
-    const {
-      as,
-      className,
-      style: t22,
-      icon: t32,
-      ...t4
-    } = getProps(props, iconButtonProps);
-    style = t22, IconProp = t32, rest = t4;
-    const Component = as || "button";
-    T0 = Button, t0 = Component, t1 = clsx(iconButtonClassName, className), $[0] = props, $[1] = IconProp, $[2] = T0, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
-  } else
-    IconProp = $[1], T0 = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
-  let t2;
-  $[7] !== IconProp ? (t2 = /* @__PURE__ */ jsx(Icon, { icon: IconProp, margin: -2, size: 1 }), $[7] = IconProp, $[8] = t2) : t2 = $[8];
-  let t3;
-  return $[9] !== T0 || $[10] !== rest || $[11] !== style || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "IconButton", ...rest, children: t2 }), $[9] = T0, $[10] = rest, $[11] = style, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
+const hStackClassName = suffixClassName("sui-HStack");
+/** @public */
+function HStack(t0) {
+	let $ = c(8), className, props;
+	$[0] === t0 ? (className = $[1], props = $[2]) : ({className, ...props} = t0, $[0] = t0, $[1] = className, $[2] = props);
+	let t1;
+	$[3] === className ? t1 = $[4] : (t1 = clsx(hStackClassName, className), $[3] = className, $[4] = t1);
+	let t2 = props, t3;
+	return $[5] !== t1 || $[6] !== t2 ? (t3 = /* @__PURE__ */ jsx(Flex, {
+		className: t1,
+		"data-ui": "HStack",
+		display: "inline-flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		...t2
+	}), $[5] = t1, $[6] = t2, $[7] = t3) : t3 = $[7], t3;
 }
 const indicatorProps = {
-  as: {
-    type: "string"
-  },
-  label: {
-    type: "string"
-  },
-  ...toneProps
+	as: { type: "string" },
+	label: { type: "string" },
+	...toneProps
 }, indicatorClassName = suffixClassName("sui-Indicator");
+/** @beta */
 function Indicator(t0) {
-  const $ = c(18);
-  let T0, ariaLabel, children, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    const {
-      tone: t32,
-      ...props
-    } = t0, tone = t32 === void 0 ? "neutral" : t32, {
-      as,
-      children: t42,
-      className,
-      style: t52,
-      label,
-      ...t6
-    } = getProps({
-      tone,
-      ...props
-    }, indicatorProps);
-    children = t42, style = t52, rest = t6;
-    const Component = as || "span";
-    ariaLabel = label || rest["aria-label"], T0 = Box, t1 = Component, t2 = clsx(indicatorClassName, className), $[0] = t0, $[1] = T0, $[2] = ariaLabel, $[3] = children, $[4] = rest, $[5] = style, $[6] = t1, $[7] = t2;
-  } else
-    T0 = $[1], ariaLabel = $[2], children = $[3], rest = $[4], style = $[5], t1 = $[6], t2 = $[7];
-  const t3 = ariaLabel ? void 0 : !0, t4 = ariaLabel ? "img" : void 0;
-  let t5;
-  return $[8] !== T0 || $[9] !== ariaLabel || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 ? (t5 = /* @__PURE__ */ jsx(T0, { as: t1, className: t2, style, "data-ui": "Indicator", width: "5px", height: "5px", radius: "full", "aria-label": ariaLabel, "aria-hidden": t3, role: t4, ...rest, children }), $[8] = T0, $[9] = ariaLabel, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5) : t5 = $[17], t5;
+	let $ = c(18), T0, ariaLabel, children, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		let { tone: t3, ...props } = t0, { as, children: t4, className, style: t5, label, ...t6 } = getProps({
+			tone: t3 === void 0 ? "neutral" : t3,
+			...props
+		}, indicatorProps);
+		children = t4, style = t5, rest = t6;
+		let Component = as || "span";
+		ariaLabel = label || rest["aria-label"], T0 = Box, t1 = Component, t2 = clsx(indicatorClassName, className), $[0] = t0, $[1] = T0, $[2] = ariaLabel, $[3] = children, $[4] = rest, $[5] = style, $[6] = t1, $[7] = t2;
+	} else T0 = $[1], ariaLabel = $[2], children = $[3], rest = $[4], style = $[5], t1 = $[6], t2 = $[7];
+	let t3 = !ariaLabel || void 0, t4 = ariaLabel ? "img" : void 0, t5;
+	return $[8] !== T0 || $[9] !== ariaLabel || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 ? (t5 = /* @__PURE__ */ jsx(T0, {
+		as: t1,
+		className: t2,
+		style,
+		"data-ui": "Indicator",
+		width: "5px",
+		height: "5px",
+		radius: "full",
+		"aria-label": ariaLabel,
+		"aria-hidden": t3,
+		role: t4,
+		...rest,
+		children
+	}), $[8] = T0, $[9] = ariaLabel, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5) : t5 = $[17], t5;
 }
-const indicatorStackProps = {
-  as: {
-    type: "string"
-  }
-}, indicatorStackClassName = suffixClassName("sui-IndicatorStack");
+const indicatorStackProps = { as: { type: "string" } }, indicatorStackClassName = suffixClassName("sui-IndicatorStack");
+/** @public */
 function IndicatorStack(props) {
-  const $ = c(14);
-  let T0, children, rest, style, t0, t1;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: t22,
-      className,
-      style: t3,
-      ...t4
-    } = getProps(props, indicatorStackProps);
-    children = t22, style = t3, rest = t4;
-    const Component = as || "div";
-    T0 = HStack, t0 = Component, t1 = clsx(indicatorStackClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
-  let t2;
-  return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "IndicatorStack", ...rest, children }), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
+	let $ = c(14), T0, children, rest, style, t0, t1;
+	if ($[0] !== props) {
+		let { as, children: t2, className, style: t3, ...t4 } = getProps(props, indicatorStackProps);
+		children = t2, style = t3, rest = t4;
+		let Component = as || "div";
+		T0 = HStack, t0 = Component, t1 = clsx(indicatorStackClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
+	let t2;
+	return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		className: t1,
+		style,
+		"data-ui": "IndicatorStack",
+		...rest,
+		children
+	}), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
 }
 const inlineProps = {
-  as: {
-    type: "string"
-  },
-  gap: {
-    type: "composite",
-    values: SPACE,
-    composition: {
-      marginTop: {
-        propDef: marginProps.marginTop,
-        mapping: {
-          0: 0,
-          1: -1,
-          2: -2,
-          3: -3,
-          4: -4,
-          5: -5,
-          6: -6,
-          7: -7,
-          8: -8,
-          9: -9
-        }
-      },
-      marginLeft: {
-        propDef: marginProps.marginLeft,
-        mapping: {
-          0: 0,
-          1: -1,
-          2: -2,
-          3: -3,
-          4: -4,
-          5: -5,
-          6: -6,
-          7: -7,
-          8: -8,
-          9: -9
-        }
-      }
-    }
-  },
-  ...paddingProps
-}, inlineChildrenProps = {
-  gap: {
-    type: "composite",
-    values: SPACE,
-    composition: {
-      paddingTop: {
-        propDef: paddingProps.paddingTop,
-        mapping: {
-          0: 0,
-          1: 1,
-          2: 2,
-          3: 3,
-          4: 4,
-          5: 5,
-          6: 6,
-          7: 7,
-          8: 8,
-          9: 9
-        }
-      },
-      paddingLeft: {
-        propDef: paddingProps.paddingLeft,
-        mapping: {
-          0: 0,
-          1: 1,
-          2: 2,
-          3: 3,
-          4: 4,
-          5: 5,
-          6: 6,
-          7: 7,
-          8: 8,
-          9: 9
-        }
-      }
-    }
-  }
-}, inlineClassName = suffixClassName("sui-Inline");
+	as: { type: "string" },
+	gap: {
+		type: "composite",
+		values: SPACE,
+		composition: {
+			marginTop: {
+				propDef: marginProps.marginTop,
+				mapping: {
+					0: 0,
+					1: -1,
+					2: -2,
+					3: -3,
+					4: -4,
+					5: -5,
+					6: -6,
+					7: -7,
+					8: -8,
+					9: -9
+				}
+			},
+			marginLeft: {
+				propDef: marginProps.marginLeft,
+				mapping: {
+					0: 0,
+					1: -1,
+					2: -2,
+					3: -3,
+					4: -4,
+					5: -5,
+					6: -6,
+					7: -7,
+					8: -8,
+					9: -9
+				}
+			}
+		}
+	},
+	...paddingProps
+}, inlineChildrenProps = { gap: {
+	type: "composite",
+	values: SPACE,
+	composition: {
+		paddingTop: {
+			propDef: paddingProps.paddingTop,
+			mapping: {
+				0: 0,
+				1: 1,
+				2: 2,
+				3: 3,
+				4: 4,
+				5: 5,
+				6: 6,
+				7: 7,
+				8: 8,
+				9: 9
+			}
+		},
+		paddingLeft: {
+			propDef: paddingProps.paddingLeft,
+			mapping: {
+				0: 0,
+				1: 1,
+				2: 2,
+				3: 3,
+				4: 4,
+				5: 5,
+				6: 6,
+				7: 7,
+				8: 8,
+				9: 9
+			}
+		}
+	}
+} }, inlineClassName = suffixClassName("sui-Inline");
+/** @deprecated Use HStack component instead */
+/** @public */
 function Inline(props) {
-  const $ = c(14);
-  let T0, children, rest, style, t0;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: childrenProp,
-      className,
-      style: t12,
-      ...t2
-    } = getProps(props, inlineProps);
-    style = t12, rest = t2;
-    const {
-      className: childrenClassName
-    } = getProps(props, inlineChildrenProps), Component = as || "div";
-    let t3;
-    $[6] !== childrenClassName ? (t3 = (child) => child && /* @__PURE__ */ jsx("div", { className: childrenClassName, children: child }), $[6] = childrenClassName, $[7] = t3) : t3 = $[7], children = Children.map(childrenProp, t3), T0 = Component, t0 = clsx(inlineClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5];
-  let t1;
-  return $[8] !== T0 || $[9] !== children || $[10] !== rest || $[11] !== style || $[12] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, { className: t0, style, "data-ui": "Inline", ...rest, children }), $[8] = T0, $[9] = children, $[10] = rest, $[11] = style, $[12] = t0, $[13] = t1) : t1 = $[13], t1;
+	let $ = c(14), T0, children, rest, style, t0;
+	if ($[0] !== props) {
+		let { as, children: childrenProp, className, style: t1, ...t2 } = getProps(props, inlineProps);
+		style = t1, rest = t2;
+		let { className: childrenClassName } = getProps(props, inlineChildrenProps), Component = as || "div", t3;
+		$[6] === childrenClassName ? t3 = $[7] : (t3 = (child) => child && /* @__PURE__ */ jsx("div", {
+			className: childrenClassName,
+			children: child
+		}), $[6] = childrenClassName, $[7] = t3), children = Children.map(childrenProp, t3), T0 = Component, t0 = clsx(inlineClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5];
+	let t1;
+	return $[8] !== T0 || $[9] !== children || $[10] !== rest || $[11] !== style || $[12] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, {
+		className: t0,
+		style,
+		"data-ui": "Inline",
+		...rest,
+		children
+	}), $[8] = T0, $[9] = children, $[10] = rest, $[11] = style, $[12] = t0, $[13] = t1) : t1 = $[13], t1;
 }
 const linkProps = {
-  openInNewTab: {
-    type: "boolean"
-  },
-  underlined: {
-    type: "boolean",
-    className: "underlined"
-  }
+	openInNewTab: { type: "boolean" },
+	underlined: {
+		type: "boolean",
+		className: "underlined"
+	}
 }, linkClassName = suffixClassName("sui-Link");
+/** @beta */
 function Link(t0) {
-  const $ = c(14);
-  let children, openInNewTab, rest, style, t1;
-  if ($[0] !== t0) {
-    const {
-      underlined: t22,
-      ...props
-    } = t0, underlined = t22 === void 0 ? !0 : t22, {
-      children: t32,
-      className,
-      style: t4,
-      openInNewTab: t5,
-      ...t6
-    } = getProps({
-      underlined,
-      ...props
-    }, linkProps);
-    children = t32, style = t4, openInNewTab = t5, rest = t6, t1 = clsx(linkClassName, className), $[0] = t0, $[1] = children, $[2] = openInNewTab, $[3] = rest, $[4] = style, $[5] = t1;
-  } else
-    children = $[1], openInNewTab = $[2], rest = $[3], style = $[4], t1 = $[5];
-  let t2;
-  $[6] !== openInNewTab ? (t2 = openInNewTab ? {
-    target: "_blank",
-    rel: "noopener noreferrer"
-  } : {}, $[6] = openInNewTab, $[7] = t2) : t2 = $[7];
-  let t3;
-  return $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t1 || $[12] !== t2 ? (t3 = /* @__PURE__ */ jsx("a", { className: t1, style, "data-ui": "Link", ...t2, ...rest, children }), $[8] = children, $[9] = rest, $[10] = style, $[11] = t1, $[12] = t2, $[13] = t3) : t3 = $[13], t3;
+	let $ = c(14), children, openInNewTab, rest, style, t1;
+	if ($[0] !== t0) {
+		let { underlined: t2, ...props } = t0, { children: t3, className, style: t4, openInNewTab: t5, ...t6 } = getProps({
+			underlined: t2 === void 0 || t2,
+			...props
+		}, linkProps);
+		children = t3, style = t4, openInNewTab = t5, rest = t6, t1 = clsx(linkClassName, className), $[0] = t0, $[1] = children, $[2] = openInNewTab, $[3] = rest, $[4] = style, $[5] = t1;
+	} else children = $[1], openInNewTab = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2;
+	$[6] === openInNewTab ? t2 = $[7] : (t2 = openInNewTab ? {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	} : {}, $[6] = openInNewTab, $[7] = t2);
+	let t3;
+	return $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t1 || $[12] !== t2 ? (t3 = /* @__PURE__ */ jsx("a", {
+		className: t1,
+		style,
+		"data-ui": "Link",
+		...t2,
+		...rest,
+		children
+	}), $[8] = children, $[9] = rest, $[10] = style, $[11] = t1, $[12] = t2, $[13] = t3) : t3 = $[13], t3;
 }
-const pressAreaProps = {
-  as: {
-    type: "string"
-  }
-}, pressAreaClassName = suffixClassName("sui-PressArea");
+const pressAreaProps = { as: { type: "string" } }, pressAreaClassName = suffixClassName("sui-PressArea");
+/** @public */
 function PressArea(props) {
-  const $ = c(12);
-  let T0, children, rest, style, t0;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: t12,
-      className,
-      style: t2,
-      ...t3
-    } = getProps(props, pressAreaProps);
-    children = t12, style = t2, rest = t3, T0 = as || "button", t0 = clsx(pressAreaClassName, "sui-width-full", className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5];
-  let t1;
-  return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, { className: t0, style, "data-ui": "PressArea", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t0, $[11] = t1) : t1 = $[11], t1;
+	let $ = c(12), T0, children, rest, style, t0;
+	if ($[0] !== props) {
+		let { as, children: t1, className, style: t2, ...t3 } = getProps(props, pressAreaProps);
+		children = t1, style = t2, rest = t3, T0 = as || "button", t0 = clsx(pressAreaClassName, "sui-width-full", className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5];
+	let t1;
+	return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, {
+		className: t0,
+		style,
+		"data-ui": "PressArea",
+		...rest,
+		children
+	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t0, $[11] = t1) : t1 = $[11], t1;
 }
-const vStackProps = {
-  as: {
-    type: "string"
-  },
-  gap: gapProps.gap
-}, vStackClassName = suffixClassName("sui-VStack");
-function VStack(props) {
-  const $ = c(14);
-  let T0, children, rest, style, t0, t1;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: t22,
-      className,
-      style: t3,
-      ...t4
-    } = getProps(props, vStackProps);
-    children = t22, style = t3, rest = t4;
-    const Component = as || "div";
-    T0 = Flex, t0 = Component, t1 = clsx(vStackClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
-  let t2;
-  return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "VStack", flexDirection: "column", ...rest, children }), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
+const vStackClassName = suffixClassName("sui-VStack");
+/** @public */
+function VStack(t0) {
+	let $ = c(8), className, props;
+	$[0] === t0 ? (className = $[1], props = $[2]) : ({className, ...props} = t0, $[0] = t0, $[1] = className, $[2] = props);
+	let t1;
+	$[3] === className ? t1 = $[4] : (t1 = clsx(vStackClassName, className), $[3] = className, $[4] = t1);
+	let t2 = props, t3;
+	return $[5] !== t1 || $[6] !== t2 ? (t3 = /* @__PURE__ */ jsx(Flex, {
+		className: t1,
+		"data-ui": "VStack",
+		flexDirection: "column",
+		...t2
+	}), $[5] = t1, $[6] = t2, $[7] = t3) : t3 = $[7], t3;
 }
 const listProps = {
-  as: {
-    type: "string"
-  },
-  gap: gapProps.gap
+	as: { type: "string" },
+	gap: gapProps.gap
 }, listItemProps = {
-  density: {
-    type: "composite",
-    values: DENSITY,
-    composition: {
-      gap: {
-        propDef: gapProps.gap,
-        mapping: {
-          compact: 2,
-          regular: 2,
-          loose: 3
-        }
-      },
-      minHeight: {
-        propDef: heightProps.minHeight,
-        mapping: {
-          compact: "33px",
-          regular: "37px",
-          loose: "45px"
-        }
-      },
-      paddingX: {
-        propDef: paddingProps.padding,
-        mapping: {
-          compact: 1,
-          regular: 2,
-          loose: 3
-        }
-      }
-    }
-  },
-  end: {
-    type: "string"
-  },
-  start: {
-    type: "string"
-  }
+	density: {
+		type: "composite",
+		values: DENSITY,
+		composition: {
+			gap: {
+				propDef: gapProps.gap,
+				mapping: {
+					compact: 2,
+					regular: 2,
+					loose: 3
+				}
+			},
+			minHeight: {
+				propDef: heightProps.minHeight,
+				mapping: {
+					compact: "33px",
+					regular: "37px",
+					loose: "45px"
+				}
+			},
+			paddingX: {
+				propDef: paddingProps.padding,
+				mapping: {
+					compact: 1,
+					regular: 2,
+					loose: 3
+				}
+			}
+		}
+	},
+	end: { type: "string" },
+	start: { type: "string" }
 }, listButtonItemProps = {
-  as: {
-    type: "string"
-  },
-  selected: {
-    type: "boolean"
-  },
-  ...listItemProps
+	as: { type: "string" },
+	selected: { type: "boolean" },
+	...listItemProps
 }, listItemTextProps = {
-  as: {
-    type: "string"
-  },
-  title: {
-    type: "string"
-  },
-  subtitle: {
-    type: "string"
-  }
+	as: { type: "string" },
+	title: { type: "string" },
+	subtitle: { type: "string" }
 }, listClassName = suffixClassName("sui-List"), listItemClassName = suffixClassName("sui-ListItem"), listButtonItemClassName = suffixClassName("sui-ListButtonItem"), listItemTextClassName = suffixClassName("sui-ListItemText"), listItemImageClassName = suffixClassName("sui-ListItemImage");
 function ListRoot(props) {
-  const $ = c(14);
-  let T0, children, rest, style, t0, t1;
-  if ($[0] !== props) {
-    const {
-      as,
-      children: t22,
-      className,
-      style: t3,
-      ...t4
-    } = getProps(props, listProps);
-    children = t22, style = t3, rest = t4;
-    const Component = as || "ul";
-    T0 = VStack, t0 = Component, t1 = clsx(listClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
-  let t2;
-  return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "List", ...rest, children }), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
+	let $ = c(14), T0, children, rest, style, t0, t1;
+	if ($[0] !== props) {
+		let { as, children: t2, className, style: t3, ...t4 } = getProps(props, listProps);
+		children = t2, style = t3, rest = t4;
+		let Component = as || "ul";
+		T0 = VStack, t0 = Component, t1 = clsx(listClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
+	} else T0 = $[1], children = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
+	let t2;
+	return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		className: t1,
+		style,
+		"data-ui": "List",
+		...rest,
+		children
+	}), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
 }
 function ListItem(t0) {
-  const $ = c(16);
-  let children, end, rest, start, style, t1;
-  if ($[0] !== t0) {
-    const {
-      density: t22,
-      ...props
-    } = t0, density = t22 === void 0 ? "regular" : t22, {
-      children: t32,
-      className,
-      style: t4,
-      end: t5,
-      start: t6,
-      ...t7
-    } = getProps({
-      density,
-      ...props
-    }, listItemProps);
-    children = t32, style = t4, end = t5, start = t6, rest = t7, t1 = clsx(listItemClassName, "sui-width-full sui-display-flex sui-align-items-center", className), $[0] = t0, $[1] = children, $[2] = end, $[3] = rest, $[4] = start, $[5] = style, $[6] = t1;
-  } else
-    children = $[1], end = $[2], rest = $[3], start = $[4], style = $[5], t1 = $[6];
-  let t2;
-  $[7] !== children ? (t2 = /* @__PURE__ */ jsx(Flex, { flexGrow: 1, gap: "inherit", children }), $[7] = children, $[8] = t2) : t2 = $[8];
-  let t3;
-  return $[9] !== end || $[10] !== rest || $[11] !== start || $[12] !== style || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsxs("li", { className: t1, style, "data-ui": "ListItem", ...rest, children: [
-    start,
-    t2,
-    end
-  ] }), $[9] = end, $[10] = rest, $[11] = start, $[12] = style, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
+	let $ = c(16), children, end, rest, start, style, t1;
+	if ($[0] !== t0) {
+		let { density: t2, ...props } = t0, { children: t3, className, style: t4, end: t5, start: t6, ...t7 } = getProps({
+			density: t2 === void 0 ? "regular" : t2,
+			...props
+		}, listItemProps);
+		children = t3, style = t4, end = t5, start = t6, rest = t7, t1 = clsx(listItemClassName, "sui-width-full sui-display-flex sui-align-items-center", className), $[0] = t0, $[1] = children, $[2] = end, $[3] = rest, $[4] = start, $[5] = style, $[6] = t1;
+	} else children = $[1], end = $[2], rest = $[3], start = $[4], style = $[5], t1 = $[6];
+	let t2;
+	$[7] === children ? t2 = $[8] : (t2 = /* @__PURE__ */ jsx(Flex, {
+		flexGrow: 1,
+		gap: "inherit",
+		children
+	}), $[7] = children, $[8] = t2);
+	let t3;
+	return $[9] !== end || $[10] !== rest || $[11] !== start || $[12] !== style || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsxs("li", {
+		className: t1,
+		style,
+		"data-ui": "ListItem",
+		...rest,
+		children: [
+			start,
+			t2,
+			end
+		]
+	}), $[9] = end, $[10] = rest, $[11] = start, $[12] = style, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
 }
 function ListButtonItem(t0) {
-  const $ = c(22);
-  let T0, children, end, rest, selected, start, style, t1, t2;
-  if ($[0] !== t0) {
-    const {
-      density: t32,
-      ...props
-    } = t0, density = t32 === void 0 ? "regular" : t32, {
-      as,
-      children: t42,
-      className,
-      style: t5,
-      end: t6,
-      start: t7,
-      selected: t8,
-      ...t9
-    } = getProps({
-      density,
-      ...props
-    }, listButtonItemProps);
-    children = t42, style = t5, end = t6, start = t7, selected = t8, rest = t9;
-    const Component = as || "button";
-    T0 = PressArea, t1 = Component, t2 = clsx(listButtonItemClassName, "sui-width-full sui-display-flex sui-align-items-center sui-radius2", className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = end, $[4] = rest, $[5] = selected, $[6] = start, $[7] = style, $[8] = t1, $[9] = t2;
-  } else
-    T0 = $[1], children = $[2], end = $[3], rest = $[4], selected = $[5], start = $[6], style = $[7], t1 = $[8], t2 = $[9];
-  let t3;
-  $[10] !== children ? (t3 = /* @__PURE__ */ jsx(Flex, { flexGrow: 1, gap: "inherit", children }), $[10] = children, $[11] = t3) : t3 = $[11];
-  let t4;
-  return $[12] !== T0 || $[13] !== end || $[14] !== rest || $[15] !== selected || $[16] !== start || $[17] !== style || $[18] !== t1 || $[19] !== t2 || $[20] !== t3 ? (t4 = /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(T0, { as: t1, className: t2, style, "data-ui": "ListButtonItem", "data-selected": selected, ...rest, children: [
-    start,
-    t3,
-    end
-  ] }) }), $[12] = T0, $[13] = end, $[14] = rest, $[15] = selected, $[16] = start, $[17] = style, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4) : t4 = $[21], t4;
+	let $ = c(22), T0, children, end, rest, selected, start, style, t1, t2;
+	if ($[0] !== t0) {
+		let { density: t3, ...props } = t0, { as, children: t4, className, style: t5, end: t6, start: t7, selected: t8, ...t9 } = getProps({
+			density: t3 === void 0 ? "regular" : t3,
+			...props
+		}, listButtonItemProps);
+		children = t4, style = t5, end = t6, start = t7, selected = t8, rest = t9;
+		let Component = as || "button";
+		T0 = PressArea, t1 = Component, t2 = clsx(listButtonItemClassName, "sui-width-full sui-display-flex sui-align-items-center sui-radius2", className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = end, $[4] = rest, $[5] = selected, $[6] = start, $[7] = style, $[8] = t1, $[9] = t2;
+	} else T0 = $[1], children = $[2], end = $[3], rest = $[4], selected = $[5], start = $[6], style = $[7], t1 = $[8], t2 = $[9];
+	let t3;
+	$[10] === children ? t3 = $[11] : (t3 = /* @__PURE__ */ jsx(Flex, {
+		flexGrow: 1,
+		gap: "inherit",
+		children
+	}), $[10] = children, $[11] = t3);
+	let t4;
+	return $[12] !== T0 || $[13] !== end || $[14] !== rest || $[15] !== selected || $[16] !== start || $[17] !== style || $[18] !== t1 || $[19] !== t2 || $[20] !== t3 ? (t4 = /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(T0, {
+		as: t1,
+		className: t2,
+		style,
+		"data-ui": "ListButtonItem",
+		"data-selected": selected,
+		...rest,
+		children: [
+			start,
+			t3,
+			end
+		]
+	}) }), $[12] = T0, $[13] = end, $[14] = rest, $[15] = selected, $[16] = start, $[17] = style, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4) : t4 = $[21], t4;
 }
 function ListItemText(props) {
-  const $ = c(20);
-  let T0, rest, style, subtitle, t0, t1, title;
-  if ($[0] !== props) {
-    const {
-      as,
-      className,
-      style: t22,
-      title: t32,
-      subtitle: t42,
-      ...t5
-    } = getProps(props, listItemTextProps);
-    style = t22, title = t32, subtitle = t42, rest = t5;
-    const Component = as || "div";
-    T0 = Flex, t0 = Component, t1 = clsx(listItemTextClassName, className), $[0] = props, $[1] = T0, $[2] = rest, $[3] = style, $[4] = subtitle, $[5] = t0, $[6] = t1, $[7] = title;
-  } else
-    T0 = $[1], rest = $[2], style = $[3], subtitle = $[4], t0 = $[5], t1 = $[6], title = $[7];
-  let t2;
-  $[8] !== title ? (t2 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", trim: !0, truncate: 1, children: title }), $[8] = title, $[9] = t2) : t2 = $[9];
-  let t3;
-  $[10] !== subtitle ? (t3 = subtitle && /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, trim: !0, truncate: 1, children: subtitle }), $[10] = subtitle, $[11] = t3) : t3 = $[11];
-  let t4;
-  return $[12] !== T0 || $[13] !== rest || $[14] !== style || $[15] !== t0 || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 ? (t4 = /* @__PURE__ */ jsxs(T0, { as: t0, className: t1, style, "data-ui": "ListItemText", flexDirection: "column", justifyContent: "center", gap: 2, flexGrow: 1, ...rest, children: [
-    t2,
-    t3
-  ] }), $[12] = T0, $[13] = rest, $[14] = style, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4) : t4 = $[19], t4;
+	let $ = c(20), T0, rest, style, subtitle, t0, t1, title;
+	if ($[0] !== props) {
+		let { as, className, style: t2, title: t3, subtitle: t4, ...t5 } = getProps(props, listItemTextProps);
+		style = t2, title = t3, subtitle = t4, rest = t5;
+		let Component = as || "div";
+		T0 = Flex, t0 = Component, t1 = clsx(listItemTextClassName, className), $[0] = props, $[1] = T0, $[2] = rest, $[3] = style, $[4] = subtitle, $[5] = t0, $[6] = t1, $[7] = title;
+	} else T0 = $[1], rest = $[2], style = $[3], subtitle = $[4], t0 = $[5], t1 = $[6], title = $[7];
+	let t2;
+	$[8] === title ? t2 = $[9] : (t2 = title && /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		trim: !0,
+		truncate: 1,
+		children: title
+	}), $[8] = title, $[9] = t2);
+	let t3;
+	$[10] === subtitle ? t3 = $[11] : (t3 = subtitle && /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		muted: !0,
+		trim: !0,
+		truncate: 1,
+		children: subtitle
+	}), $[10] = subtitle, $[11] = t3);
+	let t4;
+	return $[12] !== T0 || $[13] !== rest || $[14] !== style || $[15] !== t0 || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 ? (t4 = /* @__PURE__ */ jsxs(T0, {
+		as: t0,
+		className: t1,
+		style,
+		"data-ui": "ListItemText",
+		flexDirection: "column",
+		justifyContent: "center",
+		gap: 2,
+		flexGrow: 1,
+		...rest,
+		children: [t2, t3]
+	}), $[12] = T0, $[13] = rest, $[14] = style, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4) : t4 = $[19], t4;
 }
 function ListItemImage(props) {
-  const $ = c(8);
-  let rest, style, t0;
-  if ($[0] !== props) {
-    const {
-      className,
-      style: t12,
-      ...t2
-    } = getProps(props, {});
-    style = t12, rest = t2, t0 = clsx(listItemImageClassName, "sui-radius2", className), $[0] = props, $[1] = rest, $[2] = style, $[3] = t0;
-  } else
-    rest = $[1], style = $[2], t0 = $[3];
-  let t1;
-  return $[4] !== rest || $[5] !== style || $[6] !== t0 ? (t1 = /* @__PURE__ */ jsx("img", { className: t0, style, "data-ui": "ListItemImage", ...rest }), $[4] = rest, $[5] = style, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
+	let $ = c(8), rest, style, t0;
+	if ($[0] !== props) {
+		let { className, style: t1, ...t2 } = getProps(props, {});
+		style = t1, rest = t2, t0 = clsx(listItemImageClassName, "sui-radius2", className), $[0] = props, $[1] = rest, $[2] = style, $[3] = t0;
+	} else rest = $[1], style = $[2], t0 = $[3];
+	let t1;
+	return $[4] !== rest || $[5] !== style || $[6] !== t0 ? (t1 = /* @__PURE__ */ jsx("img", {
+		className: t0,
+		style,
+		"data-ui": "ListItemImage",
+		...rest
+	}), $[4] = rest, $[5] = style, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
 }
 ListRoot.displayName = "List";
+/** @beta */
 const List = ListRoot;
-ListRoot.Item = ListItem;
-ListRoot.ButtonItem = ListButtonItem;
-ListRoot.ItemText = ListItemText;
-ListRoot.ItemImage = ListItemImage;
-const radioProps = {
-  error: {
-    type: "boolean"
-  },
-  label: {
-    type: "string"
-  },
-  ...marginProps
+ListRoot.Item = ListItem, ListRoot.ButtonItem = ListButtonItem, ListRoot.ItemText = ListItemText, ListRoot.ItemImage = ListItemImage;
+/** @public */
+function useIsClient() {
+	return useSyncExternalStore(_temp2, _temp3, _temp4);
+}
+function _temp4() {
+	return !1;
+}
+function _temp3() {
+	return !0;
+}
+function _temp2() {
+	return _temp;
+}
+function _temp() {}
+function isReactEventHandler(key, value) {
+	return /^on[A-Z]/.test(key) && typeof value == "function";
+}
+function chainEventHandlers(...handlers) {
+	let defined = handlers.filter(Boolean);
+	if (defined.length !== 0) return defined.length === 1 ? defined[0] : (e) => {
+		for (let handler of defined) handler(e);
+	};
+}
+function mergeTriggerProps(childProps, forwardedProps, ownProps) {
+	let result = {};
+	for (let source of [forwardedProps, ownProps]) if (source) {
+		for (let [key, value] of Object.entries(source)) if (key !== "style") {
+			if (isReactEventHandler(key, value)) {
+				result[key] = chainEventHandlers(result[key], value);
+				continue;
+			}
+			value !== void 0 && (result[key] = value);
+		}
+	}
+	result.style = {
+		...childProps.style,
+		...forwardedProps?.style,
+		...ownProps?.style
+	};
+	for (let [key, value] of Object.entries(childProps)) isReactEventHandler(key, value) && (result[key] = chainEventHandlers(result[key], value));
+	return result;
+}
+function renderPortal(node, mounted, portal) {
+	return portal ? mounted ? createPortal(node, document.body) : null : node;
+}
+const placementProps = { placement: {
+	type: "union",
+	className: "placement",
+	values: [
+		"top",
+		"top-start",
+		"top-end",
+		"right",
+		"right-start",
+		"right-end",
+		"bottom",
+		"bottom-start",
+		"bottom-end",
+		"left",
+		"left-start",
+		"left-end"
+	]
+} }, popoverProps = {
+	anchorName: { type: "string" },
+	content: { type: "string" },
+	portal: { type: "boolean" },
+	...placementProps
+}, popoverClassName = suffixClassName("sui-PopoverContent");
+function PopoverRoot(t0) {
+	let $ = c(4), { placement: t1, ...props } = t0, { children, className, style, id: idProp, anchorName, content, portal, triggerProps: forwardedTriggerProps, ...rest } = getProps({
+		placement: t1 === void 0 ? "bottom" : t1,
+		...props
+	}, popoverProps), reactId = useId(), id = idProp || reactId, [open, setOpen] = useState(!1), isClient = useIsClient(), t2;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = (e) => {
+		setOpen(e.newState === "open");
+	}, $[0] = t2) : t2 = $[0];
+	let handleToggle = t2, triggerProps = {
+		popoverTarget: id,
+		style: { anchorName: `--anchor-${anchorName || id}` }
+	}, trigger = children.type.forwardsTriggerProps ? cloneElement(children, { triggerProps }) : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps)), t3 = renderPortal(/* @__PURE__ */ jsx(Activity, {
+		mode: open ? "visible" : "hidden",
+		children: /* @__PURE__ */ jsx("div", {
+			className: clsx(popoverClassName, "sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2", className),
+			style: {
+				...style,
+				positionAnchor: `--anchor-${anchorName || id}`
+			},
+			"data-ui": "Popover",
+			popover: "auto",
+			id,
+			onToggle: handleToggle,
+			...rest,
+			children: content
+		})
+	}), isClient, portal), t4;
+	return $[1] !== t3 || $[2] !== trigger ? (t4 = /* @__PURE__ */ jsxs(Fragment, { children: [trigger, t3] }), $[1] = t3, $[2] = trigger, $[3] = t4) : t4 = $[3], t4;
+}
+/** @beta */
+const Popover = Object.assign(PopoverRoot, { forwardsTriggerProps: !0 }), radioProps = {
+	error: { type: "boolean" },
+	label: { type: "string" },
+	...marginProps
 }, radioClassName = suffixClassName("sui-Radio"), radioInputClassName = suffixClassName("sui-RadioInput"), radioMarkClassName = suffixClassName("sui-RadioMark");
+/** @beta */
 function Radio(props) {
-  const $ = c(26);
-  let T0, T1, label, t0, t1, t2, t3, t4, t5, t6, t7;
-  if ($[0] !== props) {
-    const {
-      className,
-      style,
-      label: t82,
-      disabled,
-      error,
-      ...rest
-    } = getProps(props, radioProps);
-    label = t82, T1 = Label, t2 = clsx(radioClassName, className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "radio", className: radioInputClassName, disabled, ...rest }), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
-  } else
-    T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
-  let t8;
-  $[12] !== T0 || $[13] !== t0 || $[14] !== t1 ? (t8 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, position: "relative", radius: "full", width: "17px", height: "17px" }), $[12] = T0, $[13] = t0, $[14] = t1, $[15] = t8) : t8 = $[15];
-  let t9;
-  return $[16] !== T1 || $[17] !== label || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T1, { className: t2, style: t3, "data-ui": t4, disabled: t5, error: t6, children: [
-    t7,
-    t8,
-    label
-  ] }), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
+	let $ = c(26), T0, T1, label, t0, t1, t2, t3, t4, t5, t6, t7;
+	if ($[0] !== props) {
+		let { className, style, label: t8, disabled, error, ...rest } = getProps(props, radioProps);
+		label = t8, T1 = Label, t2 = clsx(radioClassName, "sui-position-relative", className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, {
+			as: "input",
+			type: "radio",
+			className: radioInputClassName,
+			disabled,
+			...rest
+		}), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+	} else T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
+	let t8;
+	$[12] !== T0 || $[13] !== t0 || $[14] !== t1 ? (t8 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		className: t1,
+		position: "relative",
+		radius: "full",
+		width: "17px",
+		height: "17px"
+	}), $[12] = T0, $[13] = t0, $[14] = t1, $[15] = t8) : t8 = $[15];
+	let t9;
+	return $[16] !== T1 || $[17] !== label || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T1, {
+		className: t2,
+		style: t3,
+		"data-ui": t4,
+		disabled: t5,
+		error: t6,
+		children: [
+			t7,
+			t8,
+			label
+		]
+	}), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
+}
+const selectProps = {
+	disabled: { type: "boolean" },
+	hasError: { type: "boolean" },
+	density: {
+		type: "composite",
+		values: ["regular", "loose"],
+		composition: {
+			paddingX: {
+				propDef: paddingProps.paddingX,
+				mapping: {
+					regular: 2,
+					loose: 3
+				}
+			},
+			paddingY: {
+				propDef: paddingProps.paddingY,
+				mapping: {
+					regular: 1,
+					loose: 2
+				}
+			}
+		}
+	}
+}, selectClassName = suffixClassName("sui-Select");
+/** @public */
+function Select(t0) {
+	let $ = c(17), { density: t1, hasError: t2, ...props } = t0, density = t1 === void 0 ? "regular" : t1, hasError = t2 !== void 0 && t2, { children, className, style, ...rest } = getProps({
+		density,
+		...props
+	}, selectProps), anchorName = `--anchor-${useId()}`, selectClasses = clsx(selectClassName, hasError && "sui-error", "sui-radius2", "sui-width-full", className), t3;
+	$[0] !== anchorName || $[1] !== style ? (t3 = {
+		...style,
+		anchorName
+	}, $[0] = anchorName, $[1] = style, $[2] = t3) : t3 = $[2];
+	let t4 = hasError || void 0, t5;
+	$[3] !== children || $[4] !== rest || $[5] !== selectClasses || $[6] !== t3 || $[7] !== t4 ? (t5 = /* @__PURE__ */ jsx("select", {
+		"data-ui": "Select",
+		className: selectClasses,
+		style: t3,
+		...rest,
+		"aria-invalid": t4,
+		children
+	}), $[3] = children, $[4] = rest, $[5] = selectClasses, $[6] = t3, $[7] = t4, $[8] = t5) : t5 = $[8];
+	let t6;
+	$[9] === anchorName ? t6 = $[10] : (t6 = { positionAnchor: anchorName }, $[9] = anchorName, $[10] = t6);
+	let t7;
+	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(Icon, {
+		icon: SelectIcon,
+		size: 1
+	}), $[11] = t7) : t7 = $[11];
+	let t8;
+	$[12] === t6 ? t8 = $[13] : (t8 = /* @__PURE__ */ jsx("div", {
+		className: "sui-position-absolute sui-display-flex sui-align-items-center sui-px1",
+		"data-ui": "Select-icon",
+		style: t6,
+		children: t7
+	}), $[12] = t6, $[13] = t8);
+	let t9;
+	return $[14] !== t5 || $[15] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, t8] }), $[14] = t5, $[15] = t8, $[16] = t9) : t9 = $[16], t9;
 }
-const skipToContentProps = {
-  label: {
-    type: "string"
-  }
-}, skipToContentClassName = suffixClassName("sui-SkipToContent");
+const skipToContentProps = { label: { type: "string" } }, skipToContentClassName = suffixClassName("sui-SkipToContent");
+/** @beta */
 function SkipToContent(props) {
-  const $ = c(18);
-  let T0, label, rest, style, t0, t1, t2;
-  if ($[0] !== props) {
-    const {
-      className,
-      label: t32,
-      style: t42,
-      ...t5
-    } = getProps(props, skipToContentProps);
-    label = t32, style = t42, rest = t5, T0 = VisuallyHidden, t0 = Link, t1 = !1, t2 = clsx(skipToContentClassName, "sui-position-absolute sui-top2 sui-left2 sui-display-inline-block sui-z-index sui-py2 sui-px3 sui-radius2 sui-text-body1", className), $[0] = props, $[1] = T0, $[2] = label, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1, $[7] = t2;
-  } else
-    T0 = $[1], label = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6], t2 = $[7];
-  let t3;
-  $[8] !== label ? (t3 = /* @__PURE__ */ jsx(Text, { size: 1, children: label }), $[8] = label, $[9] = t3) : t3 = $[9];
-  let t4;
-  return $[10] !== T0 || $[11] !== rest || $[12] !== style || $[13] !== t0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, { as: t0, underlined: t1, className: t2, style, "data-ui": "SkipToContent", visibleOnFocus: !0, ...rest, children: t3 }), $[10] = T0, $[11] = rest, $[12] = style, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4) : t4 = $[17], t4;
+	let $ = c(18), T0, label, rest, style, t0, t1, t2;
+	if ($[0] !== props) {
+		let { className, label: t3, style: t4, ...t5 } = getProps(props, skipToContentProps);
+		label = t3, style = t4, rest = t5, T0 = VisuallyHidden, t0 = Link, t1 = !1, t2 = clsx(skipToContentClassName, "sui-position-absolute sui-top2 sui-left2 sui-display-inline-block sui-z-index sui-py2 sui-px3 sui-radius2 sui-text-body1", className), $[0] = props, $[1] = T0, $[2] = label, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1, $[7] = t2;
+	} else T0 = $[1], label = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6], t2 = $[7];
+	let t3;
+	$[8] === label ? t3 = $[9] : (t3 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: label
+	}), $[8] = label, $[9] = t3);
+	let t4;
+	return $[10] !== T0 || $[11] !== rest || $[12] !== style || $[13] !== t0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		underlined: t1,
+		className: t2,
+		style,
+		"data-ui": "SkipToContent",
+		visibleOnFocus: !0,
+		...rest,
+		children: t3
+	}), $[10] = T0, $[11] = rest, $[12] = style, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4) : t4 = $[17], t4;
 }
 const switchProps = {
-  error: {
-    type: "boolean"
-  },
-  label: {
-    type: "string"
-  },
-  ...marginProps
+	error: { type: "boolean" },
+	label: { type: "string" },
+	...marginProps
 }, switchClassName = suffixClassName("sui-Switch"), switchInputClassName = suffixClassName("sui-SwitchInput"), switchMarkClassName = suffixClassName("sui-SwitchMark");
+/** @beta */
 function Switch(props) {
-  const $ = c(26);
-  let T0, T1, label, t0, t1, t2, t3, t4, t5, t6, t7;
-  if ($[0] !== props) {
-    const {
-      className,
-      style,
-      disabled,
-      error,
-      label: t82,
-      ...rest
-    } = getProps(props, switchProps);
-    label = t82, T1 = Label, t2 = clsx(switchClassName, className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "checkbox", role: "switch", className: switchInputClassName, disabled, ...rest }), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
-  } else
-    T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
-  let t8;
-  $[12] !== T0 || $[13] !== t0 || $[14] !== t1 ? (t8 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, alignItems: "center", radius: 6, "aria-hidden": "true" }), $[12] = T0, $[13] = t0, $[14] = t1, $[15] = t8) : t8 = $[15];
-  let t9;
-  return $[16] !== T1 || $[17] !== label || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T1, { className: t2, style: t3, "data-ui": t4, disabled: t5, error: t6, children: [
-    t7,
-    t8,
-    label
-  ] }), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
+	let $ = c(26), T0, T1, label, t0, t1, t2, t3, t4, t5, t6, t7;
+	if ($[0] !== props) {
+		let { className, style, disabled, error, label: t8, ...rest } = getProps(props, switchProps);
+		label = t8, T1 = Label, t2 = clsx(switchClassName, "sui-position-relative", className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, {
+			as: "input",
+			type: "checkbox",
+			role: "switch",
+			className: switchInputClassName,
+			disabled,
+			...rest
+		}), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+	} else T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
+	let t8;
+	$[12] !== T0 || $[13] !== t0 || $[14] !== t1 ? (t8 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		className: t1,
+		alignItems: "center",
+		radius: 6,
+		"aria-hidden": "true"
+	}), $[12] = T0, $[13] = t0, $[14] = t1, $[15] = t8) : t8 = $[15];
+	let t9;
+	return $[16] !== T1 || $[17] !== label || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T1, {
+		className: t2,
+		style: t3,
+		"data-ui": t4,
+		disabled: t5,
+		error: t6,
+		children: [
+			t7,
+			t8,
+			label
+		]
+	}), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 }
-const PLACEMENT = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], placementProps = {
-  placement: {
-    type: "union",
-    className: "placement",
-    values: PLACEMENT
-  }
-}, tooltipProps = {
-  text: {
-    type: "string"
-  },
-  disabled: {
-    type: "boolean"
-  },
-  ...placementProps
-}, tooltipClassName = suffixClassName("sui-Tooltip"), tooltipDismissedClassName = suffixClassName("sui-Tooltip-Dismissed");
-function Tooltip(t0) {
-  const $ = c(16), {
-    placement: t1,
-    ...props
-  } = t0, placement = t1 === void 0 ? "bottom" : t1, {
-    children,
-    className,
-    style,
-    disabled,
-    id: idProp,
-    text,
-    ...rest
-  } = getProps({
-    placement,
-    ...props
-  }, tooltipProps), reactId = useId(), id = idProp || reactId, [dismissed, setDismissed] = useState(!1);
-  let t2, t3;
-  $[0] !== dismissed ? (t2 = () => {
-    if (dismissed)
-      return;
-    const handleKeyDown = (e) => {
-      e.key === "Escape" && setDismissed(!0);
-    };
-    return window.addEventListener("keydown", handleKeyDown), () => window.removeEventListener("keydown", handleKeyDown);
-  }, t3 = [dismissed], $[0] = dismissed, $[1] = t2, $[2] = t3) : (t2 = $[1], t3 = $[2]), useEffect(t2, t3);
-  const trigger = cloneElement(children, {
-    "aria-describedby": id,
-    onMouseEnter: (e_0) => {
-      setDismissed(!1), children.props.onMouseEnter?.(e_0);
-    },
-    onFocus: (e_1) => {
-      setDismissed(!1), children.props.onFocus?.(e_1);
-    },
-    onClick: (e_2) => {
-      setDismissed(!0), children.props.onClick?.(e_2);
-    },
-    style: {
-      ...children.props.style,
-      anchorName: `--tooltip-anchor-${id}`
-    }
-  });
-  if (disabled)
-    return children;
-  const T0 = Box, t4 = clsx(tooltipClassName, dismissed ? tooltipDismissedClassName : "", className), t5 = `--tooltip-anchor-${id}`;
-  let t6;
-  $[3] !== style || $[4] !== t5 ? (t6 = {
-    ...style,
-    positionAnchor: t5
-  }, $[3] = style, $[4] = t5, $[5] = t6) : t6 = $[5];
-  let t7;
-  $[6] !== T0 || $[7] !== id || $[8] !== rest || $[9] !== t4 || $[10] !== t6 || $[11] !== text ? (t7 = /* @__PURE__ */ jsx(T0, { className: t4, role: "tooltip", style: t6, "data-ui": "Tooltip", id, paddingX: 2, paddingY: 1, radius: 2, position: "fixed", zIndex: 9999, shadow: 2, ...rest, children: text }), $[6] = T0, $[7] = id, $[8] = rest, $[9] = t4, $[10] = t6, $[11] = text, $[12] = t7) : t7 = $[12];
-  let t8;
-  return $[13] !== t7 || $[14] !== trigger ? (t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    trigger,
-    t7
-  ] }), $[13] = t7, $[14] = trigger, $[15] = t8) : t8 = $[15], t8;
+const tooltipProps = {
+	anchorName: { type: "string" },
+	content: { type: "string" },
+	portal: { type: "boolean" },
+	...placementProps
+}, tooltipClassName = suffixClassName("sui-Tooltip");
+function TooltipRoot(t0) {
+	let $ = c(7), { placement: t1, ...props } = t0, { children, className, style, id: idProp, anchorName, content, portal, triggerProps: forwardedTriggerProps, ...rest } = getProps({
+		placement: t1 === void 0 ? "bottom" : t1,
+		...props
+	}, tooltipProps), reactId = useId(), id = idProp || reactId, [dismissed, setDismissed] = useState(!1), isClient = useIsClient(), t2, t3;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => {
+		setDismissed(!1);
+	}, t3 = () => {
+		setDismissed(!1);
+	}, $[0] = t2, $[1] = t3) : (t2 = $[0], t3 = $[1]);
+	let triggerProps = {
+		"aria-describedby": id,
+		interestfor: id,
+		style: { anchorName: `--anchor-${anchorName || id}` },
+		onMouseLeave: t2,
+		onBlur: t3,
+		onClick: () => {
+			setDismissed(!0), document.getElementById(id)?.hidePopover();
+		}
+	}, trigger = children.type.forwardsTriggerProps ? cloneElement(children, { triggerProps }) : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps)), t4;
+	$[2] === dismissed ? t4 = $[3] : (t4 = (e) => {
+		e.newState === "open" && dismissed && e.preventDefault();
+	}, $[2] = dismissed, $[3] = t4);
+	let handleBeforeToggle = t4, t5 = renderPortal(/* @__PURE__ */ jsx("div", {
+		className: clsx(tooltipClassName, "sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2", className),
+		style: {
+			...style,
+			positionAnchor: `--anchor-${anchorName || id}`
+		},
+		"data-ui": "Tooltip",
+		role: "tooltip",
+		popover: "hint",
+		id,
+		onBeforeToggle: handleBeforeToggle,
+		...rest,
+		children: content
+	}), isClient, portal), t6;
+	return $[4] !== t5 || $[5] !== trigger ? (t6 = /* @__PURE__ */ jsxs(Fragment, { children: [trigger, t5] }), $[4] = t5, $[5] = trigger, $[6] = t6) : t6 = $[6], t6;
 }
-const tooltipGroupProps = {
-  as: {
-    type: "string"
-  }
-}, tooltipGroupClassName = suffixClassName("sui-TooltipGroup");
+/** @beta */
+const Tooltip = Object.assign(TooltipRoot, { forwardsTriggerProps: !0 }), tooltipGroupProps = { as: { type: "string" } }, tooltipGroupClassName = suffixClassName("sui-TooltipGroup");
+/** @public */
 function TooltipGroup(props) {
-  const $ = c(17), {
-    as,
-    children,
-    className,
-    style,
-    ...rest
-  } = getProps(props, tooltipGroupProps), Component = as || "div", ref = useRef(null), [isActive, setIsActive] = useState(!1);
-  let t0;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = (e) => {
-    const tooltip = e.target.closest('[data-ui="Tooltip"]');
-    tooltip && e.propertyName === "visibility" && window.getComputedStyle(tooltip).visibility !== "hidden" && setIsActive(!0);
-  }, $[0] = t0) : t0 = $[0];
-  const handleTransitionEnd = t0;
-  let t1;
-  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = () => {
-    setIsActive(!1);
-  }, $[1] = t1) : t1 = $[1];
-  const handleMouseLeave = t1;
-  let t2;
-  $[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = (e_0) => {
-    ref.current && ref.current.contains(e_0.relatedTarget) || setIsActive(!1);
-  }, $[2] = t2) : t2 = $[2];
-  const handleBlur = t2, t3 = clsx(tooltipGroupClassName, className);
-  let t4;
-  $[3] !== isActive ? (t4 = isActive && {
-    "--tooltip-delay-group": 0
-  }, $[3] = isActive, $[4] = t4) : t4 = $[4];
-  let t5;
-  $[5] !== style || $[6] !== t4 ? (t5 = {
-    ...style,
-    ...t4
-  }, $[5] = style, $[6] = t4, $[7] = t5) : t5 = $[7];
-  let t6;
-  return $[8] !== Component || $[9] !== children || $[10] !== handleBlur || $[11] !== handleMouseLeave || $[12] !== handleTransitionEnd || $[13] !== rest || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Component, { className: t3, style: t5, "data-ui": "TooltipGroup", ref, onTransitionEnd: handleTransitionEnd, onMouseLeave: handleMouseLeave, onBlur: handleBlur, ...rest, children }), $[8] = Component, $[9] = children, $[10] = handleBlur, $[11] = handleMouseLeave, $[12] = handleTransitionEnd, $[13] = rest, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+	let $ = c(17), { as, children, className, style, ...rest } = getProps(props, tooltipGroupProps), Component = as || "div", ref = useRef(null), [isActive, setIsActive] = useState(!1), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (e) => {
+		let tooltip = e.target.closest("[data-ui=\"Tooltip\"]");
+		tooltip && e.propertyName === "opacity" && window.getComputedStyle(tooltip).opacity !== "0" && setIsActive(!0);
+	}, $[0] = t0) : t0 = $[0];
+	let handleTransitionEnd = t0, t1;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => {
+		setIsActive(!1);
+	}, $[1] = t1) : t1 = $[1];
+	let handleMouseLeave = t1, t2;
+	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = (e_0) => {
+		ref.current && ref.current.contains(e_0.relatedTarget) || setIsActive(!1);
+	}, $[2] = t2) : t2 = $[2];
+	let handleBlur = t2, t3 = clsx(tooltipGroupClassName, className), t4;
+	$[3] === isActive ? t4 = $[4] : (t4 = isActive && { "--tooltip-delay-group": "0ms" }, $[3] = isActive, $[4] = t4);
+	let t5;
+	$[5] !== style || $[6] !== t4 ? (t5 = {
+		...style,
+		...t4
+	}, $[5] = style, $[6] = t4, $[7] = t5) : t5 = $[7];
+	let t6;
+	return $[8] !== Component || $[9] !== children || $[10] !== handleBlur || $[11] !== handleMouseLeave || $[12] !== handleTransitionEnd || $[13] !== rest || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Component, {
+		className: t3,
+		style: t5,
+		"data-ui": "TooltipGroup",
+		ref,
+		onTransitionEnd: handleTransitionEnd,
+		onMouseLeave: handleMouseLeave,
+		onBlur: handleBlur,
+		...rest,
+		children
+	}), $[8] = Component, $[9] = children, $[10] = handleBlur, $[11] = handleMouseLeave, $[12] = handleTransitionEnd, $[13] = rest, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+}
+const badgeProps = {
+	as: { type: "string" },
+	iconStart: { type: "string" },
+	text: { type: "string" },
+	...toneProps
+}, badgeClassName = suffixClassName("sui-Badge");
+/** @public */
+function Badge(t0) {
+	let $ = c(20), T0, children, t1, t2, t3, t4, t5, text;
+	if ($[0] !== t0) {
+		let { tone: t6, ...props } = t0, { as, children: t7, className, style, iconStart: IconStart, text: t8, ...rest } = getProps({
+			tone: t6 === void 0 ? "neutral" : t6,
+			...props
+		}, badgeProps);
+		children = t7, text = t8;
+		let Component = as || "span", badgeClasses = clsx(badgeClassName, `${IconStart ? "sui-p1" : "sui-px2 sui-py1"} sui-radius-full sui-display-inline-flex sui-align-items-center sui-gap1`);
+		T0 = Component, t1 = clsx(badgeClasses, className), t2 = style, t3 = "Badge", t4 = rest, t5 = IconStart && (isValidElement(IconStart) ? IconStart : /* @__PURE__ */ jsx(Icon, {
+			icon: IconStart,
+			marginX: -1,
+			marginY: -2,
+			size: 0
+		})), $[0] = t0, $[1] = T0, $[2] = children, $[3] = t1, $[4] = t2, $[5] = t3, $[6] = t4, $[7] = t5, $[8] = text;
+	} else T0 = $[1], children = $[2], t1 = $[3], t2 = $[4], t3 = $[5], t4 = $[6], t5 = $[7], text = $[8];
+	let t6;
+	$[9] === text ? t6 = $[10] : (t6 = text && /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		trim: !0,
+		children: text
+	}), $[9] = text, $[10] = t6);
+	let t7;
+	return $[11] !== T0 || $[12] !== children || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T0, {
+		className: t1,
+		style: t2,
+		"data-ui": t3,
+		...t4,
+		children: [
+			t5,
+			t6,
+			children
+		]
+	}), $[11] = T0, $[12] = children, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
 }
-export {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Code,
-  Container,
-  Divider,
-  Eyebrow,
-  Flex,
-  Grid,
-  HStack,
-  Heading,
-  Icon,
-  IconButton,
-  Indicator,
-  IndicatorStack,
-  Inline,
-  Label,
-  Link,
-  List,
-  PressArea,
-  Radio,
-  SkipToContent,
-  Spinner,
-  Switch,
-  Text,
-  Tooltip,
-  TooltipGroup,
-  VStack,
-  VisuallyHidden
-};
-//# sourceMappingURL=index.js.map
+export { Badge, Box, Button, Card, Checkbox, Code, Container, Dialog, Divider, Eyebrow, Flex, Grid, HStack, Heading, Icon, IconButton, Indicator, IndicatorStack, Inline, Label, Link, List, Popover, PressArea, Radio, Select, SkipToContent, Spinner, Switch, Text, Tooltip, TooltipGroup, VStack, VisuallyHidden, useIsClient };
+
+//# sourceMappingURL=index.js.map