@ebay/skin 19.3.0 → 19.5.0

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

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .confirm-dialog[role="dialog"] {
@@ -26,11 +26,11 @@
         --dialog-window-background-color,
         var(--color-background-primary)
     );
-    border-radius: var(--lightbox-border-radius, var(--border-radius-150));
+    border-radius: var(--lightbox-border-radius, var(--border-radius-100));
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
-    margin: auto auto 16px;
+    margin: auto;
     margin-left: var(--spacing-200);
     margin-right: var(--spacing-200);
     max-height: 90%;
@@ -67,18 +67,41 @@ a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
     margin-left: var(--spacing-100);
 }
-
 .confirm-dialog--hide.confirm-dialog--mask-fade,
-.confirm-dialog--show.confirm-dialog--mask-fade {
-    transition: background-color 0.16s ease-out;
+.confirm-dialog--hide.confirm-dialog--mask-fade-slow {
+    transition: background-color var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.confirm-dialog--hide.confirm-dialog--mask-fade-slow,
+.confirm-dialog--hide .confirm-dialog__window--fade {
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
+}
+.confirm-dialog--hide .confirm-dialog__window--animate {
+    transition:
+        transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),
+        opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.confirm-dialog--hide .confirm-dialog__window--animate > * {
+    transition: opacity var(--motion-duration-short-2)
+        var(--motion-easing-continuous);
+}
+.confirm-dialog--show.confirm-dialog--mask-fade,
 .confirm-dialog--show.confirm-dialog--mask-fade-slow {
-    transition: background-color 0.32s ease-out;
+    transition: background-color var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.confirm-dialog--hide .confirm-dialog__window--fade,
 .confirm-dialog--show .confirm-dialog__window--fade {
-    transition: opacity 0.16s ease-out;
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
+}
+.confirm-dialog--show .confirm-dialog__window--animate {
+    transition:
+        transform var(--motion-duration-medium-3) var(--motion-easing-standard),
+        opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.confirm-dialog--show .confirm-dialog__window--animate > * {
+    transition: opacity var(--motion-duration-medium-2)
+        var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
 
 .confirm-dialog--hide.confirm-dialog--hide,
@@ -93,7 +116,11 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show-init.confirm-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-hide);
 }
+.confirm-dialog--hide .confirm-dialog__window--animate,
+.confirm-dialog--hide .confirm-dialog__window--animate > *,
 .confirm-dialog--hide .confirm-dialog__window--fade,
+.confirm-dialog--show-init .confirm-dialog__window--animate,
+.confirm-dialog--show-init .confirm-dialog__window--animate > *,
 .confirm-dialog--show-init .confirm-dialog__window--fade {
     opacity: 0;
 }
@@ -110,15 +137,65 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show.confirm-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-show);
 }
+.confirm-dialog--hide-init .confirm-dialog__window--animate,
+.confirm-dialog--hide-init .confirm-dialog__window--animate > *,
 .confirm-dialog--hide-init .confirm-dialog__window--fade,
+.confirm-dialog--show .confirm-dialog__window--animate,
+.confirm-dialog--show .confirm-dialog__window--animate > *,
 .confirm-dialog--show .confirm-dialog__window--fade {
     opacity: 1;
 }
 
+@media (prefers-reduced-motion) {
+    .confirm-dialog--hide.confirm-dialog--mask-fade,
+    .confirm-dialog--hide.confirm-dialog--mask-fade-slow {
+        transition: background-color var(--motion-duration-short-3)
+            var(--motion-easing-soft-exit);
+    }
+    .confirm-dialog--hide .confirm-dialog__window--animate,
+    .confirm-dialog--hide .confirm-dialog__window--fade {
+        transition: opacity var(--motion-duration-short-3)
+            var(--motion-easing-soft-exit);
+    }
+    .confirm-dialog--hide .confirm-dialog__window--animate > * {
+        transition: opacity var(--motion-duration-short-2)
+            var(--motion-soft-exit);
+    }
+    .confirm-dialog--show.confirm-dialog--mask-fade,
+    .confirm-dialog--show.confirm-dialog--mask-fade-slow {
+        transition: background-color var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter);
+    }
+    .confirm-dialog--show .confirm-dialog__window--animate,
+    .confirm-dialog--show .confirm-dialog__window--fade {
+        transition: opacity var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter);
+    }
+    .confirm-dialog--show .confirm-dialog__window--animate > * {
+        transition: opacity var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter) var(--motion-duration-short-3);
+    }
+}
+.confirm-dialog--hide-init .confirm-dialog__window--animate,
+.confirm-dialog--show .confirm-dialog__window--animate {
+    transform: scale(1);
+}
+
+.confirm-dialog--hide .confirm-dialog__window--animate,
+.confirm-dialog--show-init .confirm-dialog__window--animate {
+    transform: scale(0.75);
+}
+
+@media (prefers-reduced-motion) {
+    .confirm-dialog--hide .confirm-dialog__window--animate,
+    .confirm-dialog--hide-init .confirm-dialog__window--animate,
+    .confirm-dialog--show .confirm-dialog__window--animate,
+    .confirm-dialog--show-init .confirm-dialog__window--animate {
+        transform: scale(1);
+    }
+}
 @media (min-width: 768px) {
     .confirm-dialog__window {
-        border-radius: var(--lightbox-border-radius, var(--border-radius-100));
-        margin: auto;
         max-width: calc(88% - var(--spacing-400));
     }
 }

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

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .date-textbox {
     --calendar-month-width: 311px;

package/dist/drawer-dialog/drawer-dialog.css

@@ -1,7 +1,7 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .drawer-dialog[role="dialog"] {

package/dist/file-preview-card/file-preview-card.css

@@ -100,7 +100,7 @@ video.file-preview-card__asset {
 
 .file-preview-card__see-more {
     aspect-ratio: 1/1;
-    background-color: rgba(
+    background-color: rgb(
         var(
             --file-preview-card-see-more-background-color-rgb,
             var(--color-background-strong-rgb)
@@ -136,7 +136,7 @@ video.file-preview-card__asset {
 
 .file-preview-card__see-more:focus-visible,
 .file-preview-card__see-more:hover {
-    background-color: rgba(
+    background-color: rgb(
         var(
             --file-preview-card-see-more-interactive-background-color-rgb,
             var(--color-state-secondary-hover-rgb)
@@ -146,7 +146,7 @@ video.file-preview-card__asset {
 }
 
 .file-preview-card__see-more:active {
-    background-color: rgba(
+    background-color: rgb(
         var(
             --file-preview-card-see-more-interactive-active-background-color-rgb,
             var(--color-state-secondary-active-rgb)

package/dist/filter-input/filter-input.css

@@ -0,0 +1,55 @@
+.filter-input {
+    display: inline-block;
+    width: 100%;
+}
+
+.filter-input__clear-btn {
+    display: none;
+}
+
+.filter-input .textbox {
+    border-radius: var(--border-radius-150);
+    max-width: 480px;
+    min-width: 200px;
+}
+
+.filter-input .textbox__control {
+    height: 40px;
+}
+
+.filter-input
+    .textbox__control:not(:placeholder-shown)
+    ~ .filter-input__clear-btn {
+    display: block;
+}
+
+.filter-input .textbox__control::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    display: none;
+}
+
+.filter-input .textbox button.icon-btn.icon-btn--transparent.icon-btn--small {
+    min-width: 32px;
+}
+
+.filter-input .textbox .icon-btn:last-child {
+    flex-shrink: 0;
+    margin-inline-end: var(--spacing-50);
+    margin-inline-start: 0;
+}
+
+.filter-input--small .textbox .icon-btn:last-child {
+    margin-inline-end: 0;
+}
+
+.filter-input--large .textbox .icon-btn:last-child {
+    margin-inline-end: var(--spacing-100);
+}
+
+.filter-input--small .textbox__control {
+    height: 32px;
+}
+
+.filter-input--large .textbox__control {
+    height: 48px;
+}

package/dist/filter-menu-button/filter-menu-button.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 div.filter-group {
     display: flex;

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -1,7 +1,7 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .fullscreen-dialog[role="dialog"] {

package/dist/infotip/infotip.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .infotip {
     position: relative;

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
     --dialog-lightbox-wide-max-width: 896px;
     --dialog-lightbox-narrow-max-width: 480px;
@@ -148,24 +148,41 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog__title--center {
     text-align: center;
 }
-
 .lightbox-dialog--hide.lightbox-dialog--mask-fade,
-.lightbox-dialog--show.lightbox-dialog--mask-fade {
-    transition: background-color 0.16s ease-out;
+.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
+    transition: background-color var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,
+.lightbox-dialog--hide .lightbox-dialog__window--fade {
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate {
+    transition:
+        transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),
+        opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate > * {
+    transition: opacity var(--motion-duration-short-2)
+        var(--motion-easing-continuous);
+}
+.lightbox-dialog--show.lightbox-dialog--mask-fade,
 .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
-    transition: background-color 0.32s ease-out;
+    transition: background-color var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--fade,
 .lightbox-dialog--show .lightbox-dialog__window--fade {
-    transition: opacity 0.16s ease-out;
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--animate,
 .lightbox-dialog--show .lightbox-dialog__window--animate {
     transition:
-        opacity 0.16s ease-out,
-        transform 0.32s ease-out;
+        transform var(--motion-duration-medium-3) var(--motion-easing-standard),
+        opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--show .lightbox-dialog__window--animate > * {
+    transition: opacity var(--motion-duration-medium-2)
+        var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
 
 .lightbox-dialog--hide.lightbox-dialog--hide,
@@ -180,15 +197,14 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-hide);
 }
+.lightbox-dialog--hide .lightbox-dialog__window--animate,
+.lightbox-dialog--hide .lightbox-dialog__window--animate > *,
 .lightbox-dialog--hide .lightbox-dialog__window--fade,
+.lightbox-dialog--show-init .lightbox-dialog__window--animate,
+.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,
 .lightbox-dialog--show-init .lightbox-dialog__window--fade {
     opacity: 0;
 }
-.lightbox-dialog--hide .lightbox-dialog__window--animate,
-.lightbox-dialog--show-init .lightbox-dialog__window--animate {
-    opacity: 0;
-    transform: translateY(100%);
-}
 
 .lightbox-dialog--hide-init.lightbox-dialog--hide-init,
 .lightbox-dialog--hide-init.lightbox-dialog--show,
@@ -202,15 +218,54 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-show);
 }
+.lightbox-dialog--hide-init .lightbox-dialog__window--animate,
+.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,
 .lightbox-dialog--hide-init .lightbox-dialog__window--fade,
+.lightbox-dialog--show .lightbox-dialog__window--animate,
+.lightbox-dialog--show .lightbox-dialog__window--animate > *,
 .lightbox-dialog--show .lightbox-dialog__window--fade {
     opacity: 1;
 }
+
+@media (prefers-reduced-motion) {
+    .lightbox-dialog--hide.lightbox-dialog--mask-fade,
+    .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
+        transition: background-color var(--motion-duration-short-3)
+            var(--motion-easing-soft-exit);
+    }
+    .lightbox-dialog--hide .lightbox-dialog__window--animate,
+    .lightbox-dialog--hide .lightbox-dialog__window--fade {
+        transition: opacity var(--motion-duration-short-3)
+            var(--motion-easing-soft-exit);
+    }
+    .lightbox-dialog--hide .lightbox-dialog__window--animate > * {
+        transition: opacity var(--motion-duration-short-2)
+            var(--motion-soft-exit);
+    }
+    .lightbox-dialog--show.lightbox-dialog--mask-fade,
+    .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
+        transition: background-color var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter);
+    }
+    .lightbox-dialog--show .lightbox-dialog__window--animate,
+    .lightbox-dialog--show .lightbox-dialog__window--fade {
+        transition: opacity var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter);
+    }
+    .lightbox-dialog--show .lightbox-dialog__window--animate > * {
+        transition: opacity var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter) var(--motion-duration-short-3);
+    }
+}
 .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
 .lightbox-dialog--show .lightbox-dialog__window--animate {
-    opacity: 1;
     transform: translateY(0);
 }
+
+.lightbox-dialog--hide .lightbox-dialog__window--animate,
+.lightbox-dialog--show-init .lightbox-dialog__window--animate {
+    transform: translateY(100%);
+}
 .lightbox-dialog__handle:after {
     background-color: var(--dialog-handle-color, var(--color-stroke-default));
     border-radius: 3px;
@@ -264,11 +319,21 @@ button.icon-btn.lightbox-dialog__prev {
         margin-left: var(--spacing-100);
         margin-top: 0;
     }
+    .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
+    .lightbox-dialog--show .lightbox-dialog__window--animate {
+        transform: scale(1);
+    }
+    .lightbox-dialog--hide .lightbox-dialog__window--animate,
+    .lightbox-dialog--show-init .lightbox-dialog__window--animate {
+        transform: scale(0.75);
+    }
+}
+@media (min-width: 512px) and (prefers-reduced-motion) {
     .lightbox-dialog--hide .lightbox-dialog__window--animate,
     .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
     .lightbox-dialog--show .lightbox-dialog__window--animate,
     .lightbox-dialog--show-init .lightbox-dialog__window--animate {
-        transform: translateY(0);
+        transform: scale(1);
     }
 }
 @media (min-width: 768px) {

package/dist/listbox/listbox.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 div.listbox {
     margin: var(--spacing-200) 0;

package/dist/listbox-button/listbox-button.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .listbox-button {
     line-height: normal;

package/dist/menu/menu.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .fake-menu__items,
 .menu__items {

package/dist/menu-button/menu-button.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .fake-menu-button,
 .menu-button {

package/dist/mixins/_utility-mixins.scss

@@ -32,7 +32,7 @@
     position: relative;
 
     &::after {
-        background: rgba(0, 0, 0, 0.05);
+        background: rgb(0, 0, 0, 0.05);
         bottom: 0;
         content: "";
         display: block;

package/dist/number-input/number-input.css

@@ -0,0 +1,48 @@
+.number-input .textbox {
+    background: transparent;
+}
+
+.number-input label:first-child {
+    flex-grow: 1;
+    padding-left: var(--spacing-200);
+}
+
+.number-input label:first-child ~ input.textbox__control {
+    flex-grow: 0;
+}
+
+.icon-btn.number-input__delete {
+    display: none;
+    margin-inline-end: calc(var(--spacing-100) * -1);
+    order: -1;
+    padding-inline-start: var(--spacing-200);
+}
+
+.number-input--show-delete .number-input__delete {
+    display: block;
+}
+
+.number-input--show-delete .number-input__decrement {
+    display: none;
+}
+
+.number-input .textbox .textbox__control {
+    font-weight: 700;
+    text-align: center;
+    width: 48px;
+}
+.number-input .textbox .textbox__control::-webkit-inner-spin-button,
+.number-input .textbox .textbox__control::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.number-input .textbox .textbox__control[type="number"] {
+    -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+    appearance: textfield;
+}
+
+.number-input .textbox .icon-btn:not(:disabled) svg {
+    color: var(--color-foreground-primary);
+    fill: currentColor;
+}

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

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .panel-dialog[role="dialog"] {

package/dist/section-notice/section-notice.css

@@ -81,7 +81,8 @@ span[role="region"].section-notice {
     margin-inline-end: var(--spacing-200);
 }
 
-.section-notice__header + .section-notice__main {
+.section-notice__header + .section-notice__main,
+.section-notice__header ~ .section-notice__cta {
     grid-column: 2;
 }
 
@@ -98,10 +99,10 @@ span[role="region"].section-notice {
 }
 
 p.section-notice__cta {
-    grid-column: 2;
+    grid-column: 1 / 3;
     grid-row: 2;
     justify-self: flex-start;
-    margin-right: var(--spacing-200);
+    margin-bottom: 0;
     margin-top: var(--spacing-200);
 }
 .section-notice__main .section-notice__title ~ p {
@@ -116,10 +117,13 @@ p.section-notice__cta {
         grid-column: 4;
         grid-row: 1;
         justify-self: flex-end;
-        margin-bottom: 0;
+        margin-right: var(--spacing-200);
         margin-top: 0;
         padding-right: var(--spacing-200);
     }
+    .section-notice__header ~ .section-notice__cta {
+        grid-column: 4;
+    }
     .section-notice__footer {
         padding-left: var(--spacing-200);
     }

package/dist/snackbar-dialog/snackbar-dialog.css

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .snackbar-dialog {

package/dist/svg/icon/icon-audio-high-20.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12.073 2.206a1 1 0 0 1 1.302-.552 9.003 9.003 0 0 1 0 16.691 1 1 0 0 1-.75-1.854 7.002 7.002 0 0 0 0-12.983 1 1 0 0 1-.552-1.302Zm.177 10.962c0 .395.408.65.725.416 1.083-.8 1.775-2.123 1.775-3.585 0-1.461-.692-2.785-1.775-3.585-.317-.234-.725.021-.725.416v6.339ZM13.084 10v.045-.09V10Zm-8.86-2.24L8 5.332v9.337l-3.777-2.428a2.663 2.663 0 0 1 0-4.48ZM10 3.72a1.12 1.12 0 0 0-1.726-.942l-5.132 3.3a4.663 4.663 0 0 0 0 7.845l5.132 3.3A1.12 1.12 0 0 0 10 16.28V3.72Z"
+  />
+</svg>

package/dist/svg/icon/icon-audio-high-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M15.063 2.65a1 1 0 0 1 1.287-.587C20.254 3.52 23 7.465 23 12c0 4.535-2.746 8.48-6.65 9.937a1 1 0 0 1-.7-1.874C18.737 18.912 21 15.738 21 12c0-3.738-2.263-6.911-5.35-8.063a1 1 0 0 1-.587-1.286ZM15 15.804c0 .474.49.78.87.499C17.17 15.342 18 13.754 18 12c0-1.753-.831-3.342-2.13-4.301-.38-.282-.87.025-.87.498v7.606ZM4.655 9.05 10 5.783v12.434l-5.345-3.266a3.458 3.458 0 0 1 0-5.901ZM12 4.258c0-.894-.979-1.443-1.741-.977L3.612 7.343a5.458 5.458 0 0 0 0 9.314l6.647 4.062A1.144 1.144 0 0 0 12 19.743V4.258Z"
+  />
+</svg>

package/dist/svg/icon/icon-audio-off-20.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.746 1.884a1 1 0 0 1 1.41-.097l2.856 2.486L8.274 2.82A1.12 1.12 0 0 1 10 3.76v3.986l2.25 1.96V6.87c0-.394.408-.65.725-.415 1.083.8 1.775 2.123 1.775 3.585 0 .559-.101 1.098-.287 1.595l1.79 1.558a7.003 7.003 0 0 0-3.627-9.644 1 1 0 1 1 .75-1.854 9.003 9.003 0 0 1 4.421 12.843l.86.749a1 1 0 0 1-1.314 1.508l-15.5-13.5a1 1 0 0 1-.097-1.41Zm13.073 14.621a1 1 0 0 1-.375 1.364c-.343.195-.7.368-1.069.517a1 1 0 0 1-.75-1.854c.286-.116.564-.25.83-.402a1 1 0 0 1 1.364.375ZM2.275 6.836a1 1 0 1 1 1.453 1.375 2.663 2.663 0 0 0 .495 4.07L8 14.71V12.8a1 1 0 0 1 2 0v3.522a1.12 1.12 0 0 1-1.726.942l-5.132-3.3a4.663 4.663 0 0 1-.867-7.127Z"
+  />
+</svg>

package/dist/svg/icon/icon-audio-off-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.35 2.063a1 1 0 0 0-.7 1.874C18.737 5.09 21 8.262 21 12c0 1.462-.347 2.84-.956 4.046l-2.423-2.04c.245-.622.379-1.3.379-2.006 0-1.753-.831-3.342-2.13-4.301-.38-.282-.87.025-.87.498V11.8l-3-2.527V4.257c0-.893-.978-1.442-1.74-.976l.518.85-.519-.85-3.114 1.903-3.5-2.949a1 1 0 0 0-1.29 1.53l19 16a1 1 0 1 0 1.29-1.53l-1.037-.872A10.942 10.942 0 0 0 23 12c0-4.535-2.746-8.48-6.65-9.937ZM4.248 8.001a1 1 0 0 1-.085 1.412 3.458 3.458 0 0 0 .492 5.537L10 18.217V15a1 1 0 1 1 2 0v4.742c0 .894-.979 1.443-1.741.977l-6.647-4.063a5.458 5.458 0 0 1-.775-8.74 1 1 0 0 1 1.411.085Zm14.104 11.744a1 1 0 0 1-.329 1.375 9.642 9.642 0 0 1-1.673.818 1 1 0 0 1-.7-1.874 7.64 7.64 0 0 0 1.327-.648 1 1 0 0 1 1.375.329Z"
+  />
+</svg>

package/dist/svg/icon/icon-card-stack-64.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m41.832 15.44-2.005-7a7.5 7.5 0 0 0-9.275-5.146L8.437 9.626A7.5 7.5 0 0 0 3.292 18.9l7.71 26.918a7.503 7.503 0 0 0 6.351 5.388 7.47 7.47 0 0 0 4.255 3.17l22.114 6.334a7.5 7.5 0 0 0 9.276-5.146l7.71-26.918a7.5 7.5 0 0 0-5.145-9.274l-13.73-3.932Zm-5.666-1.622L35.02 9.816A2.5 2.5 0 0 0 31.928 8.1L9.814 14.433a2.5 2.5 0 0 0-1.715 3.091l7.709 26.918c.111.389.308.729.565 1.007a7.81 7.81 0 0 1 .09-.346l7.71-26.918a7.5 7.5 0 0 1 9.275-5.145l2.718.778Zm-7.186 5.744a2.5 2.5 0 0 1 3.091-1.715l22.115 6.332a2.5 2.5 0 0 1 1.715 3.092l-7.71 26.918a2.5 2.5 0 0 1-3.092 1.715L22.985 49.57a2.5 2.5 0 0 1-1.715-3.091l7.71-26.918Z"
+  />
+</svg>

package/dist/svg/icon/icon-coupon-16.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.5 2A2.5 2.5 0 0 0 0 4.5V6a1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1v1.5A2.5 2.5 0 0 0 2.5 14h11a2.5 2.5 0 0 0 2.5-2.5V10a1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1V4.5A2.5 2.5 0 0 0 13.5 2h-11ZM6 4v.5a1 1 0 0 0 2 0V4h5.5a.5.5 0 0 1 .5.5v.67a3.001 3.001 0 0 0 0 5.66v.67a.5.5 0 0 1-.5.5H8.052l.023-.454a1 1 0 1 0-1.998-.101L6.05 12H2.5a.5.5 0 0 1-.5-.5v-.67a3.001 3.001 0 0 0 0-5.66V4.5a.5.5 0 0 1 .5-.5H6Zm1 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+</svg>

package/dist/svg/icon/icon-coupon-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4 4a3 3 0 0 0-3 3v1.9c0 .618.497 1.082 1.067 1.101a2 2 0 0 1 0 3.998A1.103 1.103 0 0 0 1 15.1V17a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3v-1.9c0-.618-.497-1.082-1.067-1.101a2 2 0 0 1 0-3.998A1.103 1.103 0 0 0 23 8.9V7a3 3 0 0 0-3-3H4Zm7 13v1h9a1 1 0 0 0 1-1v-1.126a4.001 4.001 0 0 1 0-7.748V7a1 1 0 0 0-1-1h-9v1a1 1 0 1 1-2 0V6H4a1 1 0 0 0-1 1v1.126a4.001 4.001 0 0 1 0 7.748V17a1 1 0 0 0 1 1h5v-1a1 1 0 1 1 2 0Zm0-6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2Z"
+  />
+</svg>