@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/contextualhelp.js

@@ -2,39 +2,49 @@ import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedC
 import { t as s2IntlStrings } from "./intl.js";
 import { t as ActionButton } from "./ActionButton.js";
 import { r as createIcon } from "./spectrum-icon.js";
-import { c as TextContext, f as HeadingContext, i as FooterContext, n as ContentContext } from "./text.js";
-import { t as InfoCircleIcon } from "./InfoCircleIcon.js";
+import { c as TextContext$1, i as FooterContext, n as ContentContext, u as HeadingContext } from "./text.js";
 import { Popover as Popover$1, PopoverTrigger as PopoverTrigger$1 } from "../popover/index.js";
-import { createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, spread, style, template } from "solid-js/web";
-import { createContext, createUniqueId, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
-import { createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
-import { MenuTriggerContext } from "@proyecto-viviana/solidaria-components";
+import { t as InfoCircleIcon } from "./InfoCircleIcon.js";
+import { createComponent, effect, getNextElement, insert, mergeProps, readShallow, runHydrationEvents, spread, style, template } from "@solidjs/web";
+import { createContext, createUniqueId, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { MenuTriggerContext, PopoverTriggerContext } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, filterDOMProps as filterDOMProps$1, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 //#region src/icon/s2wf-icons/HelpCircleIcon.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 20 20"><path d=m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z fill="var(--iconPrimary, #222)"></path><path d=m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z fill="var(--iconPrimary, #222)"></path><path d=m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z fill="var(--iconPrimary, #222)">`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"d="M9.988 15.527c-.23.008-.455-.074-.627-.229-.33-.365-.33-.92 0-1.286.17-.158.395-.243.627-.235.236-.01.466.08.633.248.162.168.25.394.242.627.012.235-.07.466-.228.64-.174.165-.408.25-.647.235"></path><path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"d="M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75"></path><path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"d="M9.992 12.706c-.414 0-.75-.336-.75-.75 0-1.022.07-1.714 1.04-2.683.784-.786.917-1.101.917-1.65 0-.21-.066-1.259-1.374-1.259-1.365 0-1.51 1.156-1.526 1.388-.027.413-.393.72-.797.7-.414-.028-.727-.385-.7-.798.064-.965.777-2.79 3.023-2.79 1.887 0 2.874 1.388 2.874 2.758 0 1.144-.457 1.81-1.357 2.712-.576.576-.6.811-.6 1.622 0 .414-.336.75-.75.75">`);
 function HelpCircleIconSvg(props) {
-	const { class: className, ...rest } = props;
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$1);
-		spread(_el$, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$;
-	})();
+	const [local, rest] = splitProps(props, ["class"]);
+	var _el$ = getNextElement(_tmpl$$1);
+	spread(_el$, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "20",
+			height: "20",
+			viewBox: "0 0 20 20"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$;
 }
 const HelpCircleIcon = createIcon(HelpCircleIconSvg);
 //#endregion
 //#region src/contextualhelp/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class=" NOBje7c151 ZOBje7c151 Th151 Qh151 Sh151 Rh151 _oa151 Fb151"><div class=" sd151 _ta151 _ub151 K40ub4c151 _oa151 _Le151 _Na151 Pa151 od151 nd151 kd151 jd151 Th151 Qh151 Sh151 Rh151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151">`);
+var _tmpl$ = /* @__PURE__ */ template(`<div class=" NOBje7c17 ZOBje7c17 Th17 Qh17 Sh17 Rh17 _oa17 Fb17"><div class=" sd17 _ta17 _ub17 K40ub4c17 _oa17 _Le17 _Na17 Pa17 od17 nd17 kd17 jd17 Th17 Qh17 Sh17 Rh17 uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17">`);
 const ContextualHelpContext = createContext(null);
 const contextualHelpInnerStyle = { margin: "-24px" };
-const contextualHelpHeading = " uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151 Jy151 Gv151 Iy151 Hy151";
-const contextualHelpText = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151";
-const contextualHelpFooter = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151 JC151";
+const contextualHelpHeading = " uiWD3ad17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-e17 vx17 xe17 _xa17 xX0cczbd17 _xX0cczba17 xfe17 _xfa17 xfX0cczbd17 _xfX0cczba17 _Fd17 _FnuYUweb17 pmiKvLd17 Jy17 Gv17 Iy17 Hy17";
+const contextualHelpText = " uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-b17 vx17 xb17 _xa17 _Fb17 _FnuYUwec17 pmiKvLd17";
+const contextualHelpFooter = " uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-b17 vx17 xb17 _xa17 _Fb17 _FnuYUwec17 pmiKvLd17 JC17";
 /**
 * A popover with contextual help sizing for unavailable menu item affordances.
-*/
-function ContextualHelpPopover(props) {
+*/ function ContextualHelpPopover(props) {
 	const [local, popoverProps] = splitProps(props, ["children", "class"]);
 	const menuTriggerContext = useContext(MenuTriggerContext);
+	if (useContext(PopoverTriggerContext)?.trigger !== "SubmenuTrigger") return null;
 	const titleId = createUniqueId();
 	const menuTriggerMenuProps = () => menuTriggerContext?.menuProps;
 	const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;
@@ -57,7 +67,7 @@ function ContextualHelpPopover(props) {
 		get id() {
 			return popoverId();
 		},
-		get ["aria-labelledby"]() {
+		get "aria-labelledby"() {
 			return ariaLabelledBy();
 		},
 		hideArrow: true,
@@ -72,21 +82,22 @@ function ContextualHelpPopover(props) {
 			return popoverProps.crossOffset ?? -8;
 		},
 		padding: "none",
-		get ["class"]() {
+		get "class"() {
 			return local.class;
 		},
 		get children() {
-			var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild;
-			insert(_el$2, createComponent(TextContext.Provider, {
+			var _el$ = getNextElement(_tmpl$);
+			var _el$2 = _el$.firstChild;
+			insert(_el$2, createComponent(TextContext$1, {
 				value: textContext,
 				get children() {
-					return createComponent(ContentContext.Provider, {
+					return createComponent(ContentContext, {
 						value: contentContext,
 						get children() {
-							return createComponent(FooterContext.Provider, {
+							return createComponent(FooterContext, {
 								value: footerContext,
 								get children() {
-									return createComponent(HeadingContext.Provider, {
+									return createComponent(HeadingContext, {
 										value: headingContext,
 										get children() {
 											return local.children;
@@ -98,14 +109,16 @@ function ContextualHelpPopover(props) {
 					});
 				}
 			}));
-			effect((_$p) => style(_el$2, contextualHelpInnerStyle, _$p));
+			effect(() => readShallow(contextualHelpInnerStyle), (_v$, _$p) => {
+				style(_el$2, _v$, _$p);
+			});
 			return _el$;
 		}
 	}));
 }
 function ContextualHelp(props) {
 	const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);
-	const merged = mergeProps$1(contextProps ?? {}, props);
+	const merged = mergeProps$2(contextProps ?? {}, props);
 	const [local, popoverProps] = splitProps(merged, [
 		"children",
 		"content",
@@ -125,7 +138,9 @@ function ContextualHelp(props) {
 		"aria-label",
 		"aria-labelledby",
 		"aria-describedby",
-		"aria-details"
+		"aria-details",
+		"placement",
+		"shouldFlip"
 	]);
 	const titleId = createUniqueId();
 	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
@@ -137,7 +152,7 @@ function ContextualHelp(props) {
 	};
 	const icon = () => variant() === "info" ? createComponent(InfoCircleIcon, {}) : createComponent(HelpCircleIcon, {});
 	const content = () => local.content ?? local.children;
-	const triggerDomProps = () => filterDOMProps(merged, { labelable: true });
+	const triggerDomProps = () => filterDOMProps$1(merged, { labelable: true });
 	const triggerClassName = () => [
 		contextProps?.UNSAFE_className,
 		contextProps?.class,
@@ -161,6 +176,8 @@ function ContextualHelp(props) {
 	} } };
 	const contentContext = { styles: contextualHelpText };
 	const footerContext = { styles: contextualHelpFooter };
+	const overlayPlacement = () => local.placement ?? "bottom start";
+	const overlayShouldFlip = () => local.shouldFlip ?? true;
 	return createComponent(PopoverTrigger$1, mergeProps({
 		get defaultOpen() {
 			return local.defaultOpen;
@@ -176,19 +193,18 @@ function ContextualHelp(props) {
 			get id() {
 				return local.id;
 			},
-			get ["aria-label"]() {
+			get "aria-label"() {
 				return triggerLabel();
 			},
-			get ["aria-labelledby"]() {
+			get "aria-labelledby"() {
 				return local["aria-labelledby"];
 			},
-			get ["aria-describedby"]() {
+			get "aria-describedby"() {
 				return local["aria-describedby"];
 			},
-			get ["aria-details"]() {
+			get "aria-details"() {
 				return local["aria-details"];
 			},
-			"aria-haspopup": "dialog",
 			ref: (element) => {
 				triggerRef(element);
 			},
@@ -212,28 +228,29 @@ function ContextualHelp(props) {
 			"aria-labelledby": titleId,
 			hideArrow: true,
 			get placement() {
-				return popoverProps.placement ?? "bottom start";
+				return overlayPlacement();
 			},
 			get containerPadding() {
 				return popoverProps.containerPadding ?? 8;
 			},
 			offset: 8,
 			get shouldFlip() {
-				return popoverProps.shouldFlip ?? true;
+				return overlayShouldFlip();
 			},
 			padding: "none",
 			get children() {
-				var _el$3 = getNextElement(_tmpl$), _el$4 = _el$3.firstChild;
-				insert(_el$4, createComponent(TextContext.Provider, {
+				var _el$3 = getNextElement(_tmpl$);
+				var _el$4 = _el$3.firstChild;
+				insert(_el$4, createComponent(TextContext$1, {
 					value: textContext,
 					get children() {
-						return createComponent(ContentContext.Provider, {
+						return createComponent(ContentContext, {
 							value: contentContext,
 							get children() {
-								return createComponent(FooterContext.Provider, {
+								return createComponent(FooterContext, {
 									value: footerContext,
 									get children() {
-										return createComponent(HeadingContext.Provider, {
+										return createComponent(HeadingContext, {
 											value: headingContext,
 											get children() {
 												return content();
@@ -245,7 +262,9 @@ function ContextualHelp(props) {
 						});
 					}
 				}));
-				effect((_$p) => style(_el$4, contextualHelpInnerStyle, _$p));
+				effect(() => readShallow(contextualHelpInnerStyle), (_v$, _$p) => {
+					style(_el$4, _v$, _$p);
+				});
 				return _el$3;
 			}
 		}))];

package/dist/_chunk/contextualhelp.js.map

@@ -1 +1 @@
-{"version":3,"file":"contextualhelp.js","names":["JSX","createIcon","HelpCircleIconSvg","props","SvgSVGAttributes","SVGSVGElement","Element","class","className","rest","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$runHydrationEvents","HelpCircleIconProps","HelpCircleIcon"],"sources":["../../src/icon/s2wf-icons/HelpCircleIcon.tsx","../../src/contextualhelp/index.tsx"],"sourcesContent":["/*\n * Auto-generated from vendored React Spectrum S2 icon sources.\n * Do not edit by hand.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createIcon } from \"../spectrum-icon\";\n\nfunction HelpCircleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={className}\n    >\n      <path\n        d=\"m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n    </svg>\n  );\n}\n\nexport type HelpCircleIconProps = JSX.SvgSVGAttributes<SVGSVGElement>;\nexport const HelpCircleIcon = createIcon(HelpCircleIconSvg);\nexport default HelpCircleIcon;\n","import {\n  type JSX,\n  createContext,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { MenuTriggerContext } from \"@proyecto-viviana/solidaria-components\";\nimport { createStringFormatter, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { Popover, type PopoverProps, type PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { ActionButton, type ActionButtonSize } from \"../button/ActionButton\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, FooterContext, HeadingContext, TextContext } from \"../text\";\nimport { HelpCircleIcon } from \"../icon/s2wf-icons/HelpCircleIcon\";\nimport { InfoCircleIcon } from \"../icon/s2wf-icons/InfoCircleIcon\";\nimport { s2IntlStrings, type S2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ContextualHelpVariant = \"help\" | \"info\";\nexport type ContextualHelpSize = Extract<ActionButtonSize, \"XS\" | \"S\">;\n\nexport interface ContextualHelpStyleProps {\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n}\n\nexport interface ContextualHelpProps extends Omit<\n  PopoverProps,\n  | \"children\"\n  | \"class\"\n  | \"defaultOpen\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"padding\"\n  | \"hideArrow\"\n  | \"size\"\n  | \"slot\"\n  | \"trigger\"\n> {\n  /** Contextual help popover content. */\n  children?: JSX.Element;\n  /** Backward-compatible content alias. Prefer children for S2 parity. */\n  content?: JSX.Element;\n  /** Accessible label for the icon trigger button. */\n  triggerLabel?: string;\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n  /** Size of the trigger ActionButton. @default 'XS' */\n  size?: ContextualHelpSize;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether the overlay is open (controlled). */\n  isOpen?: boolean;\n  /** Handler called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Spectrum-defined generated classes for the trigger. */\n  styles?: StyleString;\n  /** Additional CSS class name for the trigger. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles for the trigger. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Id of the element that provides detailed information. */\n  \"aria-details\"?: string;\n  /** Slotted context key. */\n  slot?: string | null;\n  /** Ref for the icon trigger button. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport interface ContextualHelpPopoverProps extends Omit<\n  PopoverProps,\n  \"children\" | \"class\" | \"padding\" | \"hideArrow\" | \"size\"\n> {\n  /** Contextual help popover content. */\n  children: JSX.Element;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport const ContextualHelpContext = createContext<SpectrumContextValue<ContextualHelpProps>>(null);\n\nconst contextualHelpFrame = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: \"border-box\",\n  // Upstream `wrappingDiv` (ContextualHelp.tsx) sets `height: 'full'` so the\n  // frame fills the popover surface; the port had dropped it (a self-inflicted\n  // divergence D1 catches on the frame's computed height).\n  height: \"full\",\n});\n\nconst contextualHelpInner = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  maxHeight: \"inherit\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  overflow: \"auto\",\n  borderRadius: \"none\",\n  padding: 24,\n  // Upstream's inner is `mergeStyles(dialogInner, {borderRadius:'none', margin,\n  // padding:24})`; `dialogInner` (Dialog.tsx) carries only `fontFamily: 'sans'`\n  // — NOT a `font: body-sm` shorthand and NO explicit `color`. The body copy's\n  // `body-sm` font + neutral color are delegated to the Content/Text/Footer\n  // contexts (and the inherited theme neutral), exactly as upstream. The port's\n  // `font:\"body-sm\"`+`color:\"neutral\"` on the inner div were self-inflicted\n  // (D1 catches the differing computed font/color on the inner element).\n  fontFamily: \"sans\",\n});\n\nconst contextualHelpInnerStyle: JSX.CSSProperties = {\n  // React S2 uses calc(self(paddingTop) * -1); the local style macro does not emit\n  // negative margin classes for this component, so keep the computed margin explicit.\n  margin: \"-24px\",\n};\n\nconst contextualHelpHeading = style({\n  font: \"heading-xs\",\n  margin: 0,\n  marginBottom: 8,\n});\n\nconst contextualHelpText = style({\n  font: \"body-sm\",\n});\n\nconst contextualHelpFooter = style({\n  font: \"body-sm\",\n  marginTop: 16,\n});\n\n/**\n * A popover with contextual help sizing for unavailable menu item affordances.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {\n  const [local, popoverProps] = splitProps(props, [\"children\", \"class\"]);\n  const menuTriggerContext = useContext(MenuTriggerContext);\n  const titleId = createUniqueId();\n  const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;\n  const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;\n  const ariaLabelledBy = () =>\n    popoverProps[\"aria-labelledby\"] ?? (popoverProps[\"aria-label\"] ? undefined : titleId);\n  // Upstream `HeadingContext` (ContextualHelp.tsx): the DEFAULT slot carries\n  // styles ONLY — no id, no level — so a headless `<Heading>` (no slot) renders\n  // at the RAC default level (h3) and does NOT name the dialog (combobox/picker\n  // get the name from the field label). Only the explicit `title` slot (the\n  // unavailable-menu-item case) mints the id + level 2 that names the dialog.\n  // The port had put `{id, level:2}` on the default slot too — a self-inflicted\n  // divergence (it named the dialog and forced h2 in canonical default usage).\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n\n  return (\n    <Popover\n      {...popoverProps}\n      id={popoverId()}\n      aria-labelledby={ariaLabelledBy()}\n      hideArrow\n      trigger=\"SubmenuTrigger\"\n      placement={popoverProps.placement ?? \"end top\"}\n      offset={popoverProps.offset ?? -2}\n      crossOffset={popoverProps.crossOffset ?? -8}\n      padding=\"none\"\n      class={local.class}\n    >\n      <div class={contextualHelpFrame}>\n        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n          <TextContext.Provider value={textContext}>\n            <ContentContext.Provider value={contentContext}>\n              <FooterContext.Provider value={footerContext}>\n                <HeadingContext.Provider value={headingContext}>\n                  {local.children}\n                </HeadingContext.Provider>\n              </FooterContext.Provider>\n            </ContentContext.Provider>\n          </TextContext.Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport function ContextualHelp(props: ContextualHelpProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ContextualHelpProps;\n  const [local, popoverProps] = splitProps(merged, [\n    \"children\",\n    \"content\",\n    \"triggerLabel\",\n    \"variant\",\n    \"size\",\n    \"defaultOpen\",\n    \"isOpen\",\n    \"onOpenChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const titleId = createUniqueId();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const variant = () => local.variant ?? \"help\";\n  const variantLabel = () =>\n    stringFormatter().format(`contextualhelp.${variant()}` as keyof S2IntlStrings);\n  const triggerLabel = () => {\n    const explicitLabel = local.triggerLabel ?? local[\"aria-label\"];\n    return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();\n  };\n  const icon = () => (variant() === \"info\" ? <InfoCircleIcon /> : <HelpCircleIcon />);\n  const content = () => local.content ?? local.children;\n  const triggerDomProps = () =>\n    filterDOMProps(merged as Record<string, unknown>, { labelable: true });\n  const triggerClassName = () =>\n    [contextProps?.UNSAFE_className, contextProps?.class, props.UNSAFE_className, props.class]\n      .filter(Boolean)\n      .join(\" \");\n  const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const triggerUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const triggerRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n  // Upstream default heading slot = styles only (no id/level); only the explicit\n  // `title` slot names the dialog. See ContextualHelpPopover above.\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n  const popoverTriggerProps: Partial<PopoverTriggerProps> = {\n    get defaultOpen() {\n      return local.defaultOpen;\n    },\n    get isOpen() {\n      return local.isOpen;\n    },\n    get onOpenChange() {\n      return local.onOpenChange;\n    },\n  };\n\n  return (\n    <PopoverTrigger {...popoverTriggerProps}>\n      <ActionButton\n        {...triggerDomProps()}\n        id={local.id}\n        aria-label={triggerLabel()}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        aria-describedby={local[\"aria-describedby\"]}\n        aria-details={local[\"aria-details\"]}\n        aria-haspopup=\"dialog\"\n        ref={(element: HTMLButtonElement) => {\n          triggerRef(element);\n        }}\n        size={local.size ?? \"XS\"}\n        isQuiet\n        styles={triggerStyles()}\n        UNSAFE_className={triggerClassName()}\n        UNSAFE_style={triggerUnsafeStyle()}\n      >\n        {icon()}\n      </ActionButton>\n      <Popover\n        {...popoverProps}\n        aria-labelledby={titleId}\n        hideArrow\n        placement={popoverProps.placement ?? \"bottom start\"}\n        containerPadding={popoverProps.containerPadding ?? 8}\n        offset={8}\n        shouldFlip={popoverProps.shouldFlip ?? true}\n        padding=\"none\"\n      >\n        <div class={contextualHelpFrame}>\n          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n            <TextContext.Provider value={textContext}>\n              <ContentContext.Provider value={contentContext}>\n                <FooterContext.Provider value={footerContext}>\n                  <HeadingContext.Provider value={headingContext}>\n                    {content()}\n                  </HeadingContext.Provider>\n                </FooterContext.Provider>\n              </ContentContext.Provider>\n            </TextContext.Provider>\n          </div>\n        </div>\n      </Popover>\n    </PopoverTrigger>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"contextualhelp.js","names":["xmlns=\"http://www.w3.org/2000/svg\"","width=\"20\"","height=\"20\"","viewBox=\"0 0 20 20\"","<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={local.class}\n    >\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M9.988 15.527c-.23.008-.455-.074-.627-.229-.33-.365-.33-.92 0-1.286.17-.158.395-.243.627-.235.236-.01.466.08.633.248.162.168.25.394.242.627.012.235-.07.466-.228.64-.174.165-.408.25-.647.235\"\n      />\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75\"\n      />\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M9.992 12.706c-.414 0-.75-.336-.75-.75 0-1.022.07-1.714 1.04-2.683.784-.786.917-1.101.917-1.65 0-.21-.066-1.259-1.374-1.259-1.365 0-1.51 1.156-1.526 1.388-.027.413-.393.72-.797.7-.414-.028-.727-.385-.7-.798.064-.965.777-2.79 3.023-2.79 1.887 0 2.874 1.388 2.874 2.758 0 1.144-.457 1.81-1.357 2.712-.576.576-.6.811-.6 1.622 0 .414-.336.75-.75.75\"\n      />\n    </svg>"],"sources":["../../src/icon/s2wf-icons/HelpCircleIcon.tsx","../../src/contextualhelp/index.tsx"],"sourcesContent":["/*\n * Auto-generated from the pinned @react-spectrum/s2 icon inventory.\n * Do not edit by hand.\n */\n// Generator input: @react-spectrum/s2@1.7.0/icons/HelpCircle.mjs\n// Generator input: @react-spectrum/s2@1.7.0/icons/HelpCircle.cjs\n\nimport type { JSX } from \"@solidjs/web\";\nimport { createIcon } from \"../spectrum-icon\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nfunction HelpCircleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={local.class}\n    >\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M9.988 15.527c-.23.008-.455-.074-.627-.229-.33-.365-.33-.92 0-1.286.17-.158.395-.243.627-.235.236-.01.466.08.633.248.162.168.25.394.242.627.012.235-.07.466-.228.64-.174.165-.408.25-.647.235\"\n      />\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75\"\n      />\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M9.992 12.706c-.414 0-.75-.336-.75-.75 0-1.022.07-1.714 1.04-2.683.784-.786.917-1.101.917-1.65 0-.21-.066-1.259-1.374-1.259-1.365 0-1.51 1.156-1.526 1.388-.027.413-.393.72-.797.7-.414-.028-.727-.385-.7-.798.064-.965.777-2.79 3.023-2.79 1.887 0 2.874 1.388 2.874 2.758 0 1.144-.457 1.81-1.357 2.712-.576.576-.6.811-.6 1.622 0 .414-.336.75-.75.75\"\n      />\n    </svg>\n  );\n}\n\nexport type HelpCircleIconProps = JSX.SvgSVGAttributes<SVGSVGElement>;\nexport const HelpCircleIcon = createIcon(HelpCircleIconSvg);\nexport default HelpCircleIcon;\n","// Port of packages/@react-spectrum/s2/src/ContextualHelp.tsx.\nimport { createContext, createUniqueId, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { MenuTriggerContext, PopoverTriggerContext } from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { Popover, type PopoverProps, type PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { ActionButton, type ActionButtonSize } from \"../button/ActionButton\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, FooterContext, HeadingContext, TextContext } from \"../text\";\nimport { HelpCircleIcon } from \"../icon/s2wf-icons/HelpCircleIcon\";\nimport { InfoCircleIcon } from \"../icon/s2wf-icons/InfoCircleIcon\";\nimport { s2IntlStrings, type S2IntlStrings } from \"../intl\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ContextualHelpVariant = \"help\" | \"info\";\nexport type ContextualHelpSize = Extract<ActionButtonSize, \"XS\" | \"S\">;\n\nexport interface ContextualHelpStyleProps {\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n}\n\nexport interface ContextualHelpProps extends Omit<\n  PopoverProps,\n  | \"children\"\n  | \"class\"\n  | \"defaultOpen\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"padding\"\n  | \"hideArrow\"\n  | \"size\"\n  | \"slot\"\n  | \"trigger\"\n> {\n  /** Contextual help popover content. */\n  children?: JSX.Element;\n  /** Backward-compatible content alias. Prefer children for S2 parity. */\n  content?: JSX.Element;\n  /** Accessible label for the icon trigger button. */\n  triggerLabel?: string;\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n  /** Size of the trigger ActionButton. @default 'XS' */\n  size?: ContextualHelpSize;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether the overlay is open (controlled). */\n  isOpen?: boolean;\n  /** Handler called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Spectrum-defined generated classes for the trigger. */\n  styles?: StyleString;\n  /** Additional CSS class name for the trigger. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles for the trigger. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Id of the element that provides detailed information. */\n  \"aria-details\"?: string;\n  /** Slotted context key. */\n  slot?: string | null;\n  /** Ref for the icon trigger button. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport interface ContextualHelpPopoverProps extends Omit<\n  PopoverProps,\n  \"children\" | \"class\" | \"padding\" | \"hideArrow\" | \"size\"\n> {\n  /** Contextual help popover content. */\n  children: JSX.Element;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport const ContextualHelpContext = createContext<SpectrumContextValue<ContextualHelpProps>>(null);\n\nconst contextualHelpFrame = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: \"border-box\",\n  // Upstream `wrappingDiv` (ContextualHelp.tsx) sets `height: 'full'` so the\n  // frame fills the popover surface; the port had dropped it (a self-inflicted\n  // divergence D1 catches on the frame's computed height).\n  height: \"full\",\n});\n\nconst contextualHelpInner = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  maxHeight: \"inherit\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  overflow: \"auto\",\n  borderRadius: \"none\",\n  padding: 24,\n  // Upstream's inner is `mergeStyles(dialogInner, {borderRadius:'none', margin,\n  // padding:24})`; `dialogInner` (Dialog.tsx) carries only `fontFamily: 'sans'`\n  // — NOT a `font: body-sm` shorthand and NO explicit `color`. The body copy's\n  // `body-sm` font + neutral color are delegated to the Content/Text/Footer\n  // contexts (and the inherited theme neutral), exactly as upstream. The port's\n  // `font:\"body-sm\"`+`color:\"neutral\"` on the inner div were self-inflicted\n  // (D1 catches the differing computed font/color on the inner element).\n  fontFamily: \"sans\",\n});\n\nconst contextualHelpInnerStyle: JSX.CSSProperties = {\n  // React S2 uses calc(self(paddingTop) * -1); the local style macro does not emit\n  // negative margin classes for this component, so keep the computed margin explicit.\n  margin: \"-24px\",\n};\n\nconst contextualHelpHeading = style({\n  font: \"heading-xs\",\n  margin: 0,\n  marginBottom: 8,\n});\n\nconst contextualHelpText = style({\n  font: \"body-sm\",\n});\n\nconst contextualHelpFooter = style({\n  font: \"body-sm\",\n  marginTop: 16,\n});\n\n/**\n * A popover with contextual help sizing for unavailable menu item affordances.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {\n  const [local, popoverProps] = splitProps(props, [\"children\", \"class\"]);\n  const menuTriggerContext = useContext(MenuTriggerContext);\n  const popoverTriggerContext = useContext(PopoverTriggerContext);\n  // UnavailableMenuItemTrigger renders only the item when available. Solid still\n  // evaluates the second child when reading `props.children`, so this popover\n  // must no-op unless it is actually composed inside a SubmenuTrigger.\n  if (popoverTriggerContext?.trigger !== \"SubmenuTrigger\") {\n    return null;\n  }\n  const titleId = createUniqueId();\n  const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;\n  const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;\n  const ariaLabelledBy = () =>\n    popoverProps[\"aria-labelledby\"] ?? (popoverProps[\"aria-label\"] ? undefined : titleId);\n  // Upstream `HeadingContext` (ContextualHelp.tsx): the DEFAULT slot carries\n  // styles ONLY — no id, no level — so a headless `<Heading>` (no slot) renders\n  // at the RAC default level (h3) and does NOT name the dialog (combobox/picker\n  // get the name from the field label). Only the explicit `title` slot (the\n  // unavailable-menu-item case) mints the id + level 2 that names the dialog.\n  // The port had put `{id, level:2}` on the default slot too — a self-inflicted\n  // divergence (it named the dialog and forced h2 in canonical default usage).\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n\n  return (\n    <Popover\n      {...popoverProps}\n      id={popoverId()}\n      aria-labelledby={ariaLabelledBy()}\n      hideArrow\n      trigger=\"SubmenuTrigger\"\n      placement={popoverProps.placement ?? \"end top\"}\n      offset={popoverProps.offset ?? -2}\n      crossOffset={popoverProps.crossOffset ?? -8}\n      padding=\"none\"\n      class={local.class}\n    >\n      <div class={contextualHelpFrame}>\n        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n          <TextContext value={textContext}>\n            <ContentContext value={contentContext}>\n              <FooterContext value={footerContext}>\n                <HeadingContext value={headingContext}>{local.children}</HeadingContext>\n              </FooterContext>\n            </ContentContext>\n          </TextContext>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport function ContextualHelp(props: ContextualHelpProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ContextualHelpProps;\n  const [local, popoverProps] = splitProps(merged, [\n    \"children\",\n    \"content\",\n    \"triggerLabel\",\n    \"variant\",\n    \"size\",\n    \"defaultOpen\",\n    \"isOpen\",\n    \"onOpenChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n    \"placement\",\n    \"shouldFlip\",\n  ]);\n  const titleId = createUniqueId();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const variant = () => local.variant ?? \"help\";\n  const variantLabel = () =>\n    stringFormatter().format(`contextualhelp.${variant()}` as keyof S2IntlStrings);\n  const triggerLabel = () => {\n    const explicitLabel = local.triggerLabel ?? local[\"aria-label\"];\n    return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();\n  };\n  const icon = () => (variant() === \"info\" ? <InfoCircleIcon /> : <HelpCircleIcon />);\n  const content = () => local.content ?? local.children;\n  const triggerDomProps = () =>\n    filterDOMProps(merged as Record<string, unknown>, { labelable: true });\n  const triggerClassName = () =>\n    [contextProps?.UNSAFE_className, contextProps?.class, props.UNSAFE_className, props.class]\n      .filter(Boolean)\n      .join(\" \");\n  const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const triggerUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const triggerRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n  // Upstream default heading slot = styles only (no id/level); only the explicit\n  // `title` slot names the dialog. See ContextualHelpPopover above.\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n  const overlayPlacement = () => local.placement ?? \"bottom start\";\n  const overlayShouldFlip = () => local.shouldFlip ?? true;\n  const popoverTriggerProps: Partial<PopoverTriggerProps> = {\n    get defaultOpen() {\n      return local.defaultOpen;\n    },\n    get isOpen() {\n      return local.isOpen;\n    },\n    get onOpenChange() {\n      return local.onOpenChange;\n    },\n  };\n\n  return (\n    <PopoverTrigger {...popoverTriggerProps}>\n      <ActionButton\n        {...triggerDomProps()}\n        id={local.id}\n        aria-label={triggerLabel()}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        aria-describedby={local[\"aria-describedby\"]}\n        aria-details={local[\"aria-details\"]}\n        ref={(element: HTMLButtonElement) => {\n          triggerRef(element);\n        }}\n        size={local.size ?? \"XS\"}\n        isQuiet\n        styles={triggerStyles()}\n        UNSAFE_className={triggerClassName()}\n        UNSAFE_style={triggerUnsafeStyle()}\n      >\n        {icon()}\n      </ActionButton>\n      <Popover\n        {...popoverProps}\n        aria-labelledby={titleId}\n        hideArrow\n        placement={overlayPlacement()}\n        containerPadding={popoverProps.containerPadding ?? 8}\n        offset={8}\n        shouldFlip={overlayShouldFlip()}\n        padding=\"none\"\n      >\n        <div class={contextualHelpFrame}>\n          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n            <TextContext value={textContext}>\n              <ContentContext value={contentContext}>\n                <FooterContext value={footerContext}>\n                  <HeadingContext value={headingContext}>{content()}</HeadingContext>\n                </FooterContext>\n              </ContentContext>\n            </TextContext>\n          </div>\n        </div>\n      </Popover>\n    </PopoverTrigger>\n  );\n}\n"],"mappings":"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"}

package/dist/_chunk/contextualhelp.jsx

@@ -2,36 +2,38 @@ import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedC
 import { t as s2IntlStrings } from "./intl.jsx";
 import { t as ActionButton } from "./ActionButton.jsx";
 import { r as createIcon } from "./spectrum-icon.jsx";
-import { c as TextContext, f as HeadingContext, i as FooterContext, n as ContentContext } from "./text.jsx";
-import { t as InfoCircleIcon } from "./InfoCircleIcon.jsx";
+import { c as TextContext$1, i as FooterContext, n as ContentContext, u as HeadingContext } from "./text.jsx";
 import { Popover as Popover$1, PopoverTrigger as PopoverTrigger$1 } from "../popover/index.jsx";
-import { createContext, createUniqueId, mergeProps, splitProps, useContext } from "solid-js";
-import { createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
-import { MenuTriggerContext } from "@proyecto-viviana/solidaria-components";
+import { t as InfoCircleIcon } from "./InfoCircleIcon.jsx";
+import { createContext, createUniqueId, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { MenuTriggerContext, PopoverTriggerContext } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, filterDOMProps as filterDOMProps$1, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
 //#region src/icon/s2wf-icons/HelpCircleIcon.tsx
 function HelpCircleIconSvg(props) {
-	const { class: className, ...rest } = props;
-	return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" {...rest} class={className}>
-      <path d="m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z" fill="var(--iconPrimary, #222)" />
-      <path d="m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z" fill="var(--iconPrimary, #222)" />
-      <path d="m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z" fill="var(--iconPrimary, #222)" />
+	const [local, rest] = splitProps(props, ["class"]);
+	return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" {...rest} class={local.class}>
+      <path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))" d="M9.988 15.527c-.23.008-.455-.074-.627-.229-.33-.365-.33-.92 0-1.286.17-.158.395-.243.627-.235.236-.01.466.08.633.248.162.168.25.394.242.627.012.235-.07.466-.228.64-.174.165-.408.25-.647.235" />
+      <path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))" d="M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75" />
+      <path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))" d="M9.992 12.706c-.414 0-.75-.336-.75-.75 0-1.022.07-1.714 1.04-2.683.784-.786.917-1.101.917-1.65 0-.21-.066-1.259-1.374-1.259-1.365 0-1.51 1.156-1.526 1.388-.027.413-.393.72-.797.7-.414-.028-.727-.385-.7-.798.064-.965.777-2.79 3.023-2.79 1.887 0 2.874 1.388 2.874 2.758 0 1.144-.457 1.81-1.357 2.712-.576.576-.6.811-.6 1.622 0 .414-.336.75-.75.75" />
     </svg>;
 }
 const HelpCircleIcon = createIcon(HelpCircleIconSvg);
 //#endregion
 //#region src/contextualhelp/index.tsx
 const ContextualHelpContext = createContext(null);
-const contextualHelpFrame = " NOBje7c151 ZOBje7c151 Th151 Qh151 Sh151 Rh151 _oa151 Fb151";
-const contextualHelpInner = " sd151 _ta151 _ub151 K40ub4c151 _oa151 _Le151 _Na151 Pa151 od151 nd151 kd151 jd151 Th151 Qh151 Sh151 Rh151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151";
+const contextualHelpFrame = " NOBje7c17 ZOBje7c17 Th17 Qh17 Sh17 Rh17 _oa17 Fb17";
+const contextualHelpInner = " sd17 _ta17 _ub17 K40ub4c17 _oa17 _Le17 _Na17 Pa17 od17 nd17 kd17 jd17 Th17 Qh17 Sh17 Rh17 uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17";
 const contextualHelpInnerStyle = { margin: "-24px" };
-const contextualHelpHeading = " uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151 Jy151 Gv151 Iy151 Hy151";
-const contextualHelpText = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151";
-const contextualHelpFooter = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151 JC151";
+const contextualHelpHeading = " uiWD3ad17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-e17 vx17 xe17 _xa17 xX0cczbd17 _xX0cczba17 xfe17 _xfa17 xfX0cczbd17 _xfX0cczba17 _Fd17 _FnuYUweb17 pmiKvLd17 Jy17 Gv17 Iy17 Hy17";
+const contextualHelpText = " uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-b17 vx17 xb17 _xa17 _Fb17 _FnuYUwec17 pmiKvLd17";
+const contextualHelpFooter = " uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-b17 vx17 xb17 _xa17 _Fb17 _FnuYUwec17 pmiKvLd17 JC17";
 /**
 * A popover with contextual help sizing for unavailable menu item affordances.
 */ function ContextualHelpPopover(props) {
 	const [local, popoverProps] = splitProps(props, ["children", "class"]);
 	const menuTriggerContext = useContext(MenuTriggerContext);
+	if (useContext(PopoverTriggerContext)?.trigger !== "SubmenuTrigger") return null;
 	const titleId = createUniqueId();
 	const menuTriggerMenuProps = () => menuTriggerContext?.menuProps;
 	const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;
@@ -53,22 +55,20 @@ const contextualHelpFooter = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151
 	return <Popover$1 {...popoverProps} id={popoverId()} aria-labelledby={ariaLabelledBy()} hideArrow trigger="SubmenuTrigger" placement={popoverProps.placement ?? "end top"} offset={popoverProps.offset ?? -2} crossOffset={popoverProps.crossOffset ?? -8} padding="none" class={local.class}>
       <div class={contextualHelpFrame}>
         <div class={contextualHelpInner} style={contextualHelpInnerStyle}>
-          <TextContext.Provider value={textContext}>
-            <ContentContext.Provider value={contentContext}>
-              <FooterContext.Provider value={footerContext}>
-                <HeadingContext.Provider value={headingContext}>
-                  {local.children}
-                </HeadingContext.Provider>
-              </FooterContext.Provider>
-            </ContentContext.Provider>
-          </TextContext.Provider>
+          <TextContext$1 value={textContext}>
+            <ContentContext value={contentContext}>
+              <FooterContext value={footerContext}>
+                <HeadingContext value={headingContext}>{local.children}</HeadingContext>
+              </FooterContext>
+            </ContentContext>
+          </TextContext$1>
         </div>
       </div>
     </Popover$1>;
 }
 function ContextualHelp(props) {
 	const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);
-	const merged = mergeProps(contextProps ?? {}, props);
+	const merged = mergeProps$1(contextProps ?? {}, props);
 	const [local, popoverProps] = splitProps(merged, [
 		"children",
 		"content",
@@ -88,7 +88,9 @@ function ContextualHelp(props) {
 		"aria-label",
 		"aria-labelledby",
 		"aria-describedby",
-		"aria-details"
+		"aria-details",
+		"placement",
+		"shouldFlip"
 	]);
 	const titleId = createUniqueId();
 	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
@@ -100,7 +102,7 @@ function ContextualHelp(props) {
 	};
 	const icon = () => variant() === "info" ? <InfoCircleIcon /> : <HelpCircleIcon />;
 	const content = () => local.content ?? local.children;
-	const triggerDomProps = () => filterDOMProps(merged, { labelable: true });
+	const triggerDomProps = () => filterDOMProps$1(merged, { labelable: true });
 	const triggerClassName = () => [
 		contextProps?.UNSAFE_className,
 		contextProps?.class,
@@ -124,6 +126,8 @@ function ContextualHelp(props) {
 	} } };
 	const contentContext = { styles: contextualHelpText };
 	const footerContext = { styles: contextualHelpFooter };
+	const overlayPlacement = () => local.placement ?? "bottom start";
+	const overlayShouldFlip = () => local.shouldFlip ?? true;
 	const popoverTriggerProps = {
 		get defaultOpen() {
 			return local.defaultOpen;
@@ -136,23 +140,21 @@ function ContextualHelp(props) {
 		}
 	};
 	return <PopoverTrigger$1 {...popoverTriggerProps}>
-      <ActionButton {...triggerDomProps()} id={local.id} aria-label={triggerLabel()} aria-labelledby={local["aria-labelledby"]} aria-describedby={local["aria-describedby"]} aria-details={local["aria-details"]} aria-haspopup="dialog" ref={(element) => {
+      <ActionButton {...triggerDomProps()} id={local.id} aria-label={triggerLabel()} aria-labelledby={local["aria-labelledby"]} aria-describedby={local["aria-describedby"]} aria-details={local["aria-details"]} ref={(element) => {
 		triggerRef(element);
 	}} size={local.size ?? "XS"} isQuiet styles={triggerStyles()} UNSAFE_className={triggerClassName()} UNSAFE_style={triggerUnsafeStyle()}>
         {icon()}
       </ActionButton>
-      <Popover$1 {...popoverProps} aria-labelledby={titleId} hideArrow placement={popoverProps.placement ?? "bottom start"} containerPadding={popoverProps.containerPadding ?? 8} offset={8} shouldFlip={popoverProps.shouldFlip ?? true} padding="none">
+      <Popover$1 {...popoverProps} aria-labelledby={titleId} hideArrow placement={overlayPlacement()} containerPadding={popoverProps.containerPadding ?? 8} offset={8} shouldFlip={overlayShouldFlip()} padding="none">
         <div class={contextualHelpFrame}>
           <div class={contextualHelpInner} style={contextualHelpInnerStyle}>
-            <TextContext.Provider value={textContext}>
-              <ContentContext.Provider value={contentContext}>
-                <FooterContext.Provider value={footerContext}>
-                  <HeadingContext.Provider value={headingContext}>
-                    {content()}
-                  </HeadingContext.Provider>
-                </FooterContext.Provider>
-              </ContentContext.Provider>
-            </TextContext.Provider>
+            <TextContext$1 value={textContext}>
+              <ContentContext value={contentContext}>
+                <FooterContext value={footerContext}>
+                  <HeadingContext value={headingContext}>{content()}</HeadingContext>
+                </FooterContext>
+              </ContentContext>
+            </TextContext$1>
           </div>
         </div>
       </Popover$1>

package/dist/_chunk/contextualhelp.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"contextualhelp.jsx","names":[],"sources":["../../src/icon/s2wf-icons/HelpCircleIcon.tsx","../../src/contextualhelp/index.tsx"],"sourcesContent":["/*\n * Auto-generated from vendored React Spectrum S2 icon sources.\n * Do not edit by hand.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createIcon } from \"../spectrum-icon\";\n\nfunction HelpCircleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={className}\n    >\n      <path\n        d=\"m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n    </svg>\n  );\n}\n\nexport type HelpCircleIconProps = JSX.SvgSVGAttributes<SVGSVGElement>;\nexport const HelpCircleIcon = createIcon(HelpCircleIconSvg);\nexport default HelpCircleIcon;\n","import {\n  type JSX,\n  createContext,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { MenuTriggerContext } from \"@proyecto-viviana/solidaria-components\";\nimport { createStringFormatter, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { Popover, type PopoverProps, type PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { ActionButton, type ActionButtonSize } from \"../button/ActionButton\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, FooterContext, HeadingContext, TextContext } from \"../text\";\nimport { HelpCircleIcon } from \"../icon/s2wf-icons/HelpCircleIcon\";\nimport { InfoCircleIcon } from \"../icon/s2wf-icons/InfoCircleIcon\";\nimport { s2IntlStrings, type S2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ContextualHelpVariant = \"help\" | \"info\";\nexport type ContextualHelpSize = Extract<ActionButtonSize, \"XS\" | \"S\">;\n\nexport interface ContextualHelpStyleProps {\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n}\n\nexport interface ContextualHelpProps extends Omit<\n  PopoverProps,\n  | \"children\"\n  | \"class\"\n  | \"defaultOpen\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"padding\"\n  | \"hideArrow\"\n  | \"size\"\n  | \"slot\"\n  | \"trigger\"\n> {\n  /** Contextual help popover content. */\n  children?: JSX.Element;\n  /** Backward-compatible content alias. Prefer children for S2 parity. */\n  content?: JSX.Element;\n  /** Accessible label for the icon trigger button. */\n  triggerLabel?: string;\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n  /** Size of the trigger ActionButton. @default 'XS' */\n  size?: ContextualHelpSize;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether the overlay is open (controlled). */\n  isOpen?: boolean;\n  /** Handler called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Spectrum-defined generated classes for the trigger. */\n  styles?: StyleString;\n  /** Additional CSS class name for the trigger. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles for the trigger. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Id of the element that provides detailed information. */\n  \"aria-details\"?: string;\n  /** Slotted context key. */\n  slot?: string | null;\n  /** Ref for the icon trigger button. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport interface ContextualHelpPopoverProps extends Omit<\n  PopoverProps,\n  \"children\" | \"class\" | \"padding\" | \"hideArrow\" | \"size\"\n> {\n  /** Contextual help popover content. */\n  children: JSX.Element;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport const ContextualHelpContext = createContext<SpectrumContextValue<ContextualHelpProps>>(null);\n\nconst contextualHelpFrame = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: \"border-box\",\n  // Upstream `wrappingDiv` (ContextualHelp.tsx) sets `height: 'full'` so the\n  // frame fills the popover surface; the port had dropped it (a self-inflicted\n  // divergence D1 catches on the frame's computed height).\n  height: \"full\",\n});\n\nconst contextualHelpInner = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  maxHeight: \"inherit\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  overflow: \"auto\",\n  borderRadius: \"none\",\n  padding: 24,\n  // Upstream's inner is `mergeStyles(dialogInner, {borderRadius:'none', margin,\n  // padding:24})`; `dialogInner` (Dialog.tsx) carries only `fontFamily: 'sans'`\n  // — NOT a `font: body-sm` shorthand and NO explicit `color`. The body copy's\n  // `body-sm` font + neutral color are delegated to the Content/Text/Footer\n  // contexts (and the inherited theme neutral), exactly as upstream. The port's\n  // `font:\"body-sm\"`+`color:\"neutral\"` on the inner div were self-inflicted\n  // (D1 catches the differing computed font/color on the inner element).\n  fontFamily: \"sans\",\n});\n\nconst contextualHelpInnerStyle: JSX.CSSProperties = {\n  // React S2 uses calc(self(paddingTop) * -1); the local style macro does not emit\n  // negative margin classes for this component, so keep the computed margin explicit.\n  margin: \"-24px\",\n};\n\nconst contextualHelpHeading = style({\n  font: \"heading-xs\",\n  margin: 0,\n  marginBottom: 8,\n});\n\nconst contextualHelpText = style({\n  font: \"body-sm\",\n});\n\nconst contextualHelpFooter = style({\n  font: \"body-sm\",\n  marginTop: 16,\n});\n\n/**\n * A popover with contextual help sizing for unavailable menu item affordances.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {\n  const [local, popoverProps] = splitProps(props, [\"children\", \"class\"]);\n  const menuTriggerContext = useContext(MenuTriggerContext);\n  const titleId = createUniqueId();\n  const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;\n  const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;\n  const ariaLabelledBy = () =>\n    popoverProps[\"aria-labelledby\"] ?? (popoverProps[\"aria-label\"] ? undefined : titleId);\n  // Upstream `HeadingContext` (ContextualHelp.tsx): the DEFAULT slot carries\n  // styles ONLY — no id, no level — so a headless `<Heading>` (no slot) renders\n  // at the RAC default level (h3) and does NOT name the dialog (combobox/picker\n  // get the name from the field label). Only the explicit `title` slot (the\n  // unavailable-menu-item case) mints the id + level 2 that names the dialog.\n  // The port had put `{id, level:2}` on the default slot too — a self-inflicted\n  // divergence (it named the dialog and forced h2 in canonical default usage).\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n\n  return (\n    <Popover\n      {...popoverProps}\n      id={popoverId()}\n      aria-labelledby={ariaLabelledBy()}\n      hideArrow\n      trigger=\"SubmenuTrigger\"\n      placement={popoverProps.placement ?? \"end top\"}\n      offset={popoverProps.offset ?? -2}\n      crossOffset={popoverProps.crossOffset ?? -8}\n      padding=\"none\"\n      class={local.class}\n    >\n      <div class={contextualHelpFrame}>\n        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n          <TextContext.Provider value={textContext}>\n            <ContentContext.Provider value={contentContext}>\n              <FooterContext.Provider value={footerContext}>\n                <HeadingContext.Provider value={headingContext}>\n                  {local.children}\n                </HeadingContext.Provider>\n              </FooterContext.Provider>\n            </ContentContext.Provider>\n          </TextContext.Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport function ContextualHelp(props: ContextualHelpProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ContextualHelpProps;\n  const [local, popoverProps] = splitProps(merged, [\n    \"children\",\n    \"content\",\n    \"triggerLabel\",\n    \"variant\",\n    \"size\",\n    \"defaultOpen\",\n    \"isOpen\",\n    \"onOpenChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const titleId = createUniqueId();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const variant = () => local.variant ?? \"help\";\n  const variantLabel = () =>\n    stringFormatter().format(`contextualhelp.${variant()}` as keyof S2IntlStrings);\n  const triggerLabel = () => {\n    const explicitLabel = local.triggerLabel ?? local[\"aria-label\"];\n    return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();\n  };\n  const icon = () => (variant() === \"info\" ? <InfoCircleIcon /> : <HelpCircleIcon />);\n  const content = () => local.content ?? local.children;\n  const triggerDomProps = () =>\n    filterDOMProps(merged as Record<string, unknown>, { labelable: true });\n  const triggerClassName = () =>\n    [contextProps?.UNSAFE_className, contextProps?.class, props.UNSAFE_className, props.class]\n      .filter(Boolean)\n      .join(\" \");\n  const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const triggerUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const triggerRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n  // Upstream default heading slot = styles only (no id/level); only the explicit\n  // `title` slot names the dialog. See ContextualHelpPopover above.\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n  const popoverTriggerProps: Partial<PopoverTriggerProps> = {\n    get defaultOpen() {\n      return local.defaultOpen;\n    },\n    get isOpen() {\n      return local.isOpen;\n    },\n    get onOpenChange() {\n      return local.onOpenChange;\n    },\n  };\n\n  return (\n    <PopoverTrigger {...popoverTriggerProps}>\n      <ActionButton\n        {...triggerDomProps()}\n        id={local.id}\n        aria-label={triggerLabel()}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        aria-describedby={local[\"aria-describedby\"]}\n        aria-details={local[\"aria-details\"]}\n        aria-haspopup=\"dialog\"\n        ref={(element: HTMLButtonElement) => {\n          triggerRef(element);\n        }}\n        size={local.size ?? \"XS\"}\n        isQuiet\n        styles={triggerStyles()}\n        UNSAFE_className={triggerClassName()}\n        UNSAFE_style={triggerUnsafeStyle()}\n      >\n        {icon()}\n      </ActionButton>\n      <Popover\n        {...popoverProps}\n        aria-labelledby={titleId}\n        hideArrow\n        placement={popoverProps.placement ?? \"bottom start\"}\n        containerPadding={popoverProps.containerPadding ?? 8}\n        offset={8}\n        shouldFlip={popoverProps.shouldFlip ?? true}\n        padding=\"none\"\n      >\n        <div class={contextualHelpFrame}>\n          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n            <TextContext.Provider value={textContext}>\n              <ContentContext.Provider value={contentContext}>\n                <FooterContext.Provider value={footerContext}>\n                  <HeadingContext.Provider value={headingContext}>\n                    {content()}\n                  </HeadingContext.Provider>\n                </FooterContext.Provider>\n              </ContentContext.Provider>\n            </TextContext.Provider>\n          </div>\n        </div>\n      </Popover>\n    </PopoverTrigger>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"contextualhelp.jsx","names":[],"sources":["../../src/icon/s2wf-icons/HelpCircleIcon.tsx","../../src/contextualhelp/index.tsx"],"sourcesContent":["/*\n * Auto-generated from the pinned @react-spectrum/s2 icon inventory.\n * Do not edit by hand.\n */\n// Generator input: @react-spectrum/s2@1.7.0/icons/HelpCircle.mjs\n// Generator input: @react-spectrum/s2@1.7.0/icons/HelpCircle.cjs\n\nimport type { JSX } from \"@solidjs/web\";\nimport { createIcon } from \"../spectrum-icon\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nfunction HelpCircleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={local.class}\n    >\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M9.988 15.527c-.23.008-.455-.074-.627-.229-.33-.365-.33-.92 0-1.286.17-.158.395-.243.627-.235.236-.01.466.08.633.248.162.168.25.394.242.627.012.235-.07.466-.228.64-.174.165-.408.25-.647.235\"\n      />\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75\"\n      />\n      <path\n        fill=\"var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))\"\n        d=\"M9.992 12.706c-.414 0-.75-.336-.75-.75 0-1.022.07-1.714 1.04-2.683.784-.786.917-1.101.917-1.65 0-.21-.066-1.259-1.374-1.259-1.365 0-1.51 1.156-1.526 1.388-.027.413-.393.72-.797.7-.414-.028-.727-.385-.7-.798.064-.965.777-2.79 3.023-2.79 1.887 0 2.874 1.388 2.874 2.758 0 1.144-.457 1.81-1.357 2.712-.576.576-.6.811-.6 1.622 0 .414-.336.75-.75.75\"\n      />\n    </svg>\n  );\n}\n\nexport type HelpCircleIconProps = JSX.SvgSVGAttributes<SVGSVGElement>;\nexport const HelpCircleIcon = createIcon(HelpCircleIconSvg);\nexport default HelpCircleIcon;\n","// Port of packages/@react-spectrum/s2/src/ContextualHelp.tsx.\nimport { createContext, createUniqueId, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { MenuTriggerContext, PopoverTriggerContext } from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { Popover, type PopoverProps, type PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { ActionButton, type ActionButtonSize } from \"../button/ActionButton\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, FooterContext, HeadingContext, TextContext } from \"../text\";\nimport { HelpCircleIcon } from \"../icon/s2wf-icons/HelpCircleIcon\";\nimport { InfoCircleIcon } from \"../icon/s2wf-icons/InfoCircleIcon\";\nimport { s2IntlStrings, type S2IntlStrings } from \"../intl\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ContextualHelpVariant = \"help\" | \"info\";\nexport type ContextualHelpSize = Extract<ActionButtonSize, \"XS\" | \"S\">;\n\nexport interface ContextualHelpStyleProps {\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n}\n\nexport interface ContextualHelpProps extends Omit<\n  PopoverProps,\n  | \"children\"\n  | \"class\"\n  | \"defaultOpen\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"padding\"\n  | \"hideArrow\"\n  | \"size\"\n  | \"slot\"\n  | \"trigger\"\n> {\n  /** Contextual help popover content. */\n  children?: JSX.Element;\n  /** Backward-compatible content alias. Prefer children for S2 parity. */\n  content?: JSX.Element;\n  /** Accessible label for the icon trigger button. */\n  triggerLabel?: string;\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n  /** Size of the trigger ActionButton. @default 'XS' */\n  size?: ContextualHelpSize;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether the overlay is open (controlled). */\n  isOpen?: boolean;\n  /** Handler called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Spectrum-defined generated classes for the trigger. */\n  styles?: StyleString;\n  /** Additional CSS class name for the trigger. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles for the trigger. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Id of the element that provides detailed information. */\n  \"aria-details\"?: string;\n  /** Slotted context key. */\n  slot?: string | null;\n  /** Ref for the icon trigger button. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport interface ContextualHelpPopoverProps extends Omit<\n  PopoverProps,\n  \"children\" | \"class\" | \"padding\" | \"hideArrow\" | \"size\"\n> {\n  /** Contextual help popover content. */\n  children: JSX.Element;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport const ContextualHelpContext = createContext<SpectrumContextValue<ContextualHelpProps>>(null);\n\nconst contextualHelpFrame = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: \"border-box\",\n  // Upstream `wrappingDiv` (ContextualHelp.tsx) sets `height: 'full'` so the\n  // frame fills the popover surface; the port had dropped it (a self-inflicted\n  // divergence D1 catches on the frame's computed height).\n  height: \"full\",\n});\n\nconst contextualHelpInner = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  maxHeight: \"inherit\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  overflow: \"auto\",\n  borderRadius: \"none\",\n  padding: 24,\n  // Upstream's inner is `mergeStyles(dialogInner, {borderRadius:'none', margin,\n  // padding:24})`; `dialogInner` (Dialog.tsx) carries only `fontFamily: 'sans'`\n  // — NOT a `font: body-sm` shorthand and NO explicit `color`. The body copy's\n  // `body-sm` font + neutral color are delegated to the Content/Text/Footer\n  // contexts (and the inherited theme neutral), exactly as upstream. The port's\n  // `font:\"body-sm\"`+`color:\"neutral\"` on the inner div were self-inflicted\n  // (D1 catches the differing computed font/color on the inner element).\n  fontFamily: \"sans\",\n});\n\nconst contextualHelpInnerStyle: JSX.CSSProperties = {\n  // React S2 uses calc(self(paddingTop) * -1); the local style macro does not emit\n  // negative margin classes for this component, so keep the computed margin explicit.\n  margin: \"-24px\",\n};\n\nconst contextualHelpHeading = style({\n  font: \"heading-xs\",\n  margin: 0,\n  marginBottom: 8,\n});\n\nconst contextualHelpText = style({\n  font: \"body-sm\",\n});\n\nconst contextualHelpFooter = style({\n  font: \"body-sm\",\n  marginTop: 16,\n});\n\n/**\n * A popover with contextual help sizing for unavailable menu item affordances.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {\n  const [local, popoverProps] = splitProps(props, [\"children\", \"class\"]);\n  const menuTriggerContext = useContext(MenuTriggerContext);\n  const popoverTriggerContext = useContext(PopoverTriggerContext);\n  // UnavailableMenuItemTrigger renders only the item when available. Solid still\n  // evaluates the second child when reading `props.children`, so this popover\n  // must no-op unless it is actually composed inside a SubmenuTrigger.\n  if (popoverTriggerContext?.trigger !== \"SubmenuTrigger\") {\n    return null;\n  }\n  const titleId = createUniqueId();\n  const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;\n  const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;\n  const ariaLabelledBy = () =>\n    popoverProps[\"aria-labelledby\"] ?? (popoverProps[\"aria-label\"] ? undefined : titleId);\n  // Upstream `HeadingContext` (ContextualHelp.tsx): the DEFAULT slot carries\n  // styles ONLY — no id, no level — so a headless `<Heading>` (no slot) renders\n  // at the RAC default level (h3) and does NOT name the dialog (combobox/picker\n  // get the name from the field label). Only the explicit `title` slot (the\n  // unavailable-menu-item case) mints the id + level 2 that names the dialog.\n  // The port had put `{id, level:2}` on the default slot too — a self-inflicted\n  // divergence (it named the dialog and forced h2 in canonical default usage).\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n\n  return (\n    <Popover\n      {...popoverProps}\n      id={popoverId()}\n      aria-labelledby={ariaLabelledBy()}\n      hideArrow\n      trigger=\"SubmenuTrigger\"\n      placement={popoverProps.placement ?? \"end top\"}\n      offset={popoverProps.offset ?? -2}\n      crossOffset={popoverProps.crossOffset ?? -8}\n      padding=\"none\"\n      class={local.class}\n    >\n      <div class={contextualHelpFrame}>\n        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n          <TextContext value={textContext}>\n            <ContentContext value={contentContext}>\n              <FooterContext value={footerContext}>\n                <HeadingContext value={headingContext}>{local.children}</HeadingContext>\n              </FooterContext>\n            </ContentContext>\n          </TextContext>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport function ContextualHelp(props: ContextualHelpProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ContextualHelpProps;\n  const [local, popoverProps] = splitProps(merged, [\n    \"children\",\n    \"content\",\n    \"triggerLabel\",\n    \"variant\",\n    \"size\",\n    \"defaultOpen\",\n    \"isOpen\",\n    \"onOpenChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n    \"placement\",\n    \"shouldFlip\",\n  ]);\n  const titleId = createUniqueId();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const variant = () => local.variant ?? \"help\";\n  const variantLabel = () =>\n    stringFormatter().format(`contextualhelp.${variant()}` as keyof S2IntlStrings);\n  const triggerLabel = () => {\n    const explicitLabel = local.triggerLabel ?? local[\"aria-label\"];\n    return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();\n  };\n  const icon = () => (variant() === \"info\" ? <InfoCircleIcon /> : <HelpCircleIcon />);\n  const content = () => local.content ?? local.children;\n  const triggerDomProps = () =>\n    filterDOMProps(merged as Record<string, unknown>, { labelable: true });\n  const triggerClassName = () =>\n    [contextProps?.UNSAFE_className, contextProps?.class, props.UNSAFE_className, props.class]\n      .filter(Boolean)\n      .join(\" \");\n  const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const triggerUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const triggerRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n  // Upstream default heading slot = styles only (no id/level); only the explicit\n  // `title` slot names the dialog. See ContextualHelpPopover above.\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n  const overlayPlacement = () => local.placement ?? \"bottom start\";\n  const overlayShouldFlip = () => local.shouldFlip ?? true;\n  const popoverTriggerProps: Partial<PopoverTriggerProps> = {\n    get defaultOpen() {\n      return local.defaultOpen;\n    },\n    get isOpen() {\n      return local.isOpen;\n    },\n    get onOpenChange() {\n      return local.onOpenChange;\n    },\n  };\n\n  return (\n    <PopoverTrigger {...popoverTriggerProps}>\n      <ActionButton\n        {...triggerDomProps()}\n        id={local.id}\n        aria-label={triggerLabel()}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        aria-describedby={local[\"aria-describedby\"]}\n        aria-details={local[\"aria-details\"]}\n        ref={(element: HTMLButtonElement) => {\n          triggerRef(element);\n        }}\n        size={local.size ?? \"XS\"}\n        isQuiet\n        styles={triggerStyles()}\n        UNSAFE_className={triggerClassName()}\n        UNSAFE_style={triggerUnsafeStyle()}\n      >\n        {icon()}\n      </ActionButton>\n      <Popover\n        {...popoverProps}\n        aria-labelledby={titleId}\n        hideArrow\n        placement={overlayPlacement()}\n        containerPadding={popoverProps.containerPadding ?? 8}\n        offset={8}\n        shouldFlip={overlayShouldFlip()}\n        padding=\"none\"\n      >\n        <div class={contextualHelpFrame}>\n          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n            <TextContext value={textContext}>\n              <ContentContext value={contentContext}>\n                <FooterContext value={footerContext}>\n                  <HeadingContext value={headingContext}>{content()}</HeadingContext>\n                </FooterContext>\n              </ContentContext>\n            </TextContext>\n          </div>\n        </div>\n      </Popover>\n    </PopoverTrigger>\n  );\n}\n"],"mappings":"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"}