@ebay/skin 17.5.0 → 18.0.0

package/dist/panel-dialog/panel-dialog.css

@@ -1,47 +1,52 @@
 :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;
 }
 .panel-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;
-  flex-direction: column;
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
-  overflow-y: hidden;
+    background-color: var(--dialog-scrim-color-show);
+    bottom: 0;
+    left: 0;
+    -webkit-overflow-scrolling: touch;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-y: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    will-change: background-color;
+    z-index: 100000;
 }
 .panel-dialog[role="dialog"]:not([hidden]) {
-  display: flex;
+    display: flex;
 }
+
 .panel-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-right: 1px solid rgba(153, 153, 153, 0.18);
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  width: 100%;
-}
+    background-color: var(
+        --dialog-window-background-color,
+        var(--color-background-primary)
+    );
+    border-right: 1px solid rgba(153, 153, 153, 0.18);
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    min-height: 55px;
+    will-change: opacity, transform;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+    width: 100%;
+}
+
 .panel-dialog__window--end {
-  align-self: flex-end;
-  border-left: 1px solid rgba(153, 153, 153, 0.18);
+    align-self: flex-end;
+    border-left: 1px solid rgba(153, 153, 153, 0.18);
 }
+
 .panel-dialog__header {
-  display: flex;
-  flex-shrink: 0;
-  margin: var(--spacing-200) var(--spacing-200) 0;
-  position: relative;
+    display: flex;
+    flex-shrink: 0;
+    margin: var(--spacing-200) var(--spacing-200) 0;
+    position: relative;
 }
 .panel-dialog__header h1,
 .panel-dialog__header h2,
@@ -49,115 +54,127 @@
 .panel-dialog__header h4,
 .panel-dialog__header h5,
 .panel-dialog__header h6 {
-  align-self: center;
-  flex: 1 1 auto;
-  margin: 0;
-  overflow-wrap: anywhere;
+    align-self: center;
+    flex: 1 1 auto;
+    margin: 0;
+    overflow-wrap: anywhere;
 }
 .panel-dialog__header > :last-child:not(:only-child) {
-  -webkit-margin-start: var(--spacing-200);
-          margin-inline-start: var(--spacing-200);
+    -webkit-margin-start: var(--spacing-200);
+    margin-inline-start: var(--spacing-200);
 }
+
 .panel-dialog__header .fake-link {
-  align-self: flex-start;
-  outline-offset: 4px;
-  text-decoration: none;
+    align-self: flex-start;
+    outline-offset: 4px;
+    text-decoration: none;
 }
+
 .panel-dialog__main {
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  padding: var(--spacing-200);
-  position: relative;
-  height: 1px;
-  overflow-y: auto;
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    height: 1px;
+    overflow-y: auto;
+    padding: var(--spacing-200);
+    position: relative;
 }
 .panel-dialog__main > :first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 .panel-dialog__main > :last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
+
 .panel-dialog__footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--spacing-200);
-  position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--spacing-200);
+    position: relative;
 }
 .panel-dialog__footer > :not(:first-child) {
-  margin-top: var(--spacing-200);
+    margin-top: var(--spacing-200);
 }
 button.icon-btn.panel-dialog__close {
-  align-self: flex-start;
-  border: 0;
-  height: 32px;
-  min-width: 32px;
-  padding: 0;
-  position: relative;
-  width: 32px;
-  z-index: 1;
-}
+    align-self: flex-start;
+    border: 0;
+    height: 32px;
+    min-width: 32px;
+    padding: 0;
+    position: relative;
+    width: 32px;
+    z-index: 1;
+}
+
 .panel-dialog__title:not(:first-child) {
-  margin-left: var(--spacing-200);
+    margin-left: var(--spacing-200);
 }
-.panel-dialog--show.panel-dialog--mask-fade,
-.panel-dialog--hide.panel-dialog--mask-fade {
-  transition: background-color 0.16s ease-out;
+
+.panel-dialog--hide.panel-dialog--mask-fade,
+.panel-dialog--show.panel-dialog--mask-fade {
+    transition: background-color 0.16s ease-out;
 }
-.panel-dialog--show.panel-dialog--mask-fade-slow,
-.panel-dialog--hide.panel-dialog--mask-fade-slow {
-  transition: background-color 0.32s ease-out;
+.panel-dialog--hide.panel-dialog--mask-fade-slow,
+.panel-dialog--show.panel-dialog--mask-fade-slow {
+    transition: background-color 0.32s ease-out;
 }
-.panel-dialog--show .panel-dialog__window--slide,
-.panel-dialog--hide .panel-dialog__window--slide {
-  transition: transform 0.32s ease-out;
+.panel-dialog--hide .panel-dialog__window--slide,
+.panel-dialog--show .panel-dialog__window--slide {
+    transition: transform 0.32s ease-out;
 }
+
 .panel-dialog--hide.panel-dialog--hide,
 .panel-dialog--hide.panel-dialog--show-init,
 .panel-dialog--show-init.panel-dialog--hide,
 .panel-dialog--show-init.panel-dialog--show-init {
-  display: flex;
+    display: flex;
 }
 .panel-dialog--hide.panel-dialog--mask-fade,
-.panel-dialog--show-init.panel-dialog--mask-fade,
 .panel-dialog--hide.panel-dialog--mask-fade-slow,
+.panel-dialog--show-init.panel-dialog--mask-fade,
 .panel-dialog--show-init.panel-dialog--mask-fade-slow {
-  background-color: var(--dialog-scrim-color-hide);
+    background-color: var(--dialog-scrim-color-hide);
 }
 .panel-dialog--hide .panel-dialog__window--slide-left,
 .panel-dialog--show-init .panel-dialog__window--slide-left {
-  transform: translateX(-100%);
+    transform: translateX(-100%);
 }
 .panel-dialog--hide .panel-dialog__window--slide-right,
 .panel-dialog--show-init .panel-dialog__window--slide-right {
-  transform: translateX(100%);
+    transform: translateX(100%);
 }
+
 .panel-dialog--hide .panel-dialog__window--slide,
 .panel-dialog--show-init .panel-dialog__window--slide {
-  transform: translateX(-100%);
+    transform: translateX(-100%);
 }
+
 .panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,
-.panel-dialog--show-init .panel-dialog__window--end.panel-dialog__window--slide {
-  transform: translateX(100%);
+.panel-dialog--show-init
+    .panel-dialog__window--end.panel-dialog__window--slide {
+    transform: translateX(100%);
 }
-.panel-dialog--show.panel-dialog--show,
-.panel-dialog--show.panel-dialog--hide-init,
+
+.panel-dialog--hide-init.panel-dialog--hide-init,
 .panel-dialog--hide-init.panel-dialog--show,
-.panel-dialog--hide-init.panel-dialog--hide-init {
-  display: flex;
+.panel-dialog--show.panel-dialog--hide-init,
+.panel-dialog--show.panel-dialog--show {
+    display: flex;
 }
-.panel-dialog--show.panel-dialog--mask-fade,
 .panel-dialog--hide-init.panel-dialog--mask-fade,
-.panel-dialog--show.panel-dialog--mask-fade-slow,
-.panel-dialog--hide-init.panel-dialog--mask-fade-slow {
-  background-color: var(--dialog-scrim-color-show);
+.panel-dialog--hide-init.panel-dialog--mask-fade-slow,
+.panel-dialog--show.panel-dialog--mask-fade,
+.panel-dialog--show.panel-dialog--mask-fade-slow {
+    background-color: var(--dialog-scrim-color-show);
 }
-.panel-dialog--show .panel-dialog__window--slide,
-.panel-dialog--hide-init .panel-dialog__window--slide {
-  transform: translateX(0);
+.panel-dialog--hide-init .panel-dialog__window--slide,
+.panel-dialog--show .panel-dialog__window--slide {
+    transform: translateX(0);
 }
 @media (min-width: 512px) {
-  .panel-dialog__window {
-    width: 384px;
-  }
+    .panel-dialog__window {
+        width: 384px;
+    }
 }
+
+/*# sourceMappingURL=panel-dialog.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_dialog-mixins.scss","panel-dialog.css","../../src/sass/panel-dialog/panel-dialog.scss","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAEA;EACI,6CAAA;EACA,+CAAA;EACA,iCAAA;ACMJ;ACPA;EFKI,+CAAA;EACA,QAAA;EACA,MAAA;EACA,gCAAA;EELA,qBAAA;EFMA,eAAA;EEFA,iBAAA;EFGA,cAAA;EACA,OAAA;EACA,KAAA;EACA,4BAAA;EACA,cAAA;ACYJ;ADVI;EACI,YAAA;ACYR;;ACnBA;ECZQ,uFAAA;EDeJ,+CAAA;EFqBA,YAAA;EACA,aAAA;EACA,qBAAA;EACA,eAAA;EACA,8BAAA;EExBA,gCAAA;EACA,eAAA;EACA,UAAA;AD0BJ;;ACvBA;EACI,mBAAA;EACA,8CAAA;AD0BJ;;ACvBA;EFiCI,YAAA;EAEA,aAAA;EACA,8CAAA;EACA,iBAAA;ACNJ;ADQI;EAMI,iBAAA;EACA,aAAA;EACA,QAAA;EACA,sBAAA;ACNR;ADSI;EACI,uCAAA;UAAA,sCAAA;ACPR;;ACzCA;EACI,qBAAA;EACA,kBAAA;EACA,oBAAA;AD4CJ;;ACzCA;EF+CI,qBAAA;EACA,aAAA;EE7CA,UAAA;EACA,eAAA;EF6CA,0BAAA;EACA,iBAAA;ACAJ;ADEI;EACI,YAAA;ACAR;ADGI;EACI,eAAA;ACDR;;ACjDA;EFuDI,YAAA;EACA,qBAAA;EACA,sBAAA;EACA,0BAAA;EACA,iBAAA;ACFJ;ADII;EACI,6BAAA;ACFR;ACtDA;EACI,qBAAA;EACA,QAAA;EACA,WAAA;EACA,cAAA;EACA,SAAA;EACA,iBAAA;EACA,UAAA;EACA,SAAA;AD2DJ;;ACvDI;EACI,8BAAA;AD0DR;;ACpDI;EACI,yCAAA;ADwDR;ACrDI;EACI,yCAAA;ADwDR;ACrDI;EACI,kCAAA;ADwDR;;AClDI;EAEI,YAAA;ADsDR;ACnDI;EAEI,+CAAA;ADsDR;ACnDI;EACI,2BAAA;ADsDR;ACnDI;EACI,0BAAA;ADsDR;;AClDA;EAEI,2BAAA;ADqDJ;;AClDA;EAGI,0BAAA;ADoDJ;;AC/CI;EAEI,YAAA;ADmDR;AChDI;EAEI,+CAAA;ADmDR;AChDI;EACI,uBAAA;ADmDR;AC5CA;EACI;IACI,WAAA;EDiDN;AACF","file":"panel-dialog.css"}

package/dist/phone-input/phone-input.css

@@ -1,144 +1,156 @@
 .phone-input,
 .phone-input .listbox-button {
-  display: inline-flex;
+    display: inline-flex;
 }
+
 .phone-input button.btn {
-  border-radius: 8px 0 0 8px;
-  min-width: 64px;
-  outline: none;
-  padding-inline: var(--spacing-200) var(--spacing-100);
-}
+    border-radius: 8px 0 0 8px;
+    border-right-style: none;
+    min-width: 64px;
+    padding-inline: var(--spacing-200) var(--spacing-100);
+}
+
+.phone-input button.btn:focus-visible {
+    border-right-style: solid;
+    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    outline: none;
+    z-index: 1;
+}
+
 .phone-input button.btn svg.icon:last-child {
-  -webkit-margin-start: var(--spacing-50);
-          margin-inline-start: var(--spacing-50);
+    -webkit-margin-start: var(--spacing-50);
+    margin-inline-start: var(--spacing-50);
 }
+
 .phone-input .listbox-button span.fflag,
 .phone-input .listbox-button svg.flag {
-  height: 18px;
-  width: 24px;
+    height: 18px;
+    width: 24px;
 }
+
 .phone-input .listbox-button__value,
 .phone-input .listbox__value {
-  display: inline-flex;
+    display: inline-flex;
 }
 .phone-input .listbox-button__value svg,
 .phone-input .listbox__value svg {
-  -webkit-margin-end: var(--spacing-200);
-          margin-inline-end: var(--spacing-200);
+    -webkit-margin-end: var(--spacing-200);
+    margin-inline-end: var(--spacing-200);
 }
 .phone-input .listbox-button__value span,
 .phone-input .listbox__value span {
-  -webkit-margin-end: var(--spacing-100);
-          margin-inline-end: var(--spacing-100);
+    -webkit-margin-end: var(--spacing-100);
+    margin-inline-end: var(--spacing-100);
 }
 .phone-input .listbox-button__value span:last-child,
 .phone-input .listbox__value span:last-child {
-  color: var(--color-foreground-secondary);
+    color: var(--color-foreground-secondary);
 }
-.phone-input .listbox-button__value span:nth-of-type(1),
-.phone-input .listbox__value span:nth-of-type(1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+.phone-input .listbox-button__value span:first-of-type,
+.phone-input .listbox__value span:first-of-type {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
 .phone-input .textbox {
-  align-items: center;
-  background-color: var(--textbox-background-color, var(--color-background-secondary));
-  border-color: var(--textbox-border-color, var(--color-stroke-default));
-  border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
-  border-style: solid;
-  border-width: 1px;
-  color: var(--textbox-prefix-color, var(--color-foreground-primary));
-  display: inline-flex;
-  margin-left: -1px;
-  -webkit-padding-start: var(--spacing-100);
-          padding-inline-start: var(--spacing-100);
-}
-.phone-input > .textbox > span:first-child,
-.phone-input > .textbox > input.textbox__control {
-  padding-top: 2px;
-}
-.phone-input .textbox > input.textbox__control {
-  border: none;
-  height: 36px;
-  padding-inline: var(--spacing-50);
-}
-.phone-input .textbox > input.textbox__control:focus {
-  background-color: var(--textbox-focus-background-color, var(--color-background-secondary));
-  outline: none;
-}
-.phone-input button.btn:focus,
-.phone-input:not(.phone-input--readonly) .textbox:focus-within {
-  background-color: var(--textbox-focus-background-color, var(--color-background-secondary));
-  border-color: var(--textbox-focus-border-color, var(--color-stroke-strong));
-  box-shadow: 0 0 0 0.5pt var(--color-stroke-strong);
-  position: relative;
-  z-index: 1;
+    border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
 }
+
 .phone-input--large {
-  height: 48px;
+    height: 48px;
 }
+
 .phone-input--fluid,
-.phone-input--fluid .textbox,
-.phone-input--fluid .textbox > input.textbox__control {
-  width: 100%;
+.phone-input--fluid .textbox {
+    width: 100%;
 }
+
 .phone-input--readonly .listbox-button button[aria-disabled="true"],
 .phone-input--readonly .listbox-button button[disabled] {
-  border-color: var(--textbox-border-color, var(--color-stroke-default));
+    border-color: var(--textbox-border-color, var(--color-stroke-default));
 }
+
 .phone-input--readonly .textbox span:first-child {
-  color: var(--textbox-disabled-foreground-color, var(--color-foreground-secondary));
-}
+    color: var(
+        --textbox-disabled-foreground-color,
+        var(--color-foreground-secondary)
+    );
+}
+
+.phone-input.phone-input--readonly .textbox.textbox {
+    background-color: var(
+        --textbox-background-color,
+        var(--color-background-secondary)
+    );
+    border-color: var(--textbox-border-color, var(--color-stroke-default));
+    border-style: solid;
+    border-width: 1px;
+}
+
 .phone-input--readonly input.textbox__control[readonly] {
-  background-color: var(--textbox-background-color, var(--color-background-secondary));
-  color: var(--textbox-foreground-color, var(--color-foreground-secondary));
+    color: var(--textbox-foreground-color, var(--color-foreground-secondary));
 }
+
 .phone-input--disabled span.fflag,
 .phone-input--disabled svg.flag {
-  filter: var(--color-icon-disabled-filter);
+    filter: var(--color-icon-disabled-filter);
 }
+
 .phone-input--disabled .textbox {
-  border-color: var(--textbox-disabled-border-color, var(--color-background-disabled));
+    border-color: var(
+        --textbox-disabled-border-color,
+        var(--color-background-disabled)
+    );
 }
+
 .phone-input--disabled .textbox span:first-child {
-  color: var(--textbox-disabled-foreground-color, var(--color-foreground-disabled));
-}
-.phone-input--error .textbox {
-  border-color: var(--textbox-invalid-foreground-color, var(--color-stroke-attention));
-  border-left-color: var(--textbox-border-color, var(--color-stroke-default));
+    color: var(
+        --textbox-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
+.phone-input.phone-input--error .textbox.textbox {
+    border-color: var(
+        --textbox-invalid-foreground-color,
+        var(--color-stroke-attention)
+    );
+    border-left-color: var(--textbox-border-color, var(--color-stroke-default));
 }
 .phone-input .floating-label .floating-label__label {
-  z-index: 2;
+    z-index: 2;
 }
+
 .phone-input .floating-label .textbox > span:first-child {
-  padding-bottom: 2px;
-  padding-top: 18px;
+    padding-bottom: 2px;
+    padding-top: 18px;
 }
+
 .phone-input .floating-label--large .textbox > span:first-child {
-  padding-bottom: 5px;
-  padding-top: 23px;
+    padding-bottom: 5px;
+    padding-top: 23px;
 }
+
 @media screen and (min-width: 320px) {
-  .phone-input .listbox-button__value span:nth-of-type(1),
-  .phone-input .listbox__value span:nth-of-type(1) {
-    max-width: 50vw;
-  }
-  .phone-input .textbox > input.textbox__control {
-    max-width: 180px;
-  }
+    .phone-input .listbox-button__value span:first-of-type,
+    .phone-input .listbox__value span:first-of-type {
+        max-width: 50vw;
+    }
 }
 [dir="rtl"] .phone-input button.btn {
-  border-radius: 0 8px 8px 0;
+    border-radius: 0 8px 8px 0;
 }
 [dir="rtl"] .phone-input .textbox {
-  border-radius: var(--border-radius-50) 0 0 var(--border-radius-50);
-  /* input type='tel | number' by default starts from left to right in RTL mode */
-  direction: ltr;
-  margin-left: 0;
-  margin-right: -1px;
+    border-radius: var(--border-radius-50) 0 0 var(--border-radius-50);
+    direction: ltr;
+    margin-left: 0;
+    margin-right: -1px;
 }
 [dir="rtl"] .phone-input .listbox-button__value span:last-child,
 [dir="rtl"] .phone-input .listbox__value span:last-child {
-  direction: ltr;
+    direction: ltr;
 }
+
+/*# sourceMappingURL=phone-input.css.map */

package/dist/phone-input/phone-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/phone-input/phone-input.scss","phone-input.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAGA;EAEI,mBAAA;ACKJ;;ADFA;EACI,yBAAA;EAGA,uBAAA;EAFA,cAAA;EACA,oDAAA;ACMJ;;ADFA;EAEI,wBAAA;EADA,+CAAA;EAGA,YAAA;EADA,SAAA;ACMJ;;ADFA;EACI,sCAAA;UAAA,qCAAA;ACKJ;;ADFA;EAEI,WAAA;EACA,UAAA;ACKJ;;ADFA;EAEI,mBAAA;ACKJ;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;ADHI;EACI,uCAAA;ACMR;;ADFA;EAEI,eAAA;EACA,sBAAA;EACA,kBAAA;ACKJ;;ADFA;EACI,iEAAA;ACKJ;;ADFA;EACI,WAAA;ACKJ;;ADFA;EAEI,UAAA;ACKJ;;ADFA;EEnEQ,qEAAA;AD0ER;;ADFA;EExEQ,iFAAA;AD8ER;;ADCA;EE/EQ,mFAAA;EAAA,qEAAA;EFsFJ,kBAAA;EACA,gBAAA;ACFJ;;ADKA;EE1FQ,wEAAA;ADyFR;;ADKA;EAEI,wCAAA;ACFJ;;ADKA;EEnGQ,mFAAA;ADkGR;;ADQA;EE1GQ,gFAAA;ADsGR;;ADWA;EEjHQ,mFAAA;EAAA,0EAAA;AD2GR;ADkBA;EACI,SAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,gBAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,gBAAA;ACdJ;;ADiBA;EACI;IAEI,cAAA;ECdN;AACF;ADkBI;EACI,yBAAA;AChBR;ADmBI;EACI,iEAAA;EAEA,aAAA;EACA,aAAA;EACA,iBAAA;ACjBR;ADoBI;EAEI,aAAA;AClBR","file":"phone-input.css"}

package/dist/progress-bar/progress-bar.css

@@ -1,27 +1,44 @@
 .progress-bar {
-  border: none;
-  color: var(--progress-bar-foreground-color, var(--color-foreground-accent));
-  height: 4px;
-  margin: var(--spacing-100) 0;
+    border: none;
+    color: var(--progress-bar-foreground-color, var(--color-foreground-accent));
+    height: 4px;
+    margin: var(--spacing-100) 0;
 }
+
 .progress-bar::-webkit-progress-bar {
-  background-color: var(--progress-bar-background-color, var(--color-stroke-subtle));
-  border-radius: 8px;
+    background-color: var(
+        --progress-bar-background-color,
+        var(--color-stroke-subtle)
+    );
+    border-radius: 8px;
 }
+
 .progress-bar::-webkit-progress-value {
-  background-color: var(--progress-bar-foreground-color, var(--color-background-accent));
-  border-radius: 8px;
-  transition: width 0.45s ease-in-out;
+    background-color: var(
+        --progress-bar-foreground-color,
+        var(--color-background-accent)
+    );
+    border-radius: 8px;
+    -webkit-transition: width 0.45s ease-in-out;
+    transition: width 0.45s ease-in-out;
 }
+
 .progress-bar::-moz-progress-bar {
-  background-color: var(--progress-bar-foreground-color, var(--color-background-accent));
-  border-radius: 8px;
+    background-color: var(
+        --progress-bar-foreground-color,
+        var(--color-background-accent)
+    );
+    border-radius: 8px;
 }
+
 .progress-bar--fluid {
-  width: 100%;
+    width: 100%;
 }
+
 @media (min-width: 512px) {
-  .progress-bar {
-    margin: var(--spacing-200) 0;
-  }
+    .progress-bar {
+        margin: var(--spacing-200) 0;
+    }
 }
+
+/*# sourceMappingURL=progress-bar.css.map */

package/dist/progress-bar/progress-bar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/progress-bar/progress-bar.scss","../../src/sass/mixins/private/_token-mixins.scss","progress-bar.css"],"names":[],"mappings":"AAGA;EACI,WAAA;ECFI,0EAAA;EDQJ,UAAA;EACA,2BAAA;AECJ;;AFEA;ECZQ,iFAAA;EDkBJ,iBAAA;AEHJ;;AFMA;ECrBQ,qFAAA;ED2BJ,iBAAA;EACA,yCAAA;EAAA,iCAAA;AEPJ;;AFUA;EC/BQ,qFAAA;EDqCJ,iBAAA;AEXJ;;AFcA;EACI,UAAA;AEXJ;;AFcA;EACI;IACI,2BAAA;EEXN;AACF","file":"progress-bar.css"}