@povio/ui 2.2.6 → 2.2.8-rc

package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js

@@ -1,9 +1,10 @@
 import { Typography } from "../../../text/Typography/Typography.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-const TextStyleSelect = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextStyleSelect.tsx
+var TextStyleSelect = ({ editor }) => {
 	const { t } = useTranslation("ui");
 	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "heading")) return null;
 	const getItem = (level) => {
@@ -49,4 +50,5 @@ const TextStyleSelect = ({ editor }) => {
 		isDisabled: !editor.isEditable
 	});
 };
+//#endregion
 export { TextStyleSelect };

package/dist/components/inputs/TextEditor/textEditor.types.js

@@ -1,4 +1,5 @@
-const defaultColors = [
+//#region src/components/inputs/TextEditor/textEditor.types.ts
+var defaultColors = [
 	"#000000",
 	"#e60000",
 	"#ff9900",
@@ -35,4 +36,5 @@ const defaultColors = [
 	"#002966",
 	"#3d1466"
 ];
+//#endregion
 export { defaultColors };

package/dist/components/inputs/Toggle/Toggle.js

@@ -8,6 +8,7 @@ import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
+//#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
@@ -35,7 +36,7 @@ var ToggleBase = (props) => {
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
 };
-const Toggle = (props) => {
+var Toggle = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -56,4 +57,5 @@ const Toggle = (props) => {
 	}
 	return /* @__PURE__ */ jsx(ToggleBase, { ...props });
 };
+//#endregion
 export { Toggle };

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -1,7 +1,8 @@
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
-const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass], {
+//#region src/components/inputs/Toggle/toggle.cva.ts
+var toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass], {
 	variants: { variant: { default: [
 		"bg-interactive-contained-secondary-idle",
 		"group-disabled:bg-interactive-contained-secondary-disabled",
@@ -20,9 +21,10 @@ const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspe
 	] } },
 	defaultVariants: { variant: "default" }
 });
-const toggleTypography = compoundMapper({ default: {
+var toggleTypography = compoundMapper({ default: {
 	size: "label-1",
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+//#endregion
 export { toggle, toggleTypography };

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

@@ -2,7 +2,8 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-const CheckContent = ({ children, className, ...props }) => {
+//#region src/components/inputs/shared/CheckContent.tsx
+var CheckContent = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
@@ -14,4 +15,5 @@ const CheckContent = ({ children, className, ...props }) => {
 		children
 	});
 };
+//#endregion
 export { CheckContent };

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

@@ -1,14 +1,15 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../config/i18n.js";
+import "../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-const InputClear = ({ onClear, className, style, show }) => {
+//#region src/components/inputs/shared/InputClear.tsx
+var InputClear = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",
-		className: clsx("invisible flex items-center", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		className: clsx("invisible relative z-1 flex items-center", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
 		label: t(($) => $.ui.clearAlt),
 		icon: CloseIcon,
 		onPress: onClear,
@@ -16,4 +17,5 @@ const InputClear = ({ onClear, className, style, show }) => {
 		style
 	});
 };
+//#endregion
 export { InputClear };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    placeholder?: ReactNode;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    trailingVisual?: ReactNode;
+    inputClassName?: string;
+}
+export declare const StaticInput: ({ onInteract, as, size, variant, placeholder, displayValue, isEmpty, leadingVisual, trailingVisual, inputClassName, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,69 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputBase, inputSize } from "./input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/shared/StaticInput.tsx
+var StaticInput = ({ onInteract, as, size, variant, placeholder, displayValue, isEmpty, leadingVisual, trailingVisual, inputClassName, className, ...formFieldProps }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	let hasValue = !!displayValue;
+	if (isEmpty != null) hasValue = !isEmpty;
+	let staticDisplayContent = placeholder;
+	if (hasValue) staticDisplayContent = displayValue;
+	else if (as === "floating") staticDisplayContent = null;
+	const shouldRenderFloatingLineSpacer = as === "floating" && !hasValue;
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		as,
+		className,
+		onMouseEnter: () => onInteract(false),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			tabIndex: formFieldProps.isDisabled ? -1 : 0,
+			onFocus: () => onInteract(true),
+			onClick: () => onInteract(true),
+			onPointerDown: () => onInteract(true),
+			"data-is-empty": !hasValue || void 0,
+			"data-disabled": formFieldProps.isDisabled || void 0,
+			"data-is-disabled": formFieldProps.isDisabled || void 0,
+			"data-has-selection": hasValue || void 0,
+			"data-rac": "",
+			className: clsx("group/static-input group/input-content group/select-content relative flex min-w-input-width-min-width items-center justify-between gap-input-gap-input-text-to-elements", inputBaseCva({
+				as,
+				variant
+			}), inputClassName),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx(inputSizeCva({
+					size,
+					as
+				}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+				children: [leadingVisual && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none shrink-0",
+					children: leadingVisual
+				}), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex w-full truncate", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements"),
+					children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						size,
+						label: formFieldProps.label,
+						isRequired: formFieldProps.isRequired,
+						isDisabled: formFieldProps.isDisabled
+					}), /* @__PURE__ */ jsxs("div", {
+						className: clsx("truncate", !hasValue && "text-text-default-3"),
+						children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
+					})]
+				})]
+			}), trailingVisual && /* @__PURE__ */ jsx("div", {
+				className: clsx(inputSizeCva({
+					size,
+					as
+				}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+				children: trailingVisual
+			})]
+		})
+	});
+};
+//#endregion
+export { StaticInput };

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

@@ -1,6 +1,7 @@
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { jsx } from "react/jsx-runtime";
-const TooltipWrapper = (props) => {
+//#region src/components/inputs/shared/TooltipWrapper.tsx
+var TooltipWrapper = (props) => {
 	if (props.as !== "inline") return props.children;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		text: props.error || void 0,
@@ -16,4 +17,5 @@ const TooltipWrapper = (props) => {
 		})
 	});
 };
+//#endregion
 export { TooltipWrapper };

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

@@ -2,7 +2,8 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
-const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
+//#region src/components/inputs/shared/input.cva.ts
+var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 	variants: {
 		variant: {
 			outlined: "",
@@ -127,7 +128,7 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 		as: "default"
 	}
 });
-const inputSize = cva("", {
+var inputSize = cva("", {
 	variants: {
 		size: {
 			"extra-small": "text-label-1",
@@ -190,7 +191,7 @@ const inputSize = cva("", {
 		as: "default"
 	}
 });
-const inputSide = cva("", {
+var inputSide = cva("", {
 	variants: {
 		size: {
 			"extra-small": "",
@@ -268,11 +269,12 @@ const inputSide = cva("", {
 	],
 	defaultVariants: { size: "default" }
 });
-const useInputCva = () => {
+var useInputCva = () => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	return ({ className, ...rest }) => {
 		return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
 	};
 };
+//#endregion
 export { inputBase, inputSide, inputSize, useInputCva };

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

@@ -1,6 +1,7 @@
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
-const labelBase = cva("", {
+//#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"],
@@ -24,7 +25,7 @@ const labelBase = cva("", {
 	} },
 	defaultVariants: { as: "default" }
 });
-const labelTypography = compoundMapper({
+var labelTypography = compoundMapper({
 	compoundVariants: [
 		{
 			as: "default",
@@ -66,4 +67,5 @@ const labelTypography = compoundMapper({
 	},
 	defaultVariants: { as: "default" }
 });
+//#endregion
 export { labelBase, labelTypography };

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

@@ -4,7 +4,8 @@ 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 }) => {
+//#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,
@@ -29,4 +30,5 @@ const Accordion = ({ items, variant = "filled", actionPosition = "right", allows
 		}, item.id))
 	});
 };
+//#endregion
 export { Accordion };

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

@@ -4,7 +4,8 @@ import { Typography } from "../../text/Typography/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 }) => {
+//#region src/components/navigation/Accordion/AccordionItem.tsx
+var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
 	const itemCva = UIStyle.useCva("accordion.itemCva", accordionItemCva);
 	const triggerCva = UIStyle.useCva("accordion.triggerCva", accordionTriggerCva);
 	const headingCva = UIStyle.useCva("accordion.headingCva", accordionHeadingCva);
@@ -58,4 +59,5 @@ const AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon
 		})] })
 	});
 };
+//#endregion
 export { AccordionItem };

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

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
-const accordionCva = cva("flex w-full flex-col", {
+//#region src/components/navigation/Accordion/accordion.cva.ts
+var accordionCva = cva("flex w-full flex-col", {
 	variants: {
 		variant: {
 			filled: "gap-1",
@@ -20,7 +21,7 @@ const accordionCva = cva("flex w-full flex-col", {
 		className: "rounded-global-rounding-s border border-elevation-outline-default-1"
 	}]
 });
-const accordionItemCva = cva("flex w-full flex-col", {
+var accordionItemCva = cva("flex w-full flex-col", {
 	variants: {
 		variant: {
 			filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2",
@@ -45,7 +46,7 @@ const accordionItemCva = cva("flex w-full flex-col", {
 		className: "not-last:border-elevation-outline-default-1 not-last:border-b"
 	}]
 });
-const accordionTriggerCva = cva([
+var accordionTriggerCva = cva([
 	"group flex w-full items-center gap-accordion-gap-content-to-arrow",
 	"px-accordion-side-accordion py-accordion-height-accordion",
 	"outline-none focus-visible:ring-2 focus-visible:ring-interactive-contained-primary-focus"
@@ -66,32 +67,33 @@ const accordionTriggerCva = cva([
 		actionPosition: "right"
 	}
 });
-const accordionHeadingCva = cva("flex flex-1 items-center justify-between gap-accordion-gap-content-to-arrow", {
+var accordionHeadingCva = cva("flex flex-1 items-center justify-between gap-accordion-gap-content-to-arrow", {
 	variants: {},
 	defaultVariants: {}
 });
-const accordionHeadingTitleCva = cva("flex-1 text-left text-text-default-1", {
+var accordionHeadingTitleCva = cva("flex-1 text-left text-text-default-1", {
 	variants: {},
 	defaultVariants: {}
 });
-const accordionHeadingSubtitleCva = cva("flex-1 text-left text-text-default-2", {
+var accordionHeadingSubtitleCva = cva("flex-1 text-left text-text-default-2", {
 	variants: {},
 	defaultVariants: {}
 });
-const accordionChevronCva = cva("size-6 shrink-0 text-interactive-text-secondary-idle transition-transform duration-200", {
+var accordionChevronCva = cva("size-6 shrink-0 text-interactive-text-secondary-idle transition-transform duration-200", {
 	variants: { isExpanded: {
 		true: "rotate-180",
 		false: "rotate-0"
 	} },
 	defaultVariants: { isExpanded: false }
 });
-const accordionIconCva = cva("size-6 shrink-0 text-text-default-3", {
+var accordionIconCva = cva("size-6 shrink-0 text-text-default-3", {
 	variants: {},
 	defaultVariants: {}
 });
-const accordionPanelCva = cva("", { variants: { isExpanded: { true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion" } } });
-const accordionPanelContentCva = cva("py-accordion-height-content", {
+var accordionPanelCva = cva("", { variants: { isExpanded: { true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion" } } });
+var accordionPanelContentCva = cva("py-accordion-height-content", {
 	variants: {},
 	defaultVariants: {}
 });
+//#endregion
 export { accordionChevronCva, accordionCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva };

package/dist/components/navigation/Stepper/Stepper.js

@@ -4,7 +4,8 @@ import { StepperItem } from "./StepperItem.js";
 import { StepperSeparator } from "./StepperSeparator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
-const Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
+//#region src/components/navigation/Stepper/Stepper.tsx
+var Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: UIStyle.useCva("stepper.cva", stepperCva)({
 			orientation,
@@ -29,4 +30,5 @@ const Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrient
 		})
 	});
 };
+//#endregion
 export { Stepper };

package/dist/components/navigation/Stepper/StepperItem.js

@@ -5,7 +5,8 @@ import { stepperIconCva, stepperItemCva, stepperNumberCva, stepperSubtextCva, st
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
-const StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress }) => {
+//#region src/components/navigation/Stepper/StepperItem.tsx
+var StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress }) => {
 	const stepperItemCva$1 = UIStyle.useCva("stepper.itemCva", stepperItemCva);
 	const stepperIconCva$1 = UIStyle.useCva("stepper.iconCva", stepperIconCva);
 	const stepperNumberCva$1 = UIStyle.useCva("stepper.numberCva", stepperNumberCva);
@@ -48,4 +49,5 @@ const StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly,
 		children: content
 	});
 };
+//#endregion
 export { StepperItem };

package/dist/components/navigation/Stepper/StepperSeparator.js

@@ -1,10 +1,12 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { stepperSeparatorCva } from "./stepper.cva.js";
 import { jsx } from "react/jsx-runtime";
-const StepperSeparator = ({ orientation, contentOrientation }) => {
+//#region src/components/navigation/Stepper/StepperSeparator.tsx
+var StepperSeparator = ({ orientation, contentOrientation }) => {
 	return /* @__PURE__ */ jsx("div", { className: UIStyle.useCva("stepper.separatorCva", stepperSeparatorCva)({
 		orientation,
 		contentOrientation
 	}) });
 };
+//#endregion
 export { StepperSeparator };

package/dist/components/navigation/Stepper/stepper.cva.js

@@ -1,19 +1,20 @@
 import { cva } from "class-variance-authority";
-const stepperCva = cva("", {
+//#region src/components/navigation/Stepper/stepper.cva.ts
+var stepperCva = cva("", {
 	variants: { orientation: {
 		horizontal: "flex flex-row items-center gap-stepper-gap-step-to-line-horizontal",
 		vertical: "inline-flex flex-col gap-stepper-gap-step-to-line-vertical"
 	} },
 	defaultVariants: { orientation: "horizontal" }
 });
-const stepperItemCva = cva("flex shrink-0", {
+var stepperItemCva = cva("flex shrink-0", {
 	variants: { contentOrientation: {
 		horizontal: "flex-row items-center gap-stepper-gap-icon-to-text-horizontal text-left",
 		vertical: "flex-col items-center gap-stepper-gap-icon-to-text-vertical text-center"
 	} },
 	defaultVariants: { contentOrientation: "horizontal" }
 });
-const stepperIconCva = cva("inline-flex size-5 shrink-0 items-center justify-center rounded-stepper-rounding-icon", {
+var stepperIconCva = cva("inline-flex size-5 shrink-0 items-center justify-center rounded-stepper-rounding-icon", {
 	variants: { status: {
 		completed: [
 			"border border-interactive-outlined-primary-outline-idle border-solid bg-interactive-contained-primary-idle",
@@ -25,7 +26,7 @@ const stepperIconCva = cva("inline-flex size-5 shrink-0 items-center justify-cen
 	} },
 	defaultVariants: { status: "todo" }
 });
-const stepperNumberCva = cva("text-center align-middle", {
+var stepperNumberCva = cva("text-center align-middle", {
 	variants: { status: {
 		completed: "",
 		active: "text-interactive-outlined-primary-on-idle",
@@ -33,7 +34,7 @@ const stepperNumberCva = cva("text-center align-middle", {
 	} },
 	defaultVariants: { status: "todo" }
 });
-const stepperTitleCva = cva("", {
+var stepperTitleCva = cva("", {
 	variants: { status: {
 		completed: [
 			"text-interactive-text-secondary-idle",
@@ -45,7 +46,7 @@ const stepperTitleCva = cva("", {
 	} },
 	defaultVariants: { status: "todo" }
 });
-const stepperSubtextCva = cva("", {
+var stepperSubtextCva = cva("", {
 	variants: { status: {
 		completed: [
 			"text-interactive-text-secondary-idle",
@@ -57,7 +58,7 @@ const stepperSubtextCva = cva("", {
 	} },
 	defaultVariants: { status: "todo" }
 });
-const stepperSeparatorCva = cva("bg-elevation-outline-default-1", {
+var stepperSeparatorCva = cva("bg-elevation-outline-default-1", {
 	variants: {
 		orientation: {
 			horizontal: "h-px min-w-4 flex-1",
@@ -90,4 +91,5 @@ const stepperSeparatorCva = cva("bg-elevation-outline-default-1", {
 		}
 	]
 });
+//#endregion
 export { stepperCva, stepperIconCva, stepperItemCva, stepperNumberCva, stepperSeparatorCva, stepperSubtextCva, stepperTitleCva };

package/dist/components/outline.clsx.js

@@ -1,4 +1,6 @@
 import { clsx } from "clsx";
-const uiOutlineClass = clsx("focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2", "has-focus-visible:outline has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:outline-offset-2");
-const uiGroupOutlineClass = clsx("group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2");
+//#region src/components/outline.clsx.ts
+var uiOutlineClass = clsx("focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2", "has-focus-visible:outline has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:outline-offset-2");
+var uiGroupOutlineClass = clsx("group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2");
+//#endregion
 export { uiGroupOutlineClass, uiOutlineClass };

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -4,12 +4,13 @@ import { Button } from "../../buttons/Button/Button.js";
 import { Modal } from "../Modal/Modal.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+//#region src/components/overlays/ActionModal/ActionModal.tsx
 var textAlignClassMap = {
 	left: "text-left",
 	center: "text-center",
 	right: "text-right"
 };
-const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
+var ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
 	const ui = UIConfig.useConfig();
 	const textAlignClass = textAlignClassMap[textAlign];
 	return /* @__PURE__ */ jsxs(Modal, {
@@ -49,4 +50,5 @@ const ActionModal = ({ heading, description, primaryAction, secondaryAction, but
 		})]
 	});
 };
+//#endregion
 export { ActionModal };

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -8,6 +8,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
 import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
+//#region src/components/overlays/BottomSheet/BottomSheet.tsx
 var MotionModal = motion.create(Modal);
 var MotionModalOverlay = motion.create(ModalOverlay);
 var inertiaTransition = {
@@ -196,7 +197,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		})]
 	}) });
 };
-const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
+var BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
 	const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
 	const hasTrigger = !!trigger;
 	useEffect(() => {
@@ -227,4 +228,5 @@ const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, childr
 		children
 	});
 };
+//#endregion
 export { BottomSheet };

package/dist/components/overlays/BottomSheet/BottomSheetHeader.js

@@ -1,11 +1,12 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { Typography } from "../../text/Typography/Typography.js";
-import { ns } from "../../../config/i18n.js";
+import "../../../config/i18n.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
+//#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
+var BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
@@ -33,4 +34,5 @@ const BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hide
 		})]
 	});
 };
+//#endregion
 export { BottomSheetHeader };

package/dist/components/overlays/Drawer/Drawer.js

@@ -2,7 +2,8 @@ import { modalOverlay } from "../Modal/modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
-const Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
+//#region src/components/overlays/Drawer/Drawer.tsx
+var Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,
 		onOpenChange,
@@ -48,4 +49,5 @@ var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children
 		})
 	});
 };
+//#endregion
 export { Drawer };

package/dist/components/overlays/Modal/Modal.js

@@ -1,13 +1,14 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../config/i18n.js";
+import "../../../config/i18n.js";
 import { modalContent, modalMain, modalOverlay } from "./modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
+//#region src/components/overlays/Modal/Modal.tsx
+var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
 	const { t } = useTranslation("ui");
 	const modalMainCva = UIStyle.useCva("modal.mainCva", modalMain);
 	const modalContentCva = UIStyle.useCva("modal.contentCva", modalContent);
@@ -50,4 +51,5 @@ const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalCl
 		})
 	});
 };
+//#endregion
 export { Modal$1 as Modal };