@wistia/ui 3.4.0 → 3.4.1-beta.6b786a22.02b1b86

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v3.4.0
+ * @license @wistia/ui v3.4.1-beta.6b786a22.02b1b86
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -8,9 +8,9 @@
  */
 
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
-import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined, noOpFn } from "@wistia/type-guards";
+import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined, noOpFn } from "@wistia/utils";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
 import { getValueAndUnit } from "polished";
@@ -1224,13 +1224,24 @@ const mergeRefs = (refs) => (value) => {
 };
 //#endregion
 //#region src/css/breakpoints.ts
-const breakpoints = {
+const breakpointsEm = {
 	xs: "0em",
 	sm: "37.5em",
 	md: "56.5625em",
 	lg: "77.5em",
 	xl: "90em"
 };
+/**
+* The minimum viewport width, in px, of each breakpoint (at the default 16px font size).
+* A breakpoint's range runs from its own value up to, but not including, the next one.
+*/
+const breakpoints = {
+	xs: 0,
+	sm: 600,
+	md: 905,
+	lg: 1240,
+	xl: 1440
+};
 //#endregion
 //#region src/helpers/mq/mq.ts
 const getMaxWidth = (breakpoint) => {
@@ -1238,15 +1249,15 @@ const getMaxWidth = (breakpoint) => {
 	const [value, unit] = getValueAndUnit(breakpoint);
 	return `@media (max-width: ${Math.max(value - breakpointBuffer, 0)}${unit})`;
 };
-const xsAndUp = () => `@media (min-width: ${breakpoints.xs})`;
-const smAndUp = () => `@media (min-width: ${breakpoints.sm})`;
-const mdAndUp = () => `@media (min-width: ${breakpoints.md})`;
-const lgAndUp = () => `@media (min-width: ${breakpoints.lg})`;
-const xlAndUp = () => `@media (min-width: ${breakpoints.xl})`;
-const xsAndDown = () => getMaxWidth(breakpoints.sm);
-const smAndDown = () => getMaxWidth(breakpoints.md);
-const mdAndDown = () => getMaxWidth(breakpoints.lg);
-const lgAndDown = () => getMaxWidth(breakpoints.xl);
+const xsAndUp = () => `@media (min-width: ${breakpointsEm.xs})`;
+const smAndUp = () => `@media (min-width: ${breakpointsEm.sm})`;
+const mdAndUp = () => `@media (min-width: ${breakpointsEm.md})`;
+const lgAndUp = () => `@media (min-width: ${breakpointsEm.lg})`;
+const xlAndUp = () => `@media (min-width: ${breakpointsEm.xl})`;
+const xsAndDown = () => getMaxWidth(breakpointsEm.sm);
+const smAndDown = () => getMaxWidth(breakpointsEm.md);
+const mdAndDown = () => getMaxWidth(breakpointsEm.lg);
+const lgAndDown = () => getMaxWidth(breakpointsEm.xl);
 const xlAndDown = () => "@media all";
 const mq = {
 	xsAndUp,
@@ -1804,65 +1815,86 @@ const useLockBodyScroll = (locked) => {
 	}, [locked]);
 };
 //#endregion
-//#region src/private/helpers/isClient/isClient.ts
-/**
-* @returns {boolean} - whether running in a browser environment
-*/
-const isClient = () => typeof window !== "undefined" && typeof document !== "undefined";
-//#endregion
-//#region src/hooks/useWindowSize/useWindowSize.ts
-const useWindowSize = (interval = 0) => {
-	const [dimensions, setDimensions] = useState({
-		width: isClient() ? window.innerWidth : 0,
-		height: isClient() ? window.innerHeight : 0
+//#region src/hooks/useMq/useMq.ts
+const reachedKeys = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const toFlags = ([sm, md, lg, xl]) => ({
+	isXlAndUp: xl,
+	isLgAndUp: lg,
+	isMdAndUp: md,
+	isSmAndUp: sm,
+	isXsAndUp: true,
+	isXsAndDown: !sm,
+	isSmAndDown: !md,
+	isMdAndDown: !lg,
+	isLgAndDown: !xl,
+	isXlAndDown: true
+});
+const readReached = () => reachedKeys.map((key) => window.innerWidth >= breakpoints[key]);
+const serverSnapshot = toFlags([
+	false,
+	false,
+	false,
+	false
+]);
+const subscribers = /* @__PURE__ */ new Set();
+let snapshotKey = "";
+let snapshot = serverSnapshot;
+const refresh = () => {
+	const reached = readReached();
+	const key = reached.join();
+	if (key === snapshotKey) return false;
+	snapshotKey = key;
+	snapshot = toFlags(reached);
+	return true;
+};
+const notifyIfChanged = () => {
+	if (refresh()) subscribers.forEach((subscriber) => {
+		subscriber();
 	});
-	useLayoutEffect(() => {
-		const updateDimensions = () => {
-			const { innerWidth: width, innerHeight: height } = window;
-			setDimensions((prev) => prev.width === width && prev.height === height ? prev : {
-				width,
-				height
-			});
-		};
-		const handleResize = debounce(interval, updateDimensions);
-		updateDimensions();
-		window.addEventListener("resize", handleResize);
-		return () => {
-			window.removeEventListener("resize", handleResize);
-			handleResize.cancel();
-		};
-	}, [interval]);
-	return dimensions;
 };
-//#endregion
-//#region src/hooks/useMq/useMq.ts
-const REM_SIZE = 16;
-const useMq = () => {
-	const { width } = useWindowSize();
-	const viewportWidth = width / REM_SIZE;
-	const isXsAndUp = true;
-	const isSmAndUp = viewportWidth >= Number.parseFloat(breakpoints.sm);
-	const isMdAndUp = viewportWidth >= Number.parseFloat(breakpoints.md);
-	const isLgAndUp = viewportWidth >= Number.parseFloat(breakpoints.lg);
-	return {
-		isXlAndUp: viewportWidth >= Number.parseFloat(breakpoints.xl),
-		isLgAndUp,
-		isMdAndUp,
-		isSmAndUp,
-		isXsAndUp,
-		isXsAndDown: viewportWidth < Number.parseFloat(breakpoints.sm),
-		isSmAndDown: viewportWidth < Number.parseFloat(breakpoints.md),
-		isMdAndDown: viewportWidth < Number.parseFloat(breakpoints.lg),
-		isLgAndDown: viewportWidth < Number.parseFloat(breakpoints.xl),
-		isXlAndDown: true
+const subscribe = (subscriber) => {
+	subscribers.add(subscriber);
+	if (subscribers.size === 1) window.addEventListener("resize", notifyIfChanged);
+	notifyIfChanged();
+	return () => {
+		subscribers.delete(subscriber);
+		if (subscribers.size === 0) window.removeEventListener("resize", notifyIfChanged);
 	};
 };
+const getSnapshot = () => {
+	if (subscribers.size === 0) refresh();
+	return snapshot;
+};
+/**
+* Returns which breakpoints the viewport is in. Components re-render only when a
+* breakpoint is crossed, and the returned object keeps its identity until then.
+*/
+const useMq = () => useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot);
+/**
+* Returns the largest breakpoint the viewport has reached.
+*/
+const useBreakpoint = () => {
+	const { isSmAndUp, isMdAndUp, isLgAndUp, isXlAndUp } = useMq();
+	return reachedKeys[[
+		isSmAndUp,
+		isMdAndUp,
+		isLgAndUp,
+		isXlAndUp
+	].lastIndexOf(true)] ?? "xs";
+};
 const useActiveMq = () => {
-	const mq = useMq();
-	return Object.keys(mq).filter((key) => {
-		const value = mq[key];
-		return isBoolean(value) && value;
-	});
+	const mqState = useMq();
+	return useMemo(() => {
+		return Object.keys(mqState).filter((key) => {
+			const value = mqState[key];
+			return isBoolean(value) && value;
+		});
+	}, [mqState]);
 };
 //#endregion
 //#region src/hooks/useOnClickOutside/useOnClickOutside.ts
@@ -2175,6 +2207,37 @@ const useToast = () => {
 	}, [toasterId]);
 };
 //#endregion
+//#region src/private/helpers/isClient/isClient.ts
+/**
+* @returns {boolean} - whether running in a browser environment
+*/
+const isClient = () => typeof window !== "undefined" && typeof document !== "undefined";
+//#endregion
+//#region src/hooks/useWindowSize/useWindowSize.ts
+const useWindowSize = (interval = 0) => {
+	const [dimensions, setDimensions] = useState({
+		width: isClient() ? window.innerWidth : 0,
+		height: isClient() ? window.innerHeight : 0
+	});
+	useLayoutEffect(() => {
+		const updateDimensions = () => {
+			const { innerWidth: width, innerHeight: height } = window;
+			setDimensions((prev) => prev.width === width && prev.height === height ? prev : {
+				width,
+				height
+			});
+		};
+		const handleResize = debounce(interval, updateDimensions);
+		updateDimensions();
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			handleResize.cancel();
+		};
+	}, [interval]);
+	return dimensions;
+};
+//#endregion
 //#region src/private/hooks/useGatedIcon/useGatedIcon.ts
 /** The icon marking a gated feature — `sparkle` unless `UIProvider` overrides it. */
 const useGatedIcon = () => useContext(GatedIconContext);
@@ -9262,6 +9325,112 @@ const RadioCardRoot = ({ children, disabled = false, id, isGated = false, name,
 	});
 };
 //#endregion
+//#region src/components/RadioCard/RadioCardIndicator.tsx
+const RadioCardIndicator = styled.div`
+  --wui-radio-card-indicator-size: 14px;
+  --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
+  --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
+
+  /* TODO: figure out radio / checkbox / switch colors */
+  --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
+
+  width: var(--wui-radio-card-indicator-size);
+  height: var(--wui-radio-card-indicator-size);
+  min-width: var(--wui-radio-card-indicator-size);
+  min-height: var(--wui-radio-card-indicator-size);
+  background-color: var(--wui-radio-card-indicator-background-color);
+  box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
+  border-radius: 100%;
+  position: relative;
+  cursor: pointer;
+  transition: border-color var(--wui-motion-duration-03) var(--wui-motion-ease);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background-color: var(--wui-radio-card-indicator-fill-color);
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  ${StyledCard}:has(input:checked) & {
+    --wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
+    --wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
+
+    &::after {
+      width: calc(var(--wui-radio-card-indicator-size) / 2);
+      height: calc(var(--wui-radio-card-indicator-size) / 2);
+    }
+  }
+
+  ${StyledCard}:has(input:disabled) & {
+    --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
+    --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
+  }
+`;
+RadioCardIndicator.displayName = "RadioCardIndicator_UI";
+//#endregion
+//#region src/components/RadioCard/RadioCardDefaultLayout.tsx
+const StyledCardContent$1 = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--wui-space-02);
+`;
+const StyledCardIcon$1 = styled.div`
+  display: contents;
+`;
+const StyledGatedIcon = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+`;
+const StyledIndicatorContainer$1 = styled.div`
+  height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
+  display: flex;
+  align-items: center;
+`;
+const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true, isGated = false }) => {
+	const gatedIcon = useGatedIcon();
+	return /* @__PURE__ */ jsxs(StyledCardContent$1, { children: [
+		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer$1, {
+			$hasIcon: isNotNil(icon),
+			children: /* @__PURE__ */ jsx(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" })
+		}) : null,
+		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon, {
+			"data-testid": "wui-radio-gated-icon",
+			children: /* @__PURE__ */ jsx(Icon, {
+				colorScheme: "purple",
+				"data-testid": "wui-icon-sparkle",
+				type: gatedIcon
+			})
+		}) : null,
+		/* @__PURE__ */ jsxs(Stack, {
+			gap: "space-02",
+			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon$1, {
+				"data-wui-radio-card-icon": true,
+				children: icon
+			}), /* @__PURE__ */ jsxs(Stack, {
+				gap: "space-01",
+				style: isNotNil(icon) ? { paddingLeft: 2 } : void 0,
+				children: [isNotNil(label) && /* @__PURE__ */ jsx(Text, {
+					variant: "label3",
+					children: /* @__PURE__ */ jsx("strong", { children: label })
+				}), isNotNil(description) && /* @__PURE__ */ jsx(Text, {
+					prominence: "secondary",
+					variant: "body3",
+					children: description
+				})]
+			})]
+		})
+	] });
+};
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
+//#endregion
 //#region src/components/CheckboxCard/CheckboxCardIndicator.tsx
 const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
 	fill: "inherit",
@@ -9323,33 +9492,27 @@ const CheckboxCardIndicator = (props) => /* @__PURE__ */ jsx(StyledIndicator, {
 CheckboxCardIndicator.displayName = "CheckboxCardIndicator_UI";
 //#endregion
 //#region src/components/CheckboxCard/CheckboxCardDefaultLayout.tsx
-const StyledCardContent$1 = styled.div`
+const StyledCardContent = styled.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-const StyledCardIcon$1 = styled.div`
+const StyledCardIcon = styled.div`
   display: contents;
 `;
-const StyledGatedIcon$1 = styled.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 1;
-`;
-const StyledIndicatorContainer$1 = styled.div`
+const StyledIndicatorContainer = styled.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
 `;
 const CheckboxCardDefaultLayout = ({ icon, label, description, showIndicator = true, isGated = false }) => {
 	const gatedIcon = useGatedIcon();
-	return /* @__PURE__ */ jsxs(StyledCardContent$1, { children: [
-		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer$1, {
+	return /* @__PURE__ */ jsxs(StyledCardContent, { children: [
+		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
 			$hasIcon: isNotNil(icon),
 			children: /* @__PURE__ */ jsx(CheckboxCardIndicator, { "data-testid": "wui-checkbox-card-indicator" })
 		}) : null,
-		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon$1, {
+		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon, {
 			"data-testid": "wui-checkbox-gated-icon",
 			children: /* @__PURE__ */ jsx(Icon, {
 				colorScheme: "purple",
@@ -9359,7 +9522,7 @@ const CheckboxCardDefaultLayout = ({ icon, label, description, showIndicator = t
 		}) : null,
 		/* @__PURE__ */ jsxs(Stack, {
 			gap: "space-02",
-			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon$1, {
+			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon, {
 				"data-wui-checkbox-card-icon": true,
 				children: icon
 			}), /* @__PURE__ */ jsxs(Stack, {
@@ -16289,112 +16452,6 @@ const RadioCardChildrenContainer = styled.div`
   flex: 1 1 auto;
 `;
 //#endregion
-//#region src/components/RadioCard/RadioCardIndicator.tsx
-const RadioCardIndicator = styled.div`
-  --wui-radio-card-indicator-size: 14px;
-  --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
-  --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
-
-  /* TODO: figure out radio / checkbox / switch colors */
-  --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
-
-  width: var(--wui-radio-card-indicator-size);
-  height: var(--wui-radio-card-indicator-size);
-  min-width: var(--wui-radio-card-indicator-size);
-  min-height: var(--wui-radio-card-indicator-size);
-  background-color: var(--wui-radio-card-indicator-background-color);
-  box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
-  border-radius: 100%;
-  position: relative;
-  cursor: pointer;
-  transition: border-color var(--wui-motion-duration-03) var(--wui-motion-ease);
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background-color: var(--wui-radio-card-indicator-fill-color);
-    border-radius: 100%;
-    transform: translate(-50%, -50%);
-  }
-
-  ${StyledCard}:has(input:checked) & {
-    --wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
-    --wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
-
-    &::after {
-      width: calc(var(--wui-radio-card-indicator-size) / 2);
-      height: calc(var(--wui-radio-card-indicator-size) / 2);
-    }
-  }
-
-  ${StyledCard}:has(input:disabled) & {
-    --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
-    --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
-  }
-`;
-RadioCardIndicator.displayName = "RadioCardIndicator_UI";
-//#endregion
-//#region src/components/RadioCard/RadioCardDefaultLayout.tsx
-const StyledCardContent = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  gap: var(--wui-space-02);
-`;
-const StyledCardIcon = styled.div`
-  display: contents;
-`;
-const StyledGatedIcon = styled.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 1;
-`;
-const StyledIndicatorContainer = styled.div`
-  height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
-  display: flex;
-  align-items: center;
-`;
-const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true, isGated = false }) => {
-	const gatedIcon = useGatedIcon();
-	return /* @__PURE__ */ jsxs(StyledCardContent, { children: [
-		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
-			$hasIcon: isNotNil(icon),
-			children: /* @__PURE__ */ jsx(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" })
-		}) : null,
-		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon, {
-			"data-testid": "wui-radio-gated-icon",
-			children: /* @__PURE__ */ jsx(Icon, {
-				colorScheme: "purple",
-				"data-testid": "wui-icon-sparkle",
-				type: gatedIcon
-			})
-		}) : null,
-		/* @__PURE__ */ jsxs(Stack, {
-			gap: "space-02",
-			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon, {
-				"data-wui-radio-card-icon": true,
-				children: icon
-			}), /* @__PURE__ */ jsxs(Stack, {
-				gap: "space-01",
-				style: isNotNil(icon) ? { paddingLeft: 2 } : void 0,
-				children: [isNotNil(label) && /* @__PURE__ */ jsx(Text, {
-					variant: "label3",
-					children: /* @__PURE__ */ jsx("strong", { children: label })
-				}), isNotNil(description) && /* @__PURE__ */ jsx(Text, {
-					prominence: "secondary",
-					variant: "body3",
-					children: description
-				})]
-			})]
-		})
-	] });
-};
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
-//#endregion
 //#region src/components/RadioCard/RadioCard.tsx
 /**
 * A `RadioCard` lets users select exactly one option from a set of visually rich, card-based choices.
@@ -16935,14 +16992,19 @@ const Sidebar = ({ children, ref, ...props }) => {
 	});
 };
 //#endregion
-//#region src/components/Sidebar/SidebarHeader.tsx
-const StyledSidebarHeader = styled.div`
+//#region src/components/Sidebar/sidebarSectionStyles.ts
+const sidebarSectionStyles = css`
   display: flex;
   flex-direction: column;
   width: 100%;
   padding-block: var(--wui-sidebar-padding-block);
   padding-inline: var(--wui-sidebar-padding-inline);
 `;
+//#endregion
+//#region src/components/Sidebar/SidebarHeader.tsx
+const StyledSidebarHeader = styled.div`
+  ${sidebarSectionStyles}
+`;
 const SidebarHeader = ({ children }) => {
 	return /* @__PURE__ */ jsx(StyledSidebarHeader, {
 		"data-wui-sidebar-header": true,
@@ -16953,11 +17015,7 @@ SidebarHeader.displayName = "SidebarHeader_UI";
 //#endregion
 //#region src/components/Sidebar/SidebarFooter.tsx
 const StyledSidebarFooter = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-block: var(--wui-sidebar-padding-block);
-  padding-inline: var(--wui-sidebar-padding-inline);
+  ${sidebarSectionStyles}
 `;
 const SidebarFooter = ({ children }) => {
 	return /* @__PURE__ */ jsx(StyledSidebarFooter, {
@@ -18159,6 +18217,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxCard, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DOCUMENT_COLOR_MODE_ATTRIBUTE, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, IconChip, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, TileButton, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorModeOptions, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, documentColorModeOptions, getBackgroundGradient, getDocumentColorMode, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, setDocumentColorMode, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useDocumentColorMode, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxCard, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DOCUMENT_COLOR_MODE_ATTRIBUTE, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, IconChip, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, TileButton, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, breakpoints, breakpointsEm, buildTimeDuration, calculateContrast, coerceToBoolean, colorModeOptions, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, documentColorModeOptions, getBackgroundGradient, getDocumentColorMode, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, setDocumentColorMode, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useBreakpoint, useClipboard, useDocumentColorMode, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map