@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAUlE,OAAO,2GAA2G,CAAA;AAClH,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,KAAK,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAC7C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACtC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC1C,CAAA;AAkCD,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAE3E,eAAO,MAAM,OAAO,2FAgKnB,CAAA"}

package/esm/Tooltip/Tooltip.js

@@ -0,0 +1,113 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
+import r from "./Tooltip.module.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes-BrRCxJ2E.css';/* empty css                                                                                                     */
+import i, { Children as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { getAnchoredPosition as d } from "@primer/behaviors";
+import { apply as f, isSupported as p } from "@oddbird/popover-polyfill/fn";
+//#region src/Tooltip/Tooltip.tsx
+var m = {
+	n: {
+		side: "outside-top",
+		align: "center"
+	},
+	e: {
+		side: "outside-right",
+		align: "center"
+	},
+	s: {
+		side: "outside-bottom",
+		align: "center"
+	},
+	w: {
+		side: "outside-left",
+		align: "center"
+	}
+}, h = {
+	"outside-top-center": "n",
+	"outside-right-center": "e",
+	"outside-bottom-center": "s",
+	"outside-left-center": "w"
+}, g = [
+	"a[href]",
+	"button:not(:disabled)",
+	"summary",
+	"select",
+	"input:not([type=hidden])",
+	"textarea"
+], _ = (e) => g.some((t) => e.matches(t)) || e.hasAttribute("role") && e.getAttribute("role") === "button", v = i.createContext({}), y = i.forwardRef(({ direction: g = "s", text: y, type: b = "description", children: x, id: S, className: C, ...w }, T) => {
+	let E = t(S), D = a.only(x) ?? null, O = n(T), k = s(null), A = s(null), [j, M] = c(g), N = i.useCallback(() => {
+		A.current &&= (clearTimeout(A.current), null), k.current && O.current && !k.current.matches(":popover-open") && k.current.showPopover();
+	}, [k, O]), P = i.useCallback(() => {
+		A.current = setTimeout(() => {
+			k.current && O.current && k.current.matches(":popover-open") && k.current.hidePopover();
+		}, 200);
+	}, [k, O]);
+	return o(() => () => {
+		A.current && clearTimeout(A.current);
+	}, [A]), o(() => {
+		if (!k.current || !O.current) return;
+		let e = _(O.current), t = O.current.childNodes, n = Array.from(t).some((e) => e instanceof HTMLElement && _(e));
+		if (!(e || n) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead."), b === "label") {
+			let e = O.current.hasAttribute("aria-label"), t = Array.from(O.current.childNodes).some((e) => e instanceof HTMLElement && e.hasAttribute("aria-label"));
+			(e || t) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.");
+		}
+		typeof window < "u" && (p() || f());
+		let r = k.current, i = O.current;
+		r.setAttribute("popover", "auto");
+		let a = {
+			side: m[g].side,
+			align: m[g].align,
+			anchorOffset: 8
+		}, o = () => {
+			let { top: e, left: t, anchorAlign: n, anchorSide: o } = d(r, i, a);
+			r.style.top = `${e}px`, r.style.left = `${t}px`;
+			let s = h[`${o}-${n}`];
+			M(s);
+		};
+		return r.addEventListener("toggle", o), () => {
+			r.removeEventListener("toggle", o);
+		};
+	}, [
+		k,
+		O,
+		g,
+		b
+	]), /* @__PURE__ */ u(v.Provider, {
+		value: { tooltipId: E },
+		children: [D && i.cloneElement(D, {
+			ref: O,
+			"aria-describedby": b === "description" ? E : D.props["aria-describedby"],
+			"aria-labelledby": b === "label" ? E : D.props["aria-labelledby"],
+			onBlur: (e) => {
+				P(), D.props.onBlur?.(e);
+			},
+			onFocus: (e) => {
+				N(), D.props.onFocus?.(e);
+			},
+			onMouseEnter: (e) => {
+				N(), D.props.onMouseEnter?.(e);
+			},
+			onMouseLeave: (e) => {
+				P(), D.props.onMouseLeave?.(e);
+			}
+		}), /* @__PURE__ */ l("div", {
+			className: e(r.Tooltip, C),
+			ref: k,
+			"data-direction": j,
+			...w,
+			role: b === "description" ? "tooltip" : void 0,
+			"aria-hidden": b === "label" ? !0 : void 0,
+			id: E,
+			onMouseEnter: N,
+			onMouseLeave: P,
+			children: y
+		})]
+	});
+});
+//#endregion
+export { y as Tooltip, v as TooltipContext };
+
+//# sourceMappingURL=Tooltip.js.map

package/esm/Tooltip/Tooltip.js.map

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

package/esm/Tooltip/Tooltip.module-5Km7qGR5.css

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

package/esm/Tooltip/Tooltip.module.js

@@ -0,0 +1,9 @@
+import './Tooltip.module-5Km7qGR5.css';var e = {
+	Tooltip: "Primer_Brand__Tooltip-module__Tooltip___0Eipx",
+	":popover-open": "Primer_Brand__Tooltip-module__:popover-open___GpZlX",
+	"tooltip-appear": "Primer_Brand__Tooltip-module__tooltip-appear___hAyFD"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Tooltip.module.js.map

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

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

package/esm/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/esm/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/esm/VideoPlayer/VideoPlayer.d.ts

@@ -0,0 +1,29 @@
+import React, { type HTMLProps, type FunctionComponent } from 'react';
+import { type AnimateProps } from '../animation';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css';
+type VideoPlayerProps = {
+    title: string;
+    visuallyHiddenTitle?: boolean;
+    showBranding?: boolean;
+    animate?: AnimateProps;
+    showPlayPauseButton?: boolean;
+    showSeekControl?: boolean;
+    showCCButton?: boolean;
+    showMuteButton?: boolean;
+    showVolumeControl?: boolean;
+    showFullScreenButton?: boolean;
+    playIcon?: FunctionComponent;
+} & HTMLProps<HTMLVideoElement>;
+export declare const VideoPlayer: React.ForwardRefExoticComponent<Omit<VideoPlayerProps, "ref"> & React.RefAttributes<HTMLVideoElement>> & {
+    Source: (props: React.HTMLProps<HTMLSourceElement>) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ kind, ...rest }: React.HTMLProps<HTMLTrackElement>) => import("react/jsx-runtime").JSX.Element;
+    Provider: React.ForwardRefExoticComponent<{
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLVideoElement>>;
+};
+export {};
+//# sourceMappingURL=VideoPlayer.d.ts.map

package/esm/VideoPlayer/VideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../src/VideoPlayer/VideoPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsC,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAC,KAAK,YAAY,EAAC,MAAM,cAAc,CAAA;AAc9C;;GAEG;AACH,OAAO,mGAAmG,CAAA;AAC1G,OAAO,gHAAgH,CAAA;AAQvH,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwI/B,eAAO,MAAM,WAAW;oBAlBU,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;+BAEZ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;;;;CAoBvF,CAAA"}

package/esm/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,109 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
+import { Text as n } from "../Text/Text.js";
+import { PlayIcon as r } from "./components/PlayIcon/PlayIcon.js";
+import { MarkGithubIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import a from "./VideoPlayer.module.js";
+import { VideoContext as o, VideoProvider as s, useVideo as c } from "./hooks/useVideo.js";
+import { Captions as l } from "./components/Captions/Captions.js";
+import { CCButton as u } from "./components/CCButton/CCButton.js";
+import { ControlsBar as d } from "./components/ControlsBar/ControlsBar.js";
+import { useVideoResizeObserver as f } from "./hooks/useVideoResizeObserver.js";
+import { FullScreenButton as p } from "./components/FullScreenButton/FullScreenButton.js";
+import { MuteButton as m } from "./components/MuteButton/MuteButton.js";
+import { PlayPauseButton as h } from "./components/PlayPauseButton/PlayPauseButton.js";
+import { SeekControl as g } from "./components/SeekControl/SeekControl.js";
+import { VolumeControl as _ } from "./components/VolumeControl/VolumeControl.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes-CTkp-z-l.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/video-player/base-Bs0Tq22P.css';/* empty css                                                                                             */
+/* empty css                                                                                                          */
+import { forwardRef as v, useCallback as y, useContext as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/VideoPlayer/VideoPlayer.tsx
+var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(r, { className: a.VideoPlayer__playButton }), ...M }, N) => {
+	let { ccEnabled: P, fullscreenRef: F, isPlaying: I, ref: L, togglePlaying: R } = c(), z = t(y((e) => {
+		w(N, e);
+	}, [N])), B = y((e) => {
+		w(L, e), w(z, e);
+	}, [L, z]), V = f({
+		videoWrapperRef: F,
+		className: a["VideoPlayer__container--small"]
+	}), H = T || E, U = D || O || k || A, W = H || U;
+	return /* @__PURE__ */ S("div", {
+		"data-video-player-container": !0,
+		className: a.VideoPlayer__container,
+		ref: F,
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: a.VideoPlayer__overlayContainer,
+				children: [
+					/* @__PURE__ */ S("video", {
+						ref: B,
+						title: o,
+						controls: !1,
+						className: e(a.VideoPlayer, C),
+						...M,
+						children: [b, /* @__PURE__ */ x("track", { kind: "captions" })]
+					}),
+					v || !s ? /* @__PURE__ */ S("div", {
+						className: e(a.VideoPlayer__title, I && a["VideoPlayer__title--hidden"]),
+						children: [v && /* @__PURE__ */ x(i, {
+							size: 40,
+							"aria-label": "GitHub logo"
+						}), !s && /* @__PURE__ */ x(n, {
+							size: "400",
+							weight: "medium",
+							className: a.VideoPlayer__controlTextColor,
+							children: o
+						})]
+					}) : null,
+					/* @__PURE__ */ x("button", {
+						className: e(a.VideoPlayer__playButtonOverlay, I && a["VideoPlayer__playButtonOverlay--transparent"]),
+						onClick: R,
+						"aria-label": I ? "Pause" : "Play",
+						children: !I && /* @__PURE__ */ x(j, {})
+					})
+				]
+			}),
+			P && /* @__PURE__ */ x(l, {}),
+			W && /* @__PURE__ */ S(d, { children: [H && /* @__PURE__ */ S("div", {
+				className: a.VideoPlayer__controlsBar__row1,
+				children: [T && /* @__PURE__ */ x(h, {}), E && /* @__PURE__ */ x(g, {})]
+			}), U && /* @__PURE__ */ S("div", {
+				className: a.VideoPlayer__controlsBar__row2,
+				children: [
+					D && /* @__PURE__ */ x(u, {}),
+					O && /* @__PURE__ */ x(m, {}),
+					k && !V && /* @__PURE__ */ x(_, {}),
+					A && /* @__PURE__ */ x(p, {})
+				]
+			})] })
+		]
+	});
+});
+function w(e, t) {
+	if (e) {
+		if (typeof e == "function") {
+			e(t);
+			return;
+		}
+		e.current = t;
+	}
+}
+var T = (e) => /* @__PURE__ */ x("source", { ...e }), E = ({ kind: e = "captions", ...t }) => /* @__PURE__ */ x("track", {
+	kind: e,
+	...t
+}), D = v((e, t) => b(o) ? /* @__PURE__ */ x(C, {
+	ref: t,
+	...e
+}) : /* @__PURE__ */ x(s, { children: /* @__PURE__ */ x(C, {
+	ref: t,
+	...e
+}) })), O = Object.assign(D, {
+	Source: T,
+	Track: E,
+	Provider: s
+});
+//#endregion
+export { O as VideoPlayer };
+
+//# sourceMappingURL=VideoPlayer.js.map

package/esm/VideoPlayer/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","names":[],"sources":["../../src/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useContext, type HTMLProps, type FunctionComponent} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../Text'\nimport {type AnimateProps} from '../animation'\nimport {\n  Captions,\n  CCButton,\n  ControlsBar,\n  FullScreenButton,\n  MuteButton,\n  PlayIcon as DefaultPlayIcon,\n  PlayPauseButton,\n  SeekControl,\n  VolumeControl,\n} from './components'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './VideoPlayer.module.css'\nimport {useVideoResizeObserver} from './hooks/'\nimport {useVideo, VideoContext, VideoProvider} from './hooks/useVideo'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\ntype VideoPlayerProps = {\n  title: string\n  visuallyHiddenTitle?: boolean\n  showBranding?: boolean\n  animate?: AnimateProps\n  showPlayPauseButton?: boolean\n  showSeekControl?: boolean\n  showCCButton?: boolean\n  showMuteButton?: boolean\n  showVolumeControl?: boolean\n  showFullScreenButton?: boolean\n  playIcon?: FunctionComponent\n} & HTMLProps<HTMLVideoElement>\n\nconst Root = forwardRef<HTMLVideoElement, VideoPlayerProps>(\n  (\n    {\n      title,\n      visuallyHiddenTitle,\n      showBranding = true,\n      children,\n      className,\n      showPlayPauseButton = true,\n      showSeekControl = true,\n      showCCButton = true,\n      showMuteButton = true,\n      showVolumeControl = true,\n      showFullScreenButton = true,\n      playIcon: PlayIcon = () => <DefaultPlayIcon className={styles.VideoPlayer__playButton} />,\n      ...rest\n    }: VideoPlayerProps,\n    forwardedRef,\n  ) => {\n    const videoContext = useVideo()\n    const {ccEnabled, fullscreenRef, isPlaying, ref, togglePlaying} = videoContext\n    const forwardedRefCallback = useCallback(\n      (node: HTMLVideoElement | null) => {\n        assignRef(forwardedRef, node)\n      },\n      [forwardedRef],\n    )\n    const providedRef = useProvidedRefOrCreate<HTMLVideoElement>(forwardedRefCallback)\n\n    const setVideoElementRef = useCallback(\n      (node: HTMLVideoElement | null) => {\n        assignRef(ref, node)\n        assignRef(providedRef, node)\n      },\n      [ref, providedRef],\n    )\n\n    const isSmall = useVideoResizeObserver({\n      videoWrapperRef: fullscreenRef,\n      className: styles['VideoPlayer__container--small'],\n    })\n\n    const showControlsRow1 = showPlayPauseButton || showSeekControl\n    const showControlsRow2 = showCCButton || showMuteButton || showVolumeControl || showFullScreenButton\n    const showControlsBar = showControlsRow1 || showControlsRow2\n\n    return (\n      <div data-video-player-container className={styles.VideoPlayer__container} ref={fullscreenRef}>\n        <div className={styles.VideoPlayer__overlayContainer}>\n          <video\n            ref={setVideoElementRef}\n            title={title}\n            controls={false}\n            className={clsx(styles.VideoPlayer, className)}\n            {...rest}\n          >\n            {children}\n            <track kind=\"captions\" />\n          </video>\n          {showBranding || !visuallyHiddenTitle ? (\n            <div className={clsx(styles.VideoPlayer__title, isPlaying && styles['VideoPlayer__title--hidden'])}>\n              {showBranding && <MarkGithubIcon size={40} aria-label=\"GitHub logo\" />}\n              {!visuallyHiddenTitle && (\n                <Text size=\"400\" weight=\"medium\" className={styles.VideoPlayer__controlTextColor}>\n                  {title}\n                </Text>\n              )}\n            </div>\n          ) : null}\n          <button\n            className={clsx(\n              styles.VideoPlayer__playButtonOverlay,\n              isPlaying && styles['VideoPlayer__playButtonOverlay--transparent'],\n            )}\n            onClick={togglePlaying}\n            aria-label={isPlaying ? 'Pause' : 'Play'}\n          >\n            {!isPlaying && <PlayIcon />}\n          </button>\n        </div>\n\n        {ccEnabled && <Captions />}\n        {showControlsBar && (\n          <ControlsBar>\n            {showControlsRow1 && (\n              <div className={styles['VideoPlayer__controlsBar__row1']}>\n                {showPlayPauseButton && <PlayPauseButton />}\n                {showSeekControl && <SeekControl />}\n              </div>\n            )}\n            {showControlsRow2 && (\n              <div className={styles['VideoPlayer__controlsBar__row2']}>\n                {showCCButton && <CCButton />}\n                {showMuteButton && <MuteButton />}\n                {showVolumeControl && !isSmall && <VolumeControl />}\n                {showFullScreenButton && <FullScreenButton />}\n              </div>\n            )}\n          </ControlsBar>\n        )}\n      </div>\n    )\n  },\n)\n\nfunction assignRef<T>(targetRef: React.RefObject<T> | React.Ref<T> | null | undefined, value: T | null) {\n  if (!targetRef) return\n\n  if (typeof targetRef === 'function') {\n    targetRef(value)\n    return\n  }\n\n  ;(targetRef as React.MutableRefObject<T | null>).current = value\n}\n\nconst VideoPlayerSource = (props: React.HTMLProps<HTMLSourceElement>) => <source {...props} />\n\nconst VideoPlayerTrack = ({kind = 'captions', ...rest}: React.HTMLProps<HTMLTrackElement>) => (\n  <track kind={kind} {...rest} />\n)\n\nconst RootWithProvider = forwardRef<HTMLVideoElement, VideoPlayerProps>((props, ref) => {\n  const context = useContext(VideoContext)\n\n  return context ? (\n    <Root ref={ref} {...props} />\n  ) : (\n    <VideoProvider>\n      <Root ref={ref} {...props} />\n    </VideoProvider>\n  )\n})\n\nexport const VideoPlayer = Object.assign(RootWithProvider, {\n  Source: VideoPlayerSource,\n  Track: VideoPlayerTrack,\n  Provider: VideoProvider,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2CA,IAAM,IAAO,GAET,EACE,UACA,wBACA,kBAAe,IACf,aACA,cACA,yBAAsB,IACtB,qBAAkB,IAClB,kBAAe,IACf,oBAAiB,IACjB,uBAAoB,IACpB,0BAAuB,IACvB,UAAU,UAAiB,kBAAC,GAAD,EAAiB,WAAW,EAAO,yBAA2B,CAAA,EACzF,GAAG,KAEL,MACG;CAEH,IAAM,EAAC,cAAW,kBAAe,cAAW,QAAK,qBAD5B,GAC6C,EAO5D,IAAc,EANS,GAC1B,MAAkC;AACjC,IAAU,GAAc,EAAK;IAE/B,CAAC,EAAa,CAE6C,CAAqB,EAE5E,IAAqB,GACxB,MAAkC;AAEjC,EADA,EAAU,GAAK,EAAK,EACpB,EAAU,GAAa,EAAK;IAE9B,CAAC,GAAK,EAAY,CACnB,EAEK,IAAU,EAAuB;EACrC,iBAAiB;EACjB,WAAW,EAAO;EACnB,CAAC,EAEI,IAAmB,KAAuB,GAC1C,IAAmB,KAAgB,KAAkB,KAAqB,GAC1E,IAAkB,KAAoB;AAE5C,QACE,kBAAC,OAAD;EAAK,+BAAA;EAA4B,WAAW,EAAO;EAAwB,KAAK;YAAhF;GACE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,SAAD;MACE,KAAK;MACE;MACP,UAAU;MACV,WAAW,EAAK,EAAO,aAAa,EAAU;MAC9C,GAAI;gBALN,CAOG,GACD,kBAAC,SAAD,EAAO,MAAK,YAAa,CAAA,CACnB;;KACP,KAAgB,CAAC,IAChB,kBAAC,OAAD;MAAK,WAAW,EAAK,EAAO,oBAAoB,KAAa,EAAO,8BAA8B;gBAAlG,CACG,KAAgB,kBAAC,GAAD;OAAgB,MAAM;OAAI,cAAW;OAAgB,CAAA,EACrE,CAAC,KACA,kBAAC,GAAD;OAAM,MAAK;OAAM,QAAO;OAAS,WAAW,EAAO;iBAChD;OACI,CAAA,CAEL;UACJ;KACJ,kBAAC,UAAD;MACE,WAAW,EACT,EAAO,gCACP,KAAa,EAAO,+CACrB;MACD,SAAS;MACT,cAAY,IAAY,UAAU;gBAEjC,CAAC,KAAa,kBAAC,GAAD,EAAY,CAAA;MACpB,CAAA;KACL;;GAEL,KAAa,kBAAC,GAAD,EAAY,CAAA;GACzB,KACC,kBAAC,GAAD,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KAAuB,kBAAC,GAAD,EAAmB,CAAA,EAC1C,KAAmB,kBAAC,GAAD,EAAe,CAAA,CAC/B;OAEP,KACC,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACG,KAAgB,kBAAC,GAAD,EAAY,CAAA;KAC5B,KAAkB,kBAAC,GAAD,EAAc,CAAA;KAChC,KAAqB,CAAC,KAAW,kBAAC,GAAD,EAAiB,CAAA;KAClD,KAAwB,kBAAC,GAAD,EAAoB,CAAA;KACzC;MAEI,EAAA,CAAA;GAEZ;;EAGX;AAED,SAAS,EAAa,GAAiE,GAAiB;AACjG,QAEL;MAAI,OAAO,KAAc,YAAY;AACnC,KAAU,EAAM;AAChB;;AAGA,IAA+C,UAAU;;;AAG7D,IAAM,KAAqB,MAA8C,kBAAC,UAAD,EAAQ,GAAI,GAAS,CAAA,EAExF,KAAoB,EAAC,UAAO,YAAY,GAAG,QAC/C,kBAAC,SAAD;CAAa;CAAM,GAAI;CAAQ,CAAA,EAG3B,IAAmB,GAAgD,GAAO,MAC9D,EAAW,EAEpB,GACL,kBAAC,GAAD;CAAW;CAAK,GAAI;CAAS,CAAA,GAE7B,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;CAAW;CAAK,GAAI;CAAS,CAAA,EACf,CAAA,CAElB,EAEW,IAAc,OAAO,OAAO,GAAkB;CACzD,QAAQ;CACR,OAAO;CACP,UAAU;CACX,CAAC"}

package/esm/VideoPlayer/VideoPlayer.module-BpVcE2WB.css

@@ -0,0 +1 @@
+.Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu{border-radius:var(--brand-borderRadius-medium);background-color:var(--base-color-scale-black-0);flex-direction:column;width:100%;display:flex;overflow:hidden}.Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ{flex:1;height:100%;position:relative}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu{border:var(--brand-borderWidth-thin) solid ButtonBorder}}.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9{--brand-VideoPlayer-controls-min-height:56px;width:100%;max-height:calc(100vh - 56px);max-height:calc(100vh - var(--brand-VideoPlayer-controls-min-height));margin:0 auto;display:block}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--fullscreen___MChxa .Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9{height:100%;position:absolute}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2{z-index:1;background:#0003;border:none;width:100%;height:100%;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2 svg{top:calc(var(--brand-VideoPlayer-controls-min-height) / 2);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay--transparent___0UmfX{background:0 0}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2:focus-visible{outline:var(--brand-borderWidth-thicker) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY{width:25%;height:25%;max-width:var(--brand-VideoPlayer-playButton-width);max-height:var(--brand-VideoPlayer-playButton-height);opacity:.8;color:var(--brand-videoPlayer-playButton-fgColor-rest)}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY{color:highlight;opacity:1}}.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_{transition:var(--brand-VideoPlayer-transition);z-index:2;width:100%;padding:var(--base-size-16);color:var(--brand-videoPlayer-title-fgColor);grid-gap:var(--base-size-12);background:var(--brand-videoPlayer-title-bgColor);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);grid-template-columns:auto auto;justify-content:flex-start;align-items:center;display:grid;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_.Primer_Brand__VideoPlayer-module__VideoPlayer__title--hidden___t7cGG{opacity:0;visibility:hidden}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_{color:canvastext;background:canvas}}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd{min-height:var(--brand-VideoPlayer-controls-min-height);grid-gap:var(--base-size-16);justify-content:space-between;align-items:center;gap:var(--base-size-16);border-bottom-right-radius:var(--brand-borderRadius-medium);border-bottom-left-radius:var(--brand-borderRadius-medium);width:100%;padding:var(--base-size-12) var(--base-size-16);pointer-events:all;opacity:1;grid-template-columns:1fr;grid-auto-flow:column;display:grid}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo,.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds{align-items:center;gap:var(--base-size-16);display:flex}@media (width<=34rem){.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd{gap:var(--base-size-12);grid-template-rows:auto auto;grid-template-columns:1fr;grid-auto-flow:row}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds{justify-self:space-evenly;justify-content:space-evenly;width:100%}}.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO:focus,.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO:focus-within{bottom:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5{cursor:pointer;width:auto;height:var(--base-size-24);box-sizing:content-box;background:0 0;border:none;padding:0;position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-6);opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4):focus-visible{border-radius:var(--brand-borderRadius-small)}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5 svg{color:var(--brand-videoPlayer-controls-fgColor)}.Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI{align-items:center;gap:var(--base-size-16);flex:1;display:flex}.Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX{color:var(--brand-videoPlayer-controls-fgColor)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC{display:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto{height:var(--base-size-6);flex:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4{border-radius:var(--brand-borderRadius-medium);padding:.125rem var(--base-size-4);border:.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);background:var(--brand-videoPlayer-closedCaption-bgColor-enabled);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6{background-color:#0000}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:var(--brand-videoPlayer-closedCaption-fgColor-enabled);line-height:25px}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6 .Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:var(--brand-videoPlayer-closedCaption-fgColor-disabled)}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5 svg{color:buttontext}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:focus-visible{outline-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:focus-visible{outline:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6){background:highlight;border-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6) .Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:highlighttext;background-color:highlight}}.Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en{width:100%;min-width:var(--brand-VideoPlayer-range-minWidth);height:var(--brand-VideoPlayer-range-height);background-color:var(--brand-videoPlayer-range-bgColor-default);border-radius:var(--brand-VideoPlayer-range-borderRadius);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ{appearance:none;z-index:1;width:100%;height:var(--brand-VideoPlayer-range-height);cursor:pointer;opacity:0;background:0 0;margin:0;display:block;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-8);border-radius:var(--brand-borderRadius-small);opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ{opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ::-moz-range-track{background:0 0;border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ::-webkit-slider-runnable-track{background:0 0;border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr{appearance:none;border-radius:var(--brand-VideoPlayer-range-borderRadius);width:100%;height:var(--brand-VideoPlayer-range-height);border:0;position:absolute;top:0;left:0;overflow:hidden}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-bar{background-color:var(--brand-videoPlayer-range-bgColor-default)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-value{background-color:var(--brand-videoPlayer-range-bgColor-progress)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-moz-progress-bar{background:var(--brand-videoPlayer-range-bgColor-progress)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-lower{background-color:var(--brand-videoPlayer-range-bgColor-progress);border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-upper{background-color:var(--brand-videoPlayer-range-bgColor-default);border:none}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-bar{background-color:fieldtext}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-value{background-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-moz-progress-bar{background:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-lower{background-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-upper{background-color:fieldtext}}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV{z-index:2;width:var(--base-size-8);height:var(--base-size-8);margin-bottom:var(--base-size-16);opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%,50%)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV:before{bottom:calc(var(--base-size-4) * -1);width:var(--base-size-12);height:var(--base-size-12);content:"";background:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-small);position:absolute;left:0;transform:rotate(45deg)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO{z-index:-1;box-shadow:0 var(--base-size-4) var(--base-size-4) #1b1f2433;padding:var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);border-radius:var(--brand-borderRadius-medium);background:#fff;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc{color:var(--base-color-scale-gray-9)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip-visible___nqoFm{opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg{color:var(--base-color-scale-white-0)}.Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol{white-space:nowrap}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_ span{font-weight:var(--brand-text-weight-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300);letter-spacing:var(--brand-text-letterSpacing-300)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_ svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO{position:initial;position:static}@media (prefers-reduced-motion:reduce){.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9:before,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9:after,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/VideoPlayer/VideoPlayer.module.js

@@ -0,0 +1,37 @@
+import './VideoPlayer.module-BpVcE2WB.css';var e = {
+	VideoPlayer__container: "Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu",
+	VideoPlayer__overlayContainer: "Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ",
+	VideoPlayer: "Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9",
+	"VideoPlayer__container--fullscreen": "Primer_Brand__VideoPlayer-module__VideoPlayer__container--fullscreen___MChxa",
+	VideoPlayer__playButtonOverlay: "Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2",
+	"VideoPlayer__playButtonOverlay--transparent": "Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay--transparent___0UmfX",
+	VideoPlayer__playButton: "Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY",
+	VideoPlayer__title: "Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_",
+	"VideoPlayer__title--hidden": "Primer_Brand__VideoPlayer-module__VideoPlayer__title--hidden___t7cGG",
+	VideoPlayer__controlsBar: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd",
+	VideoPlayer__controlsBar__row1: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo",
+	VideoPlayer__controlsBar__row2: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds",
+	VideoPlayer__controls: "Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO",
+	VideoPlayer__iconControl: "Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5",
+	VideoPlayer__closedCaption: "Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4",
+	VideoPlayer__seek: "Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI",
+	VideoPlayer__progressTime: "Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX",
+	"VideoPlayer__container--small": "Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d",
+	VideoPlayer__totalTime: "Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC",
+	VideoPlayer__progressBar: "Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto",
+	VideoPlayer__ccOff: "Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6",
+	VideoPlayer__ccText: "Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa",
+	VideoPlayer__range: "Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en",
+	VideoPlayer__rangeInput: "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ",
+	VideoPlayer__rangeProgress: "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr",
+	VideoPlayer__tooltip: "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV",
+	VideoPlayer__tooltipContent: "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO",
+	VideoPlayer__tooltipText: "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc",
+	"VideoPlayer__tooltip-visible": "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip-visible___nqoFm",
+	VideoPlayer__controlTextColor: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg",
+	VideoPlayer__seekTime: "Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=VideoPlayer.module.js.map

package/esm/VideoPlayer/VideoPlayer.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.module.js","names":[],"sources":["../../src/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/* ---------------------------------------------------------- */\n/* VideoPlayer Contents                                       */\n/* ---------------------------------------------------------- */\n/* Table of contents:                                         */\n/* 1. Container                                               */\n/* 2. Player                                                  */\n/* 2. Center Play Button                                      */\n/* 4. Title                                                   */\n/* 5. Controls                                                */\n/* 6. Range Element                                           */\n/* 7. Tooltip                                                 */\n/* 8. Captions                                                */\n/* ---------------------------------------------------------- */\n\n/* ---------------------------------------------------------- */\n/* 1. Container                                               */\n/* ---------------------------------------------------------- */\n\n.VideoPlayer__container {\n  width: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  background-color: var(--base-color-scale-black-0);\n  display: flex;\n  flex-direction: column;\n}\n\n.VideoPlayer__overlayContainer {\n  flex: 1;\n  position: relative;\n  height: 100%;\n}\n\n@media (forced-colors: active) {\n  .VideoPlayer__container {\n    border: var(--brand-borderWidth-thin) solid ButtonBorder;\n  }\n}\n\n/* ---------------------------------------------------------- */\n/* 2. Player                                                  */\n/* ---------------------------------------------------------- */\n\n.VideoPlayer {\n  /* Private variable used for internal calculations */\n  --brand-VideoPlayer-controls-min-height: 56px;\n  width: 100%;\n  max-height: calc(100vh - var(--brand-VideoPlayer-controls-min-height));\n  margin: 0 auto;\n  display: block;\n}\n\n.VideoPlayer__container--fullscreen .VideoPlayer {\n  position: absolute;\n  height: 100%;\n}\n\n/* ---------------------------------------------------------- */\n/* 3. Center Play Button                                      */\n/* ---------------------------------------------------------- */\n\n.VideoPlayer__playButtonOverlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #00000033; /* TODO Use a token for this once v8 migration has been completed */\n  border: none;\n  z-index: 1;\n}\n\n.VideoPlayer__playButtonOverlay svg {\n  position: relative;\n  top: calc(var(--brand-VideoPlayer-controls-min-height) / 2);\n}\n\n.VideoPlayer__playButtonOverlay.VideoPlayer__playButtonOverlay--transparent {\n  background: transparent;\n}\n\n.VideoPlayer__playButtonOverlay:focus-visible {\n  outline: var(--brand-borderWidth-thicker) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.VideoPlayer__playButton {\n  width: 25%;\n  height: 25%;\n  max-width: var(--brand-VideoPlayer-playButton-width);\n  max-height: var(--brand-VideoPlayer-playButton-height);\n  opacity: 0.8;\n  color: var(--brand-videoPlayer-playButton-fgColor-rest);\n}\n\n@media (forced-colors: active) {\n  .VideoPlayer__playButton {\n    color: Highlight;\n    opacity: 1;\n  }\n}\n\n/* ---------------------------------------------------------- */\n/* 4. Title                                                   */\n/* ---------------------------------------------------------- */\n\n.VideoPlayer__title {\n  transition: var(--brand-VideoPlayer-transition);\n  top: 0;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  z-index: 2;\n  padding: var(--base-size-16);\n  color: var(--brand-videoPlayer-title-fgColor);\n  display: grid;\n  align-items: center;\n  justify-content: flex-start;\n  grid-gap: var(--base-size-12);\n  grid-template-columns: auto auto;\n  background: var(--brand-videoPlayer-title-bgColor);\n  transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.VideoPlayer__title.VideoPlayer__title--hidden {\n  opacity: 0;\n  visibility: hidden;\n}\n\n@media (forced-colors: active) {\n  .VideoPlayer__title {\n    background: Canvas;\n    color: CanvasText;\n  }\n}\n\n/* ---------------------------------------------------------- */\n/* 5. Controls                                                */\n/* ---------------------------------------------------------- */\n\n.VideoPlayer__controlsBar {\n  min-height: var(--brand-VideoPlayer-controls-min-height);\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-auto-flow: column;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-16);\n  border-bottom-right-radius: var(--brand-borderRadius-medium);\n  border-bottom-left-radius: var(--brand-borderRadius-medium);\n  width: 100%;\n  padding: var(--base-size-12) var(--base-size-16);\n  pointer-events: all;\n  opacity: 1;\n}\n\n.VideoPlayer__controlsBar__row1,\n.VideoPlayer__controlsBar__row2 {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-16);\n}\n\n@media (max-width: 34rem) {\n  .VideoPlayer__controlsBar {\n    grid-template-columns: 1fr;\n    grid-auto-flow: row;\n    grid-template-rows: auto auto;\n    gap: var(--base-size-12);\n  }\n\n  .VideoPlayer__controlsBar__row2 {\n    justify-self: space-evenly;\n    justify-content: space-evenly;\n    width: 100%;\n  }\n}\n\n.VideoPlayer__controls:focus,\n.VideoPlayer__controls:focus-within {\n  bottom: 0;\n}\n\n.VideoPlayer__iconControl {\n  width: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  height: var(--base-size-24);\n  box-sizing: content-box;\n  position: relative;\n  padding: 0;\n}\n\n.VideoPlayer__iconControl:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-6);\n  opacity: 1;\n}\n\n.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.VideoPlayer__iconControl svg {\n  color: var(--brand-videoPlayer-controls-fgColor);\n}\n\n.VideoPlayer__seek {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-16);\n}\n\n.VideoPlayer__progressTime {\n  color: var(--brand-videoPlayer-controls-fgColor);\n}\n\n.VideoPlayer__container--small .VideoPlayer__totalTime {\n  display: none;\n}\n\n.VideoPlayer__progressBar {\n  flex: 1;\n  height: var(--base-size-6);\n}\n\n.VideoPlayer__closedCaption {\n  border-radius: var(--brand-borderRadius-medium);\n  padding: 0.125rem var(--base-size-4);\n  border: 0.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);\n  background: var(--brand-videoPlayer-closedCaption-bgColor-enabled);\n  position: relative;\n}\n\n.VideoPlayer__ccOff {\n  background-color: transparent;\n}\n\n.VideoPlayer__ccText {\n  color: var(--brand-videoPlayer-closedCaption-fgColor-enabled);\n  line-height: 25px; /* visual alignment */\n}\n\n.VideoPlayer__ccOff .VideoPlayer__ccText {\n  color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);\n}\n\n@media (forced-colors: active) {\n  .VideoPlayer__iconControl svg {\n    color: ButtonText;\n  }\n\n  .VideoPlayer__iconControl:focus-visible {\n    outline-color: Highlight;\n  }\n\n  .VideoPlayer__closedCaption:focus-visible {\n    outline: none;\n  }\n\n  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) {\n    background: Highlight;\n    border-color: Highlight;\n  }\n\n  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) .VideoPlayer__ccText {\n    background-color: Highlight;\n    color: HighlightText;\n  }\n}\n\n/* ---------------------------------------------------------- */\n/* 6. Range Element                                           */\n/* ---------------------------------------------------------- */\n.VideoPlayer__range {\n  position: relative;\n  width: 100%;\n  min-width: var(--brand-VideoPlayer-range-minWidth);\n  height: var(--brand-VideoPlayer-range-height);\n  background-color: var(--brand-videoPlayer-range-bgColor-default);\n  border-radius: var(--brand-VideoPlayer-range-borderRadius);\n}\n\n.VideoPlayer__rangeInput {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  z-index: 1;\n  display: block;\n  width: 100%;\n  height: var(--brand-VideoPlayer-range-height);\n  margin: 0;\n  cursor: pointer;\n  background: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n}\n\n.VideoPlayer__rangeInput:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-8);\n  border-radius: var(--brand-borderRadius-small);\n  opacity: 1;\n}\n\n.VideoPlayer__range:hover .VideoPlayer__rangeInput {\n  opacity: 1;\n}\n\n.VideoPlayer__rangeInput::-moz-range-track,\n.VideoPlayer__rangeInput::-webkit-slider-runnable-track {\n  background: transparent;\n  border: none;\n}\n\n.VideoPlayer__rangeProgress {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  overflow: hidden;\n  border: 0;\n  border-radius: var(--brand-VideoPlayer-range-borderRadius);\n  width: 100%;\n  position: absolute;\n  height: var(--brand-VideoPlayer-range-height);\n  top: 0;\n  left: 0;\n}\n\n.VideoPlayer__rangeProgress::-webkit-progress-bar {\n  background-color: var(--brand-videoPlayer-range-bgColor-default);\n}\n\n.VideoPlayer__rangeProgress::-webkit-progress-value {\n  background-color: var(--brand-videoPlayer-range-bgColor-progress);\n}\n\n.VideoPlayer__rangeProgress::-moz-progress-bar {\n  background: var(--brand-videoPlayer-range-bgColor-progress);\n}\n\n.VideoPlayer__rangeProgress::-ms-fill-lower {\n  background-color: var(--brand-videoPlayer-range-bgColor-progress);\n  border: none;\n}\n\n.VideoPlayer__rangeProgress::-ms-fill-upper {\n  background-color: var(--brand-videoPlayer-range-bgColor-default);\n  border: none;\n}\n\n@media (forced-colors: active) {\n  .VideoPlayer__rangeProgress::-webkit-progress-bar {\n    background-color: FieldText;\n  }\n\n  .VideoPlayer__rangeProgress::-webkit-progress-value {\n    background-color: Highlight;\n  }\n\n  .VideoPlayer__rangeProgress::-moz-progress-bar {\n    background: Highlight;\n  }\n\n  .VideoPlayer__rangeProgress::-ms-fill-lower {\n    background-color: Highlight;\n  }\n\n  .VideoPlayer__rangeProgress::-ms-fill-upper {\n    background-color: FieldText;\n  }\n}\n\n/* ---------------------------------------------------------- */\n/* 7. Tooltip                                                 */\n/* ---------------------------------------------------------- */\n\n.VideoPlayer__tooltip {\n  position: absolute;\n  left: 50%;\n  bottom: 100%;\n  z-index: 2;\n  width: var(--base-size-8);\n  height: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  opacity: 0;\n  transform: translate(-50%, 50%);\n}\n\n.VideoPlayer__tooltip::before {\n  position: absolute;\n  bottom: calc(var(--base-size-4) * -1);\n  left: 0;\n  width: var(--base-size-12);\n  height: var(--base-size-12);\n  content: '';\n  background: var(--base-color-scale-white-0);\n  border-radius: var(--brand-borderRadius-small);\n  transform: rotate(45deg);\n}\n\n.VideoPlayer__tooltipContent {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  background: white;\n  box-shadow: 0 var(--base-size-4) var(--base-size-4) #1b1f2433;\n  transform: translate3d(-50%, 0, 0);\n  padding: var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.VideoPlayer__tooltipText {\n  color: var(--base-color-scale-gray-9);\n}\n\n.VideoPlayer__tooltip-visible {\n  opacity: 1;\n}\n\n.VideoPlayer__controlTextColor {\n  color: var(--base-color-scale-white-0);\n}\n\n.VideoPlayer__seekTime {\n  white-space: nowrap;\n}\n\n.VideoPlayer__container--small .VideoPlayer__title span {\n  font-weight: var(--brand-text-weight-300);\n  font-size: var(--brand-text-size-300);\n  line-height: var(--brand-text-lineHeight-300);\n  letter-spacing: var(--brand-text-letterSpacing-300);\n}\n\n.VideoPlayer__container--small .VideoPlayer__title svg {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.VideoPlayer__container--small .VideoPlayer__controls {\n  position: initial;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .VideoPlayer,\n  .VideoPlayer::before,\n  .VideoPlayer::after,\n  .VideoPlayer * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/VideoPlayer/components/CCButton/CCButton.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from 'react';
+export declare const CCButton: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CCButton.d.ts.map

package/esm/VideoPlayer/components/CCButton/CCButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CCButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/CCButton/CCButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAQhD,eAAO,MAAM,QAAQ,GAAI,yBAAuB,cAAc,CAAC,iBAAiB,CAAC,4CAoBhF,CAAA"}

package/esm/VideoPlayer/components/CCButton/CCButton.js

@@ -0,0 +1,25 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../../../Text/Text.js";
+import n from "../../VideoPlayer.module.js";
+import { useVideo as r } from "../../hooks/useVideo.js";
+import { VideoTooltip as i } from "../VideoTooltip/VideoTooltip.js";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/CCButton/CCButton.tsx
+var s = ({ className: s, ...c }) => {
+	let { ccEnabled: l, toggleCC: u } = r();
+	return /* @__PURE__ */ o("button", {
+		className: e(s, n.VideoPlayer__iconControl, n.VideoPlayer__closedCaption, !l && n.VideoPlayer__ccOff),
+		onClick: u,
+		...c,
+		children: [/* @__PURE__ */ a(t, {
+			className: n.VideoPlayer__ccText,
+			"aria-hidden": "true",
+			children: "CC"
+		}), /* @__PURE__ */ a(i, { children: l ? "Disable captions" : "Enable captions" })]
+	});
+};
+//#endregion
+export { s as CCButton };
+
+//# sourceMappingURL=CCButton.js.map

package/esm/VideoPlayer/components/CCButton/CCButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CCButton.js","names":[],"sources":["../../../../src/VideoPlayer/components/CCButton/CCButton.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from '../../VideoPlayer.module.css'\nimport {VideoTooltip} from '../'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const CCButton = ({className, ...props}: HTMLAttributes<HTMLButtonElement>) => {\n  const {ccEnabled, toggleCC} = useVideo()\n\n  return (\n    <button\n      className={clsx(\n        className,\n        styles.VideoPlayer__iconControl,\n        styles.VideoPlayer__closedCaption,\n        !ccEnabled && styles.VideoPlayer__ccOff,\n      )}\n      onClick={toggleCC}\n      {...props}\n    >\n      <Text className={styles.VideoPlayer__ccText} aria-hidden=\"true\">\n        CC\n      </Text>\n      <VideoTooltip>{ccEnabled ? 'Disable captions' : 'Enable captions'}</VideoTooltip>\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,KAAY,EAAC,cAAW,GAAG,QAA8C;CACpF,IAAM,EAAC,cAAW,gBAAY,GAAU;AAExC,QACE,kBAAC,UAAD;EACE,WAAW,EACT,GACA,EAAO,0BACP,EAAO,4BACP,CAAC,KAAa,EAAO,mBACtB;EACD,SAAS;EACT,GAAI;YARN,CAUE,kBAAC,GAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;aAAO;GAEzD,CAAA,EACP,kBAAC,GAAD,EAAA,UAAe,IAAY,qBAAqB,mBAAiC,CAAA,CAC1E"}

package/esm/VideoPlayer/components/CCButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CCButton';
+//# sourceMappingURL=index.d.ts.map

package/esm/VideoPlayer/components/CCButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/CCButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/esm/VideoPlayer/components/Captions/Captions.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from 'react';
+export declare const Captions: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Captions.d.ts.map

package/esm/VideoPlayer/components/Captions/Captions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Captions.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/Captions/Captions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAA;AAOrE,eAAO,MAAM,QAAQ,GAAI,yBAAuB,cAAc,CAAC,cAAc,CAAC,mDA6C7E,CAAA"}

package/esm/VideoPlayer/components/Captions/Captions.js

@@ -0,0 +1,37 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../../../Text/Text.js";
+import n from "./Captions.module.js";
+import { useVideo as r } from "../../hooks/useVideo.js";
+import { useEffect as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/Captions/Captions.tsx
+var s = ({ className: s, ...c }) => {
+	let [l, u] = a(""), { ref: d } = r(), f = d?.current, p = f?.textTracks[0]?.cues;
+	return i(() => {
+		if (!f) return;
+		let e = () => {
+			if (p) for (let e = 0; e < p.length; e++) {
+				let t = p[e];
+				if (f.currentTime >= t.startTime && f.currentTime < t.endTime) {
+					u(t.text);
+					break;
+				}
+				u("");
+			}
+		};
+		return f.addEventListener("timeupdate", e), () => f.removeEventListener("timeupdate", e);
+	}, [f, p]), p ? /* @__PURE__ */ o("div", {
+		className: e(s, n.Captions),
+		...c,
+		children: /* @__PURE__ */ o(t, {
+			as: "p",
+			className: n.Captions__text,
+			align: "center",
+			children: l
+		})
+	}) : null;
+};
+//#endregion
+export { s as Captions };
+
+//# sourceMappingURL=Captions.js.map

package/esm/VideoPlayer/components/Captions/Captions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Captions.js","names":[],"sources":["../../../../src/VideoPlayer/components/Captions/Captions.tsx"],"sourcesContent":["import React, {type HTMLAttributes, useEffect, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from './Captions.module.css'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const Captions = ({className, ...props}: HTMLAttributes<HTMLDivElement>) => {\n  const [caption, setCaption] = useState('')\n  const {ref} = useVideo()\n\n  const videoRef = ref?.current\n  const trackInformation = videoRef?.textTracks[0]?.cues\n\n  useEffect(() => {\n    if (!videoRef) {\n      return\n    }\n\n    const compareAndSetCaption = () => {\n      if (!trackInformation) {\n        return\n      }\n\n      for (let i = 0; i < trackInformation.length; i++) {\n        const cue = trackInformation[i]\n\n        if (videoRef.currentTime >= cue.startTime && videoRef.currentTime < cue.endTime) {\n          setCaption(cue['text'])\n          break\n        }\n\n        setCaption('')\n      }\n    }\n\n    videoRef.addEventListener('timeupdate', compareAndSetCaption)\n\n    return () => videoRef.removeEventListener('timeupdate', compareAndSetCaption)\n  }, [videoRef, trackInformation])\n\n  if (!trackInformation) {\n    return null\n  }\n\n  return (\n    <div className={clsx(className, styles.Captions)} {...props}>\n      <Text as=\"p\" className={styles.Captions__text} align=\"center\">\n        {caption}\n      </Text>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAa,KAAY,EAAC,cAAW,GAAG,QAA2C;CACjF,IAAM,CAAC,GAAS,KAAc,EAAS,GAAG,EACpC,EAAC,WAAO,GAAU,EAElB,IAAW,GAAK,SAChB,IAAmB,GAAU,WAAW,IAAI;AAiClD,QA/BA,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,UAA6B;AAC5B,SAIL,MAAK,IAAI,IAAI,GAAG,IAAI,EAAiB,QAAQ,KAAK;IAChD,IAAM,IAAM,EAAiB;AAE7B,QAAI,EAAS,eAAe,EAAI,aAAa,EAAS,cAAc,EAAI,SAAS;AAC/E,OAAW,EAAI,KAAQ;AACvB;;AAGF,MAAW,GAAG;;;AAMlB,SAFA,EAAS,iBAAiB,cAAc,EAAqB,QAEhD,EAAS,oBAAoB,cAAc,EAAqB;IAC5E,CAAC,GAAU,EAAiB,CAAC,EAE3B,IAKH,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,EAAO,SAAS;EAAE,GAAI;YACpD,kBAAC,GAAD;GAAM,IAAG;GAAI,WAAW,EAAO;GAAgB,OAAM;aAClD;GACI,CAAA;EACH,CAAA,GARC"}

package/esm/VideoPlayer/components/Captions/Captions.module-CvaHeR3V.css

@@ -0,0 +1 @@
+.Primer_Brand__Captions-module__Captions___5Wpoz{flex:0 0 var(--base-size-64);width:100%;padding:var(--base-size-8) var(--base-size-16) 0;pointer-events:none;background-color:var(--base-color-scale-black-0);justify-content:center;align-items:center;display:flex}.Primer_Brand__Captions-module__Captions__text___lrxrJ{color:var(--brand-VideoPlayer-closedCaption-text-fgColor)}

package/esm/VideoPlayer/components/Captions/Captions.module.js

@@ -0,0 +1,8 @@
+import './Captions.module-CvaHeR3V.css';var e = {
+	Captions: "Primer_Brand__Captions-module__Captions___5Wpoz",
+	Captions__text: "Primer_Brand__Captions-module__Captions__text___lrxrJ"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Captions.module.js.map

package/esm/VideoPlayer/components/Captions/Captions.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Captions.module.js","names":[],"sources":["../../../../src/VideoPlayer/components/Captions/Captions.module.css"],"sourcesContent":[".Captions {\n  flex: 0 0 var(--base-size-64);\n  width: 100%;\n  padding: var(--base-size-8) var(--base-size-16) 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  background-color: var(--base-color-scale-black-0);\n}\n\n.Captions__text {\n  color: var(--brand-VideoPlayer-closedCaption-text-fgColor);\n}\n"],"mappings":""}

package/esm/VideoPlayer/components/Captions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Captions';
+//# sourceMappingURL=index.d.ts.map

package/esm/VideoPlayer/components/Captions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/Captions/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/esm/VideoPlayer/components/ControlsBar/ControlsBar.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type ControlsBarProps = HTMLAttributes<HTMLDivElement>;
+export declare const ControlsBar: ({ className, ...rest }: ControlsBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ControlsBar.d.ts.map

package/esm/VideoPlayer/components/ControlsBar/ControlsBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsBar.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/ControlsBar/ControlsBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAKhD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAE7D,eAAO,MAAM,WAAW,GAAI,wBAAsB,gBAAgB,4CAEjE,CAAA"}