@sonic-equipment/ui 173.0.0 → 174.0.0

package/dist/shared/routing/route-utils.js

@@ -1,6 +1,9 @@
-function buildHref({ basePath, href, }) {
-    if (basePath && href.startsWith('/') && !href.startsWith(`/${basePath}`)) {
-        return `/${basePath}${href}`;
+function buildHref({ basePathname, href, }) {
+    if (!href.startsWith('http') &&
+        basePathname &&
+        basePathname !== '/' &&
+        !href.startsWith(`/${basePathname}`)) {
+        return `/${basePathname.replace(/^\//, '')}/${href.replace(/^\//, '')}`;
     }
     return href;
 }

package/dist/shared/routing/types.d.ts

@@ -1,12 +1,16 @@
 import { ElementType } from 'react';
 export interface RouteContext {
     Link?: ElementType<RouteLinkElementProps>;
-    basePath?: string;
     navigate: NavigateFunction;
+    url: {
+        basePathname?: string;
+        pathname: string;
+        search: string;
+    };
 }
 export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement> {
     href: string;
-    onNavigate: () => void;
+    onNavigate?: () => void;
     route?: NavigateOptions;
 }
 export interface NavigateOptions {

package/dist/shared/routing/use-location.d.ts

@@ -0,0 +1,9 @@
+import qs from 'query-string';
+export declare function useLocation(): {
+    basePathname: string | undefined;
+    fullPathname: string | undefined;
+    href: string;
+    pathname: string | undefined;
+    query: qs.ParsedQuery<string>;
+    search: string | undefined;
+};

package/dist/shared/routing/use-location.js

@@ -0,0 +1,18 @@
+import qs from 'query-string';
+import { useGlobalState } from '../providers/global-state-provider.js';
+
+function useLocation() {
+    const [routeState] = useGlobalState('routing');
+    const { url: { basePathname, pathname, search }, } = routeState || { url: {} };
+    const query = qs.parse(search || '');
+    return {
+        basePathname,
+        fullPathname: pathname,
+        href: `${pathname}${search}`,
+        pathname: pathname?.replace(new RegExp(`^${basePathname}`), ''),
+        query,
+        search,
+    };
+}
+
+export { useLocation };

package/dist/shared/routing/use-route-link.d.ts

@@ -4,5 +4,6 @@ export declare function useRouteLink(): {
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;
         onNavigate: () => void;
+        route: NavigateOptions | undefined;
     };
 };

package/dist/shared/routing/use-route-link.js

@@ -1,20 +1,21 @@
 import { useCallback } from 'react';
 import { buildHref } from './route-utils.js';
-import { useBasePath } from './use-base-path.js';
+import { useLocation } from './use-location.js';
 import { useOnNavigate } from './use-on-navigate.js';
 import { useRouteLinkElement } from './use-route-link-element.js';
 
 function useRouteLink() {
-    const basePath = useBasePath();
+    const { basePathname } = useLocation();
     const RouteLinkElement = useRouteLinkElement();
     const triggerCallbacks = useOnNavigate();
     const getRouteLinkProps = useCallback((href, route) => {
-        href = buildHref({ basePath, href });
+        href = buildHref({ basePathname, href });
         return {
             href,
             onNavigate: () => triggerCallbacks(href, route),
+            route,
         };
-    }, [basePath, triggerCallbacks]);
+    }, [basePathname, triggerCallbacks]);
     return {
         RouteLinkElement,
         getRouteLinkProps,

package/dist/shared/routing/with-routing.js

@@ -1,17 +1,9 @@
 import { createElement } from 'react';
-import { useBasePath } from './use-base-path.js';
 import { useNavigate } from './use-navigate.js';
 
 function withRouting(component) {
-    const Component = ({ href, onClick, route, ...rest }) => {
+    const Component = ({ href, onClick, onNavigate, route, ...rest }) => {
         const { navigate } = useNavigate();
-        const basePath = useBasePath();
-        if (basePath &&
-            href &&
-            href.startsWith('/') &&
-            !href.startsWith(`/${basePath}`)) {
-            href = `/${basePath}${href}`;
-        }
         const props = {
             ...rest,
             href,
@@ -28,6 +20,7 @@ function withRouting(component) {
                 }
                 return navigate(href, route);
             },
+            ...(component === 'a' ? {} : { onNavigate }),
             route,
         };
         return createElement(component, props);

package/dist/sidebar/toggle-sidebar-button.js

@@ -7,7 +7,7 @@ import { useSidebar } from './use-sidebar.js';
 
 const ToggleSidebarButton = () => {
     const { isOpen, toggle } = useSidebar();
-    return (jsx(Button, { color: "secondary", icon: jsx(StrokeFilterIcon, {}), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
+    return (jsx(Button, { light: true, color: "secondary", icon: jsx(StrokeFilterIcon, {}), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
 export { ToggleSidebarButton };

package/dist/styles.css

@@ -813,6 +813,10 @@ html {
   vertical-align: text-bottom;
 }
 
+  .button-module-V4meK:where(.button-module-fepAr) {
+    font-weight: var(--font-weight-normal);
+  }
+
   .button-module-V4meK:where([data-disabled]) {
     cursor: default;
   }
@@ -880,7 +884,6 @@ html {
   padding: 0 var(--space-16);
   border-radius: var(--border-radius-20);
   font-style: normal;
-  font-weight: var(--font-weight-normal);
   text-transform: none;
 }
 
@@ -2560,11 +2563,18 @@ html {
 }
 
 .category-card-module-4NUjH {
+  --color: var(--color-black);
+  --image-margin: var(--space-12);
+  --gap: var(--space-8);
+  --image-scale: 1;
+  --duration: var(--transition-duration-short);
+
   all: unset;
   display: grid;
-  width: 88px;
+  color: var(--color);
   cursor: pointer;
-  padding-inline: 10px;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, min-content) min-content;
   place-items: center;
   -webkit-tap-highlight-color: transparent;
 }
@@ -2575,101 +2585,174 @@ html {
   }
 
   .category-card-module-4NUjH .category-card-module-LEhh3 {
-    display: flex;
-    align-items: center;
-    margin-top: var(--space-8);
-    margin-bottom: 0;
-    gap: 2px;
-    transition: color 0.2s ease;
+    overflow: hidden;
+    align-self: flex-start;
+    font-size: var(--font-size-12);
+    font-style: italic;
+    font-weight: var(--font-weight-bold);
+    inline-size: 100%;
+    line-height: 1;
+    margin-block-start: var(--gap);
+    text-align: center;
+    text-transform: uppercase;
+    word-wrap: break-word;
   }
 
-  .category-card-module-4NUjH .category-card-module-LEhh3 span {
-      display: block;
-      font-size: var(--font-size-12);
-      font-style: italic;
-      font-weight: var(--font-weight-bold);
-      line-height: 1;
-      overflow-wrap: break-word;
-      text-align: center;
-      text-transform: uppercase;
-    }
-
-  .category-card-module-4NUjH .category-card-module-LEhh3 .category-card-module-hL4-A {
-      display: block;
-      margin-bottom: 1px;
-      color: var(--color-brand-red);
-    }
-
-  .category-card-module-4NUjH:hover .category-card-module-RxWMW, .category-card-module-4NUjH:focus .category-card-module-RxWMW {
-      scale: 1.15;
-    }
-
-  .category-card-module-4NUjH:hover .category-card-module-LEhh3, .category-card-module-4NUjH:focus .category-card-module-LEhh3 {
-      color: var(--color-brand-red);
-    }
-
-  .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 {
-      color: var(--color-brand-red);
-    }
-
   .category-card-module-4NUjH .category-card-module-oNTrK {
     position: relative;
-    display: flex;
-    width: 62px;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1;
+
+    /* block-size: 100%; */
+
+    /* inline-size: calc(100% - (var(--image-margin) * 2)); */
+    margin-inline: var(--image-margin);
+    place-items: center;
+    place-self: center;
   }
 
   .category-card-module-4NUjH .category-card-module-oNTrK .category-card-module-RxWMW {
-      position: relative;
-      z-index: 1;
-      margin: auto;
-      aspect-ratio: 1;
       mix-blend-mode: multiply;
-      transition: scale 0.2s ease;
+      scale: var(--image-scale);
+      transition: scale var(--duration);
     }
 
   .category-card-module-4NUjH .category-card-module-oNTrK::after {
       position: absolute;
-      width: 52px;
+      z-index: -1;
       border-radius: 100%;
-      margin: auto;
-      aspect-ratio: 1 / 1;
-      background-color: var(--color-brand-light-gray);
+      aspect-ratio: 1;
+      background-color: rgb(0 0 0 / 7%);
       content: '';
-      inset: var(--space-2);
+      grid-area: 1 / -1;
+      inline-size: 83.5%;
+      inset: 50%;
+      translate: -50% -50%;
     }
 
-  @media (width >= 768px) {
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 74px;
-    }
+  .category-card-module-4NUjH:hover,
+  .category-card-module-4NUjH:focus {
+    --color: var(--color-brand-red);
+    --image-scale: 1.15;
+  }
 
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 62px;
-      }
+  .category-card-module-4NUjH.category-card-module-vJ7vB {
+    --color: var(--color-brand-red);
+  }
+
+  @container (min-width: 90px) {.category-card-module-4NUjH {
+    --image-margin: var(--space-8);
+    --gap: var(--space-12)
+}
   }
 
-  @media (width >= 1024px) {.category-card-module-4NUjH {
-    padding-inline: 0
+  @container (min-width: 96px) {.category-card-module-4NUjH {
+    --image-margin: 0;
+    --gap: var(--space-16)
 }
   }
 
-  @media (width >= 1440px) {.category-card-module-4NUjH {
-    width: 95px
+.data-card-module-DMbBO {
+  margin-bottom: var(--space-12);
+}
+
+.data-card-module-24uin {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  border: 1px solid var(--color-brand-medium-gray);
+  border-radius: var(--border-radius-22);
+  container-type: inline-size;
 }
 
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 96px;
+.data-card-module-24uin .data-card-module-j-RFT {
+    position: absolute;
+    display: grid;
+    color: var(--color-brand-red);
+    inset: 0;
+    place-content: center;
+  }
+
+.data-card-module-24uin .data-card-module-d9zvu {
+    position: absolute;
+    display: grid;
+    inset: 0;
+    place-content: center;
+  }
+
+.data-card-module-24uin .data-card-module-FVD44 {
+    position: absolute;
+    display: grid;
+    inset: 0;
+    place-content: center;
+  }
+
+.data-card-module-24uin .data-card-module-ZefqY {
+    padding: var(--space-32) var(--space-32) var(--space-16);
+  }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY {
+      padding: var(--space-20) var(--space-16) var(--space-16)
+  }
+    }
+
+.data-card-module-24uin .data-card-module-ZefqY.data-card-module-Fb4Cx {
+      visibility: hidden;
+    }
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
+      display: grid;
+      margin: 0;
+      gap: var(--space-16);
+      grid-template-areas: 'key value';
+      grid-template-columns:
+        minmax(min-content, max-content)
+        minmax(min-content, 1fr);
+      line-height: 1;
+    }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
+        grid-template-areas: unset;
+        grid-template-columns: 1fr
     }
+      }
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
+        margin: 0;
+        font-weight: var(--font-weight-bold);
+        grid-template-areas: 'key';
+        text-align: right;
+      }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
+          text-align: left
+      }
+        }
 
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 80px;
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-fcSbu {
+        margin: 0;
+        font-weight: var(--font-weight-normal);
+        grid-template-areas: 'value';
       }
 
-    .category-card-module-4NUjH .category-card-module-LEhh3 {
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
+      display: flex;
+      justify-content: flex-end;
       margin-top: var(--space-16);
+      gap: var(--space-8);
     }
-  }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
+        flex-direction: column
+    }
+      }
 
 .confirmation-dialog-module-Up-BC {
   max-width: 425px;
@@ -3757,19 +3840,15 @@ html {
 
   /* stylelint-disable-next-line no-descending-specificity */
 
-  /* stylelint-disable-next-line no-descending-specificity */
-
   .carousel-module-ealh-:has(.carousel-module-T7bTr:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
-        opacity: 0;
-      }
-
-  /* stylelint-disable-next-line no-descending-specificity */
+      opacity: 0;
+    }
 
   /* stylelint-disable-next-line no-descending-specificity */
 
   .carousel-module-ealh-:has(.carousel-module-984Rr:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
-        opacity: 0;
-      }
+      opacity: 0;
+    }
 
   .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE {
       position: absolute;
@@ -3804,8 +3883,10 @@ html {
 
   @media (width < 1024px) {
     .carousel-module-ealh-:has(.carousel-module-tPg7k) {
-      inline-size: calc(100% + 20px);
-      margin-inline-start: -10px;
+      inline-size: calc(100% + var(--page-container-padding-inline, 10px) * 2);
+      margin-inline-start: calc(
+        var(--page-container-padding-inline, 10px) * -1
+      );
     }
 
     .carousel-module-ealh- .carousel-module-kcqEE {
@@ -3915,19 +3996,31 @@ html {
     }
 }
 
-  .category-carousel-module-muLq-:not(:last-child) {
-      margin-right: var(--space-8);
-    }
+.category-carousel-module--QCHm {
+  --gap: var(--space-8);
+  --slide-size: 88px;
+}
 
-      @media (width >= 1024px) {  .category-carousel-module-muLq-:not(:last-child) {
-        margin-right: var(--space-12)
-    }
-      }
+  .category-carousel-module--QCHm .swiper-slide {
+    container-type: inline-size;
+    inline-size: var(--slide-size);
+  }
 
-      @media (width >= 1440px) {  .category-carousel-module-muLq-:not(:last-child) {
-        margin-right: var(--space-16)
+  .category-carousel-module--QCHm .swiper-slide:not(:last-child) {
+      margin-right: var(--gap);
     }
-      }
+
+  @media (width >= 1024px) {.category-carousel-module--QCHm {
+    --gap: var(--space-12);
+    --slide-size: 92px
+}
+  }
+
+  @media (width >= 1440px) {.category-carousel-module--QCHm {
+    --gap: var(--space-16);
+    --slide-size: 96px
+}
+  }
 
 .pagination-module-pQ-Pu .pagination-module-EnswA {
     position: relative;
@@ -5135,68 +5228,83 @@ button.swiper-pagination-bullet {
 }
 
 .categories-grid-module-C751R {
-  --amount-of-columns: 2;
+  --nr-of-columns: 2;
+  --item-padding: var(--space-16);
   --border: 1px solid var(--color-brand-light-gray);
+  --image-size: 62px;
 
+  position: relative;
   display: grid;
-  grid-template-columns: repeat(var(--amount-of-columns), 1fr);
+  grid-template-columns: repeat(var(--nr-of-columns), 1fr);
 }
 
-  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-    position: relative;
-    display: grid;
-    padding: var(--space-16) var(--space-4);
-    place-items: center;
+  @media (0 <= width < 576px) {.categories-grid-module-C751R {
+    border-block-start: var(--border);
+    inline-size: calc(100% + (var(--padding-inline) * 2));
+    inset-inline-start: calc(var(--padding-inline) * -1)
+}
   }
 
-  .categories-grid-module-C751R .categories-grid-module-Q7i00 {
-    width: 100%;
+  @media (width >= 576px) {.categories-grid-module-C751R {
+    --nr-of-columns: 3;
+
+    border-block: var(--border)
+}
   }
 
-@media (0 <= width < 576px) {
-  .categories-grid-module-C751R {
-    position: relative;
-    left: calc(var(--padding-inline) * -1);
-    width: calc(100% + (var(--padding-inline) * 2));
-    border-top: var(--border);
+  @media (width >= 1024px) {.categories-grid-module-C751R {
+    --nr-of-columns: 4;
+    --image-size: 74px;
+
+    border: none;
+    gap: var(--space-16)
+}
   }
 
-    .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-      border-bottom: var(--border);
-    }
+  @media (width >= 1440px) {.categories-grid-module-C751R {
+    --image-size: 96px
+}
+  }
+
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+    display: grid;
+    padding: var(--item-padding);
+    container-type: inline-size;
+  }
+
+  @media (0 <= width < 576px) {
+
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+      border-block-end: var(--border)
+  }
 
       .categories-grid-module-C751R .categories-grid-module-7OZS1:nth-child(odd) {
-        border-right: var(--border);
+        border-inline-end: var(--border);
       }
-}
+    }
 
-@media (width >= 576px) {
-  .categories-grid-module-C751R {
-    --amount-of-columns: 3;
+  @media (width >= 576px) {
 
-    border-top: var(--border);
-    border-left: var(--border);
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+      border-block-end: var(--border);
+      border-inline-end: var(--border)
   }
-
-    .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-      border-right: var(--border);
-      border-bottom: var(--border);
     }
-}
 
-@media (width >= 1024px) {
-  .categories-grid-module-C751R {
-    --amount-of-columns: 4;
+  @media (width >= 1024px) {
 
-    border: none;
-    background-color: unset;
-    gap: var(--space-16);
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+      border: var(--border)
+  }
+    }
+
+  .categories-grid-module-C751R .categories-grid-module-Q7i00 {
+    inline-size: 100%;
   }
 
-    .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-      border: var(--border);
+  .categories-grid-module-C751R .categories-grid-module-Q7i00 [class*='image-container'] {
+      block-size: var(--image-size);
     }
-}
 
 .search-input-module-xCCzd {
   box-sizing: border-box;
@@ -7341,6 +7449,10 @@ button.swiper-pagination-bullet {
   color: var(--color-brand-red);
 }
 
+.my-account-desktop-navigation-module-3BpoH {
+  font-weight: bold;
+}
+
 .product-details-page-layout-module-pPtZX {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "173.0.0",
+  "version": "174.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/icons/other/career-innovate-icon.d.ts

@@ -1 +0,0 @@
-export declare function CareerInnovateIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/career-proactive-icon.d.ts

@@ -1 +0,0 @@
-export declare function CareerProactiveIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/career-teamplayer-icon.d.ts

@@ -1 +0,0 @@
-export declare function CareerTeamplayerIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/fallback-icon.d.ts

@@ -1 +0,0 @@
-export declare function FallbackIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/some-facebook-icon.d.ts

@@ -1 +0,0 @@
-export declare function SoMeFacebookIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/some-instagram-icon.d.ts

@@ -1 +0,0 @@
-export declare function SoMeInstagramIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/some-linkedin-icon.d.ts

@@ -1 +0,0 @@
-export declare function SoMeLinkedInIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/some-mail-icon.d.ts

@@ -1 +0,0 @@
-export declare function SoMeMailIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/some-youtube-icon.d.ts

@@ -1 +0,0 @@
-export declare function SoMeYouTubeIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/usp-efficiency-icon.d.ts

@@ -1 +0,0 @@
-export declare function USPEfficiencyIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/usp-style-icon.d.ts

@@ -1 +0,0 @@
-export declare function USPStyleIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/other/usp-support-icon.d.ts

@@ -1 +0,0 @@
-export declare function USPSupportIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;