@depict-ai/react-ui 0.0.75 → 0.0.76

package/dist/index.d.ts

@@ -1,29 +1,13 @@
-import { SDKColsAtSize, SDKGridSpacing, CategoryTitle, embedded_num_products } from "@depict-ai/ui";
+import { BasePLPConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products } from "@depict-ai/ui";
 import { Display } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { Locale } from "@depict-ai/ui/locales";
-export const version = "0.0.75";
-interface PLPConfig<T extends Display> {
+export const version = "0.0.76";
+interface PLPConfig<T extends Display> extends BasePLPConfig {
     /**
      * The product card to use for rendering products.
      */
     productCard: DepictProductCard<T>;
-    /**
-     * How many columns to show at each media size.
-     * @default
-     * [[2, 901], [3, 1024], [4]]
-     * @example
-     * [[2, 901], [3, 1024], [4]]
-     * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any size.
-     */
-    columnsAtSize?: SDKColsAtSize;
-    /**
-     * The spacing between products.
-     * @default "2%"
-     * @example
-     * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
-     */
-    gridSpacing?: SDKGridSpacing;
 }
 /**
  * The Depict product card props.
@@ -37,35 +21,10 @@ export interface DepictProductCardProps<T extends Display> {
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 type NavigateFunction = (relativeUrl: string) => void;
-type DepictSearchConfig = {
-    /**
-     * The path to the search page.
-     * @example "/search", "/sok"
-     */
-    searchPagePath: string;
-    /**
-     * The name of the url parameter that will be used for the search query.
-     * @example "q", "search_query"
-     * @default "search_query"
-     */
-    urlParamName?: string;
-    /**
-     * Whether to enable category suggestions in the search modal and search page.
-     * @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 config for the DepictProvider.
+ */
+type ProviderConfig = BaseProviderConfig & {
     /**
      * The function to use for navigating to a new page.
      * This function will be used internally by our components to navigate.
@@ -111,12 +70,7 @@ type DepictBaseConfig = {
      * @default en
      */
     locale?: Locale;
-};
-/**
- * The config for the DepictProvider.
- */
-type DepictConfig = DepictBaseConfig & {
-    search: DepictSearchConfig;
+    search: BaseSearchProviderConfig;
 };
 /**
  * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
@@ -143,28 +97,28 @@ type DepictConfig = DepictBaseConfig & {
  * ```
  * @returns {JSX.Element} The DepictProvider.
  */
-export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("react").FunctionComponentElement<{
+export function DepictProvider(props: PropsWithChildren<ProviderConfig>): import("react").FunctionComponentElement<{
     children?: import("react").ReactNode;
 }>;
 /**
- * A component used to align other Depict components on.
+ * A component used to align other Depict components to.
  * @example
  * Align the search modal
  * ```tsx
  * import React from "react";
- * import { DepictAligner, useDepictSearchModal } from "@depict-ai/react-ui";
+ * import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
  *
  * const App = () => {
  *   const ref = React.createRef();
  *
- *   const { open } = useDepictSearchModal({
+ *   const { open } = useSearchModal({
  *     location: "aligned",
  *     alignerRef: ref,
  *   });
  *
  *   return (
  *     <div>
- *       <DepictAligner ref={ref} />
+ *       <ComponentAligner ref={ref} />
  *       <button onClick={open}>Open</button>
  *     </div>
  *   );
@@ -172,24 +126,19 @@ export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("
  * ```
  * @returns {JSX.Element}
  */
-export const DepictAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
-interface SearchPageConfig<T extends Display> extends PLPConfig<T> {
-    /**
-     * Whether to show the search input field in the search page.
-     * @default true
-     */
-    includeInputField?: boolean;
+export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
 }
 /**
- * DepictSearchPage is a component that renders a search page.
+ * SearchPage is a component that renders a Depict search results page.
  * @param props - The props for the search page.
  *
  * @example
  * ```tsx
- * import { DepictProductCard, ImagePlaceholder, Display, DepictSearchPage } from '@depict-ai/react-ui'
+ * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
  *
  * function Search() {
- *    return <DepictSearchPage productCard={MyCustomSearchProductCard} />
+ *    return <SearchPage productCard={MyCustomSearchProductCard} />
  * }
  *
  * interface MyCustomDisplay extends Display {}
@@ -220,43 +169,33 @@ interface SearchPageConfig<T extends Display> extends PLPConfig<T> {
  *
  * ```
  */
-export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-interface CategoryPageConfig<T extends Display> extends PLPConfig<T> {
+export function SearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
     /**
      * The category id to show.
      */
     categoryId: string;
-    /**
-     * Whether to show the breadcrumbs in the category page.
-     * @default true
-     */
-    showBreadcrumbs?: boolean;
-    /**
-     * Whether to show the quicklinks in the category page.
-     * @default true
-     */
-    showQuicklinks?: boolean;
     /**
      * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
      * @default CategoryTitle
      *
      * @example
      * ```tsx
-     * <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
+     * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
      * ```
      */
     categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
 }
 /**
- * DepictCategoryPage is a component that renders a category page.
+ * CategoryPage is a component that renders a Depict category page.
  * @param props the props for the category page.
  *
  * @example
  * ```tsx
- * import { DepictProductCard, ImagePlaceholder, Display, DepictCategoryPage } from '@depict-ai/react-ui'
+ * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
  *
  * function Category() {
- *  return <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
  * }
  *
  * interface MyCustomDisplay extends Display {}
@@ -286,7 +225,7 @@ interface CategoryPageConfig<T extends Display> extends PLPConfig<T> {
  * }
  * ```
  */
-export function DepictCategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function CategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * BreadCrumbs is the "trail" in the header of a category page.
  */
@@ -343,19 +282,19 @@ interface UseSearchModalParams {
      * @example
      * ```tsx
         import React from "react";
-        import { DepictAligner, useDepictSearchModal } from "@depict-ai/react-ui";
+        import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
   
         const App = () => {
           const ref = React.createRef();
   
-          const { open } = useDepictSearchModal({
+          const { open } = useSearchModal({
             location: "aligned",
             alignerRef: ref,
           });
   
           return (
             <div>
-              <DepictAligner ref={ref} />
+              <ComponentAligner ref={ref} />
               <button onClick={open}>Open</button>
             </div>
           );
@@ -378,10 +317,10 @@ interface UseSearchModalReturn {
  * Open a centered modal:
  * ```tsx
  * import React from "react";
- * import { useDepictSearchModal } from "@depict-ai/react-ui";
+ * import { useSearchModal } from "@depict-ai/react-ui";
  *
  * const App = () => {
- *   const { open } = useDepictSearchModal({
+ *   const { open } = useSearchModal({
  *     location: "centered",
  *   });
  *
@@ -394,23 +333,23 @@ interface UseSearchModalReturn {
  * ```
  * @returns {JSX.Element}
  */
-export function useDepictSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
+export function useSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
 interface SearchFieldProps {
     /**
      * A reference to the DOM element that the modal should be aligned to.
      *
      * The top of the modal will be aligned to the top of the element.
      *
-     * The hight of the search field in the modal will be the same as the height of the element.
+     * The height of the search field in the modal will be the same as the height of the element.
      * If not provided, the modal will be aligned to the search field itself.
      */
     alignerRef?: React.RefObject<HTMLElement>;
 }
-interface UseDepictSearchFieldReturn {
+interface UseSearchFieldReturn {
     /**
      * A React component that renders the search field.
      */
-    DepictSearchField: () => ReactElement;
+    SearchField: () => ReactElement;
 }
 /**
  * Hook used to configure the Depict search field.
@@ -418,14 +357,14 @@ interface UseDepictSearchFieldReturn {
  * Render a search field that opens a modal aligned to the search field itself:
  * ```tsx
  * import React from "react";
- * import { useDepictSearchField } from "@depict-ai/react-ui";
+ * import { useSearchField } from "@depict-ai/react-ui";
  *
  * const App = () => {
- *   const { DepictSearchField } = useDepictSearchField();
+ *   const { SearchField } = useSearchField();
  *
  *   return (
  *     <div>
- *       <DepictSearchField />
+ *       <SearchField />
  *     </div>
  *   );
  * };
@@ -434,25 +373,25 @@ interface UseDepictSearchFieldReturn {
  * Render a search field that opens a modal aligned another DOM element:
  * ```tsx
  * import React from "react";
- * import { DepictAligner, useDepictSearchField } from "@depict-ai/react-ui";
+ * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
  *
  * const App = () => {
  *   const ref = useRef(null);
- *   const { DepictSearchField } = useDepictSearchField({
+ *   const { SearchField } = useSearchField({
  *     alignerRef: ref
  *   });
  *
  *   return (
  *     <div>
- *       <DepictAligner ref={ref} />
- *       <DepictSearchField />
+ *       <ComponentAligner ref={ref} />
+ *       <SearchField />
  *     </div>
  *   );
  * };
  * ```
  * @returns {JSX.Element}
  */
-export const useDepictSearchField: (props?: SearchFieldProps) => UseDepictSearchFieldReturn;
+export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -13,21 +13,21 @@ function $parcel$export(e, n, v, s) {
 
 $parcel$export(module.exports, "QuickLinks", () => $f16af0e861aff3d0$export$466cdc317043f6cb);
 $parcel$export(module.exports, "BreadCrumbs", () => $d88e98b11c182b8e$export$5646050d516e06bc);
-$parcel$export(module.exports, "DepictAligner", () => $d96434e62e08087d$export$3f4580d6398c5027);
+$parcel$export(module.exports, "ComponentAligner", () => $883a881f7926405d$export$80e99ee6b29cadd2);
 $parcel$export(module.exports, "DepictProvider", () => $24b00503eef73528$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "DepictCategoryPage", () => $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d);
-$parcel$export(module.exports, "DepictSearchPage", () => $7ad7a3d0011b7b1b$export$210723f5a54a7028);
+$parcel$export(module.exports, "CategoryPage", () => $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d);
+$parcel$export(module.exports, "SearchPage", () => $7ad7a3d0011b7b1b$export$a54ec244c8863715);
 $parcel$export(module.exports, "ImagePlaceholder", () => $df522c8a81ed5a01$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $7c8b440edc188ad5$export$89c6019e4baa40b1);
-$parcel$export(module.exports, "useDepictSearchModal", () => $3647cad61d03b89c$export$cc1e9aaf280afdcb);
-$parcel$export(module.exports, "useDepictSearchField", () => $ca5840628781f899$export$45080d603eda647c);
+$parcel$export(module.exports, "useSearchModal", () => $ae73b15c325f1b21$export$912994940e660d32);
+$parcel$export(module.exports, "useSearchField", () => $913da7f4d0bc77f2$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "CategoryTitle", () => $b03e4eee8610ebbe$re_export$CategoryTitle);
 $parcel$export(module.exports, "EmbeddedNumProducts", () => $b03e4eee8610ebbe$re_export$EmbeddedNumProducts);
 $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
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.75";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.76";
 
 
 
@@ -244,7 +244,7 @@ function $24b00503eef73528$var$ensure_correct_formatting(path) {
 
 
 
-const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react.forwardRef)((_, ref)=>{
+const $883a881f7926405d$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $4GYXz$react.forwardRef)((_, ref)=>{
     return /*#__PURE__*/ (0, $4GYXz$react.createElement)("div", {
         className: "depict aligner",
         style: {
@@ -260,7 +260,7 @@ const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react
 
 
 
-function $7ad7a3d0011b7b1b$export$210723f5a54a7028(props) {
+function $7ad7a3d0011b7b1b$export$a54ec244c8863715(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($7ad7a3d0011b7b1b$var$SolidSearchPage), props);
 }
 function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
@@ -314,7 +314,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
 
 
 let $5aa5fcb9f8a2bebc$var$render_cb;
-function $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d(props) {
+function $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage), props, "div", {}, (props)=>$5aa5fcb9f8a2bebc$var$render_cb?.(props));
 }
 function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
@@ -416,7 +416,7 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
+const $177ac8f5258066ba$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         if (globalState.search) {
@@ -435,8 +435,8 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 };
 
 
-function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params = {}) {
-    const open = (0, $ef7db890e488d4f4$export$d69d8daa20eae175)({
+function $ae73b15c325f1b21$export$912994940e660d32(params = {}) {
+    const open = (0, $177ac8f5258066ba$export$d69d8daa20eae175)({
         globalState: $0b7cd4fb39fc3502$export$8e769ad4338a911e,
         ...params
     });
@@ -449,7 +449,7 @@ function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params = {}) {
 
 
 
-const $5e06ce09dcfaf030$export$bde46b5bb6287cea = (props)=>{
+const $cd591d0e4ce29df7$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
         return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
                 depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
@@ -460,12 +460,12 @@ const $5e06ce09dcfaf030$export$bde46b5bb6287cea = (props)=>{
 };
 
 
-const $ca5840628781f899$export$45080d603eda647c = (props)=>{
-    const SearchField = (0, $5e06ce09dcfaf030$export$bde46b5bb6287cea)({
+const $913da7f4d0bc77f2$export$9bb30bbe003b82e0 = (props)=>{
+    const SearchField = (0, $cd591d0e4ce29df7$export$bde46b5bb6287cea)({
         alignerRef: props?.alignerRef
     });
     return {
-        DepictSearchField: SearchField
+        SearchField: SearchField
     };
 };
 

package/dist/module.js

@@ -9,7 +9,7 @@ import {createPortal as $TZSbU$createPortal} from "react-dom";
 
 /*! 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
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.75";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.76";
 
 
 
@@ -226,7 +226,7 @@ function $5376eb2a386cd90d$var$ensure_correct_formatting(path) {
 
 
 
-const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwardRef)((_, ref)=>{
+const $421f32789b6f111f$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $TZSbU$forwardRef)((_, ref)=>{
     return /*#__PURE__*/ (0, $TZSbU$createElement)("div", {
         className: "depict aligner",
         style: {
@@ -242,7 +242,7 @@ const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwa
 
 
 
-function $4a678f0c87b12e78$export$210723f5a54a7028(props) {
+function $4a678f0c87b12e78$export$a54ec244c8863715(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage), props);
 }
 function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
@@ -296,7 +296,7 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
 
 
 let $48d7f568740a317d$var$render_cb;
-function $48d7f568740a317d$export$d87c61cecb2edf0d(props) {
+function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage), props, "div", {}, (props)=>$48d7f568740a317d$var$render_cb?.(props));
 }
 function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
@@ -398,7 +398,7 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
+const $41cab674edff4277$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         if (globalState.search) {
@@ -417,8 +417,8 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 };
 
 
-function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params = {}) {
-    const open = (0, $5e26376d86621891$export$d69d8daa20eae175)({
+function $70344e5e0d0fea06$export$912994940e660d32(params = {}) {
+    const open = (0, $41cab674edff4277$export$d69d8daa20eae175)({
         globalState: $42858f023ef23dab$export$8e769ad4338a911e,
         ...params
     });
@@ -431,7 +431,7 @@ function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params = {}) {
 
 
 
-const $a732d80ca44c466d$export$bde46b5bb6287cea = (props)=>{
+const $cdd7408b22d1586a$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
         return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
                 depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
@@ -442,12 +442,12 @@ const $a732d80ca44c466d$export$bde46b5bb6287cea = (props)=>{
 };
 
 
-const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
-    const SearchField = (0, $a732d80ca44c466d$export$bde46b5bb6287cea)({
+const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props)=>{
+    const SearchField = (0, $cdd7408b22d1586a$export$bde46b5bb6287cea)({
         alignerRef: props?.alignerRef
     });
     return {
-        DepictSearchField: SearchField
+        SearchField: SearchField
     };
 };
 
@@ -473,4 +473,4 @@ const $97603d19204ec48d$export$b8a61e5c71402559 = {
 (0, $TZSbU$add_to_version_info)("react-ui", (0, $c9c4d066f9a5b51b$export$83d89fbfd8236492));
 
 
-export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $4db0e2f013fc5124$export$3f4580d6398c5027 as DepictAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$d87c61cecb2edf0d as DepictCategoryPage, $4a678f0c87b12e78$export$210723f5a54a7028 as DepictSearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $cfa72c75e6cf6901$export$cc1e9aaf280afdcb as useDepictSearchModal, $e3ccaca62718bae4$export$45080d603eda647c as useDepictSearchField, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};
+export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $421f32789b6f111f$export$80e99ee6b29cadd2 as ComponentAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$f7d2f673fc2f091d as CategoryPage, $4a678f0c87b12e78$export$a54ec244c8863715 as SearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $70344e5e0d0fea06$export$912994940e660d32 as useSearchModal, $2b886cf548a4775c$export$9bb30bbe003b82e0 as useSearchField, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

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

@@ -1,8 +1,8 @@
 @use "../../variables";
 @use "../../helpers/utils";
 @use "../../helpers/supports-hover";
-@use "./Buttons";
-@use "./ProductListingPage";
+@use "Buttons";
+@use "ProductListingPage";
 @use "sass:map";
 
 /// Mixin that styles the SelectedFilters component, which is the component that shows the selected filters if both the sorting and filtering menus are currently hidden.

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

@@ -1,6 +1,6 @@
 // @use "../../../rendering/slider_button_positioning";
 @use "../../helpers/utils";
-@use "../../components/PLP/Buttons";
+@use "Buttons";
 @use "../../variables";
 @use "../../helpers/supports-hover";
 @use "sass:map";

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

@@ -8,15 +8,12 @@
 @use "sass:color";
 @use "sass:map";
 
-/// Mixin that styles the sorting and filtering menus.
-
 $brand-black: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 800);
 $brand-dark-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 600);
 $brand-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 400);
 $brand-light-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 300);
 $brand-lighter-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 200);
 $brand-lightest-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 100);
-$deprecated-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, "deprecated-grey");
 
 // Mega hack right now, we want to wait on Vicki's redesign of this
 
@@ -41,6 +38,7 @@ $hovered-checkbox-checked-background-color: $brand-dark-grey;
 $hovered-checkbox-border: 2px solid $brand-black;
 $hovered-radio-border: 2px solid $brand-black;
 
+/// Mixin that styles the sorting and filtering menus.
 @mixin SortAndFilter() {
   $spacing_between_input_rows: variables.get-merged(
     variables.$filters-configuration-defaults,
@@ -276,7 +274,7 @@ $hovered-radio-border: 2px solid $brand-black;
       }
 
       .ungrouped {
-        /// Spacing above filters that aren't in a group
+        // Spacing above filters that aren't in a group
         margin-top: 25px;
       }