@sonic-equipment/ui 0.0.38 → 0.0.40

package/dist/lists/product-overview-grid/product-overview-grid.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/loading/loading-overlay.d.ts

@@ -0,0 +1 @@
+export declare function LoadingOverlay(): import("react/jsx-runtime").JSX.Element;

package/dist/loading/progress-circle.d.ts

@@ -0,0 +1,4 @@
+export interface ProgressCircleProps {
+    className?: string;
+}
+export declare function ProgressCircle({ className }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;

package/dist/loading/progress-circle.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import { ProgressCircle } from './progress-circle';
+declare const meta: {
+    component: typeof ProgressCircle;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/media/image/image.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/pages/page/page.stories.d.ts

@@ -14,6 +14,7 @@ declare const meta: {
         layout: string;
     };
     render: ({ children, ...props }: import("./page").PageProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/pages/page-container/page-container.stories.d.ts

@@ -12,6 +12,7 @@ declare const meta: {
         children: React.ReactNode;
         className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/pages/product-listing-page/product-listing-page.d.ts

@@ -13,4 +13,4 @@ export interface ProductListingPageProps {
     pageUrl: string;
     searchClient?: SearchClient;
 }
-export declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-listing-page/product-listing-page.stories.d.ts

@@ -17,6 +17,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/shared/api/bff/hooks/use-fetch-product-listing-page-data.stories.d.ts

@@ -15,6 +15,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/shared/api/shop/hooks/cart/cart.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/shared/routing/route-provider.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/dist/styles.css

@@ -206,6 +206,7 @@
 
   /* Box shadows */
   --box-shadow-heavy: 0 0 96px 0 rgb(0 0 0 / 30%);
+  --box-shadow-medium: 0 0 16px 0 rgb(0 0 0 / 30%);
   --box-shadow-light: 0 0 8px 0 rgb(0 0 0 / 30%);
 }
 :root {
@@ -291,7 +292,7 @@
   font-size: var(--font-size-base);
   font-style: italic;
   font-weight: var(--font-weight-bold);
-  gap: 5px;
+  gap: 2px;
   line-height: var(--line-height-base);
   text-transform: uppercase;
   -webkit-user-select: none;
@@ -373,6 +374,7 @@
 
 .button-module-tmyk8 .button-module-ydQAo {
     color: var(--color-brand-white);
+    transform: translateY(-1px);
   }
 
 .button-module-tmyk8:where([data-disabled]) {
@@ -699,6 +701,11 @@
         opacity: 0.4;
       }
 
+  .number-field-module-gmnog .number-field-module-8Lvgh svg {
+      width: 16px;
+      height: 16px;
+    }
+
   .number-field-module-gmnog span:empty {
     display: none;
   }
@@ -776,6 +783,10 @@
     text-decoration: line-through;
   }
 
+  .product-price-module-oIU1K .product-price-module-til0s.product-price-module-V1NCf {
+      opacity: 0;
+    }
+
   .product-price-module-oIU1K .product-price-module-FfVhl {
     display: flex;
     flex-wrap: wrap;
@@ -811,7 +822,7 @@
     font-weight: var(--font-weight-normal);
   }
 
-  .product-price-module-oIU1K:has(.product-price-module-til0s) {
+  .product-price-module-oIU1K:has(.product-price-module-til0s:not(.product-price-module-V1NCf)) {
     --current-price-color: var(--color-brand-red);
     --current-price-font-style: italic;
   }
@@ -848,6 +859,7 @@
 
 .product-card-module-pLaiB {
   --title-font-size: var(--font-size-16);
+  --box-shadow: var(--box-shadow-medium);
   --price-font-size-wholes: var(--font-size-32);
   --price-font-size-decimals: var(--font-size-20);
   --image-width: 122px;
@@ -941,13 +953,14 @@
 
 @media (hover: hover) {
     .product-card-module-pLaiB:hover {
-      box-shadow: var(--box-shadow-heavy);
+      box-shadow: var(--box-shadow);
       scale: 1.04;
     }
 }
 
 @container (min-width: 273px) {
   .product-card-module-pLaiB {
+    --box-shadow: var(--box-shadow-heavy);
     --image-width: 204px;
     --padding-bottom: var(--space-24);
   }
@@ -976,98 +989,6 @@
   }
 }
 
-.category-card-module-4NUjH {
-  all: unset;
-  display: grid;
-  max-width: 136px;
-  cursor: pointer;
-  padding-inline: 10px;
-  place-items: center;
-  -webkit-tap-highlight-color: transparent;
-}
-
-  .category-card-module-4NUjH,
-  .category-card-module-4NUjH * {
-    box-sizing: border-box;
-  }
-
-  .category-card-module-4NUjH .category-card-module-LEhh3 {
-    margin-top: var(--space-8);
-    margin-bottom: 0;
-    color: var(--color-brand-black);
-    font-size: var(--font-size-12);
-    font-style: italic;
-    font-weight: var(--font-weight-bold);
-    line-height: 1;
-    text-align: center;
-    text-transform: uppercase;
-    word-break: break-word;
-  }
-
-  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3 {
-      color: var(--color-brand-red);
-    }
-
-  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .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;
-  }
-
-  .category-card-module-4NUjH .category-card-module-oNTrK img {
-      position: relative;
-      z-index: 5;
-      margin: auto;
-    }
-
-  .category-card-module-4NUjH .category-card-module-oNTrK::after {
-      position: absolute;
-      width: 52px;
-      border-radius: 100%;
-      margin: auto;
-      aspect-ratio: 1 / 1;
-      background-color: var(--color-brand-light-gray);
-      content: '';
-      inset: 0;
-    }
-
-  @media (width >= 768px) {
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 74px;
-    }
-
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 62px;
-      }
-  }
-
-  @media (width >= 1024px) {.category-card-module-4NUjH {
-    padding-inline: 0
-}
-  }
-
-  @media (width >= 1440px) {.category-card-module-4NUjH {
-    max-width: 144px
-}
-
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 96px;
-    }
-
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 80px;
-      }
-
-    .category-card-module-4NUjH .category-card-module-LEhh3 {
-      margin-top: var(--space-16);
-    }
-  }
-
 /**
  * Swiper 11.1.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -1362,28 +1283,31 @@
     position: relative;
     overflow: visible;
   }
-.carousel-module-ealh- .carousel-module-IftbN::before,
-    .carousel-module-ealh- .carousel-module-IftbN::after {
-      position: absolute;
-      z-index: calc(var(--carousel-layer) - 1);
-      top: 0;
-      width: calc((100vw - 100%) / 2);
-      height: 100%;
-      background: var(--color-brand-white);
-      content: '';
-      opacity: 1;
-      transition: opacity 0.2s ease;
-    }
-.carousel-module-ealh- .carousel-module-IftbN::before {
-      left: calc(-1 * ((100vw - 100%) / 2));
-    }
-.carousel-module-ealh- .carousel-module-IftbN::after {
-      right: calc(-1 * ((100vw - 100%) / 2));
-    }
+.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before,
+      .carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::after {
+        position: absolute;
+        z-index: calc(var(--carousel-layer) - 1);
+        top: 0;
+        width: calc((100vw - 100%) / 2);
+        height: 100%;
+        background: var(--color-brand-white);
+        content: '';
+        opacity: 1;
+        transition: opacity 0.2s ease;
+      }
+.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before {
+        left: calc(-1 * ((100vw - 100%) / 2));
+      }
+.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::after {
+        right: calc(-1 * ((100vw - 100%) / 2));
+      }
 .carousel-module-ealh- .carousel-module-bUMlb {
     display: block;
     width: auto;
   }
+.carousel-module-ealh- .carousel-module-kcqEE.carousel-module-uCrOA {
+      display: none;
+    }
 .carousel-module-ealh-:has(.carousel-module-T7bTr .carousel-module-kcqEE:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
         opacity: 0;
       }
@@ -1739,6 +1663,7 @@
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
+  flex-direction: column;
   flex-grow: 1;
   gap: var(--space-4);
 }
@@ -1988,6 +1913,42 @@
       }
 }
 
+.progress-circle-module-4nweP {
+  --width: var(--space-24);
+
+  width: var(--width);
+  height: var(--width);
+  border-radius: 50%;
+  animation: progress-circle-module-jPY-W 0.6s infinite linear;
+  background: conic-gradient(#0000 10%, #000);
+  -webkit-mask: radial-gradient(farthest-side, #0000 9px, #000 0);
+          mask: radial-gradient(farthest-side, #0000 9px, #000 0);
+}
+
+@keyframes progress-circle-module-jPY-W {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.loading-overlay-module-L67Gy {
+  --header-height-desktop: 96px;
+  --header-height-mobile: 54px;
+  --header-height: var(--header-height-mobile);
+
+  display: grid;
+  width: 100%;
+  height: calc(100dvh - var(--header-height));
+  background-color: var(--color-white);
+  place-items: center;
+}
+
+@media (width >= 1024px) {
+  .loading-overlay-module-L67Gy {
+    --header-height: var(--header-height-desktop);
+  }
+}
+
 .page-container-module-PYmbC {
   overflow: hidden;
 }
@@ -2191,6 +2152,103 @@
     gap: var(--space-8);
   }
 
+  .pagination-module-k4OgY button svg, .pagination-module-oq89A button svg {
+    width: 12px;
+    height: 12px;
+  }
+
+.category-card-module-4NUjH {
+  all: unset;
+  display: grid;
+  max-width: 136px;
+  cursor: pointer;
+  padding-inline: 10px;
+  place-items: center;
+  -webkit-tap-highlight-color: transparent;
+}
+
+  .category-card-module-4NUjH,
+  .category-card-module-4NUjH * {
+    box-sizing: border-box;
+  }
+
+  .category-card-module-4NUjH .category-card-module-LEhh3 {
+    margin-top: var(--space-8);
+    margin-bottom: 0;
+    color: var(--color-brand-black);
+    font-size: var(--font-size-12);
+    font-style: italic;
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    text-align: center;
+    text-transform: uppercase;
+    word-break: break-word;
+  }
+
+  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3 {
+      color: var(--color-brand-red);
+    }
+
+  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .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;
+  }
+
+  .category-card-module-4NUjH .category-card-module-oNTrK img {
+      position: relative;
+      z-index: 5;
+      margin: auto;
+    }
+
+  .category-card-module-4NUjH .category-card-module-oNTrK::after {
+      position: absolute;
+      width: 52px;
+      border-radius: 100%;
+      margin: auto;
+      aspect-ratio: 1 / 1;
+      background-color: var(--color-brand-light-gray);
+      content: '';
+      inset: 0;
+    }
+
+  @media (width >= 768px) {
+    .category-card-module-4NUjH .category-card-module-oNTrK {
+      width: 74px;
+    }
+
+      .category-card-module-4NUjH .category-card-module-oNTrK::after {
+        width: 62px;
+      }
+  }
+
+  @media (width >= 1024px) {.category-card-module-4NUjH {
+    padding-inline: 0
+}
+  }
+
+  @media (width >= 1440px) {.category-card-module-4NUjH {
+    max-width: 144px
+}
+
+    .category-card-module-4NUjH .category-card-module-oNTrK {
+      width: 96px;
+    }
+
+      .category-card-module-4NUjH .category-card-module-oNTrK::after {
+        width: 80px;
+      }
+
+    .category-card-module-4NUjH .category-card-module-LEhh3 {
+      margin-top: var(--space-16);
+    }
+  }
+
 .sidebar-module-fSa9Q {
   --transition-timing-function: ease-in-out;
 
@@ -2486,6 +2544,117 @@
                 appearance: none;
       }
 
+.search-content-module-KIok6 {
+  --padding-inline: var(--space-16);
+  --padding-block: var(--space-20);
+
+  display: grid;
+  gap: var(--space-24);
+  grid-template-columns: 1fr;
+}
+
+  .search-content-module-KIok6 .search-content-module-YRLIf {
+    display: block;
+  }
+
+  .search-content-module-KIok6 .search-content-module-qK5sg {
+    display: block;
+  }
+
+.search-content-module-HLQ4O {
+  display: grid;
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+}
+
+.search-content-module-HLQ4O .search-content-module-ywvOI {
+    margin-top: 0;
+    margin-bottom: var(--space-8);
+    color: var(--color-brand-dark-gray);
+    font-size: var(--font-size-16);
+    font-weight: var(--font-weight-normal);
+    line-height: 1;
+  }
+
+.search-content-module-HLQ4O.search-content-module--V5hi {
+    padding-block-end: 0;
+    padding-inline: 0;
+  }
+
+.search-content-module-HLQ4O.search-content-module--V5hi .search-content-module-ywvOI {
+      padding-inline: var(--padding-inline);
+    }
+
+.search-content-module-bcFCH {
+  --column-gap: var(--space-16);
+  --card-width: 154px;
+
+  overflow: hidden;
+  padding-top: 32px;
+  margin-top: -32px;
+  gap: var(--column-gap);
+  padding-block-end: var(--padding-block);
+  padding-inline: var(--padding-inline);
+}
+
+@media (width >= 768px) {
+  .search-content-module-KIok6 {
+    grid-template-columns: 324px 1fr;
+  }
+
+  .search-content-module-bcFCH {
+    --card-width: 192px;
+  }
+}
+
+@media (width >= 1024px) {
+  .search-content-module-KIok6 {
+    --padding-inline: var(--space-32);
+  }
+}
+
+.product-carousel-module-XVTB1 {
+  --slide-width: 154px;
+
+  position: relative;
+}
+
+  .product-carousel-module-XVTB1 > * {
+    width: var(--slide-width);
+  }
+
+  .product-carousel-module-XVTB1:not(:last-child)::after {
+      position: absolute;
+      top: 0;
+      left: calc(100% + var(--column-gap) / 2);
+      width: 1px;
+      height: 100%;
+      background-image: linear-gradient(
+        to bottom,
+        var(--color-white),
+        #e0dfdf 10%,
+        #bdbcbc 51%,
+        #e0dfdf 90%,
+        var(--color-white)
+      );
+      content: '';
+    }
+
+  @media (hover: hover) {
+    .product-carousel-module-XVTB1:has(> :hover) {
+      z-index: 1;
+    }
+      .product-carousel-module-XVTB1:has(> :hover)::after, .product-carousel-module-XVTB1:has(+ .product-carousel-module-XVTB1:hover)::after {
+        display: none;
+      }
+  }
+
+@media (width >= 768px) {
+  .product-carousel-module-XVTB1 {
+    --slide-width: 192px;
+  }
+}
+
 .search-result-panel-module-KBrc9 {
   position: absolute;
   z-index: var(--sidebar-layer);
@@ -2493,15 +2662,12 @@
   left: 0;
   overflow: hidden;
   width: 100%;
+  box-sizing: border-box;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow-heavy);
   transition: transform 0.3s ease-in-out;
 }
 
-  .search-result-panel-module-KBrc9:not(:empty) {
-    padding: 20px 32px;
-  }
-
   .search-result-panel-module-KBrc9.search-result-panel-module-Us8rb,
   .search-result-panel-module-KBrc9.search-result-panel-module-7UxfH {
     transform: translateY(0);

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

@@ -29,6 +29,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    tags: string[];
     title: string;
 };
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -23,6 +23,8 @@
     "build-storybook": "storybook build",
     "check-updates": "npx npm-check-updates",
     "clean": "rimraf node_modules dist",
+    "generate-icons": "node src/utils/icons/import-icons.js",
+    "generate-icons:watch": "nodemon src/utils/icons/import-icons.js",
     "reinstall": "pnpm clean; pnpm install && pnpm build",
     "dev": "storybook dev -p 6006",
     "proxy": "node src/proxy/proxy.js",
@@ -89,6 +91,7 @@
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "instantsearch.js": "^4.72.2",
+    "nodemon": "^3.1.4",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",

package/dist/icons/arrows/chrevron-down-bold.d.ts

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

package/dist/icons/arrows/chrevron-down-slim.d.ts

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

package/dist/icons/arrows/left-arrow-filled-icon.d.ts

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

package/dist/icons/arrows/right-arrow-filled-icon.d.ts

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

package/dist/icons/arrows/text-aligned-arrow-icon.d.ts

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

package/dist/icons/cart/cart-filled-icon.d.ts

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

package/dist/icons/cart/cart-outlined-icon.d.ts

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

package/dist/icons/checkmark/checkmark-filled-icon.d.ts

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

package/dist/icons/chevrons/chevron-left-filled-icon.d.ts

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

package/dist/icons/chevrons/chevron-right-filled-icon.d.ts

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

package/dist/icons/close/close-filled-icon.d.ts

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

package/dist/icons/dehashed/dehashed-outlined-icon.d.ts

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