npm - @primer/react-brand - Versions diffs - 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f - Mend

@primer/react-brand 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f

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 (507) hide show

package/esm/Pagination/Pagination.module.js CHANGED Viewed

@@ -1,8 +1,14 @@
-import './Pagination.module-C7Z_pTFq.css';var e = {
+import './Pagination.module-DmKBSq7s.css';var e = {
 	Pagination: "Primer_Brand__Pagination-module__Pagination___kfPR3",
 	Pagination__inner: "Primer_Brand__Pagination-module__Pagination__inner___uSIJu",
-	Pagination__item: "Primer_Brand__Pagination-module__Pagination__item___O5m_Y",
-	Pagination__showPages: "Primer_Brand__Pagination-module__Pagination__showPages___YVeH_"
+	Pagination__pageItem: "Primer_Brand__Pagination-module__Pagination__pageItem___4j6vp",
+	Pagination__controlContent: "Primer_Brand__Pagination-module__Pagination__controlContent___VU4Qm",
+	Pagination__controlArrowWrapper: "Primer_Brand__Pagination-module__Pagination__controlArrowWrapper___0Q_Ku",
+	"Pagination__controlArrowWrapper--previous": "Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--previous____zTeS",
+	"Pagination__controlArrowWrapper--next": "Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--next___KhVzs",
+	Pagination__controlArrow: "Primer_Brand__Pagination-module__Pagination__controlArrow___RwrzD",
+	Pagination__controlItem: "Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt",
+	Pagination__controlText: "Primer_Brand__Pagination-module__Pagination__controlText___S6XdE"
 };
 //#endregion
 export { e as default };

package/esm/Pagination/Pagination.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.module.js","names":[],"sources":["../../src/Pagination/Pagination.module.css"],"sourcesContent":[".Pagination {\n margin-top: var(--base-size-20);\n margin-bottom: var(--base-size-16);\n text-align: center;\n}\n\n.Pagination__inner {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n.~~Pagination__item~~ {\n ~~min-width~~: ~~var(--base-size-32);\n height:~~ ~~var(--base-size-32);\n text-align:~~ ~~center;\n white-space:~~ ~~nowrap;\n vertical-align:~~ ~~middle;\n cursor:~~ ~~pointer;\n user-select:~~ ~~none;\n text-decoration:~~ ~~none;\~~n ~~padding: var(~~--~~base~~-~~size~~-~~4) var(--base~~-~~size~~-8);\n ~~border: var(~~--brand-~~borderWidth~~-~~thick)~~ ~~solid~~ transparent;\n ~~border-radius: var(~~--brand-~~borderRadius~~-~~medium);\n transition: border~~-~~color var(--brand~~-~~animation-duration-fast)~~ ~~var(--brand-animation-easing-default)~~;\n}\n\n.~~Pagination__item~~ ~~span~~ {\n ~~font-size~~: ~~var(--brand~~-~~text-size-100)~~;\n ~~line-height~~: var(--base-size-20);\n}\n\n.~~Pagination__item:hover,\n.Pagination__item:focus~~ {\n ~~text-decoration~~: none;\n ~~outline: 0;\n transition~~-~~duration~~: 0~~.1s~~;\n ~~border-color: var(--brand-pagination-borderColor-hover);\n~~}\n\n.~~Pagination__item::after~~ {\n ~~display~~: ~~none~~;\n}\n\n.~~Pagination__item:active~~ {\n ~~border-color~~: var(--~~brand~~-~~pagination~~-~~link~~-~~bgColor-active~~);\n}\n\n.~~Pagination__item[aria-current],\n.Pagination__item[aria-current]:hover~~ {\n ~~background-color~~: var(--~~brand~~-~~pagination~~-~~link-bgColor-active~~);\n ~~border-color~~: ~~transparent;\n}\n\n.Pagination__item[aria-current] * {\n color:~~ var(--~~brand~~-~~color~~-~~text-onEmphasis~~);\n}\n\n~~.Pagination__item[aria~~-~~disabled],\n.Pagination__item[aria-disabled]~~:~~hover,\n~~.~~Pagination__item[role='presentation'],\~~n.~~Pagination__item[role='presentation']:hover~~ {\n ~~color~~: var(--~~brand~~-~~color~~-~~text-muted~~);\n ~~cursor: default;\n background~~-~~color~~: transparent;\n ~~border~~-~~color~~: transparent;\n ~~font~~-~~size: inherit;\n font~~-~~family: inherit;\n padding~~-~~top: inherit;\n padding~~-~~bottom~~: ~~inherit~~;\n~~}\n\n.Pagination__item[aria-disabled] ,\n.Pagination__item[aria-disabled]:hover ,\n.Pagination__item[role='presentation'] ,\n.Pagination__item[role='presentation']:hover {\n~~ ~~color: inherit;\n~~}\n\n~~.Pagination__showPages .Pagination__item[rel='prev'] span,\n.Pagination__showPages .Pagination__item[rel='next'] span {\n~~ ~~display: none;\n}\n\n~~.~~Pagination__item[rel='prev']~~ ~~svg,\n.Pagination__item[rel='next'] svg~~ {\n ~~margin-inline: 0;\n~~ position: ~~relative~~;\n~~}\n\n.Pagination__item[rel='prev'] svg {\n left~~: var(--base-size-2);\n~~}\n\n.Pagination__item[rel='next'] svg {\n right~~: var(--base-size-2);\n~~}\n\n@media screen and (min-width~~: ~~48rem) {\~~n ~~.Pagination__item[rel='prev'] span,\n .Pagination__item[rel='next'] span {\n~~ ~~display~~: ~~block !important~~;\n ~~}\n\n .Pagination__item[rel='prev']~~ ~~svg,\n .Pagination__item[rel='next']~~ ~~svg~~ ~~{\n margin-inline:~~ ~~unset~~;\n ~~left~~: 0;\n ~~right~~: 0;\n }\n\n .~~Pagination__item[rel='prev'][aria-disabled]~~ ~~svg,\n .Pagination__item[rel='next'][aria-disabled] svg~~ {\n display: ~~none~~;\n }\n}\n~~\n@media~~ ~~(forced-colors:~~ ~~active)~~ {\n ~~.Pagination__item[aria-current],\n .Pagination__item[aria-current]:hover {\n~~ ~~border-color~~: ~~Highlight~~;\n ~~border~~-~~width~~: ~~var(--brand-borderWidth-thicker)~~;\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 ~~.Pagination,\n .Pagination::before,\n .Pagination::after,\n .Pagination {\n~~ ~~animation~~: ~~none !important~~;\n ~~transition~~: ~~none !important~~;\n ~~scroll~~-~~behavior~~: ~~auto !important~~;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Pagination.module.js","names":[],"sources":["../../src/Pagination/Pagination.module.css"],"sourcesContent":[".Pagination {\n margin-top: var(--base-size-20);\n margin-bottom: var(--base-size-16);\n text-align: center;\n}\n\n.Pagination__inner {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n}\n\n.Pagination__pageItem {\n transition: none; /* Prevents flash of background color when changing pages /\n --brand-button-subtle-borderColor-rest: transparent;\n --brand-button-subtle-borderColor-hover: transparent;\n --brand-button-subtle-borderColor-active: transparent;\n}\n\n.Pagination__controlContent {\n position: relative;\n display: inline-flex;\n gap: var(--base-size-4);\n align-items: center;\n}\n\n.Pagination__controlArrowWrapper {\n display: none;\n flex-shrink: 0;\n}\n\n.Pagination__controlArrowWrapper--previous {\n transform: translateX(var(--base-size-2));\n}\n\n.Pagination__controlArrowWrapper--next {\n transform: translateX(calc(var(--base-size-2) -1));\n}\n\n.Pagination__controlArrow {\n width: var(--base-size-16);\n height: var(--base-size-16);\n}\n\n@media screen and (max-width: 47.99rem) {\n .Pagination__controlItem {\n padding-inline: var(--base-size-8);\n --brand-button-subtle-borderColor-rest: transparent;\n --brand-button-subtle-borderColor-hover: transparent;\n --brand-button-subtle-borderColor-active: transparent;\n }\n\n .Pagination__controlText {\n position: absolute;\n width: var(--base-size-2);\n height: var(--base-size-2);\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n word-wrap: normal;\n border: 0;\n }\n\n .Pagination__controlArrowWrapper {\n display: flex;\n }\n\n .Pagination__controlItem > span {\n display: flex;\n align-items: center;\n }\n\n .Pagination__controlItem > span > span {\n display: flex;\n align-items: center;\n line-height: 0;\n }\n}\n"],"mappings":""}

package/esm/Pagination/model.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-export type PageType = {
+export type PaginationPageType = {
     type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK';
     num: number;
     disabled?: boolean;
     selected?: boolean;
     precedesBreak?: boolean;
 };
-export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PageType[];
+export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PaginationPageType[];
 //# sourceMappingURL=model.d.ts.map

package/esm/Pagination/model.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/Pagination/model.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,~~QAAQ~~,GAAG;~~IACrB~~,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,EAClB,eAAe,EAAE,MAAM,EACvB,oBAAoB,EAAE,MAAM,GAC3B,~~QAAQ~~,EAAE,~~CAwHZ~~"}
1	+ {"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/Pagination/model.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,EAClB,eAAe,EAAE,MAAM,EACvB,oBAAoB,EAAE,MAAM,GAC3B,kBAAkB,EAAE,CAwHtB"}

package/esm/Pagination/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","names":[],"sources":["../../src/Pagination/model.ts"],"sourcesContent":["export type ~~PageType~~ = {\n type: 'PREV' \| 'NEXT' \| 'NUM' \| 'BREAK'\n num: number\n disabled?: boolean\n selected?: boolean\n precedesBreak?: boolean\n}\n\nexport function buildPaginationModel(\n pageCount: number,\n currentPage: number,\n showPages: boolean,\n marginPageCount: number,\n surroundingPageCount: number,\n): ~~PageType~~[] {\n const pages: ~~PageType~~[] = []\n\n if (showPages) {\n const pageNums: Array<number> = []\n const addPage = (n: number) => {\n if (n >= 1 && n <= pageCount) {\n pageNums.push(n)\n }\n }\n\n // Start by defining the window of pages to show around the current page.\n // If the window goes off either edge, shift it until it fits.\n let extentLeft = currentPage - surroundingPageCount\n let extentRight = currentPage + surroundingPageCount\n if (extentLeft < 1 && extentRight > pageCount) {\n // Our window is larger than the entire range,\n // so simply display every page.\n extentLeft = 1\n extentRight = pageCount\n } else if (extentLeft < 1) {\n while (extentLeft < 1) {\n extentLeft++\n extentRight++\n }\n } else if (extentRight > pageCount) {\n while (extentRight > pageCount) {\n extentLeft--\n extentRight--\n }\n }\n\n // Next, include the pages in the margins.\n // If a margin page is already covered in the window,\n // extend the window to the other direction.\n for (let i = 1; i <= marginPageCount; i++) {\n const leftPage = i\n const rightPage = pageCount - (i - 1)\n if (leftPage >= extentLeft) {\n extentRight++\n } else {\n addPage(leftPage)\n }\n if (rightPage <= extentRight) {\n extentLeft--\n } else {\n addPage(rightPage)\n }\n }\n\n for (let i = extentLeft; i <= extentRight; i++) {\n addPage(i)\n }\n\n const sorted = pageNums\n .slice()\n .sort((a, b) => a - b)\n .filter((item, idx, ary) => !idx \|\| item !== ary[idx - 1])\n for (let idx = 0; idx < sorted.length; idx++) {\n const num = sorted[idx]\n const selected = num === currentPage\n const last = sorted[idx - 1]\n const next = sorted[idx + 1]\n const lastDelta = num - last\n const nextDelta = num - next\n const precedesBreak = nextDelta !== -1\n\n if (idx === 0) {\n if (num !== 1) {\n // If the first page isn't page one,\n // we need to add a break\n pages.push({\n type: 'BREAK',\n num: 1,\n })\n }\n pages.push({\n type: 'NUM',\n num,\n selected,\n precedesBreak,\n })\n } else {\n if (lastDelta === 1) {\n pages.push({\n type: 'NUM',\n num,\n selected,\n precedesBreak,\n })\n } else {\n // We skipped some, so add a break\n pages.push({\n type: 'BREAK',\n num: num - 1,\n })\n pages.push({\n type: 'NUM',\n num,\n selected,\n precedesBreak: false,\n })\n }\n }\n }\n\n const lastPage = pages[pages.length - 1]\n if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {\n // The last page we rendered wasn't the actual last page,\n // so we need an additional break\n pages.push({\n type: 'BREAK',\n num: pageCount,\n })\n }\n }\n\n const prev: ~~PageType~~ = {type: 'PREV', num: currentPage - 1, disabled: currentPage === 1}\n const next: ~~PageType~~ = {type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount}\n return [prev, ...pages, next]\n}\n"],"mappings":";AAQA,SAAgB,EACd,GACA,GACA,GACA,GACA,~~GACY~~;~~CACZ~~,IAAM,~~IAAoB~~,EAAE;~~AAE5B~~,KAAI,GAAW;EACb,IAAM,IAA0B,EAAE,EAC5B,KAAW,MAAc;AAC7B,GAAI,KAAK,KAAK,KAAK,KACjB,EAAS,KAAK,EAAE;KAMhB,IAAa,IAAc,GAC3B,IAAc,IAAc;AAChC,MAAI,IAAa,KAAK,IAAc,EAIlC,CADA,IAAa,GACb,IAAc;WACL,IAAa,EACtB,QAAO,IAAa,GAElB,CADA,KACA;WAEO,IAAc,EACvB,QAAO,IAAc,GAEnB,CADA,KACA;AAOJ,OAAK,IAAI,IAAI,GAAG,KAAK,GAAiB,KAAK;GACzC,IAAM,IAAW,GACX,IAAY,KAAa,IAAI;AAMnC,GALI,KAAY,IACd,MAEA,EAAQ,EAAS,EAEf,KAAa,IACf,MAEA,EAAQ,EAAU;;AAItB,OAAK,IAAI,IAAI,GAAY,KAAK,GAAa,IACzC,GAAQ,EAAE;EAGZ,IAAM,IAAS,EACZ,OAAO,CACP,MAAM,GAAG,MAAM,IAAI,EAAE,CACrB,QAAQ,GAAM,GAAK,MAAQ,CAAC,KAAO,MAAS,EAAI,IAAM,GAAG;AAC5D,OAAK,IAAI,IAAM,GAAG,IAAM,EAAO,QAAQ,KAAO;GAC5C,IAAM,IAAM,EAAO,IACb,IAAW,MAAQ,GACnB,IAAO,EAAO,IAAM,IACpB,IAAO,EAAO,IAAM,IACpB,IAAY,IAAM,GAElB,IADY,IAAM,MACY;AAEpC,GAAI,MAAQ,KACN,MAAQ,KAGV,EAAM,KAAK;IACT,MAAM;IACN,KAAK;IACN,CAAC,EAEJ,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAEE,MAAc,IAChB,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAGF,EAAM,KAAK;IACT,MAAM;IACN,KAAK,IAAM;IACZ,CAAC,EACF,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA,eAAe;IAChB,CAAC;;EAKR,IAAM,IAAW,EAAM,EAAM,SAAS;AACtC,EAAI,EAAS,SAAS,SAAS,EAAS,QAAQ,KAG9C,EAAM,KAAK;GACT,MAAM;GACN,KAAK;GACN,CAAC;;CAIN,IAAM,~~IAAiB~~;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAE,~~EAClF~~,~~IAAiB~~;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAU;~~AAChG~~,QAAO;EAAC;EAAM,GAAG;EAAO;EAAK"}
1	+ {"version":3,"file":"model.js","names":[],"sources":["../../src/Pagination/model.ts"],"sourcesContent":["export type PaginationPageType = {\n type: 'PREV' \| 'NEXT' \| 'NUM' \| 'BREAK'\n num: number\n disabled?: boolean\n selected?: boolean\n precedesBreak?: boolean\n}\n\nexport function buildPaginationModel(\n pageCount: number,\n currentPage: number,\n showPages: boolean,\n marginPageCount: number,\n surroundingPageCount: number,\n): PaginationPageType[] {\n const pages: PaginationPageType[] = []\n\n if (showPages) {\n const pageNums: Array<number> = []\n const addPage = (n: number) => {\n if (n >= 1 && n <= pageCount) {\n pageNums.push(n)\n }\n }\n\n // Start by defining the window of pages to show around the current page.\n // If the window goes off either edge, shift it until it fits.\n let extentLeft = currentPage - surroundingPageCount\n let extentRight = currentPage + surroundingPageCount\n if (extentLeft < 1 && extentRight > pageCount) {\n // Our window is larger than the entire range,\n // so simply display every page.\n extentLeft = 1\n extentRight = pageCount\n } else if (extentLeft < 1) {\n while (extentLeft < 1) {\n extentLeft++\n extentRight++\n }\n } else if (extentRight > pageCount) {\n while (extentRight > pageCount) {\n extentLeft--\n extentRight--\n }\n }\n\n // Next, include the pages in the margins.\n // If a margin page is already covered in the window,\n // extend the window to the other direction.\n for (let i = 1; i <= marginPageCount; i++) {\n const leftPage = i\n const rightPage = pageCount - (i - 1)\n if (leftPage >= extentLeft) {\n extentRight++\n } else {\n addPage(leftPage)\n }\n if (rightPage <= extentRight) {\n extentLeft--\n } else {\n addPage(rightPage)\n }\n }\n\n for (let i = extentLeft; i <= extentRight; i++) {\n addPage(i)\n }\n\n const sorted = pageNums\n .slice()\n .sort((a, b) => a - b)\n .filter((item, idx, ary) => !idx \|\| item !== ary[idx - 1])\n for (let idx = 0; idx < sorted.length; idx++) {\n const num = sorted[idx]\n const selected = num === currentPage\n const last = sorted[idx - 1]\n const next = sorted[idx + 1]\n const lastDelta = num - last\n const nextDelta = num - next\n const precedesBreak = nextDelta !== -1\n\n if (idx === 0) {\n if (num !== 1) {\n // If the first page isn't page one,\n // we need to add a break\n pages.push({\n type: 'BREAK',\n num: 1,\n })\n }\n pages.push({\n type: 'NUM',\n num,\n selected,\n precedesBreak,\n })\n } else {\n if (lastDelta === 1) {\n pages.push({\n type: 'NUM',\n num,\n selected,\n precedesBreak,\n })\n } else {\n // We skipped some, so add a break\n pages.push({\n type: 'BREAK',\n num: num - 1,\n })\n pages.push({\n type: 'NUM',\n num,\n selected,\n precedesBreak: false,\n })\n }\n }\n }\n\n const lastPage = pages[pages.length - 1]\n if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {\n // The last page we rendered wasn't the actual last page,\n // so we need an additional break\n pages.push({\n type: 'BREAK',\n num: pageCount,\n })\n }\n }\n\n const prev: PaginationPageType = {type: 'PREV', num: currentPage - 1, disabled: currentPage === 1}\n const next: PaginationPageType = {type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount}\n return [prev, ...pages, next]\n}\n"],"mappings":";AAQA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACsB;CACtB,IAAM,IAA8B,EAAE;AAEtC,KAAI,GAAW;EACb,IAAM,IAA0B,EAAE,EAC5B,KAAW,MAAc;AAC7B,GAAI,KAAK,KAAK,KAAK,KACjB,EAAS,KAAK,EAAE;KAMhB,IAAa,IAAc,GAC3B,IAAc,IAAc;AAChC,MAAI,IAAa,KAAK,IAAc,EAIlC,CADA,IAAa,GACb,IAAc;WACL,IAAa,EACtB,QAAO,IAAa,GAElB,CADA,KACA;WAEO,IAAc,EACvB,QAAO,IAAc,GAEnB,CADA,KACA;AAOJ,OAAK,IAAI,IAAI,GAAG,KAAK,GAAiB,KAAK;GACzC,IAAM,IAAW,GACX,IAAY,KAAa,IAAI;AAMnC,GALI,KAAY,IACd,MAEA,EAAQ,EAAS,EAEf,KAAa,IACf,MAEA,EAAQ,EAAU;;AAItB,OAAK,IAAI,IAAI,GAAY,KAAK,GAAa,IACzC,GAAQ,EAAE;EAGZ,IAAM,IAAS,EACZ,OAAO,CACP,MAAM,GAAG,MAAM,IAAI,EAAE,CACrB,QAAQ,GAAM,GAAK,MAAQ,CAAC,KAAO,MAAS,EAAI,IAAM,GAAG;AAC5D,OAAK,IAAI,IAAM,GAAG,IAAM,EAAO,QAAQ,KAAO;GAC5C,IAAM,IAAM,EAAO,IACb,IAAW,MAAQ,GACnB,IAAO,EAAO,IAAM,IACpB,IAAO,EAAO,IAAM,IACpB,IAAY,IAAM,GAElB,IADY,IAAM,MACY;AAEpC,GAAI,MAAQ,KACN,MAAQ,KAGV,EAAM,KAAK;IACT,MAAM;IACN,KAAK;IACN,CAAC,EAEJ,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAEE,MAAc,IAChB,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAGF,EAAM,KAAK;IACT,MAAM;IACN,KAAK,IAAM;IACZ,CAAC,EACF,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA,eAAe;IAChB,CAAC;;EAKR,IAAM,IAAW,EAAM,EAAM,SAAS;AACtC,EAAI,EAAS,SAAS,SAAS,EAAS,QAAQ,KAG9C,EAAM,KAAK;GACT,MAAM;GACN,KAAK;GACN,CAAC;;CAIN,IAAM,IAA2B;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAE,EAC5F,IAA2B;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAU;AAC1G,QAAO;EAAC;EAAM,GAAG;EAAO;EAAK"}

package/esm/Pillar/Pillar.d.ts CHANGED Viewed

@@ -17,6 +17,10 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
      * Enables optional border around the pillar content
      */
     hasBorder?: boolean;
+    /**
+     * Allows the pillar to fill the width of its parent container.
+     */
+    fullWidth?: boolean;
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
 type PillarImageProps = ImageProps;
 declare function PillarImage({ className, ...rest }: PillarImageProps): import("react/jsx-runtime").JSX.Element;

package/esm/Pillar/Pillar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pillar.d.ts","sourceRoot":"","sources":["../../src/Pillar/Pillar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAA4B,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9F,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAQ,SAAS,EAAC,MAAM,IAAI,CAAA;AACvF,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAQnD,eAAO,MAAM,sBAAsB,UAAU,CAAA;AAC7C,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IACjG;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,SAAS,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,CAAC,CAAC,SAAS,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;~~AAuDpH~~,KAAK,gBAAgB,GAAG,UAAU,CAAA;AAElC,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,gBAAgB,2CAM1D;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAC3E,KAAK,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;AACxG,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAChE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;CAClC,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,aAAoB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CA6B3F;AAED,KAAK,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAkBhB,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAmBhF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GACvC,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAU9B;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAA"}
1	+ {"version":3,"file":"Pillar.d.ts","sourceRoot":"","sources":["../../src/Pillar/Pillar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAA4B,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9F,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAQ,SAAS,EAAC,MAAM,IAAI,CAAA;AACvF,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAQnD,eAAO,MAAM,sBAAsB,UAAU,CAAA;AAC7C,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IACjG;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,SAAS,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,CAAC,CAAC,SAAS,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;AAyDpH,KAAK,gBAAgB,GAAG,UAAU,CAAA;AAElC,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,gBAAgB,2CAM1D;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAC3E,KAAK,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;AACxG,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAChE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;CAClC,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,aAAoB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CA6B3F;AAED,KAAK,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAkBhB,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAmBhF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GACvC,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAU9B;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAA"}

package/esm/Pillar/Pillar.js CHANGED Viewed

@@ -9,17 +9,17 @@ import s from "./Pillar.module.js";
 import c, { forwardRef as l } from "react";
 import { jsx as u } from "react/jsx-runtime";
 //#region src/Pillar/Pillar.tsx
-var d = "green", f = 32, p = l(({ children: n, className: r, animate: i, as: a = "div", align: o = "start", style: l, hasBorder: d = !1, ...f }, p) => {
-	let { classes: y, styles: b } = t(i), x = c.Children.toArray(n).filter((e) => !!(c.isValidElement(e) && typeof e.type != "string" && (e.type === m || e.type === h || e.type === g || e.type === _ || e.type === v)));
+var d = "green", f = 32, p = l(({ children: n, className: r, animate: i, as: a = "div", align: o = "start", style: l, hasBorder: d = !1, fullWidth: f = !1, ...p }, y) => {
+	let { classes: b, styles: x } = t(i), S = c.Children.toArray(n).filter((e) => !!(c.isValidElement(e) && typeof e.type != "string" && (e.type === m || e.type === h || e.type === g || e.type === _ || e.type === v)));
 	return /* @__PURE__ */ u(["div", "article"].includes(a) ? a : "div", {
-		className: e(s.Pillar, s[`Pillar--align-${o}`], d && s["Pillar--has-border"], y, r),
-		ref: p,
-		...f,
+		className: e(s.Pillar, s[`Pillar--align-${o}`], d && s["Pillar--has-border"], !f && s["Pillar--has-max-width"], b, r),
+		ref: y,
+		...p,
 		style: {
-			...b,
+			...x,
 			...l
 		},
-		children: x
+		children: S
 	});
 });
 function m({ className: e, ...t }) {

package/esm/Pillar/Pillar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/*\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n /\n The HTML element used to render the Pillar.\n /\n as?: C \| 'div' \| 'article'\n /\n Aligns the pillar content\n /\n align?: 'start' \| 'center'\n /\n Enables optional border around the pillar content\n /\n hasBorder?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n (\n {\n children,\n className,\n animate,\n as = 'div',\n align = 'start',\n style,\n hasBorder = false,\n ...rest\n }: PropsWithChildren<PillarProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const filteredChildren = React.Children.toArray(children).filter(child => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (\n child.type === PillarImage \|\|\n child.type === PillarIcon \|\|\n child.type === PillarHeading \|\|\n child.type === PillarDescription \|\|\n child.type === PillarLink\n ) {\n return true\n }\n }\n return false\n })\n\n const validElements = ['div', 'article']\n const Component = validElements.includes(as) ? as : 'div'\n\n return (\n <Component\n className={clsx(\n styles.Pillar,\n styles[`Pillar--align-${align}`],\n hasBorder && styles['Pillar--has-border'],\n animationClasses,\n className,\n )}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n style={{...animationInlineStyles, ...style}}\n >\n {filteredChildren}\n </Component>\n )\n },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n return (\n <div className={styles.Pillar__image}>\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> \| React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' \| 'color'> & {\n icon: IconElement \| IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n if (!hasBackground) {\n const iconWrapperProps = {\n ...(props as React.HTMLAttributes<HTMLSpanElement>),\n className: clsx(styles.Pillar__icon, className),\n }\n\n let iconWithoutBackground: React.ReactNode\n\n if (React.isValidElement<IconComponentProps>(icon)) {\n iconWithoutBackground = icon\n } else {\n const IconWithoutBackground = icon\n iconWithoutBackground = <IconWithoutBackground />\n }\n\n return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n }\n\n return (\n <Icon\n className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n color={defaultPillarIconColor}\n hasBackground\n icon={icon as IconProps['icon']}\n size={size ?? defaultPillarIconSize}\n {...props}\n />\n )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n return (\n <Heading\n size={size}\n className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n ref={ref}\n as={as}\n {...rest}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text\n variant=\"muted\"\n ref={ref}\n size=\"200\"\n as=\"p\"\n className={clsx(styles.Pillar__description, className)}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PillarLinkProps = {\n href: string\n} & Omit<LinkProps, 'size' \| 'direction'> &\n BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n return (\n <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n {children}\n </Link>\n )\n})\n\n/\n Pillar component:\n * {@link https://primer.style/brand/components/Pillar/ See usage examples}.\n */\nexport const Pillar = Object.assign(PillarRoot, {\n Icon: PillarIcon,\n Image: PillarImage,\n Heading: PillarHeading,\n Description: PillarDescription,\n Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,~~IAgB~~/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}
1	+ {"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/*\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n /\n The HTML element used to render the Pillar.\n /\n as?: C \| 'div' \| 'article'\n /\n Aligns the pillar content\n /\n align?: 'start' \| 'center'\n /\n Enables optional border around the pillar content\n /\n hasBorder?: boolean\n /\n Allows the pillar to fill the width of its parent container.\n /\n fullWidth?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n (\n {\n children,\n className,\n animate,\n as = 'div',\n align = 'start',\n style,\n hasBorder = false,\n fullWidth = false,\n ...rest\n }: PropsWithChildren<PillarProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const filteredChildren = React.Children.toArray(children).filter(child => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (\n child.type === PillarImage \|\|\n child.type === PillarIcon \|\|\n child.type === PillarHeading \|\|\n child.type === PillarDescription \|\|\n child.type === PillarLink\n ) {\n return true\n }\n }\n return false\n })\n\n const validElements = ['div', 'article']\n const Component = validElements.includes(as) ? as : 'div'\n\n return (\n <Component\n className={clsx(\n styles.Pillar,\n styles[`Pillar--align-${align}`],\n hasBorder && styles['Pillar--has-border'],\n !fullWidth && styles['Pillar--has-max-width'],\n animationClasses,\n className,\n )}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n style={{...animationInlineStyles, ...style}}\n >\n {filteredChildren}\n </Component>\n )\n },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n return (\n <div className={styles.Pillar__image}>\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> \| React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' \| 'color'> & {\n icon: IconElement \| IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n if (!hasBackground) {\n const iconWrapperProps = {\n ...(props as React.HTMLAttributes<HTMLSpanElement>),\n className: clsx(styles.Pillar__icon, className),\n }\n\n let iconWithoutBackground: React.ReactNode\n\n if (React.isValidElement<IconComponentProps>(icon)) {\n iconWithoutBackground = icon\n } else {\n const IconWithoutBackground = icon\n iconWithoutBackground = <IconWithoutBackground />\n }\n\n return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n }\n\n return (\n <Icon\n className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n color={defaultPillarIconColor}\n hasBackground\n icon={icon as IconProps['icon']}\n size={size ?? defaultPillarIconSize}\n {...props}\n />\n )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n return (\n <Heading\n size={size}\n className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n ref={ref}\n as={as}\n {...rest}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text\n variant=\"muted\"\n ref={ref}\n size=\"200\"\n as=\"p\"\n className={clsx(styles.Pillar__description, className)}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PillarLinkProps = {\n href: string\n} & Omit<LinkProps, 'size' \| 'direction'> &\n BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n return (\n <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n {children}\n </Link>\n )\n})\n\n/\n Pillar component:\n * {@link https://primer.style/brand/components/Pillar/ See usage examples}.\n */\nexport const Pillar = Object.assign(PillarRoot, {\n Icon: PillarIcon,\n Image: PillarImage,\n Heading: PillarHeading,\n Description: PillarDescription,\n Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAoB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,CAAC,KAAa,EAAO,0BACrB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}

package/esm/Pillar/Pillar.module-BM_qcCVC.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Pillar-module__Pillar___xLPAt{color:var(--brand-color-text-default);flex-direction:column;display:flex}.Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE{max-width:50ch}.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-32)}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-center___1eAmk{text-align:center;align-items:center}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-start___kEyp9{text-align:left;align-items:flex-start}.Primer_Brand__Pillar-module__Pillar__image___z4m11{margin-bottom:var(--base-size-28);border-radius:var(--brand-borderRadius-medium);overflow:hidden}.Primer_Brand__Pillar-module__Pillar__image___z4m11 img,.Primer_Brand__Pillar-module__Pillar__image___z4m11 span,.Primer_Brand__Pillar-module__Pillar__image___z4m11 picture{display:block}.Primer_Brand__Pillar-module__Pillar__icon___4V_g6{margin-bottom:var(--base-size-48)}.Primer_Brand__Pillar-module__Pillar__icon--with-background___6pK_P>svg{width:100%;height:100%}.Primer_Brand__Pillar-module__Pillar__heading___9r3aH{margin-bottom:var(--base-size-16)}.Primer_Brand__Pillar-module__Pillar__description___WhErW:not(.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv .Primer_Brand__Pillar-module__Pillar__description___WhErW:last-child){margin-bottom:var(--base-size-24)}.Primer_Brand__Pillar-module__Pillar__link___4V1wl{margin-top:auto}

package/esm/Pillar/Pillar.module.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import './Pillar.module-Cpx4mbRH.css';var e = {
+import './Pillar.module-BM_qcCVC.css';var e = {
 	Pillar: "Primer_Brand__Pillar-module__Pillar___xLPAt",
+	"Pillar--has-max-width": "Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE",
 	"Pillar--has-border": "Primer_Brand__Pillar-module__Pillar--has-border___h8dLv",
 	"Pillar--align-center": "Primer_Brand__Pillar-module__Pillar--align-center___1eAmk",
 	"Pillar--align-start": "Primer_Brand__Pillar-module__Pillar--align-start___kEyp9",

package/esm/Pillar/Pillar.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pillar.module.js","names":[],"sources":["../../src/Pillar/Pillar.module.css"],"sourcesContent":[".Pillar {\n ~~max-width: 50ch;\n~~ color: var(--brand-color-text-default);\n display: flex;\n flex-direction: column;\n}\n\n.Pillar--has-border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n padding: var(--base-size-32);\n}\n\n.Pillar.Pillar--align-center {\n align-items: center;\n text-align: center;\n}\n\n.Pillar.Pillar--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Pillar__image {\n margin-bottom: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n}\n\n.Pillar__image img,\n.Pillar__image span {\n display: block;\n}\n\n.Pillar__icon {\n margin-bottom: var(--base-size-48);\n}\n\n.Pillar__icon--with-background > svg {\n width: 100%;\n height: 100%;\n}\n\n.Pillar__heading {\n margin-bottom: var(--base-size-16);\n}\n\n.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {\n margin-bottom: var(--base-size-24);\n}\n\n.Pillar__link {\n margin-top: auto;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Pillar.module.js","names":[],"sources":["../../src/Pillar/Pillar.module.css"],"sourcesContent":[".Pillar {\n color: var(--brand-color-text-default);\n display: flex;\n flex-direction: column;\n}\n\n.Pillar--has-max-width {\n max-width: 50ch;\n}\n\n.Pillar--has-border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n padding: var(--base-size-32);\n}\n\n.Pillar.Pillar--align-center {\n align-items: center;\n text-align: center;\n}\n\n.Pillar.Pillar--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Pillar__image {\n margin-bottom: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n}\n\n.Pillar__image img,\n.Pillar__image span,\n.Pillar__image picture {\n display: block;\n}\n\n.Pillar__icon {\n margin-bottom: var(--base-size-48);\n}\n\n.Pillar__icon--with-background > svg {\n width: 100%;\n height: 100%;\n}\n\n.Pillar__heading {\n margin-bottom: var(--base-size-16);\n}\n\n.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {\n margin-bottom: var(--base-size-24);\n}\n\n.Pillar__link {\n margin-top: auto;\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
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"}
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;AAMvC,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;AAwCH,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"}

package/esm/SectionIntroStacked/SectionIntroStacked.js CHANGED Viewed

@@ -3,123 +3,124 @@ import { Grid as t } from "../Grid/Grid.js";
 import { useAnimation as n } from "../animation/useAnimation.js";
 import { Text as r } from "../Text/Text.js";
 import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
-import { Link as o } from "../Link/Link.js";
-import { Icon as s } from "../Icon/Icon.js";
-import c from "./SectionIntroStacked.module.js";
-import l, { forwardRef as u, useCallback as d, useMemo as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import o from "../component-helpers/shared.module.js";
+import { Link as s } from "../Link/Link.js";
+import { Icon as c } from "../Icon/Icon.js";
+import l from "./SectionIntroStacked.module.js";
+import u, { forwardRef as d, useCallback as f, useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/SectionIntroStacked/SectionIntroStacked.tsx
-var h = ["default", "gridline"], g = u(({ animate: r, className: i, children: a, style: o, variant: s = "default", ...u }, d) => {
-	let { classes: f, styles: h } = n(r), g = l.Children.toArray(a), _ = g.filter((e) => l.isValidElement(e) && e.type === x), v = g.filter((e) => !_.includes(e));
-	return /* @__PURE__ */ p("header", {
-		ref: d,
-		className: e(c.SectionIntroStacked, s === "gridline" && c["SectionIntroStacked--variant-gridline"], f, i),
-		...u,
+var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a, style: s, variant: c = "default", ...d }, f) => {
+	let { classes: p, styles: g } = n(r), _ = u.Children.toArray(a), v = _.filter((e) => u.isValidElement(e) && e.type === S), y = _.filter((e) => !v.includes(e));
+	return /* @__PURE__ */ m("header", {
+		ref: f,
+		className: e(l.SectionIntroStacked, c === "gridline" && l["SectionIntroStacked--variant-gridline"], c === "gridline" && o.gridline, p, i),
+		...d,
 		style: {
-			...h,
-			...o
+			...g,
+			...s
 		},
-		children: /* @__PURE__ */ m(t, {
+		children: /* @__PURE__ */ h(t, {
 			fullWidth: !0,
-			enableGutters: s !== "gridline",
-			children: [/* @__PURE__ */ p(t.Column, {
+			enableGutters: c !== "gridline",
+			children: [/* @__PURE__ */ m(t.Column, {
 				span: { large: 6 },
+				children: y
+			}), /* @__PURE__ */ m(t.Column, {
+				span: c === "gridline" ? { large: 6 } : { large: 5 },
+				start: c === "gridline" ? { large: 7 } : { large: 8 },
 				children: v
-			}), /* @__PURE__ */ p(t.Column, {
-				span: s === "gridline" ? { large: 6 } : { large: 5 },
-				start: s === "gridline" ? { large: 7 } : { large: 8 },
-				children: _
 			})]
 		})
 	});
-}), _ = "3", v = u(({ as: t = a, size: n = _, className: r, children: o, ...s }, u) => {
-	let m = f(() => l.Children.toArray(o), [o]), h = d(() => m.some((e) => l.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [m]), g = m.length === 1 ? "default" : h();
-	return /* @__PURE__ */ p(i, {
-		ref: u,
-		className: e(c["SectionIntroStacked-heading"], g === "muted" && c["SectionIntroStacked-heading--muted"], r),
+}), v = "3", y = d(({ as: t = a, size: n = v, className: r, children: o, ...s }, c) => {
+	let d = p(() => u.Children.toArray(o), [o]), h = f(() => d.some((e) => u.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [d]), g = d.length === 1 ? "default" : h();
+	return /* @__PURE__ */ m(i, {
+		ref: c,
+		className: e(l["SectionIntroStacked-heading"], g === "muted" && l["SectionIntroStacked-heading--muted"], r),
 		size: n,
 		as: t,
 		...s,
 		children: o
 	});
-}), y = u(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ p(r, {
+}), b = d(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ m(r, {
 	as: "p",
-	className: e(c["SectionIntroStacked-description"], t),
+	className: e(l["SectionIntroStacked-description"], t),
 	ref: a,
 	variant: "muted",
 	...i,
 	children: n
-})), b = u(({ className: t, children: n, variant: r = "accent", size: i = "medium", ...a }, s) => /* @__PURE__ */ p(o, {
-	ref: s,
-	className: e(c["SectionIntroStacked-link"], t),
+})), x = d(({ className: t, children: n, variant: r = "accent", size: i = "medium", ...a }, o) => /* @__PURE__ */ m(s, {
+	ref: o,
+	className: e(l["SectionIntroStacked-link"], t),
 	size: i,
 	variant: r,
 	...a,
 	children: n
-})), x = ({ animate: t, className: r, children: i, ...a }) => {
+})), S = ({ animate: t, className: r, children: i, ...a }) => {
 	let { classes: o, styles: s } = n(t);
-	return /* @__PURE__ */ p("ul", {
-		className: e(o, c["SectionIntroStacked-items"], r),
+	return /* @__PURE__ */ m("ul", {
+		className: e(o, l["SectionIntroStacked-items"], r),
 		style: { ...s },
 		...a,
 		children: i
 	});
-}, S = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ p(s, {
-	className: e(c.SectionIntroStackedItem__icon, t),
+}, C = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ m(c, {
+	className: e(l.SectionIntroStackedItem__icon, t),
 	hasBackground: !0,
 	size: "medium",
 	color: n,
 	...r
-}), C = u(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ p(i, {
+}), w = d(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ m(i, {
 	ref: s,
 	as: t,
 	size: n,
-	className: e(c.SectionIntroStackedItem__heading, r),
+	className: e(l.SectionIntroStackedItem__heading, r),
 	...o,
 	children: a
-})), w = u(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ p(r, {
+})), T = d(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ m(r, {
 	as: "p",
 	variant: "muted",
 	size: "200",
-	className: e(c.SectionIntroStackedItem__description, t),
+	className: e(l.SectionIntroStackedItem__description, t),
 	ref: a,
 	...i,
 	children: n
-})), T = Object.assign(g, {
-	Heading: v,
-	Description: y,
-	Link: b,
-	Items: x,
+})), E = Object.assign(_, {
+	Heading: y,
+	Description: b,
+	Link: x,
+	Items: S,
 	Item: ({ className: t, children: n, ...i }) => {
-		let a = e(c["SectionIntroStackedItem-item"], t), o = f(() => l.Children.toArray(n), [n]);
-		if (o.some((e) => l.isValidElement(e) && (e.type === S || e.type === C || e.type === w))) {
-			let t = o.find((e) => l.isValidElement(e) && e.type === S), n = o.filter((e) => !(l.isValidElement(e) && e.type === S));
-			return /* @__PURE__ */ m("li", {
-				className: e(a, !!t && c["SectionIntroStackedItem-item--with-icon"]),
+		let a = e(l["SectionIntroStackedItem-item"], t), o = p(() => u.Children.toArray(n), [n]);
+		if (o.some((e) => u.isValidElement(e) && (e.type === C || e.type === w || e.type === T))) {
+			let t = o.find((e) => u.isValidElement(e) && e.type === C), n = o.filter((e) => !(u.isValidElement(e) && e.type === C));
+			return /* @__PURE__ */ h("li", {
+				className: e(a, !!t && l["SectionIntroStackedItem-item--with-icon"]),
 				...i,
-				children: [t, /* @__PURE__ */ p("div", {
-					className: c.SectionIntroStackedItem__content,
+				children: [t, /* @__PURE__ */ m("div", {
+					className: l.SectionIntroStackedItem__content,
 					children: n
 				})]
 			});
 		}
-		let s = o.length === 1 ? "default" : o.some((e) => l.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default";
-		return /* @__PURE__ */ p("li", {
+		let s = o.length === 1 ? "default" : o.some((e) => u.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default";
+		return /* @__PURE__ */ m("li", {
 			className: a,
 			...i,
-			children: /* @__PURE__ */ p(r, {
+			children: /* @__PURE__ */ m(r, {
 				as: "span",
-				className: e(c["SectionIntroStackedItem__item-text"], s === "muted" && c["SectionIntroStackedItem__item-text--muted"]),
+				className: e(l["SectionIntroStackedItem__item-text"], s === "muted" && l["SectionIntroStackedItem__item-text--muted"]),
 				size: "350",
 				children: n
 			})
 		});
 	},
-	ItemIcon: S,
-	ItemHeading: C,
-	ItemDescription: w
+	ItemIcon: C,
+	ItemHeading: w,
+	ItemDescription: T
 });
 //#endregion
-export { T as SectionIntroStacked, h as SectionIntroStackedVariants };
+export { E as SectionIntroStacked, g as SectionIntroStackedVariants };
 //# sourceMappingURL=SectionIntroStacked.js.map

package/esm/SectionIntroStacked/SectionIntroStacked.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement> &\n PropsWithChildren & {\n variant?: SectionIntroStackedVariant\n }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const childrenArray = React.Children.toArray(children)\n\n // extract Items and everything else into two separate arrays\n const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntroStacked,\n variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n <Grid fullWidth enableGutters={variant !== 'gridline'}>\n <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>\n <Grid.Column\n span={variant === 'gridline' ? {large: 6} : {large: 5}}\n start={variant === 'gridline' ? {large: 7} : {large: 8}}\n >\n {items}\n </Grid.Column>\n </Grid>\n </header>\n )\n },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedHeadingProps>,\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[`SectionIntroStacked-heading`],\n defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' \| 'variant'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles['SectionIntroStacked-description'], className)}\n ref={ref}\n variant=\"muted\"\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n (\n {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n ref: Ref<HTMLAnchorElement>,\n ) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntroStacked-link'], className)}\n size={size}\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n return (\n <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n {children}\n </ul>\n )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n return (\n <Icon\n className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n hasBackground\n size=\"medium\"\n color={color}\n {...props}\n />\n )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n (\n {\n as = 'h3',\n size = 'subhead-large',\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n as={as}\n size={size}\n className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' \| 'variant' \| 'size'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst ItemDescription = forwardRef(\n ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n variant=\"muted\"\n size=\"200\"\n className={clsx(styles['SectionIntroStackedItem__description'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const hasSubComponents = childrenArray.some(\n child =>\n React.isValidElement(child) &&\n (child.type === ItemIcon \|\| child.type === ItemHeading \|\| child.type === ItemDescription),\n )\n\n if (hasSubComponents) {\n const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n return (\n <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n {iconChild}\n <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n </li>\n )\n }\n\n const getConditionalVariant = () => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n return (\n <li className={itemClassName} {...rest}>\n <Text\n as=\"span\"\n className={clsx(\n styles['SectionIntroStackedItem__item-text'],\n defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n )}\n size=\"350\"\n >\n {children}\n </Text>\n </li>\n )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Items: ItemsBase,\n Item: ItemBase,\n ItemIcon,\n ItemHeading,\n ItemDescription,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement> &\n PropsWithChildren & {\n variant?: SectionIntroStackedVariant\n }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const childrenArray = React.Children.toArray(children)\n\n // extract Items and everything else into two separate arrays\n const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntroStacked,\n variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n <Grid fullWidth enableGutters={variant !== 'gridline'}>\n <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>\n <Grid.Column\n span={variant === 'gridline' ? {large: 6} : {large: 5}}\n start={variant === 'gridline' ? {large: 7} : {large: 8}}\n >\n {items}\n </Grid.Column>\n </Grid>\n </header>\n )\n },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedHeadingProps>,\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[`SectionIntroStacked-heading`],\n defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' \| 'variant'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles['SectionIntroStacked-description'], className)}\n ref={ref}\n variant=\"muted\"\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n (\n {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n ref: Ref<HTMLAnchorElement>,\n ) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntroStacked-link'], className)}\n size={size}\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n return (\n <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n {children}\n </ul>\n )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n return (\n <Icon\n className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n hasBackground\n size=\"medium\"\n color={color}\n {...props}\n />\n )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n (\n {\n as = 'h3',\n size = 'subhead-large',\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n as={as}\n size={size}\n className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' \| 'variant' \| 'size'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst ItemDescription = forwardRef(\n ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n variant=\"muted\"\n size=\"200\"\n className={clsx(styles['SectionIntroStackedItem__description'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const hasSubComponents = childrenArray.some(\n child =>\n React.isValidElement(child) &&\n (child.type === ItemIcon \|\| child.type === ItemHeading \|\| child.type === ItemDescription),\n )\n\n if (hasSubComponents) {\n const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n return (\n <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n {iconChild}\n <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n </li>\n )\n }\n\n const getConditionalVariant = () => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n return (\n <li className={itemClassName} {...rest}>\n <Text\n as=\"span\"\n className={clsx(\n styles['SectionIntroStackedItem__item-text'],\n defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n )}\n size=\"350\"\n >\n {children}\n </Text>\n </li>\n )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Items: ItemsBase,\n Item: ItemBase,\n ItemIcon,\n ItemHeading,\n ItemDescription,\n})\n"],"mappings":"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"}

package/esm/SectionIntroStacked/SectionIntroStacked.module-Cr7kUqTH.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{--brand-Grid-spacing-row:var(--base-size-48)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-24);padding-block:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-start:var(--base-size-24);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-24);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-64);padding-block:var(--base-size-64);--SectionIntroStacked-item-divider-overflow-start:0px;--SectionIntroStacked-item-divider-overflow-end:calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));padding-inline:var(--base-size-64);padding-block:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH b,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-normal)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--full-width___wxr_6 .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{max-width:none}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ{max-width:50ch;margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J{margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}@media screen and (width<=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{font-size:var(--brand-text-size-600)}}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{top:var(--base-size-2);position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-block:calc(-1 * var(--base-size-64));padding-block:0;position:static;top:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-inline-start:var(--base-size-32);padding-inline-end:var(--base-size-32)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{border-block-end:none;position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{padding-block-end:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:not(:last-child):after{content:"";bottom:0;left:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));right:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:absolute}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-block:var(--base-size-40);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{border-block-end:none;padding-block-end:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{align-items:flex-start;gap:var(--base-size-24);flex-direction:row;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{gap:var(--base-size-48)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY{gap:var(--base-size-8);flex-direction:column;flex:1;min-width:0;display:flex}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx{border-radius:var(--brand-borderRadius-medium);flex-shrink:0}

package/esm/SectionIntroStacked/SectionIntroStacked.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './SectionIntroStacked.module-DvJXKMKX.css';var e = {
+import './SectionIntroStacked.module-Cr7kUqTH.css';var e = {
 	SectionIntroStacked: "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y",
 	"SectionIntroStacked--variant-gridline": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi",
 	"SectionIntroStacked-heading--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH",

package/esm/SectionIntroStacked/SectionIntroStacked.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n position: relative;\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-32);\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n /* At large viewports, left overflow is 0 (vertical divider bounds the start) /\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n }\n}\n\n.SectionIntroStacked--variant-gridline::before,\n.SectionIntroStacked--variant-gridline::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 100vw;\n height: 0;\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n z-index: 1;\n}\n\n.SectionIntroStacked--variant-gridline::before {\n top: 0;\n}\n\n.SectionIntroStacked--variant-gridline::after {\n bottom: 0;\n}\n\n@media screen and (min-width: 80rem) {\n .SectionIntroStacked--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n max-width: none;\n}\n\n.SectionIntroStacked-description {\n margin-block-start: var(--base-size-16);\n max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n .SectionIntroStacked-heading {\n font-size: var(--brand-text-size-600);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked-items {\n position: relative;\n top: var(--base-size-2);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-block: calc(-1 var(--base-size-64));\n padding-block: 0;\n position: static;\n top: auto;\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n /* Inset item content from the vertical gridline /\n padding-inline-start: var(--base-size-32);\n padding-inline-end: var(--base-size-32);\n }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n border-block-end: none;\n position: relative;\n}\n\n/ Restore equal padding on first/last items in gridline variant /\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: calc(-1 var(--SectionIntroStacked-item-divider-overflow-start));\n right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n padding-block: var(--base-size-40);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n border-block-end: none;\n padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStackedItem-item--with-icon {\n gap: var(--base-size-48);\n }\n}\n\n.SectionIntroStackedItem__content {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n flex: 1;\n min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n flex-shrink: 0;\n border-radius: var(--brand-borderRadius-medium);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n position: relative;\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-32);\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n /* At large viewports, left overflow is 0 (vertical divider bounds the start) /\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n }\n}\n\n@media screen and (min-width: 80rem) {\n .SectionIntroStacked--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n max-width: none;\n}\n\n.SectionIntroStacked-description {\n margin-block-start: var(--base-size-16);\n max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n .SectionIntroStacked-heading {\n font-size: var(--brand-text-size-600);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked-items {\n position: relative;\n top: var(--base-size-2);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-block: calc(-1 var(--base-size-64));\n padding-block: 0;\n position: static;\n top: auto;\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n /* Inset item content from the vertical gridline /\n padding-inline-start: var(--base-size-32);\n padding-inline-end: var(--base-size-32);\n }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n border-block-end: none;\n position: relative;\n}\n\n/ Restore equal padding on first/last items in gridline variant /\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: calc(-1 var(--SectionIntroStacked-item-divider-overflow-start));\n right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n padding-block: var(--base-size-40);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n border-block-end: none;\n padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStackedItem-item--with-icon {\n gap: var(--base-size-48);\n }\n}\n\n.SectionIntroStackedItem__content {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n flex: 1;\n min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n flex-shrink: 0;\n border-radius: var(--brand-borderRadius-medium);\n}\n"],"mappings":""}

package/esm/Stack/Stack.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { BaseSizeScale as t } from "../constants.js";
 import { useAnimation as n } from "../animation/useAnimation.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-Dr6y-7jl.css';/* empty css                                                                          */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css';/* empty css                                                                          */
 import r from "./Stack.module.js";
 import { forwardRef as i, useMemo as a } from "react";
 import { jsx as o } from "react/jsx-runtime";

package/esm/SubNav/SubNav.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;~~AA8PhD~~,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,2CAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}
1	+ {"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA+PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,2CAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}