@beautinique/frontend-components 1.0.8 → 1.0.9

package/dist/color-input/index.cjs

@@ -0,0 +1,375 @@
+'use strict';
+
+require('@beautinique/frontend-styles/color-input.css');
+var react = require('@iconify/react');
+var react$1 = require('react');
+var reactDom = require('react-dom');
+var reactColorPalette = require('react-color-palette');
+var inputs = require('@beautinique/frontend-components/inputs');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/dropdown-position.ts
+var DROPDOWN_GAP = 8;
+var getDropdownPlacement = /* @__PURE__ */ __name(({
+  rect,
+  viewportHeight,
+  desired,
+  needed
+}) => {
+  const below = viewportHeight - rect.bottom - DROPDOWN_GAP;
+  const above = rect.top - DROPDOWN_GAP;
+  const room = desired === "bottom" ? below : above;
+  const other = desired === "bottom" ? above : below;
+  if (room >= needed || other <= room) return desired;
+  return desired === "bottom" ? "top" : "bottom";
+}, "getDropdownPlacement");
+var getDropdownStyle = /* @__PURE__ */ __name((rect, placement, viewportHeight) => ({
+  left: rect.left,
+  width: rect.width,
+  ...placement === "top" ? { bottom: viewportHeight - rect.top + DROPDOWN_GAP } : { top: rect.bottom + DROPDOWN_GAP }
+}), "getDropdownStyle");
+
+// src/lib/mergeRefs.ts
+var assign = /* @__PURE__ */ __name((ref, node) => {
+  if (typeof ref === "function") return ref(node);
+  if (ref) ref.current = node;
+  return void 0;
+}, "assign");
+var mergeRefs = /* @__PURE__ */ __name((...refs) => (node) => {
+  const cleanups = refs.map((ref) => assign(ref, node));
+  return () => {
+    refs.forEach((ref, index) => {
+      const cleanup = cleanups[index];
+      if (typeof cleanup === "function") cleanup();
+      else assign(ref, null);
+    });
+  };
+}, "mergeRefs");
+var useAnchoredBox = /* @__PURE__ */ __name(({
+  isOpen,
+  anchorRef,
+  position,
+  needed
+}) => {
+  const [box, setBox] = react$1.useState(null);
+  react$1.useLayoutEffect(() => {
+    if (!isOpen) return;
+    const update = /* @__PURE__ */ __name(() => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      setBox({
+        rect,
+        placement: getDropdownPlacement({
+          rect,
+          viewportHeight: window.innerHeight,
+          desired: position,
+          needed
+        })
+      });
+    }, "update");
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [isOpen, anchorRef, position, needed]);
+  return box;
+}, "useAnchoredBox");
+var openStack = [];
+var useDismiss = /* @__PURE__ */ __name((onDismiss, { enabled = true, ignore, outside = true, escape = true } = {}) => {
+  const ref = react$1.useRef(null);
+  const onDismissRef = react$1.useRef(onDismiss);
+  const ignoreRef = react$1.useRef(ignore);
+  react$1.useLayoutEffect(() => {
+    onDismissRef.current = onDismiss;
+    ignoreRef.current = ignore;
+  });
+  react$1.useEffect(() => {
+    if (!enabled) return;
+    const token = /* @__PURE__ */ Symbol("dismissable");
+    if (escape) openStack.push(token);
+    const handlePress = /* @__PURE__ */ __name((event) => {
+      const element = ref.current;
+      if (!outside || !element) return;
+      const path = event.composedPath();
+      const isInside = path.includes(element) || (ignoreRef.current ?? []).some(({ current }) => current !== null && path.includes(current));
+      if (!isInside) onDismissRef.current("outside", event);
+    }, "handlePress");
+    const handleKey = /* @__PURE__ */ __name((event) => {
+      if (!escape || event.key !== "Escape" || event.defaultPrevented) return;
+      if (openStack.at(-1) !== token) return;
+      onDismissRef.current("escape", event);
+    }, "handleKey");
+    document.addEventListener("pointerdown", handlePress, true);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("pointerdown", handlePress, true);
+      document.removeEventListener("keydown", handleKey);
+      const index = openStack.indexOf(token);
+      if (index !== -1) openStack.splice(index, 1);
+    };
+  }, [enabled, outside, escape]);
+  return ref;
+}, "useDismiss");
+
+// src/lib/focus.ts
+var TABBABLE = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "summary",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])',
+  "[tabindex]"
+].join(",");
+var isTabbable = /* @__PURE__ */ __name((element) => {
+  if (element.tabIndex < 0) return false;
+  return !element.closest("[hidden], [inert]");
+}, "isTabbable");
+var getTabbable = /* @__PURE__ */ __name((root) => [...root.querySelectorAll(TABBABLE)].filter(isTabbable), "getTabbable");
+
+// src/lib/useFocusTrap.ts
+var activeTraps = [];
+var useFocusTrap = /* @__PURE__ */ __name(({
+  enabled,
+  initialFocus,
+  returnFocus = true
+}) => {
+  const ref = react$1.useRef(null);
+  const initialFocusRef = react$1.useRef(initialFocus);
+  react$1.useEffect(() => {
+    initialFocusRef.current = initialFocus;
+  });
+  react$1.useEffect(() => {
+    const dialog = ref.current;
+    if (!enabled || !dialog) return;
+    const token = /* @__PURE__ */ Symbol("trap");
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    activeTraps.push(token);
+    (initialFocusRef.current?.current ?? getTabbable(dialog).at(0) ?? dialog).focus();
+    const handleKey = /* @__PURE__ */ __name((event) => {
+      if (event.key !== "Tab" || activeTraps.at(-1) !== token) return;
+      const tabbable = getTabbable(dialog);
+      const first = tabbable.at(0);
+      const last = tabbable.at(-1);
+      const current = document.activeElement;
+      if (!first || !last) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+      if (!(current instanceof Node) || !dialog.contains(current) || current === dialog) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && current === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && current === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }, "handleKey");
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      const index = activeTraps.indexOf(token);
+      if (index !== -1) activeTraps.splice(index, 1);
+      if (returnFocus && previous?.isConnected) previous.focus();
+    };
+  }, [enabled, returnFocus]);
+  return ref;
+}, "useFocusTrap");
+var HEX = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var FALLBACK_COLOR = "#000000";
+var isHexColor = /* @__PURE__ */ __name((value) => value !== void 0 && HEX.test(value), "isHexColor");
+var toColor = /* @__PURE__ */ __name((value) => reactColorPalette.ColorService.convert("hex", isHexColor(value) ? value : FALLBACK_COLOR), "toColor");
+var isSameHex = /* @__PURE__ */ __name((a, b) => a?.toLowerCase() === b?.toLowerCase(), "isSameHex");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/color-input/color-input-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "mage",
+    width: 24,
+    height: 24,
+    icons: {
+      "color-picker-fill": {
+        body: '<path fill="currentColor" d="m17.042 10.894l-4-4.006a1 1 0 0 0-.2-.14l4.37 4.356a.7.7 0 0 0-.17-.21"/><path fill="currentColor" d="M20.962 3.002A3.56 3.56 0 0 0 18.502 2a3.64 3.64 0 0 0-2.55 1.002l-1.32 1.592a2.4 2.4 0 0 0-.68-.45a2.17 2.17 0 0 0-1.66 0a2.2 2.2 0 0 0-.7.47a2.185 2.185 0 0 0-.16 2.864l-7.4 7.421a2.64 2.64 0 0 0-.63 2.694l-.85.852a1.9 1.9 0 0 0-.41.61c-.09.227-.137.468-.14.712c.002.25.05.498.14.73q.144.325.39.582l.33.36c.176.176.383.318.61.42c.232.093.48.14.73.141c.247-.002.49-.05.72-.14a1.9 1.9 0 0 0 .6-.41l.87-.862c.36.121.743.16 1.12.11a2.63 2.63 0 0 0 1.55-.741l7.45-7.441c.371.28.825.432 1.29.43c.568 0 1.114-.222 1.52-.62a2.135 2.135 0 0 0 0-3.005l1.6-1.242l.09-.08a3.57 3.57 0 0 0-.08-5.007zm-1 3.886l-2.21 1.722a.77.77 0 0 0-.29.54a.8.8 0 0 0 .21.582l.57.57q.09.099.14.22a.5.5 0 0 1 .05.251a.56.56 0 0 1-.05.25a.6.6 0 0 1-.14.211a.69.69 0 0 1-.93 0l-.11-.1l-4.37-4.357l-.18-.17a.66.66 0 0 1 0-.931a.8.8 0 0 1 .21-.15a.7.7 0 0 1 .25 0a.7.7 0 0 1 .25 0q.115.06.21.15l.58.57a.73.73 0 0 0 .56.21a.77.77 0 0 0 .54-.27l1.78-2.153a1.94 1.94 0 0 1 1.44-.56a2.06 2.06 0 0 1 1.85 1.236a2.07 2.07 0 0 1-.35 2.199z"/>'
+      }
+    }
+  },
+  {
+    prefix: "pepicons-pop",
+    width: 26,
+    height: 26,
+    icons: {
+      "color-picker": {
+        body: '<g fill="currentColor"><path fill-rule="evenodd" d="M7.536 15.237c-1.56.616-4.257 2.37-4.728 1.9c-.306-.306.323-1.546.972-2.806h4.66z" clip-rule="evenodd"/><path d="M15.803 5.555a1 1 0 1 1 1.415 1.414l-8.975 8.975a1 1 0 0 1-.34.222c-.396.157-.8.355-1.753.846c-.47.242-.679.348-.933.474c-1.748.861-2.405 1.068-3.116.357c-.71-.71-.504-1.367.351-3.105c.127-.257.234-.468.48-.945c.491-.953.689-1.356.845-1.753A1 1 0 0 1 4 11.701l8.975-8.975a1 1 0 1 1 1.414 1.414l-8.832 8.833c-.174.414-.393.855-.847 1.736a52 52 0 0 0-.535 1.06l.158-.077c.24-.119.441-.221.902-.458c.88-.454 1.321-.673 1.736-.847z"/><path d="M14.39 4.14a1 1 0 1 1-1.415-1.414a3 3 0 1 1 4.243 4.243a1 1 0 1 1-1.415-1.414A1 1 0 0 0 14.39 4.14m-4.953.705a1 1 0 0 1 1.415-1.414l5.656 5.657a1 1 0 0 1-1.414 1.414z"/></g>'
+      },
+      "color-picker-off": {
+        body: '<g fill="currentColor"><path fill-rule="evenodd" d="M7.536 15.237c-1.56.616-4.257 2.37-4.728 1.9c-.306-.306.323-1.546.972-2.806h4.66z" clip-rule="evenodd"/><path d="M15.803 5.555a1 1 0 1 1 1.415 1.414l-8.975 8.975a1 1 0 0 1-.34.222c-.396.157-.8.355-1.753.846c-.47.242-.679.348-.933.474c-1.748.861-2.405 1.068-3.116.357c-.71-.71-.504-1.367.351-3.105c.127-.257.234-.468.48-.945c.491-.953.689-1.356.845-1.753A1 1 0 0 1 4 11.701l8.975-8.975a1 1 0 1 1 1.414 1.414l-8.832 8.833c-.174.414-.393.855-.847 1.736a52 52 0 0 0-.535 1.06l.158-.077c.24-.119.441-.221.902-.458c.88-.454 1.321-.673 1.736-.847z"/><path d="M14.39 4.14a1 1 0 1 1-1.415-1.414a3 3 0 1 1 4.243 4.243a1 1 0 1 1-1.415-1.414A1 1 0 0 0 14.39 4.14m-4.953.705a1 1 0 0 1 1.415-1.414l5.656 5.657a1 1 0 0 1-1.414 1.414zM1.293 2.707a1 1 0 0 1 1.414-1.414l16 16a1 1 0 0 1-1.414 1.414z"/></g>'
+      }
+    }
+  }
+];
+var { register: registerColorInputIcons, names: COLOR_INPUT_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var PICKER_HEIGHT = 340;
+var ColorInput = /* @__PURE__ */ __name(({
+  label = "",
+  value,
+  error = "",
+  disabled = false,
+  placeholder,
+  onChange,
+  id,
+  containerClassName = "",
+  className = "",
+  position = "bottom",
+  hideAlpha = false,
+  pickerLabel = "Colour picker"
+}) => {
+  registerColorInputIcons();
+  const baseId = react$1.useId();
+  const fieldId = id ?? `${baseId}-field`;
+  const pickerId = `${baseId}-picker`;
+  const errorId = `${baseId}-error`;
+  const [isOpenState, setIsOpen] = react$1.useState(false);
+  const [color, setColor] = react$1.useState(() => toColor(value));
+  const [seenValue, setSeenValue] = react$1.useState(value);
+  const anchorRef = react$1.useRef(null);
+  const pickerRef = react$1.useRef(null);
+  if (value !== seenValue) {
+    setSeenValue(value);
+    if (!isSameHex(value, color.hex)) setColor(toColor(value));
+  }
+  if (isOpenState && disabled) setIsOpen(false);
+  const isOpen = isOpenState && !disabled;
+  const box = useAnchoredBox({ isOpen, anchorRef, position, needed: PICKER_HEIGHT });
+  const isShown = isOpen && box !== null;
+  const containerRef = useDismiss(
+    () => {
+      setIsOpen(false);
+    },
+    { enabled: isOpen, ignore: [pickerRef] }
+  );
+  const trapRef = useFocusTrap({ enabled: isShown });
+  const mergedPickerRef = react$1.useMemo(() => mergeRefs(pickerRef, trapRef), [trapRef]);
+  const handleChange = /* @__PURE__ */ __name((next) => {
+    if (!isHexColor(next.hex)) return;
+    setColor(next);
+    onChange?.(next.hex);
+  }, "handleChange");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: anchorRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(inputs.InputLabel, { htmlFor: fieldId, className: "z-2", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-invalid": error ? "" : void 0,
+              className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c data-invalid:border-red-c flex items-center gap-1 overflow-hidden rounded-lg border px-3 text-[13px] ${className}`,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  id: fieldId,
+                  type: "button",
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": isOpen,
+                  "aria-controls": isOpen ? pickerId : void 0,
+                  "aria-invalid": error ? true : void 0,
+                  "aria-describedby": error ? errorId : void 0,
+                  disabled,
+                  onClick: () => {
+                    setIsOpen(!isOpen);
+                  },
+                  className: `text-primary flex min-w-0 flex-1 items-center gap-2 border-none bg-transparent text-left outline-hidden ${disabled ? "cursor-no-drop" : "cursor-pointer"}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "border-primary/10 rounded border p-0.5 xl:p-1",
+                        style: { backgroundColor: color.hex },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          react.Icon,
+                          {
+                            icon: "mage:color-picker-fill",
+                            className: "shrink-0 [&>path]:last:fill-primary-invert [&>path]:last:stroke-primary"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-1 truncate py-2 xl:py-3 ${value ? "" : "text-primary/30"}`, children: value ? value.toUpperCase() : placeholder }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      react.Icon,
+                      {
+                        "aria-hidden": "true",
+                        icon: isOpen ? "pepicons-pop:color-picker-off" : "pepicons-pop:color-picker",
+                        className: "shrink-0"
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(inputs.InputError, { id: errorId, error }),
+        isShown && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: mergedPickerRef,
+              id: pickerId,
+              role: "dialog",
+              tabIndex: -1,
+              "aria-label": label || pickerLabel,
+              className: "border-primary/10 bg-smoke-eerie fixed z-3 overflow-hidden rounded-lg border shadow-md outline-none",
+              style: getDropdownStyle(box.rect, box.placement, window.innerHeight),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactColorPalette.ColorPicker,
+                {
+                  hideInput: ["hsv"],
+                  hideAlpha,
+                  color,
+                  onChange: handleChange
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}, "ColorInput");
+
+exports.ColorInput = ColorInput;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/color-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/dropdown-position.ts","../../src/lib/mergeRefs.ts","../../src/lib/useAnchoredBox.ts","../../src/lib/useDismiss.ts","../../src/lib/focus.ts","../../src/lib/useFocusTrap.ts","../../src/color-input/color.ts","../../src/lib/icon-registry.ts","../../src/color-input/color-input-icons.ts","../../src/color-input/ColorInput.tsx"],"names":["useState","useLayoutEffect","useRef","useEffect","ColorService","addCollection","useId","useMemo","jsxs","jsx","InputLabel","Icon","InputError","createPortal","ColorPicker"],"mappings":";;;;;;;;;;;;;;AAUO,IAAM,YAAA,GAAe,CAAA;AASrB,IAAM,uCAAuB,MAAA,CAAA,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAK0B;AACxB,EAAA,MAAM,KAAA,GAAQ,cAAA,GAAiB,IAAA,CAAK,MAAA,GAAS,YAAA;AAC7C,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,GAAM,YAAA;AACzB,EAAA,MAAM,IAAA,GAAO,OAAA,KAAY,QAAA,GAAW,KAAA,GAAQ,KAAA;AAC5C,EAAA,MAAM,KAAA,GAAQ,OAAA,KAAY,QAAA,GAAW,KAAA,GAAQ,KAAA;AAE7C,EAAA,IAAI,IAAA,IAAQ,MAAA,IAAU,KAAA,IAAS,IAAA,EAAM,OAAO,OAAA;AAE5C,EAAA,OAAO,OAAA,KAAY,WAAW,KAAA,GAAQ,QAAA;AACxC,CAAA,EAnBoC,sBAAA,CAAA;AAsB7B,IAAM,gBAAA,mBAAmB,MAAA,CAAA,CAC9B,IAAA,EACA,SAAA,EACA,cAAA,MACI;AAAA,EACJ,MAAM,IAAA,CAAK,IAAA;AAAA,EACX,OAAO,IAAA,CAAK,KAAA;AAAA,EACZ,GAAI,SAAA,KAAc,KAAA,GACd,EAAE,QAAQ,cAAA,GAAiB,IAAA,CAAK,GAAA,GAAM,YAAA,EAAa,GACnD,EAAE,GAAA,EAAK,IAAA,CAAK,SAAS,YAAA;AAC3B,CAAA,CAAA,EAVgC,kBAAA,CAAA;;;ACvChC,IAAM,MAAA,mBAAS,MAAA,CAAA,CAAI,GAAA,EAAyB,IAAA,KAAmB;AAC7D,EAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,OAAO,IAAI,IAAI,CAAA;AAE9C,EAAA,IAAI,GAAA,MAAS,OAAA,GAAU,IAAA;AAEvB,EAAA,OAAO,MAAA;AACT,CAAA,EANe,QAAA,CAAA;AAeR,IAAM,SAAA,mBACX,MAAA,CAAA,CAAA,GAAO,IAAA,KACP,CAAC,IAAA,KAAmB;AAClB,EAAA,MAAM,QAAA,GAAW,KAAK,GAAA,CAAI,CAAC,QAAQ,MAAA,CAAO,GAAA,EAAK,IAAI,CAAC,CAAA;AAEpD,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,OAAA,CAAQ,CAAC,GAAA,EAAK,KAAA,KAAU;AAC3B,MAAA,MAAM,OAAA,GAAU,SAAS,KAAK,CAAA;AAE9B,MAAA,IAAI,OAAO,OAAA,KAAY,UAAA,EAAY,OAAA,EAAQ;AAAA,WACtC,MAAA,CAAO,KAAK,IAAI,CAAA;AAAA,IACvB,CAAC,CAAA;AAAA,EACH,CAAA;AACF,CAAA,EAZA,WAAA,CAAA;ACcK,IAAM,iCAAiB,MAAA,CAAA,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAgD;AAC9C,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAIA,iBAA8B,IAAI,CAAA;AAExD,EAAAC,uBAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,IAAA,MAAM,yBAAS,MAAA,CAAA,MAAM;AACnB,MAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AAEzB,MAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,MAAA,MAAM,IAAA,GAAO,OAAO,qBAAA,EAAsB;AAE1C,MAAA,MAAA,CAAO;AAAA,QACL,IAAA;AAAA,QACA,WAAW,oBAAA,CAAqB;AAAA,UAC9B,IAAA;AAAA,UACA,gBAAgB,MAAA,CAAO,WAAA;AAAA,UACvB,OAAA,EAAS,QAAA;AAAA,UACT;AAAA,SACD;AAAA,OACF,CAAA;AAAA,IACH,CAAA,EAhBe,QAAA,CAAA;AAkBf,IAAA,MAAA,EAAO;AACP,IAAA,MAAA,CAAO,gBAAA,CAAiB,QAAA,EAAU,MAAA,EAAQ,IAAI,CAAA;AAC9C,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,MAAM,CAAA;AAExC,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,MAAA,EAAQ,IAAI,CAAA;AACjD,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,MAAM,CAAA;AAAA,IAC7C,CAAA;AAAA,EACF,GAAG,CAAC,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAU,MAAM,CAAC,CAAA;AAExC,EAAA,OAAO,GAAA;AACT,CAAA,EAxC8B,gBAAA,CAAA;ACV9B,IAAM,YAAsB,EAAC;AAiBtB,IAAM,UAAA,mBAAa,MAAA,CAAA,CACxB,SAAA,EACA,EAAE,OAAA,GAAU,IAAA,EAAM,MAAA,EAAQ,OAAA,GAAU,IAAA,EAAM,MAAA,GAAS,IAAA,EAAK,GAAqB,EAAC,KACtD;AACxB,EAAA,MAAM,GAAA,GAAMC,eAAiB,IAAI,CAAA;AACjC,EAAA,MAAM,YAAA,GAAeA,eAAO,SAAS,CAAA;AACrC,EAAA,MAAM,SAAA,GAAYA,eAAO,MAAM,CAAA;AAG/B,EAAAD,wBAAgB,MAAM;AACpB,IAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,IAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AAAA,EACtB,CAAC,CAAA;AAED,EAAAE,iBAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,KAAA,0BAAe,aAAa,CAAA;AAGlC,IAAA,IAAI,MAAA,EAAQ,SAAA,CAAU,IAAA,CAAK,KAAK,CAAA;AAEhC,IAAA,MAAM,WAAA,2BAAe,KAAA,KAAwB;AAC3C,MAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AAEpB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AAE1B,MAAA,MAAM,IAAA,GAAO,MAAM,YAAA,EAAa;AAChC,MAAA,MAAM,WACJ,IAAA,CAAK,QAAA,CAAS,OAAO,CAAA,IAAA,CACpB,SAAA,CAAU,WAAW,EAAC,EAAG,KAAK,CAAC,EAAE,SAAQ,KAAM,OAAA,KAAY,QAAQ,IAAA,CAAK,QAAA,CAAS,OAAO,CAAC,CAAA;AAE5F,MAAA,IAAI,CAAC,QAAA,EAAU,YAAA,CAAa,OAAA,CAAQ,WAAW,KAAK,CAAA;AAAA,IACtD,CAAA,EAXoB,aAAA,CAAA;AAapB,IAAA,MAAM,SAAA,2BAAa,KAAA,KAAyB;AAC1C,MAAA,IAAI,CAAC,MAAA,IAAU,KAAA,CAAM,GAAA,KAAQ,QAAA,IAAY,MAAM,gBAAA,EAAkB;AACjE,MAAA,IAAI,SAAA,CAAU,EAAA,CAAG,EAAE,CAAA,KAAM,KAAA,EAAO;AAEhC,MAAA,YAAA,CAAa,OAAA,CAAQ,UAAU,KAAK,CAAA;AAAA,IACtC,CAAA,EALkB,WAAA,CAAA;AAOlB,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAA,EAAe,WAAA,EAAa,IAAI,CAAA;AAC1D,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAE9C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAA,EAAe,WAAA,EAAa,IAAI,CAAA;AAC7D,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAEjD,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,OAAA,CAAQ,KAAK,CAAA;AAErC,MAAA,IAAI,KAAA,KAAU,EAAA,EAAI,SAAA,CAAU,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA,IAC7C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,OAAA,EAAS,MAAM,CAAC,CAAA;AAE7B,EAAA,OAAO,GAAA;AACT,CAAA,EAxD0B,YAAA,CAAA;;;ACpC1B,IAAM,QAAA,GAAW;AAAA,EACf,SAAA;AAAA,EACA,YAAA;AAAA,EACA,wBAAA;AAAA,EACA,4CAAA;AAAA,EACA,wBAAA;AAAA,EACA,0BAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,kDAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;AAEV,IAAM,UAAA,2BAAc,OAAA,KAAyB;AAC3C,EAAA,IAAI,OAAA,CAAQ,QAAA,GAAW,CAAA,EAAG,OAAO,KAAA;AAEjC,EAAA,OAAO,CAAC,OAAA,CAAQ,OAAA,CAAQ,mBAAmB,CAAA;AAC7C,CAAA,EAJmB,YAAA,CAAA;AAOZ,IAAM,WAAA,mBAAc,MAAA,CAAA,CAAC,IAAA,KAC1B,CAAC,GAAG,IAAA,CAAK,gBAAA,CAA8B,QAAQ,CAAC,CAAA,CAAE,MAAA,CAAO,UAAU,CAAA,EAD1C,aAAA,CAAA;;;ACT3B,IAAM,cAAwB,EAAC;AAexB,IAAM,+BAAe,MAAA,CAAA,CAAwB;AAAA,EAClD,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,KAA8C;AAC5C,EAAA,MAAM,GAAA,GAAMD,eAAiB,IAAI,CAAA;AACjC,EAAA,MAAM,eAAA,GAAkBA,eAAO,YAAY,CAAA;AAE3C,EAAAC,kBAAU,MAAM;AACd,IAAA,eAAA,CAAgB,OAAA,GAAU,YAAA;AAAA,EAC5B,CAAC,CAAA;AAED,EAAAA,kBAAU,MAAM;AACd,IAAA,MAAM,SAAS,GAAA,CAAI,OAAA;AAEnB,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AAEzB,IAAA,MAAM,KAAA,0BAAe,MAAM,CAAA;AAC3B,IAAA,MAAM,QAAA,GAAW,QAAA,CAAS,aAAA,YAAyB,WAAA,GAAc,SAAS,aAAA,GAAgB,IAAA;AAE1F,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;AACtB,IAAA,CAAC,eAAA,CAAgB,OAAA,EAAS,OAAA,IAAW,WAAA,CAAY,MAAM,EAAE,EAAA,CAAG,CAAC,CAAA,IAAK,MAAA,EAAQ,KAAA,EAAM;AAEhF,IAAA,MAAM,SAAA,2BAAa,KAAA,KAAyB;AAC1C,MAAA,IAAI,MAAM,GAAA,KAAQ,KAAA,IAAS,YAAY,EAAA,CAAG,EAAE,MAAM,KAAA,EAAO;AAEzD,MAAA,MAAM,QAAA,GAAW,YAAY,MAAM,CAAA;AACnC,MAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,EAAA,CAAG,CAAC,CAAA;AAC3B,MAAA,MAAM,IAAA,GAAO,QAAA,CAAS,EAAA,CAAG,EAAE,CAAA;AAC3B,MAAA,MAAM,UAAU,QAAA,CAAS,aAAA;AAEzB,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,IAAA,EAAM;AACnB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,MAAA,CAAO,KAAA,EAAM;AAEb,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,EAAE,mBAAmB,IAAA,CAAA,IAAS,CAAC,OAAO,QAAA,CAAS,OAAO,CAAA,IAAK,OAAA,KAAY,MAAA,EAAQ;AAEjF,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,CAAC,KAAA,CAAM,QAAA,GAAW,IAAA,GAAO,KAAA,EAAO,KAAA,EAAM;AAAA,MACxC,CAAA,MAAA,IAAW,KAAA,CAAM,QAAA,IAAY,OAAA,KAAY,KAAA,EAAO;AAC9C,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAA,CAAK,KAAA,EAAM;AAAA,MACb,CAAA,MAAA,IAAW,CAAC,KAAA,CAAM,QAAA,IAAY,YAAY,IAAA,EAAM;AAC9C,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,KAAA,CAAM,KAAA,EAAM;AAAA,MACd;AAAA,IACF,CAAA,EA1BkB,WAAA,CAAA;AA4BlB,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAE9C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAEjD,MAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,OAAA,CAAQ,KAAK,CAAA;AAEvC,MAAA,IAAI,KAAA,KAAU,EAAA,EAAI,WAAA,CAAY,MAAA,CAAO,OAAO,CAAC,CAAA;AAE7C,MAAA,IAAI,WAAA,IAAe,QAAA,EAAU,WAAA,EAAa,QAAA,CAAS,KAAA,EAAM;AAAA,IAC3D,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,WAAW,CAAC,CAAA;AAEzB,EAAA,OAAO,GAAA;AACT,CAAA,EAjE4B,cAAA,CAAA;AC3B5B,IAAM,GAAA,GAAM,+CAAA;AAGL,IAAM,cAAA,GAAiB,SAAA;AAGvB,IAAM,UAAA,2BAAc,KAAA,KACzB,KAAA,KAAU,UAAa,GAAA,CAAI,IAAA,CAAK,KAAK,CAAA,EADb,YAAA,CAAA;AAInB,IAAM,OAAA,mBAAU,MAAA,CAAA,CAAC,KAAA,KACtBC,8BAAA,CAAa,OAAA,CAAQ,KAAA,EAAO,UAAA,CAAW,KAAK,CAAA,GAAI,KAAA,GAAQ,cAAc,CAAA,EADjD,SAAA,CAAA;AAIhB,IAAM,SAAA,2BAAa,CAAA,EAAuB,CAAA,KAC/C,GAAG,WAAA,EAAY,KAAM,CAAA,EAAG,WAAA,EAAY,EADb,WAAA,CAAA;ACPlB,IAAM,kBAAA,2BAAsB,IAAA,KAAiC;AAClE,EAAA,IAAI,UAAA,GAAa,KAAA;AAEjB,EAAA,OAAO;AAAA,IACL,0BAAU,MAAA,CAAA,MAAM;AACd,MAAA,IAAI,UAAA,EAAY;AAEhB,MAAA,KAAA,MAAW,GAAA,IAAO,IAAA,EAAMC,mBAAA,CAAc,GAAG,CAAA;AACzC,MAAA,UAAA,GAAa,IAAA;AAAA,IACf,CAAA,EALU,UAAA,CAAA;AAAA,IAMV,OAAO,IAAA,CAAK,OAAA;AAAA,MAAQ,CAAC,EAAE,MAAA,EAAQ,KAAA,EAAO,OAAA,EAAQ,KAC5C,CAAC,GAAG,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA,EAAG,GAAG,MAAA,CAAO,IAAA,CAAK,OAAA,IAAW,EAAE,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AAAA;AAC1F,GACF;AACF,CAAA,EAdkC,oBAAA,CAAA;;;ACDlC,IAAM,SAAA,GAA2B;AAAA,EAC/B;AAAA,IACE,MAAA,EAAQ,MAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,mBAAA,EAAqB;AAAA,QACnB,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA;AAAA,IACE,MAAA,EAAQ,cAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,cAAA,EAAgB;AAAA,QACd,IAAA,EAAM;AAAA,OACR;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,IAAA,EAAM;AAAA;AACR;AACF;AAEJ,CAAA;AAMO,IAAM,EAAE,QAAA,EAAU,uBAAA,EAAyB,OAAO,sBAAA,EAAuB,GAC9E,mBAAmB,SAAS,CAAA;ACL9B,IAAM,aAAA,GAAgB,GAAA;AAaf,IAAM,6BAAa,MAAA,CAAA,CAAC;AAAA,EACzB,KAAA,GAAQ,EAAA;AAAA,EACR,KAAA;AAAA,EACA,KAAA,GAAQ,EAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,WAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,kBAAA,GAAqB,EAAA;AAAA,EACrB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,QAAA;AAAA,EACX,SAAA,GAAY,KAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,KAAmB;AACjB,EAAA,uBAAA,EAAwB;AAExB,EAAA,MAAM,SAASC,aAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,EAAA,IAAM,CAAA,EAAG,MAAM,CAAA,MAAA,CAAA;AAC/B,EAAA,MAAM,QAAA,GAAW,GAAG,MAAM,CAAA,OAAA,CAAA;AAC1B,EAAA,MAAM,OAAA,GAAU,GAAG,MAAM,CAAA,MAAA,CAAA;AAEzB,EAAA,MAAM,CAAC,WAAA,EAAa,SAAS,CAAA,GAAIN,iBAAS,KAAK,CAAA;AAC/C,EAAA,MAAM,CAAC,OAAO,QAAQ,CAAA,GAAIA,iBAAiB,MAAM,OAAA,CAAQ,KAAK,CAAC,CAAA;AAC/D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,iBAAS,KAAK,CAAA;AAChD,EAAA,MAAM,SAAA,GAAYE,eAA8B,IAAI,CAAA;AACpD,EAAA,MAAM,SAAA,GAAYA,eAA8B,IAAI,CAAA;AAIpD,EAAA,IAAI,UAAU,SAAA,EAAW;AACvB,IAAA,YAAA,CAAa,KAAK,CAAA;AAElB,IAAA,IAAI,CAAC,UAAU,KAAA,EAAO,KAAA,CAAM,GAAG,CAAA,EAAG,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA,EAC3D;AAGA,EAAA,IAAI,WAAA,IAAe,QAAA,EAAU,SAAA,CAAU,KAAK,CAAA;AAE5C,EAAA,MAAM,MAAA,GAAS,eAAe,CAAC,QAAA;AAC/B,EAAA,MAAM,GAAA,GAAM,eAAe,EAAE,MAAA,EAAQ,WAAW,QAAA,EAAU,MAAA,EAAQ,eAAe,CAAA;AACjF,EAAA,MAAM,OAAA,GAAU,UAAU,GAAA,KAAQ,IAAA;AAElC,EAAA,MAAM,YAAA,GAAe,UAAA;AAAA,IACnB,MAAM;AACJ,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,EAAE,OAAA,EAAS,MAAA,EAAQ,MAAA,EAAQ,CAAC,SAAS,CAAA;AAAE,GACzC;AACA,EAAA,MAAM,OAAA,GAAU,YAAA,CAA6B,EAAE,OAAA,EAAS,SAAS,CAAA;AACjE,EAAA,MAAM,eAAA,GAAkBK,gBAAQ,MAAM,SAAA,CAA0B,WAAW,OAAO,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAE9F,EAAA,MAAM,YAAA,2BAAgB,IAAA,KAAiB;AAErC,IAAA,IAAI,CAAC,UAAA,CAAW,IAAA,CAAK,GAAG,CAAA,EAAG;AAE3B,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,QAAA,GAAW,KAAK,GAAG,CAAA;AAAA,EACrB,CAAA,EANqB,cAAA,CAAA;AAQrB,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,4CAA4C,kBAAkB,CAAA,CAAA;AAAA,MAEzE,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAW,GAAA,EAAK,SAAA,EAC7B,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,iBAAA,EAAA,EAAW,OAAA,EAAS,OAAA,EAAS,SAAA,EAAU,OACrC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACAD,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,cAAA,EAAc,QAAQ,EAAA,GAAK,MAAA;AAAA,cAC3B,SAAA,EAAW,4KAA4K,SAAS,CAAA,CAAA;AAAA,cAEhM,QAAA,kBAAAD,eAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAI,OAAA;AAAA,kBACJ,IAAA,EAAK,QAAA;AAAA,kBACL,eAAA,EAAc,QAAA;AAAA,kBACd,eAAA,EAAe,MAAA;AAAA,kBACf,eAAA,EAAe,SAAS,QAAA,GAAW,MAAA;AAAA,kBACnC,cAAA,EAAc,QAAQ,IAAA,GAAO,MAAA;AAAA,kBAC7B,kBAAA,EAAkB,QAAQ,OAAA,GAAU,MAAA;AAAA,kBACpC,QAAA;AAAA,kBACA,SAAS,MAAM;AACb,oBAAA,SAAA,CAAU,CAAC,MAAM,CAAA;AAAA,kBACnB,CAAA;AAAA,kBACA,SAAA,EAAW,CAAA,wGAAA,EACT,QAAA,GAAW,gBAAA,GAAmB,gBAChC,CAAA,CAAA;AAAA,kBAEA,QAAA,EAAA;AAAA,oCAAAC,cAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,aAAA,EAAY,MAAA;AAAA,wBACZ,SAAA,EAAU,+CAAA;AAAA,wBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,CAAM,GAAA,EAAI;AAAA,wBAEpC,QAAA,kBAAAA,cAAA;AAAA,0BAACE,UAAA;AAAA,0BAAA;AAAA,4BACC,IAAA,EAAK,wBAAA;AAAA,4BACL,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,qBACF;AAAA,oCACAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,6BAAA,EAAgC,KAAA,GAAQ,EAAA,GAAK,iBAAiB,CAAA,CAAA,EAC5E,QAAA,EAAA,KAAA,GAAQ,KAAA,CAAM,WAAA,EAAY,GAAI,WAAA,EACjC,CAAA;AAAA,oCACAA,cAAA;AAAA,sBAACE,UAAA;AAAA,sBAAA;AAAA,wBACC,aAAA,EAAY,MAAA;AAAA,wBACZ,IAAA,EAAM,SAAS,+BAAA,GAAkC,2BAAA;AAAA,wBACjD,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA;AACF;AAAA;AACF,SAAA,EACF,CAAA;AAAA,wBACAF,cAAA,CAACG,iBAAA,EAAA,EAAW,EAAA,EAAI,OAAA,EAAS,KAAA,EAAc,CAAA;AAAA,QACtC,OAAA,IACCC,qBAAA;AAAA,0BACEJ,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,eAAA;AAAA,cACL,EAAA,EAAI,QAAA;AAAA,cACJ,IAAA,EAAK,QAAA;AAAA,cACL,QAAA,EAAU,EAAA;AAAA,cACV,cAAY,KAAA,IAAS,WAAA;AAAA,cACrB,SAAA,EAAU,qGAAA;AAAA,cACV,OAAO,gBAAA,CAAiB,GAAA,CAAI,MAAM,GAAA,CAAI,SAAA,EAAW,OAAO,WAAW,CAAA;AAAA,cAEnE,QAAA,kBAAAA,cAAA;AAAA,gBAACK,6BAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,CAAC,KAAK,CAAA;AAAA,kBACjB,SAAA;AAAA,kBACA,KAAA;AAAA,kBACA,QAAA,EAAU;AAAA;AAAA;AACZ;AAAA,WACF;AAAA,UACA,QAAA,CAAS;AAAA;AACX;AAAA;AAAA,GACJ;AAEJ,CAAA,EApI0B,YAAA","file":"index.cjs","sourcesContent":["export type TDropdownPlacement = 'top' | 'bottom';\n\nexport interface IDropdownRect {\n  top: number;\n  bottom: number;\n  left: number;\n  width: number;\n}\n\n/** The gap between the field and the list. */\nexport const DROPDOWN_GAP = 8;\n\n/**\n * Where a list that opens from a field goes: where the app asked (`desired`), unless that side of the\n * field has not room for the list and the other one has more. A list that fits on neither stays\n * where it was asked to open.\n *\n * @param needed how tall the list is, or the most it can be (its `max-height`).\n */\nexport const getDropdownPlacement = ({\n  rect,\n  viewportHeight,\n  desired,\n  needed,\n}: {\n  rect: Pick<IDropdownRect, 'top' | 'bottom'>;\n  viewportHeight: number;\n  desired: TDropdownPlacement;\n  needed: number;\n}): TDropdownPlacement => {\n  const below = viewportHeight - rect.bottom - DROPDOWN_GAP;\n  const above = rect.top - DROPDOWN_GAP;\n  const room = desired === 'bottom' ? below : above;\n  const other = desired === 'bottom' ? above : below;\n\n  if (room >= needed || other <= room) return desired;\n\n  return desired === 'bottom' ? 'top' : 'bottom';\n};\n\n/** The `style` of a list that is `position: fixed` under or over the field, as wide as it is. */\nexport const getDropdownStyle = (\n  rect: IDropdownRect,\n  placement: TDropdownPlacement,\n  viewportHeight: number,\n) => ({\n  left: rect.left,\n  width: rect.width,\n  ...(placement === 'top'\n    ? { bottom: viewportHeight - rect.top + DROPDOWN_GAP }\n    : { top: rect.bottom + DROPDOWN_GAP }),\n});\n","import type { Ref } from 'react';\n\nconst assign = <T>(ref: Ref<T> | undefined, node: T | null) => {\n  if (typeof ref === 'function') return ref(node);\n\n  if (ref) ref.current = node;\n\n  return undefined;\n};\n\n/**\n * One ref callback that gives the element to all the refs it is given (a ref of the app, the ref that\n * `register()` of React Hook Form makes, a ref of the component itself). When the element goes away\n * every ref gets `null` again, or, for a ref callback that returns a cleanup function, that cleanup is\n * called. Keep the result stable (`useMemo`): a new function at every render makes React take the\n * element away from the refs and give it again.\n */\nexport const mergeRefs =\n  <T>(...refs: (Ref<T> | undefined)[]) =>\n  (node: T | null) => {\n    const cleanups = refs.map((ref) => assign(ref, node));\n\n    return () => {\n      refs.forEach((ref, index) => {\n        const cleanup = cleanups[index];\n\n        if (typeof cleanup === 'function') cleanup();\n        else assign(ref, null);\n      });\n    };\n  };\n","import { type RefObject, useLayoutEffect, useState } from 'react';\n\nimport {\n  getDropdownPlacement,\n  type IDropdownRect,\n  type TDropdownPlacement,\n} from './dropdown-position.js';\n\nexport interface IAnchoredBox {\n  /** Where the anchor is on the screen. */\n  rect: IDropdownRect;\n  /** The side of the anchor the box goes on. */\n  placement: TDropdownPlacement;\n}\n\nexport interface IAnchoredBoxOptions {\n  /** The box is open: it is only measured (and followed) while it is. */\n  isOpen: boolean;\n  /** The element the box opens from. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** The side the app asked for. */\n  position: TDropdownPlacement;\n  /** How tall the box is, or the most it can be. */\n  needed: number;\n}\n\n/**\n * Where a box that opens from an element (a list, a picker) goes: under or over it, on the side with\n * room. It is measured before the browser paints, so the box never shows in the wrong place for a\n * moment, and again whenever the page scrolls or the window is resized. It is `null` until the first\n * measure; use it with `getDropdownStyle()`.\n */\nexport const useAnchoredBox = ({\n  isOpen,\n  anchorRef,\n  position,\n  needed,\n}: IAnchoredBoxOptions): IAnchoredBox | null => {\n  const [box, setBox] = useState<IAnchoredBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    const update = () => {\n      const anchor = anchorRef.current;\n\n      if (!anchor) return;\n\n      const rect = anchor.getBoundingClientRect();\n\n      setBox({\n        rect,\n        placement: getDropdownPlacement({\n          rect,\n          viewportHeight: window.innerHeight,\n          desired: position,\n          needed,\n        }),\n      });\n    };\n\n    update();\n    window.addEventListener('scroll', update, true);\n    window.addEventListener('resize', update);\n\n    return () => {\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [isOpen, anchorRef, position, needed]);\n\n  return box;\n};\n","import { type RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nexport type TDismissReason = 'outside' | 'escape';\n\nexport interface IDismissOptions {\n  /** Turn the listeners off (e.g. while a popup is closed). @default true */\n  enabled?: boolean;\n  /**\n   * Elements that count as inside although they are not inside the element in the DOM: a popup that\n   * is rendered with `createPortal()` into `document.body`. A press on one of them (or on anything in\n   * it) is not \"outside\". Refs that are not attached are skipped. The list is read when the press\n   * happens, so a new array on every render is fine.\n   */\n  ignore?: readonly RefObject<Element | null>[];\n  /** Dismiss when the user presses outside the element. @default true */\n  outside?: boolean;\n  /** Dismiss when the user presses Escape. @default true */\n  escape?: boolean;\n}\n\n// The popups that are open, the last one on top. Escape closes the one on top only: a select that is\n// open inside a dialog closes first, and the dialog stays until the next Escape.\nconst openStack: symbol[] = [];\n\n/**\n * Closes a popup (a select, a dialog, a menu) the way people expect: a press (mouse, touch or pen)\n * anywhere outside it, or Escape.\n *\n * - The press is listened for on `document` in the capture phase, so an inner `stopPropagation()`\n *   cannot hide it, and \"inside\" is decided from the path the event took (`composedPath()`), which\n *   stays right when the pressed node is removed by another listener first.\n * - A popup portalled out of the element is not inside it in the DOM: list its ref in `ignore`.\n * - Escape only reaches the popup that opened last, and not an Escape that something else already\n *   handled (`defaultPrevented`).\n * - The listeners are added once and only when `enabled` changes: the latest `onDismiss` and `ignore`\n *   are used, so passing new ones on every render costs nothing.\n *\n * @returns the ref to put on the popup (or on its trigger, when the popup is portalled).\n */\nexport const useDismiss = <T extends HTMLElement>(\n  onDismiss: (reason: TDismissReason, event: Event) => void,\n  { enabled = true, ignore, outside = true, escape = true }: IDismissOptions = {},\n): RefObject<T | null> => {\n  const ref = useRef<T | null>(null);\n  const onDismissRef = useRef(onDismiss);\n  const ignoreRef = useRef(ignore);\n\n  // Updated as soon as a render commits, so the listeners below never need them as dependencies.\n  useLayoutEffect(() => {\n    onDismissRef.current = onDismiss;\n    ignoreRef.current = ignore;\n  });\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const token = Symbol('dismissable');\n\n    // a popup that does not listen for Escape is not in the stack: it must not hide the ones below it\n    if (escape) openStack.push(token);\n\n    const handlePress = (event: PointerEvent) => {\n      const element = ref.current;\n\n      if (!outside || !element) return;\n\n      const path = event.composedPath();\n      const isInside =\n        path.includes(element) ||\n        (ignoreRef.current ?? []).some(({ current }) => current !== null && path.includes(current));\n\n      if (!isInside) onDismissRef.current('outside', event);\n    };\n\n    const handleKey = (event: KeyboardEvent) => {\n      if (!escape || event.key !== 'Escape' || event.defaultPrevented) return;\n      if (openStack.at(-1) !== token) return;\n\n      onDismissRef.current('escape', event);\n    };\n\n    document.addEventListener('pointerdown', handlePress, true);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('pointerdown', handlePress, true);\n      document.removeEventListener('keydown', handleKey);\n\n      const index = openStack.indexOf(token);\n\n      if (index !== -1) openStack.splice(index, 1);\n    };\n  }, [enabled, outside, escape]);\n\n  return ref;\n};\n","// What can be reached with the Tab key. An element is left out when it is disabled, when it has\n// `tabindex=\"-1\"`, when it is `hidden` (or inside something that is, or that is `inert`) and for a\n// hidden input.\nconst TABBABLE = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  'audio[controls]',\n  'video[controls]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  '[tabindex]',\n].join(',');\n\nconst isTabbable = (element: HTMLElement) => {\n  if (element.tabIndex < 0) return false;\n\n  return !element.closest('[hidden], [inert]');\n};\n\n/** The elements inside `root` that the Tab key stops on, in the order it goes through them. */\nexport const getTabbable = (root: HTMLElement) =>\n  [...root.querySelectorAll<HTMLElement>(TABBABLE)].filter(isTabbable);\n","import { type RefObject, useEffect, useRef } from 'react';\n\nimport { getTabbable } from './focus.js';\n\nexport interface IFocusTrapOptions {\n  /** Turn the trap on (while the dialog is open). */\n  enabled: boolean;\n  /** The element that gets the focus first. Without it: the first element that Tab stops on, or the dialog. */\n  initialFocus?: RefObject<HTMLElement | null>;\n  /** Give the focus back to what had it before the dialog opened, when it closes. @default true */\n  returnFocus?: boolean;\n}\n\n// The traps that are on, the last one on top: with a dialog open over another one only the top one\n// keeps the focus in.\nconst activeTraps: symbol[] = [];\n\n/**\n * Keeps the keyboard inside a dialog, the way a dialog has to behave:\n *\n * - when it opens the focus goes into it (to `initialFocus`, or the first thing Tab stops on, or the\n *   dialog itself);\n * - Tab on the last element goes to the first, and Shift + Tab on the first goes to the last, so the\n *   focus cannot get to the page behind;\n * - when it closes the focus goes back to what had it before, so a person who opened it with the\n *   keyboard is where they were.\n *\n * @returns the ref for the dialog (it should have `tabIndex={-1}`, so it can hold the focus when it has\n * nothing to focus in it).\n */\nexport const useFocusTrap = <T extends HTMLElement>({\n  enabled,\n  initialFocus,\n  returnFocus = true,\n}: IFocusTrapOptions): RefObject<T | null> => {\n  const ref = useRef<T | null>(null);\n  const initialFocusRef = useRef(initialFocus);\n\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  useEffect(() => {\n    const dialog = ref.current;\n\n    if (!enabled || !dialog) return;\n\n    const token = Symbol('trap');\n    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n\n    activeTraps.push(token);\n    (initialFocusRef.current?.current ?? getTabbable(dialog).at(0) ?? dialog).focus();\n\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab' || activeTraps.at(-1) !== token) return;\n\n      const tabbable = getTabbable(dialog);\n      const first = tabbable.at(0);\n      const last = tabbable.at(-1);\n      const current = document.activeElement;\n\n      if (!first || !last) {\n        event.preventDefault();\n        dialog.focus();\n\n        return;\n      }\n\n      if (!(current instanceof Node) || !dialog.contains(current) || current === dialog) {\n        // the focus is on the dialog itself, or got out: bring it in\n        event.preventDefault();\n        (event.shiftKey ? last : first).focus();\n      } else if (event.shiftKey && current === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && current === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('keydown', handleKey);\n\n      const index = activeTraps.indexOf(token);\n\n      if (index !== -1) activeTraps.splice(index, 1);\n\n      if (returnFocus && previous?.isConnected) previous.focus();\n    };\n  }, [enabled, returnFocus]);\n\n  return ref;\n};\n","import { ColorService, type IColor } from 'react-color-palette';\n\n// #rgb, #rgba, #rrggbb, #rrggbbaa\nconst HEX = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;\n\n/** The colour used when there is none, or the text is not a colour. */\nexport const FALLBACK_COLOR = '#000000';\n\n/** Whether `value` is a colour written in hexadecimal (`#fff`, `#ff00aa`, `#ff00aa80`). */\nexport const isHexColor = (value: string | undefined): value is string =>\n  value !== undefined && HEX.test(value);\n\n/** The colour of a hexadecimal text; black for nothing and for text that is not a colour. */\nexport const toColor = (value: string | undefined): IColor =>\n  ColorService.convert('hex', isHexColor(value) ? value : FALLBACK_COLOR);\n\n/** Two ways to write the same colour (`#FFF` and `#fff`)? Only the case is looked at. */\nexport const isSameHex = (a: string | undefined, b: string | undefined) =>\n  a?.toLowerCase() === b?.toLowerCase();\n","import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the color input, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'mage',\n    width: 24,\n    height: 24,\n    icons: {\n      'color-picker-fill': {\n        body: '<path fill=\"currentColor\" d=\"m17.042 10.894l-4-4.006a1 1 0 0 0-.2-.14l4.37 4.356a.7.7 0 0 0-.17-.21\"/><path fill=\"currentColor\" d=\"M20.962 3.002A3.56 3.56 0 0 0 18.502 2a3.64 3.64 0 0 0-2.55 1.002l-1.32 1.592a2.4 2.4 0 0 0-.68-.45a2.17 2.17 0 0 0-1.66 0a2.2 2.2 0 0 0-.7.47a2.185 2.185 0 0 0-.16 2.864l-7.4 7.421a2.64 2.64 0 0 0-.63 2.694l-.85.852a1.9 1.9 0 0 0-.41.61c-.09.227-.137.468-.14.712c.002.25.05.498.14.73q.144.325.39.582l.33.36c.176.176.383.318.61.42c.232.093.48.14.73.141c.247-.002.49-.05.72-.14a1.9 1.9 0 0 0 .6-.41l.87-.862c.36.121.743.16 1.12.11a2.63 2.63 0 0 0 1.55-.741l7.45-7.441c.371.28.825.432 1.29.43c.568 0 1.114-.222 1.52-.62a2.135 2.135 0 0 0 0-3.005l1.6-1.242l.09-.08a3.57 3.57 0 0 0-.08-5.007zm-1 3.886l-2.21 1.722a.77.77 0 0 0-.29.54a.8.8 0 0 0 .21.582l.57.57q.09.099.14.22a.5.5 0 0 1 .05.251a.56.56 0 0 1-.05.25a.6.6 0 0 1-.14.211a.69.69 0 0 1-.93 0l-.11-.1l-4.37-4.357l-.18-.17a.66.66 0 0 1 0-.931a.8.8 0 0 1 .21-.15a.7.7 0 0 1 .25 0a.7.7 0 0 1 .25 0q.115.06.21.15l.58.57a.73.73 0 0 0 .56.21a.77.77 0 0 0 .54-.27l1.78-2.153a1.94 1.94 0 0 1 1.44-.56a2.06 2.06 0 0 1 1.85 1.236a2.07 2.07 0 0 1-.35 2.199z\"/>',\n      },\n    },\n  },\n  {\n    prefix: 'pepicons-pop',\n    width: 26,\n    height: 26,\n    icons: {\n      'color-picker': {\n        body: '<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M7.536 15.237c-1.56.616-4.257 2.37-4.728 1.9c-.306-.306.323-1.546.972-2.806h4.66z\" clip-rule=\"evenodd\"/><path d=\"M15.803 5.555a1 1 0 1 1 1.415 1.414l-8.975 8.975a1 1 0 0 1-.34.222c-.396.157-.8.355-1.753.846c-.47.242-.679.348-.933.474c-1.748.861-2.405 1.068-3.116.357c-.71-.71-.504-1.367.351-3.105c.127-.257.234-.468.48-.945c.491-.953.689-1.356.845-1.753A1 1 0 0 1 4 11.701l8.975-8.975a1 1 0 1 1 1.414 1.414l-8.832 8.833c-.174.414-.393.855-.847 1.736a52 52 0 0 0-.535 1.06l.158-.077c.24-.119.441-.221.902-.458c.88-.454 1.321-.673 1.736-.847z\"/><path d=\"M14.39 4.14a1 1 0 1 1-1.415-1.414a3 3 0 1 1 4.243 4.243a1 1 0 1 1-1.415-1.414A1 1 0 0 0 14.39 4.14m-4.953.705a1 1 0 0 1 1.415-1.414l5.656 5.657a1 1 0 0 1-1.414 1.414z\"/></g>',\n      },\n      'color-picker-off': {\n        body: '<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M7.536 15.237c-1.56.616-4.257 2.37-4.728 1.9c-.306-.306.323-1.546.972-2.806h4.66z\" clip-rule=\"evenodd\"/><path d=\"M15.803 5.555a1 1 0 1 1 1.415 1.414l-8.975 8.975a1 1 0 0 1-.34.222c-.396.157-.8.355-1.753.846c-.47.242-.679.348-.933.474c-1.748.861-2.405 1.068-3.116.357c-.71-.71-.504-1.367.351-3.105c.127-.257.234-.468.48-.945c.491-.953.689-1.356.845-1.753A1 1 0 0 1 4 11.701l8.975-8.975a1 1 0 1 1 1.414 1.414l-8.832 8.833c-.174.414-.393.855-.847 1.736a52 52 0 0 0-.535 1.06l.158-.077c.24-.119.441-.221.902-.458c.88-.454 1.321-.673 1.736-.847z\"/><path d=\"M14.39 4.14a1 1 0 1 1-1.415-1.414a3 3 0 1 1 4.243 4.243a1 1 0 1 1-1.415-1.414A1 1 0 0 0 14.39 4.14m-4.953.705a1 1 0 0 1 1.415-1.414l5.656 5.657a1 1 0 0 1-1.414 1.414zM1.293 2.707a1 1 0 0 1 1.414-1.414l16 16a1 1 0 0 1-1.414 1.414z\"/></g>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerColorInputIcons, names: COLOR_INPUT_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import '@beautinique/frontend-styles/color-input.css';\n\nimport { Icon } from '@iconify/react';\nimport { useId, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ColorPicker, type IColor } from 'react-color-palette';\n\nimport { type IFieldBase, InputError, InputLabel } from '../inputs/index.js';\nimport { getDropdownStyle, type TDropdownPlacement } from '../lib/dropdown-position.js';\nimport { mergeRefs } from '../lib/mergeRefs.js';\nimport { useAnchoredBox } from '../lib/useAnchoredBox.js';\nimport { useDismiss } from '../lib/useDismiss.js';\nimport { useFocusTrap } from '../lib/useFocusTrap.js';\nimport { isHexColor, isSameHex, toColor } from './color.js';\nimport { registerColorInputIcons } from './color-input-icons.js';\n\nexport interface IColorInput extends IFieldBase {\n  /** The colour, in hexadecimal (`#ff00aa`). Anything else is shown as black. */\n  value?: string;\n  /** Gets the colour, in hexadecimal, as the person changes it. */\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  /** What the field says while there is no `value`. */\n  placeholder?: string;\n  /** The `id` of the field, for something that has to point at it. */\n  id?: string;\n  /** Which side of the field the picker opens on, unless there is no room there. @default 'bottom' */\n  position?: TDropdownPlacement;\n  /** Leave out the slider and the field of the alpha (the transparency). @default false */\n  hideAlpha?: boolean;\n  /** The name of the picker for assistive technology, when the field has no `label`. @default 'Colour picker' */\n  pickerLabel?: string;\n}\n\n// The tallest the picker gets: its area, its sliders and its fields.\nconst PICKER_HEIGHT = 340;\n\n/**\n * A field that shows a colour and opens a picker to change it (`react-color-palette`, which this\n * entry needs: install it). The field is one button, so the keyboard reaches it; the picker is a\n * dialog that holds the focus until it is closed (Escape, a press outside, or the field again) and\n * gives it back. The sliders need a mouse or a finger; the fields in the picker (hex, rgb) do not:\n * the colour can be typed.\n *\n * The picker is drawn in `document.body`, so a parent that scrolls or hides what overflows does not\n * cut it; it opens on the other side when there is no room, and follows the field while the page\n * scrolls.\n */\nexport const ColorInput = ({\n  label = '',\n  value,\n  error = '',\n  disabled = false,\n  placeholder,\n  onChange,\n  id,\n  containerClassName = '',\n  className = '',\n  position = 'bottom',\n  hideAlpha = false,\n  pickerLabel = 'Colour picker',\n}: IColorInput) => {\n  registerColorInputIcons();\n\n  const baseId = useId();\n  const fieldId = id ?? `${baseId}-field`;\n  const pickerId = `${baseId}-picker`;\n  const errorId = `${baseId}-error`;\n\n  const [isOpenState, setIsOpen] = useState(false);\n  const [color, setColor] = useState<IColor>(() => toColor(value));\n  const [seenValue, setSeenValue] = useState(value);\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n\n  // The app gave another colour: show it. Not when it is the colour the picker just gave it, because\n  // writing it down again would lose the hue of a grey, which a hex cannot hold.\n  if (value !== seenValue) {\n    setSeenValue(value);\n\n    if (!isSameHex(value, color.hex)) setColor(toColor(value));\n  }\n\n  // a field that is disabled while it is open closes, and stays closed when it is enabled again\n  if (isOpenState && disabled) setIsOpen(false);\n\n  const isOpen = isOpenState && !disabled;\n  const box = useAnchoredBox({ isOpen, anchorRef, position, needed: PICKER_HEIGHT });\n  const isShown = isOpen && box !== null;\n\n  const containerRef = useDismiss<HTMLDivElement>(\n    () => {\n      setIsOpen(false);\n    },\n    { enabled: isOpen, ignore: [pickerRef] },\n  );\n  const trapRef = useFocusTrap<HTMLDivElement>({ enabled: isShown });\n  const mergedPickerRef = useMemo(() => mergeRefs<HTMLDivElement>(pickerRef, trapRef), [trapRef]);\n\n  const handleChange = (next: IColor) => {\n    // text that is being typed can be no colour (`#GG0000`): the app is not told\n    if (!isHexColor(next.hex)) return;\n\n    setColor(next);\n    onChange?.(next.hex);\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`}\n    >\n      <div className=\"relative\" ref={anchorRef}>\n        <InputLabel htmlFor={fieldId} className=\"z-2\">\n          {label}\n        </InputLabel>\n        <div\n          data-invalid={error ? '' : undefined}\n          className={`border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c data-invalid:border-red-c flex items-center gap-1 overflow-hidden rounded-lg border px-3 text-[13px] ${className}`}\n        >\n          <button\n            id={fieldId}\n            type=\"button\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={isOpen}\n            aria-controls={isOpen ? pickerId : undefined}\n            aria-invalid={error ? true : undefined}\n            aria-describedby={error ? errorId : undefined}\n            disabled={disabled}\n            onClick={() => {\n              setIsOpen(!isOpen);\n            }}\n            className={`text-primary flex min-w-0 flex-1 items-center gap-2 border-none bg-transparent text-left outline-hidden ${\n              disabled ? 'cursor-no-drop' : 'cursor-pointer'\n            }`}\n          >\n            <span\n              aria-hidden=\"true\"\n              className=\"border-primary/10 rounded border p-0.5 xl:p-1\"\n              style={{ backgroundColor: color.hex }}\n            >\n              <Icon\n                icon=\"mage:color-picker-fill\"\n                className=\"shrink-0 [&>path]:last:fill-primary-invert [&>path]:last:stroke-primary\"\n              />\n            </span>\n            <span className={`flex-1 truncate py-2 xl:py-3 ${value ? '' : 'text-primary/30'}`}>\n              {value ? value.toUpperCase() : placeholder}\n            </span>\n            <Icon\n              aria-hidden=\"true\"\n              icon={isOpen ? 'pepicons-pop:color-picker-off' : 'pepicons-pop:color-picker'}\n              className=\"shrink-0\"\n            />\n          </button>\n        </div>\n      </div>\n      <InputError id={errorId} error={error} />\n      {isShown &&\n        createPortal(\n          <div\n            ref={mergedPickerRef}\n            id={pickerId}\n            role=\"dialog\"\n            tabIndex={-1}\n            aria-label={label || pickerLabel}\n            className=\"border-primary/10 bg-smoke-eerie fixed z-3 overflow-hidden rounded-lg border shadow-md outline-none\"\n            style={getDropdownStyle(box.rect, box.placement, window.innerHeight)}\n          >\n            <ColorPicker\n              hideInput={['hsv']}\n              hideAlpha={hideAlpha}\n              color={color}\n              onChange={handleChange}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"]}

package/dist/color-input/index.d.cts

@@ -0,0 +1,2 @@
+export { ColorInput, type IColorInput } from './ColorInput.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/color-input/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/color-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/color-input/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorInput, type IColorInput } from './ColorInput.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/color-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC"}