@sonic-equipment/ui 0.0.19 → 0.0.21

package/dist/styles.css

@@ -211,8 +211,11 @@
   --shadow-focus-outline-padded: 0 0 1px 4px rgb(227 6 19 / 40%);
 
   /* Box shadows */
-  --box-shadow-96: 0 0 96px 0 rgb(0 0 0 / 30%);
-  --box-shadow-8: 0 0 8px 0 rgb(0 0 0 / 30%);
+  --box-shadow-heavy: 0 0 96px 0 rgb(0 0 0 / 30%);
+  --box-shadow-light: 0 0 8px 0 rgb(0 0 0 / 30%);
+}
+:root {
+  --sidebar-layer: 100;
 }
 
 .button-module-V4meK {
@@ -240,18 +243,33 @@
     cursor: default;
   }
 
+  .button-module-V4meK .button-module-XaNWz {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
 /*********************************************************
  *
  *  Sizes
  *
 *********************************************************/
 
+.button-module-Pbwz7 {
+  min-height: 36px;
+  padding: 0 var(--space-16);
+  border-radius: var(--border-radius-20);
+  font-style: normal;
+  font-weight: var(--font-weight-normal);
+  text-transform: none;
+}
+
 .button-module-GVTEW {
   min-width: 52px;
   min-height: 40px;
-  box-sizing: border-box;
   padding: 0 var(--space-20);
   border-radius: var(--border-radius-20);
+  font-size: var(--font-size-14);
 }
 
 .button-module-GVTEW.button-module-GKHQc {
@@ -323,12 +341,16 @@
     border: 1px solid var(--color-brand-medium-gray);
   }
 
+.button-module--1bCH:where(.button-module-vq9GI):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where([data-pressed]) {
+      border-color: var(--color-brand-light-gray);
+    }
+
 .button-module--1bCH .button-module-ydQAo {
     color: var(--color-brand-red);
   }
 
 .button-module--1bCH:where([data-disabled]) {
-    border-color: var(--color-brand-medium-gray);
+    border-color: var(--color-brand-light-gray);
     background-color: var(--color-white);
     color: var(--color-brand-medium-gray);
   }
@@ -478,6 +500,11 @@
   cursor: pointer;
 }
 
+  .icon-button-module-4PDK-[data-disabled] {
+    cursor: default;
+    opacity: 0.4;
+  }
+
 /*********************************************************
  *
  *  Sizes
@@ -520,6 +547,44 @@
     color: var(--color-brand-red);
   }
 
+.link-button-module-6i75g {
+  all: unset;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-brand-red);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--font-size-14);
+  gap: var(--space-4);
+}
+
+  .link-button-module-6i75g svg {
+    display: block;
+    width: 12px;
+    height: 12px;
+  }
+
+  .link-button-module-6i75g:where([data-disabled]) {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .link-button-module-6i75g:where([data-pressed]),
+  .link-button-module-6i75g:where([data-hovered]) {
+    color: var(--color-brand-dark-red);
+  }
+
+  .link-button-module-6i75g:where([data-pressed])::after, .link-button-module-6i75g:where([data-hovered])::after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: var(--color-brand-dark-red);
+      content: '';
+    }
+
 .tag-module-B7r15 {
   --tag-bg-color: var(--color-brand-red);
   --tag-fg-color: var(--color-brand-white);
@@ -700,6 +765,7 @@
     aspect-ratio: 1 / 1;
     margin-inline: auto;
     place-items: center;
+    transition: width ease 0.2s;
   }
 
   .product-card-module-pLaiB .product-card-module-p-zoi img {
@@ -721,7 +787,7 @@
 
 @media (hover: hover) {
     .product-card-module-pLaiB:hover {
-      box-shadow: var(--box-shadow-96);
+      box-shadow: var(--box-shadow-heavy);
       scale: 1.04;
     }
 }
@@ -760,6 +826,8 @@
   --color: var(--color-black);
   --button-font-size: var(--font-size-16);
   --seperator-color: transparent;
+  --accordion-padding-inline: 0;
+  --accordion-padding-block: var(--space-16);
 }
 
   .accordion-module-9WvAH.accordion-module-CaVdG {
@@ -782,8 +850,11 @@
       --seperator-color: var(--color-white);
     }
 
+.accordion-module-6CcEH {
+  --accordion-padding-inline: var(--space-16);
+}
+
 .accordion-module-lf9d- {
-  --padding: var(--space-16);
   --transition-duration: 0.2s;
 
   border-bottom: 1px solid var(--seperator-color);
@@ -797,8 +868,8 @@
     position: relative;
     display: block;
     width: 100%;
-    padding: var(--padding);
-    padding-right: calc(var(--padding) * 2);
+    padding-right: calc(var(--accordion-padding-inline) * 2);
+    padding-left: var(--accordion-padding-inline);
     border: none;
     background: none;
     color: var(--color);
@@ -807,6 +878,7 @@
     font-size: var(--button-font-size);
     font-weight: var(--font-weight-bold);
     line-height: 1;
+    padding-block: var(--accordion-padding-block);
     text-align: left;
   }
 
@@ -827,7 +899,7 @@
       outline: none;
     }
 
-.accordion-module-lf9d- .accordion-module--Rwpb[aria-expanded='true'] {
+.accordion-module-lf9d- .accordion-module--Rwpb:hover {
       background-color: var(--color-gray-100);
     }
 
@@ -838,7 +910,7 @@
 .accordion-module-lf9d- .accordion-module-KZjMo {
     display: grid;
     grid-template-rows: 0fr;
-    padding-inline: var(--padding);
+    padding-inline: var(--accordion-padding-inline);
     transition:
       grid-template-rows var(--transition-duration) linear,
       padding-block var(--transition-duration) linear;
@@ -862,6 +934,73 @@
     border-color: var(--color-gray-100);
   }
 
+.show-all-module-BDp21 {
+  --transition-duration: 0.2s;
+  --initital-height: 0;
+}
+
+  .show-all-module-BDp21 .show-all-module-bEdda {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--transition-duration) ease-in-out;
+  }
+
+  .show-all-module-BDp21 .show-all-module-bEdda .show-all-module-RF--F {
+      position: relative;
+      overflow: hidden;
+      min-height: var(--initital-height);
+      color: currentcolor;
+    }
+
+  .show-all-module-BDp21 .show-all-module-bEdda .show-all-module-RF--F.show-all-module-30y7l::after {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          display: block;
+          width: 100%;
+          height: 24px;
+          background-image: linear-gradient(to bottom, transparent, white);
+          content: '';
+        }
+
+  .show-all-module-BDp21 .show-all-module-58e7Q {
+    margin-top: var(--space-8);
+  }
+
+  .show-all-module-BDp21 .show-all-module-58e7Q .show-all-module-fqncI {
+      display: block;
+      width: 12px;
+      height: 12px;
+      transition: transform var(--transition-duration) ease;
+    }
+
+  .show-all-module-BDp21.show-all-module-hQeGI button .show-all-module-fqncI {
+        transform: rotate(-180deg);
+      }
+
+  .show-all-module-BDp21.show-all-module-hQeGI .show-all-module-bEdda {
+      grid-template-rows: 1fr;
+    }
+
+  .show-all-module-BDp21.show-all-module-hQeGI .show-all-module-bEdda .show-all-module-RF--F::after {
+        background-image: linear-gradient(to bottom, transparent, transparent);
+      }
+
+.multi-select-module-DC7Ix .multi-select-module-cwVFb {
+    display: grid;
+    margin-bottom: var(--space-8);
+    gap: var(--space-16);
+  }
+
+    .multi-select-module-DC7Ix .multi-select-module-cwVFb.multi-select-module-o7yHU {
+      margin-top: var(--space-8);
+    }
+  .multi-select-module-DC7Ix .multi-select-module-OW-NK {
+    display: flex;
+    color: var(--color-brand-medium-gray);
+    gap: var(--space-4);
+  }
+
 .checkbox-module-YNVdd {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
@@ -879,8 +1018,10 @@
   align-items: center;
   color: var(--color-brand-black);
   cursor: pointer;
+  font-size: var(--font-size-14);
   forced-color-adjust: none;
-  gap: 4px;
+  gap: 6px;
+  line-height: 1;
 }
 
   .checkbox-module-YNVdd .checkbox-module-UKoyf {
@@ -967,6 +1108,11 @@
         background-size: 10px 10px;
       }
 
+  .checkbox-module-YNVdd.checkbox-module-nEhvW[data-disabled] {
+      cursor: pointer;
+      opacity: 0.4;
+    }
+
 .select-module-ui-Wc {
   --trigger-width: initial;
 
@@ -998,6 +1144,7 @@
     display: block;
     width: var(--space-12);
     height: var(--space-12);
+    color: var(--color-brand-dark-gray);
     inset-block: 0;
     inset-inline-end: 14px;
     margin-block: auto;
@@ -1021,18 +1168,31 @@
 
 .select-module-z8cWq {
   width: var(--trigger-width);
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   background-color: var(--color-white);
-  box-shadow: var(--box-shadow-8);
+  box-shadow: var(--box-shadow-light);
+  padding-block: var(--space-8);
 }
 
 .select-module-S21ba {
   outline: none;
 }
 
+.select-module-4Bm2j {
+  padding: var(--space-8) var(--space-24);
+  color: var(--color-brand-dark-gray);
+  cursor: default;
+  line-height: 1;
+  outline: none;
+  word-break: break-word;
+}
+
 .select-module-LgEJO {
   position: relative;
   padding: var(--space-8) var(--space-24);
   cursor: pointer;
+  line-height: 1;
   outline: none;
   word-break: break-word;
 }
@@ -1199,3 +1359,266 @@
         display: none;
       }
 }
+
+.heading-module-pMC65 {
+  padding: 0;
+  margin: 0;
+  color: var(--color-brand-black);
+  font-weight: 900;
+}
+
+  .heading-module-pMC65:where(.heading-module-6spgX) {
+    text-transform: uppercase;
+  }
+
+  .heading-module-pMC65:where(.heading-module-XXMDM) {
+    font-style: italic;
+  }
+
+  .heading-module-pMC65:where(.heading-module-Kn3ZN) {
+    font-size: var(--text-heading-xxl-size);
+    line-height: var(--text-heading-xxl-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module--hZs-) {
+    font-size: var(--text-heading-xl-size);
+    line-height: var(--text-heading-xl-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-WrJRY) {
+    font-size: var(--text-heading-l-size);
+    line-height: var(--text-heading-l-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-hTexc) {
+    font-size: var(--text-heading-m-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-m-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-7W29m) {
+    font-size: var(--text-heading-s-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-s-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-SgaLB) {
+    font-size: var(--text-heading-xs-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-xs-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-33en7) {
+    font-size: var(--text-heading-xxs-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-xxs-line-height);
+  }
+
+.active-filters-module-1qLjB {
+  --spacing: var(--space-16);
+
+  border-bottom: 1px solid var(--color-brand-medium-gray);
+  margin-top: var(--space-16);
+  color: var(--color-brand-black);
+}
+
+  .active-filters-module-1qLjB .active-filters-module-UKKDu {
+    margin-bottom: var(--spacing);
+  }
+
+  .active-filters-module-1qLjB .active-filters-module-UKKDu .active-filters-module-h29rI {
+      margin: 0;
+      font-size: var(--font-size-16);
+      line-height: 1;
+    }
+
+  .active-filters-module-1qLjB .active-filters-module-UKKDu,
+  .active-filters-module-1qLjB .active-filters-module-Rrmhy {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .active-filters-module-1qLjB .active-filters-module-u9TTE {
+    display: grid;
+    margin-bottom: var(--spacing);
+    gap: var(--spacing);
+  }
+
+  .active-filters-module-1qLjB .active-filters-module-u9TTE .active-filters-module-CIuPU {
+      font-weight: var(--font-weight-bold);
+    }
+
+.filter-panel-module-8oxI1 {
+  --padding: var(--space-16);
+
+  position: relative;
+  height: 100%;
+}
+
+  .filter-panel-module-8oxI1,
+  .filter-panel-module-8oxI1 * {
+    box-sizing: border-box;
+  }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-w0hhZ {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 76px;
+    padding-inline: var(--padding);
+  }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 {
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--color-brand-medium-gray);
+  }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-TMp3J {
+      display: inline-block;
+      color: var(--color-black);
+      font-size: var(--font-size-14);
+      line-height: 2.25;
+      text-decoration: none;
+    }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-TMp3J .filter-panel-module-ykW1a {
+        color: var(--color-brand-medium-gray);
+      }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-xvhRz {
+      display: grid;
+      gap: var(--space-8);
+    }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-hJVR0 {
+      margin-top: 0;
+      margin-bottom: var(--space-8);
+      font-size: var(--font-size-16);
+      font-weight: var(--font-weight-bold);
+    }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-hMmIb {
+    position: absolute;
+    bottom: var(--padding);
+    display: grid;
+    inset-inline: 0;
+    padding-inline: var(--padding);
+  }
+
+  @media (width >= 1440px) {
+    .filter-panel-module-8oxI1 .filter-panel-module-w0hhZ {
+      overflow: hidden;
+    }
+
+    .filter-panel-module-8oxI1 .filter-panel-module-hMmIb {
+      display: none;
+    }
+  }
+
+.pagination-module-k4OgY,
+.pagination-module-oq89A {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-24);
+}
+
+  .pagination-module-k4OgY .pagination-module-oq89A, .pagination-module-oq89A .pagination-module-oq89A {
+    gap: var(--space-8);
+  }
+
+.sidebar-module-fSa9Q {
+  --transition-duration: 0.3s;
+  --transition-timing-function: ease-in-out;
+
+  position: fixed;
+  z-index: calc(var(--sidebar-layer) + 1);
+  top: 0;
+  left: 0;
+  width: 382px;
+  max-width: 100vw;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--color-white);
+  padding-block: 46px;
+  transform: translateX(-100%);
+  transition: transform var(--transition-duration)
+    var(--transition-timing-function);
+}
+
+  .sidebar-module-fSa9Q .sidebar-module-2puGC {
+    position: absolute;
+    z-index: calc(var(--sidebar-layer) + 2);
+    top: 36px;
+    right: 8px;
+  }
+
+  .sidebar-module-fSa9Q .sidebar-module-2puGC svg {
+      display: block;
+      width: 32px;
+      height: 32px;
+    }
+
+  .sidebar-module-fSa9Q .sidebar-module-2puGC button {
+      -webkit-tap-highlight-color: transparent;
+    }
+
+  .sidebar-module-fSa9Q.sidebar-module-lV7wp {
+    box-shadow: var(--box-shadow-heavy);
+    pointer-events: auto;
+    transform: translateX(0);
+  }
+
+@media (width >= 1440px) {
+  .sidebar-module-fSa9Q {
+    position: static;
+    z-index: initial;
+    overflow: hidden;
+    width: 324px;
+    padding: 0;
+    transform: translateX(0);
+    transition: width var(--transition-duration)
+      var(--transition-timing-function);
+    white-space: nowrap;
+  }
+
+    .sidebar-module-fSa9Q.sidebar-module-lV7wp {
+      width: 0;
+      box-shadow: none;
+    }
+
+    .sidebar-module-fSa9Q .sidebar-module-2puGC {
+      display: none;
+    }
+}
+
+.product-listing-module-EmEFw .product-listing-module-JEjsa {
+    margin-bottom: 44px;
+  }
+  .product-listing-module-EmEFw .product-listing-module-rFNcR {
+    display: grid;
+    align-items: center;
+    margin-bottom: var(--space-24);
+    grid-template-columns: auto 1fr auto;
+  }
+  .product-listing-module-EmEFw .product-listing-module-rFNcR .product-listing-module-1seez {
+      margin: auto;
+    }
+  .product-listing-module-EmEFw .product-listing-module-hZuKD {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  .product-listing-module-EmEFw .product-listing-module-RRbLO {
+    display: flex;
+    flex-direction: column;
+  }
+  .product-listing-module-EmEFw .product-listing-module-kkOfB {
+    margin-top: var(--space-24);
+    grid-column: span 2;
+  }
+  @media (width >= 1440px) {
+    .product-listing-module-EmEFw .product-listing-module-hZuKD {
+      grid-template-columns: auto 1fr;
+    }
+  }

package/dist/typography/heading/heading.d.ts

@@ -7,7 +7,7 @@ interface HeadingProps {
     children: React.ReactNode;
     className?: string;
     italic?: boolean;
-    size: Size;
+    size?: Size;
     tag?: Tag;
     uppercase?: boolean;
 }