@depict-ai/react-ui 2.0.9 → 2.0.10

package/dist/module.js

@@ -1,285 +0,0 @@
-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

@@ -1,124 +0,0 @@
-@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

@@ -1,31 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-@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

@@ -1,142 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

@@ -1,74 +0,0 @@
-@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;
-    }
-  }
-}