@povio/ui 2.1.22 → 2.2.1

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

@@ -0,0 +1,97 @@
+import { cva } from "class-variance-authority";
+const accordionCva = cva("flex w-full flex-col", {
+	variants: {
+		variant: {
+			filled: "gap-1",
+			outlined: ""
+		},
+		singleItem: {
+			true: "",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "filled",
+		singleItem: false
+	},
+	compoundVariants: [{
+		variant: "outlined",
+		singleItem: false,
+		className: "rounded-global-rounding-s border border-elevation-outline-default-1"
+	}]
+});
+const accordionItemCva = cva("flex w-full flex-col", {
+	variants: {
+		variant: {
+			filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2",
+			outlined: ""
+		},
+		singleItem: {
+			true: "",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "filled",
+		singleItem: false
+	},
+	compoundVariants: [{
+		singleItem: true,
+		variant: "outlined",
+		className: "border-elevation-outline-default-1 border-b"
+	}, {
+		singleItem: false,
+		variant: "outlined",
+		className: "not-last:border-elevation-outline-default-1 not-last:border-b"
+	}]
+});
+const 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"
+], {
+	variants: {
+		variant: {
+			outlined: "rounded-accordion-rounding-outlined hover:bg-elevation-fill-default-2",
+			filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2 hover:bg-elevation-fill-default-3"
+		},
+		actionPosition: {
+			left: "flex-row-reverse",
+			right: "flex-row"
+		},
+		disabled: { true: "opacity-50" }
+	},
+	defaultVariants: {
+		variant: "filled",
+		actionPosition: "right"
+	}
+});
+const 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", {
+	variants: {},
+	defaultVariants: {}
+});
+const 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", {
+	variants: { isExpanded: {
+		true: "rotate-180",
+		false: "rotate-0"
+	} },
+	defaultVariants: { isExpanded: false }
+});
+const 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", {
+	variants: {},
+	defaultVariants: {}
+});
+export { accordionChevronCva, accordionCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva };

package/dist/components/navigation/Accordion/accordion.types.d.ts

@@ -0,0 +1,52 @@
+import { FC, ReactNode, SVGProps } from 'react';
+import { Key } from 'react-aria-components';
+export interface AccordionItem {
+    /** Unique identifier for the item */
+    id: Key;
+    /** Main heading text */
+    heading: string;
+    /** Optional subheading text */
+    subheading?: string;
+    /** Content displayed when expanded */
+    children: ReactNode;
+    /** Optional leading icon */
+    icon?: FC<SVGProps<SVGSVGElement>>;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    /** Array of accordion items */
+    items: AccordionItem[];
+    /** Visual style variant */
+    variant?: "filled" | "outlined";
+    /** Position of the expand/collapse chevron */
+    actionPosition?: "left" | "right";
+    /** Allow multiple items to be expanded simultaneously */
+    allowsMultipleExpanded?: boolean;
+    /** Controlled expanded keys */
+    expandedKeys?: Iterable<Key>;
+    /** Default expanded keys (uncontrolled) */
+    defaultExpandedKeys?: Iterable<Key>;
+    /** Callback when expansion state changes */
+    onExpandedChange?: (keys: Set<Key>) => void;
+    /** Additional CSS class */
+    className?: string;
+    disabled?: boolean;
+}
+export interface AccordionItemProps {
+    /** Unique identifier for the item */
+    id: Key;
+    /** Main heading text */
+    heading: string;
+    /** Optional subheading text */
+    subheading?: string;
+    /** Content displayed when expanded */
+    children: ReactNode;
+    /** Optional leading icon */
+    icon?: FC<SVGProps<SVGSVGElement>>;
+    /** Visual style variant */
+    variant?: "filled" | "outlined";
+    /** Position of the expand/collapse chevron */
+    actionPosition?: "left" | "right";
+    disabled?: boolean;
+    isSingle?: boolean;
+}

package/dist/components/navigation/Stepper/Stepper.d.ts

@@ -0,0 +1,2 @@
+import { StepperProps } from './stepper.types';
+export declare const Stepper: ({ steps, currentStep, orientation, contentOrientation, iconsOnly, titlesOnly, onStepClick, className, }: StepperProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { stepperCva } from "./stepper.cva.js";
+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 }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: (UIStyle.useConfig()?.stepper?.cva ?? stepperCva)({
+			orientation,
+			className
+		}),
+		role: "group",
+		"aria-label": "Progress",
+		children: steps.map((step, index) => {
+			const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
+				step,
+				stepNumber: index + 1,
+				status,
+				contentOrientation,
+				iconsOnly,
+				titlesOnly,
+				onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
+			}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
+				orientation,
+				contentOrientation
+			})] }, step.id);
+		})
+	});
+};
+export { Stepper };

package/dist/components/navigation/Stepper/StepperItem.d.ts

@@ -0,0 +1,2 @@
+import { StepperItemProps } from './stepper.types';
+export declare const StepperItem: ({ step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress, }: StepperItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,52 @@
+import { CheckIcon } from "../../../assets/icons/Check.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { stepperIconCva, stepperItemCva, stepperNumberCva, stepperSubtextCva, stepperTitleCva } from "./stepper.cva.js";
+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 }) => {
+	const uiStyle = UIStyle.useConfig();
+	const stepperItemCva$1 = uiStyle?.stepper?.itemCva ?? stepperItemCva;
+	const stepperIconCva$1 = uiStyle?.stepper?.iconCva ?? stepperIconCva;
+	const stepperNumberCva$1 = uiStyle?.stepper?.numberCva ?? stepperNumberCva;
+	const stepperTitleCva$1 = uiStyle?.stepper?.titleCva ?? stepperTitleCva;
+	const stepperSubtextCva$1 = uiStyle?.stepper?.subtextCva ?? stepperSubtextCva;
+	const showTitle = !iconsOnly;
+	const showSubtext = !iconsOnly && !titlesOnly && !!step.subtext;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: stepperIconCva$1({ status }),
+		children: status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
+			className: stepperNumberCva$1({ status }),
+			variant: "prominent-1",
+			size: "label-3",
+			children: stepNumber
+		})
+	}), showTitle && /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-stepper-gap-text-to-subtext",
+		children: [/* @__PURE__ */ jsx(Typography, {
+			className: stepperTitleCva$1({ status }),
+			size: "label-2",
+			variant: "default",
+			children: step.title
+		}), showSubtext && /* @__PURE__ */ jsx(Typography, {
+			className: stepperSubtextCva$1({ status }),
+			size: "label-3",
+			variant: "default",
+			children: step.subtext
+		})]
+	})] });
+	const className = stepperItemCva$1({ contentOrientation });
+	if (onPress) return /* @__PURE__ */ jsx(Button, {
+		onPress,
+		className: clsx("group cursor-pointer", className),
+		"aria-current": status === "active" ? "step" : void 0,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"aria-current": status === "active" ? "step" : void 0,
+		children: content
+	});
+};
+export { StepperItem };

package/dist/components/navigation/Stepper/StepperSeparator.d.ts

@@ -0,0 +1,5 @@
+import { StepperSeparatorVariantProps } from './stepper.cva';
+interface StepperSeparatorProps extends StepperSeparatorVariantProps {
+}
+export declare const StepperSeparator: ({ orientation, contentOrientation }: StepperSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { stepperSeparatorCva } from "./stepper.cva.js";
+import { jsx } from "react/jsx-runtime";
+const StepperSeparator = ({ orientation, contentOrientation }) => {
+	return /* @__PURE__ */ jsx("div", { className: (UIStyle.useConfig()?.stepper?.separatorCva ?? stepperSeparatorCva)({
+		orientation,
+		contentOrientation
+	}) });
+};
+export { StepperSeparator };

package/dist/components/navigation/Stepper/stepper.cva.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const stepperCva: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperVariantProps extends VariantProps<typeof stepperCva> {
+}
+export declare const stepperItemCva: (props?: ({
+    contentOrientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperItemVariantProps extends VariantProps<typeof stepperItemCva> {
+}
+export declare const stepperIconCva: (props?: ({
+    status?: "completed" | "active" | "todo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperIconVariantProps extends VariantProps<typeof stepperIconCva> {
+}
+export declare const stepperNumberCva: (props?: ({
+    status?: "completed" | "active" | "todo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperNumberVariantProps extends VariantProps<typeof stepperNumberCva> {
+}
+export declare const stepperTitleCva: (props?: ({
+    status?: "completed" | "active" | "todo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperTitleVariantProps extends VariantProps<typeof stepperTitleCva> {
+}
+export declare const stepperSubtextCva: (props?: ({
+    status?: "completed" | "active" | "todo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperSubtextVariantProps extends VariantProps<typeof stepperSubtextCva> {
+}
+export declare const stepperSeparatorCva: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    contentOrientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperSeparatorVariantProps extends VariantProps<typeof stepperSeparatorCva> {
+}

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

@@ -0,0 +1,93 @@
+import { cva } from "class-variance-authority";
+const 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", {
+	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", {
+	variants: { status: {
+		completed: [
+			"border border-interactive-outlined-primary-outline-idle border-solid bg-interactive-contained-primary-idle",
+			"group-hover:border-interactive-outlined-primary-outline-hover group-hover:bg-interactive-contained-primary-hover",
+			"group-pressed:border-interactive-outlined-primary-outline-pressed group-pressed:bg-interactive-contained-primary-pressed"
+		],
+		active: "border border-interactive-outlined-primary-on-idle border-solid bg-interactive-outlined-primary-idle",
+		todo: "border border-interactive-outlined-primary-outline-disabled border-solid bg-interactive-outlined-primary-disabled"
+	} },
+	defaultVariants: { status: "todo" }
+});
+const stepperNumberCva = cva("text-center align-middle", {
+	variants: { status: {
+		completed: "",
+		active: "text-interactive-outlined-primary-on-idle",
+		todo: "text-interactive-outlined-primary-on-disabled"
+	} },
+	defaultVariants: { status: "todo" }
+});
+const stepperTitleCva = cva("", {
+	variants: { status: {
+		completed: [
+			"text-interactive-text-secondary-idle",
+			"group-hover:text-interactive-text-secondary-hover",
+			"group-pressed:text-interactive-text-secondary-pressed"
+		],
+		active: "text-interactive-text-primary-idle",
+		todo: "text-interactive-text-secondary-disabled"
+	} },
+	defaultVariants: { status: "todo" }
+});
+const stepperSubtextCva = cva("", {
+	variants: { status: {
+		completed: [
+			"text-interactive-text-secondary-idle",
+			"group-hover:text-interactive-text-secondary-hover",
+			"group-pressed:text-interactive-text-secondary-pressed"
+		],
+		active: "text-interactive-text-secondary-idle",
+		todo: "text-interactive-text-secondary-disabled"
+	} },
+	defaultVariants: { status: "todo" }
+});
+const stepperSeparatorCva = cva("bg-elevation-outline-default-1", {
+	variants: {
+		orientation: {
+			horizontal: "h-px min-w-4 flex-1",
+			vertical: "min-h-16 w-px"
+		},
+		contentOrientation: {
+			horizontal: "",
+			vertical: ""
+		}
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		contentOrientation: "horizontal"
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			contentOrientation: "vertical",
+			className: "mt-stepper-horizontal-line-top self-start"
+		},
+		{
+			orientation: "vertical",
+			contentOrientation: "vertical",
+			className: "self-center"
+		},
+		{
+			orientation: "vertical",
+			contentOrientation: "horizontal",
+			className: "ml-stepper-vertical-line-side"
+		}
+	]
+});
+export { stepperCva, stepperIconCva, stepperItemCva, stepperNumberCva, stepperSeparatorCva, stepperSubtextCva, stepperTitleCva };

package/dist/components/navigation/Stepper/stepper.types.d.ts

@@ -0,0 +1,41 @@
+import { StepperItemVariantProps, StepperVariantProps } from './stepper.cva';
+/** A single step definition passed by the consumer. */
+export interface StepItem {
+    /** Unique key for React rendering. */
+    id: string;
+    /** Step title text. Rendered unless iconsOnly is true. */
+    title: string;
+    /** Optional subtext beneath the title. Only rendered in default (full) mode. */
+    subtext?: string;
+}
+/** Derived step status, computed from currentStep index. */
+export type StepStatus = "completed" | "active" | "todo";
+/** Public props for the Stepper component. */
+export interface StepperProps extends StepperVariantProps, StepperItemVariantProps {
+    /** Array of step definitions. Order determines step numbering (1-based). */
+    steps: StepItem[];
+    /**
+     * The current active step index (0-based).
+     * - Steps at index < currentStep are "completed"
+     * - Step at index === currentStep is "active"
+     * - Steps at index > currentStep are "todo"
+     */
+    currentStep: number;
+    /** When true, only step indicator icons are rendered (no title or subtext). */
+    iconsOnly?: boolean;
+    /** When true, step indicator icons and titles are rendered (no subtext). Takes no effect if iconsOnly is true. */
+    titlesOnly?: boolean;
+    /** Callback when a completed step is clicked. Receives the 0-based step index. */
+    onStepClick?: (stepIndex: number) => void;
+    /** Optional className for the root container. */
+    className?: string;
+}
+/** Internal props for StepperItem sub-component. */
+export interface StepperItemProps extends StepperItemVariantProps {
+    step: StepItem;
+    stepNumber: number;
+    status: StepStatus;
+    iconsOnly?: boolean;
+    titlesOnly?: boolean;
+    onPress?: () => void;
+}

package/dist/{ActionModal.js → components/overlays/ActionModal/ActionModal.js}

@@ -1,6 +1,6 @@
-import { Typography } from "./Typography.js";
-import { Button } from "./Button.js";
-import { Modal } from "./Modal.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { Button } from "../../buttons/Button/Button.js";
+import { Modal } from "../Modal/Modal.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 var textAlignClassMap = {
@@ -8,7 +8,7 @@ var textAlignClassMap = {
 	center: "text-center",
 	right: "text-right"
 };
-const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName,...modalProps }) => {
+const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, ...modalProps }) => {
 	const textAlignClass = textAlignClassMap[textAlign];
 	return /* @__PURE__ */ jsxs(Modal, {
 		modalClassName: clsx("w-modal", modalClassName),

package/dist/{BottomSheet.js → components/overlays/BottomSheet/BottomSheet.js}

@@ -1,12 +1,12 @@
-import { react_exports } from "./react.js";
-import { DomUtils } from "./dom.utils.js";
+import { motion, react_exports } from "../../../node_modules/.pnpm/motion@12.23.28_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/motion/dist/es/react.js";
+import { DomUtils } from "../../../utils/dom.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
-var MotionModal = react_exports.motion.create(Modal);
-var MotionModalOverlay = react_exports.motion.create(ModalOverlay);
+var MotionModal = motion.create(Modal);
+var MotionModalOverlay = motion.create(ModalOverlay);
 var inertiaTransition = {
 	type: "inertia",
 	bounceStiffness: 300,
@@ -66,7 +66,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		style: { height: viewport.height },
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
-		children: [/* @__PURE__ */ jsx(react_exports.motion.div, {
+		children: [/* @__PURE__ */ jsx(motion.div, {
 			className: "pointer-events-none absolute inset-0 bg-support-overlay",
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
@@ -154,7 +154,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
 						]
 					}),
-					footer && /* @__PURE__ */ jsx(react_exports.motion.div, {
+					footer && /* @__PURE__ */ jsx(motion.div, {
 						ref: footerRef,
 						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
 						children: footer
@@ -164,7 +164,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		})]
 	}) });
 };
-const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children,...rest }) => {
+const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
 	const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
 	const hasTrigger = !!trigger;
 	useEffect(() => {

package/dist/{Drawer.js → components/overlays/Drawer/Drawer.js}

@@ -1,4 +1,4 @@
-import { modalOverlay } from "./modal.cva.js";
+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";

package/dist/{Modal.js → components/overlays/Modal/Modal.js}

@@ -1,7 +1,7 @@
-import { CloseIcon } from "./Close.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
+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 { modalContent, modalMain, modalOverlay } from "./modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{ResponsivePopover.js → components/overlays/ResponsivePopover/ResponsivePopover.js}

@@ -1,7 +1,7 @@
-import { BottomSheet } from "./BottomSheet.js";
-import { useBreakpoint } from "./useBreakpoint.js";
-import { FormFieldHeader } from "./FormFieldHeader.js";
-import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
+import { BottomSheet } from "../BottomSheet/BottomSheet.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { FormFieldHeader } from "../../inputs/FormField/FormFieldHeader.js";
+import { FormFieldHeaderClose } from "../../inputs/FormField/FormFieldHeaderClose.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";

package/dist/{Tooltip.js → components/overlays/Tooltip/Tooltip.js}

@@ -1,11 +1,12 @@
-import { PointerHorizontalIcon } from "./PointerHorizontal.js";
-import { PointerVerticalIcon } from "./PointerVertical.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
+import { PointerHorizontalIcon } from "../../../assets/icons/PointerHorizontal.js";
+import { PointerVerticalIcon } from "../../../assets/icons/PointerVertical.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
+import { Typography } from "../../text/Typography/Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
+import { clsx } from "clsx";
 import { Fragment as Fragment$1, useRef } from "react";
+import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
 import { useFocusable } from "react-aria";
 var CustomTrigger = ({ children, className, tabIndex }) => {
 	const ref = useRef(null);
@@ -14,11 +15,11 @@ var CustomTrigger = ({ children, className, tabIndex }) => {
 		ref,
 		...focusableProps,
 		tabIndex: tabIndex ?? 0,
-		className,
+		className: clsx("inline-flex", className),
 		children
 	});
 };
-const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex,...tooltipProps }) => {
+const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }) => {
 	const uiStyle = UIStyle.useConfig();
 	const tooltipCva$1 = uiStyle?.tooltip?.cva ?? tooltipCva;
 	const tooltipPointerHorizontalCva$1 = uiStyle?.tooltip?.pointerHorizontalCva ?? tooltipPointerHorizontalCva;

package/dist/components/overlays/Tooltip/TooltipEllipsis.d.ts

@@ -1,7 +1,8 @@
 import { JSX, Ref } from 'react';
 export interface TooltipEllipsisProps {
     text: string;
-    children: (ref: Ref<HTMLHeadingElement> | undefined) => JSX.Element;
+    children: (ref: Ref<HTMLElement> | undefined) => JSX.Element;
     isDisabled?: boolean;
+    isNonInteractiveTrigger?: boolean;
 }
-export declare const TooltipEllipsis: ({ text, children, isDisabled }: TooltipEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipEllipsis: ({ text, children, isDisabled, isNonInteractiveTrigger }: TooltipEllipsisProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{TooltipEllipsis.js → components/overlays/Tooltip/TooltipEllipsis.js}

@@ -1,7 +1,7 @@
 import { Tooltip } from "./Tooltip.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-const TooltipEllipsis = ({ text, children, isDisabled }) => {
+const TooltipEllipsis = ({ text, children, isDisabled, isNonInteractiveTrigger }) => {
 	const [isEllipsisActive, setIsEllipsisActive] = useState(false);
 	const onContentRef = (ref) => {
 		if (ref) setIsEllipsisActive(ref.offsetWidth < ref.scrollWidth);
@@ -11,6 +11,7 @@ const TooltipEllipsis = ({ text, children, isDisabled }) => {
 		text,
 		placement: "bottom",
 		isDisabled,
+		isNonInteractiveTrigger,
 		children: content
 	});
 	return content;

package/dist/{tooltip.cva.js → components/overlays/Tooltip/tooltip.cva.js}

@@ -22,7 +22,7 @@ const tooltipPointerVerticalCva = cva(["h-5 w-2-5 group-placement-bottom:hidden
 });
 const tooltipTextCva = cva([], {
 	variants: { color: {
-		default: ["text-text-inverted-3"],
+		default: ["text-interactive-contained-secondary-on-idle"],
 		error: ["text-text-error-inverted-1"]
 	} },
 	defaultVariants: { color: "default" }

package/dist/{Segment.js → components/segment/Segment.js}

@@ -1,16 +1,16 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { FormField } from "./FormField.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+import { FormField } from "../inputs/FormField/FormField.js";
 import { segmentCva } from "./segment.cva.js";
 import { SegmentItem } from "./SegmentItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { ToggleButtonGroup } from "react-aria-components";
 import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { ToggleButtonGroup } from "react-aria-components";
 import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -63,7 +63,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...r
 };
 const Segment = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{SegmentItem.js → components/segment/SegmentItem.js}

@@ -1,9 +1,9 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+import { Typography } from "../text/Typography/Typography.js";
 import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
-const SegmentItem = ({ label, icon, id, isDisabled,...props }) => {
+const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useConfig()?.segment?.itemCva ?? segmentItemCva;