@primer/view-components 0.45.2 → 0.46.0-rc.4285adec

package/app/components/primer/alpha/segmented_control.css

@@ -1,161 +1 @@
-/* SegmentedControl */
-
-.SegmentedControl {
-  --segmentedControl-item-padding: var(--control-small-paddingBlock);
-  --overlay-offset: 0.5rem;
-
-  display: inline-flex;
-  list-style: none;
-  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
-  border-color: var(--controlTrack-borderColor-rest, transparent);
-  border-radius: var(--borderRadius-medium);
-}
-
-.SegmentedControl--iconOnly .Button--iconOnly.Button--small,.SegmentedControl--iconOnly .Button--iconOnly.Button--medium {
-    width: 100%;
-    padding-inline: 0 !important;
-  }
-
-/* sizes */
-
-.SegmentedControl--small {
-  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
-}
-
-.SegmentedControl--small .SegmentedControl-item {
-    height: var(--control-small-size);
-  }
-
-:is(.SegmentedControl--small .SegmentedControl-item) .Button {
-      /* stylelint-disable-next-line primer/spacing */
-      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
-    }
-
-.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item {
-      width: var(--control-small-size);
-    }
-
-.SegmentedControl--medium .SegmentedControl-item {
-    height: var(--control-medium-size);
-  }
-
-.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item {
-      width: var(--control-medium-size);
-    }
-
-/* item */
-
-.SegmentedControl-item {
-  position: relative;
-  display: inline-flex;
-  height: var(--control-medium-size);
-  /* stylelint-disable-next-line primer/spacing */
-  padding: var(--segmentedControl-item-padding);
-  border: var(--borderWidth-thin) solid transparent;
-  border-radius: var(--borderRadius-medium);
-  justify-content: center;
-
-  /* button color overrides */
-}
-
-:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled) {
-      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
-    }
-
-:is(.SegmentedControl-item .Button--invisible):active:not(:disabled) {
-      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
-    }
-
-/* Selected ---------------------------------------- */
-
-.SegmentedControl-item.SegmentedControl-item--selected {
-    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));
-    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));
-  }
-
-.SegmentedControl-item.SegmentedControl-item--selected .Button {
-      font-weight: var(--base-text-weight-semibold);
-    }
-
-:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover {
-        background-color: transparent;
-      }
-
-.SegmentedControl-item.SegmentedControl-item--selected::before {
-      border-color: transparent !important;
-    }
-
-.SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before {
-      border-color: transparent;
-    }
-
-/* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
-
-.SegmentedControl-item .Button-label[data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: var(--base-text-weight-semibold);
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-/* Separator lines */
-
-.SegmentedControl-item:not(:first-child)::before {
-      position: absolute;
-      inset: 0 0 0 -1px;
-      /* stylelint-disable-next-line primer/spacing */
-      margin-top: var(--control-medium-paddingBlock);
-      /* stylelint-disable-next-line primer/spacing */
-      margin-bottom: var(--control-medium-paddingBlock);
-      content: '';
-      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
-    }
-
-/* Button ----------------------------------------- */
-
-.SegmentedControl-item .Button {
-    width: 100%;
-    min-width: fit-content;
-    height: 100%;
-    font-weight: var(--base-text-weight-normal);
-    border: 0;
-    /* stylelint-disable-next-line primer/borders */
-    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
-    /* stylelint-disable-next-line primer/spacing */
-    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
-  }
-
-:is(.SegmentedControl-item .Button):focus-visible {
-      /* stylelint-disable-next-line primer/borders */
-      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
-      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
-    }
-
-.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
-    color: var(--button-default-fgColor-rest);
-  }
-
-.SegmentedControl-item .Button-content {
-    flex: 1 1 auto;
-    align-self: stretch;
-  }
-
-/* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
-
-.SegmentedControl-item .Button-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-/* fullWidth */
-
-.SegmentedControl--fullWidth {
-  display: flex;
-}
-
-.SegmentedControl--fullWidth .SegmentedControl-item {
-    flex: 1;
-    justify-content: center;
-  }
+.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}:is(.SegmentedControl--small .SegmentedControl-item) .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}:is(.SegmentedControl-item .Button--invisible):active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}:is(.SegmentedControl-item .Button):focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}

package/app/components/primer/alpha/segmented_control.css.json

@@ -2,8 +2,8 @@
   "name": "alpha/segmented_control",
   "selectors": [
     ".SegmentedControl",
-    ".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
     ".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
     ".SegmentedControl--small",
     ".SegmentedControl--small .SegmentedControl-item",
     ":is(.SegmentedControl--small .SegmentedControl-item) .Button",
@@ -16,10 +16,10 @@
     ".SegmentedControl-item.SegmentedControl-item--selected",
     ".SegmentedControl-item.SegmentedControl-item--selected .Button",
     ":is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover",
-    ".SegmentedControl-item.SegmentedControl-item--selected::before",
-    ".SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before",
-    ".SegmentedControl-item .Button-label[data-content]::before",
-    ".SegmentedControl-item:not(:first-child)::before",
+    ".SegmentedControl-item.SegmentedControl-item--selected:before",
+    ".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
+    ".SegmentedControl-item .Button-label[data-content]:before",
+    ".SegmentedControl-item:not(:first-child):before",
     ".SegmentedControl-item .Button",
     ":is(.SegmentedControl-item .Button):focus-visible",
     ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",

package/app/components/primer/alpha/select_panel.css

@@ -1,10 +1 @@
-.SelectPanel-loadingPanel {
-  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
-}
-
-.SelectPanel-emptyPanel {
-  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
+.SelectPanel-loadingPanel{min-height:min(calc(var(--overlay-height) - 10rem),calc(100vh - 2rem))}.SelectPanel-emptyPanel{align-items:center;display:flex;justify-content:center;min-height:min(calc(var(--overlay-height) - 23rem),calc(100vh - 2rem))}

package/app/components/primer/alpha/skeleton_box.css

@@ -1,36 +1 @@
-@keyframes shimmer {
-  from {
-    mask-position: 200%;
-  }
-
-  to {
-    mask-position: 0%;
-  }
-}
-
-.SkeletonBox {
-  display: block;
-  height: 1rem;
-  background-color: var(--bgColor-muted);
-  border-radius: var(--borderRadius-small);
-  animation: shimmer;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-
-.SkeletonBox {
-    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
-    mask-size: 200%;
-    animation: shimmer;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-}
-  }
-
-@media (forced-colors: active) {
-
-.SkeletonBox {
-    outline: 1px solid transparent;
-    outline-offset: -1px;
-}
-  }
+@keyframes shimmer{0%{mask-position:200%}to{mask-position:0}}.SkeletonBox{animation:shimmer;background-color:var(--bgColor-muted);border-radius:var(--borderRadius-small);display:block;height:1rem}@media (prefers-reduced-motion:no-preference){.SkeletonBox{animation:shimmer;animation-duration:1s;animation-iteration-count:infinite;mask-image:linear-gradient(75deg,#000 30%,#000000a6 80%);mask-size:200%}}@media (forced-colors:active){.SkeletonBox{outline:1px solid #0000;outline-offset:-1px}}

package/app/components/primer/alpha/stack.css

@@ -1,255 +1 @@
-.Stack {
-  display: flex;
-  flex-flow: column;
-  align-items: stretch;
-  align-content: flex-start;
-  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
-
-  /* non-responsive values */
-}
-.Stack[data-padding='none'],.Stack[data-padding-narrow='none'] {
-    padding: 0;
-  }
-.Stack[data-padding='condensed'],.Stack[data-padding-narrow='condensed'] {
-    /* stylelint-disable-next-line primer/spacing */
-    padding: var(--stack-padding-condensed, 8px);
-  }
-.Stack[data-padding='normal'],.Stack[data-padding-narrow='normal'] {
-    /* stylelint-disable-next-line primer/spacing */
-    padding: var(--stack-padding-normal, 16px);
-  }
-.Stack[data-padding='spacious'],.Stack[data-padding-narrow='spacious'] {
-    /* stylelint-disable-next-line primer/spacing */
-    padding: var(--stack-padding-spacious, 24px);
-  }
-.Stack[data-direction='horizontal'],.Stack[data-direction-narrow='horizontal'] {
-    flex-flow: row;
-  }
-.Stack[data-direction='vertical'],.Stack[data-direction-narrow='vertical'] {
-    flex-flow: column;
-  }
-.Stack[data-gap='none'],.Stack[data-gap-narrow='none'] {
-    --stack-gap: var(--stack-gap-none, 0);
-  }
-.Stack[data-gap='condensed'],.Stack[data-gap-narrow='condensed'] {
-    --stack-gap: var(--stack-gap-condensed, 0.5rem);
-  }
-.Stack[data-gap='normal'],.Stack[data-gap-narrow='normal'] {
-    --stack-gap: var(--stack-gap-normal, 1rem);
-  }
-.Stack[data-gap='spacious'],.Stack[data-gap-narrow='spacious'] {
-    --stack-gap: var(--stack-gap-spacious, 1.5rem);
-  }
-.Stack[data-align='start'],.Stack[data-align-narrow='start'] {
-    align-items: flex-start;
-  }
-.Stack[data-align='center'],.Stack[data-align-narrow='center'] {
-    align-items: center;
-  }
-.Stack[data-align='end'],.Stack[data-align-narrow='end'] {
-    align-items: flex-end;
-  }
-.Stack[data-align='baseline'],.Stack[data-align-narrow='baseline'] {
-    align-items: baseline;
-  }
-.Stack[data-justify='start'],.Stack[data-justify-narrow='start'] {
-    justify-content: flex-start;
-  }
-.Stack[data-justify='center'],.Stack[data-justify-narrow='center'] {
-    justify-content: center;
-  }
-.Stack[data-justify='end'],.Stack[data-justify-narrow='end'] {
-    justify-content: flex-end;
-  }
-.Stack[data-justify='space-between'],.Stack[data-justify-narrow='space-between'] {
-    justify-content: space-between;
-  }
-.Stack[data-justify='space-evenly'],.Stack[data-justify-narrow='space-evenly'] {
-    justify-content: space-evenly;
-  }
-.Stack[data-wrap='wrap'],.Stack[data-wrap-narrow='wrap'] {
-    flex-wrap: wrap;
-  }
-.Stack[data-wrap='nowrap'],.Stack[data-wrap-narrow='nowrap'] {
-    flex-wrap: nowrap;
-  }
-
-/* @custom-media --veiwportRange-regular */
-@media (min-width: 48rem) {
-    .Stack[data-padding-regular='none'] {
-      padding: 0;
-    }
-
-    .Stack[data-padding-regular='condensed'] {
-      /* stylelint-disable-next-line primer/spacing */
-      padding: var(--stack-padding-condensed, 8px);
-    }
-
-    .Stack[data-padding-regular='normal'] {
-      /* stylelint-disable-next-line primer/spacing */
-      padding: var(--stack-padding-normal, 16px);
-    }
-
-    .Stack[data-padding-regular='spacious'] {
-      /* stylelint-disable-next-line primer/spacing */
-      padding: var(--stack-padding-spacious, 24px);
-    }
-
-    .Stack[data-direction-regular='horizontal'] {
-      flex-flow: row;
-    }
-
-    .Stack[data-direction-regular='vertical'] {
-      flex-flow: column;
-    }
-
-    .Stack[data-gap-regular='none'] {
-      --stack-gap: var(--stack-gap-none, 0);
-    }
-
-    .Stack[data-gap-regular='condensed'] {
-      --stack-gap: var(--stack-gap-condensed, 0.5rem);
-    }
-
-    .Stack[data-gap-regular='normal'] {
-      --stack-gap: var(--stack-gap-normal, 1rem);
-    }
-
-    .Stack[data-gap-regular='spacious'] {
-      --stack-gap: var(--stack-gap-spacious, 1.5rem);
-    }
-
-    .Stack[data-align-regular='start'] {
-      align-items: flex-start;
-    }
-
-    .Stack[data-align-regular='center'] {
-      align-items: center;
-    }
-
-    .Stack[data-align-regular='end'] {
-      align-items: flex-end;
-    }
-
-    .Stack[data-align-regular='baseline'] {
-      align-items: baseline;
-    }
-
-    .Stack[data-justify-regular='start'] {
-      justify-content: flex-start;
-    }
-
-    .Stack[data-justify-regular='center'] {
-      justify-content: center;
-    }
-
-    .Stack[data-justify-regular='end'] {
-      justify-content: flex-end;
-    }
-
-    .Stack[data-justify-regular='space-between'] {
-      justify-content: space-between;
-    }
-
-    .Stack[data-justify-regular='space-evenly'] {
-      justify-content: space-evenly;
-    }
-
-    .Stack[data-wrap-regular='wrap'] {
-      flex-wrap: wrap;
-    }
-
-    .Stack[data-wrap-regular='nowrap'] {
-      flex-wrap: nowrap;
-    }
-  }
-
-/* @custom-media --viewportRange-wide */
-@media (min-width: 87.5rem) {
-    .Stack[data-padding-wide='none'] {
-      padding: 0;
-    }
-
-    .Stack[data-padding-wide='condensed'] {
-      /* stylelint-disable-next-line primer/spacing */
-      padding: var(--stack-padding-condensed, 8px);
-    }
-
-    .Stack[data-padding-wide='normal'] {
-      /* stylelint-disable-next-line primer/spacing */
-      padding: var(--stack-padding-normal, 16px);
-    }
-
-    .Stack[data-padding-wide='spacious'] {
-      /* stylelint-disable-next-line primer/spacing */
-      padding: var(--stack-padding-spacious, 24px);
-    }
-
-    .Stack[data-direction-wide='horizontal'] {
-      flex-flow: row;
-    }
-
-    .Stack[data-direction-wide='vertical'] {
-      flex-flow: column;
-    }
-
-    .Stack[data-gap-wide='none'] {
-      --stack-gap: var(--stack-gap-none, 0);
-    }
-
-    .Stack[data-gap-wide='condensed'] {
-      --stack-gap: var(--stack-gap-condensed, 0.5rem);
-    }
-
-    .Stack[data-gap-wide='normal'] {
-      --stack-gap: var(--stack-gap-normal, 1rem);
-    }
-
-    .Stack[data-gap-wide='spacious'] {
-      --stack-gap: var(--stack-gap-spacious, 1.5rem);
-    }
-
-    .Stack[data-align-wide='start'] {
-      align-items: flex-start;
-    }
-
-    .Stack[data-align-wide='center'] {
-      align-items: center;
-    }
-
-    .Stack[data-align-wide='end'] {
-      align-items: flex-end;
-    }
-
-    .Stack[data-align-wide='baseline'] {
-      align-items: baseline;
-    }
-
-    .Stack[data-justify-wide='start'] {
-      justify-content: flex-start;
-    }
-
-    .Stack[data-justify-wide='center'] {
-      justify-content: center;
-    }
-
-    .Stack[data-justify-wide='end'] {
-      justify-content: flex-end;
-    }
-
-    .Stack[data-justify-wide='space-between'] {
-      justify-content: space-between;
-    }
-
-    .Stack[data-justify-wide='space-evenly'] {
-      justify-content: space-evenly;
-    }
-
-    .Stack[data-wrap-wide='wrap'] {
-      flex-wrap: wrap;
-    }
-
-    .Stack[data-wrap-wide='nowrap'] {
-      flex-wrap: nowrap;
-    }
-  }
+.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}