@depict-ai/react-ui 1.5.20 → 2.0.0

package/dist/module.js

@@ -0,0 +1,285 @@
+import {SearchField as $TZSbU$SearchField, DepictSearch as $TZSbU$DepictSearch, swedish_search_translation as $TZSbU$swedish_search_translation, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage} from "@depict-ai/ui";
+import {href_change_ipns as $TZSbU$href_change_ipns, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask} from "@depict-ai/utilishared";
+import {untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, createSignal as $TZSbU$createSignal, createMemo as $TZSbU$createMemo, createComputed as $TZSbU$createComputed, onCleanup as $TZSbU$onCleanup} from "solid-js";
+import {render as $TZSbU$render} from "solid-js/web";
+import {useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment} from "react";
+import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
+import {createPortal as $TZSbU$createPortal} from "react-dom";
+
+// 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 $42858f023ef23dab$export$8e769ad4338a911e = {
+    search: null,
+    header_alignment: null,
+    search_page_path_: (0, $TZSbU$createSignal)(),
+    required_state_set_: (0, $TZSbU$createSignal)(false)
+};
+
+
+
+
+
+
+let $c83ba9ab79386687$var$run_on_href_change;
+function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
+    $c83ba9ab79386687$var$run_on_href_change = cb;
+}
+(async ()=>{
+    for await (const href of (0, $TZSbU$href_change_ipns))$c83ba9ab79386687$var$run_on_href_change?.(href);
+})();
+const $c83ba9ab79386687$export$6cb4d3a5c1ac9b43 = (url)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
+function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props) {
+    const [portals, set_portals] = (0, $TZSbU$useState)([]);
+    const element_ref = (0, $TZSbU$useRef)();
+    (0, $TZSbU$useEffect)(()=>{
+        const div_element = element_ref.current;
+        const dispose = (0, $TZSbU$render)(()=>solid_component(props, set_portals), div_element);
+        return dispose;
+    }, []);
+    return (0, $TZSbU$jsx)("div", {
+        ref: element_ref,
+        children: portals
+    });
+}
+function $c83ba9ab79386687$export$e5139bbbb9a05035(component) {
+    return (...args)=>{
+        return (0, $TZSbU$createComponent)((0, $TZSbU$Show), {
+            get when () {
+                return (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[0]();
+            },
+            get children () {
+                return component(...args);
+            }
+        });
+    };
+}
+
+
+
+
+function $54b0d21b77e719c4$export$d2c02478244f91f7() {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
+            depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search
+        })), {});
+}
+
+
+
+
+
+let $8071251ee4e9ffa1$var$set = false;
+function $8071251ee4e9ffa1$export$6453cbc34515a94d(is_search_page) {
+    if ($8071251ee4e9ffa1$var$set) return; // Just being safe
+    $8071251ee4e9ffa1$var$set = true;
+    let should_use_old_scroll = false;
+    const old_scrollTo = window.scrollTo;
+    window.scrollTo = (...args)=>{
+        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !is_search_page(location)) return Reflect.apply(old_scrollTo, window, args);
+        else should_use_old_scroll = true;
+    };
+    addEventListener("popstate", (e)=>{
+        if (!is_search_page(location)) {
+            $8071251ee4e9ffa1$var$removeLotsOfPadding(); // Just making sure
+            return;
+        }
+        should_use_old_scroll = false;
+        $8071251ee4e9ffa1$var$addLotsOfPadding();
+        (0, $TZSbU$observer).wait_for_element(".depict.plp .listing-page").then(()=>{
+            $8071251ee4e9ffa1$var$removeLotsOfPadding();
+        });
+    });
+    (0, $TZSbU$history_replacer)(()=>{
+        (0, $TZSbU$queueMacroTask)(()=>{
+            $8071251ee4e9ffa1$var$removeLotsOfPadding();
+        });
+    }, false);
+    window?.next?.router?.events?.on("routeChangeStart", ()=>{
+        $8071251ee4e9ffa1$var$addLotsOfPadding();
+    });
+}
+// TODO: Make these animations so they don't collide with whatever padding is already on the body
+function $8071251ee4e9ffa1$var$addLotsOfPadding() {
+    document.body.style.paddingBottom = (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px";
+}
+function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
+    document.body.style.paddingBottom = "";
+}
+
+
+
+
+
+function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
+    if (!props.market || !props.merchant) {
+        (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
+        return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, props.children);
+    }
+    const { children: children , search_page_path: search_page_path , url_param_name: url_param_name , ...assignable_options } = props;
+    const { search: search  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+    const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
+    set_search_page_path(search_page_path);
+    if (!search) {
+        (0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
+            search_query_url_param_name: url_param_name,
+            ...assignable_options,
+            enable_category_suggestions: false,
+            localization: {
+                ...(0, $TZSbU$swedish_search_translation),
+                price_formatting_: {
+                    pre_: "kr ",
+                    post_: "",
+                    decimal_places_delimiter_: ",",
+                    thousands_delimiter_: " ",
+                    places_after_comma_: 2
+                }
+            },
+            on_navigation: (new_href)=>{
+                const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+                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));
+    } else Object.assign(search, assignable_options);
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
+    return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
+}
+
+
+// PoC maybe-component
+// Idea is to always give a nice "modal input in header" look with no more config than adding this component to the page header to where it can absolute-size
+// and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
+
+
+
+function $f41a371216eff80b$export$cbcd1ecdb41b1d0a() {
+    return (0, $TZSbU$createElement)("div", {
+        className: "depict aligner",
+        ref: (e)=>(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment = e
+    });
+}
+let $f41a371216eff80b$var$sheet;
+function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
+    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).search) {
+        console.error("No active search in the app!");
+        return;
+    }
+    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment) {
+        console.error("No active search header aligner on the page!");
+        return;
+    }
+    const style_props_ = (0, $TZSbU$createSignal)({
+        position: "fixed",
+        top: 0
+    });
+    if ((0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment?.clientHeight) {
+        let styles = `.depict.plp.in-header .depict-search-modal .query-input { height: ${(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+        styles += `.depict.plp.in-header .depict-search-modal-backdrop { top: ${(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+        if (!$f41a371216eff80b$var$sheet) {
+            const style = document.createElement("style");
+            style.append(styles);
+            document.head.appendChild(style);
+        }
+    }
+    const class_list_ = (0, $TZSbU$createMemo)(()=>({
+            "in-header": true
+        }));
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).search.modal_open = [
+        {
+            style_props_: style_props_,
+            class_list_: class_list_
+        }
+    ];
+}
+
+
+
+
+
+
+
+
+function $9f8d5ef3c016c493$export$210723f5a54a7028(opts) {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage), opts);
+}
+function $9f8d5ef3c016c493$var$SolidSearchPage(props, set_portals) {
+    const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
+    if (!depict_search) throw Error("No depict_search instance when rendering SearchPage.");
+    const search_query_updating_blocked_signal = (0, $TZSbU$get_search_query_updating_blocked_signal)(depict_search);
+    if (!search_query_updating_blocked_signal) throw Error("No search_query_updating_blocked_signal when rendering SearchPage");
+    const [, set_search_query_updating_blocked_signal] = search_query_updating_blocked_signal;
+    const update_updating_blocked_signal = ()=>{
+        set_search_query_updating_blocked_signal(!(0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location));
+    };
+    // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
+    (0, $c83ba9ab79386687$export$74f3924c5027fe1d)(update_updating_blocked_signal); // if we navigate, re-check
+    (0, $TZSbU$createComputed)(()=>{
+        (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0](); // if react defined path changes, re-check
+        update_updating_blocked_signal();
+    });
+    const component_portals = new Set();
+    return (0, $TZSbU$SearchPage)({
+        // Default config goes here
+        include_input_field: props.includeInputField ?? true,
+        cols_at_size: props.columnsAtSize ?? [
+            [
+                4
+            ],
+            [
+                3,
+                1024
+            ],
+            [
+                2,
+                901
+            ]
+        ],
+        grid_spacing: props.gridSpacing ?? "2%",
+        // Todo: Do we need this?
+        get_product_id: ()=>"",
+        depict_search: depict_search,
+        product_card_template: async (display, info)=>{
+            const solid_container = document.createElement("div");
+            const react_has_rendered = new Promise((r)=>{
+                const m_o = new MutationObserver(()=>{
+                    m_o.disconnect();
+                    r();
+                });
+                m_o.observe(solid_container, {
+                    childList: true
+                });
+            });
+            const is_placeholder = info.rendering_options.type === "placeholder";
+            const reactProductCard = (0, $TZSbU$jsx)(props.productCard, {
+                display: is_placeholder ? null : display
+            });
+            const portal = $TZSbU$createPortal(reactProductCard, solid_container);
+            component_portals.add(portal);
+            set_portals([
+                ...component_portals
+            ]);
+            (0, $TZSbU$onCleanup)(()=>{
+                // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
+                component_portals.delete(portal);
+                set_portals([
+                    ...component_portals
+                ]);
+            });
+            await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
+            return [
+                solid_container
+            ];
+        }
+    });
+}
+
+
+
+
+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};

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

@@ -0,0 +1,124 @@
+@use "../../variables";
+@use "../../helpers/supports-hover";
+@use "../../helpers/utils";
+@use "sass:color";
+
+$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));
+
+$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));
+
+@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
+) {
+  // not using .primary since that's 100% going to conflict with existing declarations on sites
+  button.major {
+    @include Button(
+      $background,
+      $color,
+      $border,
+      $border-radius,
+      $hover-filter,
+      $active-filter,
+      $focus-visible-filter
+    ) {
+      @content;
+    }
+  }
+}
+
+@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
+) {
+  // not using .secondary since that's 100% going to conflict with existing declarations on sites
+  button.minor {
+    @include Button(
+      $background,
+      $color,
+      $border,
+      $border-radius,
+      $hover-filter,
+      $active-filter,
+      $focus-visible-filter
+    ) {
+      @content;
+    }
+  }
+}
+
+@mixin Button(
+  $background,
+  $color,
+  $border,
+  $border-radius,
+  $hover-filter,
+  $active-filter,
+  $focus-visible-filter,
+  $padding: 10px 20px
+) {
+  background: $background;
+  color: $color;
+  border: $border;
+  border-radius: $border-radius;
+  @if $padding {
+    padding: $padding;
+  }
+  display: flex;
+  white-space: pre-wrap; // can't have spaces otherwise
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: filter 150ms ease-in-out, background 100ms ease-in-out;
+
+  svg path {
+    fill: $color; // treat icons the same as text
+  }
+
+  @include supports-hover.supports-hover() {
+    &:hover {
+      filter: $hover-filter;
+      @include utils.highlight-background($normal-background: $background);
+    }
+  }
+  &:active {
+    filter: $active-filter;
+    @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
+  }
+  &:focus {
+    outline-style: none;
+  }
+  &:focus-visible {
+    filter: $focus-visible-filter;
+    @include utils.highlight-background($normal-background: $background);
+  }
+  @content;
+}

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

@@ -0,0 +1,31 @@
+@mixin MorphingSign($color: #fff) {
+  .morphing-sign {
+    /* https://stackoverflow.com/a/38136283 */
+    border: 0;
+    font-size: 1.5em;
+    position: relative;
+    width: 1em;
+    height: 1em;
+
+    span {
+      position: absolute;
+      background: $color;
+      border-radius: 2px;
+    }
+
+    /* Create the "+" shape by positioning the spans absolutely */
+    span:first-child {
+      top: 25%;
+      bottom: 25%;
+      width: 10%;
+      left: 45%;
+    }
+
+    span:last-child {
+      left: 25%;
+      right: 25%;
+      height: 10%;
+      top: 45%;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+@use "../../variables";
+@use "../../helpers/utils";
+
+@mixin PLPResults() {
+  .listing-page {
+    .no-results {
+      background: white;
+      padding: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: column;
+      flex-grow: 2;
+      .hint {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+@use "../../helpers/utils";
+
+@mixin ProductListingPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
+  .listing-page {
+    display: flex;
+    flex-direction: column;
+    padding: $desktop-item-gap calc(#{$desktop-item-gap} / 2);
+    @include mobile_sizes() {
+      padding: $mobile-item-gap calc(#{$mobile-item-gap} / 2);
+    }
+
+    &,
+    & * {
+      box-sizing: border-box;
+    }
+
+    & > .filter-results-for-one-row,
+    & > .results-for {
+      margin-bottom: calc(#{$desktop-item-gap} / 2);
+      @include mobile_sizes() {
+        margin-bottom: calc(#{$mobile-item-gap} / 2);
+      }
+    }
+
+    & > .sort-and-filter-buttons {
+      margin-top: calc(#{$desktop-item-gap} / 2);
+      margin-bottom: calc(#{$desktop-item-gap} / 2);
+      @include mobile_sizes() {
+        margin-top: calc(#{$mobile-item-gap} / 2);
+        margin-bottom: calc(#{$mobile-item-gap} / 2);
+      }
+    }
+    .PLP-results {
+      margin-top: calc(#{$desktop-item-gap} / 2);
+      @include mobile_sizes() {
+        margin-top: calc(#{$mobile-item-gap} / 2);
+      }
+      display: flex;
+      & > {
+        .filters,
+        .sorting {
+          margin-left: $spacing-to-filters;
+        }
+      }
+    }
+    .cards {
+      // this is for all product lists, meaning PLPResults (category + search product lists) and SearchRecommendations
+      flex-wrap: wrap;
+      display: flex;
+      flex-direction: row;
+      flex-grow: 1;
+      overflow: hidden;
+    }
+  }
+}
+
+@mixin SearchPage(
+  $spacing-to-filters: 12px,
+  $desktop-item-gap: 20px,
+  $mobile-item-gap: 16px,
+  $spacing-above-search-field: true,
+  $query-input-width: 800px,
+  $gap-to-recs-factor: 3
+) {
+  .listing-page {
+    .query-input {
+      width: min(100%, $query-input-width);
+      align-self: center;
+
+      @if $spacing-above-search-field {
+        margin-top: calc(#{$desktop-item-gap} * 2);
+      }
+      margin-bottom: $desktop-item-gap;
+      @include mobile_sizes() {
+        margin-bottom: $mobile-item-gap;
+        @if $spacing-above-search-field {
+          margin-top: calc(#{$mobile-item-gap});
+        }
+      }
+      ~ .category-suggestions .category-suggestion {
+        &:last-child {
+          margin-right: auto;
+        }
+        &:first-child {
+          margin-left: auto;
+        }
+      }
+    }
+    .category-suggestions {
+      margin-bottom: $desktop-item-gap;
+      @include mobile_sizes() {
+        margin-bottom: $mobile-item-gap;
+      }
+    }
+    .query-input {
+      // if there are no category suggestions we should have 2x the gap between where they should be and what's there, only for desktop tho
+      & + .filter-results-for-one-row,
+      & + .results-for {
+        @media (min-width: 652px) {
+          margin-top: $desktop-item-gap;
+        }
+      }
+    }
+    .search-recs {
+      // whole gap here so that we don't have to make the margin bottom of search-results conditional
+      margin-top: calc(#{$desktop-item-gap} * #{$gap-to-recs-factor});
+      // in between these there's the border, a visual line separating the results and recs
+      padding-top: calc(#{$desktop-item-gap} * #{$gap-to-recs-factor});
+      @include mobile_sizes() {
+        margin-top: calc(#{$mobile-item-gap} * #{$gap-to-recs-factor});
+        padding-top: calc(#{$mobile-item-gap} * #{$gap-to-recs-factor});
+      }
+    }
+    .PLP-results.nothing + .search-recs {
+      // if no results, bring us closer
+      margin-top: calc(#{$desktop-item-gap} * 1.5);
+      padding-top: calc(#{$desktop-item-gap} * 1.5);
+      @include mobile_sizes() {
+        margin-top: calc(#{$mobile-item-gap} * 1.5);
+        padding-top: calc(#{$mobile-item-gap} * 1.5);
+      }
+    }
+  }
+}
+
+@mixin CategoryPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
+  .listing-page {
+    .quicklinks,
+    .crumbs {
+      margin-bottom: $desktop-item-gap;
+      @include mobile_sizes() {
+        margin-bottom: $mobile-item-gap;
+      }
+    }
+  }
+}
+
+@mixin mobile_sizes() {
+  @media (max-width: 651px) {
+    @content;
+  }
+}

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

@@ -0,0 +1,24 @@
+@use "../../variables";
+
+@mixin ScrollStatus(
+  $scroll-status-background: rgba(100, 100, 100, 0.9),
+  $border-radius: calc(variables.$border-radius * 5)
+) {
+  .scroll-status {
+    pointer-events: none;
+    position: sticky;
+    bottom: 10vh;
+    white-space: nowrap;
+    display: flex;
+    justify-content: center;
+    z-index: calc(#{variables.$base-z-index} + 4);
+    align-items: center;
+    opacity: 0;
+    .text {
+      background: $scroll-status-background;
+      color: white;
+      padding: 10px 20px;
+      border-radius: $border-radius;
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "../../helpers/supports-hover";
+@use "./Buttons";
+
+@mixin SelectedFilters(
+  $border-radius: variables.$border-radius,
+  $title-color: variables.$brand-black,
+  $filter-title-transform: uppercase,
+  $margin-on-desktop: 0px,
+  $set-border-on-crumbs: true
+) {
+  .listing-page .selected-filters {
+    .inner {
+      // this is in here because it's an ExpandingContainer and the animation gets borked otherwise
+      margin-top: 10px;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      .title {
+        margin-right: 10px;
+      }
+      @media (min-width: 652px) {
+        margin-top: $margin-on-desktop;
+        margin-bottom: $margin-on-desktop;
+      }
+
+      .title {
+        @media (max-width: 600px) {
+          display: none;
+        }
+        font-size: 1.1em;
+        text-transform: $filter-title-transform;
+        color: $title-color;
+      }
+
+      .depict-slider {
+        overflow: hidden;
+        width: unset;
+
+        .clear-filter {
+          @if $set-border-on-crumbs {
+            border: 1px solid Buttons.$primary-button-background;
+          }
+          svg {
+            width: 12.64px;
+            height: 12.64px;
+          }
+        }
+        .clear-all-filters {
+          @if $set-border-on-crumbs {
+            border: Buttons.$secondary-button-border;
+          }
+        }
+
+        .clear-filter,
+        .clear-all-filters {
+          flex: 0 0 auto;
+          box-sizing: border-box;
+          white-space: nowrap;
+          padding: 5px 10px;
+          display: flex;
+          @include utils.flex-gap(5px, "row nowrap");
+          align-items: center;
+          border-radius: $border-radius;
+          font-size: 1em;
+          line-height: 1;
+          cursor: pointer;
+        }
+      }
+      @content;
+    }
+  }
+}