@medusajs/draft-order 0.0.1 → 0.0.2

package/.medusa/server/src/admin/components/draft-orders/shipping-section.js

@@ -1,211 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { TriangleRightMini, Buildings, TruckFast, Shopping } from "@medusajs/icons";
-import { Container, Heading, Divider, IconButton, Text, StatusBadge, Button } from "@medusajs/ui";
-import { Accordion } from "radix-ui";
-import { Link } from "react-router-dom";
-import { useShippingOptions } from "../../hooks/api/shipping-options.js";
-import { getUniqueShippingProfiles } from "../../lib/utils/order-utils.js";
-import { Thumbnail } from "../common/thumbnail.js";
-const ShippingSection = ({ order }) => {
-  const data = getShippingProfileData(order.items);
-  const orderHasShipping = order.shipping_methods.length > 0;
-  const {
-    shipping_options = [],
-    isPending,
-    isError,
-    error
-  } = useShippingOptions(
-    {
-      id: order.shipping_methods.map((method) => method.shipping_option_id).filter(Boolean),
-      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
-    },
-    {
-      enabled: orderHasShipping
-    }
-  );
-  if (isError) {
-    throw error;
-  }
-  const ready = !orderHasShipping ? true : shipping_options && !isPending;
-  const isAllProfilesAssigned = data.every(
-    (profile) => shipping_options == null ? void 0 : shipping_options.find(
-      (option) => option.shipping_profile_id === profile.id
-    )
-  );
-  return /* @__PURE__ */ jsxs(Container, { className: "p-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
-    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-    /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: ready && data.map((profile, idx) => /* @__PURE__ */ jsx("div", { children: renderShippingProfile(
-      profile,
-      shipping_options,
-      idx === data.length - 1
-    ) }, profile.id)) }),
-    !isAllProfilesAssigned && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsx(Footer, {})
-    ] })
-  ] });
-};
-function renderShippingProfile(profile, shippingOptions, isLast) {
-  const shippingOption = shippingOptions.find(
-    (option) => option.shipping_profile_id === profile.id
-  );
-  if (shippingOption) {
-    return /* @__PURE__ */ jsx(
-      ProfileWithShipping,
-      {
-        profile,
-        shippingOption,
-        isLast
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(ProfileWithoutShipping, { profile, isLast });
-}
-const ProfileWithShipping = ({
-  profile,
-  shippingOption,
-  isLast
-}) => {
-  var _a, _b, _c;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Accordion.Item, { value: profile.id, children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center px-6 py-4 justify-between gap-x-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-        /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "2xsmall",
-            variant: "transparent",
-            className: "group/trigger",
-            children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-          /* @__PURE__ */ jsx(ShippingBadge, {}),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-[5px] text-ui-fg-subtle", children: [
-            /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: `${profile.items.length}x ${profile.items.length === 1 ? "item" : "items"}` }),
-            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "shipping from" }),
-            /* @__PURE__ */ jsx(Buildings, {}),
-            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: (_c = (_b = (_a = shippingOption.service_zone) == null ? void 0 : _a.fulfillment_set) == null ? void 0 : _b.location) == null ? void 0 : _c.name }),
-            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "using" }),
-            /* @__PURE__ */ jsx(TruckFast, {}),
-            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: shippingOption.name })
-          ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx(ShippingProfileItems, { profile })
-    ] }),
-    !isLast && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
-  ] });
-};
-const ProfileWithoutShipping = ({
-  profile,
-  isLast
-}) => {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Accordion.Item, { value: profile.id, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 justify-between px-6 py-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-          /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "2xsmall",
-              variant: "transparent",
-              className: "group/trigger",
-              children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-x-3", children: [
-            /* @__PURE__ */ jsx(ShippingBadge, {}),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: profile.name }),
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "small",
-                  leading: "compact",
-                  className: "text-ui-fg-subtle",
-                  children: `${profile.items.length} ${profile.items.length === 1 ? "item" : "items"}`
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(StatusBadge, { color: "orange", children: "Requires shipping" }) })
-      ] }),
-      /* @__PURE__ */ jsx(ShippingProfileItems, { profile })
-    ] }),
-    !isLast && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
-  ] });
-};
-const ShippingProfileItems = ({ profile }) => {
-  return /* @__PURE__ */ jsxs(Accordion.Content, { children: [
-    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-    profile.items.map((item, idx) => {
-      var _a, _b, _c, _d, _e;
-      return /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "px-6 flex items-center gap-x-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-5 h-[72px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(Divider, { variant: "dashed", orientation: "vertical" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "py-4 flex items-center gap-x-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
-              Text,
-              {
-                size: "small",
-                leading: "compact",
-                className: "text-ui-fg-subtle",
-                children: [
-                  item.quantity,
-                  "x"
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", weight: "plus", children: [
-                (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.title,
-                " (",
-                (_c = item.variant) == null ? void 0 : _c.title,
-                ")"
-              ] }),
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "small",
-                  leading: "compact",
-                  className: "text-ui-fg-subtle",
-                  children: (_e = (_d = item.variant) == null ? void 0 : _d.options) == null ? void 0 : _e.map((option) => option.value).join(" · ")
-                }
-              )
-            ] })
-          ] })
-        ] }, item.id),
-        idx !== profile.items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
-      ] }, item.id);
-    })
-  ] });
-};
-const Footer = () => {
-  return /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex items-center justify-end bg-ui-bg-component", children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: "shipping", children: "Add shipping options" }) }) });
-};
-const ShippingBadge = () => {
-  return /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) });
-};
-function getShippingProfileData(items) {
-  const uniqueShippingProfiles = getUniqueShippingProfiles(items);
-  const output = uniqueShippingProfiles.map((profile) => {
-    return {
-      id: profile.id,
-      name: profile.name,
-      items: items.filter(
-        (item) => {
-          var _a, _b, _c;
-          return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === profile.id;
-        }
-      )
-    };
-  });
-  return output;
-}
-export {
-  ShippingSection
-};

package/.medusa/server/src/admin/components/draft-orders/summary-section.js

@@ -1,148 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Plus, ReceiptPercent } from "@medusajs/icons";
-import { Container, Heading, Divider, Text, Button, toast } from "@medusajs/ui";
-import { useNavigate } from "react-router-dom";
-import { useConvertDraftOrder } from "../../hooks/api/draft-orders.js";
-import { getLocaleAmount, getStylizedAmount } from "../../lib/data/currencies.js";
-import { ActionMenu } from "../common/action-menu.js";
-import { Thumbnail } from "../common/thumbnail.js";
-const SummarySection = ({ order }) => {
-  return /* @__PURE__ */ jsxs(Container, { className: "p-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 flex items-center justify-between gap-x-4", children: [
-      /* @__PURE__ */ jsx(Heading, { children: "Summary" }),
-      /* @__PURE__ */ jsx(
-        ActionMenu,
-        {
-          groups: [
-            {
-              actions: [
-                {
-                  label: "Edit items",
-                  icon: /* @__PURE__ */ jsx(Plus, {}),
-                  to: "items"
-                },
-                {
-                  label: "Edit custom items",
-                  icon: /* @__PURE__ */ jsx(Plus, {}),
-                  to: "custom-items"
-                }
-              ]
-            },
-            {
-              actions: [
-                {
-                  label: "Edit promotions",
-                  icon: /* @__PURE__ */ jsx(ReceiptPercent, {}),
-                  to: "promotions"
-                }
-              ]
-            }
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-    /* @__PURE__ */ jsx("div", { children: order.items.map((item, idx) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Item, { item, currencyCode: order.currency_code }),
-      idx !== order.items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
-    ] }, item.id)) }),
-    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-    /* @__PURE__ */ jsx(
-      Total,
-      {
-        currencyCode: order.currency_code,
-        total: order.total,
-        shippingSubtotal: order.shipping_subtotal,
-        taxTotal: order.tax_total
-      }
-    ),
-    /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-    /* @__PURE__ */ jsx(Footer, { order })
-  ] });
-};
-const Item = ({ item, currencyCode }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 grid grid-cols-2 gap-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail, alt: item.title }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
-          /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
-          /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
-            "(",
-            item.variant_title,
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: item.variant_sku })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 items-center gap-3 [&>div]:text-right text-ui-fg-subtle", children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { children: getLocaleAmount(item.unit_price, currencyCode) }) }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Text, { children: [
-        item.quantity,
-        "x"
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { children: getLocaleAmount(item.subtotal, currencyCode) }) })
-    ] })
-  ] });
-};
-const Total = ({
-  total,
-  shippingSubtotal,
-  taxTotal,
-  currencyCode
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-6 py-4 gap-y-2", children: [
-    shippingSubtotal !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4 text-ui-fg-subtle", children: [
-      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Shipping" }),
-      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getLocaleAmount(shippingSubtotal, currencyCode) })
-    ] }),
-    taxTotal !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4 text-ui-fg-subtle", children: [
-      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Tax" }),
-      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getLocaleAmount(taxTotal, currencyCode) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4", children: [
-      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: "Total" }),
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: "small",
-          leading: "compact",
-          weight: "plus",
-          className: "text-right",
-          children: getStylizedAmount(total, currencyCode)
-        }
-      )
-    ] })
-  ] });
-};
-const Footer = ({ order }) => {
-  const navigate = useNavigate();
-  const { mutateAsync: convertDraftOrder, isPending } = useConvertDraftOrder(
-    order.id
-  );
-  const handleConvert = async () => {
-    await convertDraftOrder(void 0, {
-      onSuccess: () => {
-        toast.success("Draft order converted to order");
-        navigate(`/orders/${order.id}`);
-      },
-      onError: (error) => {
-        toast.error(error.message);
-      }
-    });
-  };
-  return /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex items-center justify-end gap-x-2 bg-ui-bg-component", children: /* @__PURE__ */ jsx(
-    Button,
-    {
-      size: "small",
-      variant: "secondary",
-      isLoading: isPending,
-      onClick: handleConvert,
-      children: "Convert to order"
-    }
-  ) });
-};
-export {
-  SummarySection
-};

package/.medusa/server/src/admin/components/inputs/combobox.js

@@ -1,311 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { ComboboxProvider, Combobox as Combobox$1, ComboboxDisclosure, ComboboxPopover, ComboboxItem, ComboboxItemCheck, ComboboxItemValue, Separator } from "@ariakit/react";
-import { XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini } from "@medusajs/icons";
-import { clx, Text } from "@medusajs/ui";
-import { matchSorter } from "match-sorter";
-import { useState, useTransition, useRef, useImperativeHandle, useDeferredValue, useMemo, useCallback, Fragment } from "react";
-import { genericForwardRef } from "../utilities/generic-forward-ref.js";
-const TABLUAR_NUM_WIDTH = 8;
-const TAG_BASE_WIDTH = 28;
-const ComboboxImpl = ({
-  value: controlledValue,
-  onChange,
-  searchValue: controlledSearchValue,
-  onSearchValueChange,
-  options,
-  className,
-  placeholder,
-  fetchNextPage,
-  isFetchingNextPage,
-  onCreateOption,
-  noResultsPlaceholder,
-  ...inputProps
-}, ref) => {
-  var _a;
-  const [open, setOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
-  const comboboxRef = useRef(null);
-  const listboxRef = useRef(null);
-  useImperativeHandle(ref, () => comboboxRef.current);
-  const isValueControlled = controlledValue !== void 0;
-  const isSearchControlled = controlledSearchValue !== void 0;
-  const isArrayValue = Array.isArray(controlledValue);
-  const emptyState = isArrayValue ? [] : "";
-  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
-    controlledSearchValue || ""
-  );
-  const defferedSearchValue = useDeferredValue(uncontrolledSearchValue);
-  const [uncontrolledValue, setUncontrolledValue] = useState(emptyState);
-  const searchValue = isSearchControlled ? controlledSearchValue : uncontrolledSearchValue;
-  const selectedValues = isValueControlled ? controlledValue : uncontrolledValue;
-  const handleValueChange = (newValues) => {
-    const exists = options.filter((o) => !o.disabled).find((o) => {
-      if (isArrayValue) {
-        return newValues == null ? void 0 : newValues.includes(o.value);
-      }
-      return o.value === newValues;
-    });
-    if (!exists && onCreateOption && newValues) {
-      onCreateOption(newValues);
-    }
-    if (!isValueControlled) {
-      setUncontrolledValue(newValues || emptyState);
-    }
-    if (onChange) {
-      onChange(newValues);
-    }
-    setUncontrolledSearchValue("");
-  };
-  const handleSearchChange = (query) => {
-    setUncontrolledSearchValue(query);
-    if (onSearchValueChange) {
-      onSearchValueChange(query);
-    }
-  };
-  const matches = useMemo(() => {
-    if (isSearchControlled) {
-      return [];
-    }
-    return matchSorter(options, defferedSearchValue, {
-      keys: ["label"]
-    });
-  }, [options, defferedSearchValue, isSearchControlled]);
-  const observer = useRef(
-    new IntersectionObserver(
-      (entries) => {
-        const first = entries[0];
-        if (first.isIntersecting) {
-          fetchNextPage == null ? void 0 : fetchNextPage();
-        }
-      },
-      { threshold: 1 }
-    )
-  );
-  const lastOptionRef = useCallback(
-    (node) => {
-      if (isFetchingNextPage) {
-        return;
-      }
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [isFetchingNextPage]
-  );
-  const handleOpenChange = (open2) => {
-    if (!open2) {
-      setUncontrolledSearchValue("");
-    }
-    setOpen(open2);
-  };
-  const hasValue = (selectedValues == null ? void 0 : selectedValues.length) > 0;
-  const showTag = hasValue && isArrayValue;
-  const showSelected = showTag && !searchValue && !open;
-  const hideInput = !isArrayValue && !open;
-  const selectedLabel = (_a = options.find((o) => o.value === selectedValues)) == null ? void 0 : _a.label;
-  const hidePlaceholder = showSelected || open;
-  const tagWidth = useMemo(() => {
-    if (!Array.isArray(selectedValues)) {
-      return TAG_BASE_WIDTH + TABLUAR_NUM_WIDTH;
-    }
-    const count = selectedValues.length;
-    const digits = count.toString().length;
-    return TAG_BASE_WIDTH + digits * TABLUAR_NUM_WIDTH;
-  }, [selectedValues]);
-  const results = useMemo(() => {
-    return isSearchControlled ? options : matches;
-  }, [matches, options, isSearchControlled]);
-  return /* @__PURE__ */ jsxs(
-    ComboboxProvider,
-    {
-      open,
-      setOpen: handleOpenChange,
-      selectedValue: selectedValues,
-      setSelectedValue: (value) => handleValueChange(value),
-      value: uncontrolledSearchValue,
-      setValue: (query) => {
-        startTransition(() => handleSearchChange(query));
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clx(
-              "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
-              "h-8 w-full rounded-md",
-              "bg-ui-bg-field transition-fg shadow-borders-base",
-              "has-[input:focus]:shadow-borders-interactive-with-active",
-              "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
-              "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
-              className
-            ),
-            style: {
-              "--tag-width": `${tagWidth}px`
-            },
-            children: [
-              showTag && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: (e) => {
-                    e.preventDefault();
-                    handleValueChange(void 0);
-                  },
-                  className: "bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute left-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pl-1.5 pr-1 outline-none",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: selectedValues.length }),
-                    /* @__PURE__ */ jsx(XMarkMini, { className: "text-ui-fg-muted" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex size-full items-center", children: [
-                showSelected && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clx(
-                      "pointer-events-none absolute inset-y-0 flex size-full items-center",
-                      {
-                        "left-[calc(var(--tag-width)+8px)]": showTag,
-                        "left-2": !showTag
-                      }
-                    ),
-                    children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Selected" })
-                  }
-                ),
-                hideInput && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clx(
-                      "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden pr-10",
-                      {
-                        "left-[calc(var(--tag-width)+8px)]": showTag,
-                        "left-2": !showTag
-                      }
-                    ),
-                    children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "truncate", children: selectedLabel })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Combobox$1,
-                  {
-                    autoSelect: true,
-                    ref: comboboxRef,
-                    onFocus: () => setOpen(true),
-                    className: clx(
-                      "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pl-2 pr-8 outline-none focus:cursor-text",
-                      "hover:bg-ui-bg-field-hover",
-                      {
-                        "opacity-0": hideInput,
-                        "pl-2": !showTag,
-                        "pl-[calc(var(--tag-width)+8px)]": showTag
-                      }
-                    ),
-                    placeholder: hidePlaceholder ? void 0 : placeholder,
-                    ...inputProps
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                ComboboxDisclosure,
-                {
-                  render: (props) => {
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        ...props,
-                        type: "button",
-                        className: "text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute right-0 flex size-8 items-center justify-center rounded-r outline-none",
-                        children: /* @__PURE__ */ jsx(TrianglesMini, {})
-                      }
-                    );
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ComboboxPopover,
-          {
-            gutter: 4,
-            sameWidth: true,
-            ref: listboxRef,
-            role: "listbox",
-            className: clx(
-              "shadow-elevation-flyout bg-ui-bg-base z-50 rounded-[8px] p-1",
-              "max-h-[200px] overflow-y-auto",
-              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-              "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-            ),
-            style: {
-              pointerEvents: open ? "auto" : "none"
-            },
-            "aria-busy": isPending,
-            children: [
-              results.map(({ value, label, disabled }) => /* @__PURE__ */ jsxs(
-                ComboboxItem,
-                {
-                  value,
-                  focusOnHover: true,
-                  setValueOnClick: false,
-                  disabled,
-                  className: clx(
-                    "transition-fg bg-ui-bg-base data-[active-item=true]:bg-ui-bg-base-hover group flex cursor-pointer items-center gap-x-2 rounded-[4px] px-2 py-1",
-                    {
-                      "text-ui-fg-disabled": disabled,
-                      "bg-ui-bg-component": disabled
-                    }
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(ComboboxItemCheck, { className: "flex !size-5 items-center justify-center", children: isArrayValue ? /* @__PURE__ */ jsx(CheckMini, {}) : /* @__PURE__ */ jsx(EllipseMiniSolid, {}) }),
-                    /* @__PURE__ */ jsx(ComboboxItemValue, { className: "txt-compact-small", children: label })
-                  ]
-                },
-                value
-              )),
-              !!fetchNextPage && /* @__PURE__ */ jsx("div", { ref: lastOptionRef, className: "w-px" }),
-              isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "transition-fg bg-ui-bg-base flex items-center rounded-[4px] px-2 py-1.5", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-component size-full h-5 w-full animate-pulse rounded-[4px]" }) }),
-              !results.length && (noResultsPlaceholder && !(searchValue == null ? void 0 : searchValue.length) ? noResultsPlaceholder : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 rounded-[4px] px-2 py-1.5", children: /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "small",
-                  leading: "compact",
-                  className: "text-ui-fg-subtle",
-                  children: "No results found"
-                }
-              ) })),
-              !results.length && onCreateOption && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Separator, { className: "bg-ui-border-base -mx-1" }),
-                /* @__PURE__ */ jsxs(
-                  ComboboxItem,
-                  {
-                    value: uncontrolledSearchValue,
-                    focusOnHover: true,
-                    setValueOnClick: false,
-                    className: "transition-fg bg-ui-bg-base data-[active-item=true]:bg-ui-bg-base-hover group mt-1 flex cursor-pointer items-center gap-x-2 rounded-[4px] px-2 py-1.5",
-                    children: [
-                      /* @__PURE__ */ jsx(PlusMini, { className: "text-ui-fg-subtle" }),
-                      /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", children: [
-                        'Create "',
-                        searchValue,
-                        '"'
-                      ] })
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-const Combobox = genericForwardRef(ComboboxImpl);
-export {
-  Combobox
-};