@vector-im/compound-web 8.3.6 → 9.0.0

package/dist/components/Tooltip/useTooltip.js

@@ -1,141 +1,113 @@
-import { useId, useFloating, offset, flip, shift, arrow, autoUpdate, useDelayGroup, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
-import { useRef, useState, useEffect, useMemo } from "react";
 import { hoverDelay } from "./TooltipProvider.js";
-function useTooltip({
-  open: controlledOpen,
-  disabled = false,
-  onOpenChange,
-  placement = "bottom",
-  isTriggerInteractive,
-  caption,
-  "aria-atomic": ariaAtomic,
-  "aria-live": ariaLive,
-  ...props
-}) {
-  const labelId = useId();
-  const captionId = useId();
-  const arrowRef = useRef(null);
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const open = disabled ? false : controlledOpen ?? uncontrolledOpen;
-  const setOpen = (open2, event, reason) => {
-    onOpenChange?.(open2, event, reason);
-    if (controlledOpen === void 0) setUncontrolledOpen(open2);
-  };
-  const data = useFloating({
-    placement,
-    open,
-    onOpenChange: setOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      // arrow height 6px
-      offset(6),
-      flip({
-        crossAxis: placement.includes("-"),
-        fallbackAxisSideDirection: "start",
-        padding: 5
-      }),
-      shift({ padding: 5 }),
-      // add the little arrow along with the floating content
-      arrow({
-        element: arrowRef
-      })
-    ]
-  });
-  const context = data.context;
-  const { delay, initialDelay } = useDelayGroup(context);
-  if (initialDelay !== hoverDelay)
-    throw new Error("Tooltips must be wrapped in a global <TooltipProvider>");
-  const hover = useHover(context, {
-    move: false,
-    enabled: controlledOpen === void 0,
-    // Show tooltip after a delay when trigger is interactive
-    delay: isTriggerInteractive ? delay : {},
-    mouseOnly: true
-  });
-  const focus = useFocus(context, {
-    enabled: controlledOpen === void 0
-  });
-  const pressTimer = useRef(void 0);
-  useEffect(() => () => window.clearTimeout(pressTimer.current), []);
-  const press = useMemo(() => {
-    const onTouchEnd = () => {
-      if (pressTimer.current === void 0)
-        pressTimer.current = window.setTimeout(() => {
-          setOpen(false);
-          pressTimer.current = void 0;
-        }, 1500);
-      else window.clearTimeout(pressTimer.current);
-    };
-    return {
-      // Set these props on the anchor element
-      reference: {
-        onTouchStart: () => {
-          if (pressTimer.current !== void 0)
-            window.clearTimeout(pressTimer.current);
-          pressTimer.current = window.setTimeout(() => {
-            setOpen(true);
-            pressTimer.current = void 0;
-          }, 500);
-        },
-        onTouchEnd,
-        onTouchCancel: onTouchEnd
-      }
-    };
-  }, []);
-  const dismiss = useDismiss(context);
-  const purpose = "label" in props ? "label" : "description";
-  const role = useRole(context, {
-    enabled: purpose === "description",
-    role: "tooltip"
-  });
-  const label = useMemo(
-    () => purpose === "label" ? {
-      // Set these props on the anchor element
-      reference: {
-        "aria-labelledby": labelId,
-        "aria-describedby": caption ? captionId : void 0
-      }
-    } : {},
-    [purpose, labelId, captionId]
-  );
-  const interactions = useInteractions([
-    hover,
-    focus,
-    press,
-    dismiss,
-    role,
-    label
-  ]);
-  return useMemo(
-    () => ({
-      labelId,
-      captionId: caption ? captionId : void 0,
-      caption,
-      purpose,
-      open,
-      setOpen,
-      tooltipProps: {
-        "aria-atomic": ariaAtomic,
-        "aria-live": ariaLive
-      },
-      ...interactions,
-      ...data,
-      arrowRef
-    }),
-    [
-      labelId,
-      captionId,
-      caption,
-      role,
-      open,
-      setOpen,
-      interactions,
-      data,
-      arrowRef
-    ]
-  );
+import { useEffect, useMemo, useRef, useState } from "react";
+import { arrow, autoUpdate, flip, offset, shift, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useId as useId$1, useInteractions, useRole } from "@floating-ui/react";
+//#region src/components/Tooltip/useTooltip.ts
+function useTooltip({ open: controlledOpen, disabled = false, onOpenChange, placement = "bottom", isTriggerInteractive, caption, "aria-atomic": ariaAtomic, "aria-live": ariaLive, ...props }) {
+	const labelId = useId$1();
+	const captionId = useId$1();
+	const arrowRef = useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const open = disabled ? false : controlledOpen ?? uncontrolledOpen;
+	const setOpen = (open, event, reason) => {
+		onOpenChange?.(open, event, reason);
+		if (controlledOpen === void 0) setUncontrolledOpen(open);
+	};
+	const data = useFloating({
+		placement,
+		open,
+		onOpenChange: setOpen,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(6),
+			flip({
+				crossAxis: placement.includes("-"),
+				fallbackAxisSideDirection: "start",
+				padding: 5
+			}),
+			shift({ padding: 5 }),
+			arrow({ element: arrowRef })
+		]
+	});
+	const context = data.context;
+	const { delay, initialDelay } = useDelayGroup(context);
+	if (initialDelay !== hoverDelay) throw new Error("Tooltips must be wrapped in a global <TooltipProvider>");
+	const hover = useHover(context, {
+		move: false,
+		enabled: controlledOpen === void 0,
+		delay: isTriggerInteractive ? delay : {},
+		mouseOnly: true
+	});
+	const focus = useFocus(context, { enabled: controlledOpen === void 0 });
+	const pressTimer = useRef(void 0);
+	useEffect(() => () => window.clearTimeout(pressTimer.current), []);
+	const press = useMemo(() => {
+		const onTouchEnd = () => {
+			if (pressTimer.current === void 0) pressTimer.current = window.setTimeout(() => {
+				setOpen(false);
+				pressTimer.current = void 0;
+			}, 1500);
+			else window.clearTimeout(pressTimer.current);
+		};
+		return { reference: {
+			onTouchStart: () => {
+				if (pressTimer.current !== void 0) window.clearTimeout(pressTimer.current);
+				pressTimer.current = window.setTimeout(() => {
+					setOpen(true);
+					pressTimer.current = void 0;
+				}, 500);
+			},
+			onTouchEnd,
+			onTouchCancel: onTouchEnd
+		} };
+	}, []);
+	const dismiss = useDismiss(context);
+	const purpose = "label" in props ? "label" : "description";
+	const role = useRole(context, {
+		enabled: purpose === "description",
+		role: "tooltip"
+	});
+	const interactions = useInteractions([
+		hover,
+		focus,
+		press,
+		dismiss,
+		role,
+		useMemo(() => purpose === "label" ? { reference: {
+			"aria-labelledby": labelId,
+			"aria-describedby": caption ? captionId : void 0
+		} } : {}, [
+			purpose,
+			labelId,
+			captionId
+		])
+	]);
+	return useMemo(() => ({
+		labelId,
+		captionId: caption ? captionId : void 0,
+		caption,
+		purpose,
+		open,
+		setOpen,
+		tooltipProps: {
+			"aria-atomic": ariaAtomic,
+			"aria-live": ariaLive
+		},
+		...interactions,
+		...data,
+		arrowRef
+	}), [
+		labelId,
+		captionId,
+		caption,
+		role,
+		open,
+		setOpen,
+		interactions,
+		data,
+		arrowRef
+	]);
 }
-export {
-  useTooltip
-};
-//# sourceMappingURL=useTooltip.js.map
+//#endregion
+export { useTooltip };
+
+//# sourceMappingURL=useTooltip.js.map

package/dist/components/Tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../../../src/components/Tooltip/useTooltip.ts"],"sourcesContent":["/*\n * Copyright 2024 New Vector Ltd.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  type OpenChangeReason,\n  type Placement,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport {\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type AriaAttributes,\n  useEffect,\n} from \"react\";\nimport { hoverDelay } from \"./TooltipProvider\";\n\nexport interface CommonUseTooltipProps {\n  /**\n   * The controlled open state of the tooltip.\n   * If provided, the tooltip will be in controlled mode.\n   * When true, the tooltip is always open. When false, the tooltip is always hidden.\n   * When undefined, the tooltip will manage its own open state.\n   * You will mostly want to omit this property. Will be used the vast majority\n   * of the time during development.\n   * @default undefined\n   */\n  open?: boolean;\n  /**\n   * Whether the tooltip should be forced to be in a closed state.\n   */\n  // TODO: Deprecate this? It seems redundant to open: false.\n  disabled?: boolean;\n  /**\n   * The caption of the tooltip.\n   * JSX.Element can be used to provide accessibility content like kbd element.\n   * Keep in mind, the caption should not be used for interactive content.\n   */\n  caption?: string | JSX.Element;\n  /**\n   * The event handler for the open change.\n   */\n  onOpenChange?: (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => void;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: Placement;\n  /**\n   * Whether the trigger element is interactive.\n   * When trigger is interactive:\n   *      - tooltip will be shown after a 300ms delay.\n   * When trigger is not interactive:\n   *      - tooltip will be shown instantly when pointer enters trigger.\n   *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n   */\n  isTriggerInteractive: boolean;\n\n  /**\n   * Additional aria-* attributes to pass through to the floating tooltip for\n   * edge cases which require more user awareness like errors & alerts.\n   */\n  \"aria-atomic\"?: AriaAttributes[\"aria-atomic\"];\n  \"aria-live\"?: AriaAttributes[\"aria-live\"];\n}\n\nexport interface TooltipLabel {\n  /**\n   * A label for the target element.\n   */\n  label: string;\n}\n\nexport interface TooltipDescription {\n  /**\n   * A description for the target element.\n   */\n  description: string;\n}\n\ntype UseTooltipProps = CommonUseTooltipProps &\n  (TooltipLabel | TooltipDescription);\n\nexport function useTooltip({\n  open: controlledOpen,\n  disabled = false,\n  onOpenChange,\n  placement = \"bottom\",\n  isTriggerInteractive,\n  caption,\n  \"aria-atomic\": ariaAtomic,\n  \"aria-live\": ariaLive,\n  ...props\n}: UseTooltipProps) {\n  const labelId = useId();\n  const captionId = useId();\n  const arrowRef = useRef(null);\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  // Use controlledOpen if it is provided, otherwise use uncontrolledOpen\n  const open = disabled ? false : (controlledOpen ?? uncontrolledOpen);\n  const setOpen = (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => {\n    onOpenChange?.(open, event, reason);\n    // we are in uncontrolled mode\n    if (controlledOpen === undefined) setUncontrolledOpen(open);\n  };\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 6px\n      offset(6),\n      flip({\n        crossAxis: placement.includes(\"-\"),\n        fallbackAxisSideDirection: \"start\",\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n      // add the little arrow along with the floating content\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n  });\n\n  const context = data.context;\n  const { delay, initialDelay } = useDelayGroup(context);\n  // We can tell if no delay group has been provided, because the delay will\n  // default to zero\n  if (initialDelay !== hoverDelay)\n    throw new Error(\"Tooltips must be wrapped in a global <TooltipProvider>\");\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen === undefined,\n    // Show tooltip after a delay when trigger is interactive\n    delay: isTriggerInteractive ? delay : {},\n    mouseOnly: true,\n  });\n\n  const focus = useFocus(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  // On touch screens, show the tooltip on a long press\n  const pressTimer = useRef<number | undefined>(undefined);\n  useEffect(() => () => window.clearTimeout(pressTimer.current), []);\n  const press = useMemo(() => {\n    const onTouchEnd = () => {\n      if (pressTimer.current === undefined)\n        pressTimer.current = window.setTimeout(() => {\n          setOpen(false);\n          pressTimer.current = undefined;\n        }, 1500);\n      else window.clearTimeout(pressTimer.current);\n    };\n    return {\n      // Set these props on the anchor element\n      reference: {\n        onTouchStart: () => {\n          if (pressTimer.current !== undefined)\n            window.clearTimeout(pressTimer.current);\n          pressTimer.current = window.setTimeout(() => {\n            setOpen(true);\n            pressTimer.current = undefined;\n          }, 500);\n        },\n        onTouchEnd,\n        onTouchCancel: onTouchEnd,\n      },\n    };\n  }, []);\n\n  const dismiss = useDismiss(context);\n\n  const purpose = \"label\" in props ? \"label\" : \"description\";\n  // A descriptive tooltip should set role=\"tooltip\" and aria-describedby\n  const role = useRole(context, {\n    enabled: purpose === \"description\",\n    role: \"tooltip\",\n  });\n\n  // A label tooltip should set aria-labelledby with no role regardless of\n  // whether the tooltip is visible.\n  // (Source: https://zoebijl.github.io/apg-tooltip/#tooltip-main-label)\n  // useRole doesn't support this use case correctly, so we do it manually.\n  const label = useMemo(\n    () =>\n      purpose === \"label\"\n        ? {\n            // Set these props on the anchor element\n            reference: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": caption ? captionId : undefined,\n            },\n          }\n        : {},\n    [purpose, labelId, captionId],\n  );\n\n  const interactions = useInteractions([\n    hover,\n    focus,\n    press,\n    dismiss,\n    role,\n    label,\n  ]);\n\n  return useMemo(\n    () => ({\n      labelId,\n      captionId: caption ? captionId : undefined,\n      caption,\n      purpose: purpose as \"label\" | \"description\",\n      open,\n      setOpen,\n      tooltipProps: {\n        \"aria-atomic\": ariaAtomic,\n        \"aria-live\": ariaLive,\n      },\n      ...interactions,\n      ...data,\n      arrowRef,\n    }),\n    [\n      labelId,\n      captionId,\n      caption,\n      role,\n      open,\n      setOpen,\n      interactions,\n      data,\n      arrowRef,\n    ],\n  );\n}\n"],"names":["open"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/Tooltip/useTooltip.ts"],"sourcesContent":["/*\n * Copyright 2024 New Vector Ltd.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  type OpenChangeReason,\n  type Placement,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport {\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type AriaAttributes,\n  useEffect,\n} from \"react\";\nimport { hoverDelay } from \"./TooltipProvider\";\n\nexport interface CommonUseTooltipProps {\n  /**\n   * The controlled open state of the tooltip.\n   * If provided, the tooltip will be in controlled mode.\n   * When true, the tooltip is always open. When false, the tooltip is always hidden.\n   * When undefined, the tooltip will manage its own open state.\n   * You will mostly want to omit this property. Will be used the vast majority\n   * of the time during development.\n   * @default undefined\n   */\n  open?: boolean;\n  /**\n   * Whether the tooltip should be forced to be in a closed state.\n   */\n  // TODO: Deprecate this? It seems redundant to open: false.\n  disabled?: boolean;\n  /**\n   * The caption of the tooltip.\n   * JSX.Element can be used to provide accessibility content like kbd element.\n   * Keep in mind, the caption should not be used for interactive content.\n   */\n  caption?: string | JSX.Element;\n  /**\n   * The event handler for the open change.\n   */\n  onOpenChange?: (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => void;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: Placement;\n  /**\n   * Whether the trigger element is interactive.\n   * When trigger is interactive:\n   *      - tooltip will be shown after a 300ms delay.\n   * When trigger is not interactive:\n   *      - tooltip will be shown instantly when pointer enters trigger.\n   *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n   */\n  isTriggerInteractive: boolean;\n\n  /**\n   * Additional aria-* attributes to pass through to the floating tooltip for\n   * edge cases which require more user awareness like errors & alerts.\n   */\n  \"aria-atomic\"?: AriaAttributes[\"aria-atomic\"];\n  \"aria-live\"?: AriaAttributes[\"aria-live\"];\n}\n\nexport interface TooltipLabel {\n  /**\n   * A label for the target element.\n   */\n  label: string;\n}\n\nexport interface TooltipDescription {\n  /**\n   * A description for the target element.\n   */\n  description: string;\n}\n\ntype UseTooltipProps = CommonUseTooltipProps &\n  (TooltipLabel | TooltipDescription);\n\nexport function useTooltip({\n  open: controlledOpen,\n  disabled = false,\n  onOpenChange,\n  placement = \"bottom\",\n  isTriggerInteractive,\n  caption,\n  \"aria-atomic\": ariaAtomic,\n  \"aria-live\": ariaLive,\n  ...props\n}: UseTooltipProps) {\n  const labelId = useId();\n  const captionId = useId();\n  const arrowRef = useRef(null);\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  // Use controlledOpen if it is provided, otherwise use uncontrolledOpen\n  const open = disabled ? false : (controlledOpen ?? uncontrolledOpen);\n  const setOpen = (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => {\n    onOpenChange?.(open, event, reason);\n    // we are in uncontrolled mode\n    if (controlledOpen === undefined) setUncontrolledOpen(open);\n  };\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 6px\n      offset(6),\n      flip({\n        crossAxis: placement.includes(\"-\"),\n        fallbackAxisSideDirection: \"start\",\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n      // add the little arrow along with the floating content\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n  });\n\n  const context = data.context;\n  const { delay, initialDelay } = useDelayGroup(context);\n  // We can tell if no delay group has been provided, because the delay will\n  // default to zero\n  if (initialDelay !== hoverDelay)\n    throw new Error(\"Tooltips must be wrapped in a global <TooltipProvider>\");\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen === undefined,\n    // Show tooltip after a delay when trigger is interactive\n    delay: isTriggerInteractive ? delay : {},\n    mouseOnly: true,\n  });\n\n  const focus = useFocus(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  // On touch screens, show the tooltip on a long press\n  const pressTimer = useRef<number | undefined>(undefined);\n  useEffect(() => () => window.clearTimeout(pressTimer.current), []);\n  const press = useMemo(() => {\n    const onTouchEnd = () => {\n      if (pressTimer.current === undefined)\n        pressTimer.current = window.setTimeout(() => {\n          setOpen(false);\n          pressTimer.current = undefined;\n        }, 1500);\n      else window.clearTimeout(pressTimer.current);\n    };\n    return {\n      // Set these props on the anchor element\n      reference: {\n        onTouchStart: () => {\n          if (pressTimer.current !== undefined)\n            window.clearTimeout(pressTimer.current);\n          pressTimer.current = window.setTimeout(() => {\n            setOpen(true);\n            pressTimer.current = undefined;\n          }, 500);\n        },\n        onTouchEnd,\n        onTouchCancel: onTouchEnd,\n      },\n    };\n  }, []);\n\n  const dismiss = useDismiss(context);\n\n  const purpose = \"label\" in props ? \"label\" : \"description\";\n  // A descriptive tooltip should set role=\"tooltip\" and aria-describedby\n  const role = useRole(context, {\n    enabled: purpose === \"description\",\n    role: \"tooltip\",\n  });\n\n  // A label tooltip should set aria-labelledby with no role regardless of\n  // whether the tooltip is visible.\n  // (Source: https://zoebijl.github.io/apg-tooltip/#tooltip-main-label)\n  // useRole doesn't support this use case correctly, so we do it manually.\n  const label = useMemo(\n    () =>\n      purpose === \"label\"\n        ? {\n            // Set these props on the anchor element\n            reference: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": caption ? captionId : undefined,\n            },\n          }\n        : {},\n    [purpose, labelId, captionId],\n  );\n\n  const interactions = useInteractions([\n    hover,\n    focus,\n    press,\n    dismiss,\n    role,\n    label,\n  ]);\n\n  return useMemo(\n    () => ({\n      labelId,\n      captionId: caption ? captionId : undefined,\n      caption,\n      purpose: purpose as \"label\" | \"description\",\n      open,\n      setOpen,\n      tooltipProps: {\n        \"aria-atomic\": ariaAtomic,\n        \"aria-live\": ariaLive,\n      },\n      ...interactions,\n      ...data,\n      arrowRef,\n    }),\n    [\n      labelId,\n      captionId,\n      caption,\n      role,\n      open,\n      setOpen,\n      interactions,\n      data,\n      arrowRef,\n    ],\n  );\n}\n"],"mappings":";;;;AAwGA,SAAgB,WAAW,EACzB,MAAM,gBACN,WAAW,OACX,cACA,YAAY,UACZ,sBACA,SACA,eAAe,YACf,aAAa,UACb,GAAG,SACe;CAClB,MAAM,UAAU,SAAO;CACvB,MAAM,YAAY,SAAO;CACzB,MAAM,WAAW,OAAO,KAAK;CAE7B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAG/D,MAAM,OAAO,WAAW,QAAS,kBAAkB;CACnD,MAAM,WACJ,MACA,OACA,WACG;AACH,iBAAe,MAAM,OAAO,OAAO;AAEnC,MAAI,mBAAmB,KAAA,EAAW,qBAAoB,KAAK;;CAG7D,MAAM,OAAO,YAAY;EACvB;EACA;EACA,cAAc;EACd,sBAAsB;EACtB,YAAY;GAEV,OAAO,EAAE;GACT,KAAK;IACH,WAAW,UAAU,SAAS,IAAI;IAClC,2BAA2B;IAC3B,SAAS;IACV,CAAC;GACF,MAAM,EAAE,SAAS,GAAG,CAAC;GAErB,MAAM,EACJ,SAAS,UACV,CAAC;GACH;EACF,CAAC;CAEF,MAAM,UAAU,KAAK;CACrB,MAAM,EAAE,OAAO,iBAAiB,cAAc,QAAQ;AAGtD,KAAI,iBAAiB,WACnB,OAAM,IAAI,MAAM,yDAAyD;CAE3E,MAAM,QAAQ,SAAS,SAAS;EAC9B,MAAM;EACN,SAAS,mBAAmB,KAAA;EAE5B,OAAO,uBAAuB,QAAQ,EAAE;EACxC,WAAW;EACZ,CAAC;CAEF,MAAM,QAAQ,SAAS,SAAS,EAC9B,SAAS,mBAAmB,KAAA,GAC7B,CAAC;CAGF,MAAM,aAAa,OAA2B,KAAA,EAAU;AACxD,uBAAsB,OAAO,aAAa,WAAW,QAAQ,EAAE,EAAE,CAAC;CAClE,MAAM,QAAQ,cAAc;EAC1B,MAAM,mBAAmB;AACvB,OAAI,WAAW,YAAY,KAAA,EACzB,YAAW,UAAU,OAAO,iBAAiB;AAC3C,YAAQ,MAAM;AACd,eAAW,UAAU,KAAA;MACpB,KAAK;OACL,QAAO,aAAa,WAAW,QAAQ;;AAE9C,SAAO,EAEL,WAAW;GACT,oBAAoB;AAClB,QAAI,WAAW,YAAY,KAAA,EACzB,QAAO,aAAa,WAAW,QAAQ;AACzC,eAAW,UAAU,OAAO,iBAAiB;AAC3C,aAAQ,KAAK;AACb,gBAAW,UAAU,KAAA;OACpB,IAAI;;GAET;GACA,eAAe;GAChB,EACF;IACA,EAAE,CAAC;CAEN,MAAM,UAAU,WAAW,QAAQ;CAEnC,MAAM,UAAU,WAAW,QAAQ,UAAU;CAE7C,MAAM,OAAO,QAAQ,SAAS;EAC5B,SAAS,YAAY;EACrB,MAAM;EACP,CAAC;CAoBF,MAAM,eAAe,gBAAgB;EACnC;EACA;EACA;EACA;EACA;EAnBY,cAEV,YAAY,UACR,EAEE,WAAW;GACT,mBAAmB;GACnB,oBAAoB,UAAU,YAAY,KAAA;GAC3C,EACF,GACD,EAAE,EACR;GAAC;GAAS;GAAS;GAAU,CAC9B;EASA,CAAC;AAEF,QAAO,eACE;EACL;EACA,WAAW,UAAU,YAAY,KAAA;EACjC;EACS;EACT;EACA;EACA,cAAc;GACZ,eAAe;GACf,aAAa;GACd;EACD,GAAG;EACH,GAAG;EACH;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}

package/dist/components/Typography/Body.cjs

@@ -1,12 +1,19 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Text = require("./Text.cjs");
-const Body = ({
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { ...props, children });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Text = require("./Text.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Typography/Body.tsx
+/**
+* @deprecated use `Text` instead
+*/
+var Body = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		...props,
+		children
+	});
 };
+//#endregion
 exports.Body = Body;
-//# sourceMappingURL=Body.cjs.map
+
+//# sourceMappingURL=Body.cjs.map

package/dist/components/Typography/Body.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.cjs","sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"names":["jsx","Text"],"mappings":";;;;AAcO,MAAM,OAAoD,CAAC;AAAA,EAChE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAOA,2BAAAA,IAACC,KAAAA,MAAA,EAAM,GAAG,OAAQ,SAAA,CAAS;AACpC;;"}
+{"version":3,"file":"Body.cjs","names":[],"sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAa,QAAqD,EAChE,UACA,GAAG,YACC;AACJ,QAAO,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;EAAM,GAAI;EAAQ;EAAgB,CAAA"}

package/dist/components/Typography/Body.js

@@ -1,12 +1,17 @@
-import { jsx } from "react/jsx-runtime";
 import { Text } from "./Text.js";
-const Body = ({
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(Text, { ...props, children });
-};
-export {
-  Body
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Typography/Body.tsx
+/**
+* @deprecated use `Text` instead
+*/
+var Body = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		children
+	});
 };
-//# sourceMappingURL=Body.js.map
+//#endregion
+export { Body };
+
+//# sourceMappingURL=Body.js.map

package/dist/components/Typography/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"names":[],"mappings":";;AAcO,MAAM,OAAoD,CAAC;AAAA,EAChE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAO,oBAAC,MAAA,EAAM,GAAG,OAAQ,SAAA,CAAS;AACpC;"}
+{"version":3,"file":"Body.js","names":[],"sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,QAAqD,EAChE,UACA,GAAG,YACC;AACJ,QAAO,oBAAC,MAAD;EAAM,GAAI;EAAQ;EAAgB,CAAA"}

package/dist/components/Typography/Heading.cjs

@@ -1,29 +1,100 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Typography = require("./Typography.cjs");
-const Text = require("./Text.cjs");
-const Heading = ({ as = "h1", children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography.Typography, { as, type: "heading", ...props, children });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_Text = require("./Text.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Typography/Heading.tsx
+/**
+* A heading component.
+*/
+var Heading = ({ as = "h1", children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		as,
+		type: "heading",
+		...props,
+		children
+	});
 };
-const H1 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: "h1", weight: "semibold", size: "xl", ...props, children });
+/**
+* A Heading level-1 styled component. Underlying HTML element can be changed
+* usign the `as` property.
+*/
+var H1 = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		as: "h1",
+		weight: "semibold",
+		size: "xl",
+		...props,
+		children
+	});
 };
-const H2 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: "h2", weight: "semibold", size: "lg", ...props, children });
+/**
+* A Heading level-2 styled component. Underlying HTML element can be changed
+* usign the `as` property.
+*/
+var H2 = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		as: "h2",
+		weight: "semibold",
+		size: "lg",
+		...props,
+		children
+	});
 };
-const H3 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: "h3", weight: "semibold", size: "md", ...props, children });
+/**
+* A Heading level-3 styled component. Underlying HTML element can be changed
+* usign the `as` property.
+*/
+var H3 = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		as: "h3",
+		weight: "semibold",
+		size: "md",
+		...props,
+		children
+	});
 };
-const H4 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: "h4", weight: "semibold", size: "sm", ...props, children });
+/**
+* A Heading level-4 styled component. Underlying HTML element can be changed
+* usign the `as` property.
+*/
+var H4 = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		as: "h4",
+		weight: "semibold",
+		size: "sm",
+		...props,
+		children
+	});
 };
-const H5 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h5", weight: "semibold", size: "lg", ...props, children });
+/**
+* A Heading level-5 styled component. Underlying HTML element can be changed
+* usign the `as` property.
+*/
+var H5 = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		as: "h5",
+		weight: "semibold",
+		size: "lg",
+		...props,
+		children
+	});
 };
-const H6 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h6", weight: "semibold", size: "md", ...props, children });
+/**
+* A Heading level-6 styled component. Underlying HTML element can be changed
+* usign the `as` property.
+*/
+var H6 = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		as: "h6",
+		weight: "semibold",
+		size: "md",
+		...props,
+		children
+	});
 };
+//#endregion
 exports.H1 = H1;
 exports.H2 = H2;
 exports.H3 = H3;
@@ -31,4 +102,5 @@ exports.H4 = H4;
 exports.H5 = H5;
 exports.H6 = H6;
 exports.Heading = Heading;
-//# sourceMappingURL=Heading.cjs.map
+
+//# sourceMappingURL=Heading.cjs.map

package/dist/components/Typography/Heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.cjs","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\nimport { Text } from \"./Text\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A heading component.\n */\nexport const Heading: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xs is not a valid heading size\n    size?: Exclude<TypographyProps[\"size\"], \"xs\">;\n  }\n> = ({ as = \"h1\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"heading\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n\ntype HeadingProps = Omit<\n  React.ComponentProps<typeof Heading>,\n  \"as\" | \"weight\" | \"size\"\n>;\n\n/**\n * A Heading level-1 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H1: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h1\" weight=\"semibold\" size=\"xl\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-2 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H2: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h2\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-3 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H3: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h3\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-4 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H4: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h4\" weight=\"semibold\" size=\"sm\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-5 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H5: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h5\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Text>\n  );\n};\n\n/**\n * A Heading level-6 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H6: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h6\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["Typography","jsx","Text"],"mappings":";;;;;AAiBO,MAAM,UAKT,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,YAAY;AACzC,wCACGA,WAAAA,YAAA,EAAW,IAAQ,MAAK,WAAW,GAAG,OACpC,UACH;AAEJ;AAWO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEC,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAACC,KAAAA,MAAA,EAAK,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACED,+BAACC,KAAAA,MAAA,EAAK,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SAAA,CACH;AAEJ;;;;;;;;"}
+{"version":3,"file":"Heading.cjs","names":[],"sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\nimport { Text } from \"./Text\";\nimport type { Size } from \"../../utils/size\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A heading component.\n */\nexport const Heading: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xs is not a valid heading size\n    size?: Exclude<Size, \"xs\">;\n  }\n> = ({ as = \"h1\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"heading\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n\ntype HeadingProps = Omit<\n  React.ComponentProps<typeof Heading>,\n  \"as\" | \"weight\" | \"size\"\n>;\n\n/**\n * A Heading level-1 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H1: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h1\" weight=\"semibold\" size=\"xl\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-2 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H2: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h2\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-3 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H3: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h3\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-4 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H4: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h4\" weight=\"semibold\" size=\"sm\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-5 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H5: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h5\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Text>\n  );\n};\n\n/**\n * A Heading level-6 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H6: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h6\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,WAKR,EAAE,KAAK,MAAM,UAAU,GAAG,YAAY;AACzC,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;EAAgB;EAAI,MAAK;EAAU,GAAI;EACpC;EACU,CAAA;;;;;;AAajB,IAAa,MAA8B,EAAE,UAAU,GAAG,YAAY;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAS,IAAG;EAAK,QAAO;EAAW,MAAK;EAAK,GAAI;EAC9C;EACO,CAAA;;;;;;AAQd,IAAa,MAA8B,EAAE,UAAU,GAAG,YAAY;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAS,IAAG;EAAK,QAAO;EAAW,MAAK;EAAK,GAAI;EAC9C;EACO,CAAA;;;;;;AAQd,IAAa,MAA8B,EAAE,UAAU,GAAG,YAAY;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAS,IAAG;EAAK,QAAO;EAAW,MAAK;EAAK,GAAI;EAC9C;EACO,CAAA;;;;;;AAQd,IAAa,MAA8B,EAAE,UAAU,GAAG,YAAY;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAS,IAAG;EAAK,QAAO;EAAW,MAAK;EAAK,GAAI;EAC9C;EACO,CAAA;;;;;;AAQd,IAAa,MAA8B,EAAE,UAAU,GAAG,YAAY;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;EAAM,IAAG;EAAK,QAAO;EAAW,MAAK;EAAK,GAAI;EAC3C;EACI,CAAA;;;;;;AAQX,IAAa,MAA8B,EAAE,UAAU,GAAG,YAAY;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;EAAM,IAAG;EAAK,QAAO;EAAW,MAAK;EAAK,GAAI;EAC3C;EACI,CAAA"}