@mirror-physics/fractal-ui 0.2.0-next.83 → 0.2.0-next.85

package/dist/column-editor.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/control.css","../src/components/Button/Button.css","../src/components/ColumnEditor/ColumnEditor.css"],"sourcesContent":["/* Shared metrics are canonical Fractal tokens; choose them per control. */\n[data-control-size=\"sm\"] {\n  --control-font-size: var(--control-sm-font-size);\n  --control-line-height: var(--control-sm-line-height);\n  --control-padding-block: var(--control-sm-padding-block);\n  --control-padding-inline: var(--control-sm-padding-inline);\n  --control-icon-size: var(--control-sm-icon-size);\n}\n[data-control-size=\"md\"] {\n  --control-font-size: var(--control-md-font-size);\n  --control-line-height: var(--control-md-line-height);\n  --control-padding-block: var(--control-md-padding-block);\n  --control-padding-inline: var(--control-md-padding-inline);\n  --control-icon-size: var(--control-md-icon-size);\n}\n[data-control-size=\"lg\"] {\n  --control-font-size: var(--control-lg-font-size);\n  --control-line-height: var(--control-lg-line-height);\n  --control-padding-block: var(--control-lg-padding-block);\n  --control-padding-inline: var(--control-lg-padding-inline);\n  --control-icon-size: var(--control-lg-icon-size);\n}\n[data-control-size=\"xl\"] {\n  --control-font-size: var(--control-xl-font-size);\n  --control-line-height: var(--control-xl-line-height);\n  --control-padding-block: var(--control-xl-padding-block);\n  --control-padding-inline: var(--control-xl-padding-inline);\n  --control-icon-size: var(--control-xl-icon-size);\n}\n\n[data-control-size] {\n  --control-min-block-size: calc(var(--control-line-height) + 2 * var(--control-padding-block) + 2 * var(--control-border-width));\n}\n\n.fractal-control {\n  box-sizing: border-box;\n  height: auto;\n  min-block-size: var(--control-min-block-size);\n  margin: 0;\n  padding: var(--control-padding-block) var(--control-padding-inline);\n  font-family: var(--font-sans);\n  font-size: var(--control-font-size);\n  font-weight: 400;\n  line-height: var(--control-line-height);\n  letter-spacing: normal;\n}\n\n.fractal-field {\n  display: grid;\n  align-content: start;\n  gap: var(--control-label-gap);\n  min-inline-size: 0;\n}\n",".fractal-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-weight: 400;\n  font-family: var(--font-sans);\n  text-decoration: none;\n  box-sizing: border-box;\n  transform: scale(1);\n  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* Press: subtle shrink, then expand on release. 120ms / ease-out per motion guide. */\n.fractal-button--primary:active:not(:disabled),\n.fractal-button--secondary:active:not(:disabled),\n.fractal-button--ghost:active:not(:disabled),\n.fractal-button--danger:active:not(:disabled) {\n  transform: scale(0.97);\n}\n\n/* Focus ring: 2px --border-focus, 2px offset. Per principles.md Focus section. */\n.fractal-button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus, var(--blue-500));\n}\n\n.fractal-button:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fractal-button {\n    transition-duration: 0.01ms;\n  }\n}\n\n.fractal-button { gap: var(--control-icon-gap); }\n.fractal-button svg { inline-size: var(--control-icon-size); block-size: var(--control-icon-size); flex-shrink: 0; }\n.fractal-button[data-icon-only] {\n  inline-size: var(--control-min-block-size);\n  padding-inline: 0;\n}\n\n.fractal-button--primary:not(:disabled) {\n  background-color: var(--button-primary-bg, var(--fg-primary));\n  color: var(--button-primary-fg, var(--fg-inverse));\n}\n.fractal-button--primary:not(:disabled):hover {\n  background-color: var(--button-primary-hover, var(--fg-secondary));\n}\n.fractal-button--primary:not(:disabled):active {\n  background-color: var(--button-primary-active, var(--fg-primary));\n}\n\n/* Inherit the button foreground so hints work on neutral and colored actions in either theme. */\n.fractal-button__shortcut {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 1px 4px;\n  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n  border-radius: var(--radius-sm, 4px);\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  color: inherit;\n  font-family: var(--font-sans);\n  font-size: 0.6875rem;\n  font-weight: 500;\n  line-height: 1.2;\n}\n.fractal-button .fractal-button__shortcut svg {\n  inline-size: 12px;\n  block-size: 12px;\n}\n",".fractal-column-editor { position: relative; }\n.fractal-column-editor__panel {\n  position: absolute; z-index: 60; top: calc(100% + var(--space-2)); right: 0;\n  width: min(440px, calc(100vw - var(--space-7))); box-sizing: border-box;\n  padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);\n  background: var(--bg-canvas); box-shadow: var(--shadow-md); max-height: 72dvh; overflow-y: auto;\n  font-family: var(--font-sans); font-size: .875rem;\n}\n.fractal-column-editor__panel:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }\n.fractal-column-editor__list { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; min-height: var(--space-4); }\n.fractal-column-editor__row {\n  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);\n  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);\n  color: var(--fg-primary); background: var(--bg-canvas); cursor: grab;\n  user-select: none; touch-action: none;\n  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);\n}\n.fractal-column-editor__row[data-hidden] { color: var(--fg-disabled); background: var(--bg-surface-1); }\n.fractal-column-editor__row:hover { background: var(--hover-surface); }\n.fractal-column-editor__row[data-dragging] { cursor: grabbing; background: var(--nav-selected); border-color: var(--border-focus); }\n.fractal-column-editor__grip { width: 20px; height: 20px; flex-shrink: 0; color: inherit; pointer-events: none; }\n.fractal-column-editor__name { min-width: 0; pointer-events: none; }\n.fractal-column-editor__actions { display: flex; flex-shrink: 0; margin-left: auto; cursor: default; }\n/* An arrow has its own stronger hover against the hovered row. */\n.fractal-column-editor__actions .fractal-button { cursor: pointer !important; color: var(--fg-secondary); }\n.fractal-column-editor__actions .fractal-button:hover:not(:disabled) { background: var(--bg-surface-2) !important; }\n.fractal-column-editor__actions .fractal-button:disabled { pointer-events: auto; cursor: pointer !important; }\n.fractal-column-editor__divider { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-6); color: var(--fg-tertiary); }\n.fractal-column-editor__divider::before, .fractal-column-editor__divider::after { content: ''; flex: 1; border-top: 1px solid var(--border-subtle); }\n.fractal-column-editor__divider > span { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }\n.fractal-column-editor__divider svg { width: 20px; height: 20px; }\n.fractal-column-editor__empty { margin: 0; padding-block: var(--space-4); color: var(--fg-tertiary); }\n.fractal-column-editor__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n@media (prefers-reduced-motion: reduce) { .fractal-column-editor__row { transition: none; } }\n\n.fractal-column-editor__panel[data-dragging], .fractal-column-editor__panel[data-dragging] .fractal-column-editor__row { cursor: grabbing; }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles/control.css","../src/components/Button/Button.css","../src/components/ColumnEditor/ColumnEditor.css"],"sourcesContent":["/* Shared metrics are canonical Fractal tokens; choose them per control. */\n[data-control-size=\"sm\"] {\n  --control-font-size: var(--control-sm-font-size);\n  --control-line-height: var(--control-sm-line-height);\n  --control-padding-block: var(--control-sm-padding-block);\n  --control-padding-inline: var(--control-sm-padding-inline);\n  --control-icon-size: var(--control-sm-icon-size);\n}\n[data-control-size=\"md\"] {\n  --control-font-size: var(--control-md-font-size);\n  --control-line-height: var(--control-md-line-height);\n  --control-padding-block: var(--control-md-padding-block);\n  --control-padding-inline: var(--control-md-padding-inline);\n  --control-icon-size: var(--control-md-icon-size);\n}\n[data-control-size=\"lg\"] {\n  --control-font-size: var(--control-lg-font-size);\n  --control-line-height: var(--control-lg-line-height);\n  --control-padding-block: var(--control-lg-padding-block);\n  --control-padding-inline: var(--control-lg-padding-inline);\n  --control-icon-size: var(--control-lg-icon-size);\n}\n[data-control-size=\"xl\"] {\n  --control-font-size: var(--control-xl-font-size);\n  --control-line-height: var(--control-xl-line-height);\n  --control-padding-block: var(--control-xl-padding-block);\n  --control-padding-inline: var(--control-xl-padding-inline);\n  --control-icon-size: var(--control-xl-icon-size);\n}\n\n[data-control-size] {\n  --control-min-block-size: calc(var(--control-line-height) + 2 * var(--control-padding-block) + 2 * var(--control-border-width));\n}\n\n.fractal-control {\n  box-sizing: border-box;\n  height: auto;\n  min-block-size: var(--control-min-block-size);\n  margin: 0;\n  padding: var(--control-padding-block) var(--control-padding-inline);\n  font-family: var(--font-sans);\n  font-size: var(--control-font-size);\n  font-weight: 400;\n  line-height: var(--control-line-height);\n  letter-spacing: normal;\n}\n\n.fractal-field {\n  display: grid;\n  align-content: start;\n  gap: var(--control-label-gap);\n  min-inline-size: 0;\n}\n",".fractal-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-weight: 400;\n  font-family: var(--font-sans);\n  text-decoration: none;\n  box-sizing: border-box;\n  transform: scale(1);\n  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* Press: subtle shrink, then expand on release. 120ms / ease-out per motion guide. */\n.fractal-button--primary:active:not(:disabled),\n.fractal-button--secondary:active:not(:disabled),\n.fractal-button--ghost:active:not(:disabled),\n.fractal-button--danger:active:not(:disabled) {\n  transform: scale(0.97);\n}\n\n/* Focus ring: 2px --border-focus, 2px offset. Per principles.md Focus section. */\n.fractal-button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus);\n}\n\n.fractal-button:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fractal-button {\n    transition-duration: 0.01ms;\n  }\n}\n\n.fractal-button { gap: var(--control-icon-gap); }\n.fractal-button svg { inline-size: var(--control-icon-size); block-size: var(--control-icon-size); flex-shrink: 0; }\n.fractal-button[data-icon-only] {\n  inline-size: var(--control-min-block-size);\n  padding-inline: 0;\n}\n\n.fractal-button--primary:not(:disabled) {\n  background-color: var(--button-primary-bg, var(--fg-primary));\n  color: var(--button-primary-fg, var(--fg-inverse));\n}\n.fractal-button--primary:not(:disabled):hover {\n  background-color: var(--button-primary-hover, var(--fg-secondary));\n}\n.fractal-button--primary:not(:disabled):active {\n  background-color: var(--button-primary-active, var(--fg-primary));\n}\n\n/* Inherit the button foreground so hints work on neutral and colored actions in either theme. */\n.fractal-button__shortcut {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 1px 4px;\n  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n  border-radius: var(--radius-sm, 4px);\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  color: inherit;\n  font-family: var(--font-sans);\n  font-size: 0.6875rem;\n  font-weight: 500;\n  line-height: 1.2;\n}\n.fractal-button .fractal-button__shortcut svg {\n  inline-size: 12px;\n  block-size: 12px;\n}\n",".fractal-column-editor { position: relative; }\n.fractal-column-editor__panel {\n  position: absolute; z-index: 60; top: calc(100% + var(--space-2)); right: 0;\n  width: min(440px, calc(100vw - var(--space-7))); box-sizing: border-box;\n  padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);\n  background: var(--bg-canvas); box-shadow: var(--shadow-md); max-height: 72dvh; overflow-y: auto;\n  font-family: var(--font-sans); font-size: .875rem;\n}\n.fractal-column-editor__panel:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }\n.fractal-column-editor__list { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; min-height: var(--space-4); }\n.fractal-column-editor__row {\n  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);\n  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);\n  color: var(--fg-primary); background: var(--bg-canvas); cursor: grab;\n  user-select: none; touch-action: none;\n  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);\n}\n.fractal-column-editor__row[data-hidden] { color: var(--fg-disabled); background: var(--bg-surface-1); }\n.fractal-column-editor__row:hover { background: var(--hover-surface); }\n.fractal-column-editor__row[data-dragging] { cursor: grabbing; background: var(--nav-selected); border-color: var(--border-focus); }\n.fractal-column-editor__grip { width: 20px; height: 20px; flex-shrink: 0; color: inherit; pointer-events: none; }\n.fractal-column-editor__name { min-width: 0; pointer-events: none; }\n.fractal-column-editor__actions { display: flex; flex-shrink: 0; margin-left: auto; cursor: default; }\n/* An arrow has its own stronger hover against the hovered row. */\n.fractal-column-editor__actions .fractal-button { cursor: pointer !important; color: var(--fg-secondary); }\n.fractal-column-editor__actions .fractal-button:hover:not(:disabled) { background: var(--bg-surface-2) !important; }\n.fractal-column-editor__actions .fractal-button:disabled { pointer-events: auto; cursor: pointer !important; }\n.fractal-column-editor__divider { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-6); color: var(--fg-tertiary); }\n.fractal-column-editor__divider::before, .fractal-column-editor__divider::after { content: ''; flex: 1; border-top: 1px solid var(--border-subtle); }\n.fractal-column-editor__divider > span { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }\n.fractal-column-editor__divider svg { width: 20px; height: 20px; }\n.fractal-column-editor__empty { margin: 0; padding-block: var(--space-4); color: var(--fg-tertiary); }\n.fractal-column-editor__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n@media (prefers-reduced-motion: reduce) { .fractal-column-editor__row { transition: none; } }\n\n.fractal-column-editor__panel[data-dragging], .fractal-column-editor__panel[data-dragging] .fractal-column-editor__row { cursor: grabbing; }\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -1732,6 +1732,7 @@ function Dropdown({
   emptyMessage = "No matching options.",
   triggerLabel,
   fieldLabel,
+  clearable = Boolean(fieldLabel),
   direction = "down",
   align = "left",
   maxHeight = 320,
@@ -1753,8 +1754,12 @@ function Dropdown({
 }) {
   const [query, setQuery] = React12.useState("");
   const searchRef = React12.useRef(null);
+  const searchContainerRef = React12.useRef(null);
+  const optionsRef = React12.useRef(null);
+  const [optionsScrolled, setOptionsScrolled] = React12.useState(false);
   const accessibleLabel = triggerLabel ?? fieldLabel ?? "Options";
   const size = controlSize ?? sizeAlias;
+  const canClear = clearable && !disabled && (multiple ? selectedValues.length > 0 && Boolean(onSelectionChange) : Boolean(selectedValue) && Boolean(onSelect));
   const [open, setOpen] = React12.useState(false);
   React12.useEffect(() => {
     if (!open) setQuery("");
@@ -1783,12 +1788,17 @@ function Dropdown({
     return renderableItems.slice(index + 1, nextHeader < 0 ? void 0 : nextHeader).some((next) => matching.has(next.value));
   });
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
-  const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
+  const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? (fieldLabel && !selectedValue && !multiple ? void 0 : selectableItems[0] ?? visibleItems[0]);
   const ChevronIcon = direction === "up" ? import_fractal_icons10.ChevronUp : direction === "left" ? import_fractal_icons10.ChevronLeft : direction === "right" ? import_fractal_icons10.ChevronRight : import_fractal_icons10.ChevronDown;
   useEscapeDismiss(100, () => {
     setOpen(false);
     triggerRef.current?.focus();
   }, open);
+  React12.useLayoutEffect(() => {
+    if (!open) return;
+    if (optionsRef.current) optionsRef.current.scrollTop = 0;
+    setOptionsScrolled(false);
+  }, [open, query]);
   React12.useLayoutEffect(() => {
     const root = rootRef.current;
     const trigger = triggerRef.current;
@@ -1826,7 +1836,7 @@ function Dropdown({
       panel.style.maxWidth = `${availableWidth}px`;
       panel.style.minWidth = `${Math.min(triggerRect.width, availableWidth)}px`;
       const panelRect = panel.getBoundingClientRect();
-      const desiredHeight = Math.min(heightLimit, panel.scrollHeight + panel.offsetHeight - panel.clientHeight);
+      const desiredHeight = Math.min(heightLimit, (optionsRef.current?.scrollHeight ?? 0) + (searchContainerRef.current?.offsetHeight ?? 0) + parseFloat(getComputedStyle(panel).paddingTop) + parseFloat(getComputedStyle(panel).paddingBottom) + panel.offsetHeight - panel.clientHeight);
       const position = positionDropdown(triggerRect, { width: panelRect.width, height: desiredHeight }, bounds, direction, align);
       const nextStyle = {
         left: position.left - rootRect.left - root.clientLeft + root.scrollLeft,
@@ -1851,6 +1861,7 @@ function Dropdown({
     const resize = new ResizeObserver(updatePosition);
     resize.observe(root);
     resize.observe(panel);
+    if (optionsRef.current) resize.observe(optionsRef.current);
     for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
       resize.observe(ancestor);
     }
@@ -1877,7 +1888,7 @@ function Dropdown({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
   if (renderableItems.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, "data-clearable": canClear || void 0, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
@@ -1922,6 +1933,13 @@ function Dropdown({
         ]
       }
     ),
+    canClear && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
+      if (multiple) onSelectionChange?.([]);
+      else onSelect?.("");
+      setOpen(false);
+      setQuery("");
+      triggerRef.current?.focus();
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.Close, { "aria-hidden": "true" }) }),
     fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
     open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
@@ -1943,11 +1961,11 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          searchable && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-dropdown-search", children: [
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-dropdown-search", children: [
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.MagnifyingGlass, { "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
             label != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-label", children: label }),
             visibleItems.map((item, index) => {
               const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
@@ -1987,9 +2005,9 @@ function Dropdown({
                 ),
                 bottomDivider
               ] }, item.value);
-            })
-          ] }),
-          !selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+            }),
+            !selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+          ] })
         ]
       }
     )