@sonic-equipment/ui 0.0.26 → 0.0.28

package/dist/styles.css

@@ -131,6 +131,7 @@
 
   /* Neutrals */
   --color-gray-50: #fbfbfb;
+  --color-gray-75: #f6f6f6;
   --color-gray-100: #ededed;
   --color-gray-500: #bcbcbc;
   --color-gray-900: #6f6f6f;
@@ -254,6 +255,7 @@
         font-weight: var(--font-weight-bold);
       }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY:not(:last-of-type)::after {
+      color: var(--color-brand-medium-gray);
       content: '/';
       margin-inline: 10px;
     }
@@ -618,18 +620,61 @@
     justify-content: space-between;
   }
 
+  .number-field-module-gmnog .number-field-module-8Lvgh input {
+      min-width: var(--space-36);
+      transition: font-size 0.5s ease;
+    }
+
+  .number-field-module-gmnog .number-field-module-8Lvgh:has(button[data-pressed]) input {
+        animation: number-field-module-OlEoa 100ms infinite;
+      }
+
   .number-field-module-gmnog .number-field-module-8Lvgh button {
       all: unset;
+      position: relative;
+      display: flex;
       width: var(--space-32);
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      font-size: var(--font-size-24);
+      font-size: var(--font-size-32);
+      -webkit-tap-highlight-color: transparent;
       text-align: center;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
     }
 
+  .number-field-module-gmnog .number-field-module-8Lvgh button[data-pressed]::before {
+          position: absolute;
+          z-index: -1;
+          top: 50%;
+          left: 50%;
+          display: block;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          margin-top: -12px;
+          margin-left: -12px;
+          background-color: var(--color-brand-light-gray);
+          content: '';
+        }
+
   .number-field-module-gmnog span:empty {
     display: none;
   }
 
+@keyframes number-field-module-OlEoa {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+}
+
 .add-to-cart-button-module-AWFvQ {
   display: inline-flex;
   flex-direction: row;
@@ -888,6 +933,7 @@
   display: grid;
   max-width: 136px;
   cursor: pointer;
+  padding-inline: 10px;
   place-items: center;
 }
 
@@ -945,6 +991,11 @@
       }
   }
 
+  @media (width >= 1024px) {.category-card-module-4NUjH {
+    padding-inline: 0
+}
+  }
+
   @media (width >= 1440px) {.category-card-module-4NUjH {
     max-width: 144px
 }
@@ -1293,9 +1344,6 @@
         right: 0;
         transform: translate(50%, 0);
       }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-T7bTr .carousel-module-p5oAL {
-          transform: rotate(180deg);
-        }
 .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE {
         width: 44px;
         height: 44px;
@@ -1311,8 +1359,8 @@
           background-color: var(--color-brand-light-gray);
         }
 .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-disabled] {
+          color: #bcbcbc66;
           cursor: default;
-          opacity: 0.4;
         }
 .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-Hi-0z {
         top: var(--space-24);
@@ -1320,7 +1368,12 @@
 .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-Hi-0z {
         top: 50%;
       }
-@media (width < 576px) {
+@media (width < 1024px) {
+.carousel-module-ealh- {
+    width: calc(100% + 20px);
+    margin-left: -10px
+}
+
     .carousel-module-ealh- .carousel-module-Hi-0z {
       display: none;
     }
@@ -1625,8 +1678,8 @@
 
   all: unset;
   position: relative;
-  display: grid;
-  width: 100%;
+  display: inline-flex;
+  box-sizing: border-box;
   gap: var(--space-4);
 }
 
@@ -1867,26 +1920,34 @@
       }
 }
 
-.page-layout-module-osQ2n {
-  --page-layout-padding: 1rem;
-
-  position: relative;
-  box-sizing: border-box;
-  padding: var(--page-layout-padding);
-  padding-bottom: var(--space-64);
+.page-layout-module-sSsgZ {
+  overflow: hidden;
 }
 
-  @media (width >= 768px) {.page-layout-module-osQ2n {
-    max-width: calc(806px + (2 * var(--page-layout-padding)));
-    margin: 0 auto
-}
+  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
+    --page-layout-padding: 10px;
+
+    position: relative;
+    box-sizing: border-box;
+    padding: var(--page-layout-padding);
+    padding-bottom: var(--space-64);
   }
 
-  @media (width >= 1440px) {.page-layout-module-osQ2n {
-    max-width: calc(1222px + (2 * var(--page-layout-padding)));
-    padding-bottom: var(--space-96)
-}
+  @media (width >= 768px) {
+
+  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
+      max-width: calc(806px + (2 * var(--page-layout-padding)));
+      margin: 0 auto
   }
+    }
+
+  @media (width >= 1440px) {
+
+  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
+      max-width: calc(1222px + (2 * var(--page-layout-padding)));
+      padding-bottom: var(--space-96)
+  }
+    }
 
 .heading-module-pMC65 {
   padding: 0;
@@ -2142,11 +2203,17 @@
     margin-bottom: 44px;
   }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr {
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: var(--space-24);
-    grid-template-columns: auto 1fr auto;
+    row-gap: var(--space-8);
   }
+  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
+      display: flex;
+      justify-content: flex-end;
+    }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-zx79v {
       margin: auto;
     }
@@ -2166,6 +2233,11 @@
     grid-column: span 2;
   }
   @media (width >= 1440px) {
+    .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
     .product-listing-page-module-dmIHF .product-listing-page-module-ICkKg {
       grid-template-columns: auto 1fr;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -31,41 +31,41 @@
     "start": "http-server ./storybook-static",
     "stylelint": "stylelint --config .stylelintrc.cjs \"src/**/*.css\"",
     "stylelint:fix": "stylelint --config .stylelintrc.cjs \"src/**/*.css\" --formatter verbose --fix",
-    "test:all": "npx concurrently -g --names \"TSC,ESLINT,STYLELINT\" -c auto --kill-others-on-fail \"pnpm test:types\" \"pnpm lint\" \"pnpm stylelint\"",
+    "test:all": "npx concurrently -g --names \"TSC,ESLINT,STYLELINT\" -c auto --kill-others-on-fail \"npm run test:types\" \"npm run lint\" \"npm run stylelint\"",
     "test:types": "tsc --noEmit --pretty false",
     "update-packages": "npx npm-check-updates -u"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "qs": "^6",
     "algoliasearch": "^4",
     "instantsearch.js": "^4",
+    "qs": "^6",
+    "react": "^18",
+    "react-dom": "^18",
     "react-instantsearch": "^7",
     "react-instantsearch-core": "^7"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^1.5.0",
     "@csstools/postcss-global-data": "^2.1.1",
     "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-docs": "^8.1.3",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.3",
-    "@storybook/addon-links": "^8.1.3",
-    "@storybook/addon-viewport": "^8.1.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/preview-api": "^8.1.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/react-vite": "^8.1.3",
-    "@storybook/test": "^8.1.3",
-    "@types/react": "^18.3.2",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-viewport": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/preview-api": "^8.1.9",
+    "@storybook/react": "^8.1.9",
+    "@storybook/react-vite": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
@@ -75,7 +75,7 @@
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-no-relative-import-paths": "^1.5.4",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
@@ -85,7 +85,7 @@
     "eslint-plugin-unused-imports": "^3.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
-    "instantsearch.js": "^4.69.0",
+    "instantsearch.js": "^4.71.1",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",
@@ -98,23 +98,28 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-ts": "^3.4.5",
-    "storybook": "^8.1.3",
-    "stylelint": "^16.5.0",
+    "storybook": "^8.1.9",
+    "stylelint": "^16.6.1",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^36.0.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
+    "@algolia/autocomplete-core": "^1.17.2",
+    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.2",
+    "@algolia/autocomplete-plugin-recent-searches": "^1.17.2",
+    "@algolia/autocomplete-preset-algolia": "^1.17.2",
     "@algolia/client-search": "^4.23.3",
+    "@tanstack/react-query": "^5.45.0",
     "algoliasearch": "^4.23.3",
-    "instantsearch.js": "^4.69.0",
     "clsx": "^2.1.1",
+    "instantsearch.js": "^4.71.1",
     "react-aria-components": "^1.2.1",
-    "react-instantsearch": "^7.9.0",
-    "swiper": "^11.1.3"
+    "react-instantsearch": "^7.11.1",
+    "swiper": "^11.1.4"
   },
   "publishConfig": {
     "access": "public"

package/dist/shared/providers/breadcrumb-provider.d.ts

@@ -1,11 +0,0 @@
-export interface Link {
-    href: string;
-    label: string;
-}
-interface Props {
-    links: Link[];
-    updateLinks: (links: Link[]) => void;
-}
-export declare function BreadcrumbProvider(props: Props): null;
-export declare function useBreadcrumb(): Props;
-export {};