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

package/dist/react/tag-select.js

@@ -0,0 +1,1062 @@
+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, 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 { 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 Popover = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      placement: "bottom",
+      containerPadding: 0,
+      offset: 4,
+      ...props,
+      className: (state) => cx(
+        "w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+        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",
+        props.size === "sm" && "max-h-56!",
+        props.size === "md" && "max-h-64!",
+        props.size === "lg" && "max-h-80!",
+        typeof props.className === "function" ? props.className(state) : props.className
+      )
+    }
+  );
+};
+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({ 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", viewBox: "0 0 14 14", fill: "none", className: cx("block shrink-0", 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 iconClassName = size === "sm" ? "size-2.5" : "size-3.5";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
+        className
+      ),
+      children: [
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: cx("pointer-events-none block shrink-0 text-fg-white", iconClassName),
+            children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { className: cx("pointer-events-none text-fg-white", iconClassName) })
+      ]
+    }
+  );
+};
+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.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,
+  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, 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