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

package/dist/react/input-tags.js

@@ -0,0 +1,565 @@
+import { createContext, useRef, useState, useCallback, useContext, useLayoutEffect } from 'react';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info';
+import { Group, TagList as TagList$1, Input, Label as Label$1, TagGroup as TagGroup$1, Tag as Tag$1, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Button, Text } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+
+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;
+}
+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, { ...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 sizes = {
+  sm: {
+    wh: 8,
+    c: 4,
+    r: 2.5
+  },
+  md: {
+    wh: 10,
+    c: 5,
+    r: 4
+  }
+};
+var Dot = ({ size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx("svg", { width: sizes[size].wh, height: sizes[size].wh, viewBox: `0 0 ${sizes[size].wh} ${sizes[size].wh}`, fill: "none", ...props, children: /* @__PURE__ */ jsx("circle", { cx: sizes[size].c, cy: sizes[size].c, r: sizes[size].r, fill: "currentColor", stroke: "currentColor" }) });
+};
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var sizes2 = {
+  sm: { box: "size-3.5 rounded-xs", iconPixelSize: 10 },
+  md: { box: "size-4 rounded-xs", iconPixelSize: 12 },
+  lg: { box: "size-4.5 rounded-xs", iconPixelSize: 13 }
+};
+function TagCheckboxAnimatedCheckMark({ pixelSize, className }) {
+  const pathRef = useRef(null);
+  useLayoutEffect(() => {
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
+    if (len <= 0) return;
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {
+      duration: CHECKBOX_TICK_DRAW_MS,
+      delay: CHECKBOX_TICK_DELAY_MS,
+      easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+      fill: "forwards"
+    });
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: pixelSize, height: pixelSize, viewBox: "0 0 14 14", fill: "none", className: cx("block", className), children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      ref: pathRef,
+      d: "M2.33325 7L5.24992 9.91667L11.6666 3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = "sm" }) => {
+  const { box, iconPixelSize } = sizes2[size];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary",
+        box,
+        isSelected ? "border-transparent bg-brand-solid" : "bg-primary",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isSelected && "bg-tertiary",
+        isFocused && !isDisabled && focusRingShadow,
+        className
+      ),
+      children: isSelected && /* @__PURE__ */ jsx(TagCheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
+    }
+  );
+};
+TagCheckbox.displayName = "TagCheckbox";
+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 styles = {
+  sm: { root: "p-0.5", icon: "size-2.5" },
+  md: { root: "p-0.5", icon: "size-3" },
+  lg: { root: "p-[3px]", icon: "size-3.5" }
+};
+var TagCloseX = ({ size = "md", className, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      slot: "remove",
+      "aria-label": "Remove this tag",
+      className: cx(
+        "flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover focus-visible:rounded-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        focusShadowPlain,
+        styles[size].root,
+        className
+      ),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(XIcon, { className: cx("shrink-0 transition-inherit-all", styles[size].icon) })
+    }
+  );
+};
+var focusShadowPlain2 = "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 TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
+  const [isFailed, setIsFailed] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary",
+        contrastBorder && "outline-[0.5px] -outline-offset-[0.5px] outline-black/16",
+        className
+      ),
+      children: src && !isFailed ? /* @__PURE__ */ jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src, alt, onError: () => setIsFailed(true) }) : /* @__PURE__ */ jsx(UserIcon, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })
+    }
+  );
+};
+var TagGroupContext = createContext({
+  selectionMode: "none",
+  size: "sm"
+});
+var TagGroup = ({ label, selectionMode = "none", size = "sm", children, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(TagGroupContext.Provider, { value: { selectionMode, size }, children: /* @__PURE__ */ jsx(TagGroup$1, { "aria-label": label, selectionMode, disallowEmptySelection: selectionMode === "single", ...otherProps, children }) });
+};
+var TagList = TagList$1;
+var styles2 = {
+  sm: {
+    root: {
+      base: "px-2 py-0.75 text-xs font-medium",
+      withCheckbox: "pl-1.25",
+      withAvatar: "pl-1",
+      withDot: "pl-1.5",
+      withCount: "pr-1",
+      withClose: "pr-1"
+    },
+    content: "gap-1",
+    count: "px-1 text-xs font-medium"
+  },
+  md: {
+    root: {
+      base: "px-2.25 py-0.5 text-sm font-medium",
+      withCheckbox: "pl-1",
+      withAvatar: "pl-1.25",
+      withDot: "pl-1.75",
+      withCount: "pr-0.75",
+      withClose: "pr-1"
+    },
+    content: "gap-1.25",
+    count: "px-1.25 text-xs font-medium"
+  },
+  lg: {
+    root: {
+      base: "px-2.5 py-1 text-sm font-medium",
+      withCheckbox: "pl-1.25",
+      withAvatar: "pl-1.75",
+      withDot: "pl-2.25",
+      withCount: "pr-1",
+      withClose: "pr-1"
+    },
+    content: "gap-1.5",
+    count: "px-1.5 text-sm font-medium"
+  }
+};
+var Tag = ({
+  id,
+  avatarSrc,
+  avatarContrastBorder = true,
+  dot,
+  dotClassName,
+  isDisabled,
+  count,
+  className,
+  children,
+  onClose
+}) => {
+  const context = useContext(TagGroupContext);
+  const leadingContent = avatarSrc ? /* @__PURE__ */ jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder }) : dot ? /* @__PURE__ */ jsx(Dot, { className: cx("text-fg-success-secondary", dotClassName), size: "sm" }) : null;
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      id,
+      isDisabled,
+      textValue: typeof children === "string" ? children : void 0,
+      className: (state) => cx(
+        "flex cursor-default items-center gap-0.75 rounded-md border border-solid border-primary bg-primary text-secondary transition duration-50 ease-linear",
+        focusShadowPlain2,
+        styles2[context.size].root.base,
+        // With avatar
+        avatarSrc && styles2[context.size].root.withAvatar,
+        // With X button
+        (onClose || state.allowsRemoving) && styles2[context.size].root.withClose,
+        // With dot
+        dot && styles2[context.size].root.withDot,
+        // With count
+        typeof count === "number" && styles2[context.size].root.withCount,
+        // With checkbox
+        context.selectionMode !== "none" && cx("cursor-pointer", styles2[context.size].root.withCheckbox),
+        // Disabled
+        isDisabled && "cursor-not-allowed",
+        typeof className === "function" ? className(state) : className
+      ),
+      children: ({ isSelected, isDisabled: isDisabled2, allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: cx("flex items-center gap-1", styles2[context.size].content), children: [
+          context.selectionMode !== "none" && /* @__PURE__ */ jsx(TagCheckbox, { size: context.size, isSelected, isDisabled: isDisabled2 }),
+          leadingContent,
+          children,
+          typeof count === "number" && /* @__PURE__ */ jsx("span", { className: cx("flex items-center justify-center rounded-[3px] bg-tertiary text-center", styles2[context.size].count), children: count })
+        ] }),
+        (onClose || allowsRemoving) && /* @__PURE__ */ jsx(TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()) })
+      ] })
+    }
+  );
+};
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+var InputTags = ({
+  size = "md",
+  label,
+  hint,
+  tooltip,
+  placeholder,
+  isRequired,
+  isDisabled,
+  isInvalid,
+  allowDuplicates = false,
+  maxTags,
+  value,
+  defaultValue,
+  onChange,
+  onTagAdded,
+  onTagRemoved,
+  validate,
+  className,
+  hideRequiredIndicator
+}) => {
+  const isControlled = value !== void 0;
+  const idCounter = useRef(0);
+  const nextId = () => idCounter.current++;
+  const inputRef = useRef(null);
+  const tagGroupRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [internalEntries, setInternalEntries] = useState(() => (defaultValue ?? []).map((label2) => ({ id: nextId(), label: label2 })));
+  const prevControlledValue = useRef([]);
+  const controlledEntries = useRef([]);
+  const entries = (() => {
+    if (!isControlled) return internalEntries;
+    const prev = prevControlledValue.current;
+    if (prev === value) return controlledEntries.current;
+    const oldEntries = controlledEntries.current;
+    const newEntries = [];
+    const usedOldIndices = /* @__PURE__ */ new Set();
+    for (const label2 of value) {
+      const oldIndex = oldEntries.findIndex((e, i) => e.label === label2 && !usedOldIndices.has(i));
+      if (oldIndex !== -1) {
+        usedOldIndices.add(oldIndex);
+        newEntries.push(oldEntries[oldIndex]);
+      } else {
+        newEntries.push({ id: nextId(), label: label2 });
+      }
+    }
+    prevControlledValue.current = value;
+    controlledEntries.current = newEntries;
+    return newEntries;
+  })();
+  const tags = entries.map((e) => e.label);
+  const addTag = useCallback(
+    (text) => {
+      const trimmed = text.trim();
+      if (!trimmed) return false;
+      if (!allowDuplicates && tags.includes(trimmed)) return false;
+      if (maxTags && tags.length >= maxTags) return false;
+      if (validate && !validate(trimmed)) return false;
+      const newEntry = { id: nextId(), label: trimmed };
+      const newEntries = [...entries, newEntry];
+      if (!isControlled) {
+        setInternalEntries(newEntries);
+      }
+      onChange?.(newEntries.map((e) => e.label));
+      onTagAdded?.(trimmed);
+      return true;
+    },
+    [tags, entries, isControlled, allowDuplicates, maxTags, validate, onChange, onTagAdded]
+  );
+  const removeTag = useCallback(
+    (id) => {
+      const entry = entries.find((e) => e.id === id);
+      if (!entry) return;
+      const newEntries = entries.filter((e) => e.id !== id);
+      if (!isControlled) {
+        setInternalEntries(newEntries);
+      }
+      onChange?.(newEntries.map((e) => e.label));
+      onTagRemoved?.(entry.label);
+    },
+    [entries, isControlled, onChange, onTagRemoved]
+  );
+  const handleRemove = useCallback(
+    (keys) => {
+      for (const key of keys) {
+        removeTag(key);
+      }
+      if (entries.length - keys.size <= 0) {
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
+    },
+    [removeTag, entries.length]
+  );
+  const focusLastTag = useCallback(() => {
+    const tagEls = tagGroupRef.current?.querySelectorAll('[role="row"]');
+    if (tagEls && tagEls.length > 0) {
+      tagEls[tagEls.length - 1].focus();
+    }
+  }, []);
+  const handleInputKeyDown = (event) => {
+    const input = event.currentTarget;
+    const isCaretAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (addTag(inputValue)) {
+          setInputValue("");
+        }
+        break;
+      case "Backspace":
+        if (isCaretAtStart && inputValue === "") {
+          focusLastTag();
+        }
+        break;
+      case "ArrowLeft":
+        if (isCaretAtStart) {
+          focusLastTag();
+        }
+        break;
+    }
+  };
+  const handleTagGroupKeyDown = (event) => {
+    if (event.key === "ArrowRight") {
+      const tagEls = tagGroupRef.current?.querySelectorAll('[role="row"]');
+      if (tagEls && tagEls.length > 0) {
+        const lastTag = tagEls[tagEls.length - 1];
+        if (document.activeElement === lastTag || lastTag.contains(document.activeElement)) {
+          inputRef.current?.focus();
+        }
+      }
+    }
+  };
+  const isEmpty = entries.length === 0;
+  const hasTrailingIcon = tooltip || isInvalid;
+  const sizes3 = sortCx({
+    sm: {
+      root: cx("gap-2 px-3 py-2 text-sm", !isEmpty && "py-1.5 pl-2", hasTrailingIcon && "pr-9"),
+      iconTrailing: "right-3"
+    },
+    md: {
+      root: cx("gap-2 px-3 py-2 text-md", !isEmpty && "pl-2", hasTrailingIcon && "pr-9"),
+      iconTrailing: "right-3"
+    },
+    lg: {
+      root: cx("gap-2 px-3.5 py-2.5 text-md", !isEmpty && "pl-2.5", hasTrailingIcon && "pr-9.5"),
+      iconTrailing: "right-3.5"
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col gap-1.5", className), children: [
+    label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : isRequired, children: label }),
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        isDisabled,
+        isInvalid,
+        className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+          "group/input relative flex w-full items-center rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+          isDisabled2 && "cursor-not-allowed opacity-50",
+          isFocusWithin && !isDisabled2 && !isInvalid2 && inputFocusRingShadow,
+          isInvalid2 && !isFocusWithin && "border-error_subtle",
+          isInvalid2 && isFocusWithin && inputErrorFocusRingShadow,
+          sizes3[size].root
+        ),
+        children: ({ isDisabled: isDisabled2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cx("relative flex w-full flex-1 flex-row flex-wrap items-center justify-start", size === "sm" ? "gap-1.5" : "gap-2"), children: [
+            !isEmpty && /* @__PURE__ */ jsx("div", { ref: tagGroupRef, onKeyDown: handleTagGroupKeyDown, className: "contents", children: /* @__PURE__ */ jsx(TagGroup, { label: label || "Tags", size: size === "lg" ? "md" : size, onRemove: handleRemove, className: "contents", children: /* @__PURE__ */ jsx(TagList, { className: "flex flex-wrap gap-1.5 focus:outline-hidden", items: entries, children: (item) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                id: item.id,
+                isDisabled: isDisabled2,
+                className: "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-[-2px] focus-visible:outline-hidden",
+                children: item.label
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsx("div", { className: "relative flex min-w-[20%] flex-1 flex-row items-center", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRef,
+                type: "text",
+                value: inputValue,
+                disabled: isDisabled2,
+                placeholder: isEmpty ? placeholder : void 0,
+                onChange: (e) => setInputValue(e.target.value),
+                onKeyDown: handleInputKeyDown,
+                className: "w-full flex-[1_0_0] appearance-none bg-transparent text-ellipsis text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed"
+              }
+            ) })
+          ] }),
+          tooltip && /* @__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",
+                sizes3[size].iconTrailing
+              ),
+              children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4 stroke-[2.25px]" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            InfoIcon,
+            {
+              className: cx(
+                "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+                sizes3[size].iconTrailing
+              )
+            }
+          )
+        ] })
+      }
+    ),
+    hint && /* @__PURE__ */ jsx(HintText, { isInvalid, className: cx(size === "sm" && "text-xs"), children: hint })
+  ] });
+};
+
+export { InputTags };
+//# sourceMappingURL=input-tags.js.map
+//# sourceMappingURL=input-tags.js.map