@depict-ai/react-ui 0.0.74 → 0.0.76

package/dist/styles/helpers/custom_input.scss

@@ -2,7 +2,7 @@
 @use "sass:color";
 @use "supports-hover";
 @use "sass:map";
-@use "./utils";
+@use "utils";
 @use "../components/PLP/Buttons";
 
 // https://selleo.com/til/posts/rc5qli22jp-pass-hex-color-to-fill-svg-in-background-url-scss
@@ -30,11 +30,11 @@
   $hovered-checkbox-checked-background-color,
   $hovered-checkbox-border,
   $hovered-radio-border,
-  $input-row-height-goal,
+  $input-row-height,
   $largest-border-on-custom-input
 ) {
   $width-and-height: calc(
-    #{$input-row-height-goal} - calc(#{$largest-border-on-custom-input} * 2)
+    #{$input-row-height} - calc(#{$largest-border-on-custom-input} * 2)
   ); // border is on both sides
   /* Customize the label (the container) */
   .input-row {
@@ -72,10 +72,10 @@
           border: $checkbox-border;
         }
         &.color {
-          padding: calc(#{$input-row-height-goal} / 2); // doesn't have border so needs more size
+          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-goal} - calc(#{$border-width} * 2)) / 2);
+            padding: calc(calc(#{$input-row-height} - calc(#{$border-width} * 2)) / 2);
             border: $border-width solid #868689;
           }
         }

package/dist/styles/helpers/utils.scss

@@ -20,9 +20,15 @@
 /// @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
-@mixin highlight-background($normal-background, $darken-factor: 10%, $lighten-factor: 10%) {
+/// @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);
+    background: color.adjust($normal-background, $lightness: -$darken-factor, $saturation: -$saturation-factor);
   } @else {
     background: color.adjust($normal-background, $lightness: $lighten-factor);
   }

package/dist/styles/index.scss

@@ -1,3 +1,54 @@
-@forward "./components/PLP";
-@forward "./components/category";
-@forward "./components/search";
+@forward "variables";
+
+@use "components/PLP";
+@use "components/category";
+@use "components/search";
+
+/// Default theme for Search and Category pages. Calling this mixin will generate all the styling for the page specified.
+/// To configure variables, use `@use` and `with`
+/// @param {"both" | "search" | "category"} $scope - What to generate styling for. Set this to `category` if you are only using the Category page or `search` if you are only using the Search page. If you are using both, set this to `both`.
+///
+/// @example scss - Example usage for when only using the category page that disables all rounded corners.
+///  @use "@depict-ai/plp-styling" with (
+///    $border-radius: 0
+///  );
+///  @include plp-styling.default-theme("category");
+@mixin default-theme($scope) {
+  .depict.plp {
+    button {
+      border: none; // Disable default button border
+    }
+    @include PLP.PLPResults();
+    @include PLP.ProductListingPage();
+    @include PLP.SelectedFilters();
+    @include PLP.ScrollStatus();
+    @include PLP.SortAndFilter();
+    @include PLP.SortAndFilterModal();
+    @include PLP.FloatingButtons();
+    @include PLP.SlidableItems();
+    @include PLP.PrimaryButton();
+    @include PLP.SecondaryButton();
+  }
+  @if $scope != "category" {
+    .depict.search {
+      @include search.Autocomplete();
+      @include search.CategorySuggestions();
+      @include search.InstantResults();
+      @include search.InstantCard();
+      @include search.SearchField();
+      @include search.SearchModal();
+      @include search.SearchPage();
+      @include search.SearchRecommendations();
+      @include search.ShowingResultsFor();
+    }
+  }
+  @if $scope != "search" {
+    .depict.category {
+      @include category.BreadCrumbs();
+      @include category.QuickLinks();
+      @include category.CategoryTitle();
+      @include category.CategoryPage();
+    }
+  }
+  @include PLP.Toast();
+}

package/dist/styles/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@depict-ai/plp-styling",
+  "packageManager": "yarn@3.2.2",
+  "scripts": {
+    "publish": "yarn npm publish"
+  },
+  "files": [
+    "components/",
+    "helpers/",
+    "index.scss",
+    "variables.scss"
+  ],
+  "version": "0.0.15",
+  "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,61 +1,295 @@
-////
-/// This is the file containing the main variables used across all styles, such as base colors, rounds and z-index
-/// Many values and variables are derived from them
-////
-
-$brand-black: #0f0f0f;
-$brand-grey: #868689;
-$brand-dark-grey: #333335;
-$brand-light-grey: #bcbcbe;
-$brand-lighter-grey: #eeeef0;
-$brand-lightest-grey: #fafafc;
-$deprecated-grey: #e7e8e7;
+@use "sass:map";
+@use "sass:color";
+
+/// 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;
+$base-z-index: 5000 !default;
 /// The z-index of the search page
-$search-page-base-z-index: 1;
+$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
-///
-/// Does re-assigning this variable with, for example, `PLP.$border-radius: 0` or `variables.$border-radius: 0` give an error in your IDE?
-/// Please upvote the Jetbrains issue (and maybe also comment why this is an issue for you) to get it fixed in WebStorm: https://youtrack.jetbrains.com/issue/WEB-46500
-$border-radius: 4px;
+$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 [21px] - 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.
+$filters-configuration: () !default;
+$filters-configuration-defaults: (
+  "spacing-between-input-rows": 10px,
+  "input-row-height-goal": 21px,
+);
 
-/// Makes the PLP.all-components mixin use WhiteSortAndFilter instead of SortAndFilter
-$white: true !default;
+/// 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,
+);
 
-// Instant Card
-$instant-card-sales-price-color: #ff2e3e;
-$instant-card-show-price: true;
-$instant-card-show-tagline: 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",
+);
 
-// Doesn't work well in IDEs
-$g-instant-card: (
+/// 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-subtitle": true,
-);
-
-/// Configure the styling - right now only works for three variables.
-/// This is subject to change.
-///
-/// @param {String} $instant-card-sales-price-color [null]
-///   Determines the color of the sales price in the Instant Card component
-/// @param {Boolean} $instant-card-show-price [null]
-///   Determines if the price is shown in the Instant Card component
-/// @param {Boolean} $instant-card-show-tagline [null]
-///   Determines if the tagline is shown in the Instand Card component
-@mixin configure(
-  $instant-card-sales-price-color: null,
-  $instant-card-show-price: null,
-  $instant-card-show-tagline: null
-) {
-  @if $instant-card-sales-price-color != null {
-    $instant-card-sales-price-color: $instant-card-sales-price-color !global;
-  }
-  @if $instant-card-show-price != null {
-    $instant-card-show-price: $instant-card-show-price !global;
-  }
-  @if $instant-card-show-tagline != null {
-    $instant-card-show-tagline: $instant-card-show-tagline !global;
-  }
+  "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-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-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-color($type, $state) {
+  @return map.get(get-merged($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 map.get(get-merged($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 map.get(get-merged($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);
 }

package/dist-server/index.d.ts

@@ -3,19 +3,19 @@ type OpenModal = () => void;
 interface UseSearchModalReturn {
     open: OpenModal;
 }
-interface UseDepictSearchFieldReturn {
+interface UseSearchFieldReturn {
     /**
      * A React component that renders the search field.
      */
-    DepictSearchField: () => ReactElement;
+    SearchField: () => ReactElement;
 }
-export const version = "0.0.74";
+export const version = "0.0.76";
 export function DepictProvider(props: any): any;
-export function DepictSearchPage(): any;
-export function DepictCategoryPage(): any;
+export function SearchPage(): any;
+export function CategoryPage(): any;
 export function BreadCrumbs(): any;
 export function QuickLinks(): any;
-export function DepictAligner(): import("react").DetailedReactHTMLElement<{
+export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
     className: string;
     style: {
         height: string;
@@ -23,6 +23,6 @@ export function DepictAligner(): import("react").DetailedReactHTMLElement<{
 }, HTMLElement>;
 export function ImagePlaceHolder(): any;
 export function TextPlaceholder(): any;
-export function useDepictSearchField(): UseDepictSearchFieldReturn;
+export function useSearchField(): UseSearchFieldReturn;
 export function openModal(): void;
-export function useDepictSearchModal(): UseSearchModalReturn;
+export function useSearchModal(): UseSearchModalReturn;

package/dist-server/main.js

@@ -6,31 +6,31 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "DepictProvider", () => $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "DepictSearchPage", () => $41e7e5d85b5e0d49$export$210723f5a54a7028);
-$parcel$export(module.exports, "DepictCategoryPage", () => $41e7e5d85b5e0d49$export$d87c61cecb2edf0d);
+$parcel$export(module.exports, "SearchPage", () => $41e7e5d85b5e0d49$export$a54ec244c8863715);
+$parcel$export(module.exports, "CategoryPage", () => $41e7e5d85b5e0d49$export$f7d2f673fc2f091d);
 $parcel$export(module.exports, "BreadCrumbs", () => $41e7e5d85b5e0d49$export$5646050d516e06bc);
 $parcel$export(module.exports, "QuickLinks", () => $41e7e5d85b5e0d49$export$466cdc317043f6cb);
-$parcel$export(module.exports, "DepictAligner", () => $41e7e5d85b5e0d49$export$3f4580d6398c5027);
+$parcel$export(module.exports, "ComponentAligner", () => $41e7e5d85b5e0d49$export$80e99ee6b29cadd2);
 $parcel$export(module.exports, "ImagePlaceHolder", () => $41e7e5d85b5e0d49$export$ecf150517ad2aa0);
 $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
-$parcel$export(module.exports, "useDepictSearchField", () => $41e7e5d85b5e0d49$export$45080d603eda647c);
+$parcel$export(module.exports, "useSearchField", () => $41e7e5d85b5e0d49$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
-$parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$export$cc1e9aaf280afdcb);
+$parcel$export(module.exports, "useSearchModal", () => $41e7e5d85b5e0d49$export$912994940e660d32);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.74";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.76";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
     return props.children;
 }
-function $41e7e5d85b5e0d49$export$210723f5a54a7028() {
+function $41e7e5d85b5e0d49$export$a54ec244c8863715() {
     return (0, $5efvh$reactjsxruntime.jsx)("div", {
         children: []
     });
 }
-function $41e7e5d85b5e0d49$export$d87c61cecb2edf0d() {
+function $41e7e5d85b5e0d49$export$f7d2f673fc2f091d() {
     return (0, $5efvh$reactjsxruntime.jsx)("div", {
         children: []
     });
@@ -45,7 +45,7 @@ function $41e7e5d85b5e0d49$export$466cdc317043f6cb() {
         children: []
     });
 }
-function $41e7e5d85b5e0d49$export$3f4580d6398c5027() {
+function $41e7e5d85b5e0d49$export$80e99ee6b29cadd2() {
     return (0, $5efvh$react.createElement)("div", {
         className: "depict aligner",
         style: {
@@ -63,15 +63,15 @@ function $41e7e5d85b5e0d49$export$89c6019e4baa40b1() {
         children: []
     });
 }
-function $41e7e5d85b5e0d49$export$45080d603eda647c() {
+function $41e7e5d85b5e0d49$export$9bb30bbe003b82e0() {
     return {
-        DepictSearchField: ()=>(0, $5efvh$reactjsxruntime.jsx)("div", {
+        SearchField: ()=>(0, $5efvh$reactjsxruntime.jsx)("div", {
                 children: []
             })
     };
 }
 function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}
-function $41e7e5d85b5e0d49$export$cc1e9aaf280afdcb() {
+function $41e7e5d85b5e0d49$export$912994940e660d32() {
     return {
         open: ()=>{}
     };