@depict-ai/react-ui 2.0.9 → 2.0.11

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

@@ -1,23 +1,32 @@
 @use "../../variables";
 
-@mixin BreadCrumbs() {
+/// BreadCrumbs is the trail of links that shows the user where they are in the site hierarchy and allows them to go back up the tree. Often BreadCrumbs are located at the top of the page.
+/// @param {Color} $color [variables.$brand-dark-grey] - The color of the text.
+/// @param {Color} $separator-color [variables.$brand-grey] - The color of the separator between the links.
+/// @param {Color} $selected-color [variables.$brand-black] - The color of the last link in the trail (the one that is selected).
+
+@mixin BreadCrumbs(
+  $color: variables.$brand-dark-grey,
+  $separator-color: variables.$brand-grey,
+  $selected-color: variables.$brand-black
+) {
   .crumbs {
     display: flex;
     flex-wrap: wrap;
     .crumb {
-      color: variables.$brand-dark-grey;
+      color: $color;
       &:hover {
         text-decoration: underline;
       }
       &:last-of-type {
-        color: variables.$brand-black;
+        color: $selected-color;
         font-weight: 500;
       }
     }
     .separator {
       margin-left: 10px;
       margin-right: 10px;
-      color: variables.$brand-grey;
+      color: $separator-color;
     }
   }
 }

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

@@ -2,7 +2,18 @@
 @use "../../helpers/utils";
 @use "../../helpers/supports-hover";
 
-@mixin CategoryTitle($title-font-weight: 700, $explanation-font-weight: 500, $title-color: variables.$brand-grey) {
+/// CategoryTitle is the component that shows the title of the current category along with the number of products in it.
+/// This component is optional. When setting up the SDK in TypeScript you can choose between using this component (CategoryTitle) or embedded_num_products which will just show the number of products in the category and allow you to add a title outside of the category page yourself.
+/// You only need to call the mixin if you're using the CategoryTitle component.
+/// @param {Number} $title-font-weight [700] - The font weight of the title
+/// @param {Number} $explanation-font-weight [500] - The font weight of the dash, number of products and "products" string
+/// @param {Color} $explanation-color [variables.$brand-grey] - The color of the dash, number of products and "products" string
+
+@mixin CategoryTitle(
+  $title-font-weight: 700,
+  $explanation-font-weight: 500,
+  $explanation-color: variables.$brand-grey
+) {
   .category-title {
     overflow-wrap: anywhere;
     font-size: 1.5em;
@@ -16,9 +27,10 @@
     .title {
       margin-right: 10px;
       font-weight: $title-font-weight;
+      font-size: inherit;
     }
     .explanation {
-      color: $title-color;
+      color: $explanation-color;
       font-weight: $explanation-font-weight;
       .product-count {
         margin-left: 10px;

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

@@ -3,11 +3,19 @@
 @use "../../helpers/supports-hover";
 @use "../PLP/Buttons";
 @use "sass:color";
+@use "sass:map";
+
+/// The QuickLinks show the quick links to the subcategories or sibling categories of the current category.
+/// It enables to user to navigate to a subcategory or sibling category without having to go back to the category page.
+/// @param {Color} $background [white] - The background color of the individual quick links
+/// @param {Border | false} $border-radius [false] - Border radius override of the individual quick links. Set to false to use default border radius.
+/// @param {Color} $selected-background [map.get(Buttons.get-primary-button-properties(), "background")] - Background of the currently selected quick link
+/// @param {Color | false} $hovered-background [false] - Override background of the quick link when hovered. Set to false to automatically infer it.
 
 @mixin QuickLinks(
   $background: white,
   $border-radius: false,
-  $selected-background: Buttons.$primary-button-background,
+  $selected-background: map.get(Buttons.get-primary-button-properties(), "background"),
   $hovered-background: false
 ) {
   .quicklinks {
@@ -15,15 +23,16 @@
     .quicklink {
       white-space: nowrap;
       padding: 10px 20px;
-      border-radius: variables.$border-radius;
       background: $background;
       color: variables.$brand-black;
       transition: all 75ms ease-in-out;
-      &:focus {
-        outline: none;
-      }
       @if $border-radius {
         border-radius: $border-radius;
+      } @else {
+        border-radius: variables.$border-radius;
+      }
+      &:focus {
+        outline: none;
       }
       @include supports-hover.supports-hover() {
         &:hover {
@@ -40,7 +49,7 @@
         } @else {
           @include utils.highlight-background($normal-background: $background);
         }
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
       }
       &:active {
         @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
@@ -56,7 +65,7 @@
         }
         &:focus-visible {
           @include utils.highlight-background($normal-background: $selected-background);
-          filter: Buttons.$primary-button-focus-visible-filter;
+          filter: map.get(Buttons.get-primary-button-properties(), "focus-visible-filter");
         }
         &:active {
           @include utils.highlight-background(

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

@@ -9,11 +9,11 @@
 @forward "CategoryTitle";
 @forward "../PLP/ProductListingPage";
 
-// Load all mixins with default values. If only minor theming is needed styles in variables.scss can be
-// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables
-// The variables are forwarded from PLP/index.scss
-// If more control is needed use these mixins separately and pass custom params
-@mixin all-components() {
+/// Load all category page mixins with default values. If only minor theming is needed styles in variables.scss can be
+/// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables.
+/// The variables are forwarded from PLP/index.scss.
+/// If more control is needed use these mixins separately and pass custom params.
+@mixin all-category-components() {
   .depict.category {
     @include BreadCrumbs.BreadCrumbs();
     @include QuickLinks.QuickLinks();

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

@@ -2,26 +2,103 @@
 @use "../../helpers/utils";
 @use "PreviousSearches";
 @use "../PLP/Buttons";
+@use "sass:map";
+
+/// Autocomplete is the component that displays suggested Categories and Products in the SearchModal, both under the "Suggestions" heading (i18n key `suggestions_`) when the customer hasn't typed anything, and once the customer has started typing.
+/// It also includes previous searches inside of the suggestions provided from the API - when the user hasn't typed though, the PreviousSearches component is shown instead.
+///
+/// ### Explanation of "entries without highlight" and "entries with highlight"
+///
+/// When the user is typing in the input field, we show query and category suggestions from the API and suggestions from the previous searches of the user (which are saved in localStorage).
+/// While the user is typing, we highlight the *new* parts of the query that we are suggesting (what the user hasn't typed). This only happens *if* the suggestion contains the query the user has typed.
+///
+/// The most flexible yet simple way we could come up with to style this is by breaking it down as follows:
+/// Note: "entry" refers to a suggestion from the API or a previous search.
+/// <ol>
+/// <li><b>Entries without highlight:</b><br />
+/// This is the styling for the entries where nothing is highlighted. This is the case when the user hasn't typed anything yet, or when the suggestion doesn't contain the query the user has typed.</li>
+/// <li><b>Entries with highlight:</b><br />
+/// Something is highlighted in this suggestion. This is the case when the user has typed something and the suggestion contains the query the user has typed.
+/// There are two things you can style here:
+/// <ol><li><b>Highlighted part:</b><br />
+/// The styling for the highlighted part of the suggestion.</li>
+/// <li><b>Toned down part:</b><br />
+/// The styling for the part of the suggestion that is not highlighted. This is the part of the suggestion that the user has already typed.</li></ol></li></ol>
+///
+/// @param {Color} $background [white] background color on the individual suggestion items
+/// @param {Color} $selected-background [#ffffff80] background color on the individual suggestion items when they are selected (hovered or selected by keyboard navigating (up/down arrows))
+/// @param {Color} $icon-color [variables.$brand-black] - color of the clock, search and clear icon
+/// @param {Number with size unit} $autocomplete-gap-between-items-in-row-mode [5px] - The vertical gap between the "list-style items", the individual suggestions that have the full width.
+/// @param {Number with size unit} $autocomplete-gap-between-category-and-other [20px]- The vertical gap between the category and query suggestion sections
+/// @param {Number with size unit} $autocomplete-gap-between-compact-suggestions [$autocomplete-gap-between-items-in-row-mode] - 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
+/// @param {Color} $heading-color [variables.$brand-dark-grey] - The color of the heading of both the previous searches and the suggestions (all headings in the Autocomplete section)
+/// @param {Number} $heading-font-weight [700] - The font weight of all headings in the Autocomplete section
+/// @param {Map} $entries-without-highlight [("color": variables.$brand-dark-grey, "font-weight": 400)] - Map between *any* CSS property key to CSS value. The styling for the entries where nothing is highlighted, see the explanation above.
+/// @param {Map} $entries-with-highlight [(
+///    "highlighted-part": (
+///      "color": variables.$brand-dark-grey,
+///      "font-weight": 500
+///    ),
+///    "toned-down-part": (
+///      "color": variables.$brand-dark-grey,
+///      "font-weight": 400
+///    )
+///  )] - Map containing either "toned-down-part" which is a map and/or "highlighted-part" which is also a map. Both of the aforementioned maps can contain *any* CSS property key to CSS value. See the explanation above in the `Explanation of "entries without highlight" and "entries with highlight"`-section.
+/// @example scss - Simple example adding a custom font for the highlighted part of the suggestions
+///   @include search.Autocomplete(
+///    $entries-with-highlight: (
+///      "highlighted-part": (
+///        "font-family": "Gotham Medium",
+///      ),
+///    )
+///  );
+/// @example scss - Example if having bold text doesn't fit your brand and you instead want to make what the user typed "light" but keep the rest "regular":
+///   @include search.Autocomplete(
+///    $entries-without-highlight: (
+///      "font-weight": 400
+///    ),
+///    $entries-with-highlight: (
+///      "highlighted-part": (
+///        "font-weight": 400
+///      ),
+///      "toned-down-part": (
+///        "font-weight": 300
+///      )
+///    )
+///  );
 
 @mixin Autocomplete(
   $background: white,
   $selected-background: #ffffff80,
-  $search-icon-color: variables.$brand-black,
-  $history-icon-color: variables.$brand-black,
+  $icon-color: variables.$brand-black,
   $autocomplete-gap-between-items-in-row-mode: 5px,
   $autocomplete-gap-between-category-and-other: 20px,
+  $autocomplete-gap-between-compact-suggestions: $autocomplete-gap-between-items-in-row-mode,
   $heading-color: variables.$brand-dark-grey,
   $heading-font-weight: 700,
-  $entries-without-highlight-color: variables.$brand-dark-grey,
-  $entries-without-highlight-font-weight: 400,
-  $entries-with-highlight-highlighted-part-color: variables.$brand-dark-grey,
-  $entries-with-highlight-highlighted-part-font-weight: 500,
-  $entries-with-highlight-toned-down-part-color: variables.$brand-dark-grey,
-  $entries-with-highlight-toned-down-part-font-weight: 400
+  $entries-without-highlight: (),
+  $entries-with-highlight: ()
 ) {
+  $entries-without-highlight-defaults: (
+    "color": variables.$brand-dark-grey,
+    "font-weight": 400,
+  );
+  $entries-with-highlight-defaults: (
+    "highlighted-part": (
+      "color": variables.$brand-dark-grey,
+      "font-weight": 500,
+    ),
+    "toned-down-part": (
+      "color": variables.$brand-dark-grey,
+      "font-weight": 400,
+    ),
+  );
+  $merged-entries-without-highlight: map.merge($entries-without-highlight-defaults, $entries-without-highlight);
+  $merged-entries-with-highlight: map.merge($entries-with-highlight-defaults, $entries-with-highlight);
   @include PreviousSearches.PreviousSearches(
-    $icon-color: $history-icon-color,
-    $item-color: $entries-without-highlight-color
+    $icon-color: $icon-color,
+    $item-color: map.get($merged-entries-without-highlight, "color"),
+    $gap-between-items: $autocomplete-gap-between-items-in-row-mode
   );
   .previous-searches,
   .suggestions {
@@ -40,7 +117,7 @@
 
       &:focus-visible {
         outline: none;
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
       }
     }
   }
@@ -65,8 +142,9 @@
         overflow-wrap: anywhere;
         align-items: center;
         border-radius: variables.$border-radius;
-        font-weight: $entries-without-highlight-font-weight;
-        color: $entries-without-highlight-color;
+        @each $property, $value in $merged-entries-without-highlight {
+          #{$property}: $value;
+        }
 
         padding: 10px 20px;
 
@@ -76,17 +154,19 @@
           svg {
             transform: scale(0.6) translate(-6.9px, -7.2px);
             path {
-              fill: $search-icon-color;
+              fill: $icon-color;
             }
           }
         }
 
         .has-history-match {
-          color: $entries-with-highlight-toned-down-part-color;
-          font-weight: $entries-with-highlight-toned-down-part-font-weight;
+          @each $property, $value in map.get($merged-entries-with-highlight, "toned-down-part") {
+            #{$property}: $value;
+          }
           .highlighted-part {
-            color: $entries-with-highlight-highlighted-part-color;
-            font-weight: $entries-with-highlight-highlighted-part-font-weight;
+            @each $property, $value in map.get($merged-entries-with-highlight, "highlighted-part") {
+              #{$property}: $value;
+            }
           }
         }
 
@@ -111,7 +191,7 @@
     &.compact > .suggestion-container.query {
       flex-direction: row;
       flex-wrap: wrap;
-      @include utils.flex-gap(5px, "row wrap");
+      @include utils.flex-gap($autocomplete-gap-between-compact-suggestions, "row wrap");
     }
   }
 }

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

@@ -2,6 +2,14 @@
 @use "../../helpers/utils";
 @use "../../variables";
 
+/// CategorySuggestions is the component that displays suggested Categories on the SearchPage, above the results.
+/// @param {Color} $card-background [white] - The background color of individual category "cards"
+/// @param {false | Color} $hovered-card-background [false] - The background color of individual category "cards" when hovered. If false, a color is automatically obtained by lightening or darkening `$card-background`.
+/// @param {Border | false} $card-border [false] - The border of individual category "cards". If false, no border is applied.
+/// @param {Number with size unit} $card-border-radius [variables.$border-radius] - The border radius of individual category "cards"
+/// @param {Number} $title-font-weight [420] - The font weight of the text on the category "cards"
+/// @param {Number} $parent-title-font-weight [400] - The font weight of the text on the category "cards" that is the parent of proposed category (not always displayed)
+/// @param {Boolean} $thin [true] - If true, the category title and parent category title are displayed besides each other (in the same row).
 @mixin CategorySuggestions(
   $card-background: white,
   $hovered-card-background: false,

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

@@ -1,8 +1,13 @@
 @use "../../helpers/utils";
 @use "../../variables";
 
+/// Mixin that styles the idividual product cards in the InstantResults in the SearchModal
+/// @param {Color} $instant-card-sales-price-color [$instant-card-sales-price-color] - The color of the sales price
+/// @param {Boolean} $instant-card-show-price [true] - Whether to show the price
+/// @param {Boolean} $instant-card-show-tagline [true] - Whether to show the tagline (this can be different things depending on what backend sends)
+
 @mixin InstantCard(
-  $instant-card-sales_price_color: variables.$instant-card-sales_price_color,
+  $instant-card-sales-price-color: variables.$instant-card-sales-price-color,
   $instant-card-show-price: variables.$instant-card-show-price,
   $instant-card-show-tagline: variables.$instant-card-show-tagline
 ) {
@@ -92,7 +97,7 @@
                 color: #868689;
               }
               &.sales-price {
-                color: $instant-card-sales_price_color;
+                color: $instant-card-sales-price-color;
               }
             }
             @media (max-width: 600px) {

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

@@ -1,5 +1,7 @@
 @use "../../helpers/utils";
 
+/// Mixin that styles the container of the InstantResults in the SearchModal
+/// @param {Number with size unit} $gap [5px] - The gap between the InstantResults
 @mixin InstantResults($gap: 5px) {
   .instant-results {
     display: flex;

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

@@ -1,8 +1,21 @@
 @use "../../variables";
 @use "../../helpers/utils";
 @use "../PLP/Buttons";
+@use "sass:map";
 
-@mixin PreviousSearches($icon-color: variables.$brand-black, $item-color: variables.$brand-black) {
+/// PreviousSearches is the component that shows the previous searches of the user in its own section, with a heading that says "Your previous searches" (key of the string is `previous_searches_text_` in the locales).
+/// The component is only shown if the user has previous searches and the search field is empty.
+///
+/// PreviousSearches is a sub-component of Autocomplete so you probably don't want to use it on its own. It can also be configured by configuring Autocomplete.
+/// @param {Color} $icon-color [variables.$brand-black] - The color of the clock icon and clear icon. Keep in mind that it needs to have contrast with the hovered state of the delete icon
+/// @param {Color} $item-color [variables.$brand-black] - The color of the text of the previous searches item
+/// @param {Number with size unit} $gap-between-items [5px] - The gap between the individual previous searches items
+
+@mixin PreviousSearches(
+  $icon-color: variables.$brand-dark-grey,
+  $item-color: variables.$brand-black,
+  $gap-between-items: 5px
+) {
   .previous-searches {
     display: flex;
     flex-direction: column;
@@ -11,7 +24,7 @@
     .list {
       display: flex;
       flex-direction: column;
-      @include utils.flex-gap(5px, "column nowrap");
+      @include utils.flex-gap($gap-between-items, "column nowrap");
       .item {
         color: $item-color;
         display: flex;
@@ -52,7 +65,7 @@
             width: 13px;
             height: 13px;
             path {
-              fill: variables.$brand-dark-grey;
+              fill: $icon-color;
             }
           }
           &:hover svg {
@@ -62,7 +75,7 @@
             }
           }
           &:focus-visible {
-            filter: Buttons.$secondary-button-focus-visible-filter;
+            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
             svg {
               transform: scale(1.2);
               path {

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

@@ -1,6 +1,27 @@
 @use "../../variables";
 @use "../../helpers/supports-hover";
 @use "../PLP/Buttons";
+@use "sass:map";
+
+/// QueryInput is the component that shows the search input, sometimes back button, clear button and the search button.
+/// The version exported in the SDK it is called SearchField
+/// @param {Number with size unit} $border-radius [variables.$border-radius * 2.5] - Border radius of the search input
+/// @param {Number with size unit} $input-font-size [initial] - Font size of the `<input>` element
+/// @param {Number} $input-font-weight [initial] - Font weight of the `<input>` element
+/// @param {Color} $input-placeholder-color [initial] - Color of the placeholder text in the `<input>` element (the text that's visible when no search query has been entered)
+/// @param {Color | false} $submit-background [false] If not false: the background color of the submit button
+/// @param {Number} $submit-icon-size [1] - The scaling factor of the submit icon
+/// @param {Color} $back-color [variables.$brand-dark-grey] - The color of the path of the back icon
+/// @param {Color} $back-background [#fff] - The background color of the back button
+/// @param {Color} $clear-color [variables.$brand-dark-grey] - The color of the path of the clear icon
+/// @param {Color} $hovered-clear-color [variables.$brand-black] - The color of the path of the clear icon when hovered
+/// @param {Color} $query-text-color [variables.$brand-dark-grey] - The color of the text in the search input
+/// @param {Color} $query-background-color [#fff] - The background color of the `<input>` element
+/// @param {Border} $query-border [none] - The border of the `<input>` element
+/// @param {Color} $hovered-back-color [variables.$brand-black] - The color of the path of the back icon when hovered
+/// @param {false | Color} $hovered-submit-color [false] - If not false: the color of the path of the submit icon when hovered
+/// @param {Color} $focused-query-text-color [#000] - The color of the text in the search input when focused or hovered
+/// @param {Shadow} $box-shadow [0px 4px 4px rgba(0, 0, 0, 0.05)] - The box shadow of the whole QueryInput component (including buttons, etc)
 
 @mixin QueryInput(
   $border-radius: calc(#{variables.$border-radius} * 2.5),
@@ -21,6 +42,7 @@
   $focused-query-text-color: #000,
   $box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05)
 ) {
+  // TODO: Probably rename to SearchField?
   .query-input {
     input,
     button {
@@ -90,7 +112,7 @@
         outline: none;
       }
       &:focus-visible {
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
         svg path {
           fill: $hovered-back-color;
         }
@@ -125,7 +147,7 @@
         outline: none;
       }
       &:focus-visible {
-        filter: Buttons.$secondary-button-focus-visible-filter;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
         svg path {
           fill: $hovered-clear-color;
         }
@@ -152,10 +174,10 @@
         background: $submit-background;
       }
 
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg path {
-            @if $hovered-submit-color {
+      @if $hovered-submit-color {
+        @include supports-hover.supports-hover() {
+          &:hover {
+            svg path {
               fill: $hovered-submit-color;
             }
           }

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

@@ -2,6 +2,13 @@
 @use "../../variables";
 @use "../../helpers/supports-hover";
 
+/// SearchModal is the component that shows the search modal when the user clicks on the search icon/into the search field in the header.
+/// @param {Color} $background [variables.$brand-lighter-grey] - The background color of the search modal
+/// @param {Number with size unit} $border-radius [variables.$border-radius * 2.5] - The border radius of the edges of the search modal.
+/// @param {String} $discover-more-text-transform [uppercase] - The text transform applied to the "Discover more" button in the modal.
+/// @param {Boolean} $top-snapping [true] - If the modal should snap to the top of the page when the viewport has a very reduced height and it would utilise the space better if it snapped to the top of the page.
+/// @param {Number with size unit} $max-width [800px] - The max width of the modal
+
 @mixin SearchModal(
   $background: variables.$brand-lighter-grey,
   $border-radius: calc(#{variables.$border-radius} * 2.5),
@@ -28,38 +35,37 @@
     }
 
     .body {
+      // this also has position:absolute and width: 80vw set as default styling from the javascript, inside of SearchModal.tsx
       display: flex;
       flex-direction: column;
       background: $background;
-      width: 80vw;
       max-width: $max-width;
       z-index: calc(#{variables.$base-z-index} + 1);
-      position: absolute;
       border-radius: $border-radius;
       @media (hover: hover) and (pointer: fine) {
         @media (max-height: 790px) {
           @if $top-snapping {
-            max-height: 100% !important;
-            top: 0 !important;
+            max-height: 100%;
+            top: 0;
             position: fixed;
           }
           @media (max-width: 600px) {
-            left: 30px !important;
-            width: calc(100% - 30px) !important;
+            left: 30px;
+            width: calc(100% - 30px);
           }
         }
       }
       @media not all and (hover: hover) and (pointer: fine) {
         @if $top-snapping {
           @media (max-height: 1000px) {
-            max-height: 100% !important;
-            top: 0 !important;
+            max-height: 100%;
+            top: 0;
             position: fixed;
           }
         }
         @media (max-height: 1000px) and (max-width: 600px) {
-          left: 30px !important;
-          width: calc(100% - 30px) !important;
+          left: 30px;
+          width: calc(100% - 30px);
         }
       }
 

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

@@ -2,6 +2,9 @@
 @use "../../helpers/utils";
 @use "../../helpers/supports-hover";
 
+/// SearchRecommendations is the component that shows the search recommendations below the SearchResults once the user has reached the end of the results.
+/// @param {Border} $border-top [2px solid variables.$brand-light-grey] - The border separating the results and recommendations
+
 @mixin SearchRecommendations($border-top: 2px solid variables.$brand-light-grey) {
   .listing-page {
     .search-recs {

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

@@ -1,3 +1,6 @@
+/// This is the styling for the text that says "Showing __30__ result(s) for __falk__"
+/// @param {Number with unit} $results-for-font-size [1.5em] - The font size of the text
+/// @param {Boolean} $mobile-centered [false] - Whether the text should be centered on mobile sizes
 @mixin ShowingResultsFor($results-for-font-size: 1.5em, $mobile-centered: false) {
   .results-for {
     font-size: $results-for-font-size;

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

@@ -21,11 +21,11 @@
 @forward "SearchModal";
 @forward "../PLP/ProductListingPage";
 
-// Load all mixins with default values. If only minor theming is needed styles in variables.scss can be
-// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables
-// The variables are forwarded from PLP/index.scss
-// If more control is needed use these mixins separately and pass custom params
-@mixin all-components() {
+/// Load all search mixins with default values. If only minor theming is needed styles in variables.scss can be
+/// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables.
+/// The variables are forwarded from PLP/index.scss.
+/// If more control is needed use these mixins separately and pass custom params.
+@mixin all-search-components() {
   .depict.search {
     @include Autocomplete.Autocomplete();
     @include CategorySuggestions.CategorySuggestions();