@povio/ui 2.2.0 → 2.2.2

package/dist/{Stepper.js → components/navigation/Stepper/Stepper.js}

@@ -1,4 +1,4 @@
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { stepperCva } from "./stepper.cva.js";
 import { StepperItem } from "./StepperItem.js";
 import { StepperSeparator } from "./StepperSeparator.js";
@@ -6,7 +6,7 @@ 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)({
+		className: UIStyle.useCva("stepper.cva", stepperCva)({
 			orientation,
 			className
 		}),

package/dist/{StepperItem.js → components/navigation/Stepper/StepperItem.js}

@@ -1,17 +1,16 @@
-import { CheckIcon } from "./Check.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
+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 stepperItemCva$1 = UIStyle.useCva("stepper.itemCva", stepperItemCva);
+	const stepperIconCva$1 = UIStyle.useCva("stepper.iconCva", stepperIconCva);
+	const stepperNumberCva$1 = UIStyle.useCva("stepper.numberCva", stepperNumberCva);
+	const stepperTitleCva$1 = UIStyle.useCva("stepper.titleCva", stepperTitleCva);
+	const stepperSubtextCva$1 = UIStyle.useCva("stepper.subtextCva", stepperSubtextCva);
 	const showTitle = !iconsOnly;
 	const showSubtext = !iconsOnly && !titlesOnly && !!step.subtext;
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {

package/dist/{StepperSeparator.js → components/navigation/Stepper/StepperSeparator.js}

@@ -1,8 +1,8 @@
-import { UIStyle } from "./uiStyle.context.js";
+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)({
+	return /* @__PURE__ */ jsx("div", { className: UIStyle.useCva("stepper.separatorCva", stepperSeparatorCva)({
 		orientation,
 		contentOrientation
 	}) });

package/dist/{outline.clsx.js → components/outline.clsx.js}

@@ -1,4 +1,4 @@
 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");
+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");
 export { uiGroupOutlineClass, uiOutlineClass };

package/dist/components/overlays/ActionModal/ActionModal.d.ts

@@ -1,5 +1,6 @@
 import { ButtonVariantProps } from '../../buttons/Button/button.cva';
 import { ModalProps } from '../Modal/Modal';
+import { TypographyPropsCva } from '../../text/Typography/Typography';
 interface ActionModalAction {
     label: string;
     onPress: () => void;
@@ -14,6 +15,10 @@ export interface ActionModalProps extends ModalProps {
     secondaryAction?: ActionModalAction;
     buttonSize?: ButtonVariantProps["size"];
     textAlign?: "left" | "center" | "right";
+    titleTypography?: TypographyPropsCva;
+    titleClassName?: string;
+    descriptionTypography?: TypographyPropsCva;
+    descriptionClassName?: string;
 }
-export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
-import { Typography } from "./Typography.js";
-import { Button } from "./Button.js";
-import { Modal } from "./Modal.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { UIConfig } from "../../../config/uiConfig.context.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 +9,8 @@ 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, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
+	const ui = UIConfig.useConfig();
 	const textAlignClass = textAlignClassMap[textAlign];
 	return /* @__PURE__ */ jsxs(Modal, {
 		modalClassName: clsx("w-modal", modalClassName),
@@ -16,14 +18,13 @@ const ActionModal = ({ heading, description, primaryAction, secondaryAction, but
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-modal-gap-text",
 			children: [/* @__PURE__ */ jsx(Typography, {
-				size: "title-5",
-				variant: "prominent-1",
+				...titleTypography ?? ui.actionModal.titleTypography,
 				as: "h2",
-				className: clsx("text-text-default-1", textAlignClass),
+				className: clsx("text-text-default-1", textAlignClass, titleClassName),
 				children: heading
 			}), /* @__PURE__ */ jsx(Typography, {
-				size: "body-3",
-				className: clsx("text-text-default-1", textAlignClass),
+				...descriptionTypography ?? ui.actionModal.descriptionTypography,
+				className: clsx("text-text-default-1", textAlignClass, descriptionClassName),
 				children: description
 			})]
 		}), /* @__PURE__ */ jsxs("div", {

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 { 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/components/overlays/Modal/Modal.d.ts

@@ -9,6 +9,7 @@ export interface ModalProps extends ModalVariantProps {
     overlayClassName?: string;
     showCloseIcon?: boolean;
     isDismissable?: boolean;
+    isKeyboardDismissable?: boolean;
     shouldCloseOnInteractOutside?: () => boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, shouldCloseOnInteractOutside, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, isKeyboardDismissable, shouldCloseOnInteractOutside, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,17 @@
-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";
 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, shouldCloseOnInteractOutside }) => {
+const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
 	const { t } = useTranslation("ui");
-	const uiStyle = UIStyle.useConfig();
-	const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
-	const modalContentCva = uiStyle?.modal?.contentCva ?? modalContent;
-	const modalOverlayCva = uiStyle?.modal?.overlayCva ?? modalOverlay;
+	const modalMainCva = UIStyle.useCva("modal.mainCva", modalMain);
+	const modalContentCva = UIStyle.useCva("modal.contentCva", modalContent);
+	const modalOverlayCva = UIStyle.useCva("modal.overlayCva", modalOverlay);
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: modalOverlayCva({
@@ -20,6 +19,7 @@ const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalCl
 			className: overlayClassName
 		}),
 		isDismissable,
+		isKeyboardDismissDisabled: !(isKeyboardDismissable ?? isDismissable),
 		isOpen,
 		shouldCloseOnInteractOutside: () => {
 			if (shouldCloseOnInteractOutside) {

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,9 +1,10 @@
-import { PointerHorizontalIcon } from "./PointerHorizontal.js";
-import { PointerVerticalIcon } from "./PointerVertical.js";
-import { UIStyle } from "./uiStyle.context.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 "./Typography.js";
+import { Typography } from "../../text/Typography/Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+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";
@@ -14,16 +15,15 @@ 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 uiStyle = UIStyle.useConfig();
-	const tooltipCva$1 = uiStyle?.tooltip?.cva ?? tooltipCva;
-	const tooltipPointerHorizontalCva$1 = uiStyle?.tooltip?.pointerHorizontalCva ?? tooltipPointerHorizontalCva;
-	const tooltipPointerVerticalCva$1 = uiStyle?.tooltip?.pointerVerticalCva ?? tooltipPointerVerticalCva;
-	const tooltipTextCva$1 = uiStyle?.tooltip?.textCva ?? tooltipTextCva;
+const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }) => {
+	const tooltipCva$1 = UIStyle.useCva("tooltip.cva", tooltipCva);
+	const tooltipPointerHorizontalCva$1 = UIStyle.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalCva);
+	const tooltipPointerVerticalCva$1 = UIStyle.useCva("tooltip.pointerVerticalCva", tooltipPointerVerticalCva);
+	const tooltipTextCva$1 = UIStyle.useCva("tooltip.textCva", tooltipTextCva);
 	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment$1;
 	return /* @__PURE__ */ jsxs(TooltipTrigger, {
 		delay: delay ?? 0,

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/{Segment.js → components/segment/Segment.js}

@@ -1,5 +1,5 @@
-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";
@@ -10,17 +10,16 @@ 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,
 		selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
 	};
 	const buttonGroupRef = useRef(null);
-	const uiStyle = UIStyle.useConfig();
 	const state = useToggleGroupState(props);
 	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
-	const segmentCva$1 = uiStyle?.segment?.cva ?? segmentCva;
+	const segmentCva$1 = UIStyle.useCva("segment.cva", segmentCva);
 	const formFieldProps = {
 		error,
 		label: "",
@@ -63,7 +62,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,12 +1,12 @@
-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;
+	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,

package/dist/{Pagination.js → components/shared/pagination/Pagination.js}

@@ -1,6 +1,6 @@
-import { Typography } from "./Typography.js";
-import { ns } from "./i18n.js";
-import { NumberInput } from "./NumberInput.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { NumberInput } from "../../inputs/Input/NumberInput/NumberInput.js";
 import { PaginationList } from "./PaginationList.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{PaginationList.js → components/shared/pagination/PaginationList.js}

@@ -1,9 +1,9 @@
-import { ChevronLeftIcon } from "./ChevronLeft.js";
-import { ChevronRightIcon } from "./ChevronRight.js";
-import { ChevronsLeftIcon } from "./ChevronsLeft.js";
-import { ChevronsRightIcon } from "./ChevronsRight.js";
-import { Button } from "./Button.js";
-import { ns } from "./i18n.js";
+import { ChevronLeftIcon } from "../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "../../../assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "../../../assets/icons/ChevronsRight.js";
+import { Button } from "../../buttons/Button/Button.js";
+import { ns } from "../../../config/i18n.js";
 import { minWidth } from "./minWidth.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{Alert.js → components/status/Alert/Alert.js}

@@ -1,14 +1,13 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { Loader } from "./Loader.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { Loader } from "../Loader/Loader.js";
 import { alert } from "./alert.cva.js";
-import { statusIcon, statusSeparator } from "./status.cva.js";
+import { statusIcon, statusSeparator } from "../shared/status.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
-	const uiStyle = UIStyle.useConfig();
-	const alertCva = uiStyle?.alert?.cva ?? alert;
-	const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
-	const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+	const alertCva = UIStyle.useCva("alert.cva", alert);
+	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
+	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
 	return /* @__PURE__ */ jsx("div", {
 		className: alertCva({
 			variant,

package/dist/{Loader.js → components/status/Loader/Loader.js}

@@ -1,6 +1,6 @@
 import { loader, loaderWrapper } from "./loader.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const Loader = ({ size, className,...props }) => {
+const Loader = ({ size, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: loaderWrapper({
 			size,

package/dist/{Toast.js → components/status/Toast/Toast.js}

@@ -1,17 +1,16 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { Loader } from "./Loader.js";
-import { Button } from "./Button.js";
-import { statusIcon, statusSeparator } from "./status.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { Loader } from "../Loader/Loader.js";
+import { Button } from "../../buttons/Button/Button.js";
+import { statusIcon, statusSeparator } from "../shared/status.cva.js";
 import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } from "./toast.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
-const Toast = ({ text, isLoading = false, actions = [], icon: Icon,...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const toastCva = uiStyle?.toast?.cva ?? toast$1;
-	const buttonColor = uiStyle?.toast?.buttonColor ?? buttonColorVariant;
-	const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
-	const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
+	const toastCva = UIStyle.useCva("toast.cva", toast$1);
+	const buttonColor = UIStyle.useMapper("toast.buttonColor", buttonColorVariant);
+	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
+	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
 	return /* @__PURE__ */ jsxs("div", {
 		className: toastCva({ ...props }),
 		children: [/* @__PURE__ */ jsxs("div", {

package/dist/{toast.cva.js → components/status/Toast/toast.cva.js}

@@ -1,4 +1,4 @@
-import { compoundMapper } from "./compoundMapper.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toast-gap-margin-desktop", { variants: { position: {

package/dist/{CellText.js → components/table/CellText.js}

@@ -1,4 +1,4 @@
-import { Typography } from "./Typography.js";
+import { Typography } from "../text/Typography/Typography.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 const CellText = ({ children, style, className }) => /* @__PURE__ */ jsx(Typography, {

package/dist/{ColumnConfig.js → components/table/ColumnConfig.js}

@@ -1,9 +1,9 @@
-import { Typography } from "./Typography.js";
-import { Checkbox } from "./Checkbox.js";
-import { ns } from "./i18n.js";
-import { Modal } from "./Modal.js";
+import { Typography } from "../text/Typography/Typography.js";
+import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
+import { ns } from "../../config/i18n.js";
+import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
-import { useTranslationMemo } from "./useTranslationMemo.js";
+import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

package/dist/{HeaderText.js → components/table/HeaderText.js}

@@ -1,4 +1,4 @@
-import { Typography } from "./Typography.js";
+import { Typography } from "../text/Typography/Typography.js";
 import { jsx } from "react/jsx-runtime";
 const HeaderText = ({ children }) => /* @__PURE__ */ jsx(Typography, {
 	variant: "default",

package/dist/{InfiniteTable.js → components/table/InfiniteTable.js}

@@ -1,9 +1,9 @@
-import { Loader } from "./Loader.js";
-import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { Loader } from "../status/Loader/Loader.js";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { Table } from "./Table.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-const InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage,...rest }) => {
+const InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
 	const { ref } = useIntersectionObserver({
 		onIntersection: useCallback(() => {
 			if (!isFetchingNextPage && hasNextPage) fetchNextPage();

package/dist/{PaginatedTable.js → components/table/PaginatedTable.js}

@@ -1,7 +1,7 @@
-import { Pagination } from "./Pagination.js";
+import { Pagination } from "../shared/pagination/Pagination.js";
 import { Table } from "./Table.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const PaginatedTable = ({ pagination, setPagination, items, totalItems,...rest }) => {
+const PaginatedTable = ({ pagination, setPagination, items, totalItems, ...rest }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-4",
 		children: [/* @__PURE__ */ jsx(Table, {

package/dist/{Table.js → components/table/Table.js}

@@ -1,12 +1,12 @@
-import { ChevronDownIcon } from "./ChevronDown.js";
-import { ChevronUpIcon } from "./ChevronUp.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
+import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { CellText } from "./CellText.js";
-import { DragIndicatorIcon } from "./DragIndicator.js";
+import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
-import { useTableNav } from "./useTableNav.js";
+import { useTableNav } from "../../hooks/useTableNav.js";
 import { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -40,7 +40,7 @@ const RowDragHandleCell = ({ rowId }) => {
 	});
 };
 var AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
-var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCva, tableDataCva, hasOnClick,...props }) => {
+var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCva, tableDataCva, hasOnClick, ...props }) => {
 	const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
 	return /* @__PURE__ */ jsx("tr", {
 		ref: setNodeRef,
@@ -51,12 +51,15 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			zIndex: isDragging ? 1 : 0,
 			position: "relative"
 		},
-		"data-clickable": hasOnClick,
+		"data-clickable": hasOnClick || row.getCanSelect() || void 0,
 		"data-selected": row.getIsSelected() || void 0,
 		className: clsx(tableRowCva(props)),
 		onClick: () => {
-			row.toggleSelected();
-			onRowClick?.(row.original);
+			if (onRowClick) {
+				onRowClick(row.original);
+				return;
+			}
+			if (row.getCanSelect()) row.toggleSelected();
 		},
 		onDoubleClick: () => onDoubleClick?.(row.original),
 		children: row.getVisibleCells().map((cell, cellIndex) => {
@@ -69,12 +72,11 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 		})
 	});
 };
-const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange,...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const tableRowCva = uiStyle?.table?.rowCva ?? tableRow;
-	const tableHeadRowCva = uiStyle?.table?.headRowCva ?? tableHeadRow;
-	const tableHeadDataCva = uiStyle?.table?.headDataCva ?? tableHeadData;
-	const tableDataCva = uiStyle?.table?.dataCva ?? tableData;
+const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
+	const tableRowCva = UIStyle.useCva("table.rowCva", tableRow);
+	const tableHeadRowCva = UIStyle.useCva("table.headRowCva", tableHeadRow);
+	const tableHeadDataCva = UIStyle.useCva("table.headDataCva", tableHeadData);
+	const tableDataCva = UIStyle.useCva("table.dataCva", tableData);
 	const ref = useRef(null);
 	const { listeners } = useTableNav();
 	const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
@@ -228,11 +230,14 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 				return /* @__PURE__ */ jsx("tr", {
 					className: clsx(tableRowCva({ ...props })),
 					onClick: () => {
-						row.toggleSelected();
-						onRowClick?.(row.original);
+						if (onRowClick) {
+							onRowClick(row.original);
+							return;
+						}
+						if (row.getCanSelect()) row.toggleSelected();
 					},
 					onDoubleClick: () => onDoubleClick?.(row.original),
-					"data-clickable": hasOnClick,
+					"data-clickable": hasOnClick || row.getCanSelect() || void 0,
 					"data-selected": row.getIsSelected() || void 0,
 					children: row.getVisibleCells().map((cell, cellIndex) => {
 						const columnMeta = cell.column.columnDef.meta ?? {};

package/dist/{table.cva.js → components/table/table.cva.js}

@@ -12,7 +12,7 @@ const tableRow = cva([
 	odd: "odd:bg-elevation-fill-inverted-4/5"
 } } });
 const tableHeadRow = cva(["h-8 w-full"]);
-const tableHeadData = cva(["border-b border-b-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"], {
+const tableHeadData = cva(["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"], {
 	variants: { hasRightBorder: {
 		true: "border-l border-l-elevation-outline-default-1 border-solid",
 		false: ""