@depict-ai/react-ui 0.0.77 → 0.0.78

package/dist/styles/helpers/custom_input.scss

@@ -1,194 +0,0 @@
-@use "sass:string";
-@use "sass:color";
-@use "supports-hover";
-@use "sass:map";
-@use "utils";
-@use "../components/PLP/Buttons";
-
-// https://selleo.com/til/posts/rc5qli22jp-pass-hex-color-to-fill-svg-in-background-url-scss
-@function escape-url-hex-color($hex_color) {
-  $ie-color-string: color.ie-hex-str($hex_color);
-  $string: string.quote($ie-color-string);
-  $color: string.slice($string, 4);
-  @return "%23" + $color;
-}
-
-@mixin custom_input(
-  $checkbox-background-color,
-  $checkbox-checked-background-color,
-  $checkbox-checkmark-color,
-  $checkbox-border-radius,
-  $checkbox-border,
-  $checkbox-left-offset,
-  $checkbox-top-offset,
-  $radio-border,
-  $radio-background-color,
-  $radio-selected-dot-color,
-  $radio-selected-dot-size,
-  $radio-selected-offset,
-  $hovered-checkbox-bg,
-  $hovered-checkbox-checked-background-color,
-  $hovered-checkbox-border,
-  $hovered-radio-border,
-  $input-row-height,
-  $largest-border-on-custom-input
-) {
-  $width-and-height: calc(
-    #{$input-row-height} - calc(#{$largest-border-on-custom-input} * 2)
-  ); // border is on both sides
-  /* Customize the label (the container) */
-  .input-row {
-    position: relative;
-    cursor: pointer;
-
-    .custom-indicator {
-      position: relative;
-      // space to text
-      margin-right: 10px;
-    }
-
-    /* Hide the browser's default radio/checkbox input element */
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-    }
-    /* Create the custom-indicator (hidden when not checked) */
-    .custom-indicator:after {
-      content: "";
-      position: absolute;
-      display: none;
-    }
-
-    /* Create a custom checkbox */
-    input[type="checkbox"] {
-      & ~ .custom-indicator {
-        padding: calc(#{$width-and-height} / 2);
-        background-color: $checkbox-background-color;
-        border-radius: $checkbox-border-radius;
-        &:not(.color) {
-          border: $checkbox-border;
-        }
-        &.color {
-          padding: calc(#{$input-row-height} / 2); // doesn't have border so needs more size
-          &.outline {
-            $border-width: 0.5px;
-            padding: calc(calc(#{$input-row-height} - calc(#{$border-width} * 2)) / 2);
-            border: $border-width solid #868689;
-          }
-        }
-      }
-      /* When the checkbox is checked, add a blue background */
-      &:checked ~ .custom-indicator {
-        // background-color: #000;
-        background-color: $checkbox-checked-background-color;
-        &:after {
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color($checkbox-checkmark-color)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-          fill: #fff;
-          color: #fff;
-          position: absolute;
-          top: calc(50% + $checkbox-top-offset);
-          left: calc(50% + $checkbox-left-offset);
-          transform: translate(-50%, -50%);
-
-          display: block; // Show the custom-indicator when checked
-
-          /* Style the custom-indicator */
-          width: 12px;
-          height: 10px;
-        }
-        &.color:after {
-          // Force this to be white for color checkboxes
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-        }
-        &.color.check-dark:after {
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#000)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-        }
-        &.color.check-multi:after {
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path style="stroke:black;stroke-width:1px" d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-        }
-      }
-      &:focus-visible ~ .custom-indicator {
-        background-color: $hovered-checkbox-bg;
-        &.color {
-          filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-        }
-      }
-      &:checked:focus-visible ~ .custom-indicator {
-        background-color: $hovered-checkbox-checked-background-color;
-      }
-    }
-    @include supports-hover.supports-hover() {
-      &:hover input[type="checkbox"] {
-        & ~ .custom-indicator {
-          background-color: $hovered-checkbox-bg;
-          &:not(.color) {
-            border: $hovered-checkbox-border;
-            $hovered-border-width: get_border_width($hovered-checkbox-border);
-            $border-width: get_border_width($checkbox-border);
-            padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
-          }
-        }
-        &:checked ~ .custom-indicator {
-          background-color: $hovered-checkbox-checked-background-color;
-        }
-      }
-    }
-
-    /* Create a custom radio button */
-    input[type="radio"] {
-      ~ .custom-indicator {
-        padding: calc(#{$width-and-height} / 2);
-        border-radius: 50%;
-        border: $radio-border;
-        background-color: $radio-background-color;
-      }
-      &:checked ~ .custom-indicator {
-        background-color: transparent;
-        &:after {
-          display: block; // Show the custom-indicator when checked
-
-          /* Style the custom-indicator */
-          width: $radio-selected-dot-size;
-          height: $radio-selected-dot-size;
-          left: calc(50% + $radio-selected-offset);
-          top: calc(50% + $radio-selected-offset);
-          transform: translate(-50%, -50%);
-
-          // width: 8px;
-          // height: 8px;
-          // top: 6px;
-          // left: 6px;
-          background-color: $radio-selected-dot-color;
-          border-radius: 50%;
-        }
-      }
-      &:focus-visible ~ .custom-indicator {
-        @include utils.highlight-background($radio-background-color);
-      }
-      &:checked:focus-visible ~ .custom-indicator:after {
-        @include utils.highlight-background($radio-selected-dot-color, 15%, 25%);
-      }
-    }
-    @include supports-hover.supports-hover() {
-      &:hover input[type="radio"] ~ .custom-indicator {
-        border: $hovered-radio-border;
-        $hovered-border-width: get_border_width($hovered-radio-border);
-        $border-width: get_border_width($radio-border);
-        padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
-      }
-    }
-
-    @content;
-  }
-}
-
-@function get_border_width($border-declaration) {
-  @if $border-declaration == "none" or $border-declaration == "unset" {
-    @return 0px;
-  } @else {
-    @return nth($border-declaration, 1);
-  }
-}

package/dist/styles/helpers/supports-hover.scss

@@ -1,7 +0,0 @@
-/// Wraps @content in a media query that targets devices that support `:hover` in a non-fallback way.
-
-@mixin supports-hover {
-  @media not all and (hover: none) {
-    @content;
-  }
-}

package/dist/styles/helpers/utils.scss

@@ -1,110 +0,0 @@
-@use "sass:math";
-@use "sass:color";
-
-/// This mixin is used for the SortAndFilterModal and the SearchModal to color the backdrop behind the modal
-/// @param {Color} $background [rgba(0, 0, 0, 0.4)] - The background color of the backdrop, keep in mind it should be a transparent color
-/// @param {Number} $z-index - The z-index of the backdrop
-@mixin modal-backdrop($background: rgba(0, 0, 0, 0.4), $z-index) {
-  position: fixed;
-  background: $background;
-  z-index: $z-index;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  touch-action: none;
-}
-
-/// This mixin sets the background property to the provided color but darkens it by the provided amounts if it is brighter or darker than 50%
-/// The purpose is to really easily create i.e. hover effects
-/// @param {Color} $normal-background - The color to darken or lighten
-/// @param {Percentage} $darken-factor [10%] - The amount to darken the color by
-/// @param {Percentage} $lighten-factor [10%] - The amount to lighten the color by
-/// @param {Percentage} $saturation-factor [$darken-factor] - The amount to decrease saturation by when the color is darkened
-@mixin highlight-background(
-  $normal-background,
-  $darken-factor: 10%,
-  $lighten-factor: 10%,
-  $saturation-factor: $darken-factor
-) {
-  @if color.lightness($normal-background) >= 50% {
-    background: color.adjust($normal-background, $lightness: -$darken-factor, $saturation: -$saturation-factor);
-  } @else {
-    background: color.adjust($normal-background, $lightness: $lighten-factor);
-  }
-}
-
-/// Like highlight-background mixin but returns color value
-@function highlight-color(
-  $normal-background,
-  $darken-factor: 10%,
-  $lighten-factor: 10%,
-  $saturation-factor: $darken-factor
-) {
-  @if color.lightness($normal-background) >= 50% {
-    @return color.adjust($normal-background, $lightness: -$darken-factor, $saturation: -$saturation-factor);
-  } @else {
-    @return color.adjust($normal-background, $lightness: $lighten-factor);
-  }
-}
-
-// source of below: https://gist.github.com/mashirozx/c0691c3b8ed3f1f63722883649d41c18
-/// We can't (or couldn't) use flex gap due to poor compatibility, this mixin is used instead of it and generates margins. We recommend reading the source code and applying thinking to the margin situation that will result.
-@mixin _flex-gap($gap, $row: true, $use_nth_child: true) {
-  $margin: math.div($gap, 2);
-  $transform: -$margin;
-
-  @if $use_nth_child {
-    > * {
-      @if $row {
-        // modified to be worse by Daniel (probable broke row-reverse and order property) due to him being opinionated on avoiding negative margins when possible
-        &:not(:first-child) {
-          margin-left: $margin;
-        }
-        &:not(:last-child) {
-          margin-right: $margin;
-        }
-      } @else {
-        &:not(:first-child) {
-          margin-top: $margin;
-        }
-        &:not(:last-child) {
-          margin-bottom: $margin;
-        }
-      }
-    }
-  } @else {
-    @if $row {
-      margin-left: $transform;
-      margin-right: $transform;
-    } @else {
-      margin-top: $transform;
-      margin-bottom: $transform;
-    }
-    > * {
-      @if $row {
-        margin-left: $margin;
-        margin-right: $margin;
-      } @else {
-        margin-top: $margin;
-        margin-bottom: $margin;
-      }
-    }
-  }
-}
-
-@mixin flex-gap($gap, $flex-flow: "row nowrap") {
-  @if $flex-flow== "row nowrap" or $flex-flow== "row-reverse nowrap" {
-    @include _flex-gap($gap, true);
-  } @else if $flex-flow== "column nowrap" or $flex-flow== "column-reverse nowrap" {
-    @include _flex-gap($gap, false);
-  } @else if $flex-flow== "row wrap" or $flex-flow== "row-reverse wrap" {
-    @include _flex-gap($gap, true, false);
-    @include _flex-gap($gap, false, false);
-  } @else if $flex-flow== "column wrap" or $flex-flow== "column-reverse wrap" {
-    @include _flex-gap($gap, true, false);
-    @include _flex-gap($gap, false, false);
-  } @else {
-    @error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
-  }
-}

package/dist/styles/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "@depict-ai/plp-styling",
-  "packageManager": "yarn@3.2.2",
-  "scripts": {
-    "publish": "yarn npm publish"
-  },
-  "files": [
-    "components/",
-    "helpers/",
-    "index.scss",
-    "variables.scss"
-  ],
-  "sass": "index.scss",
-  "version": "0.0.17",
-  "description": "Depict PLP UI SCSS Styling",
-  "author": "Daniel Troger <daniel@depict.ai>",
-  "contributors": [
-    "Fabian Hedin <fabian@depict.ai>",
-    "Sverre Westerlund <sverre@depict.ai>",
-    "Joakim Olsson <joakim.olsson@depict.ai>",
-    "Arnaud Cortisse <arnaud@depict.ai>",
-    "Carl Riis <carl@depict.ai>"
-  ],
-  "license": "MIT",
-  "devDependencies": {
-    "sassdoc": "^2.7.4"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/dist/styles/variables.scss

@@ -1,312 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@use "./helpers/utils";
-@use "helpers/color_inference";
-
-/// Deep merged two maps and gives you the value of a key in the merged map.
-/// @param {Map} $map - The base map, whose keys will be overridden by the keys in $map2.
-/// @param {Map} $map2 - The map whose keys will override the keys in $map.
-/// @param {String} $key - The key whose value you want to get from the merged map.
-@function get-merged($map, $map2, $key) {
-  @return map.get(map.deep-merge($map, $map2), $key);
-}
-
-/// Set this to the background color of your page. It's needed for example for some things that fade into the background color (that are over another element).
-$page-background-color: white !default;
-
-/// The colors to be used across the UI
-/// We're trying to avoid getting colours from this map directly in style declarations, instead there's a layer of abstraction on top of this map.
-/// That is because different things in the UI need to have different colours from the palette, depending on the palette.
-/// See the maps below for text and icon colours, border colors and background colors.
-$base-colors: () !default;
-$base-colors-defaults: (
-  1000: #000,
-  800: #0f0f0f,
-  600: #333335,
-  500: #868689,
-  400: #cbcbcc,
-  300: #e4e4e5,
-  200: #f3f3f5,
-  100: #fafafc,
-  0: #fff,
-);
-
-$text-icon-colors: () !default;
-$text-icon-colors-defaults: (
-  "base": (
-    "default": get-merged($base-colors-defaults, $base-colors, 800),
-    "hover": get-merged($base-colors-defaults, $base-colors, 600),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
-  ),
-  "neutral": (
-    "default": get-merged($base-colors-defaults, $base-colors, 600),
-    "hover": get-merged($base-colors-defaults, $base-colors, 800),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
-  ),
-  "subtle": (
-    "default": get-merged($base-colors-defaults, $base-colors, 500),
-    "hover": get-merged($base-colors-defaults, $base-colors, 600),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 800),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
-  ),
-  "inverse": (
-    "default": get-merged($base-colors-defaults, $base-colors, 0),
-    "hover": get-merged($base-colors-defaults, $base-colors, 200),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 300),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 500),
-  ),
-);
-
-$border-colors: () !default;
-$border-colors-defaults: (
-  "base": (
-    "default": get-merged($base-colors-defaults, $base-colors, 800),
-    "hover": get-merged($base-colors-defaults, $base-colors, 600),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
-  ),
-  "neutral": (
-    "default": get-merged($base-colors-defaults, $base-colors, 400),
-    "hover": get-merged($base-colors-defaults, $base-colors, 500),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 700),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 300),
-  ),
-  "subtle": (
-    "default": get-merged($base-colors-defaults, $base-colors, 300),
-    "hover": get-merged($base-colors-defaults, $base-colors, 400),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 500),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 200),
-  ),
-  "inverse": (
-    "default": get-merged($base-colors-defaults, $base-colors, 0),
-    "hover": get-merged($base-colors-defaults, $base-colors, 400),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 300),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 500),
-  ),
-);
-
-$background-colors: () !default;
-$background-colors-defaults: (
-  "base": (
-    "default": get-merged($base-colors-defaults, $base-colors, 0),
-    "hover": get-merged($base-colors-defaults, $base-colors, 200),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 300),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 100),
-  ),
-  "neutral": (
-    "default": get-merged($base-colors-defaults, $base-colors, 300),
-    "hover": get-merged($base-colors-defaults, $base-colors, 400),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 200),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 100),
-  ),
-  "subtle": (
-    "default": get-merged($base-colors-defaults, $base-colors, 200),
-    "hover": get-merged($base-colors-defaults, $base-colors, 300),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 400),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 100),
-  ),
-  "inverse": (
-    "default": get-merged($base-colors-defaults, $base-colors, 800),
-    "hover": get-merged($base-colors-defaults, $base-colors, 600),
-    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
-    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
-  ),
-);
-
-/// What font weights to use for the different font weights. The main reason to allow customisation for this is to allow for custom fonts that don't have the same font weights as the default font. So for example if your font doesn't have a "light" (300) font weight then you can set it to 400 and it will use the "regular" (400) font weight instead.
-/// @prop {Number} font-weights.300 [300] - The font weight to use for "light" (300) text
-/// @prop {Number} font-weights.400 [400] - The font weight to use for "regular" (400) text
-/// @prop {Number} font-weights.500 [500] - The font weight to use for "medium" (500) text
-/// @prop {Number} font-weights.600 [600] - The font weight to use for "semibold" (600) text
-/// @prop {Number} font-weights.700 [700] - The font weight to use for "bold" (700) text
-$font-weights: () !default;
-$font-weights-defaults: (
-  300: 300,
-  400: 400,
-  500: 500,
-  600: 600,
-  700: 700,
-);
-
-/// The base z-index of the modal
-$base-z-index: 5000 !default;
-/// The z-index of the search page
-$search-page-base-z-index: 1 !default;
-/// The border radius to use. This is used in many places and not often exactly this value. Sometimes a multiple is used and if it's 0 then everything will be square
-$border-radius: 4px !default;
-
-// The color of the progress bar below the toast that shows when it will auto-close
-$toast-progress-bar-color: map.get(
-  get-merged($text-icon-colors-defaults, $text-icon-colors, "base"),
-  "default"
-) !default;
-
-/// Sometimes text is all uppercase in the UI. This is the default text transform used to do that that. For example, if you don't want uppercase text, you can set this to `none`
-$uppercase-text-transform: uppercase !default;
-
-/// Configuration for the filters on the right
-/// @prop {Number with size unit} filters-configuration.spacing-between-input-rows [10px] - How much space should be between the input rows. Input row being a checkbox/radio button and its label.
-/// @prop {Number with size unit} filters-configuration.input-row-height-goal [20px] - How high an "input row" should try to be. Input row being a checkbox/radio button and its label. If this is smaller than the text size, it will be ignored. If this is an odd number, the filled-in part of checked radio buttons look off-center in google chrome on macOS on 1440p screens.
-$filters-configuration: () !default;
-$filters-configuration-defaults: (
-  "spacing-between-input-rows": 10px,
-  "input-row-height-goal": 20px,
-);
-
-/// Configuration for the search modal.
-/// @prop {Number with size unit} search-modal.max-width [800px] - The max width of the modal. Also used for the max width of SearchField on the search page.
-/// @prop {Boolean} search-modal.top-snapping [true] - If the modal should snap to the top at certain screen sizes, only recommended to disable if you take care of this via JS
-$search-modal: () !default;
-$search-modal-defaults: (
-  "max-width": 800px,
-  "top-snapping": true,
-);
-
-/// Configuration for the buttons that show up when scrolling up after not being too close to the top on mobile
-/// @prop {Number with size unit} floating-buttons.bottom-distance [12px] - The distance from the bottom of the buttons to the bottom of the screen.
-/// @prop {Number with size unit} floating-buttons.side-distance [12px] - The distance from the `$position`-side of the buttons to the `$position`-side of the screen.
-/// @prop {"left" | "right"} floating-buttons.position ["left"] - The side of the screen the buttons should be aligned to. Can be "left" or "right".
-$floating-buttons: () !default;
-$floating-buttons-defaults: (
-  "bottom-distance": 12px,
-  "side-distance": 12px,
-  "position": "left",
-);
-
-/// Configuration for the search field, that is inside the search modal or on the search page.
-/// @prop {Color} search-field.background [map.get(get-merged($background-colors-defaults, $background-colors, "base"), "default")] - The background color of the input field, clear button and back button
-/// @prop {Number with size unit} search-field.border-radius [variables.$border-radius * 2.5] - Border radius of the outer edges of the whole SearchField
-$search-field: () !default;
-$search-field-defaults: (
-  "background": map.get(get-merged($background-colors-defaults, $background-colors, "base"), "default"),
-  "border-radius": calc(#{$border-radius} * 2.5),
-);
-
-/// Not all gaps can currently be customised using this but some of them do. If this is useful for you and you think we should make it more consistent, please let us know.
-/// @prop {Number with size unit} gaps.between-instant-results [5px] - The gap between the individual instant results in the modal
-/// @prop {Number with size unit} gaps.autocomplete.between-items-in-row-mode [5px] - The vertical gap between the "list-style items", the individual suggestions that have the full width.
-/// @prop {Number with size unit} gaps.autocomplete.between-category-and-other [20px] - The vertical gap between the category and query suggestion sections
-/// @prop {Number with size unit} gaps.autocomplete.between-compact-suggestions [5px] - The horizontal gap between the individual query suggestions that show up in "compact" mode (multiple in the same row) when no query has been entered
-/// @prop {Map} gaps.listing-page - The product listing page (PLP) overall. Note that for the gaps here not the exact values will always be used but often multiples for different places where it's appropriate.
-/// @prop {Number with size unit} gaps.listing-page.spacing-to-filters [12px] - The spacing between the filters and content.
-/// @prop {Number with size unit} gaps.listing-page.desktop-item-gap [20px] - The vertical gap between the different items on desktop.
-/// @prop {Number with size unit} gaps.listing-page.mobile-item-gap [16px] - The vertical gap between the different items on mobile.
-/// @prop {Number with size unit} gaps.listing-page.above-and-below-selected-filters.mobile [10px] - The spacing above and below the selected filters on mobile.
-/// @prop {Number with size unit} gaps.listing-page.above-and-below-selected-filters.desktop [0] - The spacing above and below the selected filters on desktop.
-/// @prop {Boolean} gaps.listing-page.search.spacing-above-search-field [true] - Whether to add equal spacing above the search field as below.
-/// @prop {Number with size unit} gaps.listing-page.search.gaps-to-refactor [3] - he factor to multiply the gaps with to get the spacing above the recommendations.
-$gaps: () !default;
-$gaps-defaults: (
-  "between-instant-results": 5px,
-  "autocomplete": (
-    "between-items-in-row-mode": 5px,
-    "between-category-and-other": 20px,
-    "between-compact-suggestions": 5px,
-  ),
-  "listing-page": (
-    "spacing-to-filters": 12px,
-    "desktop-item-gap": 20px,
-    "mobile-item-gap": 16px,
-    "above-and-below-selected-filters": (
-      "mobile": 10px,
-      "desktop": 0,
-    ),
-    "search": (
-      "spacing-above-search-field": true,
-      "gap-to-recs-factor": 3,
-    ),
-  ),
-);
-
-/// Styling overrides for the InstantCard component - the component which shows 4 search results in the SearchModal.
-/// @prop {Color} instant-card.sales-price-color [#ff2e3e] - The color of the sales price
-/// @prop {Boolean} instant-card.show-price [true] - Whether to show the price
-/// @prop {Boolean} instant-card.show-tagline [true] - Whether to show the "tagline" (different for different customers, some show for example the material of the product)
-$instant-card: () !default;
-$instant-card-defaults: (
-  "sales-price-color": #ff2e3e,
-  "show-price": true,
-  "show-tagline": true,
-);
-
-/// See [documentation of Autocomplete mixin](https://scss-docs.depict.ai/#mixin-Autocomplete) for explanation of this map.
-/// It allows customizing the highlighting in the query suggestions
-$autocomplete-entries-without-highlight: () !default;
-/// See [documentation of Autocomplete mixin](https://scss-docs.depict.ai/#mixin-Autocomplete) for explanation of this map.
-/// It allows customizing the highlighting in the query suggestions
-$autocomplete-entries-with-highlight: () !default;
-
-/// Styling overrides for our primary buttons (`button.major`, styled by the PrimaryButton mixin)
-/// @prop {Color} primary-button.background [variables.get-background-color("inverse", "default")] - The background color of the primary button
-/// @prop {Color} primary-button.hover-background [variables.get-background-color("inverse", "hover")] - The hovered background color of the primary button
-/// @prop {Color} primary-button.active-background [variables.get-background-color("inverse", "pressed")] - The active background color of the primary button
-/// @prop {Color} primary-button.color [variables.get-text-icon-color("inverse", "default")] - The text color of the primary button
-/// @prop {Border} primary-button.border [1px solid transparent] - The border of the primary button
-/// @prop {Number with size unit} primary-button.border-radius [variables.$border-radius] - The border radius of the primary button
-/// @prop {Filter} 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))] - The filter to apply to the primary button when hovered
-/// @prop {Filter} 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))] - The filter to apply to the primary button when active
-/// @prop {Filter} 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))] - The filter to apply to the primary button when focused with keyboard navigation.
-$primary-button: () !default;
-/// Styling overrides for our secondary buttons (`button.minor`, styled by the SecondaryButton mixin)
-/// @prop {Color} secondary-button.background [variables.get-background-color("base", "default")] - The background color of the secondary button
-/// @prop {Color} secondary-button.hover-background [variables.get-background-color("base", "hover")] - The hovered background color of the secondary button
-/// @prop {Color} secondary-button.active-background [variables.get-background-color("base", "pressed")] - The active background color of the secondary button
-/// @prop {Color} secondary-button.color [variables.get-text-icon-color("base", "default")] - The text color of the secondary button
-/// @prop {Border} secondary-button.border [variables.get-border("base", "default") 1px solid] - The border of the secondary button
-/// @prop {Number with size unit} secondary-button.border-radius [variables.$border-radius] - The border radius of the secondary button
-/// @prop {Filter} 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))] - The filter to apply to the secondary button when hovered
-/// @prop {Filter} 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))] - The filter to apply to the secondary button when active
-/// @prop {Filter} 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))] - The filter to apply to the secondary button when focused with keyboard navigation.
-$secondary-button: () !default;
-
-/// Makes it easy to get the text color
-/// @param {"base" | "neutral" | "subtle" | "inverse"} $type - What type of color
-/// @param {"default" | "hover" | "pressed" | "disabled"} $state ["base"] - The state
-@function get-text-icon-color($type, $state) {
-  @return color_inference.get-possible-inferred-or-merged-something(
-    $text-icon-colors-defaults,
-    $text-icon-colors,
-    $type,
-    $state
-  );
-}
-
-/// Makes it easy to get the border color
-/// @param {"base" | "neutral" | "subtle" | "inverse"} $type - What type of color
-/// @param {"default" | "hover" | "pressed" | "disabled"} $state ["base"] - The state
-@function get-border-color($type, $state) {
-  @return color_inference.get-possible-inferred-or-merged-something(
-    $border-colors-defaults,
-    $border-colors,
-    $type,
-    $state
-  );
-}
-
-/// Makes it easy to get the background color
-/// @param {"base" | "neutral" | "subtle" | "inverse"} $type - What type of color
-/// @param {"default" | "hover" | "pressed" | "disabled"} $state ["base"] - The state
-@function get-background-color($type, $state) {
-  @return color_inference.get-possible-inferred-or-merged-something(
-    $background-colors-defaults,
-    $background-colors,
-    $type,
-    $state
-  );
-}
-
-/// Makes it easy to get font weight
-/// @param {300 | 400 | 500 | 600} $type - What type of font weight to get (light, regular, medium or bold)
-@function get-font-weight($type) {
-  @return get-merged($font-weights-defaults, $font-weights, $type);
-}
-
-/// Makes it easy to get a gap value from the $gaps map
-/// @param {String} $name - The name of the property to get
-@function get-gap($name) {
-  @return get-merged($gaps-defaults, $gaps, $name);
-}