@depict-ai/react-ui 0.0.48 → 0.0.52

package/dist/index.d.ts

@@ -1,21 +1,10 @@
 import React, { PropsWithChildren, ReactNode } from "react";
-// @ts-ignore -- react-router is optional and only used for typing the reactRouterUseNavigate property
-import { useNavigate } from "react-router";
 import { Locale } from "@depict-ai/ui/locales";
 import { Display } from "@depict-ai/utilishared";
 import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui";
 export function DepictSearchField(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-type BaseSearchConfig = {
-    /**
-     * The merchant to use for the search.
-     * @example "YOUR_MERCHANT", "stronger"
-     */
-    merchant: string;
-    /**
-     * The market to use for the search.
-     * @example "YOUR_MARKET", "no", "en-de"
-     */
-    market: string;
+type NavigateFunction = (href: string) => void;
+type DepictSearchConfig = {
     /**
      * The path to the search page.
      * @example "/search", "/sok"
@@ -32,49 +21,66 @@ type BaseSearchConfig = {
      * @default false
      */
     enableCategorySuggestions?: boolean;
+};
+type DepictBaseConfig = {
+    /**
+     * The merchant to use for the search.
+     * @example "YOUR_MERCHANT", "stronger"
+     */
+    merchant: string;
+    /**
+     * The market to use for the search.
+     * @example "YOUR_MARKET", "no", "en-de"
+     */
+    market: string;
+    /**
+     * The function to use for navigating to a new page.
+     * This function will be used internally by our components to navigate.
+     *
+     * You don't need to provide any in a Next.js context.
+     *
+     * @example
+     * Here is how you would use it with react-router, using our helper function.
+     * ```tsx
+     * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
+     *
+     * function Router() {
+     *   const navigate = useNavigate();
+     *   return (
+     *     <DepictProvider
+     *       merchant="houdini"
+     *       market="en-de"
+     *       navigateFunction={Navigation.reactRouterNavigation(navigate)}
+     *       search={{
+     *         searchPagePath: "/search",
+     *       }}
+     *     >
+     *       <Routes>[...]</Routes>
+     *     </DepictProvider>
+     *   );
+     * }
+     * ```
+     * @example
+     * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
+     * ```tsx
+     * const navigateFunction = (href: string) => {
+     *  router.push(href);
+     * };
+     * ```
+     */
+    navigateFunction?: NavigateFunction;
+    /**
+     * The locale to use for the Depict components.
+     * @default en
+     */
     locale: Locale;
 };
 /**
- * You can pass the function you use to navigate to a new page.
- *
- * Currently only works with react-router's useNavigate hook.
- * @example
- * ```tsx
- * import { useNavigate } from "react-router-dom";
- *
- * const App = () => {
- *   return (
- *     <DepictProvider
- *       merchant="YOUR_MERCHANT"
- *       market="YOUR_MARKET"
- *       searchPagePath="/search"
- *       reactRouterUseNavigate={useNavigate}
- *     >
- *       <App />
- *     </DepictProvider>
- *   );
- * };
- * ```
- */
-type DepictConfigInReactRouterContext = {
-    /** Expects useNavigate hook from react-router */
-    reactRouterUseNavigate: ReactRouterUseNavigate;
-    /** Not to be used in this context */
-    onNavigation?: undefined;
-} & BaseSearchConfig;
-type DepictConfigInOtherContext = {
-    /** Expects a function that takes a url and navigates to it */
-    onNavigation: (href: string, shallow?: boolean) => unknown;
-    /** Not to be used in this context */
-    reactRouterUseNavigate?: undefined;
-} & BaseSearchConfig;
-type DepictConfig = BaseSearchConfig | DepictConfigInReactRouterContext | DepictConfigInOtherContext;
-/**
- *
-  If react-router does not exist, useNavigate will fall back to "any".
-  In that case, the ReactRouterUseNavigate type becomes "never" and cannot be used.
+ * The config for the DepictProvider.
  */
-type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof useNavigate;
+type DepictConfig = DepictBaseConfig & {
+    search: DepictSearchConfig;
+};
 /**
  * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
  *
@@ -89,7 +95,9 @@ type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof us
  *      <DepictProvider
  *        merchant="YOUR_MERCHANT"
  *        market="YOUR_MARKET"
- *        searchPagePath="/search"
+ *        search={{
+ *          searchPagePath: "/search",
+ *        }}
  *      >
  *        <App />
  *      </DepictProvider>
@@ -225,5 +233,12 @@ interface TextPlaceholderProps {
 }
 /** A placeholder text that can be used in place of a text that is loading. */
 export const TextPlaceholder: React.FC<TextPlaceholderProps>;
-export const version = "0.0.48";
+export const version = "0.0.52";
+/**
+ * Helper function to navigate to a new page depending on the navigation library used.
+ */
+export const Navigation: {
+    nextRouterNavigation: (router: import("next/router").NextRouter) => (href: string) => void;
+    reactRouterNavigation: (navigateFunction: import("react-router").NavigateFunction) => (href: string) => void;
+};
 export type { Locale } from "@depict-ai/ui";

package/dist/main.js

@@ -19,6 +19,7 @@ $parcel$export(module.exports, "DepictSearchPage", () => $a6bedbe4b4d6d027$expor
 $parcel$export(module.exports, "ImagePlaceholder", () => $308b2c6db21be2eb$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $afce04c26b0c4208$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
+$parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
 
@@ -136,9 +137,20 @@ function $6319748b4f0426f0$var$removeLotsOfPadding() {
 
 
 
+
+const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
+    const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
+    window.next.router.push(href, undefined, {
+        shallow: shallow,
+        scroll: true
+    });
+};
+
+
 function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant , locale: locale  } = props;
+    const { children: children , market: market , merchant: merchant , navigateFunction: navigateFunction , locale: locale  } = props;
     const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
+    const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
@@ -148,11 +160,6 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
         const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path(searchPagePath);
         if (!search) {
-            let react_router_navigate;
-            if ("reactRouterUseNavigate" in props) {
-                const { reactRouterUseNavigate: reactRouterUseNavigate  } = props;
-                if (typeof reactRouterUseNavigate === "function") react_router_navigate = reactRouterUseNavigate();
-            }
             (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -160,22 +167,12 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
                 enable_category_suggestions: enableCategorySuggestions ?? false,
                 // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
                 localization: usedLocale,
-                on_navigation: (new_href)=>{
-                    const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
-                    if ("onNavigation" in props) {
-                        const { onNavigation: onNavigation  } = props;
-                        if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
-                    }
-                    if (react_router_navigate) {
-                        const url_object = new URL(new_href);
-                        return react_router_navigate(url_object.pathname + url_object.search + url_object.hash);
+                ...typeof window?.next?.router !== "undefined" || navigateFunction ? {
+                    on_navigation: (new_href)=>{
+                        if (navigateFunction) navigateFunction(new_href);
+                        else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_href);
                     }
-                    if (window.next) window.next.router.push(new_href, undefined, {
-                        shallow: shallow,
-                        scroll: true
-                    });
-                    else location.href = new_href;
-                },
+                } : {},
                 url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path)
             });
             (0, $6319748b4f0426f0$export$6453cbc34515a94d)((0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43));
@@ -346,9 +343,40 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.48";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.52";
+
+
 
 
+const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(href)=>{
+        const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
+        router.push(href, undefined, {
+            shallow: shallow,
+            scroll: true
+        });
+    };
+
+
+/**
+ * Helper function that creates a function that can be used as the
+ * navigateFunction callback for DepictProvider when using react-router.
+ *
+ * React-router expect relative URLs, so this function will strip the
+ * protocol, hostname and port from the URL.
+ *
+ * @param navigateFunction what useNavigate() returns
+ * @returns a function that can be used as the navigateFunction callback for DepictProvider
+ */ const $201a023b63de7d2f$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
+        const url_object = new URL(href);
+        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
+    };
+
+
+const $b742053c966024b4$export$b8a61e5c71402559 = {
+    nextRouterNavigation: $e387bd534de10acd$export$804fac5697cfbe35,
+    reactRouterNavigation: $201a023b63de7d2f$export$d53481656a62aebe
+};
+
 
 const $b03e4eee8610ebbe$var$package_name = "@depict-ai/react-ui";
 (0, $4GYXz$depictaiutilishared.dlog)($b03e4eee8610ebbe$var$package_name + " version", (0, $db7b67857900028b$export$83d89fbfd8236492));

package/dist/module.js

@@ -124,9 +124,20 @@ function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
 
 
 
+
+const $7216ca4c8308a0f9$export$599d4515591ef232 = (href)=>{
+    const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+    window.next.router.push(href, undefined, {
+        shallow: shallow,
+        scroll: true
+    });
+};
+
+
 function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
-    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant , locale: locale  } = props;
+    const { children: children , market: market , merchant: merchant , navigateFunction: navigateFunction , locale: locale  } = props;
     const usedLocale = locale ?? (0, $TZSbU$en);
+    const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
@@ -136,11 +147,6 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
         const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path(searchPagePath);
         if (!search) {
-            let react_router_navigate;
-            if ("reactRouterUseNavigate" in props) {
-                const { reactRouterUseNavigate: reactRouterUseNavigate  } = props;
-                if (typeof reactRouterUseNavigate === "function") react_router_navigate = reactRouterUseNavigate();
-            }
             (0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -148,22 +154,12 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
                 enable_category_suggestions: enableCategorySuggestions ?? false,
                 // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
                 localization: usedLocale,
-                on_navigation: (new_href)=>{
-                    const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
-                    if ("onNavigation" in props) {
-                        const { onNavigation: onNavigation  } = props;
-                        if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
-                    }
-                    if (react_router_navigate) {
-                        const url_object = new URL(new_href);
-                        return react_router_navigate(url_object.pathname + url_object.search + url_object.hash);
+                ...typeof window?.next?.router !== "undefined" || navigateFunction ? {
+                    on_navigation: (new_href)=>{
+                        if (navigateFunction) navigateFunction(new_href);
+                        else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_href);
                     }
-                    if (window.next) window.next.router.push(new_href, undefined, {
-                        shallow: shallow,
-                        scroll: true
-                    });
-                    else location.href = new_href;
-                },
+                } : {},
                 url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path)
             });
             (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)((0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43));
@@ -334,9 +330,40 @@ const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.48";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.52";
+
+
 
 
+const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(href)=>{
+        const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+        router.push(href, undefined, {
+            shallow: shallow,
+            scroll: true
+        });
+    };
+
+
+/**
+ * Helper function that creates a function that can be used as the
+ * navigateFunction callback for DepictProvider when using react-router.
+ *
+ * React-router expect relative URLs, so this function will strip the
+ * protocol, hostname and port from the URL.
+ *
+ * @param navigateFunction what useNavigate() returns
+ * @returns a function that can be used as the navigateFunction callback for DepictProvider
+ */ const $01e1970add53d62a$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
+        const url_object = new URL(href);
+        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
+    };
+
+
+const $97603d19204ec48d$export$b8a61e5c71402559 = {
+    nextRouterNavigation: $a92aa2beb560b8af$export$804fac5697cfbe35,
+    reactRouterNavigation: $01e1970add53d62a$export$d53481656a62aebe
+};
+
 
 const $43099132aad1ceb6$var$package_name = "@depict-ai/react-ui";
 (0, $TZSbU$dlog)($43099132aad1ceb6$var$package_name + " version", (0, $c9c4d066f9a5b51b$export$83d89fbfd8236492));
@@ -345,4 +372,4 @@ const $43099132aad1ceb6$var$package_name = "@depict-ai/react-ui";
 });
 
 
-export {$54b0d21b77e719c4$export$d2c02478244f91f7 as DepictSearchField, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $9f8d5ef3c016c493$export$210723f5a54a7028 as DepictSearchPage, $c95f83f01e99fc18$export$3f37af283f8fb843 as ImagePlaceholder, $8aa3ab31237c8dc9$export$89c6019e4baa40b1 as TextPlaceholder, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
+export {$54b0d21b77e719c4$export$d2c02478244f91f7 as DepictSearchField, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $9f8d5ef3c016c493$export$210723f5a54a7028 as DepictSearchPage, $c95f83f01e99fc18$export$3f37af283f8fb843 as ImagePlaceholder, $8aa3ab31237c8dc9$export$89c6019e4baa40b1 as TextPlaceholder, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

package/dist/styles/components/PLP/Buttons.scss

@@ -2,39 +2,50 @@
 @use "../../helpers/supports-hover";
 @use "../../helpers/utils";
 @use "sass:color";
+@use "sass:map";
 
-$primary-button-background: variables.$brand-black;
-$primary-button-color: #fff;
-$primary-button-border: 1px solid transparent; // so that the page doesn't jump when there's half a border when switching between having sort and filters open (the buttons switch between pimary and secondary)
-$primary-button-border-radius: variables.$border-radius;
-$primary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
-$primary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
-$primary-button-focus-visible-filter: drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8))
-  drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8));
+$primary-button-overrides: ();
+$secondary-button-overrides: ();
 
-$secondary-button-background: variables.$brand-lightest-grey;
-$secondary-button-color: variables.$brand-dark-grey;
-$secondary-button-border: 1px solid variables.$brand-black;
-$secondary-button-border-radius: variables.$border-radius;
-$secondary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
-$secondary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
-$secondary-button-focus-visible-filter: drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8))
-  drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8));
+@function get-primary-button-properties() {
+  $primary-button-properties: (
+    "background": variables.$brand-black,
+    "color": #fff,
+    // so that the page doesn't jump when there's half a border when switching between having sort and filters open (the buttons switch between pimary and secondary)
+    "border": 1px solid transparent,
+    "border-radius": variables.$border-radius,
+    "hover-filter": drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15)),
+    "active-filter": drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15)),
+    "focus-visible-filter": drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8))
+      drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8)),
+  );
+  @return map.merge($primary-button-properties, $primary-button-overrides);
+}
+
+@function get-secondary-button-properties() {
+  $secondary-button-properties: (
+    "background": variables.$brand-lightest-grey,
+    "color": variables.$brand-dark-grey,
+    "border": 1px solid variables.$brand-black,
+    "border-radius": variables.$border-radius,
+    "hover-filter": drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15)),
+    "active-filter": drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15)),
+    "focus-visible-filter": drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8))
+      drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8)),
+  );
+  @return map.merge($secondary-button-properties, $secondary-button-overrides);
+}
 
 @mixin PrimaryButton(
-  $background: $primary-button-background,
-  $color: $primary-button-color,
-  $border: $primary-button-border,
-  $border-radius: $primary-button-border-radius,
-  $hover-filter: $primary-button-hover-filter,
-  $active-filter: $primary-button-active-filter,
-  $focus-visible-filter: $primary-button-focus-visible-filter
+  $background: map.get(get-primary-button-properties(), "background"),
+  $color: map.get(get-primary-button-properties(), "color"),
+  $border: map.get(get-primary-button-properties(), "border"),
+  $border-radius: map.get(get-primary-button-properties(), "border-radius"),
+  $hover-filter: map.get(get-primary-button-properties(), "hover-filter"),
+  $active-filter: map.get(get-primary-button-properties(), "active-filter"),
+  $focus-visible-filter: map.get(get-primary-button-properties(), "focus-visible-filter")
 ) {
-  // not using .primary since that's 100% going to conflict with existing declarations on sites
+  // not using button.primary since that's 100% going to conflict with existing declarations on sites
   button.major {
     @include Button(
       $background,
@@ -51,15 +62,15 @@ $secondary-button-focus-visible-filter: drop-shadow(-2px -2px 4px rgba(65, 143,
 }
 
 @mixin SecondaryButton(
-  $background: $secondary-button-background,
-  $color: $secondary-button-color,
-  $border: $secondary-button-border,
-  $border-radius: $secondary-button-border-radius,
-  $hover-filter: $secondary-button-hover-filter,
-  $active-filter: $secondary-button-active-filter,
-  $focus-visible-filter: $secondary-button-focus-visible-filter
+  $background: map.get(get-secondary-button-properties(), "background"),
+  $color: map.get(get-secondary-button-properties(), "color"),
+  $border: map.get(get-secondary-button-properties(), "border"),
+  $border-radius: map.get(get-secondary-button-properties(), "border-radius"),
+  $hover-filter: map.get(get-secondary-button-properties(), "hover-filter"),
+  $active-filter: map.get(get-secondary-button-properties(), "active-filter"),
+  $focus-visible-filter: map.get(get-secondary-button-properties(), "focus-visible-filter")
 ) {
-  // not using .secondary since that's 100% going to conflict with existing declarations on sites
+  // not using button.secondary since that's 100% going to conflict with existing declarations on sites
   button.minor {
     @include Button(
       $background,

package/dist/styles/components/PLP/SelectedFilters.scss

@@ -2,6 +2,7 @@
 @use "../../helpers/utils";
 @use "../../helpers/supports-hover";
 @use "./Buttons";
+@use "sass:map";
 
 @mixin SelectedFilters(
   $border-radius: variables.$border-radius,
@@ -40,7 +41,7 @@
 
         .clear-filter {
           @if $set-border-on-crumbs {
-            border: 1px solid Buttons.$primary-button-background;
+            border: 1px solid map.get(Buttons.get-primary-button-properties(), "background");
           }
           svg {
             width: 12.64px;
@@ -49,7 +50,7 @@
         }
         .clear-all-filters {
           @if $set-border-on-crumbs {
-            border: Buttons.$secondary-button-border;
+            border: map.get(Buttons.get-secondary-button-properties(), "border");
           }
         }
 

package/dist/styles/components/PLP/SlidableItems.scss

@@ -1,7 +1,9 @@
 // @use "../../../rendering/slider_button_positioning";
 @use "../../helpers/utils";
+@use "../../components/PLP/Buttons";
 @use "../../variables";
 @use "../../helpers/supports-hover";
+@use "sass:map";
 
 @mixin button_positioning {
   .d-navbutton {
@@ -80,6 +82,10 @@
       justify-content: flex-end;
       border: none;
 
+      & > div {
+        display: flex;
+      }
+
       @include supports-hover.supports-hover() {
         &:hover {
           svg {
@@ -87,6 +93,14 @@
           }
         }
       }
+      &:focus-visible {
+        svg {
+          transform: scale(1.5);
+          path {
+            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+          }
+        }
+      }
       svg {
         transition-duration: 150ms;
       }

package/dist/styles/components/PLP/SortAndFilter/SortAndFilter.scss

@@ -6,6 +6,7 @@
 @use "../../../helpers/supports-hover";
 @use "../Buttons";
 @use "sass:color";
+@use "sass:map";
 
 @mixin SortAndFilter(
   $mobile-top-level-collapse-color: variables.$brand-black,
@@ -381,7 +382,7 @@
             }
             &:focus-visible {
               outline: none;
-              filter: Buttons.$secondary-button-focus-visible-filter;
+              filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
             }
           }
         }

package/dist/styles/components/category/CategoryTitle.scss

@@ -16,6 +16,7 @@
     .title {
       margin-right: 10px;
       font-weight: $title-font-weight;
+      font-size: inherit;
     }
     .explanation {
       color: $title-color;

package/dist/styles/components/category/QuickLinks.scss

@@ -3,11 +3,12 @@
 @use "../../helpers/supports-hover";
 @use "../PLP/Buttons";
 @use "sass:color";
+@use "sass:map";
 
 @mixin QuickLinks(
   $background: white,
   $border-radius: false,
-  $selected-background: Buttons.$primary-button-background,
+  $selected-background: map.get(Buttons.get-primary-button-properties(), "background"),
   $hovered-background: false
 ) {
   .quicklinks {
@@ -40,7 +41,7 @@
         } @else {
           @include utils.highlight-background($normal-background: $background);
         }
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
       }
       &:active {
         @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
@@ -56,7 +57,7 @@
         }
         &:focus-visible {
           @include utils.highlight-background($normal-background: $selected-background);
-          filter: Buttons.$primary-button-focus-visible-filter;
+          filter: map.get(Buttons.get-primary-button-properties(), "focus-visible-filter");
         }
         &:active {
           @include utils.highlight-background(

package/dist/styles/components/search/Autocomplete.scss

@@ -2,6 +2,7 @@
 @use "../../helpers/utils";
 @use "PreviousSearches";
 @use "../PLP/Buttons";
+@use "sass:map";
 
 @mixin Autocomplete(
   $background: white,
@@ -40,7 +41,7 @@
 
       &:focus-visible {
         outline: none;
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
       }
     }
   }

package/dist/styles/components/search/PreviousSearches.scss

@@ -1,6 +1,7 @@
 @use "../../variables";
 @use "../../helpers/utils";
 @use "../PLP/Buttons";
+@use "sass:map";
 
 @mixin PreviousSearches($icon-color: variables.$brand-black, $item-color: variables.$brand-black) {
   .previous-searches {
@@ -62,7 +63,7 @@
             }
           }
           &:focus-visible {
-            filter: Buttons.$secondary-button-focus-visible-filter;
+            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
             svg {
               transform: scale(1.2);
               path {

package/dist/styles/components/search/QueryInput.scss

@@ -1,6 +1,7 @@
 @use "../../variables";
 @use "../../helpers/supports-hover";
 @use "../PLP/Buttons";
+@use "sass:map";
 
 @mixin QueryInput(
   $border-radius: calc(#{variables.$border-radius} * 2.5),
@@ -90,7 +91,7 @@
         outline: none;
       }
       &:focus-visible {
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
         svg path {
           fill: $hovered-back-color;
         }
@@ -125,7 +126,7 @@
         outline: none;
       }
       &:focus-visible {
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
         svg path {
           fill: $hovered-clear-color;
         }