@g4rcez/components 2.1.2 → 2.2.1

package/dist/components/display/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GACjC,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GA6CxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC5E,WAAW,CAAC,OAAO,aAAa,CAAC,GACjC,OAAO,CAAC;IACN,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC,EACF,CAAC,CACF,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAiDxE,CAAC"}

package/dist/components/display/alert.jsx

@@ -15,8 +15,8 @@ const transition = {
     ease: [0.04, 0.62, 0.23, 0.98],
 };
 export const Collapse = (props) => (<motion.div {...props} layout layoutRoot layoutScroll initial={false} variants={variants} exit={variants.false} transition={transition} aria-hidden={!props.open} data-component="collapse" animate={props.open.toString()} className={css("aria-hidden:pointer-events-none", props.className)}>
-        {props.children}
-    </motion.div>);
+    {props.children}
+  </motion.div>);
 const themeVariants = {
     theme: {
         primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
@@ -35,22 +35,26 @@ const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm",
 export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
     const close = () => onClose?.(false);
     return (<AnimatePresence presenceAffectsLayout propagate mode="sync">
-            {open ? <motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
-                <Collapse data-open={!!open} open={!!open}>
-                    <Polymorph {...props} ref={ref} role="alert" data-theme={theme} as={props.as ?? "div"} className={css(alertVariants({ theme }), className)}>
-                        <h4 className="flex gap-2 items-center mb-2">
-                            {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
-                            {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
-                            {!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
-                            {Icon}
-                            <span className="text-lg font-semibold tracking-3 text-balance">{props.title}</span>
-                        </h4>
-                        {props.children}
-                        {onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute top-3 right-3 transition-colors duration-300 ease-in-out text-foreground hover:text-danger">
-                                <XIcon size={20}/>
-                            </button>) : null}
-                    </Polymorph>
-                </Collapse>
-            </motion.div> : null}
-        </AnimatePresence>);
+      {open ? <motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
+        <Collapse data-open={!!open} open={!!open}>
+          <Polymorph {...props} ref={ref} role="alert" data-theme={theme} as={props.as ?? "div"} className={css(alertVariants({ theme }), className)}>
+            <div className="grid grid-cols-[auto_1fr] gap-base">
+              {onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute top-3 right-3 transition-colors duration-300 ease-in-out text-foreground hover:text-danger">
+                  <XIcon size={20}/>
+                </button>) : null}
+              <div className={css("flex gap-2 items-center", props.title ? "" : "w-fit")}>
+                {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
+                {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
+                {!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
+                {Icon}
+              </div>
+              {props.title ? <h4 className="col-start-2 text-lg font-semibold tracking-3 text-balance">{props.title}</h4> : null}
+              <div className="col-start-2 w-full">
+                {props.children}
+              </div>
+            </div>
+          </Polymorph>
+        </Collapse>
+      </motion.div> : null}
+    </AnimatePresence>);
 });

package/dist/components/display/card.jsx

@@ -4,8 +4,8 @@ import { Is } from "sidekicker";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
 import { Skeleton } from "./skeleton";
-export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4", container)}>
-        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-4 text-xl font-medium", titleClassName)}>
+export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-3", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
                 {title}
             </header>) : (header)}
         <div data-component="card-body" className={css("min-w-full px-6", props.className)}>

package/dist/components/display/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA0D,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAElJ,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BlH,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAiCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA0F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BlH,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAiCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA0F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}

package/dist/components/floating/command-palette.d.ts

@@ -16,6 +16,7 @@ type CommandShortcutItem = CommandItem<"shortcut", {
     shortcut?: string;
     action: (args: {
         text: string;
+        setText: (state: string) => void;
         setOpen: (state: boolean) => void;
         event: KeyboardEvent | React.MouseEvent | React.KeyboardEvent;
     }) => void | Promise<void>;

package/dist/components/floating/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACzD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CACpC,UAAU,EACV;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KAC/D,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B,CACF,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;CACjF,CAAC;AAsBF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA6KxD,CAAC"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACzD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CACpC,UAAU,EACV;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KAC/D,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B,CACF,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;CACjF,CAAC;AAgCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAmLxD,CAAC"}

package/dist/components/floating/command-palette.jsx

@@ -53,33 +53,50 @@ const getFuzzyData = (commands, value) => {
     return Dict.unique(filter.concat(withEnabled), (x) => x.title);
 };
 const loadingSkeleton = [0, 0, 0, 0, 0];
+const findFirstClickable = (items) => {
+    for (let index = 0; index < items.length; index++) {
+        const element = items[index];
+        if (element.type === "shortcut")
+            return element;
+        const recursive = findFirstClickable(element.items);
+        if (recursive)
+            return recursive;
+    }
+    return null;
+};
 export const CommandPalette = (props) => {
-    const bindKey = props.bind ?? "Mod + k";
+    const id = useId();
+    const [text, setText] = useState("");
     const listRef = useRef([]);
     const translations = useTranslations();
-    const [value, setValue] = useState("");
-    const valueRef = useStableRef(value);
-    const id = useId();
-    const ref = useRef(null);
+    const valueRef = useStableRef(text);
     const [activeIndex, setActiveIndex] = useState(null);
+    const bindKey = props.bind ?? "Mod + k";
     const root = useFloating({
         open: props.open,
         strategy: "absolute",
         whileElementsMounted: autoUpdate,
         onOpenChange: props.onChangeVisibility,
     });
+    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
+    const fuzzy = getFuzzyData(commands, text);
     const listNav = useListNavigation(root.context, {
-        cols: 0,
         listRef,
         loop: true,
         activeIndex,
         virtual: true,
         allowEscape: true,
-        focusItemOnHover: false,
-        focusItemOnOpen: "auto",
+        focusItemOnOpen: true,
+        focusItemOnHover: true,
         openOnArrowKeyDown: true,
         scrollItemIntoView: false,
         selectedIndex: activeIndex,
+        disabledIndices: n => {
+            const item = fuzzy[n];
+            if (item)
+                return item.type === "group";
+            return false;
+        },
         onNavigate: (n) => {
             if (Is.number(n)) {
                 listRef.current[n]?.scrollIntoView({ block: "start", inline: "start" });
@@ -91,10 +108,8 @@ export const CommandPalette = (props) => {
             });
         }
     });
-    const { getItemProps, getReferenceProps } = useInteractions([listNav]);
-    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
-    const fuzzy = getFuzzyData(commands, value);
-    const displayItems = value === ""
+    const { getItemProps, getReferenceProps, getFloatingProps } = useInteractions([listNav]);
+    const displayItems = text === ""
         ? commands
         : [
             {
@@ -113,6 +128,7 @@ export const CommandPalette = (props) => {
             if (cmd.type === "shortcut" && cmd.shortcut !== undefined)
                 combi.add(cmd.shortcut, (event) => cmd.action({
                     event,
+                    setText,
                     text: valueRef.current,
                     setOpen: props.onChangeVisibility,
                 }));
@@ -121,25 +137,29 @@ export const CommandPalette = (props) => {
     }, [bindKey, commands, props, valueRef]);
     const Icon = props.Icon ?? FilterIcon;
     return (<Fragment>
-      <Modal ref={ref} animated={false} closable={false} open={props.open} overlayClickClose ariaTitle="Command palette" bodyClassName="px-0 py-0 pt-0" data-component="command-palette" onChange={props.onChangeVisibility} className="container relative py-0 md:max-w-screen-sm lg:max-w-screen-md overflow-clip">
+      <Modal {...getFloatingProps()} animated={false} closable={false} open={props.open} overlayClickClose ariaTitle="Command palette" bodyClassName="px-0 py-0 pt-0" data-component="command-palette" onChange={props.onChangeVisibility} className="container relative py-0 md:max-w-screen-sm lg:max-w-screen-md overflow-clip">
         <header className="flex sticky top-0 items-center w-full h-12 border-b overflow-clip isolate z-floating border-floating-border bg-floating-background">
           <div className="flex justify-center items-center size-10">
-            {props.Icon ? <Icon Default={FilterIcon} text={value} size={16}/> : <FilterIcon size={16}/>}
-
+            {props.Icon ? <Icon Default={FilterIcon} text={text} size={16}/> : <FilterIcon size={16}/>}
           </div>
           <input {...getReferenceProps({
         ref: root.refs.setReference,
         onKeyDown: (e) => {
             const item = Is.number(activeIndex) ? displayItems[activeIndex] : null;
-            if (item) {
-                const key = e.key;
-                if (key === "Enter") {
+            const key = e.key;
+            if (key === "Enter") {
+                if (item) {
                     if (item.type === "shortcut")
-                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
+                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
+                }
+                else {
+                    const item = findFirstClickable(fuzzy);
+                    if (item?.type === "shortcut")
+                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
                 }
             }
         }
-    })} autoFocus value={value} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setValue(e.target.value)} className="items-center py-2 px-2 pb-2 w-full h-12 text-lg text-left bg-transparent outline-none"/>
+    })} autoFocus value={text} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setText(e.target.value)} className="items-center py-2 px-2 pb-2 w-full h-12 text-lg text-left bg-transparent outline-none"/>
         </header>
         {props.loading ? (<ul role="listbox" data-component="command-palette-list" className="flex overflow-y-auto flex-col gap-1 px-2 my-2 w-full max-h-96 origin-[top_center]">
             <div className="px-2 pt-2 pb-1 h-10">{translations.commandPaletteLoading}</div>
@@ -157,16 +177,16 @@ export const CommandPalette = (props) => {
                     e.preventDefault();
                     props.onChangeVisibility(false);
                     if (item.type === "shortcut")
-                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
+                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
                 },
-            })} item={item} text={value} active={activeIndex === index} key={`${id}-${item.type}-${index}`}/>))}
+            })} item={item} text={text} active={activeIndex === index} key={`${id}-${item.type}-${index}`}/>))}
               {displayItems.length === 1 ? (<div className={css("flex items-center justify-between rounded-lg p-2 text-secondary")}>
                   {translations.commandPaletteEmpty ?? props.emptyMessage}
                 </div>) : null}
             </ul>
-            {props.Preview && Is.number(activeIndex) ? <props.Preview command={displayItems[activeIndex]} text={value}/> : null}
+            {props.Preview && Is.number(activeIndex) ? <props.Preview command={displayItems[activeIndex]} text={text}/> : null}
           </div>)}
-        {props.footer ? <footer className="flex items-center p-2 h-8 rounded-b-lg bg-background">{props.footer}</footer> : null}
+        {props.footer ? <footer className="flex items-center p-2 h-8 rounded-b-lg border-t border-floating-border">{props.footer}</footer> : null}
       </Modal>
     </Fragment>);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,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;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,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,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WA1GN,KAAK;gBAAc,MAAM;;UAC3B,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eApBqB,MAAM;YAAU,KAAK;;UAClE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA0UjC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,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;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,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,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WA1GN,KAAK;gBAAc,MAAM;;UAC3B,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eApBqB,MAAM;YAAU,KAAK;;UAClE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA8UjC,CAAC"}

package/dist/components/floating/modal.jsx

@@ -2,7 +2,7 @@
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
-import { motion, MotionConfig, useMotionValue, animate } from "motion/react";
+import { AnimatePresence, motion, MotionConfig, useMotionValue, animate } from "motion/react";
 import { Slot } from "../core/slot";
 import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
@@ -164,11 +164,13 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         {trigger ? (<Component ref={floating.refs.setReference} {...interactions.getReferenceProps()} layoutId={layoutId} type="button">
             {Trigger}
           </Component>) : null}
-        <FloatingPortal preserveTabOrder root={root}>
-          {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-[100dvh] !overflow-clip", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
-              <MotionConfig reducedMotion={animated ? "user" : "always"}>
-                <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
-                  <motion.div {...props} {...(title
+        <MotionConfig reducedMotion={animated ? "user" : "always"}>
+          <FloatingPortal preserveTabOrder root={root}>
+            <AnimatePresence mode="wait" propagate>
+              {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-[100dvh] !overflow-clip", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
+                  <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
+                    <AnimatePresence propagate>
+                      <motion.div {...props} {...(title
             ? {
                 "aria-labelledby": headingId,
                 "aria-describedby": descriptionId,
@@ -178,13 +180,13 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
             className: css(variants({ position, type }), className, "isolate overscroll-contain"),
         })} 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 w-full isolate">
-                        {title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
-                            {title}
-                          </h2>) : null}
-                      </motion.header>) : null}
-                    <motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
+                        {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
+                        {title ? (<motion.header {...draggableMotionProps} className="relative w-full isolate">
+                            {title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
+                                {title}
+                              </h2>) : null}
+                          </motion.header>) : null}
+                        <motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
                 scroll.set(undefined);
                 scrollInitial.set(undefined);
                 if (isDragging.current) {
@@ -224,18 +226,20 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                 }
                 scroll.set(y);
             }}>
-                      {children}
-                    </motion.section>
-                    {footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
-                    {closable ? (<nav className="absolute top-1 right-4 z-floating">
-                        <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
-                          <XIcon />
-                        </button>
-                      </nav>) : null}
-                  </motion.div>
-                </FloatingFocusManager>
-              </MotionConfig>
-            </FloatingOverlay>) : null}
-        </FloatingPortal>
+                          {children}
+                        </motion.section>
+                        {footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
+                        {closable ? (<nav className="absolute top-1 right-4 z-floating">
+                            <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
+                              <XIcon />
+                            </button>
+                          </nav>) : null}
+                      </motion.div>
+                    </AnimatePresence>
+                  </FloatingFocusManager>
+                </FloatingOverlay>) : null}
+            </AnimatePresence>
+          </FloatingPortal>
+        </MotionConfig>
       </Fragment>);
 });

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":"AAgBA,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,yGAsWxB,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;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"}

package/dist/components/form/autocomplete.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
 import { ChevronDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import React, { forwardRef, Fragment, useEffect, useRef, useState } from "react";
@@ -14,14 +14,14 @@ import { fzf } from "../../lib/fzf";
 import { InputField } from "./input-field";
 const Frag = (props) => <Fragment>{props.children}</Fragment>;
 const transitionStyles = {
-    duration: 300,
+    duration: 200,
     initial: { transform: "scaleY(0)", opacity: 0.2 },
     open: { transform: "scaleY(1)", opacity: 1 },
     close: { transform: "scaleY(0)", opacity: 0 },
 };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full rounded-lg">
+    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full max-h-96 rounded-lg">
       <AnimatePresence>{props.children}</AnimatePresence>
     </motion.ul>);
 });
@@ -66,7 +66,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const pattern = dynamicOption
         ? undefined
         : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
-    const { x, y, strategy, refs, context } = useFloating({
+    const { x, y, strategy, refs, context, placement } = useFloating({
         open,
         transform: true,
         onOpenChange: setOpen,
@@ -74,6 +74,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
+            autoPlacement({ allowedPlacements: ['top-start', 'bottom-start'], alignment: "start" }),
             size({
                 padding: 10,
                 elementContext: "reference",
@@ -175,7 +176,8 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const id = props.id || props.name;
     const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={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">
+    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}/>
@@ -235,22 +237,20 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
               <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="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" onAnimationComplete={() => {
+        })} 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={() => {
                 if (!open)
                     return setH(0);
                 const ul = refs.floating.current;
                 const li = ul.querySelectorAll("li").item(0);
                 const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
-                return flushSync(() => setH(sum + 10));
+                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 - 10 }}
-        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) => {
+                <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) => {
                 const Label = option.Render ?? Frag;
                 const active = value === option.value || value === option.label;
                 const selected = index === i;

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,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,4CAuGtC,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,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"}

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useEffect, useRef } from "react";
 import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
 export const createFreeText = (Element, elementName, defaultProps, register) => {
-    const FreeText = forwardRef(({ info, left, next, error, right, container, rightLabel, interactive, optionalText, type = "text", labelClassName, feedback = null, hideLeft = false, loading, ...props }, ref) => {
+    const FreeText = forwardRef(({ info, left, next, error, right, container, rightLabel, interactive, optionalText, type = "text", labelClassName, feedback = null, hideLeft = false, loading, hiddenLabel, ...props }, ref) => {
         const Render = Element;
         const id = props.id ?? props.name;
         const inputRef = useRef(null);
@@ -33,9 +33,9 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} loading={loading} form={props.form} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} container={css(container, defaultProps.container)} rightLabel={rightLabel} disabled={props.disabled} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder}>
-                    <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 (<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>);
     });
     return FreeText;
 };

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

@@ -5,10 +5,11 @@ export type FeedbackProps = React.PropsWithChildren<Partial<{
     id: string;
     info: Label;
     title: Label;
-    hideLeft?: boolean;
-    className?: string;
+    hideLeft: boolean;
+    className: string;
     placeholder: string;
     reportStatus: boolean;
+    hiddenLabel: boolean;
 }>>;
 export declare const InputFeedback: ({ reportStatus, id, hideLeft, className, info, children, title }: FeedbackProps) => React.JSX.Element;
 export type InputFieldProps<T extends "input" | "select" | "textarea"> = PolymorphicProps<Partial<Override<FeedbackProps, {

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,CAC/C,OAAO,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA8CpH,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,YA6EpH,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,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"}

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

@@ -6,49 +6,50 @@ 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 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, }, ref) => {
+    {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) => {
     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="text-field-label max-w-full w-full relative inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger">
-                    <InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}>
-                        {optionalText || rightLabel ? (<Fragment>
-                                {!required ? (<span aria-disabled={disabled} className="transition-colors text-opacity-70 aria-disabled:text-disabled group-focus-within:text-primary group-hover: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 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>);
+        <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>);
 });