@ebay/skin 17.5.0 → 18.0.0-next.0

package/dist/confirm-dialog/confirm-dialog.css

@@ -1,115 +1,128 @@
 :root {
-  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
-  --dialog-lightbox-max-width: 616px;
+    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-lightbox-max-width: 616px;
 }
 .confirm-dialog[role="dialog"] {
-  background-color: var(--dialog-scrim-color-show);
-  bottom: 0;
-  left: 0;
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  will-change: background-color;
-  z-index: 100000;
-  align-items: flex-start;
-  justify-content: center;
+    background-color: var(--dialog-scrim-color-show);
+    bottom: 0;
+    left: 0;
+    -webkit-overflow-scrolling: touch;
+    align-items: flex-start;
+    justify-content: center;
+    overflow-y: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+    will-change: background-color;
+    z-index: 100000;
 }
 .confirm-dialog[role="dialog"]:not([hidden]) {
-  display: flex;
+    display: flex;
 }
+
 .confirm-dialog__window {
-  background-color: var(--dialog-window-background-color, var(--color-background-primary));
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: column;
-  min-height: 55px;
-  will-change: opacity, transform;
-  border-radius: var(--lightbox-border-radius, var(--border-radius-150));
-  margin: auto auto 16px;
-  max-height: 90%;
-  max-width: calc(100% - 32px);
-  min-width: 208px;
-  margin-left: var(--spacing-200);
-  margin-right: var(--spacing-200);
-  padding: var(--spacing-200);
-  text-align: center;
-}
+    background-color: var(
+        --dialog-window-background-color,
+        var(--color-background-primary)
+    );
+    border-radius: var(--lightbox-border-radius, var(--border-radius-150));
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    margin: auto auto 16px;
+    margin-left: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    max-height: 90%;
+    max-width: calc(100% - 32px);
+    min-height: 55px;
+    min-width: 208px;
+    padding: var(--spacing-200);
+    text-align: center;
+    will-change: opacity, transform;
+}
+
 .confirm-dialog__title {
-  font-size: var(--font-size-large-1);
-  font-weight: var(--font-weight-bold);
-  line-height: 28px;
-  margin: 0;
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-bold);
+    line-height: 28px;
+    margin: 0;
 }
+
 .confirm-dialog__main {
-  margin: var(--spacing-200) 0;
-  min-height: var(--spacing-200);
+    margin: var(--spacing-200) 0;
+    min-height: var(--spacing-200);
 }
 .confirm-dialog__main > :first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 .confirm-dialog__main > :last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
+
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
-  margin-left: var(--spacing-100);
+    margin-left: var(--spacing-100);
 }
-.confirm-dialog--show.confirm-dialog--mask-fade,
-.confirm-dialog--hide.confirm-dialog--mask-fade {
-  transition: background-color 0.16s ease-out;
+
+.confirm-dialog--hide.confirm-dialog--mask-fade,
+.confirm-dialog--show.confirm-dialog--mask-fade {
+    transition: background-color 0.16s ease-out;
 }
-.confirm-dialog--show.confirm-dialog--mask-fade-slow,
-.confirm-dialog--hide.confirm-dialog--mask-fade-slow {
-  transition: background-color 0.32s ease-out;
+.confirm-dialog--hide.confirm-dialog--mask-fade-slow,
+.confirm-dialog--show.confirm-dialog--mask-fade-slow {
+    transition: background-color 0.32s ease-out;
 }
-.confirm-dialog--show .confirm-dialog__window--fade,
-.confirm-dialog--hide .confirm-dialog__window--fade {
-  transition: opacity 0.16s ease-out;
+.confirm-dialog--hide .confirm-dialog__window--fade,
+.confirm-dialog--show .confirm-dialog__window--fade {
+    transition: opacity 0.16s ease-out;
 }
+
 .confirm-dialog--hide.confirm-dialog--hide,
 .confirm-dialog--hide.confirm-dialog--show-init,
 .confirm-dialog--show-init.confirm-dialog--hide,
 .confirm-dialog--show-init.confirm-dialog--show-init {
-  display: flex;
+    display: flex;
 }
 .confirm-dialog--hide.confirm-dialog--mask-fade,
-.confirm-dialog--show-init.confirm-dialog--mask-fade,
 .confirm-dialog--hide.confirm-dialog--mask-fade-slow,
+.confirm-dialog--show-init.confirm-dialog--mask-fade,
 .confirm-dialog--show-init.confirm-dialog--mask-fade-slow {
-  background-color: var(--dialog-scrim-color-hide);
+    background-color: var(--dialog-scrim-color-hide);
 }
 .confirm-dialog--hide .confirm-dialog__window--fade,
 .confirm-dialog--show-init .confirm-dialog__window--fade {
-  opacity: 0;
+    opacity: 0;
 }
-.confirm-dialog--show.confirm-dialog--show,
-.confirm-dialog--show.confirm-dialog--hide-init,
+
+.confirm-dialog--hide-init.confirm-dialog--hide-init,
 .confirm-dialog--hide-init.confirm-dialog--show,
-.confirm-dialog--hide-init.confirm-dialog--hide-init {
-  display: flex;
+.confirm-dialog--show.confirm-dialog--hide-init,
+.confirm-dialog--show.confirm-dialog--show {
+    display: flex;
 }
-.confirm-dialog--show.confirm-dialog--mask-fade,
 .confirm-dialog--hide-init.confirm-dialog--mask-fade,
-.confirm-dialog--show.confirm-dialog--mask-fade-slow,
-.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow {
-  background-color: var(--dialog-scrim-color-show);
+.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,
+.confirm-dialog--show.confirm-dialog--mask-fade,
+.confirm-dialog--show.confirm-dialog--mask-fade-slow {
+    background-color: var(--dialog-scrim-color-show);
 }
-.confirm-dialog--show .confirm-dialog__window--fade,
-.confirm-dialog--hide-init .confirm-dialog__window--fade {
-  opacity: 1;
+.confirm-dialog--hide-init .confirm-dialog__window--fade,
+.confirm-dialog--show .confirm-dialog__window--fade {
+    opacity: 1;
 }
+
 @media (min-width: 768px) {
-  .confirm-dialog__window {
-    margin: auto;
-    border-radius: var(--lightbox-border-radius, var(--border-radius-100));
-    max-width: calc(88% - var(--spacing-400));
-  }
+    .confirm-dialog__window {
+        border-radius: var(--lightbox-border-radius, var(--border-radius-100));
+        margin: auto;
+        max-width: calc(88% - var(--spacing-400));
+    }
 }
 @media (min-width: 1024px) {
-  .confirm-dialog__window {
-    max-width: var(--dialog-lightbox-max-width);
-  }
+    .confirm-dialog__window {
+        max-width: var(--dialog-lightbox-max-width);
+    }
 }
+
+/*# sourceMappingURL=confirm-dialog.css.map */

package/dist/confirm-dialog/confirm-dialog.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_dialog-mixins.scss","confirm-dialog.css","../../src/sass/confirm-dialog/confirm-dialog.scss","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/public/_typography-mixins.scss"],"names":[],"mappings":"AAEA;EACI,6CAAA;EACA,+CAAA;EACA,iCAAA;ACMJ;ACNA;EFII,+CAAA;EACA,QAAA;EACA,MAAA;EACA,gCAAA;EAgBA,sBAAA;EACA,sBAAA;EAhBA,eAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA;EACA,4BAAA;EACA,cAAA;ACYJ;ADVI;EACI,YAAA;ACYR;;ACxBA;ECPQ,uFAAA;EAAA,qEAAA;EHoCJ,YAAA;EACA,aAAA;EACA,qBAAA;EASA,qBAAA;EErCA,8BAAA;EACA,+BAAA;EFqCA,cAAA;EACA,2BAAA;EAVA,eAAA;EAWA,eAAA;EEtCA,0BAAA;EACA,iBAAA;EF2BA,8BAAA;ACSJ;;ACjCA;EEaI,kCAAA;EACA,mCAAA;EACA,gBAAA;EFZA,QAAA;ADqCJ;;AClCA;EACI,2BAAA;EACA,6BAAA;ADqCJ;ACnCI;EACI,YAAA;ADqCR;AClCI;EACI,eAAA;ADoCR;;AChCA;EAEI,8BAAA;ADmCJ;;AC9BI;EACI,yCAAA;ADkCR;AC/BI;EACI,yCAAA;ADkCR;AC/BI;EACI,gCAAA;ADkCR;;AC5BI;EAEI,YAAA;ADgCR;AC7BI;EAEI,+CAAA;ADgCR;AC7BI;EACI,SAAA;ADgCR;;AC1BI;EAEI,YAAA;AD8BR;AC3BI;EAEI,+CAAA;AD8BR;AC3BI;EACI,SAAA;AD8BR;;AC1BA;EACI;IC1FI,qEAAA;IHsDJ,WAAA;IEuCI,wCAAA;ED6BN;AACF;AC1BA;EACI;IACI,0CAAA;ED4BN;AACF","file":"confirm-dialog.css"}

package/dist/cta-button/cta-button.css

@@ -1,110 +1,136 @@
 a.cta-btn {
-  border: 1px solid;
-  box-sizing: border-box;
-  font-family: inherit;
-  margin: 0;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: bottom;
-  background-color: var(--cta-btn-background-color, var(--color-background-primary));
-  border-color: currentColor;
-  border-radius: var(--cta-btn-border-radius, calc(40px / 2));
-  color: var(--cta-btn-foreground-color, var(--color-foreground-primary));
-  display: inline-block;
-  font-size: var(--font-size-default);
-  max-width: 100%;
-  padding: 9.5px 20px;
-}
-a.cta-btn--fixed-height {
-  height: 40px;
-}
+    background-color: var(
+        --cta-btn-background-color,
+        var(--color-background-primary)
+    );
+    border: 1px solid;
+    border-radius: var(--cta-btn-border-radius, 20px);
+    box-sizing: border-box;
+    color: var(--cta-btn-foreground-color, var(--color-foreground-primary));
+    display: inline-block;
+    font-family: inherit;
+    font-size: var(--font-size-default);
+    margin: 0;
+    max-width: 100%;
+    padding: 9.5px 20px;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: bottom;
+}
+a.cta-btn--fixed-height,
 a.cta-btn--truncated {
-  height: 40px;
-}
-a.cta-btn--truncated,
-a.cta-btn--truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    height: 40px;
 }
 a.cta-btn:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
+
 a.cta-btn:visited {
-  color: var(--cta-btn-visited-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --cta-btn-visited-foreground-color,
+        var(--color-foreground-primary)
+    );
 }
+
 a.cta-btn:focus,
 a.cta-btn:hover {
-  background-color: var(--cta-btn-hover-background-color, var(--color-foreground-primary));
-  border-color: var(--cta-btn-hover-border-color, var(--color-foreground-primary));
-  color: var(--cta-btn-hover-foreground-color, var(--color-background-primary));
-}
+    background-color: var(
+        --cta-btn-hover-background-color,
+        var(--color-foreground-primary)
+    );
+    border-color: var(
+        --cta-btn-hover-border-color,
+        var(--color-foreground-primary)
+    );
+    color: var(
+        --cta-btn-hover-foreground-color,
+        var(--color-background-primary)
+    );
+}
+
 a.cta-btn:not([href]),
 a.cta-btn[aria-disabled="true"] {
-  background-color: var(--cta-btn-disabled-background-color, var(--color-background-primary));
-  border-color: var(--cta-btn-disabled-border-color, var(--color-stroke-disabled));
-  color: var(--cta-btn-disabled-foreground-color, var(--color-foreground-disabled));
-}
+    background-color: var(
+        --cta-btn-disabled-background-color,
+        var(--color-background-primary)
+    );
+    border-color: var(
+        --cta-btn-disabled-border-color,
+        var(--color-stroke-disabled)
+    );
+    color: var(
+        --cta-btn-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
 a.cta-btn--fluid {
-  width: 100%;
+    width: 100%;
 }
+
 span.cta-btn__cell {
-  align-items: center;
-  display: flex;
-  width: 100%;
-  justify-content: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
 span.cta-btn__cell--fixed-height {
-  display: inline-flex;
+    display: inline-flex;
 }
 span.cta-btn__cell--fixed-height > svg {
-  align-self: baseline;
-  max-width: calc(100% - 32px);
+    align-self: baseline;
+    max-width: calc(100% - 32px);
 }
 span.cta-btn__cell--truncated {
-  display: inline-flex;
+    display: inline-flex;
 }
 span.cta-btn__cell--truncated > svg {
-  align-self: baseline;
-  max-width: calc(100% - 32px);
+    align-self: baseline;
+    max-width: calc(100% - 32px);
 }
+
 a.cta-btn svg.icon {
-  align-self: center;
-  flex-shrink: 0;
-  height: 10px;
-  width: 10px;
+    align-self: center;
+    flex-shrink: 0;
+    height: 10px;
+    width: 10px;
 }
 a.cta-btn svg.icon:first-child {
-  -webkit-margin-end: 8px;
-          margin-inline-end: 8px;
+    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
 }
 a.cta-btn svg.icon:last-child {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
+    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
 }
 a.cta-btn svg.icon:only-child {
-  margin: 0;
+    margin: 0;
 }
+
 span.cta-btn__cell--fixed-height svg.icon {
-  align-self: center;
-  height: 1rem;
-  overflow: visible;
-  width: 1rem;
+    align-self: center;
+    height: 1rem;
+    overflow: visible;
+    width: 1rem;
 }
+
 a.cta-btn--truncated,
 a.cta-btn--truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    line-height: 1.4em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
 a.cta-btn--large {
-  border-radius: 24px;
-  display: inline-flex;
-  font-size: var(--font-size-medium);
-  min-height: 48px;
+    border-radius: 24px;
+    display: inline-flex;
+    font-size: var(--font-size-medium);
+    min-height: 48px;
 }
+
 [dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
-  transform: rotate(180deg);
+    transform: rotate(180deg);
 }
+
+/*# sourceMappingURL=cta-button.css.map */

package/dist/cta-button/cta-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/cta-button/cta-button.scss","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/private/_button-mixins.scss","cta-button.css"],"names":[],"mappings":"AAIA;ECFQ,iFAAA;EDUJ,gBAAA;EACA,gDAAA;EEAA,qBAAA;EDXI,sEAAA;EDiBJ,oBAAA;EELA,mBAAA;EFMA,kCAAA;EELA,QAAA;EFMA,cAAA;EACA,kBAAA;EENA,iBAAA;EACA,oBAAA;EACA,qBAAA;ACOJ;ADDI;EAGI,WAAA;ACIR;ADAI;EACI,YAAA;ACQR;;AHfA;ECvBQ,8EAAA;AE0CR;;AHZA;EC9BQ,uFAAA;EAAA,+EAAA;EAAA,4EAAA;AEiDR;;AHHA;EC9CQ,0FAAA;EAAA,+EAAA;EAAA,gFAAA;AEwDR;;AHMA;EACI,UAAA;AGHJ;;AHMA;EEWI,kBAAA;EACA,YAAA;EFPA,sBAAA;EEQA,UAAA;ACZJ;ADgBI;EAzBA,mBAAA;ACYJ;ADVI;EACI,mBAAA;EACA,2BAAA;ACYR;ADeI;EA/BA,mBAAA;ACmBJ;ADjBI;EACI,mBAAA;EACA,2BAAA;ACmBR;;AHPA;EEhCI,iBAAA;EFmCA,aAAA;EACA,WAAA;EACA,UAAA;AGSJ;AD5CI;EACI,sBAAA;UAAA,qBAAA;AC8CR;AD3CI;EACI,wBAAA;UAAA,uBAAA;AC6CR;AD1CI;EACI,QAAA;AC4CR;;AHfA;EACI,iBAAA;EACA,WAAA;EACA,gBAAA;EACA,UAAA;AGkBJ;;ADrCI;EAEI,iBAAA;EACA,eAAA;EACA,sBAAA;EACA,kBAAA;ACuCR;;AHlBA;EACI,kBEvFyB;EFwFzB,mBAAA;EACA,iCAAA;EACA,eEjGkB;ACsHtB;;AHlBA;EACI,wBAAA;AGqBJ","file":"cta-button.css"}

package/dist/date-textbox/date-textbox.css

@@ -1,28 +1,37 @@
 :root {
-  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
         0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .date-textbox {
-  --calendar-month-width: 311px;
+    --calendar-month-width: 311px;
 }
+
 .date-textbox > .textbox + .textbox {
-  margin-left: var(--spacing-100);
+    margin-left: var(--spacing-100);
 }
+
 .date-textbox__popover {
-  background-color: var(--calendar-background-color, var(--color-background-elevated));
-  border-radius: var(--spacing-200);
-  box-shadow: var(--bubble-shadow);
-  margin-left: calc(var(--spacing-100) * -1);
-  padding: var(--spacing-200);
-  position: absolute;
-  z-index: 1;
+    background-color: var(
+        --calendar-background-color,
+        var(--color-background-elevated)
+    );
+    border-radius: var(--spacing-200);
+    box-shadow: var(--bubble-shadow);
+    margin-left: calc(var(--spacing-100) * -1);
+    padding: var(--spacing-200);
+    position: absolute;
+    z-index: 1;
 }
+
 .date-textbox__popover[hidden] {
-  display: none;
+    display: none;
 }
+
 @media only screen and (max-width: 512px) {
-  .date-textbox__popover {
-    left: 0;
-    margin-left: 0;
-  }
+    .date-textbox__popover {
+        left: 0;
+        margin-left: 0;
+    }
 }
+
+/*# sourceMappingURL=date-textbox.css.map */

package/dist/date-textbox/date-textbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_bubble-mixins.scss","date-textbox.css","../../src/sass/date-textbox/date-textbox.scss","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAEA;EAKI,4EAAA;ACQJ;ACXA;EAEI,4BAAA;ADgBJ;;ACbA;EACI,8BAAA;ADgBJ;;ACbA;ECXQ,mFAAA;EDiBJ,gCAAA;EACA,+BAAA;EACA,uCAAA;EACA,0BAAA;EACA,iBAAA;EACA,SAAA;ADYJ;;ACTA;EACI,YAAA;ADYJ;;ACTA;EACI;IACI,MAAA;IACA,aAAA;EDYN;AACF","file":"date-textbox.css"}

package/dist/details/details.css

@@ -1,45 +1,52 @@
 summary.details__summary {
-  align-items: center;
-  box-sizing: border-box;
-  color: var(--details-summary-foreground-color, var(--color-foreground-accent));
-  display: inline-block;
-  list-style-position: inside;
-  list-style-type: none;
-  /* Remove details marker for non-webkit */
-  padding: 12px 8px;
-  width: 100%;
-  /* Remove details marker for non-webkit */
-}
-summary.details__summary::before {
-  content: none;
+    align-items: center;
+    box-sizing: border-box;
+    color: var(
+        --details-summary-foreground-color,
+        var(--color-foreground-accent)
+    );
+    display: inline-block;
+    list-style-position: inside;
+    list-style-type: none;
+    padding: 12px 8px;
+    width: 100%;
+}
+summary.details__summary:before {
+    content: none;
 }
 summary.details__summary::-webkit-details-marker {
-  display: none;
+    display: none;
 }
-summary.details__summary:hover,
-summary.details__summary:focus {
-  color: var(--color-state-accent-hover);
+summary.details__summary:focus,
+summary.details__summary:hover {
+    color: var(--color-state-accent-hover);
 }
+
 summary.details__summary--center {
-  text-align: center;
+    text-align: center;
 }
+
 summary.details__summary--small {
-  font-size: var(--font-size-small);
-  padding: 4px 8px;
+    font-size: var(--font-size-small);
+    padding: 4px 8px;
 }
+
 span.details__icon {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
+    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
 }
 span.details__icon[hidden] {
-  display: inline-block;
+    display: inline-block;
 }
+
 details.details[open] span.details__icon {
-  transform: rotate(180deg);
+    transform: rotate(180deg);
 }
-details.details[open] summary.details__summary::before {
-  content: none;
+details.details[open] summary.details__summary:before {
+    content: none;
 }
 details.details summary:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
+
+/*# sourceMappingURL=details.css.map */

package/dist/details/details.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/details/details.scss","../../src/sass/mixins/private/_token-mixins.scss","details.css"],"names":[],"mappings":"AAGA;EACI,kBAAA;EACA,qBAAA;ECHI,6EAAA;EDSJ,oBAAA;EACA,0BAAA;EACA,oBAAA;EACA,gBAAA;EACA,UAAA;AEEJ;AFAI;EACI,YAAA;AEER;AFEI;EACI,YAAA;AEAR;AFGI;EAEI,qCAAA;AEFR;;AFMA;EACI,iBAAA;AEHJ;;AFMA;EACI,gCAAA;EACA,eAAA;AEHJ;;AFMA;EACI,wBAAA;UAAA,uBAAA;AEHJ;AFOA;EACI,oBAAA;AEHJ;;AFOI;EACI,wBAAA;AEJR;AFOI;EACI,YAAA;AELR;AFUA;EACI,YAAA;AENJ","file":"details.css"}

package/dist/donut-chart/donut-chart.css

@@ -0,0 +1,91 @@
+:root {
+    --donut-chart-max-width: 600px;
+    --donut-chart-graph-size-sm: 140px;
+    --donut-chart-graph-size-lg: 210px;
+}
+
+.donut-chart {
+    container-name: donut-chart;
+    container-type: inline-size;
+    width: 100%;
+}
+
+.donut-chart__grid {
+    column-gap: var(--spacing-400);
+    display: grid;
+    grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-sm), 1fr);
+    grid-template-rows: auto 1fr auto;
+    max-width: var(--donut-chart-max-width);
+    row-gap: var(--spacing-200);
+    width: 100%;
+}
+
+.donut-chart__title {
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-bold);
+}
+
+.donut-chart__graph {
+    align-self: flex-end;
+    grid-column: 2;
+    grid-row: 1 / -1;
+    min-height: var(--donut-chart-graph-size-sm);
+    position: relative;
+    width: 100%;
+}
+
+.donut-chart__metric-value {
+    font-size: var(--font-size-giant-1);
+    font-weight: var(--font-weight-bold);
+}
+
+.donut-chart__metric-label {
+    font-size: var(--font-size-regular);
+}
+
+.donut-chart__legend {
+    align-self: flex-end;
+    grid-column: 1 / -1;
+}
+
+@container (width > 450px) {
+    .donut-chart__grid {
+        column-gap: var(--spacing-800);
+        grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-lg), 1fr);
+        row-gap: var(--spacing-250);
+    }
+    .donut-chart__legend {
+        grid-column: 1;
+        grid-row-end: -1;
+    }
+    .donut-chart__graph {
+        min-height: var(--donut-chart-graph-size-lg);
+    }
+    .donut-chart__legend-container {
+        margin-top: var(--spacing-100);
+    }
+}
+@supports not (container-type: inline-size) {
+    @media (min-width: 1024px) {
+        .donut-chart__grid {
+            column-gap: var(--spacing-800);
+            grid-template-columns: 1fr minmax(
+                    var(--donut-chart-graph-size-lg),
+                    1fr
+                );
+            row-gap: var(--spacing-250);
+        }
+        .donut-chart__legend {
+            grid-column: 1;
+            grid-row-end: -1;
+        }
+        .donut-chart__graph {
+            min-height: var(--donut-chart-graph-size-lg);
+        }
+        .donut-chart__legend-container {
+            margin-top: var(--spacing-100);
+        }
+    }
+}
+
+/*# sourceMappingURL=donut-chart.css.map */

package/dist/donut-chart/donut-chart.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/donut-chart/donut-chart.scss","donut-chart.css"],"names":[],"mappings":"AAEA;EACI,6BAAA;EACA,iCAAA;EACA,iCAAA;ACMJ;;ADHA;EACI,0BAAA;EACA,0BAAA;EACA,UAAA;ACMJ;;ADHA;EACI,6BAAA;EACA,YAAA;EACA,uEAAA;EACA,gCAAA;EACA,sCAAA;EACA,0BAAA;EACA,UAAA;ACMJ;;ADHA;EACI,iCAAA;EACA,mCAAA;ACMJ;;ADHA;EACI,mBAAA;EACA,aAAA;EACA,gBAAA;EACA,2CAAA;EACA,iBAAA;EACA,UAAA;ACMJ;;ADHA;EACI,kCAAA;EACA,mCAAA;ACMJ;;ADHA;EACI,kCAAA;ACMJ;;ADHA;EACI,mBAAA;EACA,mBAAA;ACMJ;;ADHA;EACI;IACI,6BAAA;IACA,uEAAA;IACA,0BAAA;ECMN;EDHE;IACI,aAAA;IACA,eAAA;ECKN;EDFE;IACI,2CAAA;ECIN;EDDE;IACI,6BAAA;ECGN;AACF;ADAA;EACI;IACI;MACI,6BAAA;MACA,uEAAA;MAIA,0BAAA;ICDR;IDII;MACI,aAAA;MACA,eAAA;ICFR;IDKI;MACI,2CAAA;ICHR;IDMI;MACI,6BAAA;ICJR;EACF;AACF","file":"donut-chart.css"}