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

package/esm/Accordion/Accordion.d.ts

@@ -0,0 +1,50 @@
+import React, { type DetailsHTMLAttributes, type HTMLAttributes, type ReactElement } from 'react';
+import { type HeadingProps } from '../';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css';
+export type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {
+    children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
+    variant?: 'default' | 'emphasis';
+    handleOpen?: (isOpen: boolean) => void;
+};
+export declare const AccordionRoot: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
+    children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
+    variant?: "default" | "emphasis";
+    handleOpen?: (isOpen: boolean) => void;
+} & React.RefAttributes<HTMLDetailsElement>>;
+export declare const AccordionToggleColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
+export type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {
+    as?: HeadingProps['as'];
+    reversedToggles?: boolean;
+    toggleColor?: (typeof AccordionToggleColors)[number];
+    weight?: HeadingProps['weight'];
+};
+/**
+ * TODO This type is incorrect
+ * The ref is applied to the summary, not the heading, so the correct type is
+ * `forwardRef<HTMLElement, AccordionHeadingProps>`
+ */
+export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    as?: HeadingProps["as"];
+    reversedToggles?: boolean;
+    toggleColor?: (typeof AccordionToggleColors)[number];
+    weight?: HeadingProps["weight"];
+} & React.RefAttributes<HTMLHeadingElement>>;
+export type AccordionContentProps = HTMLAttributes<HTMLElement>;
+export declare const AccordionContent: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
+    children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
+    variant?: "default" | "emphasis";
+    handleOpen?: (isOpen: boolean) => void;
+} & React.RefAttributes<HTMLDetailsElement>> & {
+    Content: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        as?: HeadingProps["as"];
+        reversedToggles?: boolean;
+        toggleColor?: (typeof AccordionToggleColors)[number];
+        weight?: HeadingProps["weight"];
+    } & React.RefAttributes<HTMLHeadingElement>>;
+};
+//# sourceMappingURL=Accordion.d.ts.map

package/esm/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAEnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cArBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;iBACnB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CA0EvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAoChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,wBAAsB,qBAAqB,4CAE3E,CAAA;AAED,eAAO,MAAM,SAAS;cAhIV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;iBACnB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;sCA0He,qBAAqB;;aA3CrE,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA4C4E,CAAA"}

package/esm/Accordion/Accordion.js

@@ -0,0 +1,79 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { BiColorGradients as t, Colors as n } from "../constants.js";
+import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
+import { Heading as i } from "../Heading/Heading.js";
+import { ChevronDownIcon as a, ChevronUpIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-PcQKqJQI.css';/* empty css                                                                                                       */
+import s from "./Accordion.module.js";
+import { createContext as c, forwardRef as l, useCallback as u, useContext as d, useEffect as f, useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/Accordion/Accordion.tsx
+var g = c(null), _ = () => {
+	let e = d(g);
+	if (e === null) throw Error("Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?");
+	return e;
+}, v = l(({ children: t, className: n, variant: i = "default", open: a, onToggle: o, onKeyDown: c, handleOpen: l, ...d }, h) => {
+	let _ = r(h), v = p(() => ({ variant: i }), [i]), y = u((e) => {
+		let t = e;
+		o?.(t), l?.(t.currentTarget.open);
+	}, [o, l]), b = u((e) => {
+		let t = e;
+		c?.(t);
+		let n = _.current;
+		t.key === "Escape" && n?.open && (n.open = !1, n.querySelector("summary")?.focus());
+	}, [c, _]);
+	return f(() => {
+		let e = _.current;
+		if (e) return e.addEventListener("toggle", y), e.addEventListener("keydown", b), () => {
+			e.removeEventListener("toggle", y), e.removeEventListener("keydown", b);
+		};
+	}, [
+		y,
+		b,
+		_
+	]), /* @__PURE__ */ m(g.Provider, {
+		value: v,
+		children: /* @__PURE__ */ m("details", {
+			className: e(s.Accordion, s[`Accordion--${i}`], n),
+			ref: _,
+			open: a,
+			...d,
+			children: t
+		})
+	});
+}), y = [...n, ...t], b = l(({ children: t, className: n, as: r = "h4", toggleColor: c, reversedToggles: l, weight: u = "normal", ...d }, f) => {
+	let { variant: p } = _();
+	return /* @__PURE__ */ h("summary", {
+		className: e(s.Accordion__summary, l && s["Accordion__summary--reversed-toggles"], s[`Accordion__summary--${p}`], c && s[`Accordion__summary--toggleColor-${c}`], n),
+		ref: f,
+		...d,
+		children: [
+			/* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				className: s["Accordion__summary--collapsed"],
+				children: /* @__PURE__ */ m(a, { size: 24 })
+			}),
+			/* @__PURE__ */ m(i, {
+				as: r,
+				size: p === "emphasis" ? "6" : "subhead-large",
+				weight: u,
+				children: t
+			}),
+			/* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				className: s["Accordion__summary--expanded"],
+				children: /* @__PURE__ */ m(o, { size: 24 })
+			})
+		]
+	});
+}), x = ({ className: t, ...n }) => /* @__PURE__ */ m("section", {
+	className: e(s.Accordion__content, t),
+	...n
+}), S = Object.assign(v, {
+	Content: x,
+	Heading: b
+});
+//#endregion
+export { S as Accordion, x as AccordionContent, b as AccordionHeading, v as AccordionRoot, y as AccordionToggleColors };
+
+//# sourceMappingURL=Accordion.js.map

package/esm/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useEffect,\n  type DetailsHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type RefObject,\n  type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n  children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n  variant?: 'default' | 'emphasis'\n  handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n  variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n  const context = useContext(AccordionContext)\n\n  if (context === null) {\n    throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n  }\n\n  return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n  ({children, className, variant = 'default', open, onToggle, onKeyDown, handleOpen, ...rest}, forwardedRef) => {\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n    const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n    const handleToggle = useCallback<(event: Event) => void>(\n      event => {\n        const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n        onToggle?.(toggleEvent)\n        handleOpen?.(toggleEvent.currentTarget.open)\n      },\n      [onToggle, handleOpen],\n    )\n\n    const handleKeyDown = useCallback<EventListener>(\n      event => {\n        const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n        onKeyDown?.(keyboardEvent)\n\n        const details = ref.current\n\n        if (keyboardEvent.key === 'Escape' && details?.open) {\n          details.open = false\n          details.querySelector('summary')?.focus()\n        }\n      },\n      [onKeyDown, ref],\n    )\n\n    useEffect(() => {\n      const detailsElement = ref.current\n      if (detailsElement) {\n        detailsElement.addEventListener('toggle', handleToggle)\n        detailsElement.addEventListener('keydown', handleKeyDown)\n\n        return () => {\n          detailsElement.removeEventListener('toggle', handleToggle)\n          detailsElement.removeEventListener('keydown', handleKeyDown)\n        }\n      }\n    }, [handleToggle, handleKeyDown, ref])\n\n    return (\n      <AccordionContext.Provider value={accordionContextValue}>\n        <details\n          className={clsx(styles.Accordion, styles[`Accordion--${variant}`], className)}\n          ref={ref}\n          open={open}\n          {...rest}\n        >\n          {children}\n        </details>\n      </AccordionContext.Provider>\n    )\n  },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n  as?: HeadingProps['as']\n  reversedToggles?: boolean\n  toggleColor?: (typeof AccordionToggleColors)[number]\n  weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n  ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n    const {variant} = useAccordionContext()\n\n    return (\n      <summary\n        className={clsx(\n          styles.Accordion__summary,\n          reversedToggles && styles['Accordion__summary--reversed-toggles'],\n          styles[`Accordion__summary--${variant}`],\n          toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <span aria-hidden=\"true\" className={styles['Accordion__summary--collapsed']}>\n          <ChevronDownIcon size={24} />\n        </span>\n        <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n          {children}\n        </Heading>\n        <span aria-hidden=\"true\" className={styles['Accordion__summary--expanded']}>\n          <ChevronUpIcon size={24} />\n        </span>\n      </summary>\n    )\n  },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({className, ...rest}: AccordionContentProps) => (\n  <section className={clsx(styles.Accordion__content, className)} {...rest} />\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":";;;;;;;;;;AAuCA,IAAM,IAAmB,EAA2C,KAAK,EAEnE,UAAkD;CACtD,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,MAAY,KACd,OAAU,MAAM,4FAA4F;AAG9G,QAAO;GAGI,IAAgB,GAC1B,EAAC,aAAU,cAAW,aAAU,WAAW,SAAM,aAAU,cAAW,eAAY,GAAG,KAAO,MAAiB;CAC5G,IAAM,IAAM,EAAuB,EAAqD,EAClF,IAAwB,SAAe,EAAC,YAAQ,GAAG,CAAC,EAAQ,CAAC,EAE7D,IAAe,GACnB,MAAS;EACP,IAAM,IAAc;AAEpB,EADA,IAAW,EAAY,EACvB,IAAa,EAAY,cAAc,KAAK;IAE9C,CAAC,GAAU,EAAW,CACvB,EAEK,IAAgB,GACpB,MAAS;EACP,IAAM,IAAgB;AACtB,MAAY,EAAc;EAE1B,IAAM,IAAU,EAAI;AAEpB,EAAI,EAAc,QAAQ,YAAY,GAAS,SAC7C,EAAQ,OAAO,IACf,EAAQ,cAAc,UAAU,EAAE,OAAO;IAG7C,CAAC,GAAW,EAAI,CACjB;AAeD,QAbA,QAAgB;EACd,IAAM,IAAiB,EAAI;AAC3B,MAAI,EAIF,QAHA,EAAe,iBAAiB,UAAU,EAAa,EACvD,EAAe,iBAAiB,WAAW,EAAc,QAE5C;AAEX,GADA,EAAe,oBAAoB,UAAU,EAAa,EAC1D,EAAe,oBAAoB,WAAW,EAAc;;IAG/D;EAAC;EAAc;EAAe;EAAI,CAAC,EAGpC,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,WAAD;GACE,WAAW,EAAK,EAAO,WAAW,EAAO,cAAc,MAAY,EAAU;GACxE;GACC;GACN,GAAI;GAEH;GACO,CAAA;EACgB,CAAA;EAGjC,EAEY,IAAwB,CAAC,GAAG,GAAQ,GAAG,EAAU,EAcjD,IAAmB,GAC7B,EAAC,aAAU,cAAW,QAAK,MAAM,gBAAa,oBAAiB,YAAS,UAAU,GAAG,KAAO,MAAQ;CACnG,IAAM,EAAC,eAAW,GAAqB;AAEvC,QACE,kBAAC,WAAD;EACE,WAAW,EACT,EAAO,oBACP,KAAmB,EAAO,yCAC1B,EAAO,uBAAuB,MAC9B,KAAe,EAAO,mCAAmC,MACzD,EACD;EACI;EACL,GAAI;YATN;GAWE,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;cACzC,kBAAC,GAAD,EAAiB,MAAM,IAAM,CAAA;IACxB,CAAA;GACP,kBAAC,GAAD;IAAa;IAAI,MAAM,MAAY,aAAa,MAAM;IAAyB;IAC5E;IACO,CAAA;GACV,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;cACzC,kBAAC,GAAD,EAAe,MAAM,IAAM,CAAA;IACtB,CAAA;GACC;;EAGf,EAIY,KAAoB,EAAC,cAAW,GAAG,QAC9C,kBAAC,WAAD;CAAS,WAAW,EAAK,EAAO,oBAAoB,EAAU;CAAE,GAAI;CAAQ,CAAA,EAGjE,IAAY,OAAO,OAAO,GAAe;CAAC,SAAS;CAAkB,SAAS;CAAiB,CAAC"}

package/esm/Accordion/Accordion.module-D4diKFGj.css

@@ -0,0 +1 @@
+.Primer_Brand__Accordion-module__Accordion___RSoMC{box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--base-size-12);padding-block-end:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:var(--brand-animation-duration-fast) transform;transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9,.Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-default);transition:opacity var(--brand-animation-duration-faster) ease;justify-content:center;align-items:center;display:flex;position:absolute}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9,.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{order:1;position:static}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9{margin-inline-start:auto}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{margin-inline-start:calc(-1 * var(--base-size-24))}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9,.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9,.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-default))}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi,.Primer_Brand__Accordion-module__Accordion__summary___zYOXC.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{opacity:0}details[open] .Primer_Brand__Accordion-module__Accordion__summary___zYOXC.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{opacity:1}details[open] .Primer_Brand__Accordion-module__Accordion__summary___zYOXC.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9{opacity:0}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi{opacity:1}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi):not(.Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-bottom:var(--base-size-24);z-index:0;animation:.5s Primer_Brand__Accordion-module__fade-in___YlqS_;position:relative}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-top:calc(var(--base-size-12) * -1)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@keyframes Primer_Brand__Accordion-module__fade-in___YlqS_{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Accordion/Accordion.module.js

@@ -0,0 +1,36 @@
+import './Accordion.module-D4diKFGj.css';var e = {
+	Accordion: "Primer_Brand__Accordion-module__Accordion___RSoMC",
+	"Accordion--default": "Primer_Brand__Accordion-module__Accordion--default___R_5ld",
+	"Accordion--emphasis": "Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT",
+	Accordion__summary: "Primer_Brand__Accordion-module__Accordion__summary___zYOXC",
+	"Accordion__summary--emphasis": "Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI",
+	Accordion__content: "Primer_Brand__Accordion-module__Accordion__content___GhUVO",
+	"Accordion__summary--reversed-toggles": "Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W",
+	"Accordion__summary--collapsed": "Primer_Brand__Accordion-module__Accordion__summary--collapsed___nKkZ9",
+	"Accordion__summary--expanded": "Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi",
+	"Accordion__summary--default": "Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT",
+	"Accordion__summary--toggleColor-default": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up",
+	"Accordion__summary--toggleColor-blue": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S",
+	"Accordion__summary--toggleColor-blue-purple": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G",
+	"Accordion__summary--toggleColor-coral": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP",
+	"Accordion__summary--toggleColor-green": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN",
+	"Accordion__summary--toggleColor-green-blue": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW",
+	"Accordion__summary--toggleColor-gray": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE",
+	"Accordion__summary--toggleColor-indigo": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo",
+	"Accordion__summary--toggleColor-lemon": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE",
+	"Accordion__summary--toggleColor-lime": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo",
+	"Accordion__summary--toggleColor-orange": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep",
+	"Accordion__summary--toggleColor-pink": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J",
+	"Accordion__summary--toggleColor-pink-blue": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6",
+	"Accordion__summary--toggleColor-purple": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT",
+	"Accordion__summary--toggleColor-purple-red": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G",
+	"Accordion__summary--toggleColor-red": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS",
+	"Accordion__summary--toggleColor-red-orange": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh",
+	"Accordion__summary--toggleColor-teal": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd",
+	"Accordion__summary--toggleColor-yellow": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We",
+	"fade-in": "Primer_Brand__Accordion-module__fade-in___YlqS_"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Accordion.module.js.map

package/esm/Accordion/Accordion.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n  box-sizing: border-box;\n  position: relative;\n}\n\n.Accordion--default {\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n  background-color: var(--brand-color-canvas-subtle);\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  padding-block: var(--base-size-20);\n  padding-inline: var(--base-size-20);\n  gap: 0;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n  content: '';\n  display: block;\n  width: calc(var(--base-size-8) - 1px);\n  height: var(--base-size-12);\n  flex-shrink: 0;\n  margin-inline-end: var(--base-size-12);\n  background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n  background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n  background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-text-weight-500);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: 0.15px;\n  text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n  + .Accordion--emphasis:not(.Accordion .Accordion)\n  > .Accordion__summary {\n  border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  padding-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-12);\n  padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n  border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n  display: none;\n}\n\n.Accordion--default::after {\n  content: '';\n  background-color: var(--brand-Accordion-border-color-default);\n  height: var(--brand-borderWidth-thin);\n  transition: var(--brand-animation-duration-fast) transform;\n  transform: scaleY(0);\n  transform-origin: 50% 100%;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n  background-color: var(--brand-color-accent-primary);\n  transform: scaleY(1);\n}\n\n.Accordion__summary {\n  cursor: pointer;\n  padding: var(--base-size-24) 0;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n  padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n  display: none;\n}\n\n.Accordion__summary:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n  outline: none;\n}\n\n.Accordion__summary--collapsed,\n.Accordion__summary--expanded {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--base-size-24);\n  width: var(--base-size-24);\n  color: var(--brand-color-text-default);\n  position: absolute;\n  transition: opacity var(--brand-animation-duration-faster) ease;\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--collapsed,\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--expanded {\n  right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary--collapsed,\n.Accordion__summary--emphasis .Accordion__summary--expanded {\n  position: static;\n  order: 1;\n}\n\n.Accordion__summary--emphasis .Accordion__summary--collapsed {\n  margin-inline-start: auto;\n}\n\n.Accordion__summary--emphasis .Accordion__summary--expanded {\n  margin-inline-start: calc(-1 * var(--base-size-24));\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary--collapsed,\n.Accordion__summary--reversed-toggles .Accordion__summary--expanded {\n  left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary--collapsed,\n.Accordion__summary--default .Accordion__summary--expanded {\n  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-default));\n}\n\n.Accordion__summary--toggleColor-default {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {\n  opacity: 0;\n}\n\n.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {\n  opacity: 0;\n}\n\ndetails[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {\n  opacity: 1;\n}\n\ndetails[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed {\n  opacity: 0;\n}\n\ndetails[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {\n  opacity: 1;\n}\n\ndetails[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed {\n  opacity: 0;\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n  padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n  padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary--expanded):not(.Accordion__summary--collapsed),\n.Accordion__content ul,\n.Accordion__content ol {\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-sansSerif);\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n[data-color-mode='dark'] .Accordion__content {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n  margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n  color: var(--brand-InlineLink-color-rest);\n  position: relative;\n  text-decoration: underline;\n  text-decoration-color: var(--brand-InlineLink-color-rest);\n  text-decoration-thickness: var(--brand-borderWidth-thin);\n  text-underline-position: under;\n  transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n  text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n  font-weight: inherit;\n  color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n  color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n  padding-bottom: var(--base-size-24);\n  animation: fade-in 0.5s;\n  position: relative;\n  z-index: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n  margin-top: calc(var(--base-size-12) * -1); /* for 12px gap between question and answer */\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n  padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n  .Accordion__summary {\n    gap: var(--base-size-40);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\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  .Accordion,\n  .Accordion::before,\n  .Accordion::after,\n  .Accordion * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/Accordion/index.d.ts

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

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

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

package/esm/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,159 @@
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { ButtonProps } from '../';
+import { type Icon } from '@primer/octicons-react';
+import { type PositionSettings } from '@primer/behaviors';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css';
+export declare const actionMenuOverlaySides: PositionSettings["side"][];
+export declare const ActionMenuSizes: readonly ["small", "medium"];
+export declare const ActionMenuButtonModes: readonly ["default", "split-button"];
+export type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number];
+export type ActionMenuSizes = (typeof ActionMenuSizes)[number];
+export type ActionMenuProps = {
+    /**
+     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
+     */
+    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
+    /**
+     * Determines whether the ActionMenu is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Determines whether the ActionMenu is open by default
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when an item is selected.
+     * The value of the selected item is passed as an argument.
+     */
+    onSelect?: (newValue: string) => void;
+    /**
+     * The selection variant of the ActionMenu.
+     * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
+     * - `none`: No items can be selected. Menu items as a menuitem.
+     */
+    selectionVariant?: 'single' | 'none';
+    /**
+     * Test id for the ActionMenu
+     */
+    'data-testid'?: string;
+    /**
+     * Horizontal alignment of the menu relative to the bottom of the button
+     */
+    menuAlignment?: 'start' | 'end';
+    /**
+     * Size configuratin of the ActionMenu
+     */
+    size?: ActionMenuSizes;
+    menuSide?: PositionSettings['side'];
+    /**
+     * Alternative behavior for the button and menu items
+     * - `default`: The button and menu items behave as a standard button and menu item.
+     * - `split-button`: The button behaves as a split button, and the menu items behave as links.
+     */
+    mode?: ActionMenuButtonModes;
+} & BaseProps<HTMLDivElement>;
+type ActionMenuContextType = {
+    size?: ActionMenuSizes;
+    setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
+};
+export declare const useActionMenuContext: () => ActionMenuContextType;
+export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
+type ActionMenuButtonProps = PropsWithChildren<BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>> & {
+    as?: ButtonProps<'a'>['as'];
+    href?: ButtonProps<'a'>['href'];
+    menuOpen?: boolean;
+    'data-testid'?: string;
+    size?: ActionMenuSizes;
+    _mode?: ActionMenuButtonModes;
+    variant?: ButtonProps<'a'>['variant'];
+    leadingVisual?: ButtonProps<'a'>['leadingVisual'];
+};
+type ActionMenuItemBaseProps = {
+    handler?: (newValue: string) => void;
+    type?: 'none' | 'single' | 'link';
+    disabled?: boolean;
+    size?: ActionMenuSizes;
+    leadingVisual?: React.ReactElement | React.ReactNode | Icon;
+} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>;
+type ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {
+    as: 'a';
+} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>;
+type ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {
+    as?: string;
+    value?: string;
+    selected?: boolean;
+} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>;
+type ActionMenuOverlayProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>> & {
+    'aria-label': string;
+    id?: string;
+    'data-testid'?: string;
+    menuOpen?: boolean;
+    style?: React.CSSProperties;
+};
+/**
+ * Use ActionMenu to display a list of actions or selections that expand through a trigger button.
+ * @see https://primer.style/brand/components/ActionMenu
+ */
+export declare const ActionMenu: React.NamedExoticComponent<{
+    /**
+     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
+     */
+    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
+    /**
+     * Determines whether the ActionMenu is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Determines whether the ActionMenu is open by default
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when an item is selected.
+     * The value of the selected item is passed as an argument.
+     */
+    onSelect?: (newValue: string) => void;
+    /**
+     * The selection variant of the ActionMenu.
+     * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
+     * - `none`: No items can be selected. Menu items as a menuitem.
+     */
+    selectionVariant?: "single" | "none";
+    /**
+     * Test id for the ActionMenu
+     */
+    'data-testid'?: string;
+    /**
+     * Horizontal alignment of the menu relative to the bottom of the button
+     */
+    menuAlignment?: "start" | "end";
+    /**
+     * Size configuratin of the ActionMenu
+     */
+    size?: ActionMenuSizes;
+    menuSide?: PositionSettings["side"];
+    /**
+     * Alternative behavior for the button and menu items
+     * - `default`: The button and menu items behave as a standard button and menu item.
+     * - `split-button`: The button behaves as a split button, and the menu items behave as links.
+     */
+    mode?: ActionMenuButtonModes;
+} & BaseProps<HTMLDivElement>> & {
+    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+} & {
+    Button: React.ForwardRefExoticComponent<Omit<ActionMenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => import("react/jsx-runtime").JSX.Element;
+    Overlay: React.ForwardRefExoticComponent<Omit<ActionMenuOverlayProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    testIds: {
+        root: string;
+        readonly button: string;
+        readonly overlay: string;
+        readonly list: string;
+        readonly item: string;
+    };
+};
+export {};
+//# sourceMappingURL=ActionMenu.d.ts.map

package/esm/ActionMenu/ActionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,iBAAiB,EAGjB,YAAY,EAEb,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAgC,MAAM,KAAK,CAAA;AAMtE,OAAO,EAA6B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAG5E,OAAO,EAAY,KAAK,gBAAgB,EAAY,MAAM,mBAAmB,CAAA;AAC7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AAuBtH,eAAO,MAAM,sBAAsB,EAU9B,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAA;AAE/B,eAAO,MAAM,eAAe,8BAA+B,CAAA;AAE3D,eAAO,MAAM,qBAAqB,sCAAuC,CAAA;AACzE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EACJ,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,sBAAsB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAA;IACrF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IAItB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAA;CAC5E,CAAA;AAID,eAAO,MAAM,oBAAoB,QAAO,qBAEvC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIxD,CAAA;AAgMD,KAAK,qBAAqB,GAAG,iBAAiB,CAC5C,SAAS,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,CAClH,GAAG;IACF,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,KAAK,CAAC,EAAE,qBAAqB,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;IACrC,aAAa,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAA;CAClD,CAAA;AAkFD,KAAK,uBAAuB,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;CAC5D,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;AAErD,KAAK,yBAAyB,GAAG,uBAAuB,GAAG;IACzD,EAAE,EAAE,GAAG,CAAA;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAA;AAGlF,KAAK,0BAA0B,GAAG,uBAAuB,GAAG;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAA;AAoI9E,KAAK,sBAAsB,GAAG,iBAAiB,CAC7C,SAAS,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CACrE,GAAG;IACF,YAAY,EAAE,MAAM,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAkBD;;;GAGG;AACH,eAAO,MAAM,UAAU;IAjhBrB;;OAEG;cAEC,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,sBAAsB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACrF;;OAEG;eACQ,OAAO;IAClB;;OAEG;WACI,OAAO;IACd;;;OAGG;eACQ,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI;IACrC;;;;OAIG;uBACgB,QAAQ,GAAG,MAAM;IACpC;;OAEG;oBACa,MAAM;IACtB;;OAEG;oBACa,OAAO,GAAG,KAAK;IAC/B;;OAEG;WACI,eAAe;eAIX,gBAAgB,CAAC,MAAM,CAAC;IACnC;;;;OAIG;WACI,qBAAqB;;+IAiCzB,eAAe;;;8IAoTjB,yBAAyB,GAAG,0BAA0B;;;;;;;;;CAkJvD,CAAA"}