@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/tag-select.js

@@ -0,0 +1,1252 @@
+import { createContext, useCallback, useRef, useState, useContext, useMemo, useEffect, isValidElement, useLayoutEffect } from 'react';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
+import { useFilter, FocusScope, useFocusManager } from 'react-aria';
+import { ComboBox, ListBox, Group, Label as Label$1, OverlayTriggerStateContext, Popover as Popover$1, Text, ComboBoxStateContext, Input, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Button } from 'react-aria-components';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { extendTailwindMerge } from 'tailwind-merge';
+import '@phosphor-icons/react/dist/csr/Plus';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import { createPortal } from 'react-dom';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+import '@phosphor-icons/react/dist/csr/Info';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
+
+function $232f8dea1b0a4f2f$export$762f73dccccd255d(options) {
+  let { initialItems = [], initialSelectedKeys, getKey = (item) => item.id ?? item.key, filter, initialFilterText = "" } = options;
+  let [state, setState] = (useState)({
+    items: initialItems,
+    selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
+    filterText: initialFilterText
+  });
+  let filteredItems = (useMemo)(() => filter ? state.items.filter((item) => filter(item, state.filterText)) : state.items, [
+    state.items,
+    state.filterText,
+    filter
+  ]);
+  return {
+    ...state,
+    items: filteredItems,
+    ...$232f8dea1b0a4f2f$export$79c0c687a5963b0a({
+      getKey
+    }, setState),
+    getItem(key) {
+      return state.items.find((item) => getKey(item) === key);
+    }
+  };
+}
+function $232f8dea1b0a4f2f$export$79c0c687a5963b0a(opts, dispatch) {
+  let { cursor, getKey } = opts;
+  return {
+    setSelectedKeys(selectedKeys) {
+      dispatch((state) => ({
+        ...state,
+        selectedKeys
+      }));
+    },
+    addKeysToSelection(selectedKeys) {
+      dispatch((state) => {
+        if (state.selectedKeys === "all") return state;
+        if (selectedKeys === "all") return {
+          ...state,
+          selectedKeys: "all"
+        };
+        return {
+          ...state,
+          selectedKeys: /* @__PURE__ */ new Set([
+            ...state.selectedKeys,
+            ...selectedKeys
+          ])
+        };
+      });
+    },
+    removeKeysFromSelection(selectedKeys) {
+      dispatch((state) => {
+        if (selectedKeys === "all") return {
+          ...state,
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+        let selection = state.selectedKeys === "all" ? new Set(state.items.map(getKey)) : new Set(state.selectedKeys);
+        for (let key of selectedKeys) selection.delete(key);
+        return {
+          ...state,
+          selectedKeys: selection
+        };
+      });
+    },
+    setFilterText(filterText) {
+      dispatch((state) => ({
+        ...state,
+        filterText
+      }));
+    },
+    insert(index, ...values) {
+      dispatch((state) => $232f8dea1b0a4f2f$var$insert(state, index, ...values));
+    },
+    insertBefore(key, ...values) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item) => getKey?.(item) === key);
+        if (index === -1) {
+          if (state.items.length === 0) index = 0;
+          else return state;
+        }
+        return $232f8dea1b0a4f2f$var$insert(state, index, ...values);
+      });
+    },
+    insertAfter(key, ...values) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item) => getKey?.(item) === key);
+        if (index === -1) {
+          if (state.items.length === 0) index = 0;
+          else return state;
+        }
+        return $232f8dea1b0a4f2f$var$insert(state, index + 1, ...values);
+      });
+    },
+    prepend(...values) {
+      dispatch((state) => $232f8dea1b0a4f2f$var$insert(state, 0, ...values));
+    },
+    append(...values) {
+      dispatch((state) => $232f8dea1b0a4f2f$var$insert(state, state.items.length, ...values));
+    },
+    remove(...keys) {
+      dispatch((state) => {
+        let keySet = new Set(keys);
+        let items = state.items.filter((item) => !keySet.has(getKey(item)));
+        let selection = "all";
+        if (state.selectedKeys !== "all") {
+          selection = new Set(state.selectedKeys);
+          for (let key of keys) selection.delete(key);
+        }
+        if (cursor == null && items.length === 0) selection = /* @__PURE__ */ new Set();
+        return {
+          ...state,
+          items,
+          selectedKeys: selection
+        };
+      });
+    },
+    removeSelectedItems() {
+      dispatch((state) => {
+        if (state.selectedKeys === "all") return {
+          ...state,
+          items: [],
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+        let selectedKeys = state.selectedKeys;
+        let items = state.items.filter((item) => !selectedKeys.has(getKey(item)));
+        return {
+          ...state,
+          items,
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+      });
+    },
+    move(key, toIndex) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item2) => getKey(item2) === key);
+        if (index === -1) return state;
+        let copy = state.items.slice();
+        let [item] = copy.splice(index, 1);
+        copy.splice(toIndex, 0, item);
+        return {
+          ...state,
+          items: copy
+        };
+      });
+    },
+    moveBefore(key, keys) {
+      dispatch((state) => {
+        let toIndex = state.items.findIndex((item) => getKey(item) === key);
+        if (toIndex === -1) return state;
+        let keyArray = Array.isArray(keys) ? keys : [
+          ...keys
+        ];
+        let indices = keyArray.map((key2) => state.items.findIndex((item) => getKey(item) === key2)).sort((a, b) => a - b);
+        return $232f8dea1b0a4f2f$var$move(state, indices, toIndex);
+      });
+    },
+    moveAfter(key, keys) {
+      dispatch((state) => {
+        let toIndex = state.items.findIndex((item) => getKey(item) === key);
+        if (toIndex === -1) return state;
+        let keyArray = Array.isArray(keys) ? keys : [
+          ...keys
+        ];
+        let indices = keyArray.map((key2) => state.items.findIndex((item) => getKey(item) === key2)).sort((a, b) => a - b);
+        return $232f8dea1b0a4f2f$var$move(state, indices, toIndex + 1);
+      });
+    },
+    update(key, newValue) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) return state;
+        let updatedValue;
+        if (typeof newValue === "function") updatedValue = newValue(state.items[index]);
+        else updatedValue = newValue;
+        return {
+          ...state,
+          items: [
+            ...state.items.slice(0, index),
+            updatedValue,
+            ...state.items.slice(index + 1)
+          ]
+        };
+      });
+    }
+  };
+}
+function $232f8dea1b0a4f2f$var$insert(state, index, ...values) {
+  return {
+    ...state,
+    items: [
+      ...state.items.slice(0, index),
+      ...values,
+      ...state.items.slice(index)
+    ]
+  };
+}
+function $232f8dea1b0a4f2f$var$move(state, indices, toIndex) {
+  toIndex -= indices.filter((index) => index < toIndex).length;
+  let moves = indices.map((from) => ({
+    from,
+    to: toIndex++
+  }));
+  for (let i = 0; i < moves.length; i++) {
+    let a = moves[i].from;
+    for (let j = i; j < moves.length; j++) {
+      let b = moves[j].from;
+      if (b > a) moves[j].from--;
+    }
+  }
+  for (let i = 0; i < moves.length; i++) {
+    let a = moves[i];
+    for (let j = moves.length - 1; j > i; j--) {
+      let b = moves[j];
+      if (b.from < a.to) a.to++;
+      else b.from++;
+    }
+  }
+  let copy = state.items.slice();
+  for (let move of moves) {
+    let [item] = copy.splice(move.from, 1);
+    copy.splice(move.to, 0, item);
+  }
+  return {
+    ...state,
+    items: copy
+  };
+}
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z",
+          fill: "url(#reflection-gradient)",
+          fillOpacity: "0.4"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "reflection-gradient", x1: "3.6", y1: "0", x2: "3.6", y2: "2.4", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { stopColor: "white" }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.1" })
+      ] }) })
+    ] })
+  }
+);
+var sizes2 = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+  xl: "size-4.5",
+  "2xl": "size-5",
+  "3xl": "size-6",
+  "4xl": "size-8"
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", { className: cx("z-10 text-utility-blue-500", sizes2[size], className), viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+      className: "fill-current"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+      fill: "white"
+    }
+  )
+] });
+var AvatarCount = ({ count, className }) => /* @__PURE__ */ jsx("div", { className: cx("absolute right-0 bottom-0 p-px", className), children: /* @__PURE__ */ jsx("div", { className: "flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white", children: count }) });
+var styles = {
+  xs: { root: "size-6", rootWithBorder: "p-px", initials: "text-xs font-semibold", icon: "size-4" },
+  sm: { root: "size-8", rootWithBorder: "p-px", initials: "text-sm font-semibold", icon: "size-5" },
+  md: { root: "size-10", rootWithBorder: "p-px", initials: "text-md font-semibold", icon: "size-6" },
+  lg: { root: "size-12", rootWithBorder: "p-[1.5px]", initials: "text-lg font-semibold", icon: "size-7" },
+  xl: { root: "size-14", rootWithBorder: "p-0.5", initials: "text-xl font-semibold", icon: "size-8" },
+  "2xl": { root: "size-16", rootWithBorder: "p-0.5", initials: "text-display-xs font-semibold", icon: "size-8" }
+};
+var Avatar = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  border,
+  badge,
+  status,
+  verified,
+  count,
+  focusable = false,
+  rounded = true,
+  className,
+  contentClassName
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const canShowImage = src && !isFailed;
+  const renderMainContent = () => {
+    if (canShowImage) {
+      return /* @__PURE__ */ jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src, alt, onError: () => setIsFailed(true) });
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles[size].initials), children: initials });
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
+    }
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-avatar": true,
+      className: cx(
+        "relative inline-flex shrink-0 rounded-[7px]",
+        rounded && "rounded-full",
+        // Focus styles
+        focusable && "outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+        border && "ring-1 ring-secondary_alt",
+        border && styles[size].rootWithBorder,
+        styles[size].root,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]",
+              rounded && "rounded-full",
+              canShowImage && size !== "xs" && "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+              contentClassName
+            ),
+            children: renderMainContent()
+          }
+        ),
+        renderBadgeContent()
+      ]
+    }
+  );
+};
+var HintText = ({ isInvalid, className, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Size
+        size === "sm" && "text-xs",
+        "in-data-[input-size=sm]:text-xs",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    }
+  );
+};
+HintText.displayName = "HintText";
+var Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      "data-label": "true",
+      ...props,
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "hidden text-brand-tertiary",
+              isRequired && "block",
+              typeof isRequired === "undefined" && "group-required:block",
+              isInvalid && "text-error-primary",
+              typeof isInvalid === "undefined" && "group-invalid:text-error-primary"
+            ),
+            children: "*"
+          }
+        ),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, description: tooltipDescription, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            isDisabled: false,
+            className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Label.displayName = "Label";
+var MOBILE_SHEET_MAX_PX = 1024;
+function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+var MOBILE_SHEET_MOTION_MS = 175;
+var MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;
+function resolveSelectMobileOptions(mobileOptions) {
+  return {
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [isAnimating, setIsAnimating] = useState(false);
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
+    }
+    if (open) {
+      setShouldRender(true);
+    }
+  }, [open, enabled]);
+  useEffect(() => {
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
+  useLayoutEffect(() => {
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
+  useEffect(() => {
+    if (!enabled || !shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open, enabled]);
+  const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;
+  const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  const panelStyle = enabled ? {
+    transform: isAnimating ? "translateY(0)" : hiddenTransform,
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "transform, opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  const backdropStyle = enabled ? {
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  return { shouldRender, isAnimating, panelStyle, backdropStyle };
+}
+function MobileSheetCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function MobileSheetChrome({
+  title,
+  contentClassName,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cx("flex w-full shrink-0 items-center py-2 pl-4 pr-2", title ? "justify-between gap-3" : "justify-end"), children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+      /* @__PURE__ */ jsx(MobileSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+          contentClassName
+        ),
+        children
+      }
+    )
+  ] });
+}
+var Popover = ({ mobileOptions, children, size, className, style, compoundContent = false, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);
+  useEffect(() => {
+    if (!useMobileSheet || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [useMobileSheet, open]);
+  const close = () => overlayState?.close();
+  const showMobileSheet = useMobileSheet && shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const mobileScrim = useMobileSheet && shouldRender && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-overlay/70",
+        style: backdropStyle,
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 4,
+        ...props,
+        isExiting: isMobileSheetExiting,
+        ...useMobileSheet ? { "data-select-mobile-sheet": true } : {},
+        style: useMobileSheet ? { ...panelStyle, ...style } : style,
+        className: (state) => cx(
+          "outline-hidden",
+          !useMobileSheet && [
+            "w-(--trigger-width) origin-(--trigger-anchor-point) rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+            compoundContent ? "overflow-hidden outline-hidden" : "overflow-x-hidden overflow-y-auto py-1 outline-hidden",
+            state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+            state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+            !compoundContent && size === "sm" && "max-h-56!",
+            !compoundContent && size === "md" && "max-h-64!",
+            !compoundContent && size === "lg" && "max-h-80!"
+          ],
+          useMobileSheet && [
+            "fixed! inset-x-0! bottom-0! top-auto! left-0! right-0! z-[51] flex w-full! max-w-none! flex-col overflow-hidden rounded-t-2xl rounded-b-none border-x-0 border-t border-secondary bg-primary shadow-xl",
+            "max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))]",
+            resolvedMobile.sheetClassName
+          ],
+          typeof className === "function" ? className(state) : className
+        ),
+        children: (state) => {
+          const content = typeof children === "function" ? children(state) : children;
+          if (useMobileSheet) {
+            return /* @__PURE__ */ jsx(
+              MobileSheetChrome,
+              {
+                title: resolvedMobile.title,
+                contentClassName: resolvedMobile.contentClassName,
+                onClose: close,
+                children: content
+              }
+            );
+          }
+          return content;
+        }
+      }
+    )
+  ] });
+};
+var sizes3 = {
+  sm: {
+    root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    withIcon: "",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    shortcut: "pr-2.5"
+  },
+  md: { root: "py-2 px-3 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-2.5" },
+  lg: { root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-3" }
+};
+var SelectContext = createContext({ size: "md" });
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var styles2 = {
+  sm: { root: "p-0.5", icon: "size-2.5" },
+  md: { root: "p-0.5", icon: "size-3" },
+  lg: { root: "p-[3px]", icon: "size-3.5" }
+};
+var TagCloseX = ({ size = "md", className, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      slot: "remove",
+      "aria-label": "Remove this tag",
+      className: cx(
+        "flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover focus-visible:rounded-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        focusShadowPlain,
+        styles2[size].root,
+        className
+      ),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(XIcon, { className: cx("shrink-0 transition-inherit-all", styles2[size].icon) })
+    }
+  );
+};
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
+}
+function useResizeObserver(options) {
+  const { ref, box, onResize } = options;
+  useEffect(() => {
+    const element = ref?.current;
+    if (!element) {
+      return;
+    }
+    if (!hasResizeObserver()) {
+      window.addEventListener("resize", onResize, false);
+      return () => {
+        window.removeEventListener("resize", onResize, false);
+      };
+    } else {
+      const resizeObserverInstance = new window.ResizeObserver((entries) => {
+        if (!entries.length) {
+          return;
+        }
+        onResize();
+      });
+      resizeObserverInstance.observe(element, { box });
+      return () => {
+        if (element) {
+          resizeObserverInstance.unobserve(element);
+        }
+      };
+    }
+  }, [onResize, ref, box]);
+}
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark({ pixelSize, className }) {
+  const pathRef = useRef(null);
+  useLayoutEffect(() => {
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
+    if (len <= 0) return;
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {
+      duration: CHECKBOX_TICK_DRAW_MS,
+      delay: CHECKBOX_TICK_DELAY_MS,
+      easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+      fill: "forwards"
+    });
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: pixelSize, height: pixelSize, viewBox: "0 0 14 14", fill: "none", className: cx("block", className), children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      ref: pathRef,
+      d: "M2.33325 7L5.24992 9.91667L11.6666 3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }) => {
+  const isChecked = isSelected || isIndeterminate;
+  const iconPixelSize = size === "sm" ? 10 : 14;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        !isChecked && !isDisabled && "group-hover:bg-primary_hover",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
+        className
+      ),
+      children: [
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            width: iconPixelSize,
+            height: iconPixelSize,
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: "pointer-events-none block text-fg-white",
+            children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
+      ]
+    }
+  );
+};
+CheckboxBase.displayName = "CheckboxBase";
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var sizes4 = {
+  sm: {
+    root: "p-2 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    check: "size-4 stroke-[2.25px]",
+    checkbox: "sm"
+  },
+  md: {
+    root: "p-2 pr-2.5 gap-2 *:data-icon:size-5",
+    text: "text-md",
+    textContainer: "gap-x-2",
+    check: "size-5",
+    checkbox: "sm"
+  },
+  lg: {
+    root: "p-2.5 pl-2 gap-2 *:data-icon:size-5",
+    text: "text-md",
+    textContainer: "gap-x-2",
+    check: "size-5",
+    checkbox: "md"
+  }
+};
+var SelectItem = ({
+  label,
+  id,
+  value,
+  avatarUrl,
+  supportingText,
+  isDisabled,
+  icon: Icon,
+  className,
+  children,
+  selectionIndicator = "checkmark",
+  selectionIndicatorAlign = "right",
+  ...props
+}) => {
+  const { size } = useContext(SelectContext);
+  const labelOrChildren = label || (typeof children === "string" ? children : "");
+  const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+  const isLeft = selectionIndicatorAlign === "left";
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      id,
+      value: value ?? {
+        id,
+        label: labelOrChildren,
+        avatarUrl,
+        supportingText,
+        isDisabled,
+        icon: Icon
+      },
+      textValue,
+      isDisabled,
+      ...props,
+      className: (state) => cx("w-full py-px outline-hidden", size === "sm" ? "px-1" : "px-1.5", typeof className === "function" ? className(state) : className),
+      children: (state) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "flex cursor-pointer items-center rounded-md outline-hidden select-none",
+            (state.isFocused || state.isHovered) && !(state.isSelected && selectionIndicator !== "checkbox") && "bg-primary_hover",
+            state.isSelected && selectionIndicator !== "checkbox" && "bg-brand-primary_alt",
+            state.isDisabled && "cursor-not-allowed opacity-50",
+            // Icon styles
+            "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+            sizes4[size].root
+          ),
+          children: [
+            isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, { size: sizes4[size].checkbox, isSelected: state.isSelected, isDisabled: state.isDisabled }),
+            avatarUrl ? /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label, className: cx(size === "sm" && "size-5") }) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement(Icon) ? Icon : null,
+            /* @__PURE__ */ jsxs("div", { className: cx("flex w-full min-w-0 flex-1 flex-wrap", sizes4[size].textContainer), children: [
+              /* @__PURE__ */ jsx(Text, { slot: "label", className: cx("truncate font-medium whitespace-nowrap text-primary", sizes4[size].text), children: label || (typeof children === "function" ? children(state) : children) }),
+              supportingText && /* @__PURE__ */ jsx(Text, { slot: "description", className: cx("whitespace-nowrap text-tertiary", sizes4[size].text), children: supportingText })
+            ] }),
+            state.isSelected && selectionIndicator === "checkmark" && /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true", className: cx("ml-auto text-fg-brand-primary", sizes4[size].check) }),
+            !isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, { size: sizes4[size].checkbox, isSelected: state.isSelected, isDisabled: state.isDisabled, className: "ml-auto" })
+          ]
+        }
+      )
+    }
+  );
+};
+var TagSelectContext = createContext({
+  size: "sm",
+  selectedKeys: [],
+  selectedItems: {},
+  onRemove: () => {
+  },
+  onInputChange: () => {
+  }
+});
+var TagSelectBase = ({
+  items,
+  children,
+  size = "sm",
+  selectedItems,
+  onItemCleared,
+  onItemInserted,
+  valueFormatter,
+  shortcut,
+  placeholder = "Search",
+  icon,
+  // Omit name to avoid conflicts with the `Select` component
+  name: _name,
+  mobileOptions,
+  className,
+  ...props
+}) => {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const selectedKeys = selectedItems.items.map((item) => item.id);
+  const filter = useCallback(
+    (item, filterText) => {
+      return !selectedKeys.includes(item.id) && contains(item.label || item.supportingText || "", filterText);
+    },
+    [contains, selectedKeys]
+  );
+  const accessibleList = $232f8dea1b0a4f2f$export$762f73dccccd255d({
+    initialItems: items,
+    filter
+  });
+  const onRemove = useCallback(
+    (keys) => {
+      const key = keys.values().next().value;
+      if (!key) return;
+      selectedItems.remove(key);
+      onItemCleared?.(key);
+    },
+    [selectedItems, onItemCleared]
+  );
+  const onSelectionChange = (id) => {
+    if (!id) {
+      return;
+    }
+    const item = accessibleList.getItem(id);
+    if (!item) {
+      return;
+    }
+    if (!selectedKeys.includes(id)) {
+      selectedItems.append(item);
+      onItemInserted?.(id);
+    }
+    accessibleList.setFilterText("");
+  };
+  const onInputChange = (value) => {
+    accessibleList.setFilterText(value);
+  };
+  const placeholderRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState("");
+  const onResize = useCallback(() => {
+    if (!placeholderRef.current) return;
+    let divRect = placeholderRef.current?.getBoundingClientRect();
+    setPopoverWidth(divRect.width + "px");
+  }, [placeholderRef, setPopoverWidth]);
+  useResizeObserver({
+    ref: placeholderRef,
+    onResize,
+    box: "border-box"
+  });
+  return /* @__PURE__ */ jsx(
+    TagSelectContext.Provider,
+    {
+      value: {
+        size,
+        selectedKeys,
+        selectedItems,
+        onInputChange,
+        onRemove,
+        valueFormatter
+      },
+      children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          allowsEmptyCollection: true,
+          menuTrigger: "focus",
+          items: accessibleList.items,
+          onInputChange,
+          inputValue: accessibleList.filterText,
+          value: null,
+          onChange: onSelectionChange,
+          className: (state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className),
+          ...props,
+          children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            props.label && /* @__PURE__ */ jsx(Label, { isRequired: state.isRequired, tooltip: props.tooltip, children: props.label }),
+            /* @__PURE__ */ jsx(
+              TagSelectTagsValue,
+              {
+                size,
+                shortcut,
+                ref: placeholderRef,
+                placeholder,
+                icon,
+                onFocus: onResize,
+                onPointerEnter: onResize
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Popover,
+              {
+                size,
+                triggerRef: placeholderRef,
+                style: { width: popoverWidth },
+                className: props?.popoverClassName,
+                mobileOptions: { title: props.label, ...mobileOptions },
+                children: /* @__PURE__ */ jsx(ListBox, { selectionMode: "multiple", className: "size-full outline-hidden", children })
+              }
+            ),
+            props.hint && /* @__PURE__ */ jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === "sm" && "text-xs"), children: props.hint })
+          ] })
+        }
+      )
+    }
+  );
+};
+var InnerTagSelect = ({ isDisabled, shortcut, shortcutClassName, placeholder, size = "sm" }) => {
+  const focusManager = useFocusManager();
+  const tagSelectContext = useContext(TagSelectContext);
+  const comboBoxStateContext = useContext(ComboBoxStateContext);
+  const handleInputKeyDown = (event) => {
+    const isCaretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+    if (!isCaretAtStart && event.currentTarget.value !== "") {
+      return;
+    }
+    switch (event.key) {
+      case "Backspace":
+      case "ArrowLeft":
+        focusManager?.focusPrevious({ wrap: false, tabbable: false });
+        break;
+      case "ArrowRight":
+        focusManager?.focusNext({ wrap: false, tabbable: false });
+        break;
+    }
+  };
+  const handleInputMouseDown = (_event) => {
+    if (comboBoxStateContext && !comboBoxStateContext.isOpen) {
+      comboBoxStateContext.open();
+    }
+  };
+  const handleTagKeyDown = (event, value) => {
+    if (event.key === "Tab") {
+      return;
+    }
+    event.preventDefault();
+    const isFirstTag = tagSelectContext?.selectedItems?.items?.[0]?.id === value;
+    switch (event.key) {
+      case " ":
+      case "Enter":
+      case "Backspace":
+        if (isFirstTag) {
+          focusManager?.focusNext({ wrap: false, tabbable: false });
+        } else {
+          focusManager?.focusPrevious({ wrap: false, tabbable: false });
+        }
+        tagSelectContext.onRemove(/* @__PURE__ */ new Set([value]));
+        break;
+      case "ArrowLeft":
+        focusManager?.focusPrevious({ wrap: false, tabbable: false });
+        break;
+      case "ArrowRight":
+        focusManager?.focusNext({ wrap: false, tabbable: false });
+        break;
+      case "Escape":
+        comboBoxStateContext?.close();
+        break;
+    }
+  };
+  const isSelectionEmpty = tagSelectContext?.selectedItems?.items?.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full min-w-0 flex-1 flex-row flex-wrap items-center justify-start gap-1.5", children: [
+    !isSelectionEmpty && tagSelectContext?.selectedItems?.items?.map((value) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cx(
+          "flex min-w-0 items-center rounded-md border border-solid border-primary bg-primary",
+          size === "sm" ? "px-1 py-0.75" : "py-0.5 pr-1 pl-1.25"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "xs", alt: value?.label, src: value?.avatarUrl, className: "size-4" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cx(
+                "truncate font-medium whitespace-nowrap text-secondary select-none",
+                size === "sm" ? "ml-1 text-xs" : "ml-1.25 text-sm"
+              ),
+              children: tagSelectContext.valueFormatter ? tagSelectContext.valueFormatter(value) : value?.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TagCloseX,
+            {
+              size: size === "sm" ? "sm" : "md",
+              isDisabled,
+              className: "ml-0.75",
+              onKeyDown: (event) => handleTagKeyDown(event, value.id),
+              onPress: () => tagSelectContext.onRemove(/* @__PURE__ */ new Set([value.id]))
+            }
+          )
+        ]
+      },
+      value.id
+    )),
+    /* @__PURE__ */ jsxs("div", { className: cx("relative flex min-w-12 flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]"), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder,
+          onKeyDown: handleInputKeyDown,
+          onMouseDown: handleInputMouseDown,
+          className: cx(
+            "w-full flex-[1_0_0] appearance-none bg-transparent text-ellipsis text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed",
+            sizes3[size].text
+          )
+        }
+      ),
+      shortcut && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cx(
+            "absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+            shortcutClassName,
+            sizes3[size].shortcut
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx(
+                "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                isDisabled && "bg-transparent"
+              ),
+              children: "\u2318K"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+var TagSelectTagsValue = ({
+  size = "sm",
+  shortcut,
+  placeholder,
+  shortcutClassName,
+  icon: Icon = MagnifyingGlassIcon,
+  // Omit this prop to avoid invalid HTML attribute warning
+  isDisabled: _isDisabled,
+  ...otherProps
+}) => {
+  const tagSelectContext = useContext(TagSelectContext);
+  const selectedItemsCount = tagSelectContext.selectedKeys.length;
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      ...otherProps,
+      className: ({ isFocusWithin, isDisabled, isInvalid }) => cx(
+        "relative flex w-full items-center rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isInvalid && isFocusWithin && inputFocusRingShadow,
+        isInvalid && !isFocusWithin && "border-error_subtle",
+        isInvalid && isFocusWithin && inputErrorFocusRingShadow,
+        // Icon styles
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes3[size].root,
+        // Overwrite vertical padding for small size when there are selected items
+        // to prevent height jump because the tags are taller than the input text.
+        size === "sm" && selectedItemsCount > 0 && "py-1.5"
+      ),
+      children: ({ isDisabled }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { "data-icon": true, className: "pointer-events-none" }),
+        /* @__PURE__ */ jsx(FocusScope, { contain: false, autoFocus: false, restoreFocus: false, children: /* @__PURE__ */ jsx(
+          InnerTagSelect,
+          {
+            isDisabled,
+            size,
+            shortcut,
+            shortcutClassName,
+            placeholder
+          }
+        ) })
+      ] })
+    }
+  );
+};
+var TagSelect = TagSelectBase;
+TagSelect.Item = SelectItem;
+
+export { TagSelect, TagSelectBase, TagSelectTagsValue };
+//# sourceMappingURL=tag-select.js.map
+//# sourceMappingURL=tag-select.js.map