@mercurjs/vendor 2.0.0-canary.0

package/dist/chunk-KHHY7EEM.js

@@ -0,0 +1,267 @@
+import {
+  DisplayIdCell,
+  DisplayIdHeader
+} from "./chunk-HB3BP55W.js";
+import {
+  DateCell,
+  DateHeader
+} from "./chunk-LZ7QV42C.js";
+import {
+  getOrderFulfillmentStatus,
+  getOrderPaymentStatus
+} from "./chunk-LQSLDDPT.js";
+import {
+  getStylizedAmount
+} from "./chunk-PXYDR7WQ.js";
+import {
+  StatusCell
+} from "./chunk-DB6ANJBO.js";
+import {
+  PlaceholderCell
+} from "./chunk-PHOCVOZ5.js";
+import {
+  countries
+} from "./chunk-JRTZWK77.js";
+
+// src/hooks/table/columns/use-order-table-columns.tsx
+import {
+  createColumnHelper
+} from "@tanstack/react-table";
+import { useMemo } from "react";
+
+// src/components/table/table-cells/order/country-cell/country-cell.tsx
+import { Tooltip } from "@medusajs/ui";
+import ReactCountryFlag from "react-country-flag";
+import { jsx } from "react/jsx-runtime";
+var CountryCell = ({
+  country
+}) => {
+  if (!country) {
+    return /* @__PURE__ */ jsx(PlaceholderCell, {});
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center", children: /* @__PURE__ */ jsx(Tooltip, { content: country.display_name, children: /* @__PURE__ */ jsx("div", { className: "flex size-4 items-center justify-center overflow-hidden rounded-sm", children: /* @__PURE__ */ jsx(
+    ReactCountryFlag,
+    {
+      countryCode: country.iso_2.toUpperCase(),
+      svg: true,
+      style: {
+        width: "16px",
+        height: "16px"
+      },
+      "aria-label": country.display_name
+    }
+  ) }) }) });
+};
+
+// src/components/table/table-cells/order/customer-cell/customer-cell.tsx
+import { useTranslation } from "react-i18next";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CustomerCell = ({
+  customer
+}) => {
+  if (!customer) {
+    return /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" });
+  }
+  const { first_name, last_name, email } = customer;
+  const name = [first_name, last_name].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: name || email }) });
+};
+var CustomerHeader = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx2("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: t("fields.customer") }) });
+};
+
+// src/components/table/table-cells/order/fulfillment-status-cell/fulfillment-status-cell.tsx
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FulfillmentStatusCell = ({
+  status
+}) => {
+  const { t } = useTranslation2();
+  if (!status) {
+    return "-";
+  }
+  const { label, color } = getOrderFulfillmentStatus(t, status);
+  return /* @__PURE__ */ jsx3(StatusCell, { color, children: label });
+};
+var FulfillmentStatusHeader = () => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsx3("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: t("fields.fulfillment") }) });
+};
+
+// src/components/table/table-cells/order/payment-status-cell/payment-status-cell.tsx
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PaymentStatusCell = ({ status }) => {
+  const { t } = useTranslation3();
+  const { label, color } = getOrderPaymentStatus(t, status);
+  return /* @__PURE__ */ jsx4(StatusCell, { color, children: label });
+};
+var PaymentStatusHeader = () => {
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: t("fields.payment") }) });
+};
+
+// src/components/table/table-cells/order/sales-channel-cell/sales-channel-cell.tsx
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SalesChannelCell = ({
+  channel
+}) => {
+  if (!channel) {
+    return /* @__PURE__ */ jsx5("span", { className: "text-ui-fg-muted", children: "-" });
+  }
+  const { name } = channel;
+  return /* @__PURE__ */ jsx5("div", { className: "flex h-full w-full items-center overflow-hidden", children: /* @__PURE__ */ jsx5("span", { className: "truncate", children: name }) });
+};
+var SalesChannelHeader = () => {
+  const { t } = useTranslation4();
+  return /* @__PURE__ */ jsx5("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx5("span", { className: "truncate", children: t("fields.salesChannel") }) });
+};
+
+// src/components/table/table-cells/order/total-cell/total-cell.tsx
+import { useTranslation as useTranslation5 } from "react-i18next";
+
+// src/components/table/table-cells/common/money-amount-cell/money-amount-cell.tsx
+import { clx } from "@medusajs/ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MoneyAmountCell = ({
+  currencyCode,
+  amount,
+  align = "left",
+  className
+}) => {
+  if (typeof amount === "undefined" || amount === null) {
+    return /* @__PURE__ */ jsx6(PlaceholderCell, {});
+  }
+  const formatted = getStylizedAmount(amount, currencyCode);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: clx(
+        "flex h-full w-full items-center overflow-hidden",
+        {
+          "justify-start text-left": align === "left",
+          "justify-end text-right": align === "right"
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsx6("span", { className: "truncate", children: formatted })
+    }
+  );
+};
+
+// src/components/table/table-cells/order/total-cell/total-cell.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TotalCell = ({ currencyCode, total, className }) => {
+  if (!total) {
+    return /* @__PURE__ */ jsx7(PlaceholderCell, {});
+  }
+  return /* @__PURE__ */ jsx7(MoneyAmountCell, { currencyCode, amount: total, className, align: "right" });
+};
+var TotalHeader = () => {
+  const { t } = useTranslation5();
+  return /* @__PURE__ */ jsx7("div", { className: "flex h-full w-full items-center justify-end", children: /* @__PURE__ */ jsx7("span", { className: "truncate", children: t("fields.total") }) });
+};
+
+// src/hooks/table/columns/use-order-table-columns.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var useOrderTableColumns = (props) => {
+  const { exclude = [] } = props ?? {};
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("display_id", {
+        header: () => /* @__PURE__ */ jsx8(DisplayIdHeader, {}),
+        cell: ({ getValue }) => {
+          const id = getValue();
+          return /* @__PURE__ */ jsx8(DisplayIdCell, { displayId: id });
+        }
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => /* @__PURE__ */ jsx8(DateHeader, {}),
+        cell: ({ getValue }) => {
+          const date = new Date(getValue());
+          return /* @__PURE__ */ jsx8(DateCell, { date });
+        }
+      }),
+      columnHelper.accessor("customer", {
+        header: () => /* @__PURE__ */ jsx8(CustomerHeader, {}),
+        cell: ({ getValue }) => {
+          const customer = getValue();
+          return /* @__PURE__ */ jsx8(CustomerCell, { customer });
+        }
+      }),
+      columnHelper.accessor("sales_channel", {
+        header: () => /* @__PURE__ */ jsx8(SalesChannelHeader, {}),
+        cell: ({ getValue }) => {
+          const channel = getValue();
+          return /* @__PURE__ */ jsx8(SalesChannelCell, { channel });
+        }
+      }),
+      columnHelper.accessor("payment_status", {
+        header: () => /* @__PURE__ */ jsx8(PaymentStatusHeader, {}),
+        cell: ({ getValue }) => {
+          const status = getValue();
+          return /* @__PURE__ */ jsx8(PaymentStatusCell, { status });
+        }
+      }),
+      columnHelper.accessor("fulfillment_status", {
+        header: () => /* @__PURE__ */ jsx8(FulfillmentStatusHeader, {}),
+        cell: ({ getValue }) => {
+          const status = getValue();
+          return /* @__PURE__ */ jsx8(FulfillmentStatusCell, { status });
+        }
+      }),
+      columnHelper.accessor("total", {
+        header: () => /* @__PURE__ */ jsx8(TotalHeader, {}),
+        cell: ({ getValue, row }) => {
+          const isFullyRefunded = row.original.payment_status === "refunded";
+          const total = !isFullyRefunded ? getValue() : row.original.payment_collections?.reduce(
+            (acc, payCol) => acc + (payCol.refunded_amount ?? 0),
+            0
+          ) || 0;
+          const currencyCode = row.original.currency_code;
+          return /* @__PURE__ */ jsx8(
+            TotalCell,
+            {
+              currencyCode,
+              total,
+              className: isFullyRefunded ? "text-ui-fg-muted line-through" : ""
+            }
+          );
+        }
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          const countryCode = row.original.shipping_address?.country_code;
+          const country = countries.find((c) => c.iso_2 === countryCode);
+          return /* @__PURE__ */ jsx8(CountryCell, { country });
+        }
+      })
+    ],
+    []
+  );
+  const isAccessorColumnDef = (c) => {
+    return c.accessorKey !== void 0;
+  };
+  const isDisplayColumnDef = (c) => {
+    return c.id !== void 0;
+  };
+  const shouldExclude = (c) => {
+    if (isAccessorColumnDef(c)) {
+      return exclude.includes(c.accessorKey);
+    } else if (isDisplayColumnDef(c)) {
+      return exclude.includes(c.id);
+    }
+    return false;
+  };
+  return columns.filter(
+    (c) => !shouldExclude(c)
+  );
+};
+
+export {
+  useOrderTableColumns
+};

package/dist/chunk-LAVHRER2.js

@@ -0,0 +1,17 @@
+// src/components/common/conditional-tooltip/conditional-tooltip.tsx
+import { Tooltip } from "@medusajs/ui";
+import { jsx } from "react/jsx-runtime";
+var ConditionalTooltip = ({
+  children,
+  showTooltip = false,
+  ...props
+}) => {
+  if (showTooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { ...props, children });
+  }
+  return children;
+};
+
+export {
+  ConditionalTooltip
+};

package/dist/chunk-LQSLDDPT.js

@@ -0,0 +1,67 @@
+// src/lib/order-helpers.ts
+var getCanceledOrderStatus = (t, status) => {
+  if (status === "canceled") {
+    return { label: t("orders.status.canceled"), color: "red" };
+  }
+  return null;
+};
+var getOrderPaymentStatus = (t, status) => {
+  const statusMap = {
+    not_paid: [t("orders.payment.status.notPaid"), "red"],
+    authorized: [t("orders.payment.status.authorized"), "orange"],
+    partially_authorized: [
+      t("orders.payment.status.partiallyAuthorized"),
+      "red"
+    ],
+    awaiting: [t("orders.payment.status.awaiting"), "orange"],
+    captured: [t("orders.payment.status.captured"), "green"],
+    refunded: [t("orders.payment.status.refunded"), "red"],
+    partially_refunded: [
+      t("orders.payment.status.partiallyRefunded"),
+      "orange"
+    ],
+    partially_captured: [
+      t("orders.payment.status.partiallyCaptured"),
+      "orange"
+    ],
+    canceled: [t("orders.payment.status.canceled"), "red"],
+    requires_action: [t("orders.payment.status.requiresAction"), "orange"]
+  };
+  const [label, color] = statusMap[status] ?? [status ?? "-", "red"];
+  return { label, color };
+};
+var getOrderFulfillmentStatus = (t, status) => {
+  const statusMap = {
+    not_fulfilled: [t("orders.fulfillment.status.notFulfilled"), "red"],
+    partially_fulfilled: [
+      t("orders.fulfillment.status.partiallyFulfilled"),
+      "orange"
+    ],
+    fulfilled: [t("orders.fulfillment.status.fulfilled"), "green"],
+    partially_shipped: [
+      t("orders.fulfillment.status.partiallyShipped"),
+      "orange"
+    ],
+    shipped: [t("orders.fulfillment.status.shipped"), "green"],
+    delivered: [t("orders.fulfillment.status.delivered"), "green"],
+    partially_delivered: [
+      t("orders.fulfillment.status.partiallyDelivered"),
+      "orange"
+    ],
+    partially_returned: [
+      t("orders.fulfillment.status.partiallyReturned"),
+      "orange"
+    ],
+    returned: [t("orders.fulfillment.status.returned"), "green"],
+    canceled: [t("orders.fulfillment.status.canceled"), "red"],
+    requires_action: [t("orders.fulfillment.status.requiresAction"), "orange"]
+  };
+  const [label, color] = statusMap[status] ?? [status ?? "-", "red"];
+  return { label, color };
+};
+
+export {
+  getCanceledOrderStatus,
+  getOrderPaymentStatus,
+  getOrderFulfillmentStatus
+};

package/dist/chunk-LWVBKUUL.js

@@ -0,0 +1,77 @@
+import {
+  productsQueryKeys
+} from "./chunk-WPFTRRWV.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
+import {
+  queryKeysFactory
+} from "./chunk-ZA2KFUFR.js";
+import {
+  sdk
+} from "./chunk-Y224F4UU.js";
+
+// src/hooks/api/collections.tsx
+import {
+  useMutation,
+  useQuery
+} from "@tanstack/react-query";
+var COLLECTION_QUERY_KEY = "collections";
+var collectionsQueryKeys = queryKeysFactory(COLLECTION_QUERY_KEY);
+var useCollection = (id, options) => {
+  const { data, ...rest } = useQuery({
+    queryKey: collectionsQueryKeys.detail(id),
+    queryFn: async () => sdk.vendor.collections.$id.query({ $id: id }),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+var useCollections = (query, options) => {
+  const { data, ...rest } = useQuery({
+    queryKey: collectionsQueryKeys.list(query),
+    queryFn: async () => sdk.vendor.collections.query({ ...query }),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+var useUpdateCollection = (id, options) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.vendor.collections.$id.mutate({ $id: id, ...payload }),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: collectionsQueryKeys.lists()
+      });
+      queryClient.invalidateQueries({
+        queryKey: collectionsQueryKeys.detail(id)
+      });
+      options?.onSuccess?.(data, variables, context);
+    },
+    ...options
+  });
+};
+var useUpdateCollectionProducts = (id, options) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.vendor.collections.$id.products.mutate({ $id: id, ...payload }),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: collectionsQueryKeys.lists()
+      });
+      queryClient.invalidateQueries({
+        queryKey: collectionsQueryKeys.detail(id)
+      });
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.lists()
+      });
+      options?.onSuccess?.(data, variables, context);
+    },
+    ...options
+  });
+};
+
+export {
+  collectionsQueryKeys,
+  useCollection,
+  useCollections,
+  useUpdateCollection,
+  useUpdateCollectionProducts
+};

package/dist/chunk-LYUCDASZ.js

@@ -0,0 +1,115 @@
+// src/components/table/data-table/data-table-search/data-table-search.tsx
+import { Input } from "@medusajs/ui";
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+
+// src/components/table/data-table/hooks.tsx
+import { useSearchParams } from "react-router-dom";
+var useSelectedParams = ({
+  param,
+  prefix,
+  multiple = false
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const identifier = prefix ? `${prefix}_${param}` : param;
+  const offsetKey = prefix ? `${prefix}_offset` : "offset";
+  const add = (value) => {
+    setSearchParams((prev) => {
+      const newValue = new URLSearchParams(prev);
+      const updateMultipleValues = () => {
+        const existingValues = newValue.get(identifier)?.split(",") || [];
+        if (!existingValues.includes(value)) {
+          existingValues.push(value);
+          newValue.set(identifier, existingValues.join(","));
+        }
+      };
+      const updateSingleValue = () => {
+        newValue.set(identifier, value);
+      };
+      multiple ? updateMultipleValues() : updateSingleValue();
+      newValue.delete(offsetKey);
+      return newValue;
+    });
+  };
+  const deleteParam = (value) => {
+    const deleteMultipleValues = (prev) => {
+      const existingValues = prev.get(identifier)?.split(",") || [];
+      const index = existingValues.indexOf(value || "");
+      if (index > -1) {
+        existingValues.splice(index, 1);
+        prev.set(identifier, existingValues.join(","));
+      }
+    };
+    const deleteSingleValue = (prev) => {
+      prev.delete(identifier);
+    };
+    setSearchParams((prev) => {
+      if (value) {
+        multiple ? deleteMultipleValues(prev) : deleteSingleValue(prev);
+        if (!prev.get(identifier)) {
+          prev.delete(identifier);
+        }
+      } else {
+        prev.delete(identifier);
+      }
+      prev.delete(offsetKey);
+      return prev;
+    });
+  };
+  const get = () => {
+    return searchParams.get(identifier)?.split(",").filter(Boolean) || [];
+  };
+  return { add, delete: deleteParam, get };
+};
+
+// src/components/table/data-table/data-table-search/data-table-search.tsx
+import { jsx } from "react/jsx-runtime";
+var DataTableSearch = ({
+  placeholder,
+  prefix,
+  autofocus
+}) => {
+  const { t } = useTranslation();
+  const placeholderText = placeholder || t("general.search");
+  const selectedParams = useSelectedParams({
+    param: "q",
+    prefix,
+    multiple: false
+  });
+  const query = selectedParams.get();
+  const debouncedOnChange = useCallback(
+    debounce((e) => {
+      const value = e.target.value;
+      if (!value) {
+        selectedParams.delete();
+      } else {
+        selectedParams.add(value);
+      }
+    }, 500),
+    [selectedParams]
+  );
+  useEffect(() => {
+    return () => {
+      debouncedOnChange.cancel();
+    };
+  }, [debouncedOnChange]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      autoComplete: "off",
+      name: "q",
+      type: "search",
+      size: "small",
+      autoFocus: autofocus,
+      defaultValue: query?.[0] || void 0,
+      onChange: debouncedOnChange,
+      placeholder: placeholderText
+    }
+  );
+};
+
+export {
+  useSelectedParams,
+  DataTableSearch
+};

package/dist/chunk-LZ7QV42C.js

@@ -0,0 +1,37 @@
+import {
+  PlaceholderCell
+} from "./chunk-PHOCVOZ5.js";
+import {
+  useDate
+} from "./chunk-CFETU5BI.js";
+
+// src/components/table/table-cells/common/date-cell/date-cell.tsx
+import { Tooltip } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+var DateCell = ({ date }) => {
+  const { getFullDate } = useDate();
+  if (!date) {
+    return /* @__PURE__ */ jsx(PlaceholderCell, {});
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center overflow-hidden", children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      className: "z-10",
+      content: /* @__PURE__ */ jsx("span", { className: "text-pretty", children: `${getFullDate({
+        date,
+        includeTime: true
+      })}` }),
+      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: getFullDate({ date, includeTime: false }) })
+    }
+  ) });
+};
+var DateHeader = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: t("fields.date") }) });
+};
+
+export {
+  DateCell,
+  DateHeader
+};

package/dist/chunk-MAEP2UCK.js

@@ -0,0 +1,110 @@
+// src/components/inputs/percentage-input/percentage-input.tsx
+import { clx, Input, Text } from "@medusajs/ui";
+
+// src/lib/number-helper.ts
+function getNumberOfDecimalPlaces(num) {
+  const str = num.toString();
+  if (str.indexOf(".") === -1) {
+    return 0;
+  }
+  return str.split(".")[1].length;
+}
+
+// src/components/inputs/percentage-input/percentage-input.tsx
+import {
+  forwardRef
+} from "react";
+import Primitive from "react-currency-input-field";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_DECIMAL_SCALE = 2;
+function resolveDecimalScale(value) {
+  if (value == null || Array.isArray(value)) {
+    return MIN_DECIMAL_SCALE;
+  }
+  return Math.max(
+    getNumberOfDecimalPlaces(parseFloat(value.toString())),
+    MIN_DECIMAL_SCALE
+  );
+}
+var DeprecatedPercentageInput = forwardRef(({ min = 0, max = 100, step = 1e-4, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r", children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: "text-ui-fg-muted",
+        size: "small",
+        leading: "compact",
+        weight: "plus",
+        children: "%"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "number",
+        min,
+        max,
+        step,
+        ...props,
+        className: "pl-10"
+      }
+    )
+  ] });
+});
+DeprecatedPercentageInput.displayName = "PercentageInput";
+var PercentageInput = forwardRef(
+  ({
+    min = 0,
+    max = 100,
+    decimalScale,
+    decimalsLimit,
+    value,
+    className,
+    ...props
+  }, ref) => {
+    const resolvedDecimalScale = decimalScale ?? resolveDecimalScale(value);
+    const resolvedDecimalsLimit = decimalsLimit ?? resolvedDecimalScale;
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Primitive,
+        {
+          ref,
+          min,
+          max,
+          autoComplete: "off",
+          decimalScale: resolvedDecimalScale,
+          decimalsLimit: resolvedDecimalsLimit,
+          value,
+          ...props,
+          className: clx(
+            "caret-ui-fg-base bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 pl-10 text-left outline-none",
+            "placeholder:text-ui-fg-muted text-ui-fg-base",
+            "hover:bg-ui-bg-field-hover",
+            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            className
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r", children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: "text-ui-fg-muted",
+          size: "small",
+          leading: "compact",
+          weight: "plus",
+          children: "%"
+        }
+      ) })
+    ] });
+  }
+);
+PercentageInput.displayName = "PercentageInput";
+
+export {
+  DeprecatedPercentageInput,
+  PercentageInput
+};