npm - @primer/react-brand - Versions diffs - 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1465) hide show

package/esm/Prose/Prose.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css';
+export type ProseProps = {
+    /**
+     * Valid children include string encapsulated HTML elements such as `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<p>`, `<strong>`, `<em>`, `<a>`, `<ul>`, `<ol>`, `<li>`, `<img>`, and `<div>`.
+     */
+    html: string;
+    /**
+     * The presentational variant of the prose.
+     */
+    variant?: 'default' | 'editorial';
+    /**
+     * Whether to enable full width prose or not.
+     */
+    enableFullWidth?: boolean;
+} & Omit<BaseProps<HTMLDivElement>, 'animate' | 'children'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const Prose: React.ForwardRefExoticComponent<Omit<ProseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Prose.d.ts.map

package/esm/Prose/Prose.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Prose.d.ts","sourceRoot":"","sources":["../../src/Prose/Prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,4FAA4F,CAAA;AACnG,OAAO,yGAAyG,CAAA;AAChH,OAAO,kGAAkG,CAAA;AAEzG,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAA;AAEzD,eAAO,MAAM,KAAK,gGAgBjB,CAAA"}

package/esm/Prose/Prose.js ADDED Viewed

@@ -0,0 +1,18 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes-Y3yB1rAU.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/prose/base-ZeVUZmHp.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/base-BJeYaOpB.css';/* empty css                                                                                            */
+import t from "./Prose.module.js";
+/* empty css                                                                                      */
+/* empty css                                                                                                   */
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/Prose/Prose.tsx
+var i = n(({ html: n, enableFullWidth: i = !1, className: a, variant: o = "default", ...s }, c) => /* @__PURE__ */ r("div", {
+	className: e(t.Prose, !i && t["Prose--lineLength"], t[`Prose--${o}`], a),
+	ref: c,
+	...s,
+	dangerouslySetInnerHTML: { __html: n }
+}));
+//#endregion
+export { i as Prose };
+//# sourceMappingURL=Prose.js.map

package/esm/Prose/Prose.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Prose.js","names":[],"sources":["../../src/Prose/Prose.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport styles from './Prose.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'\n\nexport type ProseProps = {\n /**\n * Valid children include string encapsulated HTML elements such as `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<p>`, `<strong>`, `<em>`, `<a>`, `<ul>`, `<ol>`, `<li>`, `<img>`, and `<div>`.\n */\n html: string\n /**\n * The presentational variant of the prose.\n */\n variant?: 'default' | 'editorial'\n /**\n * Whether to enable full width prose or not.\n */\n enableFullWidth?: boolean\n} & Omit<BaseProps<HTMLDivElement>, 'animate' | 'children'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>\n\nexport const Prose = forwardRef<HTMLDivElement, ProseProps>(\n ({html, enableFullWidth = false, className, variant = 'default', ...props}, ref) => {\n return (\n <div\n className={clsx(\n styles.Prose,\n !enableFullWidth && styles['Prose--lineLength'],\n styles[`Prose--${variant}`],\n className,\n )}\n ref={ref}\n {...props}\n dangerouslySetInnerHTML={{__html: html}}\n />\n )\n },\n)\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAQ,GAClB,EAAC,SAAM,qBAAkB,IAAO,cAAW,aAAU,WAAW,GAAG,KAAQ,MAExE,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,OACP,CAAC,KAAmB,EAAO,sBAC3B,EAAO,UAAU,MACjB,EACD;CACI;CACL,GAAI;CACJ,yBAAyB,EAAC,QAAQ,GAAK;CACvC,CAAA,CAGP"}

package/esm/Prose/Prose.module-CL7KawRN.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Prose-module__Prose___8WnSE{font-family:var(--brand-body-fontFamily);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);color:var(--brand-color-text-default)}.Primer_Brand__Prose-module__Prose--editorial___z40XG{font-size:var(--brand-text-size-300);line-height:1.7}.Primer_Brand__Prose-module__Prose___8WnSE *+*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto;margin-block-start:1em;margin-block-start:var(--spacing,1em)}.Primer_Brand__Prose-module__Prose--editorial___z40XG *+*{--spacing:var(--base-size-40)}.Primer_Brand__Prose-module__Prose--lineLength___V5nMv{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__Prose-module__Prose___8WnSE h1{font-weight:var(--brand-heading-weight-700);font-size:var(--brand-text-size-700);line-height:var(--brand-text-lineHeight-700);font-family:var(--brand-heading-fontFamily);letter-spacing:var(--brand-text-letterSpacing-700)}.Primer_Brand__Prose-module__Prose___8WnSE h2{font-weight:var(--brand-heading-weight-600);font-size:var(--brand-text-size-600);line-height:var(--brand-text-lineHeight-600);font-family:var(--brand-heading-fontFamily);letter-spacing:var(--brand-text-letterSpacing-600)}.Primer_Brand__Prose-module__Prose--lineLength___V5nMv h2{max-width:26ch}.Primer_Brand__Prose-module__Prose___8WnSE h3{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400);font-family:var(--brand-heading-fontFamily);letter-spacing:var(--brand-heading-letterSpacing-400)}.Primer_Brand__Prose-module__Prose--lineLength___V5nMv h1{max-width:32ch}.Primer_Brand__Prose-module__Prose___8WnSE h4{--spacing:var(--base-size-48);font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300);font-family:var(--brand-heading-fontFamily);letter-spacing:var(--brand-heading-letterSpacing-300)}.Primer_Brand__Prose-module__Prose___8WnSE h5,.Primer_Brand__Prose-module__Prose___8WnSE h6{--spacing:var(--base-size-48);font-weight:var(--brand-text-subhead-weight-medium);font-size:var(--brand-text-subhead-size-medium);line-height:var(--brand-text-subhead-lineHeight-medium);font-family:var(--brand-heading-fontFamily);letter-spacing:var(--brand-heading-letterSpacing-200)}.Primer_Brand__Prose-module__Prose___8WnSE h1,.Primer_Brand__Prose-module__Prose___8WnSE h2,.Primer_Brand__Prose-module__Prose___8WnSE h3{--spacing:var(--base-size-64)}.Primer_Brand__Prose-module__Prose___8WnSE h1+*,.Primer_Brand__Prose-module__Prose___8WnSE h2+*,.Primer_Brand__Prose-module__Prose___8WnSE h3+*,.Primer_Brand__Prose-module__Prose___8WnSE p{--spacing:var(--base-size-24)}.Primer_Brand__Prose-module__Prose--editorial___z40XG p{--spacing:var(--base-size-40)}.Primer_Brand__Prose-module__Prose___8WnSE ul,.Primer_Brand__Prose-module__Prose___8WnSE ol{--spacing:var(--base-size-16);gap:var(--base-size-8);line-height:var(--brand-text-lineHeight-300);flex-direction:column;margin-inline-start:var(--base-size-24);padding:0;display:flex}.Primer_Brand__Prose-module__Prose--editorial___z40XG ul,.Primer_Brand__Prose-module__Prose--editorial___z40XG ol{--spacing:var(--base-size-48);gap:var(--base-size-16);line-height:1.7}.Primer_Brand__Prose-module__Prose___8WnSE ul{list-style-type:image;list-style-image:var(--brand-Prose-unorderedList-imageUrl)}.Primer_Brand__Prose-module__Prose___8WnSE li{--spacing:0}.Primer_Brand__Prose-module__Prose___8WnSE strong,.Primer_Brand__Prose-module__Prose___8WnSE b{font-weight:var(--brand-text-weight-heavy)!important}.Primer_Brand__Prose-module__Prose___8WnSE em{font-variation-settings:"ital" 10;font-synthesis:none}.Primer_Brand__Prose-module__Prose___8WnSE 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__Prose-module__Prose___8WnSE a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Prose-module__Prose___8WnSE a:active:after{border-color:var(--brand-InlineLink-color-pressed)}.Primer_Brand__Prose-module__Prose___8WnSE code{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);white-space:break-spaces;padding:var(--base-size-4) var(--base-size-8);border-radius:var(--brand-borderRadius-small);background-color:var(--brand-Prose-code-bgColor)}.Primer_Brand__Prose-module__Prose___8WnSE pre{padding:var(--base-size-16);border-radius:var(--brand-borderRadius-medium);background-color:var(--brand-Prose-code-bgColor)}.Primer_Brand__Prose-module__Prose___8WnSE pre code{padding:0}.Primer_Brand__Prose-module__Prose___8WnSE img{--spacing:var(--brand-Prose-img-spacing);max-width:100%;height:auto;margin-left:auto;margin-right:auto;margin-block-end:var(--spacing);display:block}.Primer_Brand__Prose-module__Prose--editorial___z40XG figure img{border-radius:var(--brand-borderRadius-medium);margin-block-end:0;display:block}.Primer_Brand__Prose-module__Prose___8WnSE blockquote{--spacing:var(--brand-Prose-blockquote-spacing);font-size:var(--brand-text-size-400);line-height:var(--brand-text-lineHeight-400);padding-top:var(--base-size-48);padding-bottom:var(--base-size-8);margin-bottom:var(--spacing);position:relative}.Primer_Brand__Prose-module__Prose--default___G7iCy blockquote{padding-left:var(--base-size-40)}.Primer_Brand__Prose-module__Prose--editorial___z40XG blockquote{font-size:var(--brand-text-size-500);line-height:var(--brand-text-lineHeight-500);font-weight:var(--brand-text-weight-500);padding-top:var(--base-size-64)}@media screen and (width>=87.5rem){.Primer_Brand__Prose-module__Prose--editorial___z40XG blockquote{margin-block:var(--base-size-40)}}.Primer_Brand__Prose-module__Prose___8WnSE blockquote:before{content:"“";font-size:var(--base-size-48);line-height:var(--base-size-64);font-weight:var(--base-text-weight-extrabold);position:absolute;top:0}.Primer_Brand__Prose-module__Prose--editorial___z40XG blockquote:before{color:var(--brand-color-accent-primary);font-size:var(--base-size-64);line-height:var(--base-size-64)}.Primer_Brand__Prose-module__Prose--default___G7iCy blockquote:after{content:"";width:var(--brand-borderWidth-thick);background-color:var(--base-color-scale-indigo-5);background-image:linear-gradient(180deg, var(--base-color-scale-blue-5), var(--base-color-scale-purple-5));height:100%;display:block;position:absolute;top:0;left:0}.Primer_Brand__Prose-module__Prose___8WnSE figure figcaption{--spacing:var(--base-size-24);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);color:var(--brand-color-text-muted)}.Primer_Brand__Prose-module__Prose--editorial___z40XG figcaption{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);font-weight:var(--brand-text-weight-100)}.Primer_Brand__Prose-module__Prose--editorial___z40XG hr{--spacing:var(--base-size-64);border:1px solid var(--brand-color-border-muted);margin-block-start:var(--spacing);margin-block-end:var(--spacing)}.Primer_Brand__Prose-module__Prose___8WnSE video,.Primer_Brand__Prose-module__Prose___8WnSE iframe[src*=youtube\.com],.Primer_Brand__Prose-module__Prose___8WnSE iframe[src*=youtu\.be],.Primer_Brand__Prose-module__Prose___8WnSE iframe[src*=youtube-nocookie\.com]{--spacing:var(--brand-Prose-img-spacing);border-radius:var(--brand-borderRadius-medium);height:auto;margin-left:auto;margin-right:auto;margin-block-end:var(--spacing);display:block}.Primer_Brand__Prose-module__Prose___8WnSE video{max-width:100%}.Primer_Brand__Prose-module__Prose___8WnSE iframe[src*=youtube\.com],.Primer_Brand__Prose-module__Prose___8WnSE iframe[src*=youtu\.be],.Primer_Brand__Prose-module__Prose___8WnSE iframe[src*=youtube-nocookie\.com]{aspect-ratio:16/9;width:100%}@media (prefers-reduced-motion:reduce){.Primer_Brand__Prose-module__Prose___8WnSE a,.Primer_Brand__Prose-module__Prose___8WnSE a:before,.Primer_Brand__Prose-module__Prose___8WnSE a:after,.Primer_Brand__Prose-module__Prose___8WnSE a *{transition:none!important}}.Primer_Brand__Prose-module__Prose___8WnSE table{--spacing:var(--base-size-32);border-collapse:collapse;border-spacing:0;width:100%;font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Prose-module__Prose___8WnSE table caption{text-align:left;font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-100);line-height:var(--brand-text-lineHeight-100);color:var(--brand-color-text-muted);padding-block-end:var(--base-size-24)}.Primer_Brand__Prose-module__Prose___8WnSE table th,.Primer_Brand__Prose-module__Prose___8WnSE table td{padding-block:var(--base-size-16);padding-inline:var(--base-size-12);text-align:left;vertical-align:top;border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Prose-module__Prose___8WnSE table th:first-child,.Primer_Brand__Prose-module__Prose___8WnSE table td:first-child,.Primer_Brand__Prose-module__Prose___8WnSE table th:last-child,.Primer_Brand__Prose-module__Prose___8WnSE table td:last-child{padding-inline:0}.Primer_Brand__Prose-module__Prose___8WnSE table th{font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-400);line-height:var(--brand-text-lineHeight-100);color:var(--brand-color-text-muted)}.Primer_Brand__Prose-module__Prose___8WnSE table thead th{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-color-border-default)}.Primer_Brand__Prose-module__Prose___8WnSE table tbody tr:last-child td{border-bottom:none}.Primer_Brand__Prose-module__Prose--editorial___z40XG table{--spacing:var(--base-size-48)}.Primer_Brand__Prose-module__Prose___8WnSE td>ul:first-child,.Primer_Brand__Prose-module__Prose___8WnSE td>ol:first-child{margin-block-start:0}@media screen and (width>=48rem){.Primer_Brand__Prose-module__Prose___8WnSE table th,.Primer_Brand__Prose-module__Prose___8WnSE table td{padding:var(--base-size-16) var(--base-size-8)}.Primer_Brand__Prose-module__Prose___8WnSE table th:not(:first-child):not(:last-child),.Primer_Brand__Prose-module__Prose___8WnSE table td:not(:first-child):not(:last-child){padding-inline:var(--base-size-16)}.Primer_Brand__Prose-module__Prose___8WnSE table th:first-child,.Primer_Brand__Prose-module__Prose___8WnSE table td:first-child{padding-inline-start:0}.Primer_Brand__Prose-module__Prose___8WnSE table th:last-child,.Primer_Brand__Prose-module__Prose___8WnSE table td:last-child{padding-inline-end:0}.Primer_Brand__Prose-module__Prose___8WnSE table tbody tr:hover{background-color:var(--brand-color-canvas-subtle)}}@media screen and (width<=47.99rem){.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]){border-collapse:separate;border-spacing:0;width:100%;box-shadow:none;font-size:var(--brand-text-size-200);background:0 0}.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) thead{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}:is(.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) tbody,.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) tr){width:100%;display:block}:is(.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) th:not(:first-child):not(:last-child),.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) td:not(:first-child):not(:last-child)){padding-inline:0}.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) tr{border-block-start:var(--brand-borderWidth-thicker) solid var(--brand-color-border-muted);margin-block-end:var(--spacing);padding-block-start:var(--base-size-20)}.Primer_Brand__Prose-module__Prose___8WnSE td[data-label]{width:100%;margin:0 0 16px;margin:0 0 var(--base-size-16,16px) 0;border:none;flex-direction:column;align-items:flex-start;padding:0;display:flex}.Primer_Brand__Prose-module__Prose___8WnSE td[data-label]:not(:last-child){border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-end:var(--base-size-20)}.Primer_Brand__Prose-module__Prose___8WnSE td[data-label]:before{content:attr(data-label);color:var(--brand-color-text-muted);text-align:left;font-weight:var(--brand-text-weight-400);margin-block-end:var(--base-size-4)}.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) td:not([data-label]){width:100%;border:none;margin-block-end:var(--base-size-16);padding:0;display:block}.Primer_Brand__Prose-module__Prose___8WnSE table:has(td[data-label]) td:not([data-label]):not(:last-child){border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-end:var(--base-size-20)}.Primer_Brand__Prose-module__Prose___8WnSE td[data-label]:last-child{margin-block-end:0}}

package/esm/Prose/Prose.module.js ADDED Viewed

@@ -0,0 +1,10 @@
+import './Prose.module-CL7KawRN.css';var e = {
+	Prose: "Primer_Brand__Prose-module__Prose___8WnSE",
+	"Prose--editorial": "Primer_Brand__Prose-module__Prose--editorial___z40XG",
+	"Prose--lineLength": "Primer_Brand__Prose-module__Prose--lineLength___V5nMv",
+	"Prose--default": "Primer_Brand__Prose-module__Prose--default___G7iCy"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=Prose.module.js.map

package/esm/Prose/Prose.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Prose.module.js","names":[],"sources":["../../src/Prose/Prose.module.css"],"sourcesContent":["/* ---------------------------------------------------------- */\n/* Prose component */\n/* ---------------------------------------------------------- */\n/* Table of contents: */\n/* 1. Container */\n/* 2. Element spacing */\n/* 3. Line-length control */\n/* 4. Headings */\n/* 5. Paragraphs */\n/* 6. Lists */\n/* 7. Inline elements */\n/* 8. Images */\n/* 9. Block elements */\n/* ---------------------------------------------------------- */\n\n/* ---------------------------------------------------------- */\n/* 1. Container */\n/* ---------------------------------------------------------- */\n\n.Prose {\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n color: var(--brand-color-text-default);\n}\n\n.Prose--editorial {\n font-size: var(--brand-text-size-300);\n line-height: 1.7;\n}\n\n/* ---------------------------------------------------------- */\n/* 2. Element spacing */\n/* ---------------------------------------------------------- */\n\n.Prose * + * {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n margin-block-start: var(--spacing, 1em);\n}\n\n.Prose--editorial * + * {\n --spacing: var(--base-size-40);\n}\n\n/* ---------------------------------------------------------- */\n/* 3. Line-length control */\n/* ---------------------------------------------------------- */\n\n.Prose--lineLength {\n max-width: var(--brand-Prose-lineLength);\n}\n\n/* ---------------------------------------------------------- */\n/* 4. Headings */\n/* ---------------------------------------------------------- */\n\n.Prose h1 {\n font-weight: var(--brand-heading-weight-700);\n font-size: var(--brand-text-size-700);\n line-height: var(--brand-text-lineHeight-700);\n font-family: var(--brand-heading-fontFamily);\n letter-spacing: var(--brand-text-letterSpacing-700);\n}\n\n.Prose--lineLength h1 {\n max-width: 22ch;\n}\n\n.Prose h2 {\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--brand-text-size-600);\n line-height: var(--brand-text-lineHeight-600);\n font-family: var(--brand-heading-fontFamily);\n letter-spacing: var(--brand-text-letterSpacing-600);\n}\n\n.Prose--lineLength h2 {\n max-width: 26ch;\n}\n\n.Prose h3 {\n font-weight: var(--brand-heading-weight-400);\n font-size: var(--brand-text-size-400);\n line-height: var(--brand-heading-lineHeight-400);\n font-family: var(--brand-heading-fontFamily);\n letter-spacing: var(--brand-heading-letterSpacing-400);\n}\n\n.Prose--lineLength h1 {\n max-width: 32ch;\n}\n\n.Prose h4 {\n --spacing: var(--base-size-48);\n font-weight: var(--brand-heading-weight-400);\n font-size: var(--brand-text-size-300);\n line-height: var(--brand-text-lineHeight-300);\n font-family: var(--brand-heading-fontFamily);\n letter-spacing: var(--brand-heading-letterSpacing-300);\n}\n\n.Prose h5 {\n --spacing: var(--base-size-48);\n font-weight: var(--brand-text-subhead-weight-medium);\n font-size: var(--brand-text-subhead-size-medium);\n line-height: var(--brand-text-subhead-lineHeight-medium);\n font-family: var(--brand-heading-fontFamily);\n letter-spacing: var(--brand-heading-letterSpacing-200);\n}\n\n.Prose h6 {\n --spacing: var(--base-size-48);\n font-weight: var(--brand-text-subhead-weight-medium);\n font-size: var(--brand-text-subhead-size-medium);\n line-height: var(--brand-text-subhead-lineHeight-medium);\n font-family: var(--brand-heading-fontFamily);\n letter-spacing: var(--brand-heading-letterSpacing-200);\n}\n\n.Prose :is(h1, h2, h3) {\n --spacing: var(--base-size-64);\n}\n\n.Prose :is(h1, h2, h3) + * {\n --spacing: var(--base-size-24);\n}\n\n/* ---------------------------------------------------------- */\n/* 5. Paragraphs */\n/* ---------------------------------------------------------- */\n\n.Prose p {\n --spacing: var(--base-size-24);\n}\n\n.Prose--editorial p {\n --spacing: var(--base-size-40);\n}\n\n/* ---------------------------------------------------------- */\n/* 6. Lists */\n/* ---------------------------------------------------------- */\n\n.Prose ul,\n.Prose ol {\n --spacing: var(--base-size-16);\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n padding: 0;\n margin-inline-start: var(--base-size-24);\n line-height: var(--brand-text-lineHeight-300);\n}\n\n.Prose--editorial ul,\n.Prose--editorial ol {\n --spacing: var(--base-size-48);\n gap: var(--base-size-16);\n line-height: 1.7;\n}\n\n.Prose ul {\n list-style-type: image;\n list-style-image: var(--brand-Prose-unorderedList-imageUrl);\n}\n\n.Prose li {\n --spacing: 0;\n}\n\n/* ---------------------------------------------------------- */\n/* 7. Inline elements */\n/* ---------------------------------------------------------- */\n\n.Prose strong,\n.Prose b {\n font-weight: var(\n --brand-text-weight-heavy\n ) !important; /* Overrides Primer product styles in dotcom. Should compute to 550 */\n}\n\n.Prose em {\n font-variation-settings: 'ital' 10;\n font-synthesis: none;\n}\n\n.Prose a {\n color: var(--brand-InlineLink-color-rest);\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 position: relative;\n}\n\n.Prose a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Prose a:active::after {\n border-color: var(--brand-InlineLink-color-pressed);\n}\n\n.Prose code {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n white-space: break-spaces;\n padding: var(--base-size-4) var(--base-size-8);\n border-radius: var(--brand-borderRadius-small);\n background-color: var(--brand-Prose-code-bgColor);\n}\n\n.Prose pre {\n padding: var(--base-size-16);\n border-radius: var(--brand-borderRadius-medium);\n background-color: var(--brand-Prose-code-bgColor);\n}\n\n.Prose pre code {\n padding: 0;\n}\n\n/* ---------------------------------------------------------- */\n/* 8. Images */\n/* ---------------------------------------------------------- */\n\n.Prose img {\n --spacing: var(--brand-Prose-img-spacing);\n display: block;\n max-width: 100%;\n height: auto;\n margin-left: auto;\n margin-right: auto;\n margin-block-end: var(--spacing);\n}\n\n.Prose--editorial figure img {\n margin-block-end: 0;\n border-radius: var(--brand-borderRadius-medium);\n display: block;\n}\n\n/* ---------------------------------------------------------- */\n/* 9. Block elements */\n/* ---------------------------------------------------------- */\n\n.Prose blockquote {\n --spacing: var(--brand-Prose-blockquote-spacing);\n position: relative;\n font-size: var(--brand-text-size-400);\n line-height: var(--brand-text-lineHeight-400);\n padding-top: var(--base-size-48);\n padding-bottom: var(--base-size-8);\n margin-bottom: var(--spacing);\n}\n\n.Prose--default blockquote {\n padding-left: var(--base-size-40);\n}\n\n.Prose--editorial blockquote {\n font-size: var(--brand-text-size-500);\n line-height: var(--brand-text-lineHeight-500);\n font-weight: var(--brand-text-weight-500);\n padding-top: var(--base-size-64);\n}\n\n@media screen and (min-width: 87.5rem) {\n .Prose--editorial blockquote {\n margin-block: var(--base-size-40);\n }\n}\n\n.Prose blockquote::before {\n content: '“';\n font-size: var(--base-size-48);\n line-height: var(--base-size-64);\n font-weight: var(--base-text-weight-extrabold);\n position: absolute;\n top: 0;\n}\n\n.Prose--editorial blockquote::before {\n color: var(--brand-color-accent-primary);\n font-size: var(--base-size-64);\n line-height: var(--base-size-64);\n}\n\n.Prose--default blockquote::after {\n content: '';\n display: block;\n position: absolute;\n width: var(--brand-borderWidth-thick);\n height: 100%;\n top: 0;\n left: 0;\n background-color: var(--base-color-scale-indigo-5);\n background-image: linear-gradient(180deg, var(--base-color-scale-blue-5), var(--base-color-scale-purple-5));\n}\n\n.Prose figure figcaption {\n --spacing: var(--base-size-24);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n color: var(--brand-color-text-muted);\n}\n\n.Prose--editorial figcaption {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n font-weight: var(--brand-text-weight-100);\n}\n\n.Prose--editorial hr {\n --spacing: var(--base-size-64);\n margin-block-start: var(--spacing);\n margin-block-end: var(--spacing);\n border: 1px solid var(--brand-color-border-muted);\n}\n\n.Prose video,\n.Prose iframe[src*='youtube.com'],\n.Prose iframe[src*='youtu.be'],\n.Prose iframe[src*='youtube-nocookie.com'] {\n --spacing: var(--brand-Prose-img-spacing);\n\n border-radius: var(--brand-borderRadius-medium);\n display: block;\n height: auto;\n margin-left: auto;\n margin-right: auto;\n margin-block-end: var(--spacing);\n}\n\n.Prose video {\n max-width: 100%;\n}\n\n.Prose iframe[src*='youtube.com'],\n.Prose iframe[src*='youtu.be'],\n.Prose iframe[src*='youtube-nocookie.com'] {\n width: 100%;\n aspect-ratio: 16 / 9;\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 .Prose a,\n .Prose a::before,\n .Prose a::after,\n .Prose a * {\n transition: none !important;\n }\n}\n\n/* Tables */\n\n.Prose table {\n --spacing: var(--base-size-32);\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.Prose table caption {\n text-align: left;\n padding-block-end: var(--base-size-24);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-100);\n line-height: var(--brand-text-lineHeight-100);\n color: var(--brand-color-text-muted);\n}\n\n.Prose table th,\n.Prose table td {\n padding-block: var(--base-size-16);\n padding-inline: var(--base-size-12);\n text-align: left;\n vertical-align: top;\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Prose table th:first-child,\n.Prose table td:first-child,\n.Prose table th:last-child,\n.Prose table td:last-child {\n padding-inline: 0;\n}\n\n.Prose table th {\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-400);\n line-height: var(--brand-text-lineHeight-100);\n color: var(--brand-color-text-muted);\n}\n\n.Prose table thead th {\n border-bottom: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);\n}\n\n.Prose table tbody tr:last-child td {\n border-bottom: none;\n}\n\n.Prose--editorial table {\n --spacing: var(--base-size-48);\n}\n\n.Prose td > ul:first-child,\n.Prose td > ol:first-child {\n margin-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .Prose table th,\n .Prose table td {\n padding: var(--base-size-16) var(--base-size-8);\n }\n\n .Prose table th:not(:first-child):not(:last-child),\n .Prose table td:not(:first-child):not(:last-child) {\n padding-inline: var(--base-size-16);\n }\n\n .Prose table th:first-child,\n .Prose table td:first-child {\n padding-inline-start: 0;\n }\n\n .Prose table th:last-child,\n .Prose table td:last-child {\n padding-inline-end: 0;\n }\n\n .Prose table tbody tr:hover {\n background-color: var(--brand-color-canvas-subtle);\n }\n}\n\n@media screen and (max-width: 47.99rem) {\n .Prose table:has(td[data-label]) {\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n background: none;\n box-shadow: none;\n font-size: var(--brand-text-size-200); /* inherit from Prose */\n }\n\n /* Visually hidden only */\n .Prose table:has(td[data-label]) thead {\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n .Prose table:has(td[data-label]) tbody,\n .Prose table:has(td[data-label]) tr {\n display: block;\n width: 100%;\n }\n\n .Prose table:has(td[data-label]) th:not(:first-child):not(:last-child),\n .Prose table:has(td[data-label]) td:not(:first-child):not(:last-child) {\n padding-inline: 0;\n }\n\n .Prose table:has(td[data-label]) tr {\n border-block-start: var(--brand-borderWidth-thicker) solid var(--brand-color-border-muted);\n padding-block-start: var(--base-size-20);\n margin-block-end: var(--spacing);\n }\n\n .Prose td[data-label] {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0;\n margin: 0 0 var(--base-size-16, 16px) 0;\n border: none;\n align-items: flex-start;\n }\n\n .Prose td[data-label]:not(:last-child) {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block-end: var(--base-size-20);\n }\n\n .Prose td[data-label]::before {\n content: attr(data-label);\n color: var(--brand-color-text-muted);\n margin-block-end: var(--base-size-4);\n text-align: left;\n font-weight: var(--brand-text-weight-400);\n }\n\n .Prose table:has(td[data-label]) td:not([data-label]) {\n display: block;\n width: 100%;\n padding: 0;\n margin-block-end: var(--base-size-16);\n border: none;\n }\n\n .Prose table:has(td[data-label]) td:not([data-label]):not(:last-child) {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block-end: var(--base-size-20);\n }\n\n .Prose td[data-label]:last-child {\n margin-block-end: 0;\n }\n}\n"],"mappings":""}

package/esm/Prose/index.d.ts ADDED Viewed

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

package/esm/Prose/index.d.ts.map ADDED Viewed

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

package/esm/Section/Section.d.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css';
+export declare const SectionPaddingVariants: readonly ["none", "condensed", "normal", "spacious"];
+export declare const SectionBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+type BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString;
+type PaddingVariants = (typeof SectionPaddingVariants)[number];
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>;
+type SectionProps = {
+    /**
+     * The HTML element used to render the section.
+     */
+    as?: 'section' | 'div';
+    /**
+     * The padding applied to the start of the section.
+     */
+    paddingBlockStart?: PaddingVariants | ResponsivePaddingVariantsMap;
+    /**
+     * The padding applied to the end of the section.
+     */
+    paddingBlockEnd?: PaddingVariants | ResponsivePaddingVariantsMap;
+    /**
+     * The system-level or custom background color of the section.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * The background image of the section.
+     */
+    backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap;
+    /**
+     * The position of the background image.
+     */
+    backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap;
+    /**
+     * The size of the background image.
+     */
+    backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap;
+    /**
+     * Makes the content of the section span the full width of its parent container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Adds rounded corners to the top of the section.
+     */
+    rounded?: boolean;
+    /**
+     * Forward inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional attirbute for testing
+     */
+    ['data-testid']?: string;
+} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+export declare const Section: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Section.d.ts.map

package/esm/Section/Section.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAuB,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,iGAAiG,CAAA;AAGxG,eAAO,MAAM,sBAAsB,sDAAuD,CAAA;AAC1F,eAAO,MAAM,uBAAuB,gCAAiC,CAAA;AAIrE,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,KAAK,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;AAC5E,KAAK,eAAe,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,KAAK,4BAA4B,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAA;AACnE,KAAK,oCAAoC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AAC5E,KAAK,gCAAgC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACxE,KAAK,+BAA+B,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACvE,KAAK,4BAA4B,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAElE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,CAAA;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,GAAG,4BAA4B,CAAA;IAClE;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,4BAA4B,CAAA;IAChE;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,4BAA4B,CAAA;IACjE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,+BAA+B,CAAA;IACxE;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,oCAAoC,CAAA;IAClF;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,gCAAgC,CAAA;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;OAEG;IACH,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAOhD,eAAO,MAAM,OAAO,2HA4GnB,CAAA"}

package/esm/Section/Section.js ADDED Viewed

@@ -0,0 +1,51 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/section/section-GXjcxN8l.css';/* empty css                                                                                           */
+import t from "./Section.module.js";
+import { forwardRef as n, useCallback as r, useMemo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/Section/Section.tsx
+var o = [
+	"none",
+	"condensed",
+	"normal",
+	"spacious"
+], s = ["default", "subtle"], c = o[2], l = {
+	root: "Section",
+	container: "Section__container"
+}, u = n(({ as: n = "section", paddingBlockStart: o = c, paddingBlockEnd: u = c, backgroundColor: d, backgroundImageSrc: f, backgroundImagePosition: p = "50%", backgroundImageSize: m = "cover", className: h, children: g, "data-testid": _, fullWidth: v = !1, rounded: y = !1, style: b, ...x }, S) => {
+	let C = r((e, n) => typeof e == "string" ? t[`Section--${n}-${e}`] : Object.keys(e).map((r) => t[`Section-${r}--${n}-${e[r]}`]).join(" "), []), w = r((e, t) => t === "background-image-src" ? Array.isArray(e) ? e.map((e) => `url(${e})`).join() : `url(${e})` : t === "background-color" && typeof e == "string" ? s.includes(e) ? `var(--brand-color-canvas-${e})` : e : Array.isArray(e) ? e.join() : e, []), T = r((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-Section-${e}`]: w(t, e) } : {
+		[`--brand-Section-narrow-${e}`]: w(t?.narrow, e),
+		[`--brand-Section-regular-${e}`]: w(t?.regular, e),
+		[`--brand-Section-wide-${e}`]: w(t?.wide, e)
+	}, [w]), E = r((e, t, n) => {
+		n && Object.assign(e, T(t, n));
+	}, [T]), D = i(() => C(o, "paddingBlockStart"), [o, C]), O = i(() => C(u, "paddingBlockEnd"), [u, C]), k = i(() => {
+		let e = {};
+		return E(e, "background-color", d), E(e, "background-image-src", f), E(e, "background-image-position", p), E(e, "background-image-size", m), e;
+	}, [
+		E,
+		d,
+		f,
+		p,
+		m
+	]);
+	return /* @__PURE__ */ a(n, {
+		ref: S,
+		className: e(t.Section, D, O, y && t["Section--rounded"], h),
+		"data-testid": _ || l.root,
+		style: {
+			...k,
+			...b
+		},
+		...x,
+		children: /* @__PURE__ */ a("div", {
+			className: e(t.Section__container, v && t["Section__container--fullWidth"]),
+			"data-testid": l.container,
+			children: g
+		})
+	});
+});
+//#endregion
+export { u as Section, s as SectionBackgroundColors, o as SectionPaddingVariants };
+//# sourceMappingURL=Section.js.map

package/esm/Section/Section.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Section.js","names":[],"sources":["../../src/Section/Section.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useCallback, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css'\nimport styles from './Section.module.css'\n\nexport const SectionPaddingVariants = ['none', 'condensed', 'normal', 'spacious'] as const\nexport const SectionBackgroundColors = ['default', 'subtle'] as const\n\nconst defaultSectionPadding = SectionPaddingVariants[2]\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString // The AnyString union type is a workaround to provide autocompletion for the SectionBackgroundColors values\ntype PaddingVariants = (typeof SectionPaddingVariants)[number]\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>\ntype ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>\n\ntype SectionProps = {\n /**\n * The HTML element used to render the section.\n */\n as?: 'section' | 'div'\n /**\n * The padding applied to the start of the section.\n */\n paddingBlockStart?: PaddingVariants | ResponsivePaddingVariantsMap\n /**\n * The padding applied to the end of the section.\n */\n paddingBlockEnd?: PaddingVariants | ResponsivePaddingVariantsMap\n /**\n * The system-level or custom background color of the section.\n */\n backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap\n /**\n * The background image of the section.\n */\n backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap\n /**\n * The position of the background image.\n */\n backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap\n /**\n * The size of the background image.\n */\n backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap\n /**\n * Makes the content of the section span the full width of its parent container.\n */\n fullWidth?: boolean\n /**\n * Adds rounded corners to the top of the section.\n */\n rounded?: boolean\n /**\n * Forward inline styles\n */\n style?: React.CSSProperties\n /**\n * Optional attirbute for testing\n */\n ['data-testid']?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst testIds = {\n root: 'Section',\n container: 'Section__container',\n}\n\nexport const Section = forwardRef<HTMLDivElement, PropsWithChildren<SectionProps>>(\n (\n {\n as: Component = 'section',\n paddingBlockStart = defaultSectionPadding,\n paddingBlockEnd = defaultSectionPadding,\n backgroundColor,\n backgroundImageSrc,\n backgroundImagePosition = '50%',\n backgroundImageSize = 'cover',\n className,\n children,\n 'data-testid': testId,\n fullWidth = false,\n rounded = false,\n style,\n ...props\n },\n ref,\n ) => {\n const createPaddingClasses = useCallback(\n (paddingBlock, blockType) =>\n typeof paddingBlock === 'string'\n ? styles[`Section--${blockType}-${paddingBlock}`]\n : Object.keys(paddingBlock)\n .map(viewport => styles[`Section-${viewport}--${blockType}-${paddingBlock[viewport]}`])\n .join(' '),\n [],\n )\n\n const processBackgroundValue = useCallback((value: string | string[], property) => {\n if (property === 'background-image-src') {\n return Array.isArray(value) ? value.map(img => `url(${img})`).join() : `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return SectionBackgroundColors.includes(value as (typeof SectionBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return Array.isArray(value) ? value.join() : value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' || Array.isArray(value)\n ? {[`--brand-Section-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-Section-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-Section-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-Section-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const addStyle = useCallback(\n (obj, property, value) => {\n if (value) {\n Object.assign(obj, createStyles(property, value))\n }\n },\n [createStyles],\n )\n\n const paddingBlockStartClass = useMemo(\n () => createPaddingClasses(paddingBlockStart, 'paddingBlockStart'),\n [paddingBlockStart, createPaddingClasses],\n )\n const paddingBlockEndClass = useMemo(\n () => createPaddingClasses(paddingBlockEnd, 'paddingBlockEnd'),\n [paddingBlockEnd, createPaddingClasses],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n addStyle(allStyles, 'background-color', backgroundColor)\n addStyle(allStyles, 'background-image-src', backgroundImageSrc)\n addStyle(allStyles, 'background-image-position', backgroundImagePosition)\n addStyle(allStyles, 'background-image-size', backgroundImageSize)\n\n return allStyles\n }, [addStyle, backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize])\n\n return (\n <Component\n ref={ref}\n className={clsx(\n styles.Section,\n paddingBlockStartClass,\n paddingBlockEndClass,\n rounded && styles['Section--rounded'],\n className,\n )}\n data-testid={testId || testIds.root}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(styles[`Section__container`], fullWidth && styles['Section__container--fullWidth'])}\n data-testid={testIds.container}\n >\n {children}\n </div>\n </Component>\n )\n },\n)\n"],"mappings":";;;;;;AAOA,IAAa,IAAyB;CAAC;CAAQ;CAAa;CAAU;CAAW,EACpE,IAA0B,CAAC,WAAW,SAAS,EAEtD,IAAwB,EAAuB,IA+D/C,IAAU;CACd,MAAM;CACN,WAAW;CACZ,EAEY,IAAU,GAEnB,EACE,IAAI,IAAY,WAChB,uBAAoB,GACpB,qBAAkB,GAClB,oBACA,uBACA,6BAA0B,OAC1B,yBAAsB,SACtB,cACA,aACA,eAAe,GACf,eAAY,IACZ,aAAU,IACV,UACA,GAAG,KAEL,MACG;CACH,IAAM,IAAuB,GAC1B,GAAc,MACb,OAAO,KAAiB,WACpB,EAAO,YAAY,EAAU,GAAG,OAChC,OAAO,KAAK,EAAa,CACtB,KAAI,MAAY,EAAO,WAAW,EAAS,IAAI,EAAU,GAAG,EAAa,MAAa,CACtF,KAAK,IAAI,EAClB,EAAE,CACH,EAEK,IAAyB,GAAa,GAA0B,MAChE,MAAa,yBACR,MAAM,QAAQ,EAAM,GAAG,EAAM,KAAI,MAAO,OAAO,EAAI,GAAG,CAAC,MAAM,GAAG,OAAO,EAAM,KAGlF,MAAa,sBAAsB,OAAO,KAAU,WAC/C,EAAwB,SAAS,EAAkD,GACtF,4BAA4B,EAAM,KAClC,IAGC,MAAM,QAAQ,EAAM,GAAG,EAAM,MAAM,GAAG,GAC5C,EAAE,CAAC,EAEA,IAAe,GAClB,GAAU,MACT,OAAO,KAAU,YAAY,MAAM,QAAQ,EAAM,GAC7C,GAAE,mBAAmB,MAAa,EAAuB,GAAO,EAAS,EAAC,GAC1E;GACG,0BAA0B,MAAa,EAAuB,GAAO,QAAQ,EAAS;GACtF,2BAA2B,MAAa,EAAuB,GAAO,SAAS,EAAS;GACxF,wBAAwB,MAAa,EAAuB,GAAO,MAAM,EAAS;EACpF,EACP,CAAC,EAAuB,CACzB,EAEK,IAAW,GACd,GAAK,GAAU,MAAU;AACxB,EAAI,KACF,OAAO,OAAO,GAAK,EAAa,GAAU,EAAM,CAAC;IAGrD,CAAC,EAAa,CACf,EAEK,IAAyB,QACvB,EAAqB,GAAmB,oBAAoB,EAClE,CAAC,GAAmB,EAAqB,CAC1C,EACK,IAAuB,QACrB,EAAqB,GAAiB,kBAAkB,EAC9D,CAAC,GAAiB,EAAqB,CACxC,EAEK,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAE;AAOpB,SALA,EAAS,GAAW,oBAAoB,EAAgB,EACxD,EAAS,GAAW,wBAAwB,EAAmB,EAC/D,EAAS,GAAW,6BAA6B,EAAwB,EACzE,EAAS,GAAW,yBAAyB,EAAoB,EAE1D;IACN;EAAC;EAAU;EAAiB;EAAoB;EAAyB;EAAoB,CAAC;AAEjG,QACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,SACP,GACA,GACA,KAAW,EAAO,qBAClB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAkB,GAAG;GAAM;EACtC,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,oBAAuB,KAAa,EAAO,iCAAiC;GACnG,eAAa,EAAQ;GAEpB;GACG,CAAA;EACI,CAAA;EAGjB"}

package/esm/Section/Section.module-B8zA8qj8.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Section-module__Section___O2zvq{--rounded-padding-overlap-adjustment:0px;--rounded-radius:var(--brand-borderRadius-xlarge);--padding-block-end:var(--brand-Section-padding-normal);--adjusted-padding-block-end:calc(var(--padding-block-end) + var(--rounded-padding-overlap-adjustment));background-repeat:no-repeat;background-color:var(--brand-Section-narrow-background-color,var(--brand-Section-background-color));background-image:var(--brand-Section-narrow-background-image-src,var(--brand-Section-background-image-src));background-size:var(--brand-Section-narrow-background-image-size,var(--brand-Section-background-image-size));background-position:50%;background-position:var(--brand-Section-narrow-background-image-position,var(--brand-Section-background-image-position,center));padding-block-start:var(--padding-block-start);padding-block-end:var(--adjusted-padding-block-end)}.Primer_Brand__Section-module__Section__container___xy9DV{width:100%;max-width:var(--brand-Section-container-maxWidth);margin-inline:auto}.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n{max-width:none}.Primer_Brand__Section-module__Section--rounded___9qxrG{border-radius:var(--rounded-radius) var(--rounded-radius) 0 0;margin-top:calc(-1 * var(--rounded-radius))}.Primer_Brand__Section-module__Section___O2zvq:has(+.Primer_Brand__Section-module__Section--rounded___9qxrG){--rounded-padding-overlap-adjustment:var(--rounded-radius)}.Primer_Brand__Section-module__Section--paddingBlockStart-none___4vMFc,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-none___7jsdQ{padding-block-start:0}.Primer_Brand__Section-module__Section--paddingBlockStart-condensed___B4uoH,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-condensed___xbTDA{padding-block-start:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section--paddingBlockStart-normal___MRda_,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-normal___f0OXP{padding-block-start:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section--paddingBlockStart-spacious___UzvtN,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-spacious___402r9{padding-block-start:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section--paddingBlockEnd-none___bRHMx,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-none___r7NV_{--padding-block-end:0px}.Primer_Brand__Section-module__Section--paddingBlockEnd-condensed___Y1rxz,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-condensed___0v98Y{--padding-block-end:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section--paddingBlockEnd-normal___p2GiM,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-normal___Cfp0Y{--padding-block-end:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section--paddingBlockEnd-spacious___TybX8,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-spacious___ysjWh{--padding-block-end:var(--brand-Section-padding-spacious)}@media screen and (width>=48rem){.Primer_Brand__Section-module__Section___O2zvq{background-color:var(--brand-Section-regular-background-color,var(--brand-Section-background-color));background-image:var(--brand-Section-regular-background-image-src,var(--brand-Section-background-image-src));background-size:var(--brand-Section-regular-background-image-size,var(--brand-Section-background-image-size));background-position:var(--brand-Section-regular-background-image-position,var(--brand-Section-background-image-position))}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-none___Nj9j3{padding-block-start:0}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-condensed___qaXW1{padding-block-start:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-normal___vB8Ri{padding-block-start:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-spacious___ldEla{padding-block-start:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-none___fz5rB{--padding-block-end:0px}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-condensed___D1eGT{--padding-block-end:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-normal___6tfPx{--padding-block-end:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-spacious___ffrwb{--padding-block-end:var(--brand-Section-padding-spacious)}}@media screen and (width>=80rem){.Primer_Brand__Section-module__Section___O2zvq{background-color:var(--brand-Section-wide-background-color,var(--brand-Section-background-color));background-image:var(--brand-Section-wide-background-image-src,var(--brand-Section-background-image-src));background-size:var(--brand-Section-wide-background-image-size,var(--brand-Section-background-image-size));background-position:var(--brand-Section-wide-background-image-position,var(--brand-Section-background-image-position))}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-none___cYTu3{padding-block-start:0}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-condensed___Y3WFj{padding-block-start:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-normal___0lhjy{padding-block-start:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-spacious___kEVXd{padding-block-start:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-none___3NyQ9{--padding-block-end:0px}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-condensed___bF0Sz{--padding-block-end:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-normal___kisJx{--padding-block-end:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-spacious___xovw1{--padding-block-end:var(--brand-Section-padding-spacious)}}

package/esm/Section/Section.module.js ADDED Viewed

@@ -0,0 +1,42 @@
+import './Section.module-B8zA8qj8.css';var e = {
+	Section: "Primer_Brand__Section-module__Section___O2zvq",
+	Section__container: "Primer_Brand__Section-module__Section__container___xy9DV",
+	"Section__container--fullWidth": "Primer_Brand__Section-module__Section__container--fullWidth___5sU9n",
+	"Section--rounded": "Primer_Brand__Section-module__Section--rounded___9qxrG",
+	"Section--paddingBlockStart-none": "Primer_Brand__Section-module__Section--paddingBlockStart-none___4vMFc",
+	"Section-narrow--paddingBlockStart-none": "Primer_Brand__Section-module__Section-narrow--paddingBlockStart-none___7jsdQ",
+	"Section--paddingBlockStart-condensed": "Primer_Brand__Section-module__Section--paddingBlockStart-condensed___B4uoH",
+	"Section-narrow--paddingBlockStart-condensed": "Primer_Brand__Section-module__Section-narrow--paddingBlockStart-condensed___xbTDA",
+	"Section--paddingBlockStart-normal": "Primer_Brand__Section-module__Section--paddingBlockStart-normal___MRda_",
+	"Section-narrow--paddingBlockStart-normal": "Primer_Brand__Section-module__Section-narrow--paddingBlockStart-normal___f0OXP",
+	"Section--paddingBlockStart-spacious": "Primer_Brand__Section-module__Section--paddingBlockStart-spacious___UzvtN",
+	"Section-narrow--paddingBlockStart-spacious": "Primer_Brand__Section-module__Section-narrow--paddingBlockStart-spacious___402r9",
+	"Section--paddingBlockEnd-none": "Primer_Brand__Section-module__Section--paddingBlockEnd-none___bRHMx",
+	"Section-narrow--paddingBlockEnd-none": "Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-none___r7NV_",
+	"Section--paddingBlockEnd-condensed": "Primer_Brand__Section-module__Section--paddingBlockEnd-condensed___Y1rxz",
+	"Section-narrow--paddingBlockEnd-condensed": "Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-condensed___0v98Y",
+	"Section--paddingBlockEnd-normal": "Primer_Brand__Section-module__Section--paddingBlockEnd-normal___p2GiM",
+	"Section-narrow--paddingBlockEnd-normal": "Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-normal___Cfp0Y",
+	"Section--paddingBlockEnd-spacious": "Primer_Brand__Section-module__Section--paddingBlockEnd-spacious___TybX8",
+	"Section-narrow--paddingBlockEnd-spacious": "Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-spacious___ysjWh",
+	"Section-regular--paddingBlockStart-none": "Primer_Brand__Section-module__Section-regular--paddingBlockStart-none___Nj9j3",
+	"Section-regular--paddingBlockStart-condensed": "Primer_Brand__Section-module__Section-regular--paddingBlockStart-condensed___qaXW1",
+	"Section-regular--paddingBlockStart-normal": "Primer_Brand__Section-module__Section-regular--paddingBlockStart-normal___vB8Ri",
+	"Section-regular--paddingBlockStart-spacious": "Primer_Brand__Section-module__Section-regular--paddingBlockStart-spacious___ldEla",
+	"Section-regular--paddingBlockEnd-none": "Primer_Brand__Section-module__Section-regular--paddingBlockEnd-none___fz5rB",
+	"Section-regular--paddingBlockEnd-condensed": "Primer_Brand__Section-module__Section-regular--paddingBlockEnd-condensed___D1eGT",
+	"Section-regular--paddingBlockEnd-normal": "Primer_Brand__Section-module__Section-regular--paddingBlockEnd-normal___6tfPx",
+	"Section-regular--paddingBlockEnd-spacious": "Primer_Brand__Section-module__Section-regular--paddingBlockEnd-spacious___ffrwb",
+	"Section-wide--paddingBlockStart-none": "Primer_Brand__Section-module__Section-wide--paddingBlockStart-none___cYTu3",
+	"Section-wide--paddingBlockStart-condensed": "Primer_Brand__Section-module__Section-wide--paddingBlockStart-condensed___Y3WFj",
+	"Section-wide--paddingBlockStart-normal": "Primer_Brand__Section-module__Section-wide--paddingBlockStart-normal___0lhjy",
+	"Section-wide--paddingBlockStart-spacious": "Primer_Brand__Section-module__Section-wide--paddingBlockStart-spacious___kEVXd",
+	"Section-wide--paddingBlockEnd-none": "Primer_Brand__Section-module__Section-wide--paddingBlockEnd-none___3NyQ9",
+	"Section-wide--paddingBlockEnd-condensed": "Primer_Brand__Section-module__Section-wide--paddingBlockEnd-condensed___bF0Sz",
+	"Section-wide--paddingBlockEnd-normal": "Primer_Brand__Section-module__Section-wide--paddingBlockEnd-normal___kisJx",
+	"Section-wide--paddingBlockEnd-spacious": "Primer_Brand__Section-module__Section-wide--paddingBlockEnd-spacious___xovw1"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=Section.module.js.map

package/esm/Section/Section.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Section.module.js","names":[],"sources":["../../src/Section/Section.module.css"],"sourcesContent":[".Section {\n --rounded-padding-overlap-adjustment: 0px;\n --rounded-radius: var(--brand-borderRadius-xlarge);\n --padding-block-end: var(--brand-Section-padding-normal);\n --adjusted-padding-block-end: calc(var(--padding-block-end) + var(--rounded-padding-overlap-adjustment));\n\n background-repeat: no-repeat;\n background-color: var(--brand-Section-narrow-background-color, var(--brand-Section-background-color));\n background-image: var(--brand-Section-narrow-background-image-src, var(--brand-Section-background-image-src));\n background-size: var(--brand-Section-narrow-background-image-size, var(--brand-Section-background-image-size));\n\n background-position: var(\n --brand-Section-narrow-background-image-position,\n var(--brand-Section-background-image-position, center)\n );\n\n padding-block-start: var(--padding-block-start);\n padding-block-end: var(--adjusted-padding-block-end);\n}\n\n.Section__container {\n width: 100%;\n max-width: var(--brand-Section-container-maxWidth);\n margin-inline: auto;\n}\n\n.Section__container--fullWidth {\n max-width: none;\n}\n\n.Section--rounded {\n border-radius: var(--rounded-radius) var(--rounded-radius) 0 0;\n margin-top: calc(-1 * var(--rounded-radius));\n}\n\n/* A progressive enhancment to adjust block-end padding to account for adjacent section rounded corners overlap. */\n.Section:has(+ .Section--rounded) {\n --rounded-padding-overlap-adjustment: var(--rounded-radius);\n}\n\n.Section--paddingBlockStart-none,\n.Section-narrow--paddingBlockStart-none {\n padding-block-start: 0;\n}\n\n.Section--paddingBlockStart-condensed,\n.Section-narrow--paddingBlockStart-condensed {\n padding-block-start: var(--brand-Section-padding-condensed);\n}\n.Section--paddingBlockStart-normal,\n.Section-narrow--paddingBlockStart-normal {\n padding-block-start: var(--brand-Section-padding-normal);\n}\n.Section--paddingBlockStart-spacious,\n.Section-narrow--paddingBlockStart-spacious {\n padding-block-start: var(--brand-Section-padding-spacious);\n}\n\n.Section--paddingBlockEnd-none,\n.Section-narrow--paddingBlockEnd-none {\n --padding-block-end: 0px;\n}\n\n.Section--paddingBlockEnd-condensed,\n.Section-narrow--paddingBlockEnd-condensed {\n --padding-block-end: var(--brand-Section-padding-condensed);\n}\n.Section--paddingBlockEnd-normal,\n.Section-narrow--paddingBlockEnd-normal {\n --padding-block-end: var(--brand-Section-padding-normal);\n}\n.Section--paddingBlockEnd-spacious,\n.Section-narrow--paddingBlockEnd-spacious {\n --padding-block-end: var(--brand-Section-padding-spacious);\n}\n\n@media screen and (min-width: 48rem) {\n .Section {\n background-color: var(--brand-Section-regular-background-color, var(--brand-Section-background-color));\n background-image: var(--brand-Section-regular-background-image-src, var(--brand-Section-background-image-src));\n background-size: var(--brand-Section-regular-background-image-size, var(--brand-Section-background-image-size));\n background-position: var(\n --brand-Section-regular-background-image-position,\n var(--brand-Section-background-image-position)\n );\n }\n\n .Section-regular--paddingBlockStart-none {\n padding-block-start: 0;\n }\n\n .Section-regular--paddingBlockStart-condensed {\n padding-block-start: var(--brand-Section-padding-condensed);\n }\n .Section-regular--paddingBlockStart-normal {\n padding-block-start: var(--brand-Section-padding-normal);\n }\n .Section-regular--paddingBlockStart-spacious {\n padding-block-start: var(--brand-Section-padding-spacious);\n }\n\n .Section-regular--paddingBlockEnd-none {\n --padding-block-end: 0px;\n }\n\n .Section-regular--paddingBlockEnd-condensed {\n --padding-block-end: var(--brand-Section-padding-condensed);\n }\n .Section-regular--paddingBlockEnd-normal {\n --padding-block-end: var(--brand-Section-padding-normal);\n }\n .Section-regular--paddingBlockEnd-spacious {\n --padding-block-end: var(--brand-Section-padding-spacious);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Section {\n background-color: var(--brand-Section-wide-background-color, var(--brand-Section-background-color));\n background-image: var(--brand-Section-wide-background-image-src, var(--brand-Section-background-image-src));\n background-size: var(--brand-Section-wide-background-image-size, var(--brand-Section-background-image-size));\n\n background-position: var(\n --brand-Section-wide-background-image-position,\n var(--brand-Section-background-image-position)\n );\n }\n\n .Section-wide--paddingBlockStart-none {\n padding-block-start: 0;\n }\n\n .Section-wide--paddingBlockStart-condensed {\n padding-block-start: var(--brand-Section-padding-condensed);\n }\n .Section-wide--paddingBlockStart-normal {\n padding-block-start: var(--brand-Section-padding-normal);\n }\n .Section-wide--paddingBlockStart-spacious {\n padding-block-start: var(--brand-Section-padding-spacious);\n }\n\n .Section-wide--paddingBlockEnd-none {\n --padding-block-end: 0px;\n }\n\n .Section-wide--paddingBlockEnd-condensed {\n --padding-block-end: var(--brand-Section-padding-condensed);\n }\n .Section-wide--paddingBlockEnd-normal {\n --padding-block-end: var(--brand-Section-padding-normal);\n }\n .Section-wide--paddingBlockEnd-spacious {\n --padding-block-end: var(--brand-Section-padding-spacious);\n }\n}\n"],"mappings":""}

package/esm/Section/index.d.ts ADDED Viewed

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

package/esm/Section/index.d.ts.map ADDED Viewed

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

package/esm/SectionIntro/SectionIntro.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react';
+import { LinkProps } from '../Link';
+import { HeadingProps } from '../Heading';
+import { TextProps } from '../Text';
+import type { BaseProps } from '../component-helpers';
+export type SectionIntroProps = {
+    align?: 'start' | 'center';
+    fullWidth?: boolean;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    leadingComponent?: React.FunctionComponent;
+} & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
+type SectionIntroHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps;
+type SectionIntroDescriptionProps = BaseProps<HTMLParagraphElement> & {
+    children: React.ReactNode | React.ReactNode[];
+};
+export type SectionIntroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
+    animate?: boolean;
+    animationDelay?: number;
+};
+type SectionIntroLinkProps = Omit<LinkProps, 'size'> & BaseProps<HTMLAnchorElement>;
+export declare const SectionIntro: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<SectionIntroDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<SectionIntroLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroLabelProps>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+export {};
+//# sourceMappingURL=SectionIntro.d.ts.map

package/esm/SectionIntro/SectionIntro.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SectionIntro.d.ts","sourceRoot":"","sources":["../../src/SectionIntro/SectionIntro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAE1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAMvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;CAC3C,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAsC/B,KAAK,wBAAwB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4C5E,KAAK,4BAA4B,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAYD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,KAAK,GAAG,SAAS,CAAC,GAC5E,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAwBH,KAAK,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAkBnF,eAAO,MAAM,YAAY;;;;;CAKvB,CAAA"}

package/esm/SectionIntro/SectionIntro.js ADDED Viewed

@@ -0,0 +1,66 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useAnimation as t } from "../animation/useAnimation.js";
+import { Text as n } from "../Text/Text.js";
+import { TextCursorAnimation as r } from "../TextCursorAnimation/TextCursorAnimation.js";
+import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
+import { Link as o } from "../Link/Link.js";
+import s from "./SectionIntro.module.js";
+import c, { forwardRef as l, useCallback as u, useMemo as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/SectionIntro/SectionIntro.tsx
+var m = l(({ align: n = "start", animate: r, className: i, children: a, fullWidth: o = !1, leadingComponent: c, style: l, ...u }, d) => {
+	let { classes: m, styles: h } = t(r);
+	return /* @__PURE__ */ p("header", {
+		ref: d,
+		className: e(s.SectionIntro, s[`SectionIntro--align-${n}`], o && s["SectionIntro--full-width"], m, i),
+		...u,
+		style: {
+			...h,
+			...l
+		},
+		children: [c && /* @__PURE__ */ f(c, {}), a]
+	});
+}), h = "4", g = l(({ as: t = a, size: n = h, className: r, children: o, ...l }, p) => {
+	let m = d(() => c.Children.toArray(o), [o]), g = u(() => m.some((e) => c.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [m]), _ = m.length === 1 ? "default" : g();
+	return /* @__PURE__ */ f(i, {
+		ref: p,
+		className: e(s["SectionIntro-heading"], _ === "muted" && s["SectionIntro-heading--muted"], r),
+		size: n,
+		as: t,
+		...l,
+		children: o
+	});
+}), _ = l(({ className: t, children: r, ...i }, a) => /* @__PURE__ */ f(n, {
+	as: "p",
+	className: e(s["SectionIntro-description"], t),
+	ref: a,
+	variant: "muted",
+	...i,
+	children: r
+})), v = l(({ children: t, className: n, variant: i = "muted", animate: a = !1, animationDelay: o = 1e3, ...c }, l) => /* @__PURE__ */ f("span", {
+	ref: l,
+	className: e(s["SectionIntro-label"], n),
+	...c,
+	children: /* @__PURE__ */ f(r, {
+		variant: i,
+		animate: a,
+		delay: o,
+		children: t
+	})
+})), y = l(({ className: t, children: n, variant: r = "accent", ...i }, a) => /* @__PURE__ */ f(o, {
+	ref: a,
+	className: e(s["SectionIntro-link"], t),
+	size: "medium",
+	variant: r,
+	...i,
+	children: n
+})), b = Object.assign(m, {
+	Heading: g,
+	Description: _,
+	Link: y,
+	Label: v
+});
+//#endregion
+export { b as SectionIntro };
+//# sourceMappingURL=SectionIntro.js.map

package/esm/SectionIntro/SectionIntro.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SectionIntro.js","names":[],"sources":["../../src/SectionIntro/SectionIntro.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {TextCursorAnimation} from '../TextCursorAnimation'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntro.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport type SectionIntroProps = {\n align?: 'start' | 'center'\n fullWidth?: boolean\n /**\n * Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n leadingComponent?: React.FunctionComponent\n} & React.HTMLAttributes<HTMLHeadingElement> &\n BaseProps<HTMLHeadingElement>\n\nconst Root = forwardRef<HTMLHeadingElement, PropsWithChildren<SectionIntroProps>>(\n (\n {\n align = 'start',\n animate,\n className,\n children,\n fullWidth = false,\n leadingComponent: LeadingComponent,\n style,\n ...props\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntro,\n styles[`SectionIntro--align-${align}`],\n fullWidth && styles['SectionIntro--full-width'],\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n {LeadingComponent && <LeadingComponent />}\n {children}\n </header>\n )\n },\n)\n\ntype SectionIntroHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '4'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' || child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }, [childrenArray])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles[`SectionIntro-heading`],\n defaultColor === 'muted' && styles[`SectionIntro-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode | React.ReactNode[]\n}\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text as=\"p\" className={clsx(styles['SectionIntro-description'], className)} ref={ref} variant=\"muted\" {...props}>\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> &\n Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n animate?: boolean\n animationDelay?: number\n }\n\nconst _Label = forwardRef<HTMLSpanElement, PropsWithChildren<SectionIntroLabelProps>>(\n (\n {\n children,\n className,\n variant = 'muted',\n animate = false,\n animationDelay = 1000,\n ...rest\n }: PropsWithChildren<SectionIntroLabelProps>,\n ref,\n ) => {\n return (\n <span ref={ref} className={clsx(styles['SectionIntro-label'], className)} {...rest}>\n <TextCursorAnimation variant={variant} animate={animate} delay={animationDelay}>\n {children}\n </TextCursorAnimation>\n </span>\n )\n },\n)\n\ntype SectionIntroLinkProps = Omit<LinkProps, 'size'> & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n ({className, children, variant = 'accent', ...props}: SectionIntroLinkProps, ref: Ref<HTMLAnchorElement>) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntro-link'], className)}\n size=\"medium\"\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\nexport const SectionIntro = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Label: _Label,\n})\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,IAAO,GAET,EACE,WAAQ,SACR,YACA,cACA,aACA,eAAY,IACZ,kBAAkB,GAClB,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ;AAExF,QACE,kBAAC,UAAD;EACO;EACL,WAAW,EACT,EAAO,cACP,EAAO,uBAAuB,MAC9B,KAAa,EAAO,6BACpB,GACA,EACD;EACD,GAAI;EACJ,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAV7C,CAYG,KAAoB,kBAAC,GAAD,EAAoB,CAAA,EACxC,EACM;;EAGd,EAIK,IAAqB,KAErB,IAAW,GAEb,EACE,QAAK,GACL,UAAO,GACP,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAgB,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAE3E,IAAwB,QACxB,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,OAAO,EAAM,SAAS,MAAM,GAClG,UAEF,WACN,CAAC,EAAc,CAAC,EAEb,IAAe,EAAc,WAAW,IAAI,YAAY,GAAuB;AAErF,QACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,yBACP,MAAiB,WAAW,EAAO,gCACnC,EACD;EACK;EACF;EACJ,GAAI;EAEH;EACO,CAAA;EAGf,EAMK,IAAe,GAClB,EAAC,cAAW,aAAU,GAAG,KAAsC,MAE5D,kBAAC,GAAD;CAAM,IAAG;CAAI,WAAW,EAAK,EAAO,6BAA6B,EAAU;CAAO;CAAK,SAAQ;CAAQ,GAAI;CACxG;CACI,CAAA,CAGZ,EAQK,IAAS,GAEX,EACE,aACA,cACA,aAAU,SACV,aAAU,IACV,oBAAiB,KACjB,GAAG,KAEL,MAGE,kBAAC,QAAD;CAAW;CAAK,WAAW,EAAK,EAAO,uBAAuB,EAAU;CAAE,GAAI;WAC5E,kBAAC,GAAD;EAA8B;EAAkB;EAAS,OAAO;EAC7D;EACmB,CAAA;CACjB,CAAA,CAGZ,EAIK,IAAQ,GACX,EAAC,cAAW,aAAU,aAAU,UAAU,GAAG,KAA+B,MAEzE,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,sBAAsB,EAAU;CACvD,MAAK;CACI;CACT,GAAI;CAEH;CACI,CAAA,CAGZ,EAEY,IAAe,OAAO,OAAO,GAAM;CAC9C,SAAS;CACT,aAAa;CACb,MAAM;CACN,OAAO;CACR,CAAC"}

package/esm/SectionIntro/SectionIntro.module-CiRymbla.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__SectionIntro-module__SectionIntro___lKLtX{gap:var(--base-size-16);padding-block:var(--base-size-24);flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG em,.Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG b{color:var(--brand-color-text-default);font-style:normal;font-weight:inherit}.Primer_Brand__SectionIntro-module__SectionIntro--align-start___2iH9X{text-align:start}.Primer_Brand__SectionIntro-module__SectionIntro--align-center___gp5o5{text-align:center;padding-inline:var(--base-size-24);align-items:center}.Primer_Brand__SectionIntro-module__SectionIntro-heading___gqaMX{max-width:24ch}.Primer_Brand__SectionIntro-module__SectionIntro--full-width___oN_XO .Primer_Brand__SectionIntro-module__SectionIntro-heading___gqaMX{max-width:none}.Primer_Brand__SectionIntro-module__SectionIntro-label___qQQ95{margin-block-end:var(--base-size-2)}.Primer_Brand__SectionIntro-module__SectionIntro-description___3x7fL{max-width:50ch;padding-block-start:var(--base-size-2)}.Primer_Brand__SectionIntro-module__SectionIntro-link___fgioV{margin-top:var(--base-size-16)}

package/esm/SectionIntro/SectionIntro.module.js ADDED Viewed

@@ -0,0 +1,15 @@
+import './SectionIntro.module-CiRymbla.css';var e = {
+	SectionIntro: "Primer_Brand__SectionIntro-module__SectionIntro___lKLtX",
+	"SectionIntro-heading--muted": "Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG",
+	"SectionIntro--align-start": "Primer_Brand__SectionIntro-module__SectionIntro--align-start___2iH9X",
+	"SectionIntro--align-center": "Primer_Brand__SectionIntro-module__SectionIntro--align-center___gp5o5",
+	"SectionIntro-heading": "Primer_Brand__SectionIntro-module__SectionIntro-heading___gqaMX",
+	"SectionIntro--full-width": "Primer_Brand__SectionIntro-module__SectionIntro--full-width___oN_XO",
+	"SectionIntro-label": "Primer_Brand__SectionIntro-module__SectionIntro-label___qQQ95",
+	"SectionIntro-description": "Primer_Brand__SectionIntro-module__SectionIntro-description___3x7fL",
+	"SectionIntro-link": "Primer_Brand__SectionIntro-module__SectionIntro-link___fgioV"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=SectionIntro.module.js.map

package/esm/SectionIntro/SectionIntro.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SectionIntro.module.js","names":[],"sources":["../../src/SectionIntro/SectionIntro.module.css"],"sourcesContent":[".SectionIntro {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-16);\n align-items: flex-start;\n padding-block: var(--base-size-24);\n}\n\n.SectionIntro-heading--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntro-heading--muted em,\n.SectionIntro-heading--muted b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: inherit;\n}\n\n.SectionIntro--align-start {\n text-align: start;\n}\n\n.SectionIntro--align-center {\n align-items: center;\n text-align: center;\n padding-inline: var(--base-size-24);\n}\n\n.SectionIntro-heading {\n max-width: 24ch;\n}\n\n.SectionIntro--full-width .SectionIntro-heading {\n max-width: none;\n}\n\n.SectionIntro-label {\n margin-block-end: var(--base-size-2);\n}\n\n.SectionIntro-description {\n padding-block-start: var(--base-size-2);\n max-width: 50ch;\n}\n\n.SectionIntro-link {\n margin-top: var(--base-size-16);\n}\n"],"mappings":""}

package/esm/SectionIntro/index.d.ts ADDED Viewed

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

package/esm/SectionIntro/index.d.ts.map ADDED Viewed

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

package/esm/SectionIntroStacked/SectionIntroStacked.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+import { LinkProps } from '../Link';
+import { HeadingProps } from '../Heading';
+import { TextProps } from '../Text';
+import { IconProps } from '../Icon';
+import type { BaseProps } from '../component-helpers';
+export declare const SectionIntroStackedVariants: readonly ["default", "gridline"];
+export type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number];
+export type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & PropsWithChildren & {
+    variant?: SectionIntroStackedVariant;
+};
+type SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps;
+type SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' | 'variant'> & BaseProps<HTMLParagraphElement> & {
+    as?: 'p';
+    children: React.ReactNode | React.ReactNode[];
+};
+type SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>;
+type SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>;
+type SectionIntroStackedItemIconProps = IconProps;
+type SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' | 'variant' | 'size'> & BaseProps<HTMLParagraphElement> & {
+    as?: 'p';
+    children: React.ReactNode | React.ReactNode[];
+};
+export type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>;
+export declare const SectionIntroStacked: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroStackedProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroStackedHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<SectionIntroStackedDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<SectionIntroStackedLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Items: ({ animate, className, children, ...rest }: PropsWithChildren<SectionIntroStackedItemsProps>) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ className, children, ...rest }: PropsWithChildren<SectionIntroStackedItemProps>) => import("react/jsx-runtime").JSX.Element;
+    ItemIcon: ({ className, color, ...props }: SectionIntroStackedItemIconProps) => import("react/jsx-runtime").JSX.Element;
+    ItemHeading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    ItemDescription: React.ForwardRefExoticComponent<Omit<SectionIntroStackedItemDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+};
+export {};
+//# sourceMappingURL=SectionIntroStacked.d.ts.map

package/esm/SectionIntroStacked/SectionIntroStacked.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAKvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;AAuCH,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}