@povio/ui 2.1.20 → 2.2.0

package/README.md

@@ -32,7 +32,7 @@ This is required for buttons to behave as expected. It is based on [Tailwind Upg
 In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
 In your globals.css add (make sure path is correct):
 ```css
-@source "../../node_modules/@povio/ui/dist";
+@source "../../../../node_modules/@povio/ui/dist";
 ```
 
 ### React Aria

package/dist/Accordion.js

@@ -0,0 +1,32 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { accordionCva } from "./accordion.cva.js";
+import { AccordionItem } from "./AccordionItem.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DisclosureGroup } from "react-aria-components";
+const Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }) => {
+	return /* @__PURE__ */ jsx(DisclosureGroup, {
+		allowsMultipleExpanded,
+		expandedKeys,
+		defaultExpandedKeys,
+		onExpandedChange,
+		className: clsx((UIStyle.useConfig()?.accordion?.cva ?? accordionCva)({
+			className,
+			variant,
+			singleItem: items.length === 1
+		})),
+		isDisabled: disabled,
+		children: items.map((item) => /* @__PURE__ */ jsx(AccordionItem, {
+			id: item.id,
+			heading: item.heading,
+			subheading: item.subheading,
+			icon: item.icon,
+			variant,
+			actionPosition,
+			disabled: item.disabled || disabled,
+			isSingle: items.length === 1,
+			children: item.children
+		}, item.id))
+	});
+};
+export { Accordion };

package/dist/AccordionItem.js

@@ -0,0 +1,62 @@
+import { ChevronDownIcon } from "./ChevronDown.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { accordionChevronCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva } from "./accordion.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
+const AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
+	const uiStyle = UIStyle.useConfig();
+	const itemCva = uiStyle?.accordion?.itemCva ?? accordionItemCva;
+	const triggerCva = uiStyle?.accordion?.triggerCva ?? accordionTriggerCva;
+	const headingCva = uiStyle?.accordion?.headingCva ?? accordionHeadingCva;
+	const headingTitleCva = uiStyle?.accordion?.headingTitleCva ?? accordionHeadingTitleCva;
+	const headingSubtitleCva = uiStyle?.accordion?.headingSubtitleCva ?? accordionHeadingSubtitleCva;
+	const chevronCva = uiStyle?.accordion?.chevronCva ?? accordionChevronCva;
+	const iconCva = uiStyle?.accordion?.iconCva ?? accordionIconCva;
+	const panelCva = uiStyle?.accordion?.panelCva ?? accordionPanelCva;
+	const panelContentCva = uiStyle?.accordion?.panelContentCva ?? accordionPanelContentCva;
+	return /* @__PURE__ */ jsx(Disclosure, {
+		id,
+		className: itemCva({
+			variant,
+			singleItem: isSingle
+		}),
+		isDisabled: disabled,
+		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
+			slot: "trigger",
+			className: triggerCva({
+				variant,
+				actionPosition,
+				disabled
+			}),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: headingCva({}),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
+					children: [
+						Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
+						/* @__PURE__ */ jsx(Typography, {
+							size: "label-2",
+							variant: "default",
+							className: headingTitleCva({}),
+							children: heading
+						}),
+						subheading && /* @__PURE__ */ jsx(Typography, {
+							size: "label-3",
+							variant: "default",
+							className: headingSubtitleCva({}),
+							children: subheading
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
+		}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
+			className: panelCva({ isExpanded }),
+			children: /* @__PURE__ */ jsx("div", {
+				className: panelContentCva({}),
+				children
+			})
+		})] })
+	});
+};
+export { AccordionItem };

package/dist/Alert.js

@@ -1,6 +1,6 @@
-import { Loader } from "./Loader.js";
 import { UIStyle } from "./uiStyle.context.js";
 import { Typography } from "./Typography.js";
+import { Loader } from "./Loader.js";
 import { alert } from "./alert.cva.js";
 import { statusIcon, statusSeparator } from "./status.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/ArrowDropDown.js

@@ -7,7 +7,7 @@ const ArrowDropDownIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "m12 15-5-5h10z"
+		d: "M7.7 10.65q0-.2.137-.35.138-.15.363-.15h7.6q.224 0 .363.15.137.15.137.35 0 .05-.15.35l-3.625 3.625a.8.8 0 0 1-.25.175.7.7 0 0 1-.275.05.7.7 0 0 1-.275-.05.8.8 0 0 1-.25-.175L7.85 11a.47.47 0 0 1-.15-.35"
 	})
 });
 export { ArrowDropDownIcon };

package/dist/ArrowDropUp.js

@@ -7,7 +7,7 @@ const ArrowDropUpIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "m7 14 5-5 5 5z"
+		d: "M16.3 13.35q0 .2-.137.35a.47.47 0 0 1-.363.15H8.2q-.224 0-.363-.15a.5.5 0 0 1-.137-.35q0-.05.15-.35l3.625-3.625a.8.8 0 0 1 .25-.175.7.7 0 0 1 .275-.05q.15 0 .275.05a.8.8 0 0 1 .25.175L16.15 13a.47.47 0 0 1 .15.35"
 	})
 });
 export { ArrowDropUpIcon };

package/dist/ArrowLeft.js

@@ -7,7 +7,7 @@ const ArrowLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "m14 17-5-5 5-5z"
+		d: "M13.35 7.7q.2 0 .35.138.15.137.15.362v7.6q0 .225-.15.363a.5.5 0 0 1-.35.137q-.05 0-.35-.15l-3.625-3.625a.8.8 0 0 1-.175-.25.7.7 0 0 1-.05-.275q0-.15.05-.275a.8.8 0 0 1 .175-.25L13 7.85a.47.47 0 0 1 .35-.15"
 	})
 });
 export { ArrowLeftIcon };

package/dist/ArrowRight.js

@@ -7,7 +7,7 @@ const ArrowRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "M10 17V7l5 5z"
+		d: "M10.65 16.3a.5.5 0 0 1-.35-.137.47.47 0 0 1-.15-.363V8.2q0-.224.15-.362a.5.5 0 0 1 .35-.138q.05 0 .35.15l3.625 3.625a.8.8 0 0 1 .175.25q.05.126.05.275t-.05.275a.8.8 0 0 1-.175.25L11 16.15a.47.47 0 0 1-.35.15"
 	})
 });
 export { ArrowRightIcon };

package/dist/BottomSheet.js

@@ -2,8 +2,8 @@ import { react_exports } from "./react.js";
 import { DomUtils } from "./dom.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
 var MotionModal = react_exports.motion.create(Modal);
 var MotionModalOverlay = react_exports.motion.create(ModalOverlay);
@@ -73,7 +73,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			exit: { opacity: 0 }
 		}), /* @__PURE__ */ jsx(MotionModal, {
 			isDismissable: true,
-			className: clsx("pointer-events-none flex w-full flex-col items-stretch justify-end outline-none will-change-transform", isScrollable ? "h-auto" : "h-full"),
+			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
 			animate: {
 				y: 0,
 				opacity: 1
@@ -143,13 +143,13 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 								tabIndex: -1
 							}),
 							/* @__PURE__ */ jsx("div", {
-								className: clsx("flex min-h-0 grow flex-col items-stretch", isScrollable ? "shrink-0" : "shrink"),
+								className: "flex max-h-full min-h-0 flex-col items-stretch",
 								ref: containerRef,
 								children: typeof children === "function" ? children(close) : children
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "shrink-0",
-								style: { height: `${footerHeight + sheetMarginBottom}px` }
+								style: { height: `${footerHeight + (isScrollable ? 0 : sheetMarginBottom)}px` }
 							}),
 							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
 						]

package/dist/Breadcrumbs.js

@@ -0,0 +1,111 @@
+import { ChevronRightIcon } from "./ChevronRight.js";
+import { breadcrumbChevron, breadcrumbIcon, breadcrumbItem, breadcrumbSegment, breadcrumbsCva } from "./breadcrumbs.cva.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { MenuDesktop } from "./MenuDesktop.js";
+import { Typography } from "./Typography.js";
+import { Tooltip as Tooltip$1 } from "./Tooltip.js";
+import { LinkContext } from "./link.context.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Breadcrumb, Breadcrumbs, Button, Link } from "react-aria-components";
+const Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
+	const uiStyle = UIStyle.useConfig();
+	const breadcrumbsCva$1 = uiStyle?.breadcrumbs?.cva ?? breadcrumbsCva;
+	const breadcrumbItem$1 = uiStyle?.breadcrumbs?.itemCva ?? breadcrumbItem;
+	const breadcrumbSegmentCva = uiStyle?.breadcrumbs?.segmentCva ?? breadcrumbSegment;
+	const breadcrumbChevronCva = uiStyle?.breadcrumbs?.chevronCva ?? breadcrumbChevron;
+	const breadcrumbIconCva = uiStyle?.breadcrumbs?.iconCva ?? breadcrumbIcon;
+	const containerRef = useRef(null);
+	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
+	useLayoutEffect(() => {
+		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();
+	}, [items]);
+	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;
+	const renderBreadcrumbLink = (item, isCurrent, iconOnly$1) => /* @__PURE__ */ jsxs(LinkComponent, {
+		href: item.href,
+		className: breadcrumbItem$1({ isCurrent }),
+		children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
+			className: breadcrumbIconCva({}),
+			"aria-label": item.label
+		}), !iconOnly$1 && /* @__PURE__ */ jsx(Typography, {
+			variant: "default",
+			size: "label-3",
+			children: item.label
+		})]
+	});
+	if (isOverflowing === true && items.length > 2) {
+		const menuItems = hiddenItems.map((item) => ({
+			id: item.id,
+			label: item.label,
+			href: item.href
+		}));
+		const renderEllipsis = () => /* @__PURE__ */ jsx(MenuDesktop, {
+			trigger: /* @__PURE__ */ jsx(Tooltip$1, {
+				text: hiddenItems.map((i) => i.label).join(", "),
+				children: /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Show hidden breadcrumbs",
+					className: breadcrumbItem$1({
+						isCurrent: false,
+						isEllipsis: true
+					}),
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: "label-3",
+						children: "..."
+					})
+				})
+			}),
+			items: menuItems,
+			onAction: onAction ? (key) => onAction(key) : void 0
+		});
+		return /* @__PURE__ */ jsxs(Breadcrumbs, {
+			onAction,
+			className: clsx(breadcrumbsCva$1({}), className),
+			children: [
+				/* @__PURE__ */ jsxs(Breadcrumb, {
+					id: firstItem.id,
+					className: breadcrumbSegmentCva({}),
+					children: [renderBreadcrumbLink(firstItem, false, iconOnly), /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })]
+				}),
+				/* @__PURE__ */ jsxs(Breadcrumb, {
+					id: "ellipsis",
+					className: breadcrumbSegmentCva({}),
+					children: [renderEllipsis(), /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })]
+				}),
+				/* @__PURE__ */ jsx(Breadcrumb, {
+					id: lastItem.id,
+					className: breadcrumbSegmentCva({}),
+					children: renderBreadcrumbLink(lastItem, true)
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(Breadcrumbs, {
+		ref: containerRef,
+		items,
+		onAction,
+		className: clsx(breadcrumbsCva$1({}), className),
+		style: { visibility: isReady ? "visible" : "hidden" },
+		children: (item) => /* @__PURE__ */ jsx(Breadcrumb, {
+			id: item.id,
+			className: breadcrumbSegmentCva({}),
+			children: ({ isCurrent }) => /* @__PURE__ */ jsxs(Fragment, { children: [renderBreadcrumbLink(item, isCurrent, iconOnly && item === items[0]), !isCurrent && /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })] })
+		})
+	});
+};
+export { Breadcrumbs$1 as Breadcrumbs };

package/dist/Button.js

@@ -1,7 +1,7 @@
 import { UIStyle } from "./uiStyle.context.js";
+import { LinkContext } from "./link.context.js";
 import { ButtonContent } from "./ButtonContent.js";
 import { TooltipEllipsis } from "./TooltipEllipsis.js";
-import { LinkContext } from "./link.context.js";
 import { button, buttonContent, buttonIconSize, buttonSize, buttonTypography } from "./button.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/ButtonContent.js

@@ -1,6 +1,6 @@
+import { Typography } from "./Typography.js";
 import { buttonContent } from "./buttonContent.cva.js";
 import { Loader } from "./Loader.js";
-import { Typography } from "./Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";

package/dist/Calendar.js

@@ -8,7 +8,7 @@ const CalendarIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M16.5 2.91a.905.905 0 0 0-.9-.91c-.497 0-.9.407-.9.91v.908H9.3V2.91A.905.905 0 0 0 8.4 2c-.497 0-.9.407-.9.91v.908H5.7C4.209 3.818 3 5.04 3 6.545v12.728C3 20.779 4.209 22 5.7 22h12.6c1.491 0 2.7-1.221 2.7-2.727V6.545c0-1.506-1.209-2.727-2.7-2.727h-1.8zm2.7 6.363V6.545a.905.905 0 0 0-.9-.909h-1.8v.91c0 .502-.403.909-.9.909a.905.905 0 0 1-.9-.91v-.909H9.3v.91c0 .502-.403.909-.9.909a.905.905 0 0 1-.9-.91v-.909H5.7c-.497 0-.9.407-.9.91v2.727zM4.8 11.09h14.4v8.182c0 .502-.403.909-.9.909H5.7a.905.905 0 0 1-.9-.91z",
+		d: "M15.9 4.045c0-.439-.35-.795-.78-.795s-.78.356-.78.795v.796H9.66v-.796c0-.439-.35-.795-.78-.795s-.78.356-.78.795v.796H6.54c-1.292 0-2.34 1.068-2.34 2.386v11.137c0 1.318 1.048 2.386 2.34 2.386h10.92c1.292 0 2.34-1.068 2.34-2.386V7.227c0-1.318-1.048-2.386-2.34-2.386H15.9zm2.34 5.569V7.227c0-.439-.35-.795-.78-.795H15.9v.795c0 .44-.35.796-.78.796a.79.79 0 0 1-.78-.796v-.795H9.66v.795c0 .44-.35.796-.78.796a.79.79 0 0 1-.78-.796v-.795H6.54c-.43 0-.78.356-.78.795v2.387zm-12.48 1.59h12.48v7.16c0 .439-.35.795-.78.795H6.54a.79.79 0 0 1-.78-.795z",
 		clipRule: "evenodd"
 	})
 });

package/dist/Check.js

@@ -8,7 +8,7 @@ const CheckIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0",
+		d: "M20.223 6.27a.91.91 0 0 1 0 1.306L9.834 17.73a.96.96 0 0 1-1.335 0l-4.722-4.616a.91.91 0 0 1 0-1.305.96.96 0 0 1 1.335 0l4.055 3.963 9.72-9.502a.96.96 0 0 1 1.336 0",
 		clipRule: "evenodd"
 	})
 });

package/dist/CheckCircle.js

@@ -7,7 +7,7 @@ const CheckCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "m10.58 14.146-2.322-2.323a.73.73 0 0 0-.522-.213.7.7 0 0 0-.532.213.72.72 0 0 0-.217.527q0 .31.217.527l2.744 2.744q.27.27.633.271.36 0 .633-.27l5.563-5.564a.73.73 0 0 0 .212-.522.7.7 0 0 0-.212-.532.72.72 0 0 0-.527-.217.72.72 0 0 0-.527.217zm1.422 7.354a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749"
+		d: "m10.74 13.62-1.935-1.935a.85.85 0 0 0-.63-.248.85.85 0 0 0-.63.248.85.85 0 0 0-.247.63q0 .383.247.63l2.565 2.565q.27.27.63.27t.63-.27l5.085-5.085a.85.85 0 0 0 .248-.63.85.85 0 0 0-.248-.63.85.85 0 0 0-.63-.247.85.85 0 0 0-.63.247zM12 21a8.8 8.8 0 0 1-3.51-.709 9.1 9.1 0 0 1-2.857-1.924 9.1 9.1 0 0 1-1.924-2.857A8.8 8.8 0 0 1 3 12q0-1.867.709-3.51a9.1 9.1 0 0 1 1.924-2.857A9.1 9.1 0 0 1 8.49 3.709 8.8 8.8 0 0 1 12 3q1.867 0 3.51.709a9.1 9.1 0 0 1 2.858 1.924A9.1 9.1 0 0 1 20.29 8.49 8.8 8.8 0 0 1 21 12a8.8 8.8 0 0 1-.709 3.51 9.1 9.1 0 0 1-1.924 2.858 9.1 9.1 0 0 1-2.857 1.923A8.8 8.8 0 0 1 12 21"
 	})
 });
 export { CheckCircleIcon };

package/dist/CheckContent.js

@@ -1,5 +1,5 @@
-import { typography } from "./typography.cva.js";
 import { UIStyle } from "./uiStyle.context.js";
+import { typography } from "./typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 const CheckContent = ({ children, className,...props }) => {

package/dist/ChevronDown.js

@@ -8,7 +8,7 @@ const ChevronDownIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414",
+		d: "M5.251 8.256a.845.845 0 0 1 1.212 0L11 12.888l4.537-4.632a.845.845 0 0 1 1.212 0 .89.89 0 0 1 0 1.238l-5.143 5.25a.845.845 0 0 1-1.212 0L5.25 9.494a.89.89 0 0 1 0-1.238",
 		clipRule: "evenodd"
 	})
 });

package/dist/ChevronUp.js

@@ -8,7 +8,7 @@ const ChevronUpIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z",
+		d: "M10.394 8.256a.845.845 0 0 1 1.212 0l5.143 5.25a.89.89 0 0 1 0 1.238.845.845 0 0 1-1.212 0L11 10.112l-4.537 4.632a.845.845 0 0 1-1.212 0 .89.89 0 0 1 0-1.238z",
 		clipRule: "evenodd"
 	})
 });

package/dist/Clock.js

@@ -7,7 +7,7 @@ const ClockIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "m14.75 15.917 1.167-1.167-3.083-3.083V7.834h-1.667v4.5zM12 20.334a8.1 8.1 0 0 1-3.25-.657 8.4 8.4 0 0 1-2.646-1.78 8.4 8.4 0 0 1-1.78-2.647A8.1 8.1 0 0 1 3.666 12q0-1.729.656-3.25a8.4 8.4 0 0 1 1.781-2.646 8.4 8.4 0 0 1 2.646-1.78A8.1 8.1 0 0 1 12 3.666q1.73 0 3.25.656a8.4 8.4 0 0 1 2.646 1.781 8.4 8.4 0 0 1 1.781 2.646 8.1 8.1 0 0 1 .657 3.25 8.1 8.1 0 0 1-.657 3.25 8.4 8.4 0 0 1-1.78 2.646 8.4 8.4 0 0 1-2.647 1.781 8.1 8.1 0 0 1-3.25.657m0-1.667q2.771 0 4.72-1.948 1.947-1.948 1.947-4.719 0-2.77-1.948-4.718T12 5.334 7.282 7.282 5.334 12t1.948 4.72Q9.229 18.666 12 18.666"
+		d: "M12.85 11.66V8.6a.82.82 0 0 0-.244-.606A.82.82 0 0 0 12 7.75a.82.82 0 0 0-.606.244.82.82 0 0 0-.244.606v3.379q0 .17.064.33a.85.85 0 0 0 .191.286L14.21 15.4a.8.8 0 0 0 .595.234q.361 0 .595-.234a.8.8 0 0 0 .234-.595q0-.361-.234-.595zM12 20.5a8.3 8.3 0 0 1-3.315-.67 8.6 8.6 0 0 1-2.699-1.816 8.6 8.6 0 0 1-1.817-2.699A8.3 8.3 0 0 1 3.5 12q0-1.763.67-3.315a8.6 8.6 0 0 1 1.816-2.699A8.6 8.6 0 0 1 8.685 4.17 8.3 8.3 0 0 1 12 3.5q1.763 0 3.315.67a8.6 8.6 0 0 1 2.699 1.816 8.6 8.6 0 0 1 1.817 2.699Q20.5 10.237 20.5 12t-.67 3.315a8.6 8.6 0 0 1-1.816 2.699 8.6 8.6 0 0 1-2.699 1.817A8.3 8.3 0 0 1 12 20.5m0-1.7q2.826 0 4.813-1.987Q18.8 14.827 18.8 12t-1.987-4.813T12 5.2 7.187 7.187Q5.2 9.173 5.2 12t1.987 4.813Q9.173 18.8 12 18.8"
 	})
 });
 export { ClockIcon };

package/dist/ColorPickerDropdown.js

@@ -4,8 +4,8 @@ import { useInputCva } from "./input.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 import { useState } from "react";
+import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
 	const [isOpen, setIsOpen] = useState(false);

package/dist/DatePickerInput.js

@@ -11,8 +11,8 @@ import { FormFieldLabel } from "./FormFieldLabel.js";
 import { InputClear } from "./InputClear.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Button } from "react-aria-components";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 import useMeasure from "react-use-measure";

package/dist/DateRangePicker.js

@@ -10,8 +10,8 @@ import { DateTimeUtils } from "./date-time.utils.js";
 import { RangeCalendar } from "./RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Button } from "react-aria-components";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
@@ -491,7 +491,7 @@ var DateRangePickerBase = (props) => {
 					className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden",
 					children: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
 						onClick: () => selectPreset(preset),
-						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item md:py-list-height-item", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
+						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
 						children: /* @__PURE__ */ jsx(Typography, {
 							size: "label-2",
 							sizeMobile: "label-3",

package/dist/DateTime.js

@@ -7,12 +7,10 @@ const DateTimeIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	...props,
 	children: [/* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "m18.37 18.852.573-.573-1.534-1.533v-2.291h-.818v2.618zM17.02 21q-1.718 0-2.914-1.186-1.197-1.187-1.197-2.905t1.197-2.904 2.914-1.187q1.699 0 2.884 1.197 1.187 1.196 1.187 2.894t-1.187 2.894T17.02 21"
+		d: "M14.506 2.948a.806.806 0 0 1 .714.804v.769h1.54c1.303 0 2.36 1.067 2.36 2.383l-.002 4.287c0 .285-.1.502-.25.647a.8.8 0 0 1-.549.221c-.199.001-.4-.07-.55-.215a.8.8 0 0 1-.216-.38l-.029-.167-.005-.106.002-1.13H5.078v7.873l.001.009.014.138.002.007c.07.35.377.615.744.615h4.457l.114.003c.25.02.443.111.578.244.154.15.23.354.23.556a.78.78 0 0 1-.23.558.9.9 0 0 1-.579.248l-.11.005H5.84a2.37 2.37 0 0 1-2.348-2.139l-.012-.244V6.904c0-1.316 1.056-2.383 2.36-2.383h1.54v-.769c0-.445.357-.806.798-.807l.088.003a.806.806 0 0 1 .713.804v.769h4.641v-.769c0-.445.357-.806.798-.807zM5.84 6.135c-.42 0-.76.345-.76.769v1.54h12.44v-1.54a.765.765 0 0 0-.76-.769h-1.54v.769l-.015.153a.8.8 0 0 1-.7.65l-.087.003a.8.8 0 0 1-.794-.723l-.004-.083v-.769H8.98v.769l-.015.153a.8.8 0 0 1-.7.65l-.087.003a.8.8 0 0 1-.793-.723l-.004-.083v-.769z"
 	}), /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		fillRule: "evenodd",
-		d: "M14.218 3a.74.74 0 0 1 .736.744v.744h1.473c1.22 0 2.21.999 2.21 2.231v4.7a5.7 5.7 0 0 0-1.473-.235v-.746H5.382v6.694c0 .411.33.744.736.744h5.236c.089.523.25 1.023.47 1.488H6.118a2.22 2.22 0 0 1-2.209-2.232V6.72a2.22 2.22 0 0 1 2.21-2.231H7.59v-.744c0-.411.33-.744.736-.744a.74.74 0 0 1 .737.744v.744h4.418v-.744c0-.411.33-.744.736-.744m2.946 3.719V8.95H5.382V6.72c0-.41.33-.744.736-.744h1.473v.744c0 .41.33.744.736.744a.74.74 0 0 0 .737-.744v-.744h4.418v.744c0 .41.33.744.736.744a.74.74 0 0 0 .736-.744v-.744h1.473a.74.74 0 0 1 .737.744",
-		clipRule: "evenodd"
+		d: "M16.25 12.484q1.755 0 2.992 1.248t1.238 3.018q0 1.77-1.238 3.018t-2.992 1.248q-1.755 0-2.992-1.248T12.02 16.75q0-1.77 1.238-3.018t2.992-1.248m0 1.675a.43.43 0 0 0-.312.134.43.43 0 0 0-.133.314v1.95q0 .175.065.34.066.165.195.296l1.297 1.306q.133.135.312.135l.086-.009a.44.44 0 0 0 .225-.125.44.44 0 0 0 .125-.227l.01-.087a.44.44 0 0 0-.135-.314l-1.266-1.278-.024-.023v-1.964a.43.43 0 0 0-.134-.313.43.43 0 0 0-.311-.135"
 	})]
 });
 export { DateTimeIcon };

package/dist/{Drag.js → DragIndicator.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-const DragIcon = (props) => /* @__PURE__ */ jsx("svg", {
+const DragIndicatorIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	fill: "none",
 	viewBox: "0 0 24 24",
@@ -10,4 +10,4 @@ const DragIcon = (props) => /* @__PURE__ */ jsx("svg", {
 		d: "M9 19.615q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 9 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 19.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 15 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 9 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 13.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 15 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 9 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 7.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 15 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 15 7.616"
 	})
 });
-export { DragIcon };
+export { DragIndicatorIcon };

package/dist/File.js

@@ -8,7 +8,7 @@ const FileIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M12.9 2.1a1 1 0 0 1 .234.03l.009.003a1 1 0 0 1 .12.046q.03.013.054.027a1 1 0 0 1 .143.093q.03.023.058.049l.018.015 6.3 6.301.014.015q.015.014.029.032l.016.018q.018.025.034.048.022.03.042.062.02.035.037.073a.9.9 0 0 1 .093.388l-.001.016V19.2a2.7 2.7 0 0 1-2.7 2.7H6.6a2.7 2.7 0 0 1-2.7-2.7V4.8a2.7 2.7 0 0 1 2.7-2.7zM6.6 3.9a.9.9 0 0 0-.9.9v14.4a.9.9 0 0 0 .9.9h10.8a.9.9 0 0 0 .9-.9v-9h-5.4a.9.9 0 0 1-.9-.9V3.9zm7.2 4.5h3.227l-3.226-3.226z",
+		d: "M12.682 3q.111 0 .213.028l.008.002q.056.017.11.042.024.011.049.025a1 1 0 0 1 .13.084l.051.044.017.015 5.727 5.727.013.014.026.03.015.016q.016.022.03.043.021.028.039.056.018.033.033.067a.8.8 0 0 1 .085.352l-.001.015v8.985A2.455 2.455 0 0 1 16.772 21H6.955A2.456 2.456 0 0 1 4.5 18.545V5.455A2.455 2.455 0 0 1 6.955 3zM6.955 4.637a.82.82 0 0 0-.818.818v13.09a.817.817 0 0 0 .818.818h9.817a.82.82 0 0 0 .819-.818v-8.181h-4.909a.82.82 0 0 1-.818-.819V4.637zm6.546 4.09h2.933l-2.933-2.932z",
 		clipRule: "evenodd"
 	})
 });

package/dist/FileUpload.js

@@ -8,8 +8,8 @@ import { FileUploadContent } from "./FileUploadContent.js";
 import { fileUploadDropZone } from "./fileUpload.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { DropZone } from "react-aria-components";
 import { useCallback, useState } from "react";
+import { DropZone } from "react-aria-components";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/dist/Home.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const HomeIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M12 3.33q.649 0 1.151.384l6.001 4.5q.36.263.564.672.204.408.204.864v9q0 .792-.565 1.355A1.85 1.85 0 0 1 18 20.67h-4a.89.89 0 0 1-.656-.264.89.89 0 0 1-.264-.656v-5.08h-2.16v5.08q0 .393-.264.656a.89.89 0 0 1-.656.264H6q-.792 0-1.355-.565a1.85 1.85 0 0 1-.565-1.355v-9a1.9 1.9 0 0 1 .768-1.535l6-4.501A1.85 1.85 0 0 1 12 3.33m-.048 1.856-6 4.5-.032.024v9.12h3.16v-5.08q0-.393.264-.656A.89.89 0 0 1 10 12.83h4q.393 0 .656.264a.89.89 0 0 1 .264.656v5.08h3.16V9.71l-.032-.024-6-4.5L12 5.15z"
+	})
+});
+export { HomeIcon };

package/dist/Info.js

@@ -7,11 +7,11 @@ const InfoIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	...props,
 	children: [/* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "M12 7.8a1 1 0 0 1 1 1V12a1 1 0 1 1-2 0V8.8a1 1 0 0 1 1-1M12 14.2a1 1 0 1 0 0 2h.008a1 1 0 1 0 0-2z"
+		d: "M12 8.033c.522 0 .944.423.944.945V12a.944.944 0 1 1-1.888 0V8.978c0-.522.422-.945.944-.945M12 14.078a.944.944 0 1 0 0 1.889h.008a.944.944 0 0 0 0-1.889z"
 	}), /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14",
+		d: "M3.5 12a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0M12 5.389a6.611 6.611 0 1 0 0 13.222A6.611 6.611 0 0 0 12 5.39",
 		clipRule: "evenodd"
 	})]
 });

package/dist/InputContent.js

@@ -1,6 +1,6 @@
-import { Loader } from "./Loader.js";
 import { UIStyle } from "./uiStyle.context.js";
 import { Typography } from "./Typography.js";
+import { Loader } from "./Loader.js";
 import { InlineIconButton } from "./InlineIconButton.js";
 import { inputSide } from "./input.cva.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";

package/dist/InputUploadContent.js

@@ -40,7 +40,7 @@ const InputUploadContent = (props) => {
 					children: buttonText ?? t(($) => $.ui.fileUpload.upload)
 				})]
 			}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
-				size: "s",
+				size: "m",
 				width: "hug",
 				isDisabled,
 				className: "truncate",

package/dist/Menu.js

@@ -7,7 +7,7 @@ const MenuIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
-		d: "M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M3 17a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2z"
+		d: "M4 18a.97.97 0 0 1-.712-.288A.97.97 0 0 1 3 17q0-.424.288-.712A.97.97 0 0 1 4 16h16q.424 0 .712.288.288.287.288.712 0 .424-.288.712A.97.97 0 0 1 20 18zm0-5a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 12q0-.424.288-.713A.97.97 0 0 1 4 11h16q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 20 13zm0-5a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 7q0-.424.288-.713A.97.97 0 0 1 4 6h16q.424 0 .712.287Q21 6.576 21 7q0 .424-.288.713A.97.97 0 0 1 20 8z"
 	})
 });
 export { MenuIcon };

package/dist/MenuDesktop.js

@@ -1,7 +1,7 @@
 import { MenuPopover } from "./MenuPopover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MenuTrigger } from "react-aria-components";
 import React, { useRef, useState } from "react";
+import { MenuTrigger } from "react-aria-components";
 import { useHover } from "react-aria";
 var CLOSE_DELAY = 100;
 const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false, onAction,...props }) => {

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
 import { ArrowRightIcon } from "./ArrowRight.js";
-import { UIStyle } from "./uiStyle.context.js";
 import { menuItemCva } from "./menu.cva.js";
+import { UIStyle } from "./uiStyle.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { MenuItem } from "react-aria-components";

package/dist/MenuMobile.js

@@ -1,12 +1,12 @@
 import { ArrowLeftIcon } from "./ArrowLeft.js";
-import { UIStyle } from "./uiStyle.context.js";
 import { menuCva, menuItemCva } from "./menu.cva.js";
+import { UIStyle } from "./uiStyle.context.js";
 import { MenuItem as MenuItem$1 } from "./MenuItem.js";
 import { BottomSheet } from "./BottomSheet.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Button, Menu } from "react-aria-components";
 import { useRef, useState } from "react";
+import { Button, Menu } from "react-aria-components";
 const MenuMobile = ({ trigger, items, onAction,...props }) => {
 	const uiStyle = UIStyle.useConfig();
 	const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;