@g4rcez/components 4.1.3 → 5.0.0

package/dist/{components → src/components}/floating/menu.jsx

@@ -5,7 +5,7 @@ import { CaretRightIcon } from "@phosphor-icons/react";
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
 import { css, mergeRefs } from "../../lib/dom";
-const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-2.5 items-center flex justify-between text-left", "hover:bg-primary focus:bg-primary aria-expanded:opacity-80", "focus:text-primary-foreground hover:text-primary-foreground", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
+const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-menu-item-p items-center flex justify-between text-left", "hover:bg-primary focus:bg-primary aria-expanded:opacity-80", "focus:text-primary-foreground hover:text-primary-foreground", "first-of-type:rounded-t-menu-radius last-of-type:rounded-b-menu-radius", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
 const MenuContext = createContext({
     isOpen: false,
     activeIndex: null,
@@ -33,7 +33,14 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         onOpenChange: setIsOpen,
         whileElementsMounted: autoUpdate,
         placement: isNested ? "right" : "bottom-start",
-        middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
+        middleware: [
+            offset({
+                mainAxis: isNested ? 0 : 4,
+                alignmentAxis: isNested ? -4 : 0,
+            }),
+            flip(),
+            shift(),
+        ],
     });
     const role = useRole(context, { role: "menu" });
     const dismiss = useDismiss(context, { bubbles: true });
@@ -41,7 +48,10 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         move: false,
         enabled: hover,
         delay: { open: FLOATING_DELAY },
-        handleClose: safePolygon({ blockPointerEvents: true, requireIntent: false }),
+        handleClose: safePolygon({
+            blockPointerEvents: true,
+            requireIntent: false,
+        }),
     });
     const click = useClick(context, {
         toggle: !isNested,
@@ -92,7 +102,9 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
                 setHasFocusInside(false);
                 parent.setHasFocusInside(true);
             },
-        }))} children={label} className={className} data-open={isOpen ? "" : undefined} data-nested={isNested ? "" : undefined} role={isNested ? "menuitem" : undefined} data-focus-inside={hasFocusInside ? "" : undefined} ref={mergeRefs(refs.setReference, item.ref, forwardedRef)} tabIndex={!isNested ? undefined : parent.activeIndex === item.index ? 0 : -1}/>) : (<button type="button" className={className} data-open={isOpen ? "" : undefined} data-nested={isNested ? "" : undefined} role={isNested ? "menuitem" : undefined} data-focus-inside={hasFocusInside ? "" : undefined} ref={mergeRefs(refs.setReference, item.ref, forwardedRef)} tabIndex={!isNested ? undefined : parent.activeIndex === item.index ? 0 : -1} {...getReferenceProps(parent.getItemProps({
+        }))} className={className} data-open={isOpen ? "" : undefined} data-nested={isNested ? "" : undefined} role={isNested ? "menuitem" : undefined} data-focus-inside={hasFocusInside ? "" : undefined} ref={mergeRefs(refs.setReference, item.ref, forwardedRef)} tabIndex={!isNested ? undefined : parent.activeIndex === item.index ? 0 : -1}>
+                            {label}
+                        </Slot>) : (<button type="button" className={className} data-open={isOpen ? "" : undefined} data-nested={isNested ? "" : undefined} role={isNested ? "menuitem" : undefined} data-focus-inside={hasFocusInside ? "" : undefined} ref={mergeRefs(refs.setReference, item.ref, forwardedRef)} tabIndex={!isNested ? undefined : parent.activeIndex === item.index ? 0 : -1} {...getReferenceProps(parent.getItemProps({
             ...props,
             onFocus(event) {
                 props.onFocus?.(event);
@@ -107,11 +119,17 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
                                 </span>)}
                         </button>)}
                 </Fragment>
-                <MenuContext.Provider value={{ activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }}>
+                <MenuContext.Provider value={{
+            activeIndex,
+            setActiveIndex,
+            getItemProps,
+            setHasFocusInside,
+            isOpen,
+        }}>
                     <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
                         {isOpen && (<FloatingPortal>
                                 <FloatingFocusManager context={context} modal={false} initialFocus={isNested ? -1 : 0} returnFocus={isParent ? restoreFocus : !isNested}>
-                                    <FloatingComponent {...getFloatingProps()} ref={refs.setFloating} style={{ ...props.style, ...floatingStyles }} className={css("isolate z-tooltip flex max-h-80 flex-col items-start overflow-y-auto rounded-lg border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-none", floatingClassName)}>
+                                    <FloatingComponent {...getFloatingProps()} ref={refs.setFloating} style={{ ...props.style, ...floatingStyles }} className={css("isolate z-tooltip flex max-h-menu-max-h flex-col items-start overflow-y-auto rounded-menu-radius border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-none", floatingClassName)}>
                                         {children}
                                     </FloatingComponent>
                                 </FloatingFocusManager>

package/dist/src/components/floating/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASH,KAAK,YAAY,EACjB,KAAK,eAAe,EACvB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAEH,eAAe,EAQlB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAWN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMrD,eAAO,MAAM,UAAU,kBAF8B,cAAc,KAAK,OAAO,CAAC,OAAO,CAEvB,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AA2E9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACJ,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,CAAC;CAClB,CAAC,CACT,CAAC;AAkFF,MAAM,MAAM,QAAQ,GAAG;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,CAAC;AAIF,KAAK,cAAc,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,cA4QU,CAAC;AAE/B,KAAK,wBAAwB,GAAG;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC,CAAC;AAaF,eAAO,MAAM,oBAAoB,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBA2D/E,CAAC"}

package/dist/{components → src/components}/floating/modal.jsx

@@ -26,27 +26,47 @@ const drawerRight = {
 const animations = {
     drawer: (type) => (type === "left" ? drawerLeft : drawerRight),
     sheet: {
-        enter: { opacity: 1, y: "0%", animationDuration, transformOrigin: "bottom" },
-        exit: { opacity: 0.4, y: "10%", animationDuration, transformOrigin: "bottom" },
-        initial: { opacity: 0.7, y: "10%", animationDuration, transformOrigin: "bottom" },
+        enter: {
+            opacity: 1,
+            y: "0%",
+            animationDuration,
+            transformOrigin: "bottom",
+        },
+        exit: {
+            opacity: 0.4,
+            y: "10%",
+            animationDuration,
+            transformOrigin: "bottom",
+        },
+        initial: {
+            opacity: 0.7,
+            y: "10%",
+            animationDuration,
+            transformOrigin: "bottom",
+        },
     },
     dialog: {
         exit: { opacity: 0, scale: 0.95, animationDuration },
         enter: { opacity: 1, scale: [1.05, 1], animationDuration },
-        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: "easeInOut" } },
+        initial: {
+            opacity: 0.5,
+            scale: 0.95,
+            animationDuration,
+            transition: { duration: 0.5, ease: "easeInOut" },
+        },
     },
 };
-const variants = cva("z-floating flex min-w-xs appearance-none flex-col flex-nowrap gap-4 border border-floating-border bg-floating-background outline-0 ring-0", {
+const variants = cva("z-floating flex min-w-xs appearance-none flex-col flex-nowrap gap-modal-gap border border-floating-border bg-floating-background outline-0 ring-0", {
     variants: {
         type: {
-            drawer: "absolute h-screen max-h-screen min-h-0 w-fit max-w-[90%]",
-            dialog: "container relative h-min max-h-[calc(100lvh-10%)] rounded-lg py-4",
-            sheet: "absolute bottom-0 h-screen max-h-[calc(100svh-5%)] max-h-[calc(100vh-15%)] w-screen rounded-t-lg pb-4 pt-6",
+            drawer: "absolute h-screen max-h-screen min-h-0 w-fit max-w-modal-dialog-max-w-mobile",
+            dialog: "container relative h-min max-h-modal-sheet-max-h-lvh rounded-modal-radius py-modal-padding-y",
+            sheet: "absolute bottom-0 h-screen max-h-modal-sheet-max-h-svh max-h-modal-sheet-max-h-vh w-screen rounded-t-modal-radius pb-modal-sheet-pb pt-modal-sheet-pt",
         },
         position: {
             none: "",
-            right: "absolute right-0 top-0 rounded-l-lg py-4",
-            left: "absolute left-0 top-0 rounded-r-lg py-4",
+            right: "absolute right-0 top-0 rounded-l-modal-radius py-modal-padding-y",
+            left: "absolute left-0 top-0 rounded-r-modal-radius py-modal-padding-y",
         },
     },
     defaultVariants: { position: "right", type: "dialog" },
@@ -80,12 +100,12 @@ const Draggable = (props) => {
             return props.value.set(value);
         }
     };
-    return (<motion.button draggable dragListener dragMomentum tabIndex={-1} type="button" animate={false} dragElastic={0} dragPropagation initial={false} onDrag={onDrag} dragSnapToOrigin dragDirectionLock aria-hidden="true" drag={props.sheet ? "y" : "x"} dragConstraints={dragConstraints} whileDrag={{ cursor: "grabbing" }} className={css("absolute isolate z-calendar rounded-lg", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
-            ? "top-1 flex h-3 w-full justify-center py-2"
+    return (<motion.button draggable dragListener dragMomentum tabIndex={-1} type="button" animate={false} dragElastic={0} dragPropagation initial={false} onDrag={onDrag} dragSnapToOrigin dragDirectionLock aria-hidden="true" drag={props.sheet ? "y" : "x"} dragConstraints={dragConstraints} whileDrag={{ cursor: "grabbing" }} className={css("absolute isolate z-calendar rounded-modal-resizer-radius", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+            ? "top-1 flex h-modal-sheet-handle-h w-full justify-center py-modal-sheet-handle-py"
             : props.position === "left"
-                ? "right-5 top-1/2 h-10 w-2"
-                : "left-2 top-1/2 h-10 w-2")}>
-            {props.sheet ? <div className="h-2 w-1/4 rounded-lg bg-floating-border"/> : null}
+                ? "right-5 top-1/2 h-modal-drawer-resizer-h w-modal-drawer-resizer-w"
+                : "left-2 top-1/2 h-modal-drawer-resizer-h w-modal-drawer-resizer-w")}>
+            {props.sheet ? <div className="rounded-modal-sheet-pill-radius h-modal-sheet-pill-h w-modal-sheet-pill-w bg-floating-border"/> : null}
         </motion.button>);
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
@@ -109,7 +129,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : forceType ? _type : "sheet";
     const useResizer = type !== "dialog";
-    const floating = useFloating({ open, onOpenChange: onChange, strategy: "fixed" });
+    const floating = useFloating({
+        open,
+        onOpenChange: onChange,
+        strategy: "fixed",
+    });
     const click = useClick(floating.context, {});
     const role = useRole(floating.context, { role: "dialog" });
     const dismiss = useDismiss(floating.context, {
@@ -176,7 +200,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                 <MotionConfig reducedMotion={animated ? "user" : "always"}>
                     <FloatingPortal preserveTabOrder root={root}>
                         <AnimatePresence mode="wait" propagate>
-                            {open ? (<FloatingOverlay lockScroll className={css("inset-0 isolate z-overlay flex h-[100dvh] !overflow-clip bg-floating-overlay/80", type === "drawer" ? "" : "items-start justify-center pt-10 lg:p-10", overlayClassName)}>
+                            {open ? (<FloatingOverlay lockScroll className={css("inset-0 isolate z-overlay flex h-modal-overlay-h !overflow-clip bg-floating-overlay/80", type === "drawer" ? "" : "items-start justify-center pt-modal-overlay-pt lg:p-modal-overlay-p", overlayClassName)}>
                                     <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
                                         <AnimatePresence propagate>
                                             <motion.div {...props} {...(title
@@ -191,11 +215,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         })} exit="exit" layout={true} animate="enter" initial="initial" layoutId={layoutId} variants={animation} data-component="modal" style={type === "drawer" ? { width: floatingSize } : { height: floatingSize, y: sheetY }}>
                                                 {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
                                                 {title ? (<motion.header {...draggableMotionProps} className="relative isolate w-full">
-                                                        {title ? (<h2 id={headingId} className="block select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed">
+                                                        {title ? (<h2 id={headingId} className="block select-text border-b border-floating-border px-modal-padding-x pb-modal-title-pb text-modal-title-text font-medium leading-relaxed">
                                                                 {title}
                                                             </h2>) : null}
                                                     </motion.header>) : null}
-                                                <motion.section ref={innerContent} id={title ? descriptionId : undefined} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
+                                                <motion.section ref={innerContent} id={title ? descriptionId : undefined} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-modal-padding-x py-modal-body-py", bodyClassName)} onTouchEnd={async () => {
                 scroll.set(undefined);
                 scrollInitial.set(undefined);
                 if (isDragging.current) {
@@ -208,7 +232,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                         onChange(false);
                     }
                     else {
-                        animate(sheetYNumeric, 0, { type: "spring", bounce: 0, duration: 0.3 });
+                        animate(sheetYNumeric, 0, {
+                            type: "spring",
+                            bounce: 0,
+                            duration: 0.3,
+                        });
                     }
                     isDragging.current = false;
                 }
@@ -239,9 +267,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             }}>
                                                     {children}
                                                 </motion.section>
-                                                {footer ? (<footer className="w-full select-text border-t border-floating-border px-8 pt-4">{footer}</footer>) : null}
-                                                {closable ? (<div className="absolute right-4 top-1 z-floating">
-                                                        <button type="button" onClick={onClose} aria-label={t.closeButton} className="p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
+                                                {footer ? (<footer className="w-full select-text border-t border-floating-border px-modal-padding-x pt-modal-footer-pt">
+                                                        {footer}
+                                                    </footer>) : null}
+                                                {closable ? (<div className="absolute right-modal-close-right top-modal-close-top z-floating">
+                                                        <button type="button" onClick={onClose} aria-label={t.closeButton} className="p-modal-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
                                                             <XIcon aria-hidden="true"/>
                                                         </button>
                                                     </div>) : null}
@@ -265,6 +295,11 @@ export const ModalConfirmProvider = ({ children }) => {
     const [open, setOpen] = useState(false);
     const [options, setOptions] = useState({});
     const [resolve, setResolve] = useState(() => { });
+    const confirmRef = useRef(null);
+    useEffect(() => {
+        if (open)
+            confirmRef.current?.focus();
+    }, [open]);
     const confirmAction = useCallback((opts) => {
         setOptions(opts);
         setOpen(true);
@@ -287,15 +322,15 @@ export const ModalConfirmProvider = ({ children }) => {
     };
     return (<ConfirmContext.Provider value={confirmAction}>
             {children}
-            <Modal open={open} type="dialog" closable={false} onChange={setOpen} overlayClickClose={false} title={options.title || "Confirmation"} className="container max-w-dialog lg:max-w-96" footer={<div className="flex justify-end gap-2">
+            <Modal open={open} type="dialog" closable={false} onChange={setOpen} overlayClickClose={false} title={options.title || "Confirmation"} className="container max-w-dialog lg:max-w-96" footer={<div className="flex justify-end gap-modal-footer-gap">
                         <Button theme={options.cancel?.theme || "ghost-muted"} onClick={onCancel}>
                             {options.cancel?.text || "Cancel"}
                         </Button>
-                        <Button autoFocus theme={options.confirm?.theme || "primary"} onClick={onConfirm}>
+                        <Button ref={confirmRef} theme={options.confirm?.theme || "primary"} onClick={onConfirm}>
                             {options.confirm?.text || "Confirm"}
                         </Button>
                     </div>}>
-                <div className="py-2 text-foreground">{options.description}</div>
+                <div className="py-modal-confirm-py text-foreground">{options.description}</div>
             </Modal>
         </ConfirmContext.Provider>);
 };

package/dist/src/components/floating/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,CAAC,YAAY,CAAC,gCAI7D,CAAC"}

package/dist/{components → src/components}/floating/toolbar.jsx

@@ -1,5 +1,5 @@
 "use client";
 import { motion } from "motion/react";
-export const Toolbar = (props) => (<motion.div className="sticky bottom-4 flex items-center justify-center rounded-lg border border-card-border bg-background p-4">
+export const Toolbar = (props) => (<motion.div className="sticky bottom-toolbar-bottom flex items-center justify-center rounded-toolbar-radius border border-card-border bg-background p-toolbar-p">
         {props.children}
     </motion.div>);

package/dist/src/components/floating/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA4FM,CAAC"}

package/dist/{components → src/components}/floating/tooltip.jsx

@@ -21,10 +21,19 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
         middleware: [shift(), offset(5), autoPlacement(), arrow({ padding: 5, element: arrowRef }), flip({ fallbackAxisSideDirection: "start" })],
     });
     const dismiss = useDismiss(context, { enabled });
-    const role = useRole(context, { role: popover ? "dialog" : "tooltip", enabled });
-    const focusController = useFocus(context, { enabled: enabled ? focus : false });
-    const clickController = useClick(context, { enabled: enabled ? popover : false });
-    const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });
+    const role = useRole(context, {
+        role: popover ? "dialog" : "tooltip",
+        enabled,
+    });
+    const focusController = useFocus(context, {
+        enabled: enabled ? focus : false,
+    });
+    const clickController = useClick(context, {
+        enabled: enabled ? popover : false,
+    });
+    const clientPoint = useClientPoint(context, {
+        enabled: !!enabled && !!followCursor,
+    });
     const hoverController = useHover(context, {
         move: true,
         delay: { open: FLOATING_DELAY },
@@ -49,7 +58,7 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
                     {title}
                 </Component>
                 {innerOpen && (<FloatingPortal>
-                        <Polymorph {...getFloatingProps()} style={floatingStyles} ref={refs.setFloating} className="isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating">
+                        <Polymorph {...getFloatingProps()} style={floatingStyles} ref={refs.setFloating} className="isolate z-tooltip rounded-tooltip-radius border border-tooltip-border bg-tooltip-background p-tooltip-p text-tooltip-foreground shadow-shadow-floating">
                             <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.1} className="fill-tooltip-background stroke-tooltip-border"/>
                             {children}
                         </Polymorph>

package/dist/src/components/floating/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/wizard.tsx"],"names":[],"mappings":"AACA,OAAO,EAOH,SAAS,EAKZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAgF,MAAM,OAAO,CAAC;AAOrG,MAAM,MAAM,UAAU,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjF,CAAC;AAiBF,eAAO,MAAM,MAAM,GAAI,oEAAiG,WAAW,6BAoLlI,CAAC"}

package/dist/{components → src/components}/floating/wizard.jsx

@@ -114,7 +114,11 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
                     <defs>
                         <mask id="driver-mask">
                             <rect x="0" y="0" width="100%" height="100%" fill="white"/>
-                            <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{ type: "spring", duration: 0.5, ease: "easeInOut" }} animate={{
+                            <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{
+            type: "spring",
+            duration: 0.5,
+            ease: "easeInOut",
+        }} animate={{
             x: rect.left - 5,
             y: rect.top - 5,
             width: rect.width + 10,
@@ -133,15 +137,15 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
                     left: "50%",
                     transform: "translate(-50%, -50%)",
                 }} className="pointer-events-auto outline-none">
-                            <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex w-80 max-w-sm flex-col gap-3 rounded-lg border border-floating-border bg-floating-background p-4 shadow-lg">
+                            <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex w-wizard-w max-w-sm flex-col gap-wizard-gap rounded-wizard-radius border border-floating-border bg-floating-background p-wizard-p shadow-shadow-floating">
                                 {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-floating-background stroke-floating-border"/>)}
                                 {currentStep.title && <h3>{currentStep.title}</h3>}
                                 {currentStep.description && <Fragment>{currentStep.description}</Fragment>}
-                                <div className="mt-2 flex items-center justify-between border-t border-floating-border pt-2">
-                                    <Button theme="raw" size="small" onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">
+                                <div className="mt-wizard-footer-pt flex items-center justify-between border-t border-floating-border pt-wizard-footer-pt">
+                                    <Button theme="raw" size="small" onClick={onClose} className="text-wizard-label-text text-muted-foreground hover:text-foreground">
                                         {labels.skip}
                                     </Button>
-                                    <div className="flex gap-2">
+                                    <div className="flex gap-wizard-actions-gap">
                                         {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
                                                 {labels.previous}
                                             </Button>)}
@@ -150,7 +154,7 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
                                         </Button>
                                     </div>
                                 </div>
-                                <div className="absolute right-2 top-2 text-xs text-muted-foreground">
+                                <div className="absolute right-wizard-counter-right top-wizard-counter-top text-wizard-label-text text-muted-foreground">
                                     {index + 1} / {steps.length}
                                 </div>
                             </motion.div>

package/dist/src/components/form/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAkG,MAAM,OAAO,CAAC;AASvH,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAC9C,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAgCF,eAAO,MAAM,YAAY,yGA8YxB,CAAC"}

package/dist/{components → src/components}/form/autocomplete.jsx

@@ -19,13 +19,13 @@ const transitionStyles = {
     close: { transform: "scaleY(0)", opacity: 0 },
     initial: { transform: "scaleY(0)", opacity: 0.2 },
 };
-const List = forwardRef(function VirtualList({ context, ...props }, ref) {
-    return (<motion.ul {...props} ref={ref} className="max-h-96 w-full overscroll-contain rounded-lg">
+const List = forwardRef(function VirtualList({ context: _context, ...props }, ref) {
+    return (<motion.ul {...props} ref={ref} className="max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius">
             <AnimatePresence>{props.children}</AnimatePresence>
         </motion.ul>);
 });
-const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
-    return <motion.li {...props} ref={ref} className="first:rounded-t-lg last:rounded-t-lg"/>;
+const Item = forwardRef(function VirtualItem({ item: _item, context: _context, ...props }, ref) {
+    return <motion.li {...props} ref={ref} className="first:rounded-t-dropdown-radius last:rounded-t-dropdown-radius"/>;
 });
 const components = { List, Item };
 const EMPTY_NODES = [];
@@ -67,14 +67,20 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
-            autoPlacement({ allowedPlacements: ["top-start", "bottom-start"], alignment: "start" }),
+            autoPlacement({
+                allowedPlacements: ["top-start", "bottom-start"],
+                alignment: "start",
+            }),
             size({
                 padding: 10,
                 elementContext: "reference",
                 apply(args) {
                     const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
                     const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;
-                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw });
+                    Object.assign(args.elements.floating.style, {
+                        width: mw,
+                        maxWidth: mw,
+                    });
                 },
             }),
         ],
@@ -104,13 +110,13 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 setValue(props.value);
             }
         }
-    }, [props.value, options.length]);
+    }, [props.value, options]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
             return;
         return initializeInputDataset(input);
-    }, []);
+    }, [refs.reference]);
     useEffect(() => {
         if (!open)
             return;
@@ -173,11 +179,11 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const isTopPlacement = placement === "top" || placement === "top-start";
     return (<InputField {...props} left={left} error={error} id={shadowId} form={props.form} loading={loading} name={props.name} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} ref={fieldset} feedback={open && isTopPlacement ? props.title : feedback} right={<span className="flex items-center gap-0.5">
                         {right}
-                        <button type="button" className="p-2 transition-colors link:text-primary md:p-1" onClick={onCaretDownClick}>
+                        <button type="button" className="p-input-gap transition-colors link:text-primary md:p-1" onClick={onCaretDownClick}>
                             <CaretDownIcon size={20}/>
                             <span className="sr-only">{translation.inputCaretDown}</span>
                         </button>
-                        {value ? (<button type="button" onClick={onClose} aria-label={translation.inputCloseValue} className="p-2 transition-colors link:text-danger md:p-1">
+                        {value ? (<button type="button" onClick={onClose} aria-label={translation.inputCloseValue} className="p-input-gap transition-colors link:text-danger md:p-1">
                                 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
                                 </svg>
@@ -224,13 +230,19 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 }
             }
         },
-    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className)}/>
+    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-input-text group-focus-within:border-primary group-hover:border-primary", props.className)}/>
                 <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || value || undefined}/>
                 <FloatingPortal preserveTabOrder>
                     {open ? (<FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
                             <motion.div {...getFloatingProps({
             ref: refs.setFloating,
-            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
+            style: {
+                ...transitions.styles,
+                left: x,
+                top: y ?? 0,
+                position: strategy,
+                height: "auto",
+            },
         })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} onAnimationComplete={() => {
                 if (!open) {
                     setH(0);
@@ -239,16 +251,16 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 const li = refs.floating.current?.querySelector("li");
                 const sum = (li?.getBoundingClientRect().height ?? MIN_SIZE) * displayList.length;
                 flushSync(() => setH(Math.min(320, sum + 2)));
-            }} className={css("shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
+            }} className={css("shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-dropdown-radius border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
                                 {isEmpty ? (<div className="w-full border-b border-tooltip-border">
-                                        <span className="flex w-full justify-between p-2 text-left text-disabled">
+                                        <span className="flex w-full justify-between p-menu-item-p text-left text-disabled">
                                             {emptyMessage || translation.autocompleteEmpty}
                                         </span>
                                     </div>) : null}
                                 <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => {
                 scroller.current = e;
                 removeScrollRef.current = e;
-            }} className="border-floating max-h-full overscroll-contain rounded-lg bg-floating-background p-0 text-foreground" itemContent={(i, option) => {
+            }} className="border-floating max-h-full overscroll-contain rounded-dropdown-radius bg-floating-background p-0 text-foreground" itemContent={(i, option) => {
                 const Label = option.Render ?? Frag;
                 const active = value === option.value || value === option.label;
                 const selected = index === i;
@@ -264,7 +276,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                     "aria-selected": active,
                     "aria-disabled": option.disabled,
                     onClick: () => onSelect(option, i),
-                    className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
+                    className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-menu-item-p text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
                 })}>
                                                 <Label {...option} ref={undefined} label={option.label} value={option.value}>
                                                     {children}

package/dist/src/components/form/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGAoCpB,CAAC"}

package/dist/{components → src/components}/form/checkbox.jsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from "react";
 import { css } from "../../lib/dom";
-export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size, container, ...props }, ref) => {
+export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size: _size, container, ...props }, ref) => {
     const d = props.disabled || loading;
     return (<label aria-disabled={d} data-disabled={d} data-task={asTask} data-component="checkbox" className={css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "group-checkbox-checked:line-through" : "", container)}>
-                <input {...props} ref={ref} disabled={d} type="checkbox" data-task={asTask} className={css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
+                <input {...props} ref={ref} disabled={d} type="checkbox" data-task={asTask} className={css("form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
                 {children}
-                <span data-name="checkbox-label" className={css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName)}>
+                <span data-name="checkbox-label" className={css("min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden", labelClassName)}>
                     {error}
                 </span>
             </label>);

package/dist/src/components/form/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAC9B,QAAQ,CACJ,UAAU,EACV,aAAa,GAAG;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CACJ,EACD,UAAU,CACb,CAAC;AAkDF,eAAO,MAAM,UAAU,uGAsItB,CAAC"}

package/dist/{components → src/components}/form/date-picker.jsx

@@ -42,7 +42,7 @@ const formatParts = (datetimeFormat, date) => {
             return x;
         });
     }
-    catch (e) {
+    catch {
         return [];
     }
 };
@@ -86,7 +86,7 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
             setInnerDate(date);
             setValue(format(date, placeholder));
         }
-    }, [isoDateEffect, placeholder]);
+    }, [isoDateEffect, placeholder, date]);
     const onChangeDate = (d) => {
         setInnerDate(d);
         onChange?.(d);

package/dist/src/components/form/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAatC,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACvC,CAAC;AAoJF,eAAO,MAAM,UAAU,GAAI,gDAA8D,KAAK,sBAiC7F,CAAC"}

package/dist/{components → src/components}/form/file-upload.jsx

@@ -49,22 +49,22 @@ const ItemViewer = (props) => {
     const fileName = props.file.name;
     const Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
     const Element = info.type === "img" ? <img src={info.url} className="w-full object-contain" alt={props.file.name}/> : <Icon size={48}/>;
-    return (<li className="flex w-full flex-row justify-between gap-4 border-b border-card-border last:border-b-transparent">
-            <div className="flex flex-col gap-4">
-                <div className="flex flex-row items-center gap-4">
-                    <button type="button" onClick={onViewFile} aria-label={`View ${fileName}`} className="m-2 flex size-16 max-w-16 items-center justify-center overflow-hidden">
+    return (<li className="flex w-full flex-row justify-between gap-file-upload-gap border-b border-card-border last:border-b-transparent">
+            <div className="flex flex-col gap-file-upload-gap">
+                <div className="flex flex-row items-center gap-file-upload-gap">
+                    <button type="button" onClick={onViewFile} aria-label={`View ${fileName}`} className="m-2 flex size-file-upload-thumb-size items-center justify-center overflow-hidden">
                         {Element}
                     </button>
                     <div className="flex flex-col items-start justify-start text-left">
                         <span>{props.file.name}</span>
-                        <span className="text-sm italic">{info.size}</span>
+                        <span className="text-file-upload-text-size italic">{info.size}</span>
                     </div>
                 </div>
                 {props.File ? (<div className="min-w-full flex-1">
                         <props.File file={props.file}/>
                     </div>) : null}
             </div>
-            <div className="align-start flex justify-start py-4 transition-colors duration-300 ease-linear hover:text-danger-hover">
+            <div className="align-start flex justify-start py-file-upload-delete-py transition-colors duration-300 ease-linear hover:text-danger-hover">
                 <button onClick={onDeleteFile} type="button" aria-label={`Remove ${fileName}`} className="flex size-6 items-center justify-center">
                     <XIcon size={16} aria-hidden="true"/>
                 </button>
@@ -80,10 +80,10 @@ const Idle = (props) => {
     const t = useTranslations();
     const Icon = props.dragging ? FolderOpenIcon : FolderIcon;
     return (<div className="flex flex-col items-center justify-center">
-            <div className="flex flex-col items-center justify-center gap-2">
+            <div className="flex flex-col items-center justify-center gap-file-upload-inner-gap">
                 <Icon className="text-primary" size={80}/>
             </div>
-            <div className="my-4 flex flex-col items-center gap-1">
+            <div className="my-file-upload-thumb-my flex flex-col items-center gap-file-upload-thumb-gap">
                 <p>{t.uploadIdle}</p>
                 <button className="text-primary underline" type="button">
                     {t.uploadIdleButton}
@@ -103,11 +103,13 @@ const DefaultIdle = <Idle dragging={false}/>;
 const FileViewer = (props) => {
     const file = props.item.file;
     const type = props.item.type;
-    return (<div className="flex flex-col gap-4">
-            <p className="text-lg font-medium">{props.item.file.name}</p>
-            <p className="text-base">{props.item.size}</p>
+    return (<div className="flex flex-col gap-file-upload-gap">
+            <p className="text-file-upload-text-name font-medium">{props.item.file.name}</p>
+            <p className="text-file-upload-text-size">{props.item.size}</p>
             {type === "img" ? (<img className="container inline-block w-full max-w-96" src={props.item.url} alt={file.name}/>) : type === "video" ? (<video className="container block w-full max-w-96" src={props.item.url} controls muted/>) : type === "audio" ? (<figure>
-                    <audio controls src={props.item.url}></audio>
+                    <audio controls src={props.item.url}>
+                        <track kind="captions"/>
+                    </audio>
                 </figure>) : null}
         </div>);
 };
@@ -121,12 +123,14 @@ export const FileUpload = ({ idle = DefaultIdle, onDeleteFile, File, onDrop, ...
         onDrop?.(x);
         setFiles((prev) => prev.concat(x));
     };
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop: drop,
+    });
     return (<Context.Provider value={state}>
             <Modal overlayClickClose title={t.uploadDialogTitle} ariaTitle={t.uploadDialogTitle} open={state[0] !== null} onChange={close}>
                 {state[0] ? <FileViewer item={state[0]}/> : null}
             </Modal>
-            <div {...getRootProps()} aria-label={t.fileUploadZoneLabel} data-active={items ? items.length > 0 : false} className="flex flex-col items-center justify-center rounded-lg border border-card-border p-6 text-foreground data-[active=true]:border-solid data-[active=false]:border-dashed data-[active=true]:border-transparent data-[active=true]:bg-card-background">
+            <div {...getRootProps()} aria-label={t.fileUploadZoneLabel} data-active={items ? items.length > 0 : false} className="flex flex-col items-center justify-center rounded-file-upload-radius border border-card-border p-file-upload-p text-foreground data-[active=true]:border-solid data-[active=false]:border-dashed data-[active=true]:border-transparent data-[active=true]:bg-card-background">
                 <input {...getInputProps(props)} name={props.name} id={props.name}/>
                 <InteractiveArea File={File} onDeleteFile={onDeleteFile} isDragActive={isDragActive} idle={idle} files={items}/>
             </div>