@g4rcez/components 2.2.8 → 2.3.0

package/dist/components/floating/wizard.jsx

@@ -13,15 +13,15 @@ const getRect = (element) => {
     return element.getBoundingClientRect();
 };
 const resolveElement = (element) => {
-    if (typeof element === 'string') {
+    if (typeof element === "string") {
         return document.querySelector(element);
     }
-    if ('current' in element) {
+    if ("current" in element) {
         return element.current;
     }
     return element;
 };
-export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp, }) => {
+export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp }) => {
     const translation = useTranslations();
     const [index, setIndex] = useState(0);
     const currentStep = steps[index];
@@ -40,14 +40,9 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
         open: active && isOverlayReady,
         placement: currentStep?.side || "bottom",
         whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(10),
-            flip(),
-            shift(),
-            arrow({ element: arrowRef }),
-        ],
+        middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
     });
-    const { getFloatingProps } = useInteractions([useRole(context),]);
+    const { getFloatingProps } = useInteractions([useRole(context)]);
     useEffect(() => {
         if (active) {
             setIndex(0);
@@ -114,51 +109,53 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
     const hasNext = index < steps.length - 1;
     const hasPrevious = index > 0;
     return (<FloatingPortal>
-      <div className="fixed inset-0 pointer-events-none z-wizard">
-        <svg className="absolute inset-0 w-full h-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
-          <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={{
+            <div className="pointer-events-none fixed inset-0 z-wizard">
+                <svg className="absolute inset-0 h-full w-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
+                    <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={{
             x: rect.left - 5,
             y: rect.top - 5,
             width: rect.width + 10,
-            height: rect.height + 10
+            height: rect.height + 10,
         }}/>
-            </mask>
-          </defs>
-          <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
-        </svg>
-        <AnimatePresence mode="wait">
-          {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element ? floatingStyles : {
-                position: "fixed",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)"
-            }} className="outline-none pointer-events-auto">
-              <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 flex-col gap-3 p-4 w-80 max-w-sm rounded-lg border shadow-lg bg-floating-background border-floating-border">
-                {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="flex justify-between items-center pt-2 mt-2 border-t border-floating-border">
-                  <Button theme="raw" size="small" onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">
-                    {labels.skip}
-                  </Button>
-                  <div className="flex gap-2">
-                    {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
-                        {labels.previous}
-                      </Button>)}
-                    <Button size="small" onClick={handleNext}>
-                      {hasNext ? labels.next : labels.finish}
-                    </Button>
-                  </div>
-                </div>
-                <div className="absolute top-2 right-2 text-xs text-muted-foreground">
-                  {index + 1} / {steps.length}
-                </div>
-              </motion.div>
-            </div>)}
-        </AnimatePresence>
-      </div>
-    </FloatingPortal>);
+                        </mask>
+                    </defs>
+                    <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
+                </svg>
+                <AnimatePresence mode="wait">
+                    {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element
+                ? floatingStyles
+                : {
+                    position: "fixed",
+                    top: "50%",
+                    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">
+                                {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">
+                                        {labels.skip}
+                                    </Button>
+                                    <div className="flex gap-2">
+                                        {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
+                                                {labels.previous}
+                                            </Button>)}
+                                        <Button size="small" onClick={handleNext}>
+                                            {hasNext ? labels.next : labels.finish}
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="absolute right-2 top-2 text-xs text-muted-foreground">
+                                    {index + 1} / {steps.length}
+                                </div>
+                            </motion.div>
+                        </div>)}
+                </AnimatePresence>
+            </div>
+        </FloatingPortal>);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,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;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,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;CAClC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAyWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,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;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,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;AA6BF,eAAO,MAAM,YAAY,yGA+WxB,CAAC"}

package/dist/components/form/autocomplete.jsx

@@ -21,9 +21,9 @@ const transitionStyles = {
 };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full max-h-96 rounded-lg">
-      <AnimatePresence>{props.children}</AnimatePresence>
-    </motion.ul>);
+    return (<motion.ul {...props} ref={ref} className="max-h-96 w-full overscroll-contain rounded-lg">
+            <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"/>;
@@ -56,7 +56,10 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         : options;
     const openDropdown = () => flushSync(() => setOpen(true));
     const list = shadow
-        ? fzf(innerOptions, "value", [{ key: "value", value: shadow }, { key: "label", value: shadow }])
+        ? fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ])
         : innerOptions;
     const setClosed = () => {
         setOpen(false);
@@ -74,7 +77,7 @@ 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",
@@ -177,19 +180,19 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
     const isTopPlacement = placement === "top" || placement === "top-start";
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && (isTopPlacement) ? props.title : feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={shadowId} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex gap-0.5 items-center">
-            {right}
-            <button type="button" className="p-2 transition-colors md:p-1 link:text-primary" onClick={onCaretDownClick}>
-              <ChevronDown size={20}/>
-              <span className="sr-only">{translation.inputCaretDown}</span>
-            </button>
-            {value ? (<button type="button" onClick={onClose} className="p-2 transition-colors md:p-1 link:text-danger">
-                <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>
-              </button>) : null}
-          </span>}>
-        <input data-shadow="true" {...getReferenceProps({
+    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && isTopPlacement ? props.title : feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={shadowId} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} 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}>
+                            <ChevronDown size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                        {value ? (<button type="button" onClick={onClose} className="p-2 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>
+                            </button>) : null}
+                    </span>}>
+                <input data-shadow="true" {...getReferenceProps({
         ...props,
         onFocus,
         pattern,
@@ -231,13 +234,13 @@ 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)}/>
-        <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({
+                <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: mergeRefs(removeScrollRef, refs.setFloating),
             style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
-        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className={css("overscroll-contain p-0 m-0 max-h-80 list-none rounded-t-lg rounded-b-lg border ease-in-out isolate z-floating origin-[top_center] border-floating-border bg-floating-background text-foreground shadow-floating", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")} onAnimationComplete={() => {
+        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} 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]")} onAnimationComplete={() => {
                 if (!open)
                     return setH(0);
                 const ul = refs.floating.current;
@@ -245,12 +248,12 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
                 return flushSync(() => setH(sum + 2));
             }}>
-                {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
-                    <span className="flex justify-between p-2 w-full 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) => void (scroller.current = e)} className="overscroll-contain p-0 max-h-full rounded-lg border-floating bg-floating-background text-foreground" itemContent={(i, option) => {
+                                {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
+                                        <span className="flex w-full justify-between p-2 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) => void (scroller.current = e)} className="border-floating max-h-full overscroll-contain rounded-lg 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;
@@ -266,11 +269,11 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                     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" : ""}`,
                 })}>
-                        <Label {...props} label={option.label} value={option.value} children={children}/>
-                      </button>);
+                                                <Label {...props} label={option.label} value={option.value} children={children}/>
+                                            </button>);
             }}/>
-              </motion.div>
-            </FloatingFocusManager>) : null}
-        </FloatingPortal>
-      </InputField>);
+                            </motion.div>
+                        </FloatingFocusManager>) : null}
+                </FloatingPortal>
+            </InputField>);
 });

package/dist/components/form/checkbox.jsx

@@ -6,7 +6,7 @@ export const Checkbox = forwardRef(({ children, asTask = false, labelClassName,
                 <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)}/>
                 {children}
                 <span data-name="checkbox-label" className={css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName)}>
-                {error}
-            </span>
+                    {error}
+                </span>
             </label>);
 });

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

@@ -1 +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,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAkDf,eAAO,MAAM,UAAU,uGA+HtB,CAAC"}
+{"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,uGAoItB,CAAC"}

package/dist/components/form/date-picker.jsx

@@ -35,8 +35,8 @@ const partValues = {
 };
 const formatParts = (datetimeFormat, date) => {
     try {
-        return datetimeFormat.formatToParts(date).map(x => {
-            if ((x.type === "literal" && x.value === ", ")) {
+        return datetimeFormat.formatToParts(date).map((x) => {
+            if (x.type === "literal" && x.value === ", ") {
                 return { type: x.type, value: " " };
             }
             return x;
@@ -98,18 +98,18 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     };
     const validDate = isValid(innerDate);
     const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    const CalendarComponent = <Calendar {...props} type={type} locale={locale} changeOnlyOnClick markToday={markToday} onChange={onChangeDate} disabledDate={disabledDate} date={validDate ? innerDate : undefined}/>;
+    const CalendarComponent = (<Calendar {...props} type={type} locale={locale} changeOnlyOnClick markToday={markToday} onChange={onChangeDate} disabledDate={disabledDate} date={validDate ? innerDate : undefined}/>);
     return (<Fragment>
-                <Input {...props} mask={mask} value={value} id={undefined} name={undefined} data-value={htmlValue} formNoValidate={!open} data-target={props.name} data-component="date-picker" onChange={onChangeDateInput} required={props.required ?? true} error={open ? undefined : props.error} placeholder={props.placeholder || translation.datepickerPlaceholder(placeholder)} right={floating ? <Fragment>
-                            <input data-origin={props.name} defaultValue={htmlValue} form={props.form} hidden id={props.name} name={props.name} ref={externalRef} type="date"/>
-                            <Dropdown open={open} onChange={setOpen} buttonProps={{ "aria-describedby": labelId }} trigger={<span aria-labelledby={labelId}>
-                                        <span id={labelId} className="sr-only">
-                                            {translation.datePickerCalendarButtonLabel}
-                                        </span>
-                                        <CalendarIcon />
-                                    </span>}>
-                                {CalendarComponent}
-                            </Dropdown>
-                        </Fragment> : null}/>
+                <Input {...props} mask={mask} value={value} id={undefined} name={undefined} data-value={htmlValue} formNoValidate={!open} data-target={props.name} data-component="date-picker" onChange={onChangeDateInput} required={props.required ?? true} error={open ? undefined : props.error} placeholder={props.placeholder || translation.datepickerPlaceholder(placeholder)} right={floating ? (<Fragment>
+                                <input data-origin={props.name} defaultValue={htmlValue} form={props.form} hidden id={props.name} name={props.name} ref={externalRef} type="date"/>
+                                <Dropdown open={open} onChange={setOpen} buttonProps={{ "aria-describedby": labelId }} trigger={<span aria-labelledby={labelId}>
+                                            <span id={labelId} className="sr-only">
+                                                {translation.datePickerCalendarButtonLabel}
+                                            </span>
+                                            <CalendarIcon />
+                                        </span>}>
+                                    {CalendarComponent}
+                                </Dropdown>
+                            </Fragment>) : null}/>
             </Fragment>);
 });

package/dist/components/form/file-upload.jsx

@@ -47,30 +47,30 @@ const ItemViewer = (props) => {
         props.onDeleteFile?.(props.file);
     };
     const Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
-    const Element = info.type === "img" ? (<img src={info.url} className="object-contain w-full" alt={props.file.name}/>) : (<Icon strokeWidth={2} absoluteStrokeWidth size={48}/>);
-    return (<li className="flex flex-row gap-4 justify-between w-full border-b border-card-border last:border-b-transparent">
+    const Element = info.type === "img" ? (<img src={info.url} className="w-full object-contain" alt={props.file.name}/>) : (<Icon strokeWidth={2} absoluteStrokeWidth 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 gap-4 items-center">
-                    <button type="button" onClick={onViewFile} className="flex overflow-hidden justify-center items-center max-w-16 m-2 size-16">
+                <div className="flex flex-row items-center gap-4">
+                    <button type="button" onClick={onViewFile} className="m-2 flex size-16 max-w-16 items-center justify-center overflow-hidden">
                         {Element}
                     </button>
-                    <div className="flex flex-col justify-start items-start text-left">
+                    <div className="flex flex-col items-start justify-start text-left">
                         <span>{props.file.name}</span>
                         <span className="text-sm italic">{info.size}</span>
                     </div>
                 </div>
-                {props.File ? (<div className="flex-1 min-w-full">
+                {props.File ? (<div className="min-w-full flex-1">
                         <props.File file={props.file}/>
                     </div>) : null}
             </div>
-            <div className="flex justify-start py-4 transition-colors duration-300 ease-linear align-start hover:text-danger-hover">
-                <button onClick={onDeleteFile} type="button" className="flex justify-center items-center size-6">
+            <div className="align-start flex justify-start py-4 transition-colors duration-300 ease-linear hover:text-danger-hover">
+                <button onClick={onDeleteFile} type="button" className="flex size-6 items-center justify-center">
                     <XIcon size={16}/>
                 </button>
             </div>
         </li>);
 };
-const FilesList = (props) => (<ul className="space-y-8 w-full">
+const FilesList = (props) => (<ul className="w-full space-y-8">
         {props.files.map((file) => {
         return <ItemViewer File={props.File} onDeleteFile={props.onDeleteFile} key={file.name} file={file}/>;
     })}
@@ -78,13 +78,13 @@ const FilesList = (props) => (<ul className="space-y-8 w-full">
 const Idle = (props) => {
     const t = useTranslations();
     const Icon = props.dragging ? FolderOpenIcon : FolderIcon;
-    return (<div className="flex flex-col justify-center items-center">
-            <div className="flex flex-col gap-2 justify-center items-center">
+    return (<div className="flex flex-col items-center justify-center">
+            <div className="flex flex-col items-center justify-center gap-2">
                 <Icon className="text-primary" size={80}/>
             </div>
-            <div className="flex flex-col gap-1 items-center my-4">
+            <div className="my-4 flex flex-col items-center gap-1">
                 <p>{t.uploadIdle}</p>
-                <button className="underline text-primary" type="button">
+                <button className="text-primary underline" type="button">
                     {t.uploadIdleButton}
                 </button>
             </div>

package/dist/components/form/free-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CACjF,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACX,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,CAAC,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACtI,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CAyGpC,CAAC"}
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,CAAC,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACpI,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CAyGtC,CAAC"}

package/dist/components/form/free-text.jsx

@@ -34,8 +34,8 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
             };
         }, []);
         return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} rightLabel={rightLabel} disabled={props.disabled} hiddenLabel={hiddenLabel} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} container={css(container, defaultProps.container)}>
-          <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={props.disabled} aria-disabled={props.disabled} aria-readonly={props.readOnly} ref={mergeRefs(ref, inputRef)} 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-base 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", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className)}/>
-        </InputField>);
+                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={props.disabled} aria-disabled={props.disabled} aria-readonly={props.readOnly} ref={mergeRefs(ref, inputRef)} 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-base 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", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className)}/>
+                </InputField>);
     });
     return FreeText;
 };

package/dist/components/form/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CACjD,OAAO,CAAC;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC,CACH,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA8CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACvF,OAAO,CACL,QAAQ,CACN,aAAa,EACb;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CACF,CACF,EACD,CAAC,CACF,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA+EpH,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACxB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBAmDpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAmFpH,CAAC"}

package/dist/components/form/input-field.jsx

@@ -6,50 +6,51 @@ import { useTweaks } from "../../hooks/use-tweaks";
 import { css } from "../../lib/dom";
 import { Tooltip } from "../floating/tooltip";
 export const InputFeedback = ({ reportStatus, id, hideLeft = false, className, info, children, title }) => (<span className={css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className)}>
-    {hideLeft ? null : (<span className="flex gap-1 items-center transition-colors group-disabled:text-disabled group-error:text-danger group-hover:text-primary group-focus-within:text-primary">
-        {title}
-        {reportStatus || info ? (<span className="flex gap-1 justify-center items-center">
-            {info ? (<Tooltip as="button" type="button" aria-label={typeof info === "string" ? info : undefined} aria-describedby={typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined} title={<span className="cursor-help">
-                    <InfoIcon className="aspect-square size-3" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
-                  </span>}>
-                <div id={id ? `tooltip-info-content-${id}` : undefined} className="w-full break-words max-w-48 whitespace-break-spaces">{info}</div>
-              </Tooltip>) : null}
-            {reportStatus ? (<span className="flex items-center h-3 min-w-6">
-                <CheckCircle className="hidden opacity-0 transition-opacity aspect-square size-3 group-assert:block group-assert:text-success group-assert:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
-                <XCircle className="hidden opacity-0 transition-opacity aspect-square size-3 group-error:block group-error:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
-              </span>) : null}
-          </span>) : null}
-      </span>)}
-    {children}
-  </span>);
-export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, hiddenLabel }, ref) => {
+        {hideLeft ? null : (<span className="flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-disabled:text-disabled group-error:text-danger">
+                {title}
+                {reportStatus || info ? (<span className="flex items-center justify-center gap-1">
+                        {info ? (<Tooltip as="button" type="button" aria-label={typeof info === "string" ? info : undefined} aria-describedby={typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined} title={<span className="cursor-help">
+                                        <InfoIcon className="aspect-square size-3" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                                    </span>}>
+                                <div id={id ? `tooltip-info-content-${id}` : undefined} className="w-full max-w-48 whitespace-break-spaces break-words">
+                                    {info}
+                                </div>
+                            </Tooltip>) : null}
+                        {reportStatus ? (<span className="flex h-3 min-w-6 items-center">
+                                <CheckCircle className="hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                                <XCircle className="hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                            </span>) : null}
+                    </span>) : null}
+            </span>)}
+        {children}
+    </span>);
+export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, hiddenLabel, }, ref) => {
     const tweaks = useTweaks();
     const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.input.iconFeedback;
     const ID = id ?? name;
     const translation = useTranslations();
     const optionalText = _optionalText ?? translation.inputOptionalLabel;
-    return (<fieldset ref={ref} form={form} disabled={disabled} data-error={!!error} aria-disabled={disabled} data-component={componentName} data-interactive={!!interactive} className={css("group flex min-h-0 max-w-full min-w-0 flex-col items-start", container)}>
-        <label form={form} htmlFor={ID} className="inline-flex relative flex-row flex-wrap gap-1 justify-between w-full max-w-full text-sm transition-colors cursor-text empty:hidden text-field-label group-disabled:cursor-not-allowed group-error:text-danger">
-          {hiddenLabel ? null
-            : <InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}>
-              {optionalText || rightLabel ? (<Fragment>
-                  {!required ? (<span aria-disabled={disabled} className="text-opacity-70 transition-colors aria-disabled:text-disabled group-hover:text-primary group-focus-within:text-primary">
-                      {optionalText}
-                    </span>) : null}
-                  {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
-                </Fragment>) : null}
-            </InputFeedback>}
-          <div className={`group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger ${labelClassName}`}>
-            {left ? <span className="flex flex-nowrap gap-1 pl-2 whitespace-nowrap">{left}</span> : null}
-            {children}
-            {right ? <span className="flex flex-nowrap gap-2 pr-2 whitespace-nowrap">{right}</span> : null}
-          </div>
-        </label>
-        <p className="mt-input-gap hidden whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex group-error:text-danger">
-          {error}
-        </p>
-        <p className="mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
-          {feedback}
-        </p>
-      </fieldset>);
+    return (<fieldset ref={ref} form={form} disabled={disabled} data-error={!!error} aria-disabled={disabled} data-component={componentName} data-interactive={!!interactive} className={css("group flex min-h-0 min-w-0 max-w-full flex-col items-start", container)}>
+                <label form={form} htmlFor={ID} className="relative inline-flex w-full max-w-full cursor-text flex-row flex-wrap justify-between gap-1 text-field-label text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger">
+                    {hiddenLabel ? null : (<InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}>
+                            {optionalText || rightLabel ? (<Fragment>
+                                    {!required ? (<span aria-disabled={disabled} className="text-opacity-70 transition-colors group-focus-within:text-primary group-hover:text-primary aria-disabled:text-disabled">
+                                            {optionalText}
+                                        </span>) : null}
+                                    {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
+                                </Fragment>) : null}
+                        </InputFeedback>)}
+                    <div className={`group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger ${labelClassName}`}>
+                        {left ? <span className="flex flex-nowrap gap-1 whitespace-nowrap pl-2">{left}</span> : null}
+                        {children}
+                        {right ? <span className="flex flex-nowrap gap-2 whitespace-nowrap pr-2">{right}</span> : null}
+                    </div>
+                </label>
+                <p className="mt-input-gap hidden whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex group-error:text-danger">
+                    {error}
+                </p>
+                <p className="mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
+                    {feedback}
+                </p>
+            </fieldset>);
 });

package/dist/components/form/multi-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACrC,eAAe,CAAC,OAAO,CAAC,EACxB;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC/C,CACF,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAuavB,CAAC"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAuavB,CAAC"}