@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/alert.js

@@ -0,0 +1,114 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { Typography } from "./typography.js";
+import { Loader } from "./loader.js";
+import { alertDefinition } from "./status/Alert/alert.cva.js";
+import { statusIconDefinition, statusSeparatorDefinition } from "./status/shared/status.cva.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/status/Alert/Alert.tsx
+const Alert = (t0) => {
+	const $ = c(31);
+	const { variant, color, text, isLoading: t1, rightContent, hasSeparator, icon: Icon, className } = t0;
+	const isLoading = t1 === void 0 ? false : t1;
+	const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
+	let t2;
+	if ($[0] !== alertCva || $[1] !== className || $[2] !== color || $[3] !== variant) {
+		t2 = alertCva({
+			variant,
+			color,
+			className
+		});
+		$[0] = alertCva;
+		$[1] = className;
+		$[2] = color;
+		$[3] = variant;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== isLoading) {
+		t3 = isLoading && /* @__PURE__ */ jsx(Loader, {
+			size: "default",
+			className: "shrink-0"
+		});
+		$[5] = isLoading;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
+		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
+			variant,
+			color
+		}) });
+		$[7] = Icon;
+		$[8] = color;
+		$[9] = iconCva;
+		$[10] = isLoading;
+		$[11] = variant;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== text) {
+		t5 = /* @__PURE__ */ jsx(Typography, {
+			size: "label-2",
+			children: text
+		});
+		$[13] = text;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== color || $[20] !== hasSeparator || $[21] !== rightContent || $[22] !== separatorCva || $[23] !== variant) {
+		t7 = !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
+			variant,
+			color
+		}) }), /* @__PURE__ */ jsx("div", {
+			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
+			children: rightContent
+		})] });
+		$[19] = color;
+		$[20] = hasSeparator;
+		$[21] = rightContent;
+		$[22] = separatorCva;
+		$[23] = variant;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== t6 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-auto flex-col items-center md:flex-row",
+			children: [t6, t7]
+		});
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== t2 || $[29] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			children: t8
+		});
+		$[28] = t2;
+		$[29] = t8;
+		$[30] = t9;
+	} else t9 = $[30];
+	return t9;
+};
+//#endregion
+export { Alert };

package/dist/components/autocomplete.d.ts

@@ -0,0 +1,16 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps } from "./inputs/Selection/shared/select.types.js";
+import { SelectBaseProps } from "./inputs/Selection/shared/SelectBase.js";
+import { OmitDiscriminatedUnion } from "../types/common.js";
+import { ReactElement } from "react";
+import { Key } from "react-aria-components";
+//#region src/components/inputs/Selection/Autocomplete/Autocomplete.d.ts
+type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable"> & {
+  renderStaticInput?: boolean;
+};
+type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
+declare function AutocompleteComponent<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: AutocompleteProps<TKey, TInitialSelectItem>): ReactElement;
+declare function AutocompleteComponent<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;
+declare const Autocomplete: typeof AutocompleteComponent;
+//#endregion
+export { Autocomplete, AutocompleteProps, ControlledAutocompleteProps };

package/dist/components/{inputs/Selection/Autocomplete/Autocomplete.js → autocomplete.js}

@@ -1,37 +1,28 @@
-import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { FieldController } from "../../shared/form.binding.js";
-import { InputFrame } from "../../Skeleton/InputFrame.js";
-import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-import { selectInputTagsContentWrapperDefinition } from "../shared/selectInput.cva.js";
-import { SelectBase } from "../shared/SelectBase.js";
-import { StaticSelectTrailingContent } from "../shared/StaticSelectTrailingContent.js";
-import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { InputFrame } from "./inputs/Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "./inputs/shared/useStaticInputHandoff.js";
+import { selectInputTagsContentWrapperDefinition } from "./inputs/Selection/shared/selectInput.cva.js";
+import { SelectBase } from "./inputs/Selection/shared/SelectBase.js";
+import { StaticSelectTrailingContent } from "./inputs/Selection/shared/StaticSelectTrailingContent.js";
+import { getStaticSelectValue } from "./inputs/Selection/shared/staticSelect.utils.js";
 import { clsx } from "clsx";
-import { useRef, useState } from "react";
-import { c } from "react/compiler-runtime";
+import { memo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-function AutocompleteInner(t0) {
-	const $ = c(8);
-	const { renderStaticInput, isFormControlDisabled, ...props } = t0;
+function AutocompleteInner({ renderStaticInput, isFormControlDisabled, ...props }) {
 	const ui = UIConfig.useConfig();
 	const selectInputTagsContentWrapperCva = UIOverrides.useCva("select.tagsContentWrapperCva", selectInputTagsContentWrapperDefinition);
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const rootRef = useRef(null);
-	let t1;
-	if ($[0] !== renderInput) {
-		t1 = {
-			inputRef: rootRef,
-			renderInput,
-			setRenderInput,
-			getFocusTarget: _temp
-		};
-		$[0] = renderInput;
-		$[1] = t1;
-	} else t1 = $[1];
-	const { renderRealInput, replayStaticInputChange, replayStaticInputPress } = useStaticInputHandoff(t1);
+	const { renderRealInput, replayStaticInputChange, replayStaticInputPress } = useStaticInputHandoff({
+		inputRef: rootRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (root) => root.querySelector("input, [data-type='select-trigger'], button, [tabindex]")
+	});
 	const currentValue = props.value;
 	if (!renderInput && !!props.customTrigger) setRenderInput(true);
 	if (!renderInput) {
@@ -72,22 +63,13 @@ function AutocompleteInner(t0) {
 			dataHasSelection: !isEmpty,
 			dataHasSearch: false
 		};
-		const t2 = isDisabled;
-		const t3 = clsx("w-full", props.containerClassName);
-		const t4 = clsx(props.className, props.inputClassName);
-		let t5;
-		if ($[2] !== selectInputTagsContentWrapperCva) {
-			t5 = selectInputTagsContentWrapperCva({ isSearchable: true });
-			$[2] = selectInputTagsContentWrapperCva;
-			$[3] = t5;
-		} else t5 = $[3];
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isDisabled: t2,
+			isDisabled,
 			isLoading: false,
-			className: t3,
-			inputClassName: t4,
-			contentWrapperClassName: t5,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
+			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable: true }),
 			contentGroup: "select",
 			labelPlacement: "content-row",
 			dataAttributes,
@@ -115,40 +97,27 @@ function AutocompleteInner(t0) {
 			})] })
 		});
 	}
-	const T0 = SelectBase;
-	const t2 = mergeRefs(props.ref, rootRef);
-	let t3;
-	if ($[4] !== T0 || $[5] !== props || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsx(T0, {
-			...props,
-			ref: t2,
-			isSearchable: true
-		});
-		$[4] = T0;
-		$[5] = props;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
-}
-function _temp(root) {
-	return root.querySelector("input, [data-type='select-trigger'], button, [tabindex]");
+	return /* @__PURE__ */ jsx(SelectBase, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef),
+		isSearchable: true
+	});
 }
-function Autocomplete({ renderStaticInput, ...props }) {
+function AutocompleteComponent({ renderStaticInput, ...props }) {
 	if ("field" in props && props.field) {
 		const { ignoreInputValueFiltering = true, field, ref, ...innerProps } = props;
 		const controlWithOptions = field.form;
 		return /* @__PURE__ */ jsx(FieldController, {
 			control: field.form,
 			name: field.name,
-			render: ({ field: field_0, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(AutocompleteInner, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(AutocompleteInner, {
 				...innerProps,
-				ref: mergeRefs(ref, field_0.ref),
-				value: field_0.value,
-				onChange: field_0.onChange,
-				onBlur: field_0.onBlur,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
 				isDirty,
-				isDisabled: field_0.disabled || props.isDisabled,
+				isDisabled: field.disabled || props.isDisabled,
 				isFormControlDisabled: !!controlWithOptions._options?.disabled,
 				error: props.error ?? error?.message,
 				ignoreInputValueFiltering,
@@ -161,5 +130,6 @@ function Autocomplete({ renderStaticInput, ...props }) {
 		renderStaticInput
 	});
 }
+const Autocomplete = memo(AutocompleteComponent);
 //#endregion
 export { Autocomplete };

package/dist/components/bottom-sheet.d.ts

@@ -0,0 +1,34 @@
+import { TypographyVariantProps } from "./text/Typography/typography.cva.js";
+import { ReactNode, RefObject } from "react";
+//#region src/components/overlays/BottomSheet/BottomSheet.d.ts
+type BottomSheetState = "closed" | "opening" | "opened" | "closing";
+interface BottomSheetBaseProps {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  onStateChange?: (state: BottomSheetState) => void;
+  isDismissable?: boolean;
+  isScrollable?: boolean;
+  hideHeader?: boolean;
+  hideThumb?: boolean;
+  height?: "auto" | "full";
+  label?: string;
+  portalContainerRef?: RefObject<HTMLElement>;
+  children: ReactNode | ((close: () => void) => ReactNode);
+  footer?: ReactNode;
+  sheetMarginTop?: number;
+  sheetMarginBottom?: number;
+  /** Min downward drag distance (px) to allow close on release. Increase to require a longer drag. */
+  closeDragThreshold?: number;
+  /** Min downward velocity to close on flick. Increase to require a more intentional swipe. */
+  closeVelocityThreshold?: number;
+  shouldCloseOnInteractOutside?: () => boolean;
+  containerClassName?: string;
+  overlayClassName?: string;
+  headerTypography?: TypographyVariantProps;
+}
+interface BottomSheetProps extends BottomSheetBaseProps {
+  trigger?: ReactNode;
+}
+declare const BottomSheet: ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BottomSheet, BottomSheetProps };

package/dist/components/{overlays/BottomSheet/BottomSheet.js → bottom-sheet.js}

@@ -1,24 +1,24 @@
-import { UIConfig } from "../../../config/uiConfig.context.js";
-import { BottomSheetHeader } from "./BottomSheetHeader.js";
-import { useStateAndRef } from "../../../hooks/useStateAndRef.js";
-import { DomUtils } from "../../../utils/dom.utils.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { BottomSheetHeader } from "./overlays/BottomSheet/BottomSheetHeader.js";
+import { useStateAndRef } from "../hooks/useStateAndRef.js";
+import { DomUtils } from "../utils/dom.utils.js";
+import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
-import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
 import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
 //#region src/components/overlays/BottomSheet/BottomSheet.tsx
-var MotionModal = motion.create(Modal);
-var MotionModalOverlay = motion.create(ModalOverlay);
-var inertiaTransition = {
+const MotionModal = motion.create(Modal);
+const MotionModalOverlay = motion.create(ModalOverlay);
+const inertiaTransition = {
 	type: "inertia",
 	bounceStiffness: 300,
 	bounceDamping: 40,
 	timeConstant: 300
 };
-var staticTransition = {
+const staticTransition = {
 	duration: .5,
 	ease: [
 		.32,
@@ -27,8 +27,8 @@ var staticTransition = {
 		1
 	]
 };
-var KEYBOARD_INSET_THRESHOLD = 48;
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
+const KEYBOARD_INSET_THRESHOLD = 48;
+const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
 	const uiConfig = UIConfig.useConfig();
 	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
 	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
@@ -36,9 +36,11 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	const headerTypography = headerTypographyProp ?? uiConfig.bottomSheet.headerTypography;
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
+		const sh = viewport.height - sheetMarginTop;
+		const browserHeight = typeof window === "undefined" ? viewport.height : window.innerHeight;
 		return {
-			sheetHeight: viewport.height - sheetMarginTop,
-			windowHeight: Math.max(window.innerHeight, viewport.height) - sheetMarginTop
+			sheetHeight: sh,
+			windowHeight: Math.max(browserHeight, viewport.height) - sheetMarginTop
 		};
 	}, [viewport.height, sheetMarginTop]);
 	const y = useMotionValue(sheetHeight);
@@ -56,6 +58,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 			setKeyboardInset(0);
 			return;
 		}
+		if (typeof window === "undefined") return;
 		const vv = window.visualViewport;
 		if (!vv) return;
 		const update = () => {
@@ -221,7 +224,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		})]
 	}) });
 };
-var BottomSheet = (t0) => {
+const BottomSheet = (t0) => {
 	const $ = c(30);
 	let children;
 	let isOpen;

package/dist/components/breadcrumbs.d.ts

@@ -0,0 +1,19 @@
+import { LinkNavigationProps } from "./link.js";
+import { FC, SVGProps } from "react";
+import { Key } from "react-aria-components";
+//#region src/components/Breadcrumbs/Breadcrumbs.d.ts
+interface BreadcrumbItem {
+  id: Key;
+  label: string;
+  link?: LinkNavigationProps;
+  icon?: FC<SVGProps<SVGSVGElement>>;
+}
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  className?: string;
+  onAction?: (id: Key) => void;
+  iconOnly?: boolean;
+}
+declare const Breadcrumbs: ({ items, className, onAction, iconOnly }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps };

package/dist/components/breadcrumbs.js

@@ -0,0 +1,263 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition } from "./Breadcrumbs/breadcrumbs.cva.js";
+import { MenuDesktop } from "./Menu/MenuDesktop.js";
+import { Typography } from "./typography.js";
+import { Tooltip as Tooltip$1 } from "./tooltip.js";
+import { LinkContext } from "../config/link.context.js";
+import { ChevronRight } from "lucide-react";
+import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Breadcrumb, Breadcrumbs as Breadcrumbs$1, Button, Link as Link$1 } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Breadcrumbs/Breadcrumbs.tsx
+const Breadcrumbs = (t0) => {
+	const $ = c(58);
+	const { items, className, onAction, iconOnly: t1 } = t0;
+	const iconOnly = t1 === void 0 ? false : t1;
+	const breadcrumbsCva = UIOverrides.useCva("breadcrumbs.cva", breadcrumbsDefinition);
+	const breadcrumbItem = UIOverrides.useCva("breadcrumbs.itemCva", breadcrumbItemDefinition);
+	const breadcrumbSegmentCva = UIOverrides.useCva("breadcrumbs.segmentCva", breadcrumbSegmentDefinition);
+	const breadcrumbChevronCva = UIOverrides.useCva("breadcrumbs.chevronCva", breadcrumbChevronDefinition);
+	const breadcrumbIconCva = UIOverrides.useCva("breadcrumbs.iconCva", breadcrumbIconDefinition);
+	const containerRef = useRef(null);
+	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
+	let t2;
+	if ($[0] !== items.length) {
+		t2 = () => {
+			if (items.length <= 2) {
+				setIsOverflowing(false);
+				return;
+			}
+			const container = containerRef.current;
+			if (!container) return;
+			const resizeObserver = new ResizeObserver(() => {
+				setIsOverflowing(container.scrollWidth > container.clientWidth);
+			});
+			resizeObserver.observe(container);
+			return () => resizeObserver.disconnect();
+		};
+		$[0] = items.length;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== items) {
+		t3 = [items];
+		$[2] = items;
+		$[3] = t3;
+	} else t3 = $[3];
+	useLayoutEffect(t2, t3);
+	const isReady = isOverflowing !== null;
+	const hiddenItems = items.length > 2 ? items.slice(1, -1) : [];
+	const firstItem = items[0];
+	const lastItem = items[items.length - 1];
+	const LinkComponent = LinkContext.useLinkContext()?.LinkComponent ?? Link$1;
+	let t4;
+	if ($[4] !== LinkComponent || $[5] !== breadcrumbIconCva || $[6] !== breadcrumbItem) {
+		t4 = (item, isCurrent, iconOnly_0) => /* @__PURE__ */ jsxs(LinkComponent, {
+			...item.link,
+			className: breadcrumbItem({ isCurrent }),
+			children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
+				className: breadcrumbIconCva({}),
+				"aria-label": item.label
+			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
+				variant: "default",
+				size: "label-3",
+				children: item.label
+			})]
+		});
+		$[4] = LinkComponent;
+		$[5] = breadcrumbIconCva;
+		$[6] = breadcrumbItem;
+		$[7] = t4;
+	} else t4 = $[7];
+	const renderBreadcrumbLink = t4;
+	if (isOverflowing === true && items.length > 2) {
+		const menuItems = hiddenItems.map(_temp);
+		const renderEllipsis = () => /* @__PURE__ */ jsx(MenuDesktop, {
+			trigger: /* @__PURE__ */ jsx(Tooltip$1, {
+				text: hiddenItems.map(_temp2).join(", "),
+				children: /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Show hidden breadcrumbs",
+					className: breadcrumbItem({
+						isCurrent: false,
+						isEllipsis: true
+					}),
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: "label-3",
+						children: "..."
+					})
+				})
+			}),
+			items: menuItems,
+			onAction: onAction ? (key) => onAction(key) : void 0
+		});
+		let t5;
+		if ($[8] !== breadcrumbsCva || $[9] !== className) {
+			t5 = clsx(breadcrumbsCva({}), className);
+			$[8] = breadcrumbsCva;
+			$[9] = className;
+			$[10] = t5;
+		} else t5 = $[10];
+		const t6 = firstItem.id;
+		let t7;
+		if ($[11] !== breadcrumbSegmentCva) {
+			t7 = breadcrumbSegmentCva({});
+			$[11] = breadcrumbSegmentCva;
+			$[12] = t7;
+		} else t7 = $[12];
+		let t8;
+		if ($[13] !== firstItem || $[14] !== iconOnly || $[15] !== renderBreadcrumbLink) {
+			t8 = renderBreadcrumbLink(firstItem, false, iconOnly);
+			$[13] = firstItem;
+			$[14] = iconOnly;
+			$[15] = renderBreadcrumbLink;
+			$[16] = t8;
+		} else t8 = $[16];
+		let t9;
+		if ($[17] !== breadcrumbChevronCva) {
+			t9 = breadcrumbChevronCva({});
+			$[17] = breadcrumbChevronCva;
+			$[18] = t9;
+		} else t9 = $[18];
+		let t10;
+		if ($[19] !== t9) {
+			t10 = /* @__PURE__ */ jsx(ChevronRight, { className: t9 });
+			$[19] = t9;
+			$[20] = t10;
+		} else t10 = $[20];
+		let t11;
+		if ($[21] !== firstItem.id || $[22] !== t10 || $[23] !== t7 || $[24] !== t8) {
+			t11 = /* @__PURE__ */ jsxs(Breadcrumb, {
+				id: t6,
+				className: t7,
+				children: [t8, t10]
+			});
+			$[21] = firstItem.id;
+			$[22] = t10;
+			$[23] = t7;
+			$[24] = t8;
+			$[25] = t11;
+		} else t11 = $[25];
+		let t12;
+		if ($[26] !== breadcrumbSegmentCva) {
+			t12 = breadcrumbSegmentCva({});
+			$[26] = breadcrumbSegmentCva;
+			$[27] = t12;
+		} else t12 = $[27];
+		const t13 = renderEllipsis();
+		let t14;
+		if ($[28] !== breadcrumbChevronCva) {
+			t14 = breadcrumbChevronCva({});
+			$[28] = breadcrumbChevronCva;
+			$[29] = t14;
+		} else t14 = $[29];
+		let t15;
+		if ($[30] !== t14) {
+			t15 = /* @__PURE__ */ jsx(ChevronRight, { className: t14 });
+			$[30] = t14;
+			$[31] = t15;
+		} else t15 = $[31];
+		const t16 = lastItem.id;
+		let t17;
+		if ($[32] !== breadcrumbSegmentCva) {
+			t17 = breadcrumbSegmentCva({});
+			$[32] = breadcrumbSegmentCva;
+			$[33] = t17;
+		} else t17 = $[33];
+		let t18;
+		if ($[34] !== lastItem || $[35] !== renderBreadcrumbLink) {
+			t18 = renderBreadcrumbLink(lastItem, true);
+			$[34] = lastItem;
+			$[35] = renderBreadcrumbLink;
+			$[36] = t18;
+		} else t18 = $[36];
+		let t19;
+		if ($[37] !== lastItem.id || $[38] !== t17 || $[39] !== t18) {
+			t19 = /* @__PURE__ */ jsx(Breadcrumb, {
+				id: t16,
+				className: t17,
+				children: t18
+			});
+			$[37] = lastItem.id;
+			$[38] = t17;
+			$[39] = t18;
+			$[40] = t19;
+		} else t19 = $[40];
+		return /* @__PURE__ */ jsxs(Breadcrumbs$1, {
+			onAction,
+			className: t5,
+			children: [
+				t11,
+				/* @__PURE__ */ jsxs(Breadcrumb, {
+					id: "ellipsis",
+					className: t12,
+					children: [t13, t15]
+				}),
+				t19
+			]
+		});
+	}
+	let t5;
+	if ($[41] !== breadcrumbsCva || $[42] !== className) {
+		t5 = clsx(breadcrumbsCva({}), className);
+		$[41] = breadcrumbsCva;
+		$[42] = className;
+		$[43] = t5;
+	} else t5 = $[43];
+	const t6 = isReady ? "visible" : "hidden";
+	let t7;
+	if ($[44] !== t6) {
+		t7 = { visibility: t6 };
+		$[44] = t6;
+		$[45] = t7;
+	} else t7 = $[45];
+	let t8;
+	if ($[46] !== breadcrumbChevronCva || $[47] !== breadcrumbSegmentCva || $[48] !== iconOnly || $[49] !== items[0] || $[50] !== renderBreadcrumbLink) {
+		t8 = (item_1) => /* @__PURE__ */ jsx(Breadcrumb, {
+			id: item_1.id,
+			className: breadcrumbSegmentCva({}),
+			children: (t9) => {
+				const { isCurrent: isCurrent_0 } = t9;
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(ChevronRight, { className: breadcrumbChevronCva({}) })] });
+			}
+		});
+		$[46] = breadcrumbChevronCva;
+		$[47] = breadcrumbSegmentCva;
+		$[48] = iconOnly;
+		$[49] = items[0];
+		$[50] = renderBreadcrumbLink;
+		$[51] = t8;
+	} else t8 = $[51];
+	let t9;
+	if ($[52] !== items || $[53] !== onAction || $[54] !== t5 || $[55] !== t7 || $[56] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Breadcrumbs$1, {
+			ref: containerRef,
+			items,
+			onAction,
+			className: t5,
+			style: t7,
+			children: t8
+		});
+		$[52] = items;
+		$[53] = onAction;
+		$[54] = t5;
+		$[55] = t7;
+		$[56] = t8;
+		$[57] = t9;
+	} else t9 = $[57];
+	return t9;
+};
+function _temp(item_0) {
+	return {
+		id: item_0.id,
+		label: item_0.label,
+		link: item_0.link
+	};
+}
+function _temp2(i) {
+	return i.label;
+}
+//#endregion
+export { Breadcrumbs };

package/dist/components/button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonVariantProps } from "./buttons/Button/button.cva.js";
+import { Button, ButtonProps } from "./buttons/Button/Button.js";
+export { Button, type ButtonProps, type ButtonVariantProps };

package/dist/components/button.js

@@ -0,0 +1,2 @@
+import { Button } from "./buttons/Button/Button.js";
+export { Button };