openproject-primer_view_components 0.6.3

data/app/lib/primer/css/layout.css

@@ -0,0 +1,1541 @@
+.AppFrame .AppFrame-a11yNav {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    width: 100%;
+    padding: var(--base-size-16, 16px);
+    background: var(--color-canvas-inset);
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    isolation: isolate;
+    align-items: center;
+    gap: var(--base-size-8, 8px)
+}
+
+.AppFrame .AppFrame-a11yNav:not(:focus-within) {
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    border: 0
+}
+
+.AppFrame .AppFrame-a11yNav:focus-within {
+    top: 0;
+    left: 0
+}
+
+@media(max-width: 767.98px) {
+    .AppFrame .AppFrame-a11yNav:focus-within {
+        justify-content: center
+    }
+}
+
+.AppFrame .AppFrame-a11yLink {
+    transition: none
+}
+
+.AppFrame .AppFrame-a11yLink:not(:focus) {
+    display: block;
+    width: var(--base-size-8, 8px);
+    height: var(--base-size-8, 8px);
+    overflow: hidden;
+    text-indent: var(--base-size-128, 128px);
+    pointer-events: none;
+    background: var(--color-border-default);
+    border-radius: var(--primer-borderRadius-full, 100vh)
+}
+
+.AppFrame .AppFrame-a11yLink:focus {
+    z-index: 20;
+    display: grid;
+    width: auto;
+    height: auto;
+    min-height: var(--primer-control-medium-size, 32px);
+    padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+    overflow: auto;
+    color: var(--color-fg-on-emphasis);
+    background: var(--color-accent-emphasis);
+    border-radius: var(--primer-borderRadius-full, 100vh);
+    align-items: center
+}
+
+@media(pointer: coarse) {
+    .AppFrame .AppFrame-a11yLink:focus::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        min-height: var(--primer-control-minTarget-coarse, 44px);
+        content: "";
+        transform: translateX(-50%) translateY(-50%)
+    }
+}
+
+@media(prefers-reduced-motion: no-preference) {
+    .AppFrame .AppFrame-a11yLink:focus {
+        animation: AppFrame-a11yLink-focus 200ms ease-out
+    }
+}
+
+@keyframes AppFrame-a11yLink-focus {
+    0% {
+        color: var(--color-accent-emphasis);
+        transform: scale(0.3, 0.25)
+    }
+
+    50% {
+        color: var(--color-accent-emphasis);
+        transform: scale(1, 1)
+    }
+
+    55% {
+        color: var(--color-fg-on-emphasis)
+    }
+
+    100% {
+        transform: scaleX(1)
+    }
+}
+
+.AppFrame .AppFrame-main {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column
+}
+
+@supports(height: 100dvh) {
+    .AppFrame .AppFrame-main {
+        min-height: 100dvh
+    }
+}
+
+.AppFrame .AppFrame-header-wrapper {
+    position: relative;
+    height: min-content;
+    overflow: visible
+}
+
+.AppFrame .AppFrame-header-wrapper .AppFrame-header {
+    position: sticky;
+    top: 0;
+    z-index: 1
+}
+
+.AppFrame .AppFrame-header {
+    flex: 0 0 auto
+}
+
+.AppFrame .AppFrame-subheader {
+    flex: 0 0 auto
+}
+
+.AppFrame .AppFrame-body {
+    flex: 1 0;
+    height: 100%
+}
+
+.AppFrame .AppFrame-footer {
+    flex: 0 0 auto
+}
+
+.container-sm {
+    max-width: 544px;
+    margin-right: auto;
+    margin-left: auto
+}
+
+.container-md {
+    max-width: 768px;
+    margin-right: auto;
+    margin-left: auto
+}
+
+.container-lg {
+    max-width: 1012px;
+    margin-right: auto;
+    margin-left: auto
+}
+
+.container-xl {
+    max-width: 1280px;
+    margin-right: auto;
+    margin-left: auto
+}
+
+.col-1 {
+    width: 8.33333333%
+}
+
+.col-2 {
+    width: 16.66666666%
+}
+
+.col-3 {
+    width: 24.99999999%
+}
+
+.col-4 {
+    width: 33.33333332%
+}
+
+.col-5 {
+    width: 41.66666665%
+}
+
+.col-6 {
+    width: 49.99999998%
+}
+
+.col-7 {
+    width: 58.33333331%
+}
+
+.col-8 {
+    width: 66.66666664%
+}
+
+.col-9 {
+    width: 74.99999997%
+}
+
+.col-10 {
+    width: 83.3333333%
+}
+
+.col-11 {
+    width: 91.66666663%
+}
+
+.col-12 {
+    width: 100%
+}
+
+@media(min-width: 544px) {
+    .col-sm-1 {
+        width: 8.33333333%
+    }
+
+    .col-sm-2 {
+        width: 16.66666666%
+    }
+
+    .col-sm-3 {
+        width: 24.99999999%
+    }
+
+    .col-sm-4 {
+        width: 33.33333332%
+    }
+
+    .col-sm-5 {
+        width: 41.66666665%
+    }
+
+    .col-sm-6 {
+        width: 49.99999998%
+    }
+
+    .col-sm-7 {
+        width: 58.33333331%
+    }
+
+    .col-sm-8 {
+        width: 66.66666664%
+    }
+
+    .col-sm-9 {
+        width: 74.99999997%
+    }
+
+    .col-sm-10 {
+        width: 83.3333333%
+    }
+
+    .col-sm-11 {
+        width: 91.66666663%
+    }
+
+    .col-sm-12 {
+        width: 100%
+    }
+}
+
+@media(min-width: 768px) {
+    .col-md-1 {
+        width: 8.33333333%
+    }
+
+    .col-md-2 {
+        width: 16.66666666%
+    }
+
+    .col-md-3 {
+        width: 24.99999999%
+    }
+
+    .col-md-4 {
+        width: 33.33333332%
+    }
+
+    .col-md-5 {
+        width: 41.66666665%
+    }
+
+    .col-md-6 {
+        width: 49.99999998%
+    }
+
+    .col-md-7 {
+        width: 58.33333331%
+    }
+
+    .col-md-8 {
+        width: 66.66666664%
+    }
+
+    .col-md-9 {
+        width: 74.99999997%
+    }
+
+    .col-md-10 {
+        width: 83.3333333%
+    }
+
+    .col-md-11 {
+        width: 91.66666663%
+    }
+
+    .col-md-12 {
+        width: 100%
+    }
+}
+
+@media(min-width: 1012px) {
+    .col-lg-1 {
+        width: 8.33333333%
+    }
+
+    .col-lg-2 {
+        width: 16.66666666%
+    }
+
+    .col-lg-3 {
+        width: 24.99999999%
+    }
+
+    .col-lg-4 {
+        width: 33.33333332%
+    }
+
+    .col-lg-5 {
+        width: 41.66666665%
+    }
+
+    .col-lg-6 {
+        width: 49.99999998%
+    }
+
+    .col-lg-7 {
+        width: 58.33333331%
+    }
+
+    .col-lg-8 {
+        width: 66.66666664%
+    }
+
+    .col-lg-9 {
+        width: 74.99999997%
+    }
+
+    .col-lg-10 {
+        width: 83.3333333%
+    }
+
+    .col-lg-11 {
+        width: 91.66666663%
+    }
+
+    .col-lg-12 {
+        width: 100%
+    }
+}
+
+@media(min-width: 1280px) {
+    .col-xl-1 {
+        width: 8.33333333%
+    }
+
+    .col-xl-2 {
+        width: 16.66666666%
+    }
+
+    .col-xl-3 {
+        width: 24.99999999%
+    }
+
+    .col-xl-4 {
+        width: 33.33333332%
+    }
+
+    .col-xl-5 {
+        width: 41.66666665%
+    }
+
+    .col-xl-6 {
+        width: 49.99999998%
+    }
+
+    .col-xl-7 {
+        width: 58.33333331%
+    }
+
+    .col-xl-8 {
+        width: 66.66666664%
+    }
+
+    .col-xl-9 {
+        width: 74.99999997%
+    }
+
+    .col-xl-10 {
+        width: 83.3333333%
+    }
+
+    .col-xl-11 {
+        width: 91.66666663%
+    }
+
+    .col-xl-12 {
+        width: 100%
+    }
+}
+
+.gutter {
+    margin-right: -16px;
+    margin-left: -16px
+}
+
+.gutter>[class*=col-] {
+    padding-right: 16px !important;
+    padding-left: 16px !important
+}
+
+.gutter-condensed {
+    margin-right: -8px;
+    margin-left: -8px
+}
+
+.gutter-condensed>[class*=col-] {
+    padding-right: 8px !important;
+    padding-left: 8px !important
+}
+
+.gutter-spacious {
+    margin-right: -24px;
+    margin-left: -24px
+}
+
+.gutter-spacious>[class*=col-] {
+    padding-right: 24px !important;
+    padding-left: 24px !important
+}
+
+@media(min-width: 544px) {
+    .gutter-sm {
+        margin-right: -16px;
+        margin-left: -16px
+    }
+
+    .gutter-sm>[class*=col-] {
+        padding-right: 16px !important;
+        padding-left: 16px !important
+    }
+
+    .gutter-sm-condensed {
+        margin-right: -8px;
+        margin-left: -8px
+    }
+
+    .gutter-sm-condensed>[class*=col-] {
+        padding-right: 8px !important;
+        padding-left: 8px !important
+    }
+
+    .gutter-sm-spacious {
+        margin-right: -24px;
+        margin-left: -24px
+    }
+
+    .gutter-sm-spacious>[class*=col-] {
+        padding-right: 24px !important;
+        padding-left: 24px !important
+    }
+}
+
+@media(min-width: 768px) {
+    .gutter-md {
+        margin-right: -16px;
+        margin-left: -16px
+    }
+
+    .gutter-md>[class*=col-] {
+        padding-right: 16px !important;
+        padding-left: 16px !important
+    }
+
+    .gutter-md-condensed {
+        margin-right: -8px;
+        margin-left: -8px
+    }
+
+    .gutter-md-condensed>[class*=col-] {
+        padding-right: 8px !important;
+        padding-left: 8px !important
+    }
+
+    .gutter-md-spacious {
+        margin-right: -24px;
+        margin-left: -24px
+    }
+
+    .gutter-md-spacious>[class*=col-] {
+        padding-right: 24px !important;
+        padding-left: 24px !important
+    }
+}
+
+@media(min-width: 1012px) {
+    .gutter-lg {
+        margin-right: -16px;
+        margin-left: -16px
+    }
+
+    .gutter-lg>[class*=col-] {
+        padding-right: 16px !important;
+        padding-left: 16px !important
+    }
+
+    .gutter-lg-condensed {
+        margin-right: -8px;
+        margin-left: -8px
+    }
+
+    .gutter-lg-condensed>[class*=col-] {
+        padding-right: 8px !important;
+        padding-left: 8px !important
+    }
+
+    .gutter-lg-spacious {
+        margin-right: -24px;
+        margin-left: -24px
+    }
+
+    .gutter-lg-spacious>[class*=col-] {
+        padding-right: 24px !important;
+        padding-left: 24px !important
+    }
+}
+
+@media(min-width: 1280px) {
+    .gutter-xl {
+        margin-right: -16px;
+        margin-left: -16px
+    }
+
+    .gutter-xl>[class*=col-] {
+        padding-right: 16px !important;
+        padding-left: 16px !important
+    }
+
+    .gutter-xl-condensed {
+        margin-right: -8px;
+        margin-left: -8px
+    }
+
+    .gutter-xl-condensed>[class*=col-] {
+        padding-right: 8px !important;
+        padding-left: 8px !important
+    }
+
+    .gutter-xl-spacious {
+        margin-right: -24px;
+        margin-left: -24px
+    }
+
+    .gutter-xl-spacious>[class*=col-] {
+        padding-right: 24px !important;
+        padding-left: 24px !important
+    }
+}
+
+.offset-1 {
+    margin-left: 8.33333333% !important
+}
+
+.offset-2 {
+    margin-left: 16.66666666% !important
+}
+
+.offset-3 {
+    margin-left: 24.99999999% !important
+}
+
+.offset-4 {
+    margin-left: 33.33333332% !important
+}
+
+.offset-5 {
+    margin-left: 41.66666665% !important
+}
+
+.offset-6 {
+    margin-left: 49.99999998% !important
+}
+
+.offset-7 {
+    margin-left: 58.33333331% !important
+}
+
+.offset-8 {
+    margin-left: 66.66666664% !important
+}
+
+.offset-9 {
+    margin-left: 74.99999997% !important
+}
+
+.offset-10 {
+    margin-left: 83.3333333% !important
+}
+
+.offset-11 {
+    margin-left: 91.66666663% !important
+}
+
+@media(min-width: 544px) {
+    .offset-sm-1 {
+        margin-left: 8.33333333% !important
+    }
+
+    .offset-sm-2 {
+        margin-left: 16.66666666% !important
+    }
+
+    .offset-sm-3 {
+        margin-left: 24.99999999% !important
+    }
+
+    .offset-sm-4 {
+        margin-left: 33.33333332% !important
+    }
+
+    .offset-sm-5 {
+        margin-left: 41.66666665% !important
+    }
+
+    .offset-sm-6 {
+        margin-left: 49.99999998% !important
+    }
+
+    .offset-sm-7 {
+        margin-left: 58.33333331% !important
+    }
+
+    .offset-sm-8 {
+        margin-left: 66.66666664% !important
+    }
+
+    .offset-sm-9 {
+        margin-left: 74.99999997% !important
+    }
+
+    .offset-sm-10 {
+        margin-left: 83.3333333% !important
+    }
+
+    .offset-sm-11 {
+        margin-left: 91.66666663% !important
+    }
+}
+
+@media(min-width: 768px) {
+    .offset-md-1 {
+        margin-left: 8.33333333% !important
+    }
+
+    .offset-md-2 {
+        margin-left: 16.66666666% !important
+    }
+
+    .offset-md-3 {
+        margin-left: 24.99999999% !important
+    }
+
+    .offset-md-4 {
+        margin-left: 33.33333332% !important
+    }
+
+    .offset-md-5 {
+        margin-left: 41.66666665% !important
+    }
+
+    .offset-md-6 {
+        margin-left: 49.99999998% !important
+    }
+
+    .offset-md-7 {
+        margin-left: 58.33333331% !important
+    }
+
+    .offset-md-8 {
+        margin-left: 66.66666664% !important
+    }
+
+    .offset-md-9 {
+        margin-left: 74.99999997% !important
+    }
+
+    .offset-md-10 {
+        margin-left: 83.3333333% !important
+    }
+
+    .offset-md-11 {
+        margin-left: 91.66666663% !important
+    }
+}
+
+@media(min-width: 1012px) {
+    .offset-lg-1 {
+        margin-left: 8.33333333% !important
+    }
+
+    .offset-lg-2 {
+        margin-left: 16.66666666% !important
+    }
+
+    .offset-lg-3 {
+        margin-left: 24.99999999% !important
+    }
+
+    .offset-lg-4 {
+        margin-left: 33.33333332% !important
+    }
+
+    .offset-lg-5 {
+        margin-left: 41.66666665% !important
+    }
+
+    .offset-lg-6 {
+        margin-left: 49.99999998% !important
+    }
+
+    .offset-lg-7 {
+        margin-left: 58.33333331% !important
+    }
+
+    .offset-lg-8 {
+        margin-left: 66.66666664% !important
+    }
+
+    .offset-lg-9 {
+        margin-left: 74.99999997% !important
+    }
+
+    .offset-lg-10 {
+        margin-left: 83.3333333% !important
+    }
+
+    .offset-lg-11 {
+        margin-left: 91.66666663% !important
+    }
+}
+
+@media(min-width: 1280px) {
+    .offset-xl-1 {
+        margin-left: 8.33333333% !important
+    }
+
+    .offset-xl-2 {
+        margin-left: 16.66666666% !important
+    }
+
+    .offset-xl-3 {
+        margin-left: 24.99999999% !important
+    }
+
+    .offset-xl-4 {
+        margin-left: 33.33333332% !important
+    }
+
+    .offset-xl-5 {
+        margin-left: 41.66666665% !important
+    }
+
+    .offset-xl-6 {
+        margin-left: 49.99999998% !important
+    }
+
+    .offset-xl-7 {
+        margin-left: 58.33333331% !important
+    }
+
+    .offset-xl-8 {
+        margin-left: 66.66666664% !important
+    }
+
+    .offset-xl-9 {
+        margin-left: 74.99999997% !important
+    }
+
+    .offset-xl-10 {
+        margin-left: 83.3333333% !important
+    }
+
+    .offset-xl-11 {
+        margin-left: 91.66666663% !important
+    }
+}
+
+:root {
+    --Layout-pane-width: 220px;
+    --Layout-content-width: 100%;
+    --Layout-template-columns: 1fr var(--Layout-pane-width);
+    --Layout-template-areas: "content pane";
+    --Layout-column-gap: 16px;
+    --Layout-row-gap: 16px;
+    --Layout-outer-spacing-x: 0px;
+    --Layout-outer-spacing-y: 0px;
+    --Layout-inner-spacing-min: 0px;
+    --Layout-inner-spacing-max: 0px
+}
+
+.PageLayout {
+    display: block;
+    margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x)
+}
+
+@media(min-width: 768px) {
+    .PageLayout.PageLayout--panePos-start {
+        --Layout-template-columns: var(--Layout-pane-width) minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
+        --Layout-template-areas: "pane content"
+    }
+
+    .PageLayout.PageLayout--panePos-end {
+        --Layout-template-columns: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap))) var(--Layout-pane-width);
+        --Layout-template-areas: "content pane"
+    }
+
+    .PageLayout .PageLayout-header--hasDivider {
+        padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+        border-bottom: 1px solid var(--color-border-default)
+    }
+
+    .PageLayout .PageLayout-footer--hasDivider {
+        padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+        border-top: 1px solid var(--color-border-default)
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start .PageLayout-pane {
+        border-right: 1px solid var(--color-border-default)
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-pane {
+        padding-right: calc(var(--Layout-column-gap) - 1px);
+        margin-right: calc(var(--Layout-column-gap)*-1)
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-content {
+        margin-left: var(--Layout-column-gap)
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end .PageLayout-pane {
+        border-left: 1px solid var(--color-border-default)
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-pane {
+        padding-left: calc(var(--Layout-column-gap) - 1px);
+        margin-left: calc(var(--Layout-column-gap)*-1)
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-content {
+        margin-right: var(--Layout-column-gap)
+    }
+
+    .PageLayout .PageLayout-pane--sticky {
+        position: sticky;
+        top: 0;
+        max-height: 100vh;
+        overflow: auto;
+        scrollbar-width: thin
+    }
+
+    @supports(max-height: 100dvh) {
+        .PageLayout .PageLayout-pane--sticky {
+            max-height: 100dvh
+        }
+    }
+
+    .PageLayout [class^=PageLayout-content-centered-] {
+        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+        margin-right: auto;
+        margin-left: auto
+    }
+
+    .PageLayout.PageLayout--hasPaneDivider [class^=PageLayout-content-centered-] {
+        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap)*2)
+    }
+
+    .PageLayout.PageLayout--panePos-start [class^=PageLayout-content-centered-]>[class^=container-] {
+        margin-left: 0
+    }
+
+    .PageLayout.PageLayout--panePos-end [class^=PageLayout-content-centered-]>[class^=container-] {
+        margin-right: 0
+    }
+
+    .PageLayout .PageLayout-content-centered-sm {
+        --Layout-content-width: 544px
+    }
+
+    .PageLayout .PageLayout-content-centered-md {
+        --Layout-content-width: 768px
+    }
+
+    .PageLayout .PageLayout-content-centered-lg {
+        --Layout-content-width: 1012px
+    }
+
+    .PageLayout .PageLayout-content-centered-xl {
+        --Layout-content-width: 1280px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 544px) {
+    .PageLayout {
+        --Layout-pane-width: 220px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 768px) {
+    .PageLayout {
+        --Layout-pane-width: 256px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 1012px) {
+    .PageLayout {
+        --Layout-pane-width: 296px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 768px) {
+    .PageLayout.PageLayout--paneWidth-narrow {
+        --Layout-pane-width: 240px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 1012px) {
+    .PageLayout.PageLayout--paneWidth-narrow {
+        --Layout-pane-width: 256px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 1012px) {
+    .PageLayout.PageLayout--paneWidth-wide {
+        --Layout-pane-width: 320px
+    }
+}
+
+@media(min-width: 768px)and (min-width: 1280px) {
+    .PageLayout.PageLayout--paneWidth-wide {
+        --Layout-pane-width: 336px
+    }
+}
+
+@media(max-width: 767.98px) {
+    .PageLayout.PageLayout--responsive-stackRegions {
+        --Layout-template-columns: 1fr;
+        --Layout-template-areas: "content" "pane"
+    }
+
+    .PageLayout.PageLayout--responsive-stackRegions.PageLayout--responsive-panePos-start {
+        --Layout-template-areas: "pane" "content"
+    }
+
+    .PageLayout.PageLayout--responsive-separateRegions {
+        --Layout-template-columns: 1fr;
+        --Layout-template-areas: "content"
+    }
+
+    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content {
+        --Layout-template-areas: "content"
+    }
+
+    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content .PageLayout-pane {
+        display: none
+    }
+
+    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane {
+        --Layout-template-areas: "pane"
+    }
+
+    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane .PageLayout-content {
+        display: none
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-line-before {
+        position: relative;
+        margin-top: var(--Layout-row-gap)
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-line-before::before {
+        position: absolute;
+        left: calc(var(--Layout-outer-spacing-x)*-1);
+        display: block;
+        width: calc(100% + var(--Layout-outer-spacing-x)*2);
+        height: 1px;
+        content: "";
+        background-color: var(--color-border-default);
+        top: calc(-1px - var(--Layout-row-gap))
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-line-after {
+        position: relative;
+        margin-bottom: var(--Layout-row-gap)
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-line-after::after {
+        position: absolute;
+        left: calc(var(--Layout-outer-spacing-x)*-1);
+        display: block;
+        width: calc(100% + var(--Layout-outer-spacing-x)*2);
+        height: 1px;
+        content: "";
+        background-color: var(--color-border-default);
+        bottom: calc(-1px - var(--Layout-row-gap))
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-filled-before {
+        position: relative;
+        margin-top: calc(8px + var(--Layout-row-gap))
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-filled-before::after {
+        position: absolute;
+        bottom: calc(8px * -1);
+        left: calc(var(--Layout-outer-spacing-x)*-1);
+        display: block;
+        width: calc(100% + var(--Layout-outer-spacing-x)*2);
+        height: 8px;
+        content: "";
+        background-color: var(--color-canvas-inset);
+        box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
+        top: calc(-8px - var(--Layout-row-gap))
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-filled-after {
+        position: relative;
+        margin-bottom: calc(8px + var(--Layout-row-gap))
+    }
+
+    .PageLayout .PageLayout-region--dividerNarrow-filled-after::before {
+        position: absolute;
+        bottom: calc(8px * -1);
+        left: calc(var(--Layout-outer-spacing-x)*-1);
+        display: block;
+        width: calc(100% + var(--Layout-outer-spacing-x)*2);
+        height: 8px;
+        content: "";
+        background-color: var(--color-canvas-inset);
+        box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
+        bottom: calc(-8px - var(--Layout-row-gap))
+    }
+}
+
+.PageLayout-wrapper {
+    display: grid;
+    grid: auto-flow/1fr;
+    row-gap: var(--Layout-row-gap)
+}
+
+.PageLayout-columns {
+    display: grid;
+    column-gap: var(--Layout-column-gap);
+    row-gap: var(--Layout-row-gap);
+    grid-template-columns: var(--Layout-template-columns);
+    grid-template-rows: 1fr;
+    grid-template-areas: var(--Layout-template-areas)
+}
+
+.PageLayout-columns .PageLayout-content {
+    padding-right: var(--Layout-inner-spacing-max);
+    padding-left: var(--Layout-inner-spacing-max);
+    grid-area: content
+}
+
+.PageLayout-columns .PageLayout-pane {
+    grid-area: pane
+}
+
+.PageLayout--outerSpacing-normal {
+    --Layout-outer-spacing-x: 16px;
+    --Layout-outer-spacing-y: 16px
+}
+
+@media(min-width: 1012px) {
+    .PageLayout--outerSpacing-normal {
+        --Layout-outer-spacing-x: 24px;
+        --Layout-outer-spacing-y: 24px
+    }
+}
+
+.PageLayout--outerSpacing-condensed {
+    --Layout-outer-spacing-x: 16px;
+    --Layout-outer-spacing-y: 16px
+}
+
+.PageLayout--innerSpacing-normal {
+    --Layout-inner-spacing-min: 16px;
+    --Layout-inner-spacing-max: 16px
+}
+
+@media(min-width: 1012px) {
+    .PageLayout--innerSpacing-normal {
+        --Layout-inner-spacing-max: 24px
+    }
+}
+
+.PageLayout--innerSpacing-condensed {
+    --Layout-inner-spacing-min: 16px;
+    --Layout-inner-spacing-max: 16px
+}
+
+.PageLayout--columnGap-normal {
+    --Layout-column-gap: 16px
+}
+
+@media(min-width: 1012px) {
+    .PageLayout--columnGap-normal {
+        --Layout-column-gap: 24px
+    }
+}
+
+.PageLayout--columnGap-condensed {
+    --Layout-column-gap: 16px
+}
+
+.PageLayout--columnGap-none {
+    --Layout-column-gap: 0px
+}
+
+.PageLayout--rowGap-normal {
+    --Layout-row-gap: 16px
+}
+
+@media(min-width: 1012px) {
+    .PageLayout--rowGap-normal {
+        --Layout-row-gap: 24px
+    }
+}
+
+.PageLayout--rowGap-none {
+    --Layout-row-gap: 0px
+}
+
+.PageLayout--rowGap-condensed {
+    --Layout-row-gap: 16px
+}
+
+.PageLayout-header,
+.PageLayout-content,
+.PageLayout-pane,
+.PageLayout-footer {
+    padding: var(--Layout-inner-spacing-min)
+}
+
+.Stack {
+    --Stack-gap-whenRegular: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
+    --Stack-divider-color: var(--color-border-default);
+    display: flex;
+    flex-flow: column;
+    align-items: stretch;
+    align-content: flex-start;
+    gap: var(--Stack-gap-whenRegular)
+}
+
+@media(max-width: 767.98px) {
+    .Stack {
+        gap: var(--Stack-gap-whenNarrow)
+    }
+}
+
+@media(min-width: 1400px) {
+    .Stack {
+        gap: var(--Stack-gap-whenWide)
+    }
+}
+
+.Stack-divider {
+    display: none;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    align-self: stretch
+}
+
+.Stack-item {
+    flex: 0 1 auto;
+    min-inline-size: 0
+}
+
+@media(max-width: 767.98px) {
+    .Stack--dir-inline-whenNarrow {
+        flex-flow: row
+    }
+
+    .Stack--dir-block-whenNarrow {
+        flex-flow: column
+    }
+
+    .Stack--gap-none-whenNarrow {
+        --Stack-gap-whenNarrow: 0
+    }
+
+    .Stack--gap-condensed-whenNarrow {
+        --Stack-gap-whenNarrow: var(--primer-stack-gap-condensed, 8px)
+    }
+
+    .Stack--gap-normal-whenNarrow {
+        --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px)
+    }
+
+    .Stack--align-start-whenNarrow {
+        align-items: flex-start
+    }
+
+    .Stack--align-center-whenNarrow {
+        align-items: center
+    }
+
+    .Stack--align-end-whenNarrow {
+        align-items: flex-end
+    }
+
+    .Stack--align-baseline-whenNarrow {
+        align-items: baseline
+    }
+
+    .Stack--alignWrap-start-whenNarrow {
+        align-content: flex-start
+    }
+
+    .Stack--alignWrap-center-whenNarrow {
+        align-content: center
+    }
+
+    .Stack--alignWrap-end-whenNarrow {
+        align-content: flex-end
+    }
+
+    .Stack--alignWrap-distribute-whenNarrow {
+        align-content: space-between
+    }
+
+    .Stack--alignWrap-distributeEvenly-whenNarrow {
+        align-content: space-evenly
+    }
+
+    .Stack--spread-start-whenNarrow {
+        justify-content: flex-start
+    }
+
+    .Stack--spread-center-whenNarrow {
+        justify-content: center
+    }
+
+    .Stack--spread-end-whenNarrow {
+        justify-content: flex-end
+    }
+
+    .Stack--spread-distribute-whenNarrow {
+        justify-content: space-between
+    }
+
+    .Stack--spread-distributeEvenly-whenNarrow {
+        justify-content: space-evenly
+    }
+
+    .Stack--wrap-whenNarrow {
+        flex-wrap: wrap
+    }
+
+    .Stack--nowrap-whenNarrow {
+        flex-wrap: nowrap
+    }
+
+    .Stack--showDividers-whenNarrow>.Stack-divider,
+    .Stack--showDividers-whenNarrow>.Stack-item>.Stack-divider {
+        display: block
+    }
+
+    :not(.Stack--dir-inline-whenNarrow)>.Stack-divider,
+    :not(.Stack--dir-inline-whenNarrow)>.Stack-item>.Stack-divider {
+        border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+        inline-size: auto;
+        block-size: 0
+    }
+
+    .Stack--dir-inline-whenNarrow>.Stack-divider,
+    .Stack--dir-inline-whenNarrow>.Stack-item>.Stack-divider {
+        border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+        inline-size: 0;
+        block-size: auto
+    }
+
+    .Stack-item--expand-whenNarrow {
+        flex-grow: 1
+    }
+
+    .Stack-item--keepSize-whenNarrow {
+        flex-shrink: 0
+    }
+}
+
+@media(min-width: 768px) {
+    .Stack--dir-inline-whenRegular {
+        flex-flow: row
+    }
+
+    .Stack--dir-block-whenRegular {
+        flex-flow: column
+    }
+
+    .Stack--gap-none-whenRegular {
+        --Stack-gap-whenRegular: 0
+    }
+
+    .Stack--gap-condensed-whenRegular {
+        --Stack-gap-whenRegular: var(--primer-stack-gap-condensed, 8px)
+    }
+
+    .Stack--gap-normal-whenRegular {
+        --Stack-gap-whenRegular: var(--primer-stack-gap-normal, 16px)
+    }
+
+    .Stack--gap-spacious-whenRegular {
+        --Stack-gap-whenRegular: var(--primer-stack-gap-spacious, 24px)
+    }
+
+    .Stack--align-start-whenRegular {
+        align-items: flex-start
+    }
+
+    .Stack--align-center-whenRegular {
+        align-items: center
+    }
+
+    .Stack--align-end-whenRegular {
+        align-items: flex-end
+    }
+
+    .Stack--align-baseline-whenRegular {
+        align-items: baseline
+    }
+
+    .Stack--alignWrap-start-whenRegular {
+        align-content: flex-start
+    }
+
+    .Stack--alignWrap-center-whenRegular {
+        align-content: center
+    }
+
+    .Stack--alignWrap-end-whenRegular {
+        align-content: flex-end
+    }
+
+    .Stack--alignWrap-distribute-whenRegular {
+        align-content: space-between
+    }
+
+    .Stack--alignWrap-distributeEvenly-whenRegular {
+        align-content: space-evenly
+    }
+
+    .Stack--spread-start-whenRegular {
+        justify-content: flex-start
+    }
+
+    .Stack--spread-center-whenRegular {
+        justify-content: center
+    }
+
+    .Stack--spread-end-whenRegular {
+        justify-content: flex-end
+    }
+
+    .Stack--spread-distribute-whenRegular {
+        justify-content: space-between
+    }
+
+    .Stack--spread-distributeEvenly-whenRegular {
+        justify-content: space-evenly
+    }
+
+    .Stack--wrap-whenRegular {
+        flex-wrap: wrap
+    }
+
+    .Stack--nowrap-whenRegular {
+        flex-wrap: nowrap
+    }
+
+    .Stack--showDividers-whenRegular>.Stack-divider,
+    .Stack--showDividers-whenRegular>.Stack-item>.Stack-divider {
+        display: block
+    }
+
+    :not(.Stack--dir-inline-whenRegular)>.Stack-divider,
+    :not(.Stack--dir-inline-whenRegular)>.Stack-item>.Stack-divider {
+        border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+        inline-size: auto;
+        block-size: 0
+    }
+
+    .Stack--dir-inline-whenRegular>.Stack-divider,
+    .Stack--dir-inline-whenRegular>.Stack-item>.Stack-divider {
+        border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+        inline-size: 0;
+        block-size: auto
+    }
+
+    .Stack-item--expand-whenRegular {
+        flex-grow: 1
+    }
+
+    .Stack-item--keepSize-whenRegular {
+        flex-shrink: 0
+    }
+}
+
+@media(min-width: 1400px) {
+    .Stack--dir-inline-whenWide {
+        flex-flow: row
+    }
+
+    .Stack--dir-block-whenWide {
+        flex-flow: column
+    }
+
+    .Stack--gap-none-whenWide {
+        --Stack-gap-whenWide: 0
+    }
+
+    .Stack--gap-condensed-whenWide {
+        --Stack-gap-whenWide: var(--primer-stack-gap-condensed, 8px)
+    }
+
+    .Stack--gap-normal-whenWide {
+        --Stack-gap-whenWide: var(--primer-stack-gap-normal, 16px)
+    }
+
+    .Stack--gap-spacious-whenWide {
+        --Stack-gap-whenWide: var(--primer-stack-gap-spacious, 24px)
+    }
+
+    .Stack--align-start-whenWide {
+        align-items: flex-start
+    }
+
+    .Stack--align-center-whenWide {
+        align-items: center
+    }
+
+    .Stack--align-end-whenWide {
+        align-items: flex-end
+    }
+
+    .Stack--align-baseline-whenWide {
+        align-items: baseline
+    }
+
+    .Stack--alignWrap-start-whenWide {
+        align-content: flex-start
+    }
+
+    .Stack--alignWrap-center-whenWide {
+        align-content: center
+    }
+
+    .Stack--alignWrap-end-whenWide {
+        align-content: flex-end
+    }
+
+    .Stack--alignWrap-distribute-whenWide {
+        align-content: space-between
+    }
+
+    .Stack--alignWrap-distributeEvenly-whenWide {
+        align-content: space-evenly
+    }
+
+    .Stack--spread-start-whenWide {
+        justify-content: flex-start
+    }
+
+    .Stack--spread-center-whenWide {
+        justify-content: center
+    }
+
+    .Stack--spread-end-whenWide {
+        justify-content: flex-end
+    }
+
+    .Stack--spread-distribute-whenWide {
+        justify-content: space-between
+    }
+
+    .Stack--spread-distributeEvenly-whenWide {
+        justify-content: space-evenly
+    }
+
+    .Stack--wrap-whenWide {
+        flex-wrap: wrap
+    }
+
+    .Stack--nowrap-whenWide {
+        flex-wrap: nowrap
+    }
+
+    .Stack--showDividers-whenWide>.Stack-divider,
+    .Stack--showDividers-whenWide>.Stack-item>.Stack-divider {
+        display: block
+    }
+
+    :not(.Stack--dir-inline-whenWide)>.Stack-divider,
+    :not(.Stack--dir-inline-whenWide)>.Stack-item>.Stack-divider {
+        border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+        inline-size: auto;
+        block-size: 0
+    }
+
+    .Stack--dir-inline-whenWide>.Stack-divider,
+    .Stack--dir-inline-whenWide>.Stack-item>.Stack-divider {
+        border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+        inline-size: 0;
+        block-size: auto
+    }
+
+    .Stack-item--expand-whenWide {
+        flex-grow: 1
+    }
+
+    .Stack-item--keepSize-whenWide {
+        flex-shrink: 0
+    }
+}