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/Box/Box.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Box.module.js","names":[],"sources":["../../src/Box/Box.module.css"],"sourcesContent":["/* ---------------------------------------------------------- */\n/* Box component table of contents */\n/* Please ensure that this is kept up to date as the */\n/* component evolves. */\n/* ---------------------------------------------------------- */\n/* Table of contents: */\n/* 1. Padding */\n/* 2. Padding Top */\n/* 3. Padding Right */\n/* 4. Padding Bottom */\n/* 5. Padding Left */\n/* 6. Margin */\n/* 7. Margin Top */\n/* 8. Margin Right */\n/* 9. Margin Bottom */\n/* 10. Margin Left */\n/* 11. Background Colors */\n/* 12. Border Radius */\n/* 13. Border Width */\n/* 14. Border Color */\n/* 15. Border Style */\n/* ---------------------------------------------------------- */\n\n/**\n * 1. Padding\n */\n.Box-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Box-padding--normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Box-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n}\n\n.Box-padding--none {\n padding: 0;\n}\n\n.Box-padding--4 {\n padding: var(--base-size-4);\n}\n.Box-padding--8 {\n padding: var(--base-size-8);\n}\n.Box-padding--12 {\n padding: var(--base-size-12);\n}\n.Box-padding--16 {\n padding: var(--base-size-16);\n}\n.Box-padding--20 {\n padding: var(--base-size-20);\n}\n.Box-padding--24 {\n padding: var(--base-size-24);\n}\n.Box-padding--28 {\n padding: var(--base-size-28);\n}\n.Box-padding--32 {\n padding: var(--base-size-32);\n}\n.Box-padding--36 {\n padding: var(--base-size-36);\n}\n.Box-padding--40 {\n padding: var(--base-size-40);\n}\n.Box-padding--44 {\n padding: var(--base-size-44);\n}\n.Box-padding--48 {\n padding: var(--base-size-48);\n}\n.Box-padding--64 {\n padding: var(--base-size-64);\n}\n.Box-padding--80 {\n padding: var(--base-size-80);\n}\n.Box-padding--96 {\n padding: var(--base-size-96);\n}\n.Box-padding--112 {\n padding: var(--base-size-112);\n}\n.Box-padding--128 {\n padding: var(--base-size-128);\n}\n.Box-narrow-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-padding--normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Box-narrow-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-padding--none {\n padding: 0;\n}\n\n.Box-narrow-padding--4 {\n padding: var(--base-size-4);\n}\n.Box-narrow-padding--8 {\n padding: var(--base-size-8);\n}\n.Box-narrow-padding--12 {\n padding: var(--base-size-12);\n}\n.Box-narrow-padding--16 {\n padding: var(--base-size-16);\n}\n.Box-narrow-padding--20 {\n padding: var(--base-size-20);\n}\n.Box-narrow-padding--24 {\n padding: var(--base-size-24);\n}\n.Box-narrow-padding--28 {\n padding: var(--base-size-28);\n}\n.Box-narrow-padding--32 {\n padding: var(--base-size-32);\n}\n.Box-narrow-padding--36 {\n padding: var(--base-size-36);\n}\n.Box-narrow-padding--40 {\n padding: var(--base-size-40);\n}\n.Box-narrow-padding--44 {\n padding: var(--base-size-44);\n}\n.Box-narrow-padding--48 {\n padding: var(--base-size-48);\n}\n.Box-narrow-padding--64 {\n padding: var(--base-size-64);\n}\n.Box-narrow-padding--80 {\n padding: var(--base-size-80);\n}\n.Box-narrow-padding--96 {\n padding: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n }\n .Box-regular-padding--normal {\n padding: var(--brand-box-spacing-normal);\n }\n .Box-regular-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-padding--none {\n padding: 0;\n }\n .Box-regular-padding--4 {\n padding: var(--base-size-4);\n }\n .Box-regular-padding--8 {\n padding: var(--base-size-8);\n }\n .Box-regular-padding--12 {\n padding: var(--base-size-12);\n }\n .Box-regular-padding--16 {\n padding: var(--base-size-16);\n }\n .Box-regular-padding--20 {\n padding: var(--base-size-20);\n }\n .Box-regular-padding--24 {\n padding: var(--base-size-24);\n }\n .Box-regular-padding--28 {\n padding: var(--base-size-28);\n }\n .Box-regular-padding--32 {\n padding: var(--base-size-32);\n }\n .Box-regular-padding--36 {\n padding: var(--base-size-36);\n }\n .Box-regular-padding--40 {\n padding: var(--base-size-40);\n }\n .Box-regular-padding--44 {\n padding: var(--base-size-44);\n }\n .Box-regular-padding--48 {\n padding: var(--base-size-48);\n }\n .Box-regular-padding--64 {\n padding: var(--base-size-64);\n }\n .Box-regular-padding--80 {\n padding: var(--base-size-80);\n }\n .Box-regular-padding--96 {\n padding: var(--base-size-96);\n }\n .Box-regular-padding--112 {\n padding: var(--base-size-112);\n }\n .Box-regular-padding--128 {\n padding: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n }\n .Box-wide-padding--normal {\n padding: var(--brand-box-spacing-normal);\n }\n .Box-wide-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-padding--none {\n padding: 0;\n }\n .Box-wide-padding--4 {\n padding: var(--base-size-4);\n }\n .Box-wide-padding--8 {\n padding: var(--base-size-8);\n }\n .Box-wide-padding--12 {\n padding: var(--base-size-12);\n }\n .Box-wide-padding--16 {\n padding: var(--base-size-16);\n }\n .Box-wide-padding--20 {\n padding: var(--base-size-20);\n }\n .Box-wide-padding--24 {\n padding: var(--base-size-24);\n }\n .Box-wide-padding--28 {\n padding: var(--base-size-28);\n }\n .Box-wide-padding--32 {\n padding: var(--base-size-32);\n }\n .Box-wide-padding--36 {\n padding: var(--base-size-36);\n }\n .Box-wide-padding--40 {\n padding: var(--base-size-40);\n }\n .Box-wide-padding--44 {\n padding: var(--base-size-44);\n }\n .Box-wide-padding--48 {\n padding: var(--base-size-48);\n }\n .Box-wide-padding--64 {\n padding: var(--base-size-64);\n }\n .Box-wide-padding--80 {\n padding: var(--base-size-80);\n }\n .Box-wide-padding--96 {\n padding: var(--base-size-96);\n }\n .Box-wide-padding--112 {\n padding: var(--base-size-112);\n }\n .Box-wide-padding--128 {\n padding: var(--base-size-128);\n }\n}\n\n/**\n * 2. Padding Top\n */\n.Box-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n}\n.Box-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingBlockStart--none {\n padding-block-start: 0;\n}\n.Box-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n}\n.Box-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n}\n.Box-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n}\n.Box-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n}\n.Box-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n}\n.Box-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n}\n.Box-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n}\n.Box-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n}\n.Box-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n}\n.Box-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n}\n.Box-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n}\n.Box-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n}\n.Box-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n}\n.Box-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n}\n.Box-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n}\n.Box-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n}\n.Box-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n}\n\n.Box-narrow-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingBlockStart--none {\n padding-block-start: 0;\n}\n\n.Box-narrow-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n}\n.Box-narrow-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n}\n.Box-narrow-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n}\n.Box-narrow-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n}\n.Box-narrow-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n}\n.Box-narrow-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n}\n.Box-narrow-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n}\n.Box-narrow-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n}\n.Box-narrow-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n}\n.Box-narrow-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n}\n.Box-narrow-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n}\n.Box-narrow-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n}\n.Box-narrow-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n}\n.Box-narrow-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n}\n.Box-narrow-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n}\n.Box-narrow-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n}\n.Box-narrow-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingBlockStart--none {\n padding-block-start: 0;\n }\n .Box-regular-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n }\n .Box-regular-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n }\n .Box-regular-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n }\n .Box-regular-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n }\n .Box-regular-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n }\n .Box-regular-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n }\n .Box-regular-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n }\n .Box-regular-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n }\n .Box-regular-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n }\n .Box-regular-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n }\n .Box-regular-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n }\n .Box-regular-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n }\n .Box-regular-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n }\n .Box-regular-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n }\n .Box-regular-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n }\n .Box-regular-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n }\n .Box-regular-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingBlockStart--none {\n padding-block-start: 0;\n }\n .Box-wide-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n }\n .Box-wide-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n }\n .Box-wide-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n }\n .Box-wide-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n }\n .Box-wide-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n }\n .Box-wide-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n }\n .Box-wide-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n }\n .Box-wide-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n }\n .Box-wide-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n }\n .Box-wide-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n }\n .Box-wide-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n }\n .Box-wide-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n }\n .Box-wide-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n }\n .Box-wide-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n }\n .Box-wide-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n }\n .Box-wide-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n }\n .Box-wide-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n }\n}\n\n/**\n * 3. Padding Right\n */\n.Box-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingInlineEnd--none {\n padding-inline-end: 0;\n}\n.Box-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n}\n.Box-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n}\n.Box-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n}\n.Box-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n}\n.Box-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n}\n.Box-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n}\n.Box-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n}\n.Box-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n}\n.Box-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n}\n.Box-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n}\n.Box-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n}\n.Box-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n}\n.Box-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n}\n.Box-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n}\n.Box-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n}\n.Box-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n}\n.Box-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n}\n\n.Box-narrow-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingInlineEnd--none {\n padding-inline-end: 0;\n}\n.Box-narrow-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n}\n.Box-narrow-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n}\n.Box-narrow-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n}\n.Box-narrow-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n}\n.Box-narrow-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n}\n.Box-narrow-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n}\n.Box-narrow-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n}\n.Box-narrow-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n}\n.Box-narrow-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n}\n.Box-narrow-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n}\n.Box-narrow-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n}\n.Box-narrow-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n}\n.Box-narrow-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n}\n.Box-narrow-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n}\n.Box-narrow-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingInlineEnd--none {\n padding-inline-end: 0;\n }\n .Box-regular-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n }\n .Box-regular-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n }\n .Box-regular-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n }\n .Box-regular-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n }\n .Box-regular-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n }\n .Box-regular-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n }\n .Box-regular-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n }\n .Box-regular-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n }\n .Box-regular-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n }\n .Box-regular-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n }\n .Box-regular-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n }\n .Box-regular-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n }\n .Box-regular-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n }\n .Box-regular-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n }\n .Box-regular-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n }\n .Box-regular-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n }\n .Box-regular-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingInlineEnd--none {\n padding-inline-end: 0;\n }\n .Box-wide-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n }\n .Box-wide-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n }\n .Box-wide-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n }\n .Box-wide-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n }\n .Box-wide-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n }\n .Box-wide-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n }\n .Box-wide-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n }\n .Box-wide-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n }\n .Box-wide-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n }\n .Box-wide-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n }\n .Box-wide-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n }\n .Box-wide-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n }\n .Box-wide-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n }\n .Box-wide-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n }\n .Box-wide-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n }\n .Box-wide-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n }\n .Box-wide-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n }\n}\n/**\n * 4. Padding bottom\n */\n.Box-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n}\n.Box-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingBlockEnd--none {\n padding-block-end: 0;\n}\n.Box-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n}\n.Box-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n}\n.Box-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n}\n.Box-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n}\n.Box-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n}\n.Box-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n}\n.Box-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n}\n.Box-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n}\n.Box-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n}\n.Box-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n}\n.Box-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n}\n.Box-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n}\n.Box-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n}\n.Box-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n}\n.Box-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n}\n.Box-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n}\n.Box-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n}\n\n.Box-narrow-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingBlockEnd--none {\n padding-block-end: 0;\n}\n.Box-narrow-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n}\n.Box-narrow-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n}\n.Box-narrow-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n}\n.Box-narrow-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n}\n.Box-narrow-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n}\n.Box-narrow-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n}\n.Box-narrow-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n}\n.Box-narrow-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n}\n.Box-narrow-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n}\n.Box-narrow-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n}\n.Box-narrow-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n}\n.Box-narrow-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n}\n.Box-narrow-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n}\n.Box-narrow-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n}\n.Box-narrow-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n}\n.Box-narrow-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n}\n.Box-narrow-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingBlockEnd--none {\n padding-block-end: 0;\n }\n .Box-regular-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n }\n .Box-regular-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n }\n .Box-regular-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n }\n .Box-regular-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n }\n .Box-regular-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n }\n .Box-regular-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n }\n .Box-regular-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n }\n .Box-regular-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n }\n .Box-regular-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n }\n .Box-regular-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n }\n .Box-regular-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n }\n .Box-regular-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n }\n .Box-regular-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n }\n .Box-regular-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n }\n .Box-regular-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n }\n .Box-regular-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n }\n .Box-regular-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingBlockEnd--none {\n padding-block-end: 0;\n }\n .Box-wide-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n }\n .Box-wide-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n }\n .Box-wide-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n }\n .Box-wide-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n }\n .Box-wide-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n }\n .Box-wide-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n }\n .Box-wide-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n }\n .Box-wide-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n }\n .Box-wide-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n }\n .Box-wide-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n }\n .Box-wide-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n }\n .Box-wide-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n }\n .Box-wide-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n }\n .Box-wide-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n }\n .Box-wide-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n }\n .Box-wide-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n }\n .Box-wide-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n }\n}\n\n/**\n * 5. Padding Left\n */\n.Box-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingInlineStart--none {\n padding-inline-start: 0;\n}\n.Box-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n}\n.Box-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n}\n.Box-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n}\n.Box-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n}\n.Box-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n}\n.Box-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n}\n.Box-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n}\n.Box-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n}\n.Box-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n}\n.Box-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n}\n.Box-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n}\n.Box-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n}\n.Box-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n}\n.Box-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n}\n.Box-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n}\n.Box-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n}\n.Box-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n}\n\n.Box-narrow-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingInlineStart--none {\n padding-inline-start: 0;\n}\n.Box-narrow-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n}\n.Box-narrow-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n}\n.Box-narrow-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n}\n.Box-narrow-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n}\n.Box-narrow-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n}\n.Box-narrow-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n}\n.Box-narrow-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n}\n.Box-narrow-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n}\n.Box-narrow-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n}\n.Box-narrow-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n}\n.Box-narrow-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n}\n.Box-narrow-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n}\n.Box-narrow-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n}\n.Box-narrow-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n}\n.Box-narrow-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n}\n.Box-narrow-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n}\n.Box-narrow-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingInlineStart--none {\n padding-inline-start: 0;\n }\n .Box-regular-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n }\n .Box-regular-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n }\n .Box-regular-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n }\n .Box-regular-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n }\n .Box-regular-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n }\n .Box-regular-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n }\n .Box-regular-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n }\n .Box-regular-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n }\n .Box-regular-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n }\n .Box-regular-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n }\n .Box-regular-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n }\n .Box-regular-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n }\n .Box-regular-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n }\n .Box-regular-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n }\n .Box-regular-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n }\n .Box-regular-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n }\n .Box-regular-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingInlineStart--none {\n padding-inline-start: 0;\n }\n .Box-wide-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n }\n .Box-wide-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n }\n .Box-wide-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n }\n .Box-wide-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n }\n .Box-wide-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n }\n .Box-wide-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n }\n .Box-wide-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n }\n .Box-wide-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n }\n .Box-wide-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n }\n .Box-wide-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n }\n .Box-wide-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n }\n .Box-wide-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n }\n .Box-wide-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n }\n .Box-wide-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n }\n .Box-wide-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n }\n .Box-wide-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n }\n .Box-wide-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n }\n}\n\n/**\n * 6. Margin\n */\n.Box-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n}\n.Box-margin--normal {\n margin: var(--brand-box-spacing-normal);\n}\n.Box-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n}\n\n.Box-margin--none {\n margin: 0;\n}\n.Box-margin--4 {\n margin: var(--base-size-4);\n}\n.Box-margin--8 {\n margin: var(--base-size-8);\n}\n.Box-margin--12 {\n margin: var(--base-size-12);\n}\n.Box-margin--16 {\n margin: var(--base-size-16);\n}\n.Box-margin--20 {\n margin: var(--base-size-20);\n}\n.Box-margin--24 {\n margin: var(--base-size-24);\n}\n.Box-margin--28 {\n margin: var(--base-size-28);\n}\n.Box-margin--32 {\n margin: var(--base-size-32);\n}\n.Box-margin--36 {\n margin: var(--base-size-36);\n}\n.Box-margin--40 {\n margin: var(--base-size-40);\n}\n.Box-margin--44 {\n margin: var(--base-size-44);\n}\n.Box-margin--48 {\n margin: var(--base-size-48);\n}\n.Box-margin--64 {\n margin: var(--base-size-64);\n}\n.Box-margin--80 {\n margin: var(--base-size-80);\n}\n.Box-margin--96 {\n margin: var(--base-size-96);\n}\n.Box-margin--112 {\n margin: var(--base-size-112);\n}\n.Box-margin--128 {\n margin: var(--base-size-128);\n}\n.Box-narrow-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-margin--normal {\n margin: var(--brand-box-spacing-normal);\n}\n.Box-narrow-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-margin--none {\n margin: 0;\n}\n.Box-narrow-margin--4 {\n margin: var(--base-size-4);\n}\n.Box-narrow-margin--8 {\n margin: var(--base-size-8);\n}\n.Box-narrow-margin--12 {\n margin: var(--base-size-12);\n}\n.Box-narrow-margin--16 {\n margin: var(--base-size-16);\n}\n.Box-narrow-margin--20 {\n margin: var(--base-size-20);\n}\n.Box-narrow-margin--24 {\n margin: var(--base-size-24);\n}\n.Box-narrow-margin--28 {\n margin: var(--base-size-28);\n}\n.Box-narrow-margin--32 {\n margin: var(--base-size-32);\n}\n.Box-narrow-margin--36 {\n margin: var(--base-size-36);\n}\n.Box-narrow-margin--40 {\n margin: var(--base-size-40);\n}\n.Box-narrow-margin--44 {\n margin: var(--base-size-44);\n}\n.Box-narrow-margin--48 {\n margin: var(--base-size-48);\n}\n.Box-narrow-margin--64 {\n margin: var(--base-size-64);\n}\n.Box-narrow-margin--80 {\n margin: var(--base-size-80);\n}\n.Box-narrow-margin--96 {\n margin: var(--base-size-96);\n}\n.Box-narrow-margin--112 {\n margin: var(--base-size-112);\n}\n.Box-narrow-margin--128 {\n margin: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n }\n .Box-regular-margin--normal {\n margin: var(--brand-box-spacing-normal);\n }\n .Box-regular-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-margin--none {\n margin: 0;\n }\n .Box-regular-margin--4 {\n margin: var(--base-size-4);\n }\n .Box-regular-margin--8 {\n margin: var(--base-size-8);\n }\n .Box-regular-margin--12 {\n margin: var(--base-size-12);\n }\n .Box-regular-margin--16 {\n margin: var(--base-size-16);\n }\n .Box-regular-margin--20 {\n margin: var(--base-size-20);\n }\n .Box-regular-margin--24 {\n margin: var(--base-size-24);\n }\n .Box-regular-margin--28 {\n margin: var(--base-size-28);\n }\n .Box-regular-margin--32 {\n margin: var(--base-size-32);\n }\n .Box-regular-margin--36 {\n margin: var(--base-size-36);\n }\n .Box-regular-margin--40 {\n margin: var(--base-size-40);\n }\n .Box-regular-margin--44 {\n margin: var(--base-size-44);\n }\n .Box-regular-margin--48 {\n margin: var(--base-size-48);\n }\n .Box-regular-margin--64 {\n margin: var(--base-size-64);\n }\n .Box-regular-margin--80 {\n margin: var(--base-size-80);\n }\n .Box-regular-margin--96 {\n margin: var(--base-size-96);\n }\n .Box-regular-margin--112 {\n margin: var(--base-size-112);\n }\n .Box-regular-margin--128 {\n margin: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n }\n .Box-wide-margin--normal {\n margin: var(--brand-box-spacing-normal);\n }\n .Box-wide-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-margin--none {\n margin: 0;\n }\n .Box-wide-margin--4 {\n margin: var(--base-size-4);\n }\n .Box-wide-margin--8 {\n margin: var(--base-size-8);\n }\n .Box-wide-margin--12 {\n margin: var(--base-size-12);\n }\n .Box-wide-margin--16 {\n margin: var(--base-size-16);\n }\n .Box-wide-margin--20 {\n margin: var(--base-size-20);\n }\n .Box-wide-margin--24 {\n margin: var(--base-size-24);\n }\n .Box-wide-margin--28 {\n margin: var(--base-size-28);\n }\n .Box-wide-margin--32 {\n margin: var(--base-size-32);\n }\n .Box-wide-margin--36 {\n margin: var(--base-size-36);\n }\n .Box-wide-margin--40 {\n margin: var(--base-size-40);\n }\n .Box-wide-margin--44 {\n margin: var(--base-size-44);\n }\n .Box-wide-margin--48 {\n margin: var(--base-size-48);\n }\n .Box-wide-margin--64 {\n margin: var(--base-size-64);\n }\n .Box-wide-margin--80 {\n margin: var(--base-size-80);\n }\n .Box-wide-margin--112 {\n margin: var(--base-size-112);\n }\n .Box-wide-margin--128 {\n margin: var(--base-size-128);\n }\n}\n\n/**\n * 7. Margin Top\n */\n.Box-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n}\n.Box-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginBlockStart--none {\n margin-block-start: 0;\n}\n.Box-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n}\n.Box-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n}\n.Box-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n}\n.Box-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n}\n.Box-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n}\n.Box-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n}\n.Box-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n}\n.Box-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n}\n.Box-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n}\n.Box-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n}\n.Box-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n}\n.Box-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n}\n.Box-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n}\n.Box-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n}\n.Box-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n}\n.Box-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n}\n.Box-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n}\n\n.Box-narrow-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginBlockStart--none {\n margin-block-start: 0;\n}\n.Box-narrow-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n}\n.Box-narrow-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n}\n.Box-narrow-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n}\n.Box-narrow-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n}\n.Box-narrow-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n}\n.Box-narrow-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n}\n.Box-narrow-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n}\n.Box-narrow-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n}\n.Box-narrow-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n}\n.Box-narrow-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n}\n.Box-narrow-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n}\n.Box-narrow-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n}\n.Box-narrow-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n}\n.Box-narrow-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n}\n.Box-narrow-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n}\n.Box-narrow-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n}\n.Box-narrow-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginBlockStart--none {\n margin-block-start: 0;\n }\n .Box-regular-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n }\n .Box-regular-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n }\n .Box-regular-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n }\n .Box-regular-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n }\n .Box-regular-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n }\n .Box-regular-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n }\n .Box-regular-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n }\n .Box-regular-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n }\n .Box-regular-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n }\n .Box-regular-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n }\n .Box-regular-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n }\n .Box-regular-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n }\n .Box-regular-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n }\n .Box-regular-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n }\n .Box-regular-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n }\n .Box-regular-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n }\n .Box-regular-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginBlockStart--none {\n margin-block-start: 0;\n }\n .Box-wide-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n }\n .Box-wide-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n }\n .Box-wide-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n }\n .Box-wide-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n }\n .Box-wide-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n }\n .Box-wide-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n }\n .Box-wide-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n }\n .Box-wide-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n }\n .Box-wide-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n }\n .Box-wide-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n }\n .Box-wide-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n }\n .Box-wide-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n }\n .Box-wide-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n }\n .Box-wide-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n }\n .Box-wide-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n }\n .Box-wide-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n }\n .Box-wide-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n }\n}\n\n/**\n * 8. Margin Right\n */\n.Box-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginInlineEnd--none {\n margin-inline-end: 0;\n}\n.Box-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n}\n.Box-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n}\n.Box-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n}\n.Box-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n}\n.Box-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n}\n.Box-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n}\n.Box-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n}\n.Box-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n}\n.Box-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n}\n.Box-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n}\n.Box-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n}\n.Box-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n}\n.Box-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n}\n.Box-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n}\n.Box-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n}\n.Box-marginInlineEnd--112 {\n margin-inline-end: var(--base-size-112);\n}\n.Box-marginInlineEnd--128 {\n margin-inline-end: var(--base-size-128);\n}\n\n.Box-narrow-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginInlineEnd--none {\n margin-inline-end: 0;\n}\n.Box-narrow-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n}\n.Box-narrow-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n}\n.Box-narrow-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n}\n.Box-narrow-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n}\n.Box-narrow-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n}\n.Box-narrow-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n}\n.Box-narrow-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n}\n.Box-narrow-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n}\n.Box-narrow-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n}\n.Box-narrow-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n}\n.Box-narrow-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n}\n.Box-narrow-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n}\n.Box-narrow-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n}\n.Box-narrow-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n}\n.Box-narrow-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginInlineEnd--none {\n margin-inline-end: 0;\n }\n .Box-regular-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n }\n .Box-regular-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n }\n .Box-regular-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n }\n .Box-regular-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n }\n .Box-regular-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n }\n .Box-regular-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n }\n .Box-regular-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n }\n .Box-regular-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n }\n .Box-regular-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n }\n .Box-regular-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n }\n .Box-regular-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n }\n .Box-regular-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n }\n .Box-regular-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n }\n .Box-regular-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n }\n .Box-regular-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginInlineEnd--none {\n margin-inline-end: 0;\n }\n .Box-wide-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n }\n .Box-wide-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n }\n .Box-wide-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n }\n .Box-wide-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n }\n .Box-wide-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n }\n .Box-wide-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n }\n .Box-wide-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n }\n .Box-wide-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n }\n .Box-wide-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n }\n .Box-wide-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n }\n .Box-wide-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n }\n .Box-wide-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n }\n .Box-wide-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n }\n .Box-wide-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n }\n .Box-wide-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n }\n}\n/**\n * 9. Margin bottom\n */\n.Box-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n}\n.Box-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginBlockEnd--none {\n margin-block-end: 0;\n}\n.Box-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n}\n.Box-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n}\n.Box-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n}\n.Box-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n}\n.Box-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n}\n.Box-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n}\n.Box-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n}\n.Box-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n}\n.Box-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n}\n.Box-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n}\n.Box-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n}\n.Box-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n}\n.Box-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n}\n.Box-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n}\n.Box-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n}\n.Box-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n}\n.Box-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n}\n\n.Box-narrow-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginBlockEnd--none {\n margin-block-end: 0;\n}\n.Box-narrow-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n}\n.Box-narrow-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n}\n.Box-narrow-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n}\n.Box-narrow-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n}\n.Box-narrow-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n}\n.Box-narrow-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n}\n.Box-narrow-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n}\n.Box-narrow-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n}\n.Box-narrow-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n}\n.Box-narrow-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n}\n.Box-narrow-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n}\n.Box-narrow-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n}\n.Box-narrow-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n}\n.Box-narrow-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n}\n.Box-narrow-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginBlockEnd--none {\n margin-block-end: 0;\n }\n .Box-regular-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n }\n .Box-regular-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n }\n .Box-regular-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n }\n .Box-regular-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n }\n .Box-regular-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n }\n .Box-regular-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n }\n .Box-regular-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n }\n .Box-regular-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n }\n .Box-regular-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n }\n .Box-regular-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n }\n .Box-regular-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n }\n .Box-regular-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n }\n .Box-regular-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n }\n .Box-regular-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n }\n .Box-regular-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n }\n .Box-regular-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n }\n .Box-regular-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginBlockEnd--none {\n margin-block-end: 0;\n }\n .Box-wide-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n }\n .Box-wide-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n }\n .Box-wide-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n }\n .Box-wide-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n }\n .Box-wide-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n }\n .Box-wide-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n }\n .Box-wide-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n }\n .Box-wide-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n }\n .Box-wide-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n }\n .Box-wide-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n }\n .Box-wide-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n }\n .Box-wide-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n }\n .Box-wide-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n }\n .Box-wide-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n }\n .Box-wide-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n }\n .Box-wide-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n }\n .Box-wide-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n }\n}\n\n/**\n * 10. Margin Left\n */\n.Box-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginInlineStart--none {\n margin-inline-start: 0;\n}\n.Box-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n}\n.Box-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n}\n.Box-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n}\n.Box-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n}\n.Box-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n}\n.Box-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n}\n.Box-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n}\n.Box-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n}\n.Box-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n}\n.Box-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n}\n.Box-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n}\n.Box-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n}\n.Box-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n}\n.Box-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n}\n.Box-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n}\n.Box-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n}\n.Box-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n}\n\n.Box-narrow-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginInlineStart--none {\n margin-inline-start: 0;\n}\n.Box-narrow-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n}\n.Box-narrow-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n}\n.Box-narrow-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n}\n.Box-narrow-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n}\n.Box-narrow-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n}\n.Box-narrow-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n}\n.Box-narrow-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n}\n.Box-narrow-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n}\n.Box-narrow-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n}\n.Box-narrow-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n}\n.Box-narrow-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n}\n.Box-narrow-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n}\n.Box-narrow-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n}\n.Box-narrow-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n}\n.Box-narrow-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n}\n.Box-narrow-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n}\n.Box-narrow-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginInlineStart--none {\n margin-inline-start: 0;\n }\n .Box-regular-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n }\n .Box-regular-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n }\n .Box-regular-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n }\n .Box-regular-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n }\n .Box-regular-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n }\n .Box-regular-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n }\n .Box-regular-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n }\n .Box-regular-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n }\n .Box-regular-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n }\n .Box-regular-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n }\n .Box-regular-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n }\n .Box-regular-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n }\n .Box-regular-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n }\n .Box-regular-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n }\n .Box-regular-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n }\n .Box-regular-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n }\n .Box-regular-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginInlineStart--none {\n margin-inline-start: 0;\n }\n .Box-wide-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n }\n .Box-wide-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n }\n .Box-wide-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n }\n .Box-wide-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n }\n .Box-wide-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n }\n .Box-wide-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n }\n .Box-wide-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n }\n .Box-wide-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n }\n .Box-wide-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n }\n .Box-wide-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n }\n .Box-wide-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n }\n .Box-wide-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n }\n .Box-wide-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n }\n .Box-wide-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n }\n .Box-wide-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n }\n .Box-wide-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n }\n .Box-wide-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n }\n}\n\n/**\n * 11. Background Color\n */\n.Box-backgroundColor--default {\n background-color: var(--brand-color-canvas-default);\n}\n\n.Box-backgroundColor--inset {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.Box-backgroundColor--subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Box-backgroundColor--overlay {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n/*\n* 12. Border Radius\n*/\n.Box-borderRadius--small {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Box-borderRadius--medium {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Box-borderRadius--large {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Box-borderRadius--xlarge {\n border-radius: var(--brand-borderRadius-xlarge);\n}\n\n.Box-borderRadius--full {\n border-radius: var(--brand-borderRadius-full);\n}\n\n/*\n* 13. Border Style (must come before width so width can override)\n*/\n.Box-borderStyle--solid {\n border-style: solid;\n border-width: 0; /* Reset all sides so individual side props work correctly */\n}\n\n.Box-borderStyle--none {\n border-style: none;\n}\n\n/*\n* 14. Border Width\n*/\n.Box-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n}\n\n/* Border width: none options */\n.Box-borderWidth--none {\n border-width: 0;\n}\n\n.Box-borderBlockStartWidth--none {\n border-block-start-width: 0;\n}\n\n.Box-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n}\n\n.Box-borderBlockEndWidth--none {\n border-block-end-width: 0;\n}\n\n.Box-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n}\n\n/* Responsive border width: narrow (mobile-first, no media query) */\n.Box-narrow-borderWidth--none {\n border-width: 0;\n}\n.Box-narrow-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderBlockStartWidth--none {\n border-block-start-width: 0;\n}\n.Box-narrow-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n}\n.Box-narrow-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderBlockEndWidth--none {\n border-block-end-width: 0;\n}\n.Box-narrow-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n}\n.Box-narrow-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n}\n\n/* Responsive border width: regular (tablet+) */\n@media screen and (min-width: 48rem) {\n .Box-regular-borderWidth--none {\n border-width: 0;\n }\n .Box-regular-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderBlockStartWidth--none {\n border-block-start-width: 0;\n }\n .Box-regular-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n }\n .Box-regular-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderBlockEndWidth--none {\n border-block-end-width: 0;\n }\n .Box-regular-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n }\n .Box-regular-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n }\n}\n\n/* Responsive border width: wide (desktop+) */\n@media screen and (min-width: 64rem) {\n .Box-wide-borderWidth--none {\n border-width: 0;\n }\n .Box-wide-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderBlockStartWidth--none {\n border-block-start-width: 0;\n }\n .Box-wide-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n }\n .Box-wide-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderBlockEndWidth--none {\n border-block-end-width: 0;\n }\n .Box-wide-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n }\n .Box-wide-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n }\n}\n\n/*\n* 14. Border Color\n*/\n.Box-borderColor--default {\n border-color: var(--brand-color-border-default);\n}\n\n.Box-borderColor--muted {\n border-color: var(--brand-color-border-muted);\n}\n\n.Box-borderColor--subtle {\n border-color: var(--brand-color-border-subtle);\n}\n"],"mappings":""}

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css';
+export declare const BreadcrumbVariants: readonly ["default", "accent"];
+export type BreadcrumbsProps = {
+    variant?: (typeof BreadcrumbVariants)[number];
+} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+type ItemProps = {
+    href: string;
+    selected?: boolean;
+} & BaseProps<HTMLAnchorElement> & React.HTMLAttributes<HTMLAnchorElement>;
+/**
+ * Use Breadcrumbs to display the current location within a navigational hierarchy.
+ * @see https://primer.style/brand/components/Breadcrumbs
+ */
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+};
+export {};
+//# sourceMappingURL=Breadcrumbs.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C;;GAEG;AACH,OAAO,+GAA+G,CAAA;AAOtH,eAAO,MAAM,kBAAkB,gCAAiC,CAAA;AAEhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;CAC9C,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAoBnC,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAC9B,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAwBzC;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAEtB,CAAA"}

package/esm/Breadcrumbs/Breadcrumbs.js ADDED Viewed

@@ -0,0 +1,38 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../Text/Text.js";
+import { InlineLink as n } from "../InlineLink/InlineLink.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes-DYugDcQy.css';/* empty css                                                                                                         */
+import r from "./Breadcrumbs.module.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/Breadcrumbs/Breadcrumbs.tsx
+var o = ["default", "accent"], s = i(({ className: t, children: n, variant: i = "default", ...o }, s) => /* @__PURE__ */ a("nav", {
+	ref: s,
+	className: e(r.Breadcrumbs, r[`Breadcrumbs--${i}`]),
+	"aria-label": "Breadcrumbs",
+	...o,
+	children: /* @__PURE__ */ a("ol", {
+		className: e(r.Breadcrumbs__list),
+		children: n
+	})
+})), c = i(({ className: i, children: o, href: s, selected: c, ...l }, u) => /* @__PURE__ */ a("li", {
+	className: r.Breadcrumbs__item,
+	children: c ? /* @__PURE__ */ a(t, {
+		size: "100",
+		variant: "muted",
+		className: e(r.Breadcrumbs__link, r["Breadcrumbs__link--selected"], i),
+		"aria-current": "page",
+		...l,
+		children: o
+	}) : /* @__PURE__ */ a(n, {
+		href: s,
+		ref: u,
+		className: e(r.Breadcrumbs__link, i),
+		...l,
+		children: o
+	})
+})), l = Object.assign(s, { Item: c });
+//#endregion
+export { o as BreadcrumbVariants, l as Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Breadcrumbs.js","names":[],"sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Breadcrumbs.module.css'\nimport {InlineLink} from '../InlineLink'\nimport {Text} from '../Text'\n\nexport const BreadcrumbVariants = ['default', 'accent'] as const\n\nexport type BreadcrumbsProps = {\n variant?: (typeof BreadcrumbVariants)[number]\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\n/**\n * Breadcrumbs parent element\n * <Breadcrumbs>\n */\n\nconst _Root = forwardRef<HTMLElement, BreadcrumbsProps>(({className, children, variant = 'default', ...rest}, ref) => {\n return (\n <nav\n ref={ref}\n className={clsx(styles.Breadcrumbs, styles[`Breadcrumbs--${variant}`])}\n aria-label=\"Breadcrumbs\"\n {...rest}\n >\n <ol className={clsx(styles.Breadcrumbs__list)}>{children}</ol>\n </nav>\n )\n})\n\ntype ItemProps = {\n href: string\n selected?: boolean\n} & BaseProps<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\nconst _Item = forwardRef<HTMLAnchorElement, ItemProps>(({className, children, href, selected, ...rest}, ref) => {\n return (\n <li className={styles.Breadcrumbs__item}>\n {selected ? (\n <Text\n size=\"100\"\n variant=\"muted\"\n className={clsx(styles.Breadcrumbs__link, styles['Breadcrumbs__link--selected'], className)}\n aria-current=\"page\"\n {...rest}\n >\n {children}\n </Text>\n ) : (\n <InlineLink href={href} ref={ref} className={clsx(styles.Breadcrumbs__link, className)} {...rest}>\n {children}\n </InlineLink>\n )}\n </li>\n )\n})\n\n/**\n * Use Breadcrumbs to display the current location within a navigational hierarchy.\n * @see https://primer.style/brand/components/Breadcrumbs\n */\nexport const Breadcrumbs = Object.assign(_Root, {\n Item: _Item,\n})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAqB,CAAC,WAAW,SAAS,EAYjD,IAAQ,GAA2C,EAAC,cAAW,aAAU,aAAU,WAAW,GAAG,KAAO,MAE1G,kBAAC,OAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAO,gBAAgB,KAAW;CACtE,cAAW;CACX,GAAI;WAEJ,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,kBAAkB;EAAG;EAAc,CAAA;CAC1D,CAAA,CAER,EAQI,IAAQ,GAA0C,EAAC,cAAW,aAAU,SAAM,aAAU,GAAG,KAAO,MAEpG,kBAAC,MAAD;CAAI,WAAW,EAAO;WACnB,IACC,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,WAAW,EAAK,EAAO,mBAAmB,EAAO,gCAAgC,EAAU;EAC3F,gBAAa;EACb,GAAI;EAEH;EACI,CAAA,GAEP,kBAAC,GAAD;EAAkB;EAAW;EAAK,WAAW,EAAK,EAAO,mBAAmB,EAAU;EAAE,GAAI;EACzF;EACU,CAAA;CAEZ,CAAA,CAEP,EAMW,IAAc,OAAO,OAAO,GAAO,EAC9C,MAAM,GACP,CAAC"}

package/esm/Breadcrumbs/Breadcrumbs.module-C-xmitEo.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Breadcrumbs-module__Breadcrumbs___lClwB{font-family:var(--brand-fontStack-sansSerif);justify-content:space-between;display:flex}@media screen and (width<=63.25rem){.Primer_Brand__Breadcrumbs-module__Breadcrumbs___lClwB{-webkit-overflow-scrolling:touch;overflow-x:auto}}.Primer_Brand__Breadcrumbs-module__Breadcrumbs--default___GD8Sa{--brand-InlineLink-color-rest:var(--brand-color-text-default);--brand-InlineLink-color-pressed:var(--brand-color-text-default)}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__list___SU1ou{margin:0;padding-inline-start:0}@media screen and (width<=63.25rem){.Primer_Brand__Breadcrumbs-module__Breadcrumbs__list___SU1ou{display:inline-flex}}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u{white-space:nowrap;list-style:none;display:inline-block}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u:after{content:"";height:.8em;margin:0 var(--base-size-12);border-right:var(--brand-borderWidth-thin) solid var(--brand-breadcrumbs-separator-borderColor);display:inline-block;transform:rotate(15deg)translateY(.0625em)}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u:first-child{margin-left:0}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u:last-child:after{content:none}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q{font-size:var(--brand-text-size-100);-webkit-text-decoration:none;text-decoration:none;display:inline-block}@media screen and (width<=63.25rem){.Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q{white-space:nowrap}}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q:hover,.Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q:focus{-webkit-text-decoration:underline;text-decoration:underline}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__link--selected___tXSfD{color:var(--brand-color-text-default);pointer-events:none;font-weight:inherit;letter-spacing:inherit}.Primer_Brand__Breadcrumbs-module__Breadcrumbs--default___GD8Sa .Primer_Brand__Breadcrumbs-module__Breadcrumbs__link--selected___tXSfD{color:var(--brand-color-text-muted)}.Primer_Brand__Breadcrumbs-module__Breadcrumbs__link--selected___tXSfD:focus{-webkit-text-decoration:none;text-decoration:none}

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

@@ -0,0 +1,12 @@
+import './Breadcrumbs.module-C-xmitEo.css';var e = {
+	Breadcrumbs: "Primer_Brand__Breadcrumbs-module__Breadcrumbs___lClwB",
+	"Breadcrumbs--default": "Primer_Brand__Breadcrumbs-module__Breadcrumbs--default___GD8Sa",
+	Breadcrumbs__list: "Primer_Brand__Breadcrumbs-module__Breadcrumbs__list___SU1ou",
+	Breadcrumbs__item: "Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u",
+	Breadcrumbs__link: "Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q",
+	"Breadcrumbs__link--selected": "Primer_Brand__Breadcrumbs-module__Breadcrumbs__link--selected___tXSfD"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=Breadcrumbs.module.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Breadcrumbs.module.js","names":[],"sources":["../../src/Breadcrumbs/Breadcrumbs.module.css"],"sourcesContent":[".Breadcrumbs {\n font-family: var(--brand-fontStack-sansSerif);\n display: flex;\n justify-content: space-between;\n}\n\n@media screen and (max-width: 63.25rem) {\n .Breadcrumbs {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n}\n\n.Breadcrumbs--default {\n --brand-InlineLink-color-rest: var(--brand-color-text-default);\n --brand-InlineLink-color-pressed: var(--brand-color-text-default);\n}\n\n.Breadcrumbs__list {\n margin: 0;\n padding-inline-start: 0;\n}\n\n@media screen and (max-width: 63.25rem) {\n .Breadcrumbs__list {\n display: inline-flex;\n }\n}\n\n.Breadcrumbs__item {\n display: inline-block;\n white-space: nowrap;\n list-style: none;\n}\n\n.Breadcrumbs__item::after {\n content: '';\n display: inline-block;\n height: 0.8em;\n margin: 0 var(--base-size-12);\n border-right: var(--brand-borderWidth-thin) solid var(--brand-breadcrumbs-separator-borderColor);\n transform: rotate(15deg) translateY(0.0625em);\n}\n\n.Breadcrumbs__item:first-child {\n margin-left: 0;\n}\n\n.Breadcrumbs__item:last-child::after {\n content: none;\n}\n\n.Breadcrumbs__link {\n font-size: var(--brand-text-size-100);\n display: inline-block;\n text-decoration: none;\n}\n\n@media screen and (max-width: 63.25rem) {\n .Breadcrumbs__link {\n white-space: nowrap;\n }\n}\n\n.Breadcrumbs__link:hover,\n.Breadcrumbs__link:focus {\n text-decoration: underline;\n}\n.Breadcrumbs__link--selected {\n color: var(--brand-color-text-default);\n pointer-events: none;\n font-weight: inherit;\n letter-spacing: inherit;\n}\n.Breadcrumbs--default .Breadcrumbs__link--selected {\n color: var(--brand-color-text-muted);\n}\n\n.Breadcrumbs__link--selected:focus {\n text-decoration: none;\n}\n"],"mappings":""}

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

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

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

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

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

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react';
+import type { Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import { HeadingProps, StackProps } from '../';
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+export declare const BreakoutBannerBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] | AnyString;
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
+export type BreakoutBannerProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner
+     */
+    align?: 'start' | 'center';
+    /**
+     * Optional, custom background color
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * Optional, custom background size
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * An optional leading visual that appears before the heading
+     */
+    leadingVisual?: ReactElement | Icon;
+};
+type BreakoutBannerHeadingProps = BaseProps<HTMLHeadingElement> & {
+    children: React.ReactNode | React.ReactNode[];
+} & HeadingProps;
+type BreakoutBannerDescriptionProps = BaseProps<HTMLParagraphElement> & {
+    children: React.ReactNode | React.ReactNode[];
+};
+/**
+ * Breakout banner component
+ * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.
+ */
+export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BreakoutBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<BreakoutBannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<BreakoutBannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    LinkGroup: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "ref"> & React.RefAttributes<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};
+//# sourceMappingURL=BreakoutBanner.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"BreakoutBanner.d.ts","sourceRoot":"","sources":["../../src/BreakoutBanner/BreakoutBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,YAAY,EAAiC,MAAM,OAAO,CAAA;AAErF,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAAgC,UAAU,EAAC,MAAM,KAAK,CAAA;AAKnF,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,eAAO,MAAM,8BAA8B,gCAAiC,CAAA;AAE5E,KAAK,+BAA+B,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACvE,KAAK,gBAAgB,GAAG,CAAC,OAAO,8BAA8B,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;AACnF,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;AAExE,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GACzD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,4BAA4B,CAAA;IACjE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,+BAA+B,CAAA;IAC7D;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,oCAAoC,CAAA;IACvE;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,gCAAgC,CAAA;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CACpC,CAAA;AAoGH,KAAK,0BAA0B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,GAAG,YAAY,CAAA;AAiBhB,KAAK,8BAA8B,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AA+DD;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAA+E,CAAA"}

package/esm/BreakoutBanner/BreakoutBanner.js ADDED Viewed

@@ -0,0 +1,96 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Stack as t } from "../Stack/Stack.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import { Link as i } from "../Link/Link.js";
+import a from "./BreakoutBanner.module.js";
+import o, { forwardRef as s, useCallback as c, useMemo as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/BreakoutBanner/BreakoutBanner.tsx
+var f = ["default", "subtle"], p = s(({ align: t = "start", backgroundColor: n = "subtle", backgroundImageSrc: r, backgroundImagePosition: i = "center", backgroundImageSize: s = "cover", className: p, children: m, style: h, leadingVisual: _, ...v }, y) => {
+	let b = c((e, t) => t === "background-image-src" ? `url(${e})` : t === "background-color" && typeof e == "string" && f.includes(e) ? `var(--brand-color-canvas-${e})` : e, []), x = c((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-BreakoutBanner-${e}`]: b(t, e) } : {
+		[`--brand-BreakoutBanner-narrow-${e}`]: b(t?.narrow, e),
+		[`--brand-BreakoutBanner-regular-${e}`]: b(t?.regular, e),
+		[`--brand-BreakoutBanner-wide-${e}`]: b(t?.wide, e)
+	}, [b]), S = l(() => {
+		let e = {}, t = (t, n) => {
+			n && Object.assign(e, x(t, n));
+		};
+		return t("background-color", n), t("background-image-src", r), t("background-image-position", i), t("background-image-size", s), e;
+	}, [
+		n,
+		r,
+		i,
+		s,
+		x
+	]);
+	return !l(() => o.Children.toArray(m).some((e) => o.isValidElement(e) && e.type === g), [m]) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `BreakoutBanner` component expects a `BreakoutBanner.Heading` element to be specified."), /* @__PURE__ */ u("div", {
+		ref: y,
+		className: e(a.BreakoutBanner, p),
+		style: {
+			...S,
+			...h
+		},
+		...v,
+		children: /* @__PURE__ */ u("div", {
+			className: e(a["BreakoutBanner-container"]),
+			children: /* @__PURE__ */ d("div", {
+				className: e(a["BreakoutBanner-content"], t === "center" && a["BreakoutBanner-content--center"]),
+				children: [_ && /* @__PURE__ */ u("div", {
+					className: e(a["BreakoutBanner-leadingVisual"]),
+					children: typeof _ == "function" ? /* @__PURE__ */ u(_, {}) : _
+				}), m]
+			})
+		})
+	});
+}), m = "h3", h = "4", g = s(({ as: t = m, size: n = h, className: i, children: o, ...s }, c) => /* @__PURE__ */ u(r, {
+	ref: c,
+	className: e(a.BreakoutBanner__heading, i),
+	size: n,
+	as: t,
+	...s,
+	children: o
+})), _ = s(({ className: t, children: r, ...i }, o) => /* @__PURE__ */ u(n, {
+	ref: o,
+	as: "p",
+	variant: "muted",
+	className: e(a["BreakoutBanner-description"], t),
+	...i,
+	children: r
+})), v = s(({ className: n, direction: r, gap: s, padding: c, children: l, ...d }, f) => {
+	let p = o.Children.toArray(l).map((e, t) => o.isValidElement(e) && e.type === i ? o.cloneElement(e, {
+		size: e.props.size || "medium",
+		variant: e.props.variant || "accent",
+		arrowDirection: e.props.arrowDirection || (t === 0 ? "end" : "none"),
+		...e.props
+	}) : null).filter(Boolean).slice(0, 2), m = r === "vertical" ? {
+		gap: "condensed",
+		direction: "vertical",
+		alignItems: "flex-start"
+	} : {
+		gap: s || {
+			narrow: "normal",
+			regular: "spacious"
+		},
+		direction: r || {
+			narrow: "vertical",
+			regular: "horizontal"
+		}
+	};
+	return /* @__PURE__ */ u(t, {
+		padding: c || "none",
+		className: e(a["BreakoutBanner-linkGroup"], n),
+		ref: f,
+		...m,
+		...d,
+		children: p
+	});
+}), y = Object.assign(p, {
+	Heading: g,
+	Description: _,
+	LinkGroup: v
+});
+//#endregion
+export { y as BreakoutBanner, f as BreakoutBannerBackgroundColors };
+//# sourceMappingURL=BreakoutBanner.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"BreakoutBanner.js","names":[],"sources":["../../src/BreakoutBanner/BreakoutBanner.tsx"],"sourcesContent":["import React, {forwardRef, ReactElement, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {Icon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, Text, Stack, Link, LinkProps, StackProps} from '../'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './BreakoutBanner.module.css'\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\nexport const BreakoutBannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>\ntype BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] | AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>\n\nexport type BreakoutBannerProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode | React.ReactNode[]\n /**\n * The alignment of the content within the banner\n */\n align?: 'start' | 'center'\n /**\n * Optional, custom background color\n */\n backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap\n /**\n * Optional, custom background image\n */\n backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap\n /**\n * Optional, custom background position\n */\n backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap\n /**\n * Optional, custom background size\n */\n backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap\n /**\n * An optional leading visual that appears before the heading\n */\n leadingVisual?: ReactElement | Icon\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'start',\n backgroundColor = 'subtle',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n style,\n leadingVisual: LeadingVisual,\n ...props\n }: BreakoutBannerProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string | string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return BreakoutBannerBackgroundColors.includes(value as (typeof BreakoutBannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' || Array.isArray(value)\n ? {[`--brand-BreakoutBanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-BreakoutBanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-BreakoutBanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-BreakoutBanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const hasHeading = useMemo(\n () => React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === _Heading),\n [children],\n )\n\n if (!hasHeading && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('The `BreakoutBanner` component expects a `BreakoutBanner.Heading` element to be specified.')\n }\n\n return (\n <div\n ref={ref}\n className={clsx(styles.BreakoutBanner, className)}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div className={clsx(styles['BreakoutBanner-container'])}>\n <div\n className={clsx(\n styles['BreakoutBanner-content'],\n align === 'center' && styles['BreakoutBanner-content--center'],\n )}\n >\n {LeadingVisual && (\n <div className={clsx(styles['BreakoutBanner-leadingVisual'])}>\n {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}\n </div>\n )}\n {children}\n </div>\n </div>\n </div>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype BreakoutBannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode | React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize = '4'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: BreakoutBannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['BreakoutBanner__heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype BreakoutBannerDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode | React.ReactNode[]\n}\n\nconst Description = forwardRef(\n ({className, children, ...props}: BreakoutBannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n ref={ref}\n as=\"p\"\n variant=\"muted\"\n className={clsx(styles['BreakoutBanner-description'], className)}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype LinkGroupProps = React.ComponentProps<typeof Stack>\n\nconst _LinkGroup = forwardRef(\n ({className, direction, gap, padding, children, ...props}: LinkGroupProps, ref: Ref<HTMLDivElement>) => {\n const linksToRender = React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n return React.cloneElement(child, {\n size: child.props.size || 'medium',\n variant: child.props.variant || 'accent',\n arrowDirection: child.props.arrowDirection || (index === 0 ? 'end' : 'none'),\n ...child.props,\n })\n }\n return null\n })\n .filter(Boolean)\n .slice(0, 2)\n\n const defaultProps: Partial<StackProps> =\n direction === 'vertical'\n ? {\n gap: 'condensed',\n direction: 'vertical',\n alignItems: 'flex-start',\n }\n : {\n gap: gap || {narrow: 'normal', regular: 'spacious'},\n direction: direction || {narrow: 'vertical', regular: 'horizontal'},\n }\n\n return (\n <Stack\n padding={padding || 'none'}\n className={clsx(styles['BreakoutBanner-linkGroup'], className)}\n ref={ref}\n {...defaultProps}\n {...props}\n >\n {linksToRender}\n </Stack>\n )\n },\n)\n\n/**\n * Breakout banner component\n * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.\n */\nexport const BreakoutBanner = Object.assign(Root, {Heading: _Heading, Description, LinkGroup: _LinkGroup})\n"],"mappings":";;;;;;;;;AAgBA,IAAa,IAAiC,CAAC,WAAW,SAAS,EAqC7D,IAAO,GAET,EACE,WAAQ,SACR,qBAAkB,UAClB,uBACA,6BAA0B,UAC1B,yBAAsB,SACtB,cACA,aACA,UACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,IAAyB,GAAa,GAA0B,MAChE,MAAa,yBACR,OAAO,EAAM,KAGlB,MAAa,sBAAsB,OAAO,KAAU,YAC/C,EAA+B,SAAS,EAAyD,GACpG,4BAA4B,EAAM,KAClC,GAIL,EAAE,CAAC,EAEA,IAAe,GAClB,GAAU,MACT,OAAO,KAAU,YAAY,MAAM,QAAQ,EAAM,GAC7C,GAAE,0BAA0B,MAAa,EAAuB,GAAO,EAAS,EAAC,GACjF;GACG,iCAAiC,MAAa,EAAuB,GAAO,QAAQ,EAAS;GAC7F,kCAAkC,MAAa,EAAuB,GAAO,SAAS,EAAS;GAC/F,+BAA+B,MAAa,EAAuB,GAAO,MAAM,EAAS;EAC3F,EACP,CAAC,EAAuB,CACzB,EAEK,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAE,EAEd,KAAY,GAAU,MAAU;AACpC,GAAI,KACF,OAAO,OAAO,GAAW,EAAa,GAAU,EAAM,CAAC;;AAS3D,SALA,EAAS,oBAAoB,EAAgB,EAC7C,EAAS,wBAAwB,EAAmB,EACpD,EAAS,6BAA6B,EAAwB,EAC9D,EAAS,yBAAyB,EAAoB,EAE/C;IACN;EAAC;EAAiB;EAAoB;EAAyB;EAAqB;EAAa,CAAC;AAYrG,QALI,CALe,QACX,EAAM,SAAS,QAAQ,EAAS,CAAC,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAS,EAC5G,CAAC,EAAS,CAGP,KAAA,QAAA,IAAA,aAAwC,iBAAA,QAAA,IAAA,aAA0C,WAErF,QAAQ,KAAK,6FAA6F,EAI1G,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,EAAO,gBAAgB,EAAU;EACjD,OAAO;GAAC,GAAG;GAAkB,GAAG;GAAM;EACtC,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,4BAA4B;aACtD,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,2BACP,MAAU,YAAY,EAAO,kCAC9B;cAJH,CAMG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAK,EAAO,gCAAgC;eACzD,OAAO,KAAkB,aAAa,kBAAC,GAAD,EAAiB,CAAA,GAAG;KACvD,CAAA,EAEP,EACG;;GACF,CAAA;EACF,CAAA;EAGX,EAEK,IAAsB,MAMtB,IAAqB,KAErB,IAAW,GAEb,EAAC,QAAK,GAAqB,UAAO,GAAoB,cAAW,aAAU,GAAG,KAC9E,MAGE,kBAAC,GAAD;CAAc;CAAK,WAAW,EAAK,EAAO,yBAA4B,EAAU;CAAQ;CAAU;CAAI,GAAI;CACvG;CACO,CAAA,CAGf,EAMK,IAAc,GACjB,EAAC,cAAW,aAAU,GAAG,KAAwC,MAE9D,kBAAC,GAAD;CACO;CACL,IAAG;CACH,SAAQ;CACR,WAAW,EAAK,EAAO,+BAA+B,EAAU;CAChE,GAAI;CAEH;CACI,CAAA,CAGZ,EAIK,IAAa,GAChB,EAAC,cAAW,cAAW,QAAK,YAAS,aAAU,GAAG,KAAwB,MAA6B;CACtG,IAAM,IAAgB,EAAM,SAAS,QAAQ,EAAS,CACnD,KAAK,GAAO,MACP,EAAM,eAA0B,EAAM,IAAI,EAAM,SAAS,IACpD,EAAM,aAAa,GAAO;EAC/B,MAAM,EAAM,MAAM,QAAQ;EAC1B,SAAS,EAAM,MAAM,WAAW;EAChC,gBAAgB,EAAM,MAAM,mBAAmB,MAAU,IAAI,QAAQ;EACrE,GAAG,EAAM;EACV,CAAC,GAEG,KACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE,EAER,IACJ,MAAc,aACV;EACE,KAAK;EACL,WAAW;EACX,YAAY;EACb,GACD;EACE,KAAK,KAAO;GAAC,QAAQ;GAAU,SAAS;GAAW;EACnD,WAAW,KAAa;GAAC,QAAQ;GAAY,SAAS;GAAa;EACpE;AAEP,QACE,kBAAC,GAAD;EACE,SAAS,KAAW;EACpB,WAAW,EAAK,EAAO,6BAA6B,EAAU;EACzD;EACL,GAAI;EACJ,GAAI;YAEH;EACK,CAAA;EAGb,EAMY,IAAiB,OAAO,OAAO,GAAM;CAAC,SAAS;CAAU;CAAa,WAAW;CAAW,CAAC"}

package/esm/BreakoutBanner/BreakoutBanner.module-DGBSJFNJ.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{max-width:var(--brand-breakpoint-xlarge);border-radius:var(--brand-borderRadius-large);background-repeat:no-repeat;background-color:var(--brand-BreakoutBanner-narrow-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-narrow-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-narrow-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:50%;background-position:var(--brand-BreakoutBanner-narrow-background-image-position,var(--brand-BreakoutBanner-background-image-position,center));width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-40) var(--base-size-24) var(--base-size-128);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk{flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container--background___Uex_J{background:var(--brand-BreakoutBanner-bgColor)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content--center___oB7l0{text-align:center;align-items:center}.Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT{max-width:20ch}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-description___nFBHL{max-width:54ch;margin-block-start:var(--base-size-16)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-linkGroup___g_h1l{margin-block-start:var(--base-size-48)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf{margin-block-end:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-regular-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-regular-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-regular-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-regular-background-image-position,var(--brand-BreakoutBanner-background-image-position))}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{padding:var(--base-size-48)}}@media screen and (width>=80rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-wide-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-wide-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-wide-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-wide-background-image-position,var(--brand-BreakoutBanner-background-image-position))}}

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

@@ -0,0 +1,15 @@
+import './BreakoutBanner.module-DGBSJFNJ.css';var e = {
+	BreakoutBanner: "Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la",
+	"BreakoutBanner-container": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt",
+	"BreakoutBanner-content": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk",
+	"BreakoutBanner-container--background": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-container--background___Uex_J",
+	"BreakoutBanner-content--center": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-content--center___oB7l0",
+	BreakoutBanner__heading: "Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT",
+	"BreakoutBanner-description": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-description___nFBHL",
+	"BreakoutBanner-linkGroup": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-linkGroup___g_h1l",
+	"BreakoutBanner-leadingVisual": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=BreakoutBanner.module.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"BreakoutBanner.module.js","names":[],"sources":["../../src/BreakoutBanner/BreakoutBanner.module.css"],"sourcesContent":[".BreakoutBanner {\n position: relative;\n margin: 0 auto;\n display: flex;\n max-width: var(--brand-breakpoint-xlarge);\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n background-repeat: no-repeat;\n background-color: var(--brand-BreakoutBanner-narrow-background-color, var(--brand-BreakoutBanner-background-color));\n background-image: var(\n --brand-BreakoutBanner-narrow-background-image-src,\n var(--brand-BreakoutBanner-background-image-src)\n );\n background-size: var(\n --brand-BreakoutBanner-narrow-background-image-size,\n var(--brand-BreakoutBanner-background-image-size)\n );\n\n background-position: var(\n --brand-BreakoutBanner-narrow-background-image-position,\n var(--brand-BreakoutBanner-background-image-position, center)\n );\n}\n\n.BreakoutBanner-container {\n border-radius: var(--brand-borderRadius-xlarge);\n padding: var(--base-size-40) var(--base-size-24) var(--base-size-128);\n z-index: 1;\n width: 100%;\n box-sizing: border-box;\n}\n\n.BreakoutBanner-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.BreakoutBanner-container--background {\n background: var(--brand-BreakoutBanner-bgColor);\n}\n\n.BreakoutBanner-content--center {\n align-items: center;\n text-align: center;\n}\n\n.BreakoutBanner__heading {\n max-width: 20ch;\n}\n\n.BreakoutBanner-description {\n max-width: 54ch;\n margin-block-start: var(--base-size-16);\n}\n\n.BreakoutBanner-linkGroup {\n margin-block-start: var(--base-size-48);\n}\n\n.BreakoutBanner-leadingVisual {\n margin-block-end: var(--base-size-48);\n}\n\n/* Regular */\n@media screen and (min-width: 48rem) {\n .BreakoutBanner {\n background-color: var(\n --brand-BreakoutBanner-regular-background-color,\n var(--brand-BreakoutBanner-background-color)\n );\n background-image: var(\n --brand-BreakoutBanner-regular-background-image-src,\n var(--brand-BreakoutBanner-background-image-src)\n );\n background-size: var(\n --brand-BreakoutBanner-regular-background-image-size,\n var(--brand-BreakoutBanner-background-image-size)\n );\n background-position: var(\n --brand-BreakoutBanner-regular-background-image-position,\n var(--brand-BreakoutBanner-background-image-position)\n );\n }\n\n .BreakoutBanner-container {\n padding: var(--base-size-48);\n }\n}\n\n/* Wide */\n@media screen and (min-width: 80rem) {\n .BreakoutBanner {\n background-color: var(--brand-BreakoutBanner-wide-background-color, var(--brand-BreakoutBanner-background-color));\n background-image: var(\n --brand-BreakoutBanner-wide-background-image-src,\n var(--brand-BreakoutBanner-background-image-src)\n );\n background-size: var(\n --brand-BreakoutBanner-wide-background-image-size,\n var(--brand-BreakoutBanner-background-image-size)\n );\n\n background-position: var(\n --brand-BreakoutBanner-wide-background-image-position,\n var(--brand-BreakoutBanner-background-image-position)\n );\n }\n}\n"],"mappings":""}

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

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

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

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

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

@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react';
+import type { Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
+export declare const ButtonVariants: readonly ["primary", "secondary", "subtle", "accent"];
+export declare const ButtonSizes: readonly ["small", "medium", "large"];
+export declare const defaultButtonVariant: "secondary";
+export declare const defaultButtonSize: "medium";
+type ButtonVariant = (typeof ButtonVariants)[number];
+export type ButtonBaseProps = {
+    /**
+     * The leading visual appears before the button content
+     */
+    leadingVisual?: ReactElement | Icon;
+    /**
+     * The trailing visual appears after the button content
+     */
+    trailingVisual?: ReactElement | Icon;
+    /**
+     * The styling variations available in Button
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size variations available in Button
+     */
+    size?: (typeof ButtonSizes)[number];
+    /**
+     * A flag to show/hide the arrow icon
+     */
+    hasArrow?: boolean;
+    /**
+     * The Button spans the full width
+     */
+    block?: boolean;
+};
+export type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
+    as?: C;
+} & ButtonBaseProps & React.ComponentPropsWithoutRef<C>;
+export declare const _Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+    testIds: {
+        root: string;
+        readonly leadingVisual: string;
+        readonly trailingVisual: string;
+        readonly expandableArrow: string;
+    };
+};
+export {};
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAoC,YAAY,EAAC,MAAM,OAAO,CAAA;AAC5E,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,0GAA0G,CAAA;AAGjH,eAAO,MAAM,cAAc,uDAAwD,CAAA;AACnF,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAEhE,eAAO,MAAM,oBAAoB,aAAoB,CAAA;AACrD,eAAO,MAAM,iBAAiB,UAAiB,CAAA;AAE/C,KAAK,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IACpE,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,eAAe,GACjB,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAenC,eAAO,MAAM,OAAO,+JAgKnB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;CAAoC,CAAA"}