@primer/react-brand 0.77.0 → 0.78.0-rc.6fbe9fb5

package/esm/Tooltip/Tooltip.js

@@ -8,106 +8,151 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { getAnchoredPosition as d } from "@primer/behaviors";
 import { apply as f, isSupported as p } from "@oddbird/popover-polyfill/fn";
 //#region src/Tooltip/Tooltip.tsx
-var m = {
+var m = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+], h = [
+	"short",
+	"medium",
+	"long"
+], g = {
+	nw: {
+		side: "outside-top",
+		align: "end"
+	},
 	n: {
 		side: "outside-top",
 		align: "center"
 	},
+	ne: {
+		side: "outside-top",
+		align: "start"
+	},
 	e: {
 		side: "outside-right",
 		align: "center"
 	},
+	se: {
+		side: "outside-bottom",
+		align: "start"
+	},
 	s: {
 		side: "outside-bottom",
 		align: "center"
 	},
+	sw: {
+		side: "outside-bottom",
+		align: "end"
+	},
 	w: {
 		side: "outside-left",
 		align: "center"
 	}
-}, h = {
+}, _ = {
+	"outside-top-end": "nw",
 	"outside-top-center": "n",
+	"outside-top-start": "ne",
 	"outside-right-center": "e",
+	"outside-bottom-start": "se",
 	"outside-bottom-center": "s",
+	"outside-bottom-end": "sw",
 	"outside-left-center": "w"
-}, g = [
+}, v = {
+	short: 50,
+	medium: 400,
+	long: 1200
+}, y = [
 	"a[href]",
 	"button:not(:disabled)",
 	"summary",
 	"select",
 	"input:not([type=hidden])",
 	"textarea"
-], _ = (e) => g.some((t) => e.matches(t)) || e.hasAttribute("role") && e.getAttribute("role") === "button", v = i.createContext({}), y = i.forwardRef(({ direction: g = "s", text: y, type: b = "description", children: x, id: S, className: C, ...w }, T) => {
-	let E = t(S), D = a.only(x) ?? null, O = n(T), k = s(null), A = s(null), [j, M] = c(g), N = i.useCallback(() => {
-		A.current &&= (clearTimeout(A.current), null), k.current && O.current && !k.current.matches(":popover-open") && k.current.showPopover();
-	}, [k, O]), P = i.useCallback(() => {
-		A.current = setTimeout(() => {
-			k.current && O.current && k.current.matches(":popover-open") && k.current.hidePopover();
+], b = (e) => y.some((t) => e.matches(t)) || e.hasAttribute("role") && e.getAttribute("role") === "button", x = i.createContext({}), S = i.forwardRef(({ direction: m = "s", delay: h = "short", text: y, type: S = "description", children: C, id: w, className: T, ...E }, D) => {
+	let O = t(w), k = a.only(C) ?? null, A = n(D), j = s(null), M = s(null), N = s(null), [P, F] = c(m), I = i.useCallback(() => {
+		M.current &&= (clearTimeout(M.current), null);
+		let e = A.current?.getAttribute("aria-haspopup");
+		A.current?.getAttribute("aria-expanded") === "true" && e !== null && e !== "false" || (N.current &&= (clearTimeout(N.current), null), j.current && A.current && typeof j.current.showPopover == "function" && !j.current.matches(":popover-open") && j.current.showPopover());
+	}, [j, A]), L = i.useCallback(() => {
+		M.current && clearTimeout(M.current), M.current = setTimeout(() => {
+			M.current = null, I();
+		}, v[h]);
+	}, [h, I]), R = i.useCallback(() => {
+		M.current &&= (clearTimeout(M.current), null), N.current = setTimeout(() => {
+			j.current && A.current && typeof j.current.hidePopover == "function" && j.current.matches(":popover-open") && j.current.hidePopover();
 		}, 200);
-	}, [k, O]);
+	}, [j, A]);
 	return o(() => () => {
-		A.current && clearTimeout(A.current);
-	}, [A]), o(() => {
-		if (!k.current || !O.current) return;
-		let e = _(O.current), t = O.current.childNodes, n = Array.from(t).some((e) => e instanceof HTMLElement && _(e));
-		if (!(e || n) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead."), b === "label") {
-			let e = O.current.hasAttribute("aria-label"), t = Array.from(O.current.childNodes).some((e) => e instanceof HTMLElement && e.hasAttribute("aria-label"));
+		M.current && clearTimeout(M.current), N.current && clearTimeout(N.current);
+	}, [N]), o(() => {
+		if (!j.current || !A.current) return;
+		let e = b(A.current), t = A.current.childNodes, n = Array.from(t).some((e) => e instanceof HTMLElement && b(e));
+		if (!(e || n) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead."), S === "label") {
+			let e = A.current.hasAttribute("aria-label"), t = Array.from(A.current.childNodes).some((e) => e instanceof HTMLElement && e.hasAttribute("aria-label"));
 			(e || t) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.");
 		}
 		typeof window < "u" && (p() || f());
-		let r = k.current, i = O.current;
+		let r = j.current, i = A.current;
 		r.setAttribute("popover", "auto");
 		let a = {
-			side: m[g].side,
-			align: m[g].align,
+			side: g[m].side,
+			align: g[m].align,
 			anchorOffset: 8
 		}, o = () => {
 			let { top: e, left: t, anchorAlign: n, anchorSide: o } = d(r, i, a);
 			r.style.top = `${e}px`, r.style.left = `${t}px`;
-			let s = h[`${o}-${n}`];
-			M(s);
+			let s = r.getBoundingClientRect(), c = i.getBoundingClientRect(), l = o === "outside-top" || o === "outside-bottom", u = l ? c.left + c.width / 2 - s.left : c.top + c.height / 2 - s.top, f = l ? s.width : s.height, p = Math.max(0, Math.min(u, f));
+			r.style.setProperty("--p", `${p}px`);
+			let m = _[`${o}-${n}`];
+			F(m);
 		};
 		return r.addEventListener("toggle", o), () => {
 			r.removeEventListener("toggle", o);
 		};
 	}, [
-		k,
-		O,
-		g,
-		b
-	]), /* @__PURE__ */ u(v.Provider, {
-		value: { tooltipId: E },
-		children: [D && i.cloneElement(D, {
-			ref: O,
-			"aria-describedby": b === "description" ? E : D.props["aria-describedby"],
-			"aria-labelledby": b === "label" ? E : D.props["aria-labelledby"],
+		j,
+		A,
+		m,
+		S
+	]), /* @__PURE__ */ u(x.Provider, {
+		value: { tooltipId: O },
+		children: [k && i.cloneElement(k, {
+			ref: A,
+			"aria-describedby": S === "description" ? O : k.props["aria-describedby"],
+			"aria-labelledby": S === "label" ? O : k.props["aria-labelledby"],
 			onBlur: (e) => {
-				P(), D.props.onBlur?.(e);
+				R(), k.props.onBlur?.(e);
 			},
 			onFocus: (e) => {
-				N(), D.props.onFocus?.(e);
+				I(), k.props.onFocus?.(e);
 			},
 			onMouseEnter: (e) => {
-				N(), D.props.onMouseEnter?.(e);
+				L(), k.props.onMouseEnter?.(e);
 			},
 			onMouseLeave: (e) => {
-				P(), D.props.onMouseLeave?.(e);
+				R(), k.props.onMouseLeave?.(e);
 			}
 		}), /* @__PURE__ */ l("div", {
-			className: e(r.Tooltip, C),
-			ref: k,
-			"data-direction": j,
-			...w,
-			role: b === "description" ? "tooltip" : void 0,
-			"aria-hidden": b === "label" || void 0,
-			id: E,
-			onMouseEnter: N,
-			onMouseLeave: P,
+			className: e(r.Tooltip, T),
+			ref: j,
+			"data-direction": P,
+			...E,
+			role: S === "description" ? "tooltip" : void 0,
+			"aria-hidden": S === "label" || void 0,
+			id: O,
+			onMouseEnter: I,
+			onMouseLeave: R,
 			children: y
 		})]
 	});
 });
 //#endregion
-export { y as Tooltip, v as TooltipContext };
+export { S as Tooltip, x as TooltipContext, h as TooltipDelays, m as TooltipDirections };
 
 //# sourceMappingURL=Tooltip.js.map

package/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {Children, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../hooks/useId'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorSide, AnchorAlignment} from '@primer/behaviors'\nimport {isSupported, apply} from '@oddbird/popover-polyfill/fn'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tooltip.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css'\nimport {BaseProps} from '../component-helpers'\n\ntype TooltipDirection = 'n' | 'e' | 's' | 'w'\nexport type TooltipProps = {\n  direction?: TooltipDirection\n  text: string\n  type?: 'label' | 'description'\n  children?: React.ReactNode\n} & BaseProps<HTMLDivElement>\n\nexport type TriggerPropsType = {\n  'aria-describedby'?: string\n  'aria-labelledby'?: string\n  'aria-label'?: string\n  onBlur?: React.FocusEventHandler\n  onFocus?: React.FocusEventHandler\n  onMouseEnter?: React.MouseEventHandler\n  onMouseLeave?: React.MouseEventHandler\n  ref?: React.RefObject<HTMLElement | null>\n}\n\n// map tooltip direction to anchoredPosition props\nconst directionToPosition: Record<TooltipDirection, {side: AnchorSide; align: AnchorAlignment}> = {\n  n: {side: 'outside-top', align: 'center'},\n  e: {side: 'outside-right', align: 'center'},\n  s: {side: 'outside-bottom', align: 'center'},\n  w: {side: 'outside-left', align: 'center'},\n}\n\n// map anchoredPosition props to tooltip direction\nconst positionToDirection: Record<string, TooltipDirection> = {\n  'outside-top-center': 'n',\n  'outside-right-center': 'e',\n  'outside-bottom-center': 's',\n  'outside-left-center': 'w',\n}\n\n// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3\nconst interactiveElements = [\n  'a[href]',\n  'button:not(:disabled)',\n  'summary',\n  'select',\n  'input:not([type=hidden])',\n  'textarea',\n]\n\nconst isInteractive = (element: HTMLElement) => {\n  return (\n    interactiveElements.some(selector => element.matches(selector)) ||\n    (element.hasAttribute('role') && element.getAttribute('role') === 'button')\n  )\n}\nexport const TooltipContext = React.createContext<{tooltipId?: string}>({})\n\nexport const Tooltip = React.forwardRef(\n  ({direction = 's', text, type = 'description', children, id, className, ...rest}: TooltipProps, forwardedRef) => {\n    const tooltipId = useId(id)\n    const child = (Children.only(children) as React.ReactElement<TriggerPropsType> | null) ?? null\n    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement | null> | null)\n    const tooltipElRef = useRef<HTMLDivElement>(null)\n    // Used to delay the closing of the tooltip to make sure the user can move the mouse from the trigger to the tooltip\n    const closeTooltipTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n    const tooltipCloseTimeout = 200\n\n    const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)\n\n    const openTooltip = React.useCallback(() => {\n      if (closeTooltipTimeoutRef.current) {\n        clearTimeout(closeTooltipTimeoutRef.current)\n        closeTooltipTimeoutRef.current = null\n      }\n\n      if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) {\n        tooltipElRef.current.showPopover()\n      }\n    }, [tooltipElRef, triggerRef])\n\n    const closeTooltip = React.useCallback(() => {\n      closeTooltipTimeoutRef.current = setTimeout(() => {\n        if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.matches(':popover-open')) {\n          tooltipElRef.current.hidePopover()\n        }\n      }, tooltipCloseTimeout)\n    }, [tooltipElRef, triggerRef])\n\n    useEffect(() => {\n      return () => {\n        if (closeTooltipTimeoutRef.current) {\n          clearTimeout(closeTooltipTimeoutRef.current)\n        }\n      }\n    }, [closeTooltipTimeoutRef])\n\n    useEffect(() => {\n      if (!tooltipElRef.current || !triggerRef.current) return\n      /*\n       * ACCESSIBILITY CHECKS\n       */\n      // Has trigger element or any of its children interactive elements?\n      const isTriggerInteractive = isInteractive(triggerRef.current)\n      const triggerChildren = triggerRef.current.childNodes\n      const hasInteractiveChild = Array.from(triggerChildren).some(triggerChild => {\n        return triggerChild instanceof HTMLElement && isInteractive(triggerChild)\n      })\n\n      if (\n        !(isTriggerInteractive || hasInteractiveChild) &&\n        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n      ) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',\n        )\n      }\n\n      // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label\n      if (type === 'label') {\n        const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')\n        const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(\n          triggerChild => triggerChild instanceof HTMLElement && triggerChild.hasAttribute('aria-label'),\n        )\n\n        if (\n          (hasAriaLabel || hasAriaLabelInChildren) &&\n          (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n        ) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',\n          )\n        }\n      }\n\n      // SSR safe polyfill apply\n      if (typeof window !== 'undefined') {\n        if (!isSupported()) {\n          apply()\n        }\n      }\n\n      /*\n       * TOOLTIP POSITIONING\n       */\n      const tooltip = tooltipElRef.current\n      const trigger = triggerRef.current\n      tooltip.setAttribute('popover', 'auto')\n      const settings = {\n        side: directionToPosition[direction].side,\n        align: directionToPosition[direction].align,\n        anchorOffset: 8,\n      }\n\n      const positionSet = () => {\n        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)\n\n        tooltip.style.top = `${top}px`\n        tooltip.style.left = `${left}px`\n        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after\n        const calculatedDirectionString = positionToDirection[`${anchorSide}-${anchorAlign}` as string]\n        setCalculatedDirection(calculatedDirectionString)\n      }\n\n      tooltip.addEventListener('toggle', positionSet)\n\n      return () => {\n        tooltip.removeEventListener('toggle', positionSet)\n      }\n    }, [tooltipElRef, triggerRef, direction, type])\n\n    return (\n      <TooltipContext.Provider value={{tooltipId}}>\n        {child &&\n          React.cloneElement(child, {\n            ref: triggerRef,\n            // If it is a type description, we use tooltip to describe the trigger\n            'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],\n            // If it is a label type, we use tooltip to label the trigger\n            'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],\n            onBlur: (event: React.FocusEvent) => {\n              closeTooltip()\n              child.props.onBlur?.(event)\n            },\n            onFocus: (event: React.FocusEvent) => {\n              openTooltip()\n              child.props.onFocus?.(event)\n            },\n            onMouseEnter: (event: React.MouseEvent) => {\n              openTooltip()\n              child.props.onMouseEnter?.(event)\n            },\n            onMouseLeave: (event: React.MouseEvent) => {\n              closeTooltip()\n              child.props.onMouseLeave?.(event)\n            },\n          })}\n        <div\n          className={clsx(styles.Tooltip, className)}\n          ref={tooltipElRef}\n          data-direction={calculatedDirection}\n          {...rest}\n          // Only need tooltip role if the tooltip is a description for supplementary information\n          role={type === 'description' ? 'tooltip' : undefined}\n          // stop AT from announcing the tooltip twice when it is a label type because it will be announced with \"aria-labelledby\"\n          aria-hidden={type === 'label' ? true : undefined}\n          id={tooltipId}\n          // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip\n          onMouseEnter={openTooltip}\n          onMouseLeave={closeTooltip}\n        >\n          {text}\n        </div>\n      </TooltipContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {Children, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../hooks/useId'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorSide, AnchorAlignment} from '@primer/behaviors'\nimport {isSupported, apply} from '@oddbird/popover-polyfill/fn'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tooltip.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css'\nimport {BaseProps} from '../component-helpers'\n\nexport const TooltipDirections = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as const\nexport const TooltipDelays = ['short', 'medium', 'long'] as const\nexport type TooltipDirection = (typeof TooltipDirections)[number]\nexport type TooltipDelay = (typeof TooltipDelays)[number]\nexport type TooltipProps = {\n  direction?: TooltipDirection\n  delay?: TooltipDelay\n  text: string\n  type?: 'label' | 'description'\n  children?: React.ReactNode\n} & BaseProps<HTMLDivElement>\n\nexport type TriggerPropsType = {\n  'aria-describedby'?: string\n  'aria-labelledby'?: string\n  'aria-label'?: string\n  onBlur?: React.FocusEventHandler\n  onFocus?: React.FocusEventHandler\n  onMouseEnter?: React.MouseEventHandler\n  onMouseLeave?: React.MouseEventHandler\n  ref?: React.RefObject<HTMLElement | null>\n}\n\n// map tooltip direction to anchoredPosition props\nconst directionToPosition: Record<TooltipDirection, {side: AnchorSide; align: AnchorAlignment}> = {\n  nw: {side: 'outside-top', align: 'end'},\n  n: {side: 'outside-top', align: 'center'},\n  ne: {side: 'outside-top', align: 'start'},\n  e: {side: 'outside-right', align: 'center'},\n  se: {side: 'outside-bottom', align: 'start'},\n  s: {side: 'outside-bottom', align: 'center'},\n  sw: {side: 'outside-bottom', align: 'end'},\n  w: {side: 'outside-left', align: 'center'},\n}\n\n// map anchoredPosition props to tooltip direction\nconst positionToDirection: Record<string, TooltipDirection> = {\n  'outside-top-end': 'nw',\n  'outside-top-center': 'n',\n  'outside-top-start': 'ne',\n  'outside-right-center': 'e',\n  'outside-bottom-start': 'se',\n  'outside-bottom-center': 's',\n  'outside-bottom-end': 'sw',\n  'outside-left-center': 'w',\n}\n\nconst tooltipDelayMap: Record<TooltipDelay, number> = {\n  short: 50,\n  medium: 400,\n  long: 1200,\n}\n\n// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3\nconst interactiveElements = [\n  'a[href]',\n  'button:not(:disabled)',\n  'summary',\n  'select',\n  'input:not([type=hidden])',\n  'textarea',\n]\n\nconst isInteractive = (element: HTMLElement) => {\n  return (\n    interactiveElements.some(selector => element.matches(selector)) ||\n    (element.hasAttribute('role') && element.getAttribute('role') === 'button')\n  )\n}\nexport const TooltipContext = React.createContext<{tooltipId?: string}>({})\n\nexport const Tooltip = React.forwardRef(\n  (\n    {direction = 's', delay = 'short', text, type = 'description', children, id, className, ...rest}: TooltipProps,\n    forwardedRef,\n  ) => {\n    const tooltipId = useId(id)\n    const child = (Children.only(children) as React.ReactElement<TriggerPropsType> | null) ?? null\n    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement | null> | null)\n    const tooltipElRef = useRef<HTMLDivElement>(null)\n    const openTooltipTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n    // Used to delay the closing of the tooltip to make sure the user can move the mouse from the trigger to the tooltip\n    const closeTooltipTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n    const tooltipCloseTimeout = 200\n\n    const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)\n\n    const openTooltip = React.useCallback(() => {\n      if (openTooltipTimeoutRef.current) {\n        clearTimeout(openTooltipTimeoutRef.current)\n        openTooltipTimeoutRef.current = null\n      }\n\n      const ariaHasPopup = triggerRef.current?.getAttribute('aria-haspopup')\n      const hasActivePopup =\n        triggerRef.current?.getAttribute('aria-expanded') === 'true' &&\n        ariaHasPopup !== null &&\n        ariaHasPopup !== 'false'\n      if (hasActivePopup) return\n\n      if (closeTooltipTimeoutRef.current) {\n        clearTimeout(closeTooltipTimeoutRef.current)\n        closeTooltipTimeoutRef.current = null\n      }\n\n      if (\n        tooltipElRef.current &&\n        triggerRef.current &&\n        typeof tooltipElRef.current.showPopover === 'function' &&\n        !tooltipElRef.current.matches(':popover-open')\n      ) {\n        tooltipElRef.current.showPopover()\n      }\n    }, [tooltipElRef, triggerRef])\n\n    const openTooltipWithDelay = React.useCallback(() => {\n      if (openTooltipTimeoutRef.current) {\n        clearTimeout(openTooltipTimeoutRef.current)\n      }\n\n      openTooltipTimeoutRef.current = setTimeout(() => {\n        openTooltipTimeoutRef.current = null\n        openTooltip()\n      }, tooltipDelayMap[delay])\n    }, [delay, openTooltip])\n\n    const closeTooltip = React.useCallback(() => {\n      if (openTooltipTimeoutRef.current) {\n        clearTimeout(openTooltipTimeoutRef.current)\n        openTooltipTimeoutRef.current = null\n      }\n\n      closeTooltipTimeoutRef.current = setTimeout(() => {\n        if (\n          tooltipElRef.current &&\n          triggerRef.current &&\n          typeof tooltipElRef.current.hidePopover === 'function' &&\n          tooltipElRef.current.matches(':popover-open')\n        ) {\n          tooltipElRef.current.hidePopover()\n        }\n      }, tooltipCloseTimeout)\n    }, [tooltipElRef, triggerRef])\n\n    useEffect(() => {\n      return () => {\n        if (openTooltipTimeoutRef.current) {\n          clearTimeout(openTooltipTimeoutRef.current)\n        }\n        if (closeTooltipTimeoutRef.current) {\n          clearTimeout(closeTooltipTimeoutRef.current)\n        }\n      }\n    }, [closeTooltipTimeoutRef])\n\n    useEffect(() => {\n      if (!tooltipElRef.current || !triggerRef.current) return\n      /*\n       * ACCESSIBILITY CHECKS\n       */\n      // Has trigger element or any of its children interactive elements?\n      const isTriggerInteractive = isInteractive(triggerRef.current)\n      const triggerChildren = triggerRef.current.childNodes\n      const hasInteractiveChild = Array.from(triggerChildren).some(triggerChild => {\n        return triggerChild instanceof HTMLElement && isInteractive(triggerChild)\n      })\n\n      if (\n        !(isTriggerInteractive || hasInteractiveChild) &&\n        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n      ) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',\n        )\n      }\n\n      // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label\n      if (type === 'label') {\n        const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')\n        const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(\n          triggerChild => triggerChild instanceof HTMLElement && triggerChild.hasAttribute('aria-label'),\n        )\n\n        if (\n          (hasAriaLabel || hasAriaLabelInChildren) &&\n          (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n        ) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',\n          )\n        }\n      }\n\n      // SSR safe polyfill apply\n      if (typeof window !== 'undefined') {\n        if (!isSupported()) {\n          apply()\n        }\n      }\n\n      /*\n       * TOOLTIP POSITIONING\n       */\n      const tooltip = tooltipElRef.current\n      const trigger = triggerRef.current\n      tooltip.setAttribute('popover', 'auto')\n      const settings = {\n        side: directionToPosition[direction].side,\n        align: directionToPosition[direction].align,\n        anchorOffset: 8,\n      }\n\n      const positionSet = () => {\n        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)\n\n        tooltip.style.top = `${top}px`\n        tooltip.style.left = `${left}px`\n\n        const tooltipRect = tooltip.getBoundingClientRect()\n        const triggerRect = trigger.getBoundingClientRect()\n        const isVerticalPlacement = anchorSide === 'outside-top' || anchorSide === 'outside-bottom'\n        const caretPosition = isVerticalPlacement\n          ? triggerRect.left + triggerRect.width / 2 - tooltipRect.left\n          : triggerRect.top + triggerRect.height / 2 - tooltipRect.top\n        const tooltipSize = isVerticalPlacement ? tooltipRect.width : tooltipRect.height\n        const constrainedCaretPosition = Math.max(0, Math.min(caretPosition, tooltipSize))\n\n        tooltip.style.setProperty('--p', `${constrainedCaretPosition}px`)\n\n        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after\n        const calculatedDirectionString = positionToDirection[`${anchorSide}-${anchorAlign}` as string]\n        setCalculatedDirection(calculatedDirectionString)\n      }\n\n      tooltip.addEventListener('toggle', positionSet)\n\n      return () => {\n        tooltip.removeEventListener('toggle', positionSet)\n      }\n    }, [tooltipElRef, triggerRef, direction, type])\n\n    return (\n      <TooltipContext.Provider value={{tooltipId}}>\n        {child &&\n          React.cloneElement(child, {\n            ref: triggerRef,\n            // If it is a type description, we use tooltip to describe the trigger\n            'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],\n            // If it is a label type, we use tooltip to label the trigger\n            'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],\n            onBlur: (event: React.FocusEvent) => {\n              closeTooltip()\n              child.props.onBlur?.(event)\n            },\n            onFocus: (event: React.FocusEvent) => {\n              openTooltip()\n              child.props.onFocus?.(event)\n            },\n            onMouseEnter: (event: React.MouseEvent) => {\n              openTooltipWithDelay()\n              child.props.onMouseEnter?.(event)\n            },\n            onMouseLeave: (event: React.MouseEvent) => {\n              closeTooltip()\n              child.props.onMouseLeave?.(event)\n            },\n          })}\n        <div\n          className={clsx(styles.Tooltip, className)}\n          ref={tooltipElRef}\n          data-direction={calculatedDirection}\n          {...rest}\n          // Only need tooltip role if the tooltip is a description for supplementary information\n          role={type === 'description' ? 'tooltip' : undefined}\n          // stop AT from announcing the tooltip twice when it is a label type because it will be announced with \"aria-labelledby\"\n          aria-hidden={type === 'label' ? true : undefined}\n          id={tooltipId}\n          // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip\n          onMouseEnter={openTooltip}\n          onMouseLeave={closeTooltip}\n        >\n          {text}\n        </div>\n      </TooltipContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}

package/esm/Tooltip/Tooltip.module-CSt4tNaI.css

@@ -0,0 +1 @@
+.Primer_Brand__Tooltip-module__Tooltip___0Eipx{display:none}@media (forced-colors:active){.Primer_Brand__Tooltip-module__Tooltip___0Eipx{outline:var(--brand-borderWidth-thin) solid transparent}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover]{--offset:var(--base-size-8,--base-size-8);--b:1em;--h:.5em;--p:50%;--r:var(--brand-borderRadius-medium);--c:var(--brand-color-neutral-emphasisPlus);clip:auto;white-space:normal;width:max-content;font:normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);-webkit-font-smoothing:subpixel-antialiased;color:var(--brand-Tooltip-color-default);text-align:center;word-wrap:break-word;background:var(--c);border-radius:var(--r);opacity:0;border:0;max-width:250px;margin:auto;padding:.5em .75em;position:absolute;inset:auto;overflow:visible}:is(.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover]:popover-open,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover].Primer_Brand__Tooltip-module__\:popover-open___GpZlX){animation-name:Primer_Brand__Tooltip-module__tooltip-appear___hAyFD;animation-duration:.2s;animation-duration:var(--brand-animation-duration-faster,.2s);animation-timing-function:ease-in;animation-delay:0s;animation-fill-mode:forwards;display:block}.Primer_Brand__Tooltip-module__Tooltip___0Eipx:after{height:var(--offset);content:"";display:block;position:absolute;left:0;right:0}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;clip-path:polygon(0 100%, 0 0, 100% 0, 100% 100%, min(100%, var(--p) + var(--b) / 2) 100%, var(--p) calc(100% + var(--h)), max(0%, var(--p) - var(--b) / 2) 100%)}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;border-image:conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100%, var(--p) + var(--b) / 2) 0, var(--p) calc(-1 * var(--h)), max(0%, var(--p) - var(--b) / 2) 0)}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]{-o-border-image:conic-gradient(var(--c) 0 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;border-image:conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;clip-path:polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% max(0%, var(--p) - var(--b) / 2), calc(100% + var(--h)) var(--p), 100% min(100%, var(--p) + var(--b) / 2))}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;border-image:conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);clip-path:polygon(0 100%, 100% 100%, 100% 0, 0 0, 0 max(0%, var(--p) - var(--b) / 2), calc(-1 * var(--h)) var(--p), 0 min(100%, var(--p) + var(--b) / 2))}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);border-image:conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h)}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se]{--p:25%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]{--p:75%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw]:after{top:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]:after{bottom:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]:after{height:100%;width:var(--offset);content:"";display:block;position:absolute;bottom:0;left:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]:after{height:100%;width:var(--offset);content:"";margin-left:calc(var(--offset) * -1px);display:block;position:absolute;bottom:0;right:100%}@keyframes Primer_Brand__Tooltip-module__tooltip-appear___hAyFD{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tooltip-module__Tooltip___0Eipx,.Primer_Brand__Tooltip-module__Tooltip___0Eipx:before,.Primer_Brand__Tooltip-module__Tooltip___0Eipx:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx *{animation-duration:0s!important}}

package/esm/Tooltip/Tooltip.module.js

@@ -1,4 +1,4 @@
-import './Tooltip.module-5Km7qGR5.css';//#region src/Tooltip/Tooltip.module.css
+import './Tooltip.module-CSt4tNaI.css';//#region src/Tooltip/Tooltip.module.css
 var e = "Primer_Brand__Tooltip-module__Tooltip___0Eipx", t = {
 	Tooltip: e,
 	":popover-open": "Primer_Brand__Tooltip-module__:popover-open___GpZlX",

package/esm/Tooltip/Tooltip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/Tooltip/Tooltip.module.css"],"sourcesContent":[".Tooltip {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .Tooltip {\n    outline: var(--brand-borderWidth-thin) solid transparent;\n  }\n}\n\n/* Overriding the default popover styles */\n.Tooltip[popover] {\n  --offset: var(\n    --base-size-8,\n    --base-size-8\n  ); /* This is a \"magic number\". Just gives some room to make sure the tooltip stay open when mouse leaves the trigger to hover tooltip */\n  /* these vars are for the triangle, via https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/ */\n  --b: 1em; /* triangle base width */\n  --h: 0.5em; /* triangle height */\n  --p: 50%; /* center triangle position (0%:left 100%:right) */\n  --r: var(--brand-borderRadius-medium); /* border radius */\n  --c: var(--brand-color-neutral-emphasisPlus); /* bg color */\n\n  position: absolute;\n  padding: 0.5em 0.75em;\n  width: max-content;\n  margin: auto;\n  clip: auto;\n  white-space: normal;\n  font: normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);\n  -webkit-font-smoothing: subpixel-antialiased;\n  color: var(--brand-Tooltip-color-default);\n  text-align: center;\n  word-wrap: break-word;\n  background: var(--c);\n  border-radius: var(--r);\n  border: 0;\n  opacity: 0;\n  max-width: 250px;\n  inset: auto;\n  /* for scrollbar */\n  overflow: visible;\n}\n\n.Tooltip[popover]:popover-open, /* selector in chrome is :popover-open */\n.Tooltip[popover].\\:popover-open {\n  /* selector in firefox and safari is \\:popover-open */\n  display: block;\n  animation-name: tooltip-appear;\n  animation-duration: var(--brand-animation-duration-faster, 0.2s);\n  animation-fill-mode: forwards;\n  animation-timing-function: ease-in;\n  animation-delay: 0s;\n}\n\n/* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n.Tooltip::after {\n  position: absolute;\n  display: block;\n  right: 0;\n  left: 0;\n  height: var(--offset);\n  content: '';\n}\n\n/* Directional styles */\n.Tooltip[data-direction='n'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0\n    calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;\n  clip-path: polygon(\n    0 100%,\n    0 0,\n    100% 0,\n    100% 100%,\n    min(100%, var(--p) + var(--b) / 2) 100%,\n    var(--p) calc(100% + var(--h)),\n    max(0%, var(--p) - var(--b) / 2) 100%\n  );\n}\n\n.Tooltip[data-direction='s'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(\n      var(--p) - var(--b) / 2\n    ) / var(--h) 0 0 0;\n  clip-path: polygon(\n    0 0,\n    0 100%,\n    100% 100%,\n    100% 0,\n    min(100%, var(--p) + var(--b) / 2) 0,\n    var(--p) calc(-1 * var(--h)),\n    max(0%, var(--p) - var(--b) / 2) 0\n  );\n}\n\n.Tooltip[data-direction='w'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0\n    calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;\n  clip-path: polygon(\n    100% 100%,\n    0 100%,\n    0 0,\n    100% 0,\n    100% max(0%, var(--p) - var(--b) / 2),\n    calc(100% + var(--h)) var(--p),\n    100% min(100%, var(--p) + var(--b) / 2)\n  );\n}\n\n.Tooltip[data-direction='e'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r)\n    calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);\n  clip-path: polygon(\n    0 100%,\n    100% 100%,\n    100% 0,\n    0 0,\n    0 max(0%, var(--p) - var(--b) / 2),\n    calc(-1 * var(--h)) var(--p),\n    0 min(100%, var(--p) + var(--b) / 2)\n  );\n}\n\n.Tooltip[data-direction='n']::after {\n  top: 100%;\n}\n\n.Tooltip[data-direction='s']::after {\n  bottom: 100%;\n}\n\n.Tooltip[data-direction='w']::after {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: var(--offset);\n  content: '';\n  bottom: 0;\n  left: 100%;\n}\n\n.Tooltip[data-direction='e']::after {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: var(--offset);\n  content: '';\n  bottom: 0;\n  right: 100%;\n  margin-left: calc(var(--offset) * -1px);\n}\n\n@keyframes tooltip-appear {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Tooltip,\n  .Tooltip::before,\n  .Tooltip::after,\n  .Tooltip * {\n    animation-duration: 0s !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/Tooltip/Tooltip.module.css"],"sourcesContent":[".Tooltip {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .Tooltip {\n    outline: var(--brand-borderWidth-thin) solid transparent;\n  }\n}\n\n/* Overriding the default popover styles */\n.Tooltip[popover] {\n  --offset: var(\n    --base-size-8,\n    --base-size-8\n  ); /* This is a \"magic number\". Just gives some room to make sure the tooltip stay open when mouse leaves the trigger to hover tooltip */\n  /* these vars are for the triangle, via https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/ */\n  --b: 1em; /* triangle base width */\n  --h: 0.5em; /* triangle height */\n  --p: 50%; /* center triangle position (0%:left 100%:right) */\n  --r: var(--brand-borderRadius-medium); /* border radius */\n  --c: var(--brand-color-neutral-emphasisPlus); /* bg color */\n\n  position: absolute;\n  padding: 0.5em 0.75em;\n  width: max-content;\n  margin: auto;\n  clip: auto;\n  white-space: normal;\n  font: normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);\n  -webkit-font-smoothing: subpixel-antialiased;\n  color: var(--brand-Tooltip-color-default);\n  text-align: center;\n  word-wrap: break-word;\n  background: var(--c);\n  border-radius: var(--r);\n  border: 0;\n  opacity: 0;\n  max-width: 250px;\n  inset: auto;\n  /* for scrollbar */\n  overflow: visible;\n}\n\n.Tooltip[popover]:popover-open, /* selector in chrome is :popover-open */\n.Tooltip[popover].\\:popover-open {\n  /* selector in firefox and safari is \\:popover-open */\n  display: block;\n  animation-name: tooltip-appear;\n  animation-duration: var(--brand-animation-duration-faster, 0.2s);\n  animation-fill-mode: forwards;\n  animation-timing-function: ease-in;\n  animation-delay: 0s;\n}\n\n/* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n.Tooltip::after {\n  position: absolute;\n  display: block;\n  right: 0;\n  left: 0;\n  height: var(--offset);\n  content: '';\n}\n\n/* Directional styles */\n.Tooltip[data-direction='n'],\n.Tooltip[data-direction='ne'],\n.Tooltip[data-direction='nw'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0\n    calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;\n  clip-path: polygon(\n    0 100%,\n    0 0,\n    100% 0,\n    100% 100%,\n    min(100%, var(--p) + var(--b) / 2) 100%,\n    var(--p) calc(100% + var(--h)),\n    max(0%, var(--p) - var(--b) / 2) 100%\n  );\n}\n\n.Tooltip[data-direction='s'],\n.Tooltip[data-direction='se'],\n.Tooltip[data-direction='sw'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(\n      var(--p) - var(--b) / 2\n    ) / var(--h) 0 0 0;\n  clip-path: polygon(\n    0 0,\n    0 100%,\n    100% 100%,\n    100% 0,\n    min(100%, var(--p) + var(--b) / 2) 0,\n    var(--p) calc(-1 * var(--h)),\n    max(0%, var(--p) - var(--b) / 2) 0\n  );\n}\n\n.Tooltip[data-direction='w'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0\n    calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;\n  clip-path: polygon(\n    100% 100%,\n    0 100%,\n    0 0,\n    100% 0,\n    100% max(0%, var(--p) - var(--b) / 2),\n    calc(100% + var(--h)) var(--p),\n    100% min(100%, var(--p) + var(--b) / 2)\n  );\n}\n\n.Tooltip[data-direction='e'] {\n  border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r)\n    calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);\n  clip-path: polygon(\n    0 100%,\n    100% 100%,\n    100% 0,\n    0 0,\n    0 max(0%, var(--p) - var(--b) / 2),\n    calc(-1 * var(--h)) var(--p),\n    0 min(100%, var(--p) + var(--b) / 2)\n  );\n}\n\n.Tooltip[data-direction='ne'],\n.Tooltip[data-direction='se'] {\n  --p: 25%;\n}\n\n.Tooltip[data-direction='nw'],\n.Tooltip[data-direction='sw'] {\n  --p: 75%;\n}\n\n.Tooltip[data-direction='n']::after,\n.Tooltip[data-direction='ne']::after,\n.Tooltip[data-direction='nw']::after {\n  top: 100%;\n}\n\n.Tooltip[data-direction='s']::after,\n.Tooltip[data-direction='se']::after,\n.Tooltip[data-direction='sw']::after {\n  bottom: 100%;\n}\n\n.Tooltip[data-direction='w']::after {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: var(--offset);\n  content: '';\n  bottom: 0;\n  left: 100%;\n}\n\n.Tooltip[data-direction='e']::after {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: var(--offset);\n  content: '';\n  bottom: 0;\n  right: 100%;\n  margin-left: calc(var(--offset) * -1px);\n}\n\n@keyframes tooltip-appear {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Tooltip,\n  .Tooltip::before,\n  .Tooltip::after,\n  .Tooltip * {\n    animation-duration: 0s !important;\n  }\n}\n"],"mappings":""}

package/esm/forms/TextInput/TextInput.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
-import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import type { FormValidationStatus } from '../form-types';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 import type { Icon } from '@primer/octicons-react';
 type VisualType = React.ReactElement | React.ReactNode | Icon;
+export declare const TextInputSizes: readonly ["small", "medium", "large"];
+export type TextInputSize = (typeof TextInputSizes)[number];
 export type TextInputProps = {
     /**
      * Applies full width styling.
@@ -28,7 +30,7 @@ export type TextInputProps = {
     /**
      * Applies alternative sizing to the input
      */
-    size?: FormInputSizes;
+    size?: TextInputSize;
     /**
      * Applies non-interactive text to end of input.
      */

package/esm/forms/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvE,OAAO,2GAA2G,CAAA;AAElH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvD,OAAO,2GAA2G,CAAA;AAElH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,eAAO,MAAM,cAAc,uCAAwC,CAAA;AACnE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}

package/esm/forms/TextInput/TextInput.js

@@ -5,7 +5,12 @@ import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/com
 import r from "./TextInput.module.js";
 import i, { forwardRef as a, useMemo as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-var l = a(({ className: a, disabled: l, fullWidth: u = !1, invisible: d = !1, leadingText: f, leadingVisual: p, monospace: m, placeholder: h, size: g = "medium", trailingText: _, trailingVisual: v, validationStatus: y, ...b }, x) => {
+//#region src/forms/TextInput/TextInput.tsx
+var l = [
+	"small",
+	"medium",
+	"large"
+], u = a(({ className: a, disabled: l, fullWidth: u = !1, invisible: d = !1, leadingText: f, leadingVisual: p, monospace: m, placeholder: h, size: g = "medium", trailingText: _, trailingVisual: v, validationStatus: y, ...b }, x) => {
 	let S = t(), C = f && !p, w = p && !f, T = _ && !v, E = v && !_, D = `${S}-leading-text`, O = `${S}-leading-visual`, k = `${S}-trailing-visual`, A = `${S}-trailing-text`, j = o(() => [
 		{
 			condition: C,
@@ -87,8 +92,8 @@ var l = a(({ className: a, disabled: l, fullWidth: u = !1, invisible: d = !1, le
 		]
 	});
 });
-l.displayName = "TextInput";
+u.displayName = "TextInput";
 //#endregion
-export { l as TextInput };
+export { u as TextInput, l as TextInputSizes };
 
 //# sourceMappingURL=TextInput.js.map

package/esm/forms/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport const TextInputSizes = ['small', 'medium', 'large'] as const\nexport type TextInputSize = (typeof TextInputSizes)[number]\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: TextInputSize\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}

package/esm/forms/TextInput/TextInput.module-CeOwKkHk.css

@@ -0,0 +1 @@
+.Primer_Brand__TextInput-module__TextInput___d6r3B{color:var(--brand-control-color-fg-default);background-color:var(--brand-color-canvas-default);border-radius:var(--brand-borderRadius-medium);line-height:var(--brand-text-lineHeight-100);transition:var(--brand-control-animation-duration) var(--brand-control-animation-easing);border:none;transition-property:color,background-color,box-shadow;display:flex}.Primer_Brand__TextInput-module__TextInput___d6r3B::placeholder{color:var(--brand-color-text-muted);opacity:1}.Primer_Brand__TextInput-module__TextInput___d6r3B[disabled]{-webkit-text-fill-color:var(--brand-control-color-fg-disabled);color:var(--brand-control-color-fg-disabled);cursor:not-allowed;background-color:var(--brand-control-color-canvas-disabled);opacity:1}.Primer_Brand__TextInput-module__TextInput___d6r3B:focus{outline:none}.Primer_Brand__TextInput-module__TextInput-wrapper--small___stgw8{height:var(--brand-control-small-size)}.Primer_Brand__TextInput-module__TextInput--small___kSAfx{font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);padding:var(--brand-control-small-paddingBlock) var(--brand-control-small-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-wrapper--medium___MBN0V{height:var(--brand-control-medium-size)}.Primer_Brand__TextInput-module__TextInput--medium___fpyd0{font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);padding:var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput--large___S8mM0{font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);padding:var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-wrapper--large___dAIbF{height:var(--brand-control-large-size)}.Primer_Brand__TextInput-module__TextInput--fullWidth___95umM{width:100%}.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___tIAWj{border-color:var(--brand-control-color-border-disabled)}.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ{font-family:var(--brand-body-fontFamily);border:solid 1px var(--brand-control-color-border-default);border:solid var(--brand-borderWidth-thin,1px) var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-medium);transition:var(--brand-control-animation-duration) var(--brand-control-animation-easing);transition-property:border;display:inline-flex;position:relative}.Primer_Brand__TextInput-module__TextInput-wrapper--invisible___5R_bN{border-color:#0000}.Primer_Brand__TextInput-module__TextInput-wrapper--fullWidth___qZXkv{width:100%;display:flex}.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ:not(.Primer_Brand__TextInput-module__TextInput-wrapper--fullWidth___qZXkv){width:min-content}.Primer_Brand__TextInput-module__TextInput-wrapper--monospace___lZCyL{font-family:var(--brand-fontStack-monospace)}.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ:focus-within{border-color:var(--brand-control-color-focus);box-shadow:0 0 0 1px var(--brand-control-color-focus);outline:none}@media (forced-colors:active){.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ:focus-within{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-2)}}.Primer_Brand__TextInput-module__TextInput-wrapper--success___T0cdn,.Primer_Brand__TextInput-module__TextInput-wrapper--success___T0cdn.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___tIAWj{border-color:var(--brand-color-success-fg)}.Primer_Brand__TextInput-module__TextInput-wrapper--error___P_A__,.Primer_Brand__TextInput-module__TextInput-wrapper--error___P_A__.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___tIAWj{border-color:var(--brand-color-danger-fg)}.Primer_Brand__TextInput-module__TextInput--has-leading-visual--small___LJ4kp{padding-inline-start:calc(var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap))}.Primer_Brand__TextInput-module__TextInput--has-leading-visual--medium___FofyW{padding-inline-start:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap))}.Primer_Brand__TextInput-module__TextInput--has-leading-visual--large___m_yq4{padding-inline-start:calc(var(--brand-control-large-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-large-gap))}.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--small___2RNSF{padding-inline-end:calc(var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap))}.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--medium___i_tux{padding-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap))}.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--large___9LFb4{padding-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-medium-gap))}.Primer_Brand__TextInput-module__TextInput-leading-visual___pCl6H,.Primer_Brand__TextInput-module__TextInput-trailing-visual___uMm5J{width:var(--base-size-16);height:100%;color:var(--brand-color-text-default);pointer-events:none;align-items:center;display:flex;position:absolute;top:0}.Primer_Brand__TextInput-module__TextInput-leading-visual--medium___J1m0x{left:var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-trailing-visual--medium___42l_Q{right:var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-visual--small___fER_a{left:var(--brand-control-small-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-trailing-visual--small___iP2u4{right:var(--brand-control-small-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-visual--large___FfFfu{left:var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-trailing-visual--large___6qKcW{right:var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--medium___SGqdF,.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--small___AKlUK{width:var(--base-size-16);height:var(--base-size-16)}.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--large___tEaFR{width:var(--base-size-20);height:var(--base-size-20)}.Primer_Brand__TextInput-module__TextInput-leading-text___KJH7i,.Primer_Brand__TextInput-module__TextInput-trailing-text___9OMo1{color:var(--brand-color-text-muted);pointer-events:none;white-space:nowrap;align-items:center;display:flex}.Primer_Brand__TextInput-module__TextInput-leading-text--disabled___mkec2,.Primer_Brand__TextInput-module__TextInput-trailing-text--disabled___HXuFW{color:var(--brand-control-color-fg-disabled);background-color:var(--brand-control-color-canvas-disabled)}.Primer_Brand__TextInput-module__TextInput-leading-text___KJH7i{border-top-left-radius:6px;border-top-left-radius:var(--brand-borderRadius-medium,6px);border-bottom-left-radius:6px;border-bottom-left-radius:var(--brand-borderRadius-medium,6px);border-right:0}.Primer_Brand__TextInput-module__TextInput-trailing-text___9OMo1{border-top-right-radius:6px;border-top-right-radius:var(--brand-borderRadius-medium,6px);border-bottom-right-radius:6px;border-bottom-right-radius:var(--brand-borderRadius-medium,6px);border-left:0}.Primer_Brand__TextInput-module__TextInput-leading-text-inner___xYm04,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner___dLGj9{color:var(--brand-color-text-muted);display:inline-flex}.Primer_Brand__TextInput-module__TextInput-leading-text-inner--medium___yh500,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--medium___H8Wax{padding-inline:var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-text-inner--small___dPVPe,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--small___3Vxff{padding-inline:var(--brand-control-small-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-text-inner--large___LLej6,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--large___1Qudx{padding-inline:var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-text-inner___xYm04{border-right:1px solid var(--brand-color-border-default)}.Primer_Brand__TextInput-module__TextInput-trailing-text-inner___dLGj9{border-left:1px solid var(--brand-color-border-default)}.Primer_Brand__TextInput-module__TextInput--has-leading-text___yXCjP{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.Primer_Brand__TextInput-module__TextInput--has-trailing-text___bPsRQ{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.Primer_Brand__TextInput-module__TextInput-leading-text--success____KS_D,.Primer_Brand__TextInput-module__TextInput-trailing-text--success___WCi_J{border-color:var(--brand-color-success-fg)}.Primer_Brand__TextInput-module__TextInput-leading-text--error___WAcZB,.Primer_Brand__TextInput-module__TextInput-trailing-text--error____yUSw{border-color:var(--brand-color-danger-fg)}@media (prefers-reduced-motion:reduce){.Primer_Brand__TextInput-module__TextInput___d6r3B,.Primer_Brand__TextInput-module__Checkbox___NeBpg:before,.Primer_Brand__TextInput-module__Checkbox___NeBpg:after,.Primer_Brand__TextInput-module__Checkbox___NeBpg *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/forms/TextInput/TextInput.module.js

@@ -1,6 +1,8 @@
-import './TextInput.module-CrmcmO_m.css';//#region src/forms/TextInput/TextInput.module.css
+import './TextInput.module-CeOwKkHk.css';//#region src/forms/TextInput/TextInput.module.css
 var e = "Primer_Brand__TextInput-module__TextInput___d6r3B", t = "Primer_Brand__TextInput-module__Checkbox___NeBpg", n = {
 	TextInput: e,
+	"TextInput-wrapper--small": "Primer_Brand__TextInput-module__TextInput-wrapper--small___stgw8",
+	"TextInput--small": "Primer_Brand__TextInput-module__TextInput--small___kSAfx",
 	"TextInput-wrapper--medium": "Primer_Brand__TextInput-module__TextInput-wrapper--medium___MBN0V",
 	"TextInput--medium": "Primer_Brand__TextInput-module__TextInput--medium___fpyd0",
 	"TextInput--large": "Primer_Brand__TextInput-module__TextInput--large___S8mM0",
@@ -13,17 +15,22 @@ var e = "Primer_Brand__TextInput-module__TextInput___d6r3B", t = "Primer_Brand__
 	"TextInput-wrapper--monospace": "Primer_Brand__TextInput-module__TextInput-wrapper--monospace___lZCyL",
 	"TextInput-wrapper--success": "Primer_Brand__TextInput-module__TextInput-wrapper--success___T0cdn",
 	"TextInput-wrapper--error": "Primer_Brand__TextInput-module__TextInput-wrapper--error___P_A__",
+	"TextInput--has-leading-visual--small": "Primer_Brand__TextInput-module__TextInput--has-leading-visual--small___LJ4kp",
 	"TextInput--has-leading-visual--medium": "Primer_Brand__TextInput-module__TextInput--has-leading-visual--medium___FofyW",
 	"TextInput--has-leading-visual--large": "Primer_Brand__TextInput-module__TextInput--has-leading-visual--large___m_yq4",
+	"TextInput--has-trailing-visual--small": "Primer_Brand__TextInput-module__TextInput--has-trailing-visual--small___2RNSF",
 	"TextInput--has-trailing-visual--medium": "Primer_Brand__TextInput-module__TextInput--has-trailing-visual--medium___i_tux",
 	"TextInput--has-trailing-visual--large": "Primer_Brand__TextInput-module__TextInput--has-trailing-visual--large___9LFb4",
 	"TextInput-leading-visual": "Primer_Brand__TextInput-module__TextInput-leading-visual___pCl6H",
 	"TextInput-trailing-visual": "Primer_Brand__TextInput-module__TextInput-trailing-visual___uMm5J",
 	"TextInput-leading-visual--medium": "Primer_Brand__TextInput-module__TextInput-leading-visual--medium___J1m0x",
 	"TextInput-trailing-visual--medium": "Primer_Brand__TextInput-module__TextInput-trailing-visual--medium___42l_Q",
+	"TextInput-leading-visual--small": "Primer_Brand__TextInput-module__TextInput-leading-visual--small___fER_a",
+	"TextInput-trailing-visual--small": "Primer_Brand__TextInput-module__TextInput-trailing-visual--small___iP2u4",
 	"TextInput-leading-visual--large": "Primer_Brand__TextInput-module__TextInput-leading-visual--large___FfFfu",
 	"TextInput-trailing-visual--large": "Primer_Brand__TextInput-module__TextInput-trailing-visual--large___6qKcW",
 	"TextInput-leading-visual-icon--medium": "Primer_Brand__TextInput-module__TextInput-leading-visual-icon--medium___SGqdF",
+	"TextInput-leading-visual-icon--small": "Primer_Brand__TextInput-module__TextInput-leading-visual-icon--small___AKlUK",
 	"TextInput-leading-visual-icon--large": "Primer_Brand__TextInput-module__TextInput-leading-visual-icon--large___tEaFR",
 	"TextInput-leading-text": "Primer_Brand__TextInput-module__TextInput-leading-text___KJH7i",
 	"TextInput-trailing-text": "Primer_Brand__TextInput-module__TextInput-trailing-text___9OMo1",
@@ -33,6 +40,8 @@ var e = "Primer_Brand__TextInput-module__TextInput___d6r3B", t = "Primer_Brand__
 	"TextInput-trailing-text-inner": "Primer_Brand__TextInput-module__TextInput-trailing-text-inner___dLGj9",
 	"TextInput-leading-text-inner--medium": "Primer_Brand__TextInput-module__TextInput-leading-text-inner--medium___yh500",
 	"TextInput-trailing-text-inner--medium": "Primer_Brand__TextInput-module__TextInput-trailing-text-inner--medium___H8Wax",
+	"TextInput-leading-text-inner--small": "Primer_Brand__TextInput-module__TextInput-leading-text-inner--small___dPVPe",
+	"TextInput-trailing-text-inner--small": "Primer_Brand__TextInput-module__TextInput-trailing-text-inner--small___3Vxff",
 	"TextInput-leading-text-inner--large": "Primer_Brand__TextInput-module__TextInput-leading-text-inner--large___LLej6",
 	"TextInput-trailing-text-inner--large": "Primer_Brand__TextInput-module__TextInput-trailing-text-inner--large___1Qudx",
 	"TextInput--has-leading-text": "Primer_Brand__TextInput-module__TextInput--has-leading-text___yXCjP",

package/esm/forms/TextInput/TextInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.module.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.module.css"],"sourcesContent":["/*\n * Default TextInput styles\n */\n.TextInput {\n  display: flex;\n  color: var(--brand-control-color-fg-default);\n  background-color: var(--brand-color-canvas-default);\n  border: none;\n  border-radius: var(--brand-borderRadius-medium);\n  line-height: var(--brand-text-lineHeight-100);\n  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n  transition-property: color, background-color, box-shadow;\n}\n\n.TextInput::placeholder {\n  color: var(--brand-color-text-muted);\n  opacity: 1;\n}\n\n.TextInput[disabled] {\n  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n  color: var(--brand-control-color-fg-disabled);\n  cursor: not-allowed;\n  background-color: var(--brand-control-color-canvas-disabled);\n  opacity: 1;\n}\n\n.TextInput:focus {\n  outline: none;\n}\n\n/*\n * Sizes\n */\n\n.TextInput-wrapper--medium {\n  height: var(--brand-control-medium-size);\n}\n\n.TextInput--medium {\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput--large {\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-wrapper--large {\n  height: var(--brand-control-large-size);\n}\n\n/*\n * Visual states\n */\n.TextInput--fullWidth {\n  width: 100%;\n}\n\n/*\n * TextInput wrapper\n */\n\n.TextInput-wrapper--disabled {\n  border-color: var(--brand-control-color-border-disabled);\n}\n\n.TextInput-wrapper {\n  font-family: var(--brand-body-fontFamily);\n  display: inline-flex;\n  position: relative;\n  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n  transition-property: border;\n}\n\n.TextInput-wrapper--invisible {\n  border-color: transparent;\n}\n\n.TextInput-wrapper--fullWidth {\n  width: 100%;\n  display: flex;\n}\n\n.TextInput-wrapper:not(.TextInput-wrapper--fullWidth) {\n  width: min-content;\n}\n\n.TextInput-wrapper--monospace {\n  font-family: var(--brand-fontStack-monospace);\n}\n\n.TextInput-wrapper:focus-within {\n  border-color: var(--brand-control-color-focus);\n  box-shadow: 0 0 0 1px var(--brand-control-color-focus);\n  outline: none;\n}\n\n@media (forced-colors: active) {\n  .TextInput-wrapper:focus-within {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-2);\n  }\n}\n\n/*\n * Validation\n */\n\n.TextInput-wrapper--success,\n.TextInput-wrapper--success.TextInput-wrapper--disabled {\n  border-color: var(--brand-color-success-fg);\n}\n\n.TextInput-wrapper--error,\n.TextInput-wrapper--error.TextInput-wrapper--disabled {\n  border-color: var(--brand-color-danger-fg);\n}\n\n/*\n * TextInput visuals\n */\n.TextInput--has-leading-visual--medium {\n  padding-inline-start: calc(\n    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)\n  );\n}\n\n.TextInput--has-leading-visual--large {\n  padding-inline-start: calc(\n    var(--brand-control-large-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-large-gap)\n  );\n}\n\n.TextInput--has-trailing-visual--medium {\n  padding-inline-end: calc(\n    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)\n  );\n}\n\n.TextInput--has-trailing-visual--large {\n  padding-inline-end: calc(\n    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-medium-gap)\n  );\n}\n\n.TextInput-leading-visual,\n.TextInput-trailing-visual {\n  display: grid;\n  position: absolute;\n  top: 0;\n  display: flex;\n  width: var(--base-size-16);\n  height: 100%;\n  align-items: center;\n  color: var(--color-fg-muted);\n  pointer-events: none;\n  color: var(--brand-color-text-default);\n}\n\n.TextInput-leading-visual--medium {\n  left: var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput-trailing-visual--medium {\n  right: var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput-leading-visual--large {\n  left: var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-trailing-visual--large {\n  right: var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-leading-visual-icon--medium {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.TextInput-leading-visual-icon--large {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n/*\n * TextInput leading and trailing text\n */\n\n.TextInput-leading-text,\n.TextInput-trailing-text {\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.TextInput-leading-text--disabled,\n.TextInput-trailing-text--disabled {\n  color: var(--brand-control-color-fg-disabled);\n  background-color: var(--brand-control-color-canvas-disabled);\n}\n\n.TextInput-leading-text {\n  border-top-left-radius: var(--brand-borderRadius-medium, 6px);\n  border-bottom-left-radius: var(--brand-borderRadius-medium, 6px);\n  border-right: 0;\n}\n\n.TextInput-trailing-text {\n  border-top-right-radius: var(--brand-borderRadius-medium, 6px);\n  border-bottom-right-radius: var(--brand-borderRadius-medium, 6px);\n  border-left: 0;\n}\n\n.TextInput-leading-text-inner,\n.TextInput-trailing-text-inner {\n  display: inline-flex;\n  color: var(--brand-color-text-muted);\n}\n\n.TextInput-leading-text-inner--medium,\n.TextInput-trailing-text-inner--medium {\n  padding-inline: var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput-leading-text-inner--large,\n.TextInput-trailing-text-inner--large {\n  padding-inline: var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-leading-text-inner {\n  border-right: 1px solid var(--brand-color-border-default);\n}\n\n.TextInput-trailing-text-inner {\n  border-left: 1px solid var(--brand-color-border-default);\n}\n\n.TextInput--has-leading-text {\n  border-left: 0;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.TextInput--has-trailing-text {\n  border-right: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.TextInput-leading-text--success,\n.TextInput-trailing-text--success {\n  border-color: var(--brand-color-success-fg);\n}\n\n.TextInput-leading-text--error,\n.TextInput-trailing-text--error {\n  border-color: var(--brand-color-danger-fg);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .TextInput,\n  .Checkbox::before,\n  .Checkbox::after,\n  .Checkbox * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TextInput.module.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.module.css"],"sourcesContent":["/*\n * Default TextInput styles\n */\n.TextInput {\n  display: flex;\n  color: var(--brand-control-color-fg-default);\n  background-color: var(--brand-color-canvas-default);\n  border: none;\n  border-radius: var(--brand-borderRadius-medium);\n  line-height: var(--brand-text-lineHeight-100);\n  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n  transition-property: color, background-color, box-shadow;\n}\n\n.TextInput::placeholder {\n  color: var(--brand-color-text-muted);\n  opacity: 1;\n}\n\n.TextInput[disabled] {\n  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n  color: var(--brand-control-color-fg-disabled);\n  cursor: not-allowed;\n  background-color: var(--brand-control-color-canvas-disabled);\n  opacity: 1;\n}\n\n.TextInput:focus {\n  outline: none;\n}\n\n/*\n * Sizes\n */\n\n.TextInput-wrapper--small {\n  height: var(--brand-control-small-size);\n}\n\n.TextInput--small {\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  padding: var(--brand-control-small-paddingBlock) var(--brand-control-small-paddingInline-condensed);\n}\n\n.TextInput-wrapper--medium {\n  height: var(--brand-control-medium-size);\n}\n\n.TextInput--medium {\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput--large {\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-wrapper--large {\n  height: var(--brand-control-large-size);\n}\n\n/*\n * Visual states\n */\n.TextInput--fullWidth {\n  width: 100%;\n}\n\n/*\n * TextInput wrapper\n */\n\n.TextInput-wrapper--disabled {\n  border-color: var(--brand-control-color-border-disabled);\n}\n\n.TextInput-wrapper {\n  font-family: var(--brand-body-fontFamily);\n  display: inline-flex;\n  position: relative;\n  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n  transition-property: border;\n}\n\n.TextInput-wrapper--invisible {\n  border-color: transparent;\n}\n\n.TextInput-wrapper--fullWidth {\n  width: 100%;\n  display: flex;\n}\n\n.TextInput-wrapper:not(.TextInput-wrapper--fullWidth) {\n  width: min-content;\n}\n\n.TextInput-wrapper--monospace {\n  font-family: var(--brand-fontStack-monospace);\n}\n\n.TextInput-wrapper:focus-within {\n  border-color: var(--brand-control-color-focus);\n  box-shadow: 0 0 0 1px var(--brand-control-color-focus);\n  outline: none;\n}\n\n@media (forced-colors: active) {\n  .TextInput-wrapper:focus-within {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-2);\n  }\n}\n\n/*\n * Validation\n */\n\n.TextInput-wrapper--success,\n.TextInput-wrapper--success.TextInput-wrapper--disabled {\n  border-color: var(--brand-color-success-fg);\n}\n\n.TextInput-wrapper--error,\n.TextInput-wrapper--error.TextInput-wrapper--disabled {\n  border-color: var(--brand-color-danger-fg);\n}\n\n/*\n * TextInput visuals\n */\n.TextInput--has-leading-visual--small {\n  padding-inline-start: calc(\n    var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap)\n  );\n}\n\n.TextInput--has-leading-visual--medium {\n  padding-inline-start: calc(\n    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)\n  );\n}\n\n.TextInput--has-leading-visual--large {\n  padding-inline-start: calc(\n    var(--brand-control-large-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-large-gap)\n  );\n}\n\n.TextInput--has-trailing-visual--small {\n  padding-inline-end: calc(\n    var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap)\n  );\n}\n\n.TextInput--has-trailing-visual--medium {\n  padding-inline-end: calc(\n    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)\n  );\n}\n\n.TextInput--has-trailing-visual--large {\n  padding-inline-end: calc(\n    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-medium-gap)\n  );\n}\n\n.TextInput-leading-visual,\n.TextInput-trailing-visual {\n  display: grid;\n  position: absolute;\n  top: 0;\n  display: flex;\n  width: var(--base-size-16);\n  height: 100%;\n  align-items: center;\n  color: var(--color-fg-muted);\n  pointer-events: none;\n  color: var(--brand-color-text-default);\n}\n\n.TextInput-leading-visual--medium {\n  left: var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput-trailing-visual--medium {\n  right: var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput-leading-visual--small {\n  left: var(--brand-control-small-paddingInline-condensed);\n}\n\n.TextInput-trailing-visual--small {\n  right: var(--brand-control-small-paddingInline-condensed);\n}\n\n.TextInput-leading-visual--large {\n  left: var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-trailing-visual--large {\n  right: var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-leading-visual-icon--medium {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.TextInput-leading-visual-icon--small {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.TextInput-leading-visual-icon--large {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n/*\n * TextInput leading and trailing text\n */\n\n.TextInput-leading-text,\n.TextInput-trailing-text {\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.TextInput-leading-text--disabled,\n.TextInput-trailing-text--disabled {\n  color: var(--brand-control-color-fg-disabled);\n  background-color: var(--brand-control-color-canvas-disabled);\n}\n\n.TextInput-leading-text {\n  border-top-left-radius: var(--brand-borderRadius-medium, 6px);\n  border-bottom-left-radius: var(--brand-borderRadius-medium, 6px);\n  border-right: 0;\n}\n\n.TextInput-trailing-text {\n  border-top-right-radius: var(--brand-borderRadius-medium, 6px);\n  border-bottom-right-radius: var(--brand-borderRadius-medium, 6px);\n  border-left: 0;\n}\n\n.TextInput-leading-text-inner,\n.TextInput-trailing-text-inner {\n  display: inline-flex;\n  color: var(--brand-color-text-muted);\n}\n\n.TextInput-leading-text-inner--medium,\n.TextInput-trailing-text-inner--medium {\n  padding-inline: var(--brand-control-medium-paddingInline-condensed);\n}\n\n.TextInput-leading-text-inner--small,\n.TextInput-trailing-text-inner--small {\n  padding-inline: var(--brand-control-small-paddingInline-condensed);\n}\n\n.TextInput-leading-text-inner--large,\n.TextInput-trailing-text-inner--large {\n  padding-inline: var(--brand-control-large-paddingInline-condensed);\n}\n\n.TextInput-leading-text-inner {\n  border-right: 1px solid var(--brand-color-border-default);\n}\n\n.TextInput-trailing-text-inner {\n  border-left: 1px solid var(--brand-color-border-default);\n}\n\n.TextInput--has-leading-text {\n  border-left: 0;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.TextInput--has-trailing-text {\n  border-right: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.TextInput-leading-text--success,\n.TextInput-trailing-text--success {\n  border-color: var(--brand-color-success-fg);\n}\n\n.TextInput-leading-text--error,\n.TextInput-trailing-text--error {\n  border-color: var(--brand-color-danger-fg);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .TextInput,\n  .Checkbox::before,\n  .Checkbox::after,\n  .Checkbox * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/index.d.ts

@@ -4,6 +4,7 @@ export * from './Text';
 export * from './Heading';
 export * from './ThemeProvider';
 export * from './Button';
+export * from './IconButton';
 export * from './ButtonGroup';
 export * from './river';
 export * from './MediaPlaylist';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}