@povio/ui 2.2.4 → 2.2.6

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -1,3 +1,5 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { popover } from "../../../shared/popover.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { SelectAllItemId } from "./useSelectItems.js";
@@ -12,6 +14,7 @@ import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
 	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const formFieldProps = {
 		error,
 		label,
@@ -148,7 +151,7 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
-						className: "max-h-80! rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]",
+						className: clsx(popoverCva({}), "max-h-80! [scrollbar-width:thin]"),
 						autoFocus: !isSearchable
 					})
 				})]

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -1,8 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { ns } from "../../../../config/i18n.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";

package/dist/components/inputs/Selection/shared/SelectListBoxItem.js

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { ns } from "../../../../config/i18n.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { ns } from "../../../../config/i18n.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.js

@@ -1,5 +1,5 @@
-import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { ns } from "../../../../config/i18n.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/components/inputs/Selection/shared/SelectMobile.js

@@ -1,10 +1,10 @@
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
-import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { FormField } from "../../FormField/FormField.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { SearchIcon } from "../../../../assets/icons/Search.js";
+import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { TextInput } from "../../Input/TextInput/TextInput.js";
 import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -13,7 +13,7 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -41,9 +41,15 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 	};
 	const { fieldState, isOpen, setIsOpen, onInputChange, isMultiple } = SelectContext.useSelect();
 	const searchInputRef = useRef(null);
+	const onBlurRef = useRef(onBlur);
+	onBlurRef.current = onBlur;
+	const handleOpenChange = (open) => {
+		if (!open) onBlurRef.current?.({});
+		setIsOpen(open);
+	};
 	const dialogTriggerProps = {
 		isOpen,
-		onOpenChange: setIsOpen
+		onOpenChange: handleOpenChange
 	};
 	return /* @__PURE__ */ jsx(FormField, {
 		...formFieldProps,
@@ -68,23 +74,24 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 				isSearchable: false,
 				isClearable,
 				showSelectionContent,
-				onBlur,
+				onBlur: void 0,
 				fieldProps,
 				headerProps,
 				collapseAfter,
 				selectedTagsType
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
-				onOpenChange: setIsOpen,
+				onOpenChange: handleOpenChange,
 				onStateChange: (state) => {
 					if (state === "opened") searchInputRef.current?.focus();
 				},
 				label,
 				footer: isMultiple && /* @__PURE__ */ jsx(SelectListBoxSelectionBar, {}),
 				isDismissable: true,
+				hideHeader: isSearchable,
 				children: (close) => /* @__PURE__ */ jsxs("div", {
 					className: "flex max-h-full flex-col overflow-hidden",
-					children: [isSearchable ? /* @__PURE__ */ jsx(TextInput, {
+					children: [isSearchable && /* @__PURE__ */ jsx(TextInput, {
 						ref: searchInputRef,
 						label,
 						placeholder,
@@ -92,11 +99,8 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 						onChange: onInputChange,
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
-						className: "mb-1-5 px-4 pt-3"
-					}) : /* @__PURE__ */ jsx(FormFieldHeader, {
-						label,
-						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-						className: "mb-1-5! px-4 pt-3"
+						className: "mb-list-height-title-bottom px-list-side-title",
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,

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

@@ -1,6 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useInputCva } from "../../shared/input.cva.js";
+import { popover } from "../../../shared/popover.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -8,6 +10,7 @@ import { useState } from "react";
 import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const [isOpen, setIsOpen] = useState(false);
 	const handleChange = (color) => {
 		onChange(color);
@@ -37,7 +40,7 @@ const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children })
 			children: /* @__PURE__ */ jsx(Dialog, {
 				className: "outline-none",
 				children: /* @__PURE__ */ jsx("div", {
-					className: clsx("flex justify-center overflow-hidden p-2 shadow-5 outline-none", "rounded-input-rounding-default border border-elevation-outline-default-1 bg-elevation-fill-default-1"),
+					className: clsx(popoverCva({}), "flex justify-center overflow-hidden p-2"),
 					children: /* @__PURE__ */ jsx(ColorPicker, {
 						colors,
 						value,

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

@@ -22,6 +22,7 @@ const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspe
 });
 const toggleTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 export { toggle, toggleTypography };

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

@@ -6,6 +6,7 @@ const CheckContent = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
+			sizeMobile: "label-1",
 			variant: "default",
 			...props.typography,
 			className: "text-text-default-2"

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

@@ -30,6 +30,7 @@ const labelTypography = compoundMapper({
 			as: "default",
 			value: {
 				size: "label-2",
+				sizeMobile: "label-2",
 				variant: "prominent-1"
 			}
 		},
@@ -37,6 +38,7 @@ const labelTypography = compoundMapper({
 			as: "filter",
 			value: {
 				size: "label-1",
+				sizeMobile: "label-1",
 				variant: "default"
 			}
 		},
@@ -44,6 +46,7 @@ const labelTypography = compoundMapper({
 			as: "inline",
 			value: {
 				size: "label-2",
+				sizeMobile: "label-2",
 				variant: "prominent-1"
 			}
 		},
@@ -51,12 +54,14 @@ const labelTypography = compoundMapper({
 			as: "floating",
 			value: {
 				size: "label-1",
+				sizeMobile: "label-1",
 				variant: "default"
 			}
 		}
 	],
 	default: {
 		size: "label-2",
+		sizeMobile: "label-2",
 		variant: "prominent-1"
 	},
 	defaultVariants: { as: "default" }

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

@@ -1,4 +1,5 @@
 import { ReactNode, RefObject } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 type BottomSheetState = "closed" | "opening" | "opened" | "closing";
 interface BottomSheetBaseProps {
     isOpen?: boolean;
@@ -6,6 +7,8 @@ interface BottomSheetBaseProps {
     onStateChange?: (state: BottomSheetState) => void;
     isDismissable?: boolean;
     isScrollable?: boolean;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
     height?: "auto" | "full";
     label?: string;
     portalContainerRef?: RefObject<HTMLElement>;
@@ -13,8 +16,14 @@ interface BottomSheetBaseProps {
     footer?: ReactNode;
     sheetMarginTop?: number;
     sheetMarginBottom?: number;
+    /** Min downward drag distance (px) to allow close on release. Increase to require a longer drag. */
+    closeDragThreshold?: number;
+    /** Min downward velocity to close on flick. Increase to require a more intentional swipe. */
+    closeVelocityThreshold?: number;
     shouldCloseOnInteractOutside?: () => boolean;
     containerClassName?: string;
+    overlayClassName?: string;
+    headerTypography?: TypographyVariantProps;
 }
 export interface BottomSheetProps extends BottomSheetBaseProps {
     trigger?: ReactNode;

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

@@ -1,10 +1,13 @@
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { BottomSheetHeader } from "./BottomSheetHeader.js";
+import { useStateAndRef } from "../../../hooks/useStateAndRef.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";
-import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
 var MotionModal = motion.create(Modal);
 var MotionModalOverlay = motion.create(ModalOverlay);
 var inertiaTransition = {
@@ -22,7 +25,12 @@ var staticTransition = {
 		1
 	]
 };
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, shouldCloseOnInteractOutside, containerClassName }) => {
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
+	const uiConfig = UIConfig.useConfig();
+	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
+	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
+	const hideThumb = hideThumbProp ?? uiConfig.bottomSheet.hideThumb;
+	const headerTypography = headerTypographyProp ?? uiConfig.bottomSheet.headerTypography;
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -31,19 +39,26 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		};
 	}, [viewport.height, sheetMarginTop]);
 	const y = useMotionValue(sheetHeight);
+	const dragControls = useDragControls();
 	const closeVelocityRef = useRef(true);
 	const overlayRef = useRef(null);
 	const containerRef = useRef(null);
 	const dialogRef = useRef(null);
-	const footerRef = useRef(null);
 	const focusTrapRef = useRef(null);
+	const [footerElement, footerRef, setFooterElement] = useStateAndRef(null);
 	const [footerHeight, setFooterHeight] = useState(0);
-	useResizeObserver({
-		ref: footerRef,
-		onResize: () => {
-			setFooterHeight(footerRef.current?.offsetHeight || 0);
-		}
-	});
+	useEffect(() => {
+		if (!footerElement) return;
+		const onResize = () => {
+			setFooterHeight(footerElement.offsetHeight || 0);
+		};
+		onResize();
+		const observer = new ResizeObserver(onResize);
+		observer.observe(footerElement);
+		return () => {
+			observer.disconnect();
+		};
+	}, [footerElement]);
 	const oldHeightRef = useRef(0);
 	useResizeObserver({
 		ref: dialogRef,
@@ -67,12 +82,12 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(motion.div, {
-			className: "pointer-events-none absolute inset-0 bg-support-overlay",
+			className: clsx("pointer-events-none absolute inset-0 bg-support-overlay", overlayClassName),
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
 			exit: { opacity: 0 }
 		}), /* @__PURE__ */ jsx(MotionModal, {
-			isDismissable: true,
+			isDismissable,
 			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
 			animate: {
 				y: 0,
@@ -98,6 +113,8 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 				minHeight: "100%"
 			},
 			drag: "y",
+			dragListener: false,
+			dragControls,
 			dragElastic: {
 				top: 0,
 				bottom: .5
@@ -118,12 +135,16 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			},
 			onDragEnd: (e, { velocity }) => {
 				containerRef.current?.style.removeProperty("pointer-events");
-				if (y.get() > 0) if (closeVelocityRef.current && velocity.y > 10 || y.get() > 200) onOpenChange?.(false);
-				else animate(y, 0, {
-					...inertiaTransition,
-					min: 0,
-					max: 0
-				});
+				const yValue = y.get();
+				if (yValue > 0) {
+					const dragPastThreshold = yValue > closeDragThreshold;
+					if (closeVelocityRef.current && velocity.y > closeVelocityThreshold || dragPastThreshold) onOpenChange?.(false);
+					else animate(y, 0, {
+						...inertiaTransition,
+						min: 0,
+						max: 0
+					});
+				}
 			},
 			children: /* @__PURE__ */ jsx(Dialog, {
 				className: "relative flex min-h-0 flex-1 flex-col items-stretch outline-none",
@@ -142,10 +163,18 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 								ref: focusTrapRef,
 								tabIndex: -1
 							}),
-							/* @__PURE__ */ jsx("div", {
+							/* @__PURE__ */ jsxs("div", {
 								className: "flex max-h-full min-h-0 flex-col items-stretch",
 								ref: containerRef,
-								children: typeof children === "function" ? children(close) : children
+								children: [/* @__PURE__ */ jsx(BottomSheetHeader, {
+									label,
+									dragControls,
+									onClose: close,
+									isDismissable,
+									hideHeader,
+									hideThumb,
+									headerTypography
+								}), typeof children === "function" ? children(close) : children]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "shrink-0",
@@ -155,7 +184,10 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 						]
 					}),
 					footer && /* @__PURE__ */ jsx(motion.div, {
-						ref: footerRef,
+						animate: { opacity: 1 },
+						initial: { opacity: 0 },
+						exit: { opacity: 0 },
+						ref: setFooterElement,
 						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
 					})

package/dist/components/overlays/BottomSheet/BottomSheetHeader.d.ts

@@ -0,0 +1,13 @@
+import { DragControls } from 'motion/react';
+import { ReactNode } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+export interface BottomSheetHeaderProps {
+    label?: ReactNode;
+    isDismissable?: boolean;
+    dragControls?: DragControls;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
+    headerTypography?: TypographyVariantProps;
+    onClose?: () => void;
+}
+export declare const BottomSheetHeader: ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose, }: BottomSheetHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { ns } from "../../../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 }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
+		children: [isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			onPointerDown: (e) => {
+				e.preventDefault();
+				dragControls?.start(e);
+			},
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+		}), !hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between px-list-side-title",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-2",
+				variant: "prominent-1",
+				...headerTypography,
+				children: label
+			}), onClose && isDismissable && /* @__PURE__ */ jsx(Button, {
+				onPress: onClose,
+				"aria-label": t(($) => $.ui.closeAlt),
+				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6" })
+			})]
+		})]
+	});
+};
+export { BottomSheetHeader };

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -1,25 +1,23 @@
+import { UIStyle } from "../../../config/uiStyle.context.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 { popover } from "../../shared/popover.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
 		isOpen,
 		onOpenChange,
 		trigger,
 		height: "auto",
 		isDismissable: true,
-		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormFieldHeader, {
-			label: sheetLabel,
-			rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-			className: "px-4 pt-3"
-		}), /* @__PURE__ */ jsx("div", {
+		label: sheetLabel,
+		children: /* @__PURE__ */ jsx("div", {
 			className: "p-4",
 			children
-		})] })
+		})
 	});
 	return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,
@@ -31,7 +29,7 @@ const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverCla
 			children: /* @__PURE__ */ jsx(Dialog, {
 				className: "outline-none",
 				children: /* @__PURE__ */ jsx("div", {
-					className: clsx("overflow-hidden p-2 shadow-5 outline-none", "rounded-s border border-elevation-outline-default-1 bg-elevation-fill-default-1"),
+					className: clsx(popoverCva({}), "overflow-hidden p-2"),
 					children
 				})
 			})

package/dist/components/shared/popover.cva.d.ts

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

package/dist/components/shared/popover.cva.js

@@ -0,0 +1,3 @@
+import { cva } from "class-variance-authority";
+const popover = cva("rounded-list-rounding-dropdown border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5 outline-none");
+export { popover };

package/dist/components/table/CellText.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, FC, ReactNode } from 'react';
-export interface CellTextProps {
+import { TypographyProps } from '../text/Typography/Typography';
+export interface CellTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
     children: ReactNode;
     className?: string;
     style?: CSSProperties;

package/dist/components/table/CellText.js

@@ -1,13 +1,19 @@
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { Typography } from "../text/Typography/Typography.js";
+import { UIConfig } from "../../config/uiConfig.context.js";
+import { tableCellText } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-const CellText = ({ children, style, className }) => /* @__PURE__ */ jsx(Typography, {
-	variant: "default",
-	size: "label-1",
-	as: "span",
-	className: clsx("block overflow-hidden text-ellipsis text-text-default-2", className),
-	style,
-	"data-rac": true,
-	children
-});
+const CellText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.tableCellText.variant, size = uiConfig.tableCellText.size, children, style, className } = props;
+	return /* @__PURE__ */ jsx(Typography, {
+		className: UIStyle.useCva("table.cellTextCva", tableCellText)({ className }),
+		as: "span",
+		variant,
+		size,
+		style,
+		"data-rac": true,
+		children
+	});
+};
 export { CellText };

package/dist/components/table/ColumnConfig.js

@@ -1,6 +1,6 @@
 import { Typography } from "../text/Typography/Typography.js";
-import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { ns } from "../../config/i18n.js";
+import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
 import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";

package/dist/components/table/HeaderText.d.ts

@@ -1,5 +1,8 @@
-import { FC, ReactNode } from 'react';
-export interface HeaderTextProps {
+import { CSSProperties, FC, ReactNode } from 'react';
+import { TypographyProps } from '../text/Typography/Typography';
+export interface HeaderTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
     children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 }
 export declare const HeaderText: FC<HeaderTextProps>;

package/dist/components/table/HeaderText.js

@@ -1,10 +1,18 @@
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { Typography } from "../text/Typography/Typography.js";
+import { UIConfig } from "../../config/uiConfig.context.js";
+import { tableHeaderText } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
-const HeaderText = ({ children }) => /* @__PURE__ */ jsx(Typography, {
-	variant: "default",
-	size: "label-1",
-	as: "span",
-	className: "overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1",
-	children
-});
+const HeaderText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.tableHeaderText.variant, size = uiConfig.tableHeaderText.size, children, style, className } = props;
+	return /* @__PURE__ */ jsx(Typography, {
+		className: UIStyle.useCva("table.headerTextCva", tableHeaderText)({ className }),
+		as: "span",
+		variant,
+		size,
+		style,
+		children
+	});
+};
 export { HeaderText };

package/dist/components/table/Table.js

@@ -3,11 +3,11 @@ 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 { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.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";
 import { useCallback, useMemo, useRef, useState } from "react";

package/dist/components/table/table.cva.d.ts

@@ -17,3 +17,9 @@ export declare const tableData: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TableDataVariantProps extends VariantProps<typeof tableData> {
 }
+export declare const tableHeaderText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TableHeaderTextVariantProps extends VariantProps<typeof tableHeaderText> {
+}
+export declare const tableCellText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TableCellTextVariantProps extends VariantProps<typeof tableCellText> {
+}

package/dist/components/table/table.cva.js

@@ -32,4 +32,6 @@ const tableData = cva([
 	} },
 	defaultVariants: { hasRightBorder: true }
 });
-export { tableData, tableHeadData, tableHeadRow, tableRow };
+const tableHeaderText = cva(["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"]);
+const tableCellText = cva(["block overflow-hidden text-ellipsis text-text-default-2"]);
+export { tableCellText, tableData, tableHeadData, tableHeadRow, tableHeaderText, tableRow };