@sonic-equipment/ui 171.0.0 → 174.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/dist/algolia/algolia-categories-filters.js +1 -5
  2. package/dist/buttons/button/button.d.ts +2 -1
  3. package/dist/buttons/button/button.js +3 -3
  4. package/dist/buttons/button/button.module.css.js +1 -1
  5. package/dist/cards/category-card/category-card.d.ts +1 -2
  6. package/dist/cards/category-card/category-card.js +2 -3
  7. package/dist/cards/category-card/category-card.module.css.js +1 -1
  8. package/dist/cards/data-card/data-card.d.ts +27 -0
  9. package/dist/cards/data-card/data-card.js +17 -0
  10. package/dist/cards/data-card/data-card.module.css.js +3 -0
  11. package/dist/cards/orderline-card/orderline-card.d.ts +1 -1
  12. package/dist/carousel/category-carousel/category-carousel.js +1 -1
  13. package/dist/carousel/category-carousel/category-carousel.module.css.js +1 -1
  14. package/dist/delivery-time/delivery-time.d.ts +2 -2
  15. package/dist/delivery-time/delivery-time.js +3 -1
  16. package/dist/exports.d.ts +8 -1
  17. package/dist/forms/number-field/number-field.js +3 -3
  18. package/dist/global-search/categories-grid/categories-grid.js +1 -1
  19. package/dist/icons/solid/solid-add-icon.d.ts +1 -0
  20. package/dist/icons/solid/solid-close-icon.js +1 -1
  21. package/dist/icons/solid/solid-dashboard-icon.d.ts +1 -0
  22. package/dist/icons/solid/solid-dashboard-icon.js +7 -0
  23. package/dist/icons/solid/solid-edit-icon.d.ts +1 -0
  24. package/dist/icons/solid/solid-facebook-icon.d.ts +1 -0
  25. package/dist/icons/solid/solid-folder-icon.d.ts +1 -0
  26. package/dist/icons/solid/solid-instagram-icon.d.ts +1 -0
  27. package/dist/icons/solid/solid-link-icon.d.ts +1 -0
  28. package/dist/icons/solid/solid-linkedin-icon.d.ts +1 -0
  29. package/dist/icons/solid/solid-logout-icon.d.ts +1 -0
  30. package/dist/icons/solid/solid-logout-icon.js +7 -0
  31. package/dist/icons/solid/solid-mail-icon.d.ts +1 -0
  32. package/dist/icons/solid/solid-news-icon.js +1 -1
  33. package/dist/icons/solid/solid-okay-icon.js +1 -1
  34. package/dist/icons/solid/solid-package-icon.d.ts +1 -0
  35. package/dist/icons/solid/solid-payment-icon.d.ts +1 -0
  36. package/dist/icons/solid/solid-remove-icon.d.ts +1 -0
  37. package/dist/icons/solid/solid-salecategory-icon.d.ts +1 -0
  38. package/dist/icons/solid/solid-salecategory-icon.js +7 -0
  39. package/dist/icons/solid/solid-stories-icon.d.ts +1 -0
  40. package/dist/icons/solid/solid-thumbsdown-icon.d.ts +1 -0
  41. package/dist/icons/solid/solid-thumbsup-icon.d.ts +1 -0
  42. package/dist/icons/solid/solid-tiktok-icon.d.ts +1 -0
  43. package/dist/icons/solid/solid-youtube-icon.d.ts +1 -0
  44. package/dist/icons/stroke/stroke-3d-icon.d.ts +1 -0
  45. package/dist/icons/stroke/stroke-3dview-icon.d.ts +1 -0
  46. package/dist/icons/stroke/stroke-add-icon.d.ts +1 -0
  47. package/dist/icons/stroke/stroke-arkit-icon.d.ts +1 -0
  48. package/dist/icons/stroke/stroke-closebox-icon.js +1 -1
  49. package/dist/icons/stroke/stroke-dashboard-icon.d.ts +1 -0
  50. package/dist/icons/stroke/stroke-edit-icon.d.ts +1 -0
  51. package/dist/icons/stroke/stroke-efficiency-icon.d.ts +1 -0
  52. package/dist/icons/stroke/stroke-event-icon.d.ts +1 -0
  53. package/dist/icons/stroke/stroke-event-icon.js +7 -0
  54. package/dist/icons/stroke/stroke-facebook-icon.d.ts +1 -0
  55. package/dist/icons/stroke/stroke-fallback-icon.d.ts +1 -0
  56. package/dist/icons/stroke/stroke-folder-icon.d.ts +1 -0
  57. package/dist/icons/stroke/stroke-happy-icon.d.ts +1 -0
  58. package/dist/icons/stroke/stroke-information-icon.js +1 -1
  59. package/dist/icons/stroke/stroke-innovate-icon.d.ts +1 -0
  60. package/dist/icons/stroke/stroke-instagram-icon.d.ts +1 -0
  61. package/dist/icons/stroke/stroke-link-icon.d.ts +1 -0
  62. package/dist/icons/stroke/stroke-linkedin-icon.d.ts +1 -0
  63. package/dist/icons/stroke/stroke-logout-icon.d.ts +1 -0
  64. package/dist/icons/stroke/stroke-mail-icon.d.ts +1 -0
  65. package/dist/icons/stroke/stroke-minus-icon.d.ts +1 -0
  66. package/dist/icons/stroke/{stroke-collapse-icon.js → stroke-minus-icon.js} +2 -2
  67. package/dist/icons/stroke/stroke-modular-icon.d.ts +1 -0
  68. package/dist/icons/stroke/stroke-neutral-icon.d.ts +1 -0
  69. package/dist/icons/stroke/stroke-news-icon.d.ts +1 -0
  70. package/dist/icons/stroke/stroke-package-icon.d.ts +1 -0
  71. package/dist/icons/stroke/stroke-payment-icon.d.ts +1 -0
  72. package/dist/icons/stroke/stroke-plus-icon.d.ts +1 -0
  73. package/dist/icons/stroke/{stroke-expand-icon.js → stroke-plus-icon.js} +2 -2
  74. package/dist/icons/stroke/stroke-proactive-icon.d.ts +1 -0
  75. package/dist/icons/stroke/stroke-productivity-icon.d.ts +1 -0
  76. package/dist/icons/stroke/stroke-remove-icon.d.ts +1 -0
  77. package/dist/icons/stroke/stroke-sad-icon.d.ts +1 -0
  78. package/dist/icons/stroke/stroke-sale-icon.d.ts +1 -0
  79. package/dist/icons/stroke/stroke-salecategory-icon.d.ts +1 -0
  80. package/dist/icons/stroke/stroke-stories-icon.d.ts +1 -0
  81. package/dist/icons/stroke/stroke-style-icon.d.ts +1 -0
  82. package/dist/icons/stroke/stroke-support-icon.d.ts +1 -0
  83. package/dist/icons/stroke/stroke-teamplayer-icon.d.ts +1 -0
  84. package/dist/icons/stroke/stroke-thumbsdown-icon.d.ts +1 -0
  85. package/dist/icons/stroke/stroke-thumbsup-icon.d.ts +1 -0
  86. package/dist/icons/stroke/stroke-tiktok-icon.d.ts +1 -0
  87. package/dist/icons/stroke/stroke-warranty10y-icon.d.ts +1 -0
  88. package/dist/icons/stroke/stroke-warranty1y-icon.d.ts +1 -0
  89. package/dist/icons/stroke/stroke-warranty3y-icon.d.ts +1 -0
  90. package/dist/icons/stroke/stroke-warranty5y-icon.d.ts +1 -0
  91. package/dist/icons/stroke/stroke-warrantyconsumable-icon.d.ts +1 -0
  92. package/dist/icons/stroke/stroke-warrantylifetime-icon.d.ts +1 -0
  93. package/dist/icons/stroke/stroke-youtube-icon.d.ts +1 -0
  94. package/dist/index.js +9 -2
  95. package/dist/intl/translation-id.d.ts +1 -1
  96. package/dist/lists/menu-list/menu-list-item.d.ts +2 -1
  97. package/dist/lists/menu-list/menu-list-item.js +2 -2
  98. package/dist/notifications/announcements/announcement.js +4 -4
  99. package/dist/pages/checkout/cart-page/cart-page.js +1 -1
  100. package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js +1 -1
  101. package/dist/pages/checkout/payment-page/payment-page-content.js +1 -1
  102. package/dist/pages/my-account/navigation/connected-my-account-navigation.d.ts +1 -0
  103. package/dist/pages/my-account/navigation/connected-my-account-navigation.js +27 -0
  104. package/dist/pages/my-account/navigation/my-account-desktop-navigation.d.ts +6 -0
  105. package/dist/pages/my-account/navigation/my-account-desktop-navigation.js +17 -0
  106. package/dist/pages/my-account/navigation/my-account-desktop-navigation.module.css.js +3 -0
  107. package/dist/pages/my-account/navigation/my-account-mobile-navigation.d.ts +4 -0
  108. package/dist/pages/my-account/navigation/my-account-mobile-navigation.js +25 -0
  109. package/dist/pages/my-account/widgets/connected-company-information-widget.d.ts +1 -0
  110. package/dist/pages/my-account/widgets/connected-company-information-widget.js +43 -0
  111. package/dist/pages/my-account/widgets/connected-user-account-widget.d.ts +1 -0
  112. package/dist/pages/my-account/widgets/connected-user-account-widget.js +32 -0
  113. package/dist/pages/paths.d.ts +4 -0
  114. package/dist/pages/paths.js +4 -0
  115. package/dist/shared/api/bff/services/bff-service.js +29 -0
  116. package/dist/shared/api/storefront/hooks/authentication/use-sign-out.d.ts +5 -1
  117. package/dist/shared/api/storefront/hooks/authentication/use-sign-out.js +2 -1
  118. package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js +1 -1
  119. package/dist/shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.d.ts +1 -0
  120. package/dist/shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js +11 -0
  121. package/dist/shared/api/storefront/services/authentication-service.js +12 -5
  122. package/dist/shared/api/storefront/services/customer-service.d.ts +1 -0
  123. package/dist/shared/api/storefront/services/customer-service.js +8 -1
  124. package/dist/shared/routing/route-provider.d.ts +6 -2
  125. package/dist/shared/routing/route-provider.js +6 -2
  126. package/dist/shared/routing/route-utils.d.ts +2 -2
  127. package/dist/shared/routing/route-utils.js +6 -3
  128. package/dist/shared/routing/types.d.ts +6 -2
  129. package/dist/shared/routing/use-location.d.ts +9 -0
  130. package/dist/shared/routing/use-location.js +18 -0
  131. package/dist/shared/routing/use-route-link.d.ts +1 -0
  132. package/dist/shared/routing/use-route-link.js +5 -4
  133. package/dist/shared/routing/with-routing.js +2 -9
  134. package/dist/sidebar/toggle-sidebar-button.js +1 -1
  135. package/dist/styles.css +244 -128
  136. package/package.json +1 -1
  137. package/dist/icons/other/career-innovate-icon.d.ts +0 -1
  138. package/dist/icons/other/career-proactive-icon.d.ts +0 -1
  139. package/dist/icons/other/career-teamplayer-icon.d.ts +0 -1
  140. package/dist/icons/other/fallback-icon.d.ts +0 -1
  141. package/dist/icons/other/some-facebook-icon.d.ts +0 -1
  142. package/dist/icons/other/some-instagram-icon.d.ts +0 -1
  143. package/dist/icons/other/some-linkedin-icon.d.ts +0 -1
  144. package/dist/icons/other/some-mail-icon.d.ts +0 -1
  145. package/dist/icons/other/some-youtube-icon.d.ts +0 -1
  146. package/dist/icons/other/usp-efficiency-icon.d.ts +0 -1
  147. package/dist/icons/other/usp-style-icon.d.ts +0 -1
  148. package/dist/icons/other/usp-support-icon.d.ts +0 -1
  149. package/dist/icons/other/warranty-10y-icon.d.ts +0 -1
  150. package/dist/icons/other/warranty-1y-icon.d.ts +0 -1
  151. package/dist/icons/other/warranty-3y-icon.d.ts +0 -1
  152. package/dist/icons/other/warranty-5y-icon.d.ts +0 -1
  153. package/dist/icons/other/warranty-consumable-icon.d.ts +0 -1
  154. package/dist/icons/other/warranty-lifetime-icon.d.ts +0 -1
  155. package/dist/icons/solid/solid-event-icon.d.ts +0 -1
  156. package/dist/icons/solid/solid-event-icon.js +0 -7
  157. package/dist/icons/solid/solid-sale-icon.d.ts +0 -1
  158. package/dist/icons/solid/solid-sale-icon.js +0 -7
  159. package/dist/icons/solid/solid-vote-thumbsdown-icon.d.ts +0 -1
  160. package/dist/icons/solid/solid-vote-thumbsup-icon.d.ts +0 -1
  161. package/dist/icons/stroke/stroke-collapse-icon.d.ts +0 -1
  162. package/dist/icons/stroke/stroke-expand-icon.d.ts +0 -1
  163. package/dist/icons/stroke/stroke-vote-thumbsdown-icon.d.ts +0 -1
  164. package/dist/icons/stroke/stroke-vote-thumbsup-icon.d.ts +0 -1
  165. package/dist/shared/routing/use-base-path.d.ts +0 -1
  166. package/dist/shared/routing/use-base-path.js +0 -12
package/dist/styles.css CHANGED
@@ -813,6 +813,10 @@ html {
813
813
  vertical-align: text-bottom;
814
814
  }
815
815
 
816
+ .button-module-V4meK:where(.button-module-fepAr) {
817
+ font-weight: var(--font-weight-normal);
818
+ }
819
+
816
820
  .button-module-V4meK:where([data-disabled]) {
817
821
  cursor: default;
818
822
  }
@@ -880,7 +884,6 @@ html {
880
884
  padding: 0 var(--space-16);
881
885
  border-radius: var(--border-radius-20);
882
886
  font-style: normal;
883
- font-weight: var(--font-weight-normal);
884
887
  text-transform: none;
885
888
  }
886
889
 
@@ -2560,11 +2563,18 @@ html {
2560
2563
  }
2561
2564
 
2562
2565
  .category-card-module-4NUjH {
2566
+ --color: var(--color-black);
2567
+ --image-margin: var(--space-12);
2568
+ --gap: var(--space-8);
2569
+ --image-scale: 1;
2570
+ --duration: var(--transition-duration-short);
2571
+
2563
2572
  all: unset;
2564
2573
  display: grid;
2565
- width: 88px;
2574
+ color: var(--color);
2566
2575
  cursor: pointer;
2567
- padding-inline: 10px;
2576
+ grid-template-columns: 1fr;
2577
+ grid-template-rows: minmax(0, min-content) min-content;
2568
2578
  place-items: center;
2569
2579
  -webkit-tap-highlight-color: transparent;
2570
2580
  }
@@ -2575,101 +2585,174 @@ html {
2575
2585
  }
2576
2586
 
2577
2587
  .category-card-module-4NUjH .category-card-module-LEhh3 {
2578
- display: flex;
2579
- align-items: center;
2580
- margin-top: var(--space-8);
2581
- margin-bottom: 0;
2582
- gap: 2px;
2583
- transition: color 0.2s ease;
2588
+ overflow: hidden;
2589
+ align-self: flex-start;
2590
+ font-size: var(--font-size-12);
2591
+ font-style: italic;
2592
+ font-weight: var(--font-weight-bold);
2593
+ inline-size: 100%;
2594
+ line-height: 1;
2595
+ margin-block-start: var(--gap);
2596
+ text-align: center;
2597
+ text-transform: uppercase;
2598
+ word-wrap: break-word;
2584
2599
  }
2585
2600
 
2586
- .category-card-module-4NUjH .category-card-module-LEhh3 span {
2587
- display: block;
2588
- font-size: var(--font-size-12);
2589
- font-style: italic;
2590
- font-weight: var(--font-weight-bold);
2591
- line-height: 1;
2592
- overflow-wrap: break-word;
2593
- text-align: center;
2594
- text-transform: uppercase;
2595
- }
2596
-
2597
- .category-card-module-4NUjH .category-card-module-LEhh3 .category-card-module-hL4-A {
2598
- display: block;
2599
- margin-bottom: 1px;
2600
- color: var(--color-brand-red);
2601
- }
2602
-
2603
- .category-card-module-4NUjH:hover .category-card-module-RxWMW, .category-card-module-4NUjH:focus .category-card-module-RxWMW {
2604
- scale: 1.15;
2605
- }
2606
-
2607
- .category-card-module-4NUjH:hover .category-card-module-LEhh3, .category-card-module-4NUjH:focus .category-card-module-LEhh3 {
2608
- color: var(--color-brand-red);
2609
- }
2610
-
2611
- .category-card-module-4NUjH:hover .category-card-module-LEhh3, .category-card-module-4NUjH:focus .category-card-module-LEhh3, .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
2612
- color: var(--color-brand-red);
2613
- }
2614
-
2615
2601
  .category-card-module-4NUjH .category-card-module-oNTrK {
2616
2602
  position: relative;
2617
- display: flex;
2618
- width: 62px;
2619
- aspect-ratio: 1 / 1;
2603
+ aspect-ratio: 1;
2604
+
2605
+ /* block-size: 100%; */
2606
+
2607
+ /* inline-size: calc(100% - (var(--image-margin) * 2)); */
2608
+ margin-inline: var(--image-margin);
2609
+ place-items: center;
2610
+ place-self: center;
2620
2611
  }
2621
2612
 
2622
2613
  .category-card-module-4NUjH .category-card-module-oNTrK .category-card-module-RxWMW {
2623
- position: relative;
2624
- z-index: 1;
2625
- margin: auto;
2626
- aspect-ratio: 1;
2627
2614
  mix-blend-mode: multiply;
2628
- transition: scale 0.2s ease;
2615
+ scale: var(--image-scale);
2616
+ transition: scale var(--duration);
2629
2617
  }
2630
2618
 
2631
2619
  .category-card-module-4NUjH .category-card-module-oNTrK::after {
2632
2620
  position: absolute;
2633
- width: 52px;
2621
+ z-index: -1;
2634
2622
  border-radius: 100%;
2635
- margin: auto;
2636
- aspect-ratio: 1 / 1;
2637
- background-color: var(--color-brand-light-gray);
2623
+ aspect-ratio: 1;
2624
+ background-color: rgb(0 0 0 / 7%);
2638
2625
  content: '';
2639
- inset: var(--space-2);
2626
+ grid-area: 1 / -1;
2627
+ inline-size: 83.5%;
2628
+ inset: 50%;
2629
+ translate: -50% -50%;
2640
2630
  }
2641
2631
 
2642
- @media (width >= 768px) {
2643
- .category-card-module-4NUjH .category-card-module-oNTrK {
2644
- width: 74px;
2645
- }
2632
+ .category-card-module-4NUjH:hover,
2633
+ .category-card-module-4NUjH:focus {
2634
+ --color: var(--color-brand-red);
2635
+ --image-scale: 1.15;
2636
+ }
2646
2637
 
2647
- .category-card-module-4NUjH .category-card-module-oNTrK::after {
2648
- width: 62px;
2649
- }
2638
+ .category-card-module-4NUjH.category-card-module-vJ7vB {
2639
+ --color: var(--color-brand-red);
2640
+ }
2641
+
2642
+ @container (min-width: 90px) {.category-card-module-4NUjH {
2643
+ --image-margin: var(--space-8);
2644
+ --gap: var(--space-12)
2645
+ }
2650
2646
  }
2651
2647
 
2652
- @media (width >= 1024px) {.category-card-module-4NUjH {
2653
- padding-inline: 0
2648
+ @container (min-width: 96px) {.category-card-module-4NUjH {
2649
+ --image-margin: 0;
2650
+ --gap: var(--space-16)
2654
2651
  }
2655
2652
  }
2656
2653
 
2657
- @media (width >= 1440px) {.category-card-module-4NUjH {
2658
- width: 95px
2654
+ .data-card-module-DMbBO {
2655
+ margin-bottom: var(--space-12);
2656
+ }
2657
+
2658
+ .data-card-module-24uin {
2659
+ position: relative;
2660
+ width: 100%;
2661
+ min-height: 200px;
2662
+ border: 1px solid var(--color-brand-medium-gray);
2663
+ border-radius: var(--border-radius-22);
2664
+ container-type: inline-size;
2659
2665
  }
2660
2666
 
2661
- .category-card-module-4NUjH .category-card-module-oNTrK {
2662
- width: 96px;
2667
+ .data-card-module-24uin .data-card-module-j-RFT {
2668
+ position: absolute;
2669
+ display: grid;
2670
+ color: var(--color-brand-red);
2671
+ inset: 0;
2672
+ place-content: center;
2673
+ }
2674
+
2675
+ .data-card-module-24uin .data-card-module-d9zvu {
2676
+ position: absolute;
2677
+ display: grid;
2678
+ inset: 0;
2679
+ place-content: center;
2680
+ }
2681
+
2682
+ .data-card-module-24uin .data-card-module-FVD44 {
2683
+ position: absolute;
2684
+ display: grid;
2685
+ inset: 0;
2686
+ place-content: center;
2687
+ }
2688
+
2689
+ .data-card-module-24uin .data-card-module-ZefqY {
2690
+ padding: var(--space-32) var(--space-32) var(--space-16);
2691
+ }
2692
+
2693
+ @container (max-width: 273px) {
2694
+
2695
+ .data-card-module-24uin .data-card-module-ZefqY {
2696
+ padding: var(--space-20) var(--space-16) var(--space-16)
2697
+ }
2698
+ }
2699
+
2700
+ .data-card-module-24uin .data-card-module-ZefqY.data-card-module-Fb4Cx {
2701
+ visibility: hidden;
2702
+ }
2703
+
2704
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
2705
+ display: grid;
2706
+ margin: 0;
2707
+ gap: var(--space-16);
2708
+ grid-template-areas: 'key value';
2709
+ grid-template-columns:
2710
+ minmax(min-content, max-content)
2711
+ minmax(min-content, 1fr);
2712
+ line-height: 1;
2663
2713
  }
2664
2714
 
2665
- .category-card-module-4NUjH .category-card-module-oNTrK::after {
2666
- width: 80px;
2715
+ @container (max-width: 273px) {
2716
+
2717
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
2718
+ grid-template-areas: unset;
2719
+ grid-template-columns: 1fr
2720
+ }
2721
+ }
2722
+
2723
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
2724
+ margin: 0;
2725
+ font-weight: var(--font-weight-bold);
2726
+ grid-template-areas: 'key';
2727
+ text-align: right;
2728
+ }
2729
+
2730
+ @container (max-width: 273px) {
2731
+
2732
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
2733
+ text-align: left
2734
+ }
2735
+ }
2736
+
2737
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-fcSbu {
2738
+ margin: 0;
2739
+ font-weight: var(--font-weight-normal);
2740
+ grid-template-areas: 'value';
2667
2741
  }
2668
2742
 
2669
- .category-card-module-4NUjH .category-card-module-LEhh3 {
2743
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
2744
+ display: flex;
2745
+ justify-content: flex-end;
2670
2746
  margin-top: var(--space-16);
2747
+ gap: var(--space-8);
2671
2748
  }
2672
- }
2749
+
2750
+ @container (max-width: 273px) {
2751
+
2752
+ .data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
2753
+ flex-direction: column
2754
+ }
2755
+ }
2673
2756
 
2674
2757
  .confirmation-dialog-module-Up-BC {
2675
2758
  max-width: 425px;
@@ -3747,26 +3830,25 @@ html {
3747
3830
 
3748
3831
  .carousel-module-ealh- .carousel-module-bUMlb {
3749
3832
  display: grid;
3833
+ flex-grow: 0;
3750
3834
  block-size: auto;
3835
+ font-size: inherit;
3751
3836
  inline-size: -moz-fit-content;
3752
3837
  inline-size: fit-content;
3838
+ text-align: left;
3753
3839
  }
3754
3840
 
3755
3841
  /* stylelint-disable-next-line no-descending-specificity */
3756
3842
 
3757
- /* stylelint-disable-next-line no-descending-specificity */
3758
-
3759
3843
  .carousel-module-ealh-:has(.carousel-module-T7bTr:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
3760
- opacity: 0;
3761
- }
3762
-
3763
- /* stylelint-disable-next-line no-descending-specificity */
3844
+ opacity: 0;
3845
+ }
3764
3846
 
3765
3847
  /* stylelint-disable-next-line no-descending-specificity */
3766
3848
 
3767
3849
  .carousel-module-ealh-:has(.carousel-module-984Rr:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
3768
- opacity: 0;
3769
- }
3850
+ opacity: 0;
3851
+ }
3770
3852
 
3771
3853
  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE {
3772
3854
  position: absolute;
@@ -3801,8 +3883,10 @@ html {
3801
3883
 
3802
3884
  @media (width < 1024px) {
3803
3885
  .carousel-module-ealh-:has(.carousel-module-tPg7k) {
3804
- inline-size: calc(100% + 20px);
3805
- margin-inline-start: -10px;
3886
+ inline-size: calc(100% + var(--page-container-padding-inline, 10px) * 2);
3887
+ margin-inline-start: calc(
3888
+ var(--page-container-padding-inline, 10px) * -1
3889
+ );
3806
3890
  }
3807
3891
 
3808
3892
  .carousel-module-ealh- .carousel-module-kcqEE {
@@ -3912,19 +3996,31 @@ html {
3912
3996
  }
3913
3997
  }
3914
3998
 
3915
- .category-carousel-module-muLq-:not(:last-child) {
3916
- margin-right: var(--space-8);
3917
- }
3999
+ .category-carousel-module--QCHm {
4000
+ --gap: var(--space-8);
4001
+ --slide-size: 88px;
4002
+ }
3918
4003
 
3919
- @media (width >= 1024px) { .category-carousel-module-muLq-:not(:last-child) {
3920
- margin-right: var(--space-12)
3921
- }
3922
- }
4004
+ .category-carousel-module--QCHm .swiper-slide {
4005
+ container-type: inline-size;
4006
+ inline-size: var(--slide-size);
4007
+ }
3923
4008
 
3924
- @media (width >= 1440px) { .category-carousel-module-muLq-:not(:last-child) {
3925
- margin-right: var(--space-16)
4009
+ .category-carousel-module--QCHm .swiper-slide:not(:last-child) {
4010
+ margin-right: var(--gap);
3926
4011
  }
3927
- }
4012
+
4013
+ @media (width >= 1024px) {.category-carousel-module--QCHm {
4014
+ --gap: var(--space-12);
4015
+ --slide-size: 92px
4016
+ }
4017
+ }
4018
+
4019
+ @media (width >= 1440px) {.category-carousel-module--QCHm {
4020
+ --gap: var(--space-16);
4021
+ --slide-size: 96px
4022
+ }
4023
+ }
3928
4024
 
3929
4025
  .pagination-module-pQ-Pu .pagination-module-EnswA {
3930
4026
  position: relative;
@@ -4759,7 +4855,7 @@ button.swiper-pagination-bullet {
4759
4855
  display: grid;
4760
4856
  gap: var(--space-32);
4761
4857
  grid-template-columns: repeat(auto-fit, 220px);
4762
- margin-block-end: 104px;
4858
+ margin-block-end: 48px;
4763
4859
  }
4764
4860
 
4765
4861
  .footer-module-YzJ68 .footer-module-TZq-4 {
@@ -5132,68 +5228,83 @@ button.swiper-pagination-bullet {
5132
5228
  }
5133
5229
 
5134
5230
  .categories-grid-module-C751R {
5135
- --amount-of-columns: 2;
5231
+ --nr-of-columns: 2;
5232
+ --item-padding: var(--space-16);
5136
5233
  --border: 1px solid var(--color-brand-light-gray);
5234
+ --image-size: 62px;
5137
5235
 
5236
+ position: relative;
5138
5237
  display: grid;
5139
- grid-template-columns: repeat(var(--amount-of-columns), 1fr);
5238
+ grid-template-columns: repeat(var(--nr-of-columns), 1fr);
5140
5239
  }
5141
5240
 
5142
- .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5143
- position: relative;
5144
- display: grid;
5145
- padding: var(--space-16) var(--space-4);
5146
- place-items: center;
5241
+ @media (0 <= width < 576px) {.categories-grid-module-C751R {
5242
+ border-block-start: var(--border);
5243
+ inline-size: calc(100% + (var(--padding-inline) * 2));
5244
+ inset-inline-start: calc(var(--padding-inline) * -1)
5245
+ }
5147
5246
  }
5148
5247
 
5149
- .categories-grid-module-C751R .categories-grid-module-Q7i00 {
5150
- width: 100%;
5248
+ @media (width >= 576px) {.categories-grid-module-C751R {
5249
+ --nr-of-columns: 3;
5250
+
5251
+ border-block: var(--border)
5252
+ }
5151
5253
  }
5152
5254
 
5153
- @media (0 <= width < 576px) {
5154
- .categories-grid-module-C751R {
5155
- position: relative;
5156
- left: calc(var(--padding-inline) * -1);
5157
- width: calc(100% + (var(--padding-inline) * 2));
5158
- border-top: var(--border);
5255
+ @media (width >= 1024px) {.categories-grid-module-C751R {
5256
+ --nr-of-columns: 4;
5257
+ --image-size: 74px;
5258
+
5259
+ border: none;
5260
+ gap: var(--space-16)
5261
+ }
5159
5262
  }
5160
5263
 
5161
- .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5162
- border-bottom: var(--border);
5163
- }
5264
+ @media (width >= 1440px) {.categories-grid-module-C751R {
5265
+ --image-size: 96px
5266
+ }
5267
+ }
5268
+
5269
+ .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5270
+ display: grid;
5271
+ padding: var(--item-padding);
5272
+ container-type: inline-size;
5273
+ }
5274
+
5275
+ @media (0 <= width < 576px) {
5276
+
5277
+ .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5278
+ border-block-end: var(--border)
5279
+ }
5164
5280
 
5165
5281
  .categories-grid-module-C751R .categories-grid-module-7OZS1:nth-child(odd) {
5166
- border-right: var(--border);
5282
+ border-inline-end: var(--border);
5167
5283
  }
5168
- }
5284
+ }
5169
5285
 
5170
- @media (width >= 576px) {
5171
- .categories-grid-module-C751R {
5172
- --amount-of-columns: 3;
5286
+ @media (width >= 576px) {
5173
5287
 
5174
- border-top: var(--border);
5175
- border-left: var(--border);
5288
+ .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5289
+ border-block-end: var(--border);
5290
+ border-inline-end: var(--border)
5176
5291
  }
5177
-
5178
- .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5179
- border-right: var(--border);
5180
- border-bottom: var(--border);
5181
5292
  }
5182
- }
5183
5293
 
5184
- @media (width >= 1024px) {
5185
- .categories-grid-module-C751R {
5186
- --amount-of-columns: 4;
5294
+ @media (width >= 1024px) {
5187
5295
 
5188
- border: none;
5189
- background-color: unset;
5190
- gap: var(--space-16);
5296
+ .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5297
+ border: var(--border)
5298
+ }
5299
+ }
5300
+
5301
+ .categories-grid-module-C751R .categories-grid-module-Q7i00 {
5302
+ inline-size: 100%;
5191
5303
  }
5192
5304
 
5193
- .categories-grid-module-C751R .categories-grid-module-7OZS1 {
5194
- border: var(--border);
5305
+ .categories-grid-module-C751R .categories-grid-module-Q7i00 [class*='image-container'] {
5306
+ block-size: var(--image-size);
5195
5307
  }
5196
- }
5197
5308
 
5198
5309
  .search-input-module-xCCzd {
5199
5310
  box-sizing: border-box;
@@ -5393,6 +5504,7 @@ button.swiper-pagination-bullet {
5393
5504
  .search-section-module-qaTiw .search-section-module-E--U2 .search-section-module-AHlDR {
5394
5505
  margin: 0;
5395
5506
  color: var(--color-brand-dark-gray);
5507
+ font-family: inherit;
5396
5508
  font-size: var(--font-size-16);
5397
5509
  font-weight: var(--font-weight-normal);
5398
5510
  line-height: 1;
@@ -7337,6 +7449,10 @@ button.swiper-pagination-bullet {
7337
7449
  color: var(--color-brand-red);
7338
7450
  }
7339
7451
 
7452
+ .my-account-desktop-navigation-module-3BpoH {
7453
+ font-weight: bold;
7454
+ }
7455
+
7340
7456
  .product-details-page-layout-module-pPtZX {
7341
7457
  display: flex;
7342
7458
  flex-direction: column;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sonic-equipment/ui",
3
- "version": "171.0.0",
3
+ "version": "174.0.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -1 +0,0 @@
1
- export declare function CareerInnovateIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function CareerProactiveIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function CareerTeamplayerIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function FallbackIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SoMeFacebookIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SoMeInstagramIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SoMeLinkedInIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SoMeMailIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SoMeYouTubeIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function USPEfficiencyIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function USPStyleIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function USPSupportIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function Warranty10YIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function Warranty1YIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function Warranty3YIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function Warranty5YIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function WarrantyConsumableIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function WarrantyLifetimeIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SolidEventIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1,7 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
-
3
- function SolidEventIcon(props) {
4
- return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M5.151 21h13.708C20.956 21 22 19.983 22 17.969V6.031C22 4.017 20.956 3 18.859 3H5.151C3.054 3 2 4.007 2 6.031v11.938C2 19.993 3.054 21 5.151 21zm-.15-1.574c-.894 0-1.385-.46-1.385-1.369v-9.22c0-.9.491-1.369 1.385-1.369h13.988c.894 0 1.395.47 1.395 1.369v9.22c0 .91-.501 1.369-1.395 1.369H5.001zm5.047-8.448h.592c.351 0 .462-.098.462-.44v-.577c0-.342-.11-.45-.462-.45h-.592c-.351 0-.471.108-.471.45v.577c0 .342.12.44.471.44zm3.332 0h.592c.351 0 .472-.098.472-.44v-.577c0-.342-.12-.45-.472-.45h-.592c-.351 0-.472.108-.472.45v.577c0 .342.12.44.472.44zm3.331 0h.593c.35 0 .471-.098.471-.44v-.577c0-.342-.12-.45-.471-.45h-.593c-.35 0-.461.108-.461.45v.577c0 .342.11.44.461.44zm-9.994 3.197h.582c.36 0 .471-.097.471-.44v-.576c0-.343-.11-.44-.471-.44h-.582c-.362 0-.472.097-.472.44v.576c0 .343.11.44.472.44zm3.331 0h.592c.351 0 .462-.097.462-.44v-.576c0-.343-.11-.44-.462-.44h-.592c-.351 0-.471.097-.471.44v.576c0 .343.12.44.471.44zm3.332 0h.592c.351 0 .472-.097.472-.44v-.576c0-.343-.12-.44-.472-.44h-.592c-.351 0-.472.097-.472.44v.576c0 .343.12.44.472.44zm3.331 0h.593c.35 0 .471-.097.471-.44v-.576c0-.343-.12-.44-.471-.44h-.593c-.35 0-.461.097-.461.44v.576c0 .343.11.44.461.44zm-9.994 3.207h.582c.36 0 .471-.107.471-.45v-.576c0-.342-.11-.44-.471-.44h-.582c-.362 0-.472.098-.472.44v.577c0 .342.11.45.472.45zm3.331 0h.592c.351 0 .462-.107.462-.45v-.576c0-.342-.11-.44-.462-.44h-.592c-.351 0-.471.098-.471.44v.577c0 .342.12.45.471.45zm3.332 0h.592c.351 0 .472-.107.472-.45v-.576c0-.342-.12-.44-.472-.44h-.592c-.351 0-.472.098-.472.44v.577c0 .342.12.45.472.45z", fill: "currentColor", fillRule: "nonzero" }) }));
5
- }
6
-
7
- export { SolidEventIcon };
@@ -1 +0,0 @@
1
- export declare function SolidSaleIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1,7 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
-
3
- function SolidSaleIcon(props) {
4
- return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm3.45 5.318c-.638 0-1.26.128-1.26.128l-6.582 9.426.04.008c.143.028.648.12 1.188.12a7.52 7.52 0 0 0 1.216-.12l.044-.008 6.582-9.426s-.622-.128-1.228-.128zm.093 5.465c-1.61 0-2.36.754-2.536 1.86l-.08.465c-.19 1.122.351 1.876 1.962 1.876 1.61 0 2.36-.754 2.535-1.876l.08-.465c.175-1.106-.351-1.86-1.961-1.86zm-.24 1.54c.383 0 .51.095.463.32l-.08.465c-.032.224-.175.337-.558.337-.383 0-.494-.113-.462-.337l.08-.465c.047-.225.19-.32.557-.32zM9.646 7c-1.594 0-2.375.754-2.55 1.876l-.064.465c-.176 1.106.366 1.86 1.96 1.86 1.611 0 2.376-.754 2.552-1.86l.064-.465C11.783 7.754 11.257 7 9.646 7zm-.255 1.555c.383 0 .51.097.463.321l-.064.465c-.048.224-.191.337-.574.337-.383 0-.494-.113-.446-.337l.063-.465c.048-.224.192-.32.558-.32z", fill: "currentColor", fillRule: "nonzero" }) }));
5
- }
6
-
7
- export { SolidSaleIcon };
@@ -1 +0,0 @@
1
- export declare function SolidVoteThumbsdownIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SolidVoteThumbsupIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function StrokeCollapseIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function StrokeExpandIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function StrokeVoteThumbsdownIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function StrokeVoteThumbsupIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function useBasePath(): string | undefined;
@@ -1,12 +0,0 @@
1
- "use client";
2
- import { useGlobalState } from '../providers/global-state-provider.js';
3
-
4
- function useBasePath() {
5
- const [state] = useGlobalState('routing');
6
- if (!state) {
7
- throw new Error('RouteProvider not found');
8
- }
9
- return state.basePath;
10
- }
11
-
12
- export { useBasePath };