@ultraviolet/ui 3.13.1 → 3.15.0

package/dist/compositions/Navigation/components/Item/ItemExpanded.js

@@ -18,16 +18,16 @@ var ItemExpanded;
 var init_ItemExpanded = __esmMin(() => {
 	init_Stack();
 	init_NavigationProvider();
-	init_styles_css();
 	init_Badge();
 	init_Children();
 	init_Content();
 	init_PinnedButton();
-	ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren }) => {
+	init_styles_css();
+	ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, dataFlipId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren }) => {
 		const context = useNavigation();
 		const [internalExpanded, onToggleExpand] = useReducer((prevState) => !prevState, Boolean(toggle));
 		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-		const { expanded, animation, shouldAnimate, animationType, pinnedFeature } = context;
+		const { expanded, animation, pinnedFeature } = context;
 		const showDraggableIcon = !noExpand && pinnedFeature && shouldShowPinnedButton && !disabled;
 		const showPinIcon = !(noExpand || disabled) && shouldShowPinnedButton && pinnedFeature;
 		const shouldHaveWeakText = !!children && !active && shouldShowPinnedButton && !disabled;
@@ -56,9 +56,8 @@ var init_ItemExpanded = __esmMin(() => {
 			if (hasHrefAndNoChildren && internalExpanded) return true;
 			if (hasHrefAndNoChildren && !internalExpanded) return false;
 		}, [hasHrefAndNoChildren, internalExpanded]);
-		const computedAnimation = animation === "collapse" ? "collapse" : "expand";
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
-			alignItems: categoryIcon ? "flex-start" : "center",
+			alignItems: children && !noExpand ? "flex-start" : "center",
 			"aria-expanded": ariaExpanded,
 			as: containerTag,
 			className: cn(navigationStyle.itemContainer({
@@ -66,16 +65,14 @@ var init_ItemExpanded = __esmMin(() => {
 				hasActive: hasActiveChildren,
 				isActive: !!active,
 				noExpand,
-				subLabel: !!subLabel
-			}), navigationStyle.itemContainerAnimated({
-				animated: shouldAnimate && animationType === "complex",
-				animation: computedAnimation
+				expanding: animation === "expand"
 			}), navigationStyle.itemVariants({
 				shouldHaveWeakText,
 				showDraggableIcon,
 				showPinIcon
 			})),
 			"data-testid": dataTestId,
+			"data-flip-id": dataFlipId,
 			direction: "row",
 			disabled: containerTag === "button" ? disabled : void 0,
 			draggable: type === "pinned" && expanded,
@@ -99,13 +96,12 @@ var init_ItemExpanded = __esmMin(() => {
 				noExpand,
 				subLabel,
 				type
-			}), /* @__PURE__ */ jsxs(Stack, {
+			}), animation !== "collapse" ? /* @__PURE__ */ jsxs(Stack, {
 				alignItems: "center",
 				direction: "row",
 				gap: href ? 1 : void 0,
 				children: [
 					badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemBadge, {
-						animation: !!animation,
 						badgeSentiment,
 						badgeText,
 						disabled
@@ -118,24 +114,19 @@ var init_ItemExpanded = __esmMin(() => {
 						pinTooltipLocale,
 						shouldShowPinnedButton
 					})] }) : null,
-					hasHrefAndNoChildren && target === "_blank" && !animation ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+					hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {
 						disabled,
 						prominence: "default",
 						sentiment: "neutral"
 					}) : null,
-					children && !animation && !noExpand ? /* @__PURE__ */ jsx(Stack, {
-						alignItems: "center",
-						className: navigationStyle.itemStackIcon,
-						direction: "row",
-						gap: 1,
-						children: /* @__PURE__ */ jsx(ArrowIcon, {
-							prominence: "weak",
-							sentiment: "neutral"
-						})
+					children && !noExpand ? /* @__PURE__ */ jsx(ArrowIcon, {
+						className: navigationStyle.itemArrowIcon,
+						prominence: "weak",
+						sentiment: "neutral"
 					}) : null
 				]
-			})]
-		}), children ? /* @__PURE__ */ jsx(ItemChildren, {
+			}) : null]
+		}), children && expanded ? /* @__PURE__ */ jsx(ItemChildren, {
 			internalExpanded,
 			noExpand,
 			type,

package/dist/compositions/Navigation/components/Item/ItemProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemProvider.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/ItemProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,eAAO,MAAM,WAAW,kCAAuB,CAAA;AAE/C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,iBAAkB,iBAAiB,4CAI3D,CAAA"}
+{"version":3,"file":"ItemProvider.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/ItemProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,eAAO,MAAM,WAAW,kCAAuB,CAAA;AAE/C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,iBAAkB,iBAAiB,4CAI3D,CAAA"}

package/dist/compositions/Navigation/components/Item/PinnedButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedButton.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/PinnedButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,gBAAgB,4GAQ1B,IAAI,CACL,gBAAgB,EACd,wBAAwB,GACxB,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,IAAI,GACJ,QAAQ,GACR,iBAAiB,CACpB,mDA6DA,CAAA"}
+{"version":3,"file":"PinnedButton.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/PinnedButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,gBAAgB,4GAQ1B,IAAI,CACL,gBAAgB,EAChB,wBAAwB,GAAG,cAAc,GAAG,kBAAkB,GAAG,eAAe,GAAG,IAAI,GAAG,QAAQ,GAAG,iBAAiB,CACvH,mDAoDA,CAAA"}

package/dist/compositions/Navigation/components/Menu/Menu.d.ts

@@ -1,3 +1,3 @@
 import type { ItemMenuType } from '../ComponentsTypes';
-export declare const ItemMenu: ({ style, children, label, categoryIcon, active, hasActiveChildren, }: ItemMenuType) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemMenu: ({ style, children, label, categoryIcon, active, hasActiveChildren, 'data-flip-id': dataFlipId, }: ItemMenuType) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Menu.d.ts.map

package/dist/compositions/Navigation/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Menu/Menu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtD,eAAO,MAAM,QAAQ,yEAOlB,YAAY,4CAgEd,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAItD,eAAO,MAAM,QAAQ,qGAQlB,YAAY,4CA8Cd,CAAA"}

package/dist/compositions/Navigation/components/Menu/Menu.js

@@ -17,14 +17,14 @@ var init_Menu = __esmMin(() => {
 	init_Menu$1();
 	init_Stack();
 	init_Tooltip();
-	init_styles_css();
 	init_ItemProvider();
-	ItemMenu = ({ style, children, label, categoryIcon, active, hasActiveChildren }) => /* @__PURE__ */ jsx(Stack, {
-		alignItems: "flex-start",
-		className: navigationStyle.itemMenuStack,
+	init_styles_css();
+	ItemMenu = ({ style, children, label, categoryIcon, active, hasActiveChildren, "data-flip-id": dataFlipId }) => /* @__PURE__ */ jsx(Stack, {
+		alignItems: "center",
 		gap: 1,
 		justifyContent: "flex-start",
 		style,
+		"data-flip-id": dataFlipId,
 		children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(Menu, {
 			className: navigationStyle.itemMenuContainer,
 			disclosure: /* @__PURE__ */ jsx(Button, {
@@ -32,6 +32,7 @@ var init_Menu = __esmMin(() => {
 				sentiment: "neutral",
 				size: "small",
 				variant: hasActiveChildren ? "filled" : "ghost",
+				className: navigationStyle.itemCollapsed,
 				children: categoryIcon ? /* @__PURE__ */ jsx(Stack, {
 					alignItems: "center",
 					direction: "row",
@@ -56,6 +57,7 @@ var init_Menu = __esmMin(() => {
 				sentiment: "neutral",
 				size: "small",
 				variant: active ? "filled" : "ghost",
+				className: navigationStyle.itemCollapsed,
 				children: /* @__PURE__ */ jsx(Stack, {
 					alignItems: "center",
 					direction: "row",

package/dist/compositions/Navigation/components/Menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,YAAY,iQAqBtB,gBAAgB,4CAuFlB,CAAA"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAK1D,eAAO,MAAM,YAAY,iQAqBtB,gBAAgB,4CA0DlB,CAAA"}

package/dist/compositions/Navigation/components/Menu/MenuItem.js

@@ -17,14 +17,13 @@ var init_MenuItem = __esmMin(() => {
 	init_Stack();
 	init_Text();
 	init_NavigationProvider();
-	init_styles_css();
 	init_Badge();
 	init_PinnedButton();
+	init_styles_css();
 	ItemMenuItem = ({ active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, label, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id }) => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-		const { pinnedFeature, animation, shouldAnimate, animationType } = context;
-		const computedAnimation = animation === "collapse" ? "collapse" : "expand";
+		const { pinnedFeature, animation } = context;
 		return /* @__PURE__ */ jsx(Menu.Item, {
 			active,
 			borderless: true,
@@ -45,10 +44,11 @@ var init_MenuItem = __esmMin(() => {
 				justifyContent: "space-between",
 				width: "100%",
 				children: [
-					animation ? null : /* @__PURE__ */ jsx(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						as: "span",
 						className: navigationStyle.itemWrapText({
 							disabled,
+							animation,
 							weak: hasActiveChildren && !noExpand && !disabled && !!active
 						}),
 						variant: "bodySmall",
@@ -63,16 +63,11 @@ var init_MenuItem = __esmMin(() => {
 						direction: "row",
 						children: [
 							/* @__PURE__ */ jsx(ItemBadge, {
-								animation: !!animation,
 								badgeSentiment,
 								badgeText,
 								disabled
 							}),
 							hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {
-								className: navigationStyle.itemAnimatedIcon({
-									animated: shouldAnimate && animationType === "complex",
-									animation: computedAnimation
-								}),
 								disabled,
 								prominence: "weak",
 								sentiment: "neutral"

package/dist/compositions/Navigation/components/Menu/NestedMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NestedMenu.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Menu/NestedMenu.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAExE,eAAO,MAAM,UAAU,2QAsBpB,YAAY,GAAG,gBAAgB,4CAmCjC,CAAA"}
+{"version":3,"file":"NestedMenu.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Menu/NestedMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAKxE,eAAO,MAAM,UAAU,2QAsBpB,YAAY,GAAG,gBAAgB,4CAmCjC,CAAA"}

package/dist/compositions/Navigation/components/Menu/NestedMenu.js

@@ -9,9 +9,9 @@ import { jsx } from "react/jsx-runtime";
 var NestedMenu;
 var init_NestedMenu = __esmMin(() => {
 	init_Menu();
-	init_styles_css();
 	init_ItemProvider();
 	init_MenuItem();
+	init_styles_css();
 	NestedMenu = ({ children, label, active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id }) => /* @__PURE__ */ jsx(Menu, {
 		className: navigationStyle.itemMenuContainer,
 		disclosure: /* @__PURE__ */ jsx(ItemMenuItem, {

package/dist/compositions/Navigation/components/PinnedItems.d.ts

@@ -19,6 +19,6 @@ type PinnedItemsProps = {
     itemWrapper?: (item: ReactElement, itemId: string) => ReactElement;
     style?: CSSProperties;
 };
-export declare const PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: PinnedItemsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style }: PinnedItemsProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=PinnedItems.d.ts.map

package/dist/compositions/Navigation/components/PinnedItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedItems.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/PinnedItems.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAEnE,KAAK,gBAAgB,GAAG;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,YAAY,CAAA;IAClE,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,WAAW,yDAMrB,gBAAgB,mDA+IlB,CAAA"}
+{"version":3,"file":"PinnedItems.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/PinnedItems.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAOnE,KAAK,gBAAgB,GAAG;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,YAAY,CAAA;IAClE,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,WAAW,wDAAgE,gBAAgB,mDAoHvG,CAAA"}

package/dist/compositions/Navigation/components/PinnedItems.js

@@ -1,6 +1,5 @@
 'use client';
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2, init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
 import { Text, init_Text } from "../../../components/Text/index.js";
 import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
 import { init_styles_css, navigationStyle } from "../styles.css.js";
@@ -15,13 +14,12 @@ var PinnedItems;
 var init_PinnedItems = __esmMin(() => {
 	init_Text();
 	init_NavigationProvider();
-	init_styles_css();
 	init_Item();
-	init_objectSpread2();
+	init_styles_css();
 	PinnedItems = ({ toggle = true, onReorder, onToggle, itemWrapper, style }) => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation.PinnedItems can only be used inside a NavigationProvider.");
-		const { locales, pinnedItems, pinnedFeature, reorderItems, expanded, items, animation, showHide } = context;
+		const { locales, pinnedItems, pinnedFeature, reorderItems, expanded, items, showHide } = context;
 		const theme = useTheme();
 		const onDrop = useCallback((event, index) => {
 			event.preventDefault();
@@ -47,7 +45,7 @@ var init_PinnedItems = __esmMin(() => {
 		}, []);
 		if (Object.keys(items).length === 0) return null;
 		if (pinnedFeature && showHide !== "hide") return /* @__PURE__ */ jsx("div", {
-			style: _objectSpread2({ width: animation ? "100%" : void 0 }, style),
+			style,
 			children: /* @__PURE__ */ jsxs(Item, {
 				categoryIcon: /* @__PURE__ */ jsx(PinCategoryIcon, { variant: "neutral" }),
 				"data-testid": "pinned-group",
@@ -76,6 +74,7 @@ var init_PinnedItems = __esmMin(() => {
 						}, itemId);
 						return /* @__PURE__ */ jsxs("div", {
 							className: navigationStyle.pinnedItemRelativeDiv,
+							"data-flip-id": itemId,
 							children: [/* @__PURE__ */ jsx("div", {
 								className: navigationStyle.pinnedItemDropableArea,
 								onDragLeave,

package/dist/compositions/Navigation/components/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/Separator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,+CAErB,CAAA"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/Separator.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,+CAGrB,CAAA"}

package/dist/compositions/Navigation/components/Separator.js

@@ -2,6 +2,7 @@
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
 import { init_styles_css, navigationStyle } from "../styles.css.js";
 import { Separator as Separator$1, init_Separator as init_Separator$1 } from "../../../components/Separator/index.js";
+import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/compositions/Navigation/components/Separator.tsx
@@ -9,7 +10,13 @@ var Separator;
 var init_Separator = __esmMin(() => {
 	init_Separator$1();
 	init_styles_css();
-	Separator = () => /* @__PURE__ */ jsx(Separator$1, { className: navigationStyle.separator });
+	Separator = () => {
+		const id = useId();
+		return /* @__PURE__ */ jsx(Separator$1, {
+			className: navigationStyle.separator,
+			"data-flip-id": id
+		});
+	};
 });
 
 //#endregion

package/dist/compositions/Navigation/components/ShowHide.d.ts

@@ -11,6 +11,6 @@ type ShowAllProp = {
     'data-testid'?: string;
     style?: CSSProperties;
 };
-export declare const ShowHide: import("react").MemoExoticComponent<({ showContent, hideContent, onShowHide, tooltip, 'data-testid': dataTestId, style, }: ShowAllProp) => import("react/jsx-runtime").JSX.Element>;
+export declare const ShowHide: import("react").MemoExoticComponent<({ showContent, hideContent, onShowHide, tooltip, 'data-testid': dataTestId, style }: ShowAllProp) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=ShowHide.d.ts.map

package/dist/compositions/Navigation/components/ShowHide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowHide.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/ShowHide.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,SAAS,CAAA;IACtB,WAAW,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ,6HAQhB,WAAW,6CAwDf,CAAA"}
+{"version":3,"file":"ShowHide.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/ShowHide.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMrD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,SAAS,CAAA;IACtB,WAAW,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ,4HACmE,WAAW,6CAoDlG,CAAA"}

package/dist/compositions/Navigation/components/ShowHide.js

@@ -19,14 +19,14 @@ var init_ShowHide = __esmMin(() => {
 	ShowHide = memo(({ showContent, hideContent, onShowHide, tooltip, "data-testid": dataTestId, style }) => {
 		const context = useNavigation();
 		if (!context) throw new Error("Navigation.ShowAll can only be used inside a NavigationProvider.");
-		const { expanded, showHide } = context;
+		const { expanded, animation, showHide } = context;
 		const [computedShown, setIsShown] = useState(showHide === "show");
 		const onClick = () => {
 			setIsShown(!computedShown);
 			onShowHide === null || onShowHide === void 0 || onShowHide(computedShown ? "hide" : "show");
 		};
 		if (expanded) return /* @__PURE__ */ jsx(Stack, {
-			className: navigationStyle.showHideStack,
+			className: navigationStyle.showHideStack({ expanding: animation === "expand" }),
 			justifyContent: "flex-end",
 			style,
 			children: /* @__PURE__ */ jsx(Button, {
@@ -40,8 +40,8 @@ var init_ShowHide = __esmMin(() => {
 			})
 		});
 		return /* @__PURE__ */ jsx(Stack, {
-			alignItems: "center",
-			className: navigationStyle.showHideStack,
+			alignItems: "start",
+			className: navigationStyle.showHideStack(),
 			justifyContent: "flex-end",
 			style,
 			children: /* @__PURE__ */ jsx(Button, {

package/dist/compositions/Navigation/components/items.css.d.ts

@@ -1,11 +1,22 @@
 export declare const itemMenuContainer: string;
 export declare const itemRelative: string;
 export declare const itemPadded: string;
+export declare const itemCollapsed: string;
 export declare const itemPinIcon: Record<"active" | "inactive", string>;
 export declare const itemMenu: string;
 export declare const itemMenuPinned: string;
 export declare const itemContainerBase: string;
+export declare const itemPaddingStack: string;
 export declare const itemContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    expanding: {
+        true: {
+            selectors: {
+                [x: string]: {
+                    animation: `${string} ${number}ms ${number}ms cubic-bezier(0.5, 0, 0.2, 1) both, ${string} 250ms`;
+                };
+            };
+        };
+    };
     disabled: {
         true: {
             backgroundColor: "unset";
@@ -32,20 +43,6 @@ export declare const itemContainer: import("@vanilla-extract/recipes").RuntimeFn
             cursor: "pointer";
         };
     };
-    subLabel: {
-        true: {
-            padding: `var(--${string}) var(--${string})`;
-        };
-    };
-}>;
-export declare const itemContainerAnimated: import("@vanilla-extract/recipes").RuntimeFn<{
-    animated: {
-        true: {};
-    };
-    animation: {
-        collapse: {};
-        expand: {};
-    };
 }>;
 export declare const itemShowDraggable: string;
 export declare const itemShowPinButton: string;
@@ -63,6 +60,16 @@ export declare const itemVariants: import("@vanilla-extract/recipes").RuntimeFn<
 }>;
 export declare const itemDragIcon: string;
 export declare const itemWrapText: import("@vanilla-extract/recipes").RuntimeFn<{
+    animation: {
+        collapse: {
+            whiteSpace: "nowrap !important";
+            opacity: number;
+        };
+        expand: {
+            animation: `${string} 250ms cubic-bezier(0.5, 0, 0.2, 1) both`;
+        };
+        false: {};
+    };
     disabled: {
         true: {
             color: `var(--${string})`;
@@ -76,23 +83,7 @@ export declare const itemWrapText: import("@vanilla-extract/recipes").RuntimeFn<
 }>;
 export declare const itemBadge: string;
 export declare const itemPinnedButton: string;
-export declare const itemAnimatedIcon: import("@vanilla-extract/recipes").RuntimeFn<{
-    animated: {
-        true: {};
-    };
-    animation: {
-        collapse: {};
-        expand: {};
-    };
-}>;
 export declare const itemMenuStack: string;
-export declare const itemStackIcon: string;
+export declare const itemArrowIcon: string;
 export declare const itemCategoryIcon: string;
-export declare const itemPaddingStack: import("@vanilla-extract/recipes").RuntimeFn<{
-    hide: {
-        true: {
-            display: "none";
-        };
-    };
-}>;
 //# sourceMappingURL=items.css.d.ts.map

package/dist/compositions/Navigation/components/items.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"items.css.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/items.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,QAAwB,CAAA;AAEtD,eAAO,MAAM,YAAY,QAAkC,CAAA;AAE3D,eAAO,MAAM,UAAU,QAAyC,CAAA;AAWhE,eAAO,MAAM,WAAW,uCAiBtB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAEnB,CAAA;AAEF,eAAO,MAAM,cAAc,QAAY,CAAA;AAEvC,eAAO,MAAM,iBAAiB,QAU5B,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;;;QAsDpB,IAAI;YACF,eAAe;;;;QAIjB,IAAI;YACF,eAAe;YACf,SAAS;gBACP,SAAS;oBACP,eAAe;;;;;;;;;;;;;;;EAgBzB,CAAA;AAEF,eAAO,MAAM,qBAAqB;;QAG5B,IAAI;;;QAGJ,QAAQ;QACR,MAAM;;EAiBV,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAAY,CAAA;AAC1C,eAAO,MAAM,iBAAiB,QAAY,CAAA;AAC1C,eAAO,MAAM,YAAY,QAAY,CAAA;AAErC,eAAO,MAAM,YAAY;;QAGnB,IAAI;;;QAGJ,IAAI;;;QAGJ,IAAI;;EAGR,CAAA;AAEF,eAAO,MAAM,YAAY,QAUvB,CAAA;AACF,eAAO,MAAM,YAAY;;QAmBnB,IAAI;YACF,KAAK;;;;QAIP,IAAI;YACF,KAAK;;;EAIX,CAAA;AAEF,eAAO,MAAM,SAAS,QAepB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QA0B3B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;QAGvB,IAAI;;;QAGJ,QAAQ;QACR,MAAM;;EAiBV,CAAA;AAEF,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAE3B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;EAW3B,CAAA"}
+{"version":3,"file":"items.css.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/items.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,QAAwB,CAAA;AAEtD,eAAO,MAAM,YAAY,QAAkC,CAAA;AAE3D,eAAO,MAAM,UAAU,QAAyC,CAAA;AAEhE,eAAO,MAAM,aAAa,QAIxB,CAAA;AAWF,eAAO,MAAM,WAAW,uCAiBtB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAEnB,CAAA;AAEF,eAAO,MAAM,cAAc,QAAY,CAAA;AAEvC,eAAO,MAAM,iBAAiB,QAS5B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAE3B,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;QA8DpB,IAAI;YACF,eAAe;;;;QAIjB,IAAI;YACF,eAAe;YACf,SAAS;gBACP,SAAS;oBACP,eAAe;;;;;;;;;;EAWzB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAAY,CAAA;AAC1C,eAAO,MAAM,iBAAiB,QAAY,CAAA;AAC1C,eAAO,MAAM,YAAY,QAAY,CAAA;AAErC,eAAO,MAAM,YAAY;;QAGnB,IAAI;;;QAGJ,IAAI;;;QAGJ,IAAI;;EAGR,CAAA;AAEF,eAAO,MAAM,YAAY,QASvB,CAAA;AACF,eAAO,MAAM,YAAY;;;;;;;;;;;;QA+BnB,IAAI;YACF,KAAK;;;;QAIP,IAAI;YACF,KAAK;;;EAIX,CAAA;AAEF,eAAO,MAAM,SAAS,QAapB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAyB3B,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAE3B,CAAA"}

package/dist/compositions/Navigation/components/styles.css.d.ts

@@ -1,12 +1,8 @@
 export declare const groupText: import("@vanilla-extract/recipes").RuntimeFn<{
     animation: {
-        collapse: {
-            animation: `${string} 250ms ease-in-out reverse`;
-        };
         expand: {
-            animation: `${string} 250ms ease-in-out`;
+            animation: `${string} 250ms cubic-bezier(0.5, 0, 0.2, 1)`;
         };
-        false: {};
     };
 }>;
 export declare const groupStack: string;
@@ -21,5 +17,11 @@ export declare const pinnedItemContainer: import("@vanilla-extract/recipes").Run
     };
 }>;
 export declare const separator: string;
-export declare const showHideStack: string;
+export declare const showHideStack: import("@vanilla-extract/recipes").RuntimeFn<{
+    expanding: {
+        true: {
+            animation: `${string} 250ms cubic-bezier(0.5, 0, 0.2, 1)`;
+        };
+    };
+}>;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/compositions/Navigation/components/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/styles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;EAkBpB,CAAA;AAEF,eAAO,MAAM,UAAU,QAAwC,CAAA;AAE/D,eAAO,MAAM,sBAAsB,QAsBjC,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAEhC,CAAA;AAEF,eAAO,MAAM,mBAAmB;;QAM1B,IAAI;YACF,UAAU;YACV,WAAW;;;EAIjB,CAAA;AAEF,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/components/styles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;EAYpB,CAAA;AAEF,eAAO,MAAM,UAAU,QAAwC,CAAA;AAE/D,eAAO,MAAM,sBAAsB,QAsBjC,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAEhC,CAAA;AAEF,eAAO,MAAM,mBAAmB;;QAM1B,IAAI;YACF,UAAU;YACV,WAAW;;;EAIjB,CAAA;AAEF,eAAO,MAAM,SAAS,QAKpB,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;EAYxB,CAAA"}

package/dist/compositions/Navigation/constants.d.ts

@@ -1,10 +1,11 @@
 export declare const NAVIGATION_MIN_WIDTH = 220;
 export declare const NAVIGATION_WIDTH = 280;
-export declare const NAVIGATION_COLLASPED_WIDTH = 67;
+export declare const NAVIGATION_COLLASPED_WIDTH = 64;
 export declare const NAVIGATION_MAX_WIDTH = 320;
 /**
  * ANIMATIONS
  * collapse and expand animation duration of the whole nav in ms
  */
 export declare const ANIMATION_DURATION = 250;
+export declare const ANIMATION_EASING = "cubic-bezier(0.5, 0, 0.2, 1)";
 //# sourceMappingURL=constants.d.ts.map

package/dist/compositions/Navigation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/compositions/Navigation/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,MAAM,CAAA;AACvC,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,0BAA0B,KAAK,CAAA;AAC5C,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAEvC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/compositions/Navigation/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,MAAM,CAAA;AACvC,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,0BAA0B,KAAK,CAAA;AAC5C,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAEvC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAA;AACrC,eAAO,MAAM,gBAAgB,iCAAiC,CAAA"}

package/dist/compositions/Navigation/constants.js

@@ -1,8 +1,11 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/compositions/Navigation/constants.ts
-var init_constants = __esmMin(() => {});
+var ANIMATION_EASING;
+var init_constants = __esmMin(() => {
+	ANIMATION_EASING = "cubic-bezier(0.5, 0, 0.2, 1)";
+});
 
 //#endregion
 init_constants();
-export { init_constants };
+export { ANIMATION_EASING, init_constants };

package/dist/compositions/Navigation/index.d.ts

@@ -1,8 +1,8 @@
 import { NavigationProvider, useNavigation } from './NavigationProvider';
 import type { NavigationProps } from './types';
-export declare function Navigation({ 'data-testid': dataTestId, children, className, id, logo, onToggleExpand, onWidthResize, style }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Navigation({ 'data-testid': dataTestId, children, className, id, logo, onToggleExpand, onWidthResize, style, }: NavigationProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Navigation {
-    var Group: ({ children, label, style, additionalData, }: {
+    var Group: ({ children, label, style, additionalData }: {
         children: import("react").ReactNode;
         label: string;
         style?: import("react").CSSProperties;
@@ -18,7 +18,7 @@ export declare namespace Navigation {
         id: string;
         subLabel?: string;
         badgeText?: string;
-        badgeSentiment?: "black" | "danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "white" | undefined;
+        badgeSentiment?: import("react").ComponentProps<typeof import("../..").Badge>['sentiment'];
         href?: HTMLAnchorElement['href'];
         target?: HTMLAnchorElement['target'];
         rel?: HTMLAnchorElement['rel'];
@@ -38,11 +38,11 @@ export declare namespace Navigation {
     }) => import("react/jsx-runtime").JSX.Element | null>;
 }
 export declare namespace Navigation {
-    var PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: {
+    var PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style }: {
         toggle?: boolean;
         onToggle?: (toggle: boolean) => void;
         onReorder?: (pinnedItems: string[]) => void;
-        itemWrapper?: (item: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>, itemId: string) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+        itemWrapper?: (item: import("react").ReactElement, itemId: string) => import("react").ReactElement;
         style?: import("react").CSSProperties;
     }) => import("react/jsx-runtime").JSX.Element | null;
 }
@@ -50,7 +50,7 @@ export declare namespace Navigation {
     var Separator: () => import("react/jsx-runtime").JSX.Element;
 }
 export declare namespace Navigation {
-    var ShowHide: import("react").MemoExoticComponent<({ showContent, hideContent, onShowHide, tooltip, 'data-testid': dataTestId, style, }: {
+    var ShowHide: import("react").MemoExoticComponent<({ showContent, hideContent, onShowHide, tooltip, 'data-testid': dataTestId, style }: {
         showContent: import("react").ReactNode;
         hideContent: import("react").ReactNode;
         onShowHide?: (expanded: 'show' | 'hide') => void;

package/dist/compositions/Navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/compositions/Navigation/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;mCAOnB,EACzB,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,cAAc,EACd,aAAa,EACb,KAAK,EACN,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBlB,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAC5C,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/compositions/Navigation/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;mCAOnB,EACzB,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,cAAc,EACd,aAAa,EACb,KAAK,GACN,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBlB,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAC5C,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/compositions/Navigation/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/locales/en.ts"],"names":[],"mappings":";aACE,4BAA4B,EAAE,kBAAkB;aAChD,0BAA0B,EAAE,gBAAgB;aAC5C,sBAAsB,EAAE,8BAA8B;aACtD,wBAAwB,EAAE,aAAa;aACvC,oCAAoC,EAAE,2BAA2B;aACjE,oCAAoC,EAAE,cAAc;aACpD,0BAA0B,EAAE,eAAe;;AAP7C,wBAQU"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Navigation/locales/en.ts"],"names":[],"mappings":";aACE,4BAA4B,EAAE,kBAAkB;aAChD,0BAA0B,EAAE,gBAAgB;aAC5C,sBAAsB,EAAE,8BAA8B;aACtD,wBAAwB,EAAE,aAAa;aACvC,oCAAoC,EAAE,2BAA2B;aACjE,oCAAoC,EAAE,cAAc;aACpD,0BAA0B,EAAE,eAAe"}