@povio/ui 2.3.1 → 2.3.2-rc.1

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type StaticInputDataAttributes = {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+};
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    typographySize?: TypographyVariantProps["size"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    applyMinInputWidth?: boolean;
+    placeholder?: ReactNode;
+    showPlacholderIfFilled?: boolean;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    leadingContentClassName?: string;
+    hasClearIcon?: boolean;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
+    inputClassName?: string;
+    dataAttributes?: StaticInputDataAttributes;
+}
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/TooltipWrapper.js

@@ -1,21 +1,60 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
+	const $ = c(14);
+	const tooltipWrapperTriggerCva = UIStyle.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
 	if (props.as !== "inline") return props.children;
-	return /* @__PURE__ */ jsx(Tooltip, {
-		text: props.error || void 0,
-		placement: "bottom",
-		color: "error",
-		hidden: !props.error,
-		isNonInteractiveTrigger: true,
-		triggerClassName: props.triggerClassName,
-		triggerTabIndex: props.triggerTabIndex,
-		children: /* @__PURE__ */ jsx("div", {
+	const t0 = props.error || void 0;
+	const t1 = !props.error;
+	let t2;
+	if ($[0] !== props.triggerClassName || $[1] !== tooltipWrapperTriggerCva) {
+		t2 = tooltipWrapperTriggerCva({ className: props.triggerClassName });
+		$[0] = props.triggerClassName;
+		$[1] = tooltipWrapperTriggerCva;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = props.triggerTabIndex;
+	let t4;
+	if ($[3] !== tooltipWrapperTriggerCva) {
+		t4 = tooltipWrapperTriggerCva({});
+		$[3] = tooltipWrapperTriggerCva;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== props.children || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
 			tabIndex: -1,
+			className: t4,
 			children: props.children
-		})
-	});
+		});
+		$[5] = props.children;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== props.triggerTabIndex || $[9] !== t0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Tooltip, {
+			text: t0,
+			placement: "bottom",
+			color: "error",
+			hidden: t1,
+			isNonInteractiveTrigger: true,
+			triggerClassName: t2,
+			triggerTabIndex: t3,
+			children: t5
+		});
+		$[8] = props.triggerTabIndex;
+		$[9] = t0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
 };
 //#endregion
 export { TooltipWrapper };

package/dist/components/inputs/shared/input.cva.d.ts

@@ -12,6 +12,16 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputContentWrapper: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputContentWrapperProps extends VariantProps<typeof inputContentWrapper> {
+}
+export declare const inputClearClass: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputClearClassProps extends VariantProps<typeof inputClearClass> {
+}
 export declare const inputSide: (props?: ({
     size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;

package/dist/components/inputs/shared/input.cva.js

@@ -1,5 +1,6 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
+import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 //#region src/components/inputs/shared/input.cva.ts
@@ -35,9 +36,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
 				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
-				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
-				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -51,9 +54,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
 				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
 				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
-				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
-				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-3",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -67,9 +72,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
 				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
-				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
-				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -83,9 +90,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
 				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
 				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
-				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
-				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-3",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -99,9 +108,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
 				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
-				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
-				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -118,6 +129,8 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
 				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -191,6 +204,24 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputContentWrapper = cva("flex w-full", {
+	variants: { as: {
+		default: "",
+		floating: "flex-col",
+		filter: "gap-input-gap-input-text-to-elements",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
+var inputClearClass = cva("", {
+	variants: { as: {
+		default: "",
+		floating: "",
+		filter: "",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputSide = cva("", {
 	variants: {
 		size: {
@@ -270,11 +301,20 @@ var inputSide = cva("", {
 	defaultVariants: { size: "default" }
 });
 var useInputCva = () => {
+	const $ = c(3);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	return ({ className, ...rest }) => {
-		return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
-	};
+	let t0;
+	if ($[0] !== inputBaseCva || $[1] !== inputSizeCva) {
+		t0 = (t1) => {
+			const { className, ...rest } = t1;
+			return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
+		};
+		$[0] = inputBaseCva;
+		$[1] = inputSizeCva;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 };
 //#endregion
-export { inputBase, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputContentWrapper, inputSide, inputSize, useInputCva };

package/dist/components/inputs/shared/label.cva.js

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 //#region src/components/inputs/shared/label.cva.ts
 var labelBase = cva("", {
 	variants: { as: {
-		default: ["flex items-start gap-1 text-text-default-1"],
-		filter: ["text-text-default-1"],
+		default: ["flex items-start gap-1 text-text-default-1 input-disabled:text-text-default-3"],
+		filter: ["text-text-default-1 input-disabled:text-text-default-3"],
 		inline: ["flex items-start gap-1 text-text-default-1"],
 		floating: [
 			"pointer-events-none",

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tooltipWrapperTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TooltipWrapperTriggerVariantProps extends VariantProps<typeof tooltipWrapperTrigger> {
+}

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/shared/tooltipWrapper.cva.ts
+var tooltipWrapperTrigger = cva("inline-flex");
+//#endregion
+export { tooltipWrapperTrigger };

package/dist/components/inputs/shared/useStaticInputHandoff.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+interface StaticInputHandoffOptions<TElement extends HTMLElement> {
+    inputRef: RefObject<TElement | null>;
+    renderInput: boolean;
+    setRenderInput: Dispatch<SetStateAction<boolean>>;
+    getFocusTarget?: (element: TElement) => HTMLElement | null | undefined;
+}
+export declare const useStaticInputHandoff: <TElement extends HTMLElement = HTMLInputElement>({ inputRef, renderInput, setRenderInput, getFocusTarget, }: StaticInputHandoffOptions<TElement>) => {
+    shouldFocus: boolean;
+    renderRealInput: (focus: boolean) => void;
+    replayStaticInputChange: (value: string) => void;
+    replayStaticInputPress: () => void;
+};
+export {};

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -0,0 +1,100 @@
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/inputs/shared/useStaticInputHandoff.ts
+var useStaticInputHandoff = (t0) => {
+	const $ = c(15);
+	const { inputRef, renderInput, setRenderInput, getFocusTarget } = t0;
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const pendingStaticChangeRef = useRef(null);
+	const shouldReplayStaticPressRef = useRef(false);
+	let t1;
+	let t2;
+	if ($[0] !== getFocusTarget || $[1] !== inputRef || $[2] !== renderInput || $[3] !== shouldFocus) {
+		t1 = () => {
+			if (!renderInput || !shouldFocus) return;
+			const focusRealInput = (replayPendingInteraction) => {
+				const input = inputRef.current;
+				const pendingValue = pendingStaticChangeRef.current;
+				const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
+				if (replayPendingInteraction && focusTarget instanceof HTMLInputElement && pendingValue != null) {
+					(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
+					focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
+					pendingStaticChangeRef.current = null;
+				}
+				focusTarget?.focus();
+				if (replayPendingInteraction && shouldReplayStaticPressRef.current) {
+					shouldReplayStaticPressRef.current = false;
+					focusTarget?.click();
+				}
+			};
+			focusRealInput(true);
+			const frame = requestAnimationFrame(() => {
+				focusRealInput(false);
+				setShouldFocus(false);
+			});
+			return () => {
+				cancelAnimationFrame(frame);
+			};
+		};
+		t2 = [
+			getFocusTarget,
+			inputRef,
+			renderInput,
+			shouldFocus
+		];
+		$[0] = getFocusTarget;
+		$[1] = inputRef;
+		$[2] = renderInput;
+		$[3] = shouldFocus;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	let t5;
+	if ($[6] !== setRenderInput) {
+		t3 = (focus) => {
+			setShouldFocus(focus);
+			setRenderInput(true);
+		};
+		t4 = (value) => {
+			pendingStaticChangeRef.current = value;
+			setShouldFocus(true);
+			setRenderInput(true);
+		};
+		t5 = () => {
+			shouldReplayStaticPressRef.current = true;
+			setShouldFocus(true);
+			setRenderInput(true);
+		};
+		$[6] = setRenderInput;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== shouldFocus || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
+		t6 = {
+			shouldFocus,
+			renderRealInput: t3,
+			replayStaticInputChange: t4,
+			replayStaticInputPress: t5
+		};
+		$[10] = shouldFocus;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+//#endregion
+export { useStaticInputHandoff };

package/dist/components/navigation/Accordion/Accordion.js

@@ -1,34 +1,81 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { accordionCva } from "./accordion.cva.js";
 import { AccordionItem } from "./AccordionItem.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { DisclosureGroup } from "react-aria-components";
 //#region src/components/navigation/Accordion/Accordion.tsx
-var Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }) => {
-	return /* @__PURE__ */ jsx(DisclosureGroup, {
-		allowsMultipleExpanded,
-		expandedKeys,
-		defaultExpandedKeys,
-		onExpandedChange,
-		className: clsx(UIStyle.useCva("accordion.cva", accordionCva)({
+var Accordion = (t0) => {
+	const $ = c(23);
+	const { items, variant: t1, actionPosition: t2, allowsMultipleExpanded: t3, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled } = t0;
+	const variant = t1 === void 0 ? "filled" : t1;
+	const actionPosition = t2 === void 0 ? "right" : t2;
+	const allowsMultipleExpanded = t3 === void 0 ? false : t3;
+	const accordionCva$1 = UIStyle.useCva("accordion.cva", accordionCva);
+	const t4 = items.length === 1;
+	let t5;
+	if ($[0] !== accordionCva$1 || $[1] !== className || $[2] !== t4 || $[3] !== variant) {
+		t5 = clsx(accordionCva$1({
 			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))
-	});
+			singleItem: t4
+		}));
+		$[0] = accordionCva$1;
+		$[1] = className;
+		$[2] = t4;
+		$[3] = variant;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== actionPosition || $[6] !== disabled || $[7] !== items || $[8] !== variant) {
+		let t7;
+		if ($[10] !== actionPosition || $[11] !== disabled || $[12] !== items.length || $[13] !== variant) {
+			t7 = (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);
+			$[10] = actionPosition;
+			$[11] = disabled;
+			$[12] = items.length;
+			$[13] = variant;
+			$[14] = t7;
+		} else t7 = $[14];
+		t6 = items.map(t7);
+		$[5] = actionPosition;
+		$[6] = disabled;
+		$[7] = items;
+		$[8] = variant;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[15] !== allowsMultipleExpanded || $[16] !== defaultExpandedKeys || $[17] !== disabled || $[18] !== expandedKeys || $[19] !== onExpandedChange || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(DisclosureGroup, {
+			allowsMultipleExpanded,
+			expandedKeys,
+			defaultExpandedKeys,
+			onExpandedChange,
+			className: t5,
+			isDisabled: disabled,
+			children: t6
+		});
+		$[15] = allowsMultipleExpanded;
+		$[16] = defaultExpandedKeys;
+		$[17] = disabled;
+		$[18] = expandedKeys;
+		$[19] = onExpandedChange;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
 };
 //#endregion
 export { Accordion };

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -2,10 +2,15 @@ import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { accordionChevronCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva } from "./accordion.cva.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
 //#region src/components/navigation/Accordion/AccordionItem.tsx
-var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
+var AccordionItem = (t0) => {
+	const $ = c(25);
+	const { id, disabled, heading, subheading, children, icon: Icon, variant: t1, actionPosition: t2, isSingle } = t0;
+	const variant = t1 === void 0 ? "filled" : t1;
+	const actionPosition = t2 === void 0 ? "right" : t2;
 	const itemCva = UIStyle.useCva("accordion.itemCva", accordionItemCva);
 	const triggerCva = UIStyle.useCva("accordion.triggerCva", accordionTriggerCva);
 	const headingCva = UIStyle.useCva("accordion.headingCva", accordionHeadingCva);
@@ -15,49 +20,89 @@ var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon,
 	const iconCva = UIStyle.useCva("accordion.iconCva", accordionIconCva);
 	const panelCva = UIStyle.useCva("accordion.panelCva", accordionPanelCva);
 	const panelContentCva = UIStyle.useCva("accordion.panelContentCva", accordionPanelContentCva);
-	return /* @__PURE__ */ jsx(Disclosure, {
-		id,
-		className: itemCva({
+	let t3;
+	if ($[0] !== isSingle || $[1] !== itemCva || $[2] !== variant) {
+		t3 = 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
-						})
-					]
+		});
+		$[0] = isSingle;
+		$[1] = itemCva;
+		$[2] = variant;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== Icon || $[5] !== actionPosition || $[6] !== chevronCva || $[7] !== children || $[8] !== disabled || $[9] !== heading || $[10] !== headingCva || $[11] !== headingSubtitleCva || $[12] !== headingTitleCva || $[13] !== iconCva || $[14] !== panelContentCva || $[15] !== panelCva || $[16] !== subheading || $[17] !== triggerCva || $[18] !== variant) {
+		t4 = (t5) => {
+			const { isExpanded } = t5;
+			return /* @__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
 				})
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
-		}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
-			className: panelCva({ isExpanded }),
-			children: /* @__PURE__ */ jsx("div", {
-				className: panelContentCva({}),
-				children
-			})
-		})] })
-	});
+			})] });
+		};
+		$[4] = Icon;
+		$[5] = actionPosition;
+		$[6] = chevronCva;
+		$[7] = children;
+		$[8] = disabled;
+		$[9] = heading;
+		$[10] = headingCva;
+		$[11] = headingSubtitleCva;
+		$[12] = headingTitleCva;
+		$[13] = iconCva;
+		$[14] = panelContentCva;
+		$[15] = panelCva;
+		$[16] = subheading;
+		$[17] = triggerCva;
+		$[18] = variant;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== disabled || $[21] !== id || $[22] !== t3 || $[23] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Disclosure, {
+			id,
+			className: t3,
+			isDisabled: disabled,
+			children: t4
+		});
+		$[20] = disabled;
+		$[21] = id;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
+	return t5;
 };
 //#endregion
 export { AccordionItem };