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

package/dist/react/input-file.js

@@ -0,0 +1,748 @@
+import { createContext, useRef, useState, useContext, isValidElement } from 'react';
+import { Group, Input, Button as Button$1, Link, TextField as TextField$1, Label as Label$1, Text, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { EyeIcon } from '@phosphor-icons/react/dist/csr/Eye';
+import { EyeSlashIcon } from '@phosphor-icons/react/dist/csr/EyeSlash';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// ../../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 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 focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var skeuomorphicGradientBorderClass = [
+  "ring-1 ring-inset ring-transparent",
+  "before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']",
+  "before:[mask-image:linear-gradient(to_bottom,#000,transparent)]"
+].join(" ");
+var skeuomorphicShadowClass = ["shadow-xs-skeuomorphic", focusShadowSkeuomorphic, "overflow-hidden"].join(" ");
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var secondaryShadowClass = ["relative overflow-hidden shadow-xs", secondaryInnerShadow, focusShadowSecondary].join(" ");
+var inputNumberButtonClass = [
+  "in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden",
+  "in-data-number-input:before:hidden in-data-number-input:after:hidden",
+  "in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]"
+].join(" ");
+var inputAddonButtonClass = [
+  "in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden",
+  "in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary",
+  "in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary",
+  "in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle",
+  "in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden",
+  "in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]"
+].join(" ");
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute",
+      "font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100",
+      inputAddonButtonClass,
+      inputNumberButtonClass,
+      // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).
+      "in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch",
+      "in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    xs: {
+      root: [
+        "h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-4"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    sm: {
+      root: [
+        "h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    md: {
+      root: [
+        "h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5",
+        "in-data-input-wrapper:data-icon-only:p-3",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4"
+    },
+    lg: {
+      root: "h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    },
+    xl: {
+      root: "h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    }
+  },
+  colors: {
+    /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+    primary: {
+      root: [
+        "bg-primary-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-fg-tertiary_hover dark:hover:bg-quaternary",
+        "disabled:opacity-30",
+        "data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+    brand: {
+      root: [
+        "bg-brand-solid text-primary_on-brand",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-brand-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-brand-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-primary_on-brand"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+    secondary: {
+      root: [
+        "border border-solid border-primary bg-primary text-secondary",
+        secondaryShadowClass,
+        "hover:bg-primary_hover hover:text-secondary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-primary_hover",
+        "*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Tertiary */
+    tertiary: {
+      root: [
+        "border border-transparent bg-transparent text-tertiary",
+        focusShadowPlain,
+        "hover:bg-primary_hover hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+    "link-color": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none",
+        focusShadowPlain,
+        "hover:text-brand-secondary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+    "link-gray": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none",
+        focusShadowPlain,
+        "hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-error-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "border border-solid border-primary bg-primary text-error-primary",
+        secondaryShadowClass,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-primary",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "border border-transparent bg-transparent text-error-primary",
+        focusShadowPlain,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+    "link-destructive": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none",
+        focusShadowPlain,
+        "hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current"
+      ].join(" ")
+    }
+  }
+});
+var Button = ({
+  size = "md",
+  color = "primary",
+  children,
+  className,
+  noTextPadding,
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  isDisabled: disabled,
+  isLoading: loading,
+  showTextWhileLoading,
+  ...props
+}) => {
+  const href = "href" in props ? props.href : void 0;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  const commonChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 256 256",
+        "aria-hidden": true,
+        className: cx(
+          styles.common.icon,
+          "size-5 animate-spin",
+          !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"
+          }
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && !isLinkType && "px-0.5"), children }),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  ] });
+  const commonProps = {
+    "data-icon-only": isIcon ? true : void 0,
+    "data-loading": loading ? true : void 0,
+    ...props,
+    isDisabled: disabled || loading,
+    className: cx(
+      styles.common.root,
+      styles.sizes[size].root,
+      styles.colors[color].root,
+      isLinkType && styles.sizes[size].linkRoot,
+      (loading || href && (disabled || loading)) && "pointer-events-none",
+      loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+      className
+    ),
+    children: commonChildren
+  };
+  if ("href" in commonProps) {
+    return /* @__PURE__ */ jsx(Link, { ...commonProps, href: disabled || loading ? void 0 : href });
+  }
+  return /* @__PURE__ */ jsx(Button$1, { ...commonProps, type: commonProps.type || "button", isPending: loading });
+};
+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 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$1, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+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 inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+var InputBase = ({
+  ref,
+  tooltip,
+  shortcut,
+  groupRef,
+  size = "md",
+  isInvalid,
+  isDisabled,
+  isRequired,
+  icon: Icon,
+  placeholder,
+  wrapperClassName,
+  tooltipClassName,
+  inputClassName,
+  iconClassName,
+  type = "text",
+  ...inputProps
+}) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const hasTrailingIcon = tooltip || isInvalid;
+  const hasLeadingIcon = Icon;
+  const context = useContext(TextFieldContext);
+  const inputSize = context?.size || size;
+  const sizes = sortCx({
+    sm: {
+      root: cx("px-3 py-2 text-sm", hasLeadingIcon && "pl-9", hasTrailingIcon && "pr-9"),
+      iconLeading: "left-3 size-4 stroke-[2.25px]",
+      iconTrailing: "right-3",
+      shortcut: "pr-1.5"
+    },
+    md: {
+      root: cx("px-3 py-2 text-md", hasLeadingIcon && "pl-10", hasTrailingIcon && "pr-9"),
+      iconLeading: "left-3 size-5",
+      iconTrailing: "right-3",
+      shortcut: "pr-2"
+    },
+    lg: {
+      root: cx("px-3.5 py-2.5 text-md", hasLeadingIcon && "pl-10.5", hasTrailingIcon && "pr-9.5"),
+      iconLeading: "left-3.5 size-5",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-2.5"
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ...{ isDisabled, isInvalid },
+      ref: groupRef,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg border border-solid border-primary bg-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear",
+        isFocusWithin && !isDisabled2 && !isInvalid2 && inputFocusRingShadow,
+        // Disabled state styles
+        isDisabled2 && "cursor-not-allowed opacity-50",
+        "group-disabled:cursor-not-allowed group-disabled:opacity-50",
+        // Invalid state styles
+        isInvalid2 && !isFocusWithin && "border-error_subtle",
+        "group-invalid:border-error_subtle",
+        "group-invalid:focus-within:border-error group-invalid:focus-within:ring-1 group-invalid:focus-within:ring-inset group-invalid:focus-within:ring-error",
+        // Invalid + focus — darker error stroke (not brand)
+        isInvalid2 && isFocusWithin && inputErrorFocusRingShadow,
+        context?.wrapperClassName,
+        wrapperClassName
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: cx("pointer-events-none absolute text-fg-quaternary", sizes[inputSize].iconLeading, context?.iconClassName, iconClassName) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...inputProps,
+            ref,
+            required: isRequired,
+            type: type === "password" && isPasswordVisible ? "text" : type,
+            placeholder,
+            className: cx(
+              "m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed",
+              sizes[inputSize].root,
+              context?.inputClassName,
+              inputClassName
+            )
+          }
+        ),
+        tooltip && type !== "password" && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            className: cx(
+              "absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+              sizes[inputSize].iconTrailing,
+              context?.tooltipClassName,
+              tooltipClassName
+            ),
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4 stroke-[2.25px]" })
+          }
+        ) }),
+        type !== "password" && /* @__PURE__ */ jsx(
+          InfoIcon,
+          {
+            className: cx(
+              "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+              sizes[inputSize].iconTrailing,
+              context?.tooltipClassName,
+              tooltipClassName
+            )
+          }
+        ),
+        type === "password" && /* @__PURE__ */ jsx(
+          Button$1,
+          {
+            "aria-label": "Toggle password visibility",
+            onClick: () => setIsPasswordVisible(!isPasswordVisible),
+            className: cx(
+              "absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden",
+              sizes[inputSize].iconTrailing
+            ),
+            children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeSlashIcon, { className: "size-4 stroke-[2.25px]" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "size-4 stroke-[2.25px]" })
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "pointer-events-none 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",
+              sizes[inputSize].shortcut
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                children: typeof shortcut === "string" ? shortcut : "\u2318K"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+InputBase.displayName = "InputBase";
+var TextFieldContext = createContext({});
+var TextField = ({ className, size = "md", inputClassName, wrapperClassName, iconClassName, tooltipClassName, ...props }) => {
+  return /* @__PURE__ */ jsx(TextFieldContext.Provider, { value: { inputClassName, wrapperClassName, iconClassName, tooltipClassName, size }, children: /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ...props,
+      "data-input-wrapper": true,
+      "data-input-size": size,
+      className: (state) => cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+    }
+  ) });
+};
+TextField.displayName = "TextField";
+var inputGroupAddonInnerFieldClass = "group-has-[select]:border-0 group-has-[select]:bg-transparent group-has-[select]:shadow-none group-has-[select]:ring-0 group-has-[select]:group-invalid:border-0 group-has-[select]:group-invalid:ring-0 group-has-[select]:group-invalid:shadow-none group-has-[select]:focus-within:border-0 group-has-[select]:focus-within:shadow-none group-has-[select]:focus-within:ring-0 group-has-[select]:group-invalid:focus-within:border-0 group-has-[select]:group-invalid:focus-within:ring-0 group-has-[section[data-trailing]_button]:border-0 group-has-[section[data-trailing]_button]:bg-transparent group-has-[section[data-trailing]_button]:shadow-none group-has-[section[data-trailing]_button]:ring-0 group-has-[section[data-trailing]_button]:group-invalid:border-0 group-has-[section[data-trailing]_button]:group-invalid:ring-0 group-has-[section[data-trailing]_button]:group-invalid:shadow-none group-has-[section[data-trailing]_button]:focus-within:border-0 group-has-[section[data-trailing]_button]:focus-within:shadow-none group-has-[section[data-trailing]_button]:focus-within:ring-0 group-has-[section[data-trailing]_button]:group-invalid:focus-within:border-0 group-has-[section[data-trailing]_button]:group-invalid:focus-within:ring-0 group-has-[section[data-leading]_button]:border-0 group-has-[section[data-leading]_button]:bg-transparent group-has-[section[data-leading]_button]:shadow-none group-has-[section[data-leading]_button]:ring-0 group-has-[section[data-leading]_button]:group-invalid:border-0 group-has-[section[data-leading]_button]:group-invalid:ring-0 group-has-[section[data-leading]_button]:group-invalid:shadow-none group-has-[section[data-leading]_button]:focus-within:border-0 group-has-[section[data-leading]_button]:focus-within:shadow-none group-has-[section[data-leading]_button]:focus-within:ring-0 group-has-[section[data-leading]_button]:group-invalid:focus-within:border-0 group-has-[section[data-leading]_button]:group-invalid:focus-within:ring-0";
+var inputGroupShellBorderClass = "has-[select]:border has-[select]:border-solid has-[select]:border-primary has-[select]:shadow-xs has-[section[data-trailing]_button]:border has-[section[data-trailing]_button]:border-solid has-[section[data-trailing]_button]:border-primary has-[section[data-trailing]_button]:shadow-xs has-[section[data-leading]_button]:border has-[section[data-leading]_button]:border-solid has-[section[data-leading]_button]:border-primary has-[section[data-leading]_button]:shadow-xs";
+var inputGroupShellFocusClass = "has-[select]:focus-within:after:pointer-events-none has-[select]:focus-within:after:absolute has-[select]:focus-within:after:-inset-px has-[select]:focus-within:after:z-10 has-[select]:focus-within:after:rounded-lg has-[select]:focus-within:after:border has-[select]:focus-within:after:border-solid has-[select]:focus-within:after:border-brand has-[select]:focus-within:after:ring-1 has-[select]:focus-within:after:ring-inset has-[select]:focus-within:after:ring-brand has-[select]:focus-within:after:content-[''] has-[section[data-trailing]_button]:focus-within:after:pointer-events-none has-[section[data-trailing]_button]:focus-within:after:absolute has-[section[data-trailing]_button]:focus-within:after:-inset-px has-[section[data-trailing]_button]:focus-within:after:z-10 has-[section[data-trailing]_button]:focus-within:after:rounded-lg has-[section[data-trailing]_button]:focus-within:after:border has-[section[data-trailing]_button]:focus-within:after:border-solid has-[section[data-trailing]_button]:focus-within:after:border-brand has-[section[data-trailing]_button]:focus-within:after:ring-1 has-[section[data-trailing]_button]:focus-within:after:ring-inset has-[section[data-trailing]_button]:focus-within:after:ring-brand has-[section[data-trailing]_button]:focus-within:after:content-[''] has-[section[data-leading]_button]:focus-within:after:pointer-events-none has-[section[data-leading]_button]:focus-within:after:absolute has-[section[data-leading]_button]:focus-within:after:-inset-px has-[section[data-leading]_button]:focus-within:after:z-10 has-[section[data-leading]_button]:focus-within:after:rounded-lg has-[section[data-leading]_button]:focus-within:after:border has-[section[data-leading]_button]:focus-within:after:border-solid has-[section[data-leading]_button]:focus-within:after:border-brand has-[section[data-leading]_button]:focus-within:after:ring-1 has-[section[data-leading]_button]:focus-within:after:ring-inset has-[section[data-leading]_button]:focus-within:after:ring-brand has-[section[data-leading]_button]:focus-within:after:content-['']";
+var inputGroupShellInvalidClass = "has-[select]:border-error_subtle has-[select]:focus-within:after:pointer-events-none has-[select]:focus-within:after:absolute has-[select]:focus-within:after:-inset-px has-[select]:focus-within:after:z-10 has-[select]:focus-within:after:rounded-lg has-[select]:focus-within:after:border has-[select]:focus-within:after:border-solid has-[select]:focus-within:after:border-error has-[select]:focus-within:after:ring-1 has-[select]:focus-within:after:ring-inset has-[select]:focus-within:after:ring-error has-[select]:focus-within:after:content-[''] has-[section[data-trailing]_button]:border-error_subtle has-[section[data-trailing]_button]:focus-within:after:pointer-events-none has-[section[data-trailing]_button]:focus-within:after:absolute has-[section[data-trailing]_button]:focus-within:after:-inset-px has-[section[data-trailing]_button]:focus-within:after:z-10 has-[section[data-trailing]_button]:focus-within:after:rounded-lg has-[section[data-trailing]_button]:focus-within:after:border has-[section[data-trailing]_button]:focus-within:after:border-solid has-[section[data-trailing]_button]:focus-within:after:border-error has-[section[data-trailing]_button]:focus-within:after:ring-1 has-[section[data-trailing]_button]:focus-within:after:ring-inset has-[section[data-trailing]_button]:focus-within:after:ring-error has-[section[data-trailing]_button]:focus-within:after:content-[''] has-[section[data-leading]_button]:border-error_subtle has-[section[data-leading]_button]:focus-within:after:pointer-events-none has-[section[data-leading]_button]:focus-within:after:absolute has-[section[data-leading]_button]:focus-within:after:-inset-px has-[section[data-leading]_button]:focus-within:after:z-10 has-[section[data-leading]_button]:focus-within:after:rounded-lg has-[section[data-leading]_button]:focus-within:after:border has-[section[data-leading]_button]:focus-within:after:border-solid has-[section[data-leading]_button]:focus-within:after:border-error has-[section[data-leading]_button]:focus-within:after:ring-1 has-[section[data-leading]_button]:focus-within:after:ring-inset has-[section[data-leading]_button]:focus-within:after:ring-error has-[section[data-leading]_button]:focus-within:after:content-['']";
+var InputPrefix = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ...props,
+    className: cx(
+      "flex h-full shrink-0 items-center self-stretch border border-solid border-primary bg-primary text-tertiary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear",
+      // Match InputBase invalid stroke when inside InputGroup
+      "in-data-input-wrapper:group-invalid:border-error_subtle in-data-input-wrapper:group-invalid:group-focus-within:border-error",
+      // Styles when the prefix is within an `InputGroup`
+      "in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-l-lg in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:border-r-0",
+      "in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-r-lg in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:border-l-0",
+      // Default size styles — mirror InputBase input padding / typography
+      "px-3 py-2 text-md",
+      // Small size styles
+      "in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      // Large size styles
+      "in-data-input-wrapper:in-data-[input-size=lg]:px-3.5 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      props.className
+    ),
+    children
+  }
+);
+var InputGroup = ({ size = "md", prefix, leadingAddon, trailingAddon, label, hint, hideRequiredIndicator, children, ...props }) => {
+  const hasLeading = !!leadingAddon;
+  const hasTrailing = !!trailingAddon;
+  const paddings = sortCx({
+    sm: {
+      input: cx(
+        // Apply padding styles when select element is passed as a child
+        hasLeading && "group-has-[select]:pr-9 group-has-[select]:pl-2",
+        hasTrailing && (prefix ? "group-has-[select]:pr-6 group-has-[select]:pl-0" : "group-has-[select]:pr-6 group-has-[select]:pl-3")
+      ),
+      leadingText: "pr-1.5 pl-3"
+    },
+    md: {
+      input: cx(
+        // Apply padding styles when select element is passed as a child
+        hasLeading && "group-has-[select]:pr-9 group-has-[select]:pl-2.5",
+        hasTrailing && (prefix ? "group-has-[select]:pr-6 group-has-[select]:pl-0" : "group-has-[select]:pr-6 group-has-[select]:pl-3")
+      ),
+      leadingText: "pr-2 pl-3"
+    },
+    lg: {
+      input: cx(
+        // Apply padding styles when select element is passed as a child
+        hasLeading && "group-has-[select]:pr-9.5 group-has-[select]:pl-3",
+        hasTrailing && (prefix ? "group-has-[select]:pr-6 group-has-[select]:pl-0" : "group-has-[select]:pr-6 group-has-[select]:pl-3")
+      ),
+      leadingText: "pr-2 pl-3.5"
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size,
+      "aria-label": label || void 0,
+      inputClassName: cx(paddings[size].input),
+      tooltipClassName: cx(hasTrailing && !hasLeading && "group-has-[select]:right-0"),
+      wrapperClassName: cx(
+        "z-10",
+        // Apply styles based on the presence of leading or trailing elements
+        hasLeading && "rounded-l-none",
+        hasTrailing && "rounded-r-none",
+        inputGroupAddonInnerFieldClass
+      ),
+      ...props,
+      children: ({ isDisabled, isInvalid, isRequired }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : isRequired, children: label }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-input-size": size,
+            className: cx(
+              "group relative flex h-max w-full flex-row items-stretch overflow-clip rounded-lg bg-primary transition-[border-color,box-shadow] duration-100 ease-linear",
+              // Single outer shell for select / button addons (Figma 85:1269)
+              inputGroupShellBorderClass,
+              !isInvalid && inputGroupShellFocusClass,
+              isInvalid && inputGroupShellInvalidClass,
+              isDisabled && "cursor-not-allowed"
+            ),
+            children: [
+              leadingAddon && /* @__PURE__ */ jsx("section", { "data-leading": hasLeading || void 0, className: "flex shrink-0 self-stretch group-disabled:opacity-50 *:h-full", children: leadingAddon }),
+              prefix && /* @__PURE__ */ jsx("span", { className: cx("my-auto grow group-disabled:opacity-50", paddings[size].leadingText), children: /* @__PURE__ */ jsx("p", { className: cx("text-md text-tertiary", size === "sm" && "text-sm"), children: prefix }) }),
+              children,
+              trailingAddon && /* @__PURE__ */ jsx("section", { "data-trailing": hasTrailing || void 0, className: "flex shrink-0 self-stretch group-disabled:opacity-50 *:h-full", children: trailingAddon })
+            ]
+          }
+        ),
+        hint && /* @__PURE__ */ jsx(HintText, { isInvalid, className: cx(size === "sm" && "text-xs"), children: hint })
+      ] })
+    }
+  );
+};
+InputGroup.Prefix = InputPrefix;
+InputGroup.displayName = "InputGroup";
+var InputFile = ({
+  size = "sm",
+  label,
+  hint,
+  placeholder = "Choose a file",
+  isDisabled,
+  isInvalid,
+  isRequired,
+  hideRequiredIndicator,
+  isLoading,
+  acceptedFileTypes,
+  allowsMultiple,
+  onChange,
+  className,
+  buttonText = "Upload"
+}) => {
+  const inputRef = useRef(null);
+  const [fileNames, setFileNames] = useState("");
+  const handleClick = () => {
+    if (inputRef.current?.value) {
+      inputRef.current.value = "";
+    }
+    inputRef.current?.click();
+  };
+  const handleChange = () => {
+    const files = inputRef.current?.files ?? null;
+    if (files && files.length > 0) {
+      setFileNames(
+        Array.from(files).map((f) => f.name).join(", ")
+      );
+    } else {
+      setFileNames("");
+    }
+    onChange?.(files);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputGroup,
+      {
+        size,
+        label,
+        hint,
+        isDisabled,
+        isInvalid,
+        isRequired,
+        hideRequiredIndicator,
+        className,
+        trailingAddon: /* @__PURE__ */ jsx(Button, { size, color: "secondary", onClick: handleClick, isDisabled, children: buttonText }),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            InputBase,
+            {
+              placeholder,
+              value: fileNames,
+              readOnly: true,
+              inputClassName: cx("cursor-pointer", isLoading && "pr-9"),
+              wrapperClassName: "cursor-pointer",
+              onClick: handleClick
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxs("svg", { fill: "none", viewBox: "0 0 16 16", className: "pointer-events-none absolute top-1/2 right-3 z-20 size-4 -translate-y-1/2 text-fg-quaternary", children: [
+            /* @__PURE__ */ jsx("circle", { className: "stroke-current opacity-30", cx: "8", cy: "8", r: "6.5", strokeWidth: "1.5" }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "origin-center animate-spin stroke-current",
+                cx: "8",
+                cy: "8",
+                r: "6.5",
+                strokeWidth: "1.5",
+                strokeDasharray: "10 40",
+                strokeLinecap: "round"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        className: "hidden",
+        disabled: isDisabled,
+        accept: acceptedFileTypes?.toString(),
+        multiple: allowsMultiple,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+InputFile.displayName = "InputFile";
+
+export { InputFile };
+//# sourceMappingURL=input-file.js.map
+//# sourceMappingURL=input-file.js.map