@depict-ai/react-ui 0.0.75 → 0.0.77

package/dist/styles/variables.scss

@@ -1,11 +1,12 @@
 @use "sass:map";
 @use "sass:color";
+@use "./helpers/utils";
+@use "helpers/color_inference";
 
-////
-/// 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
-////
-
+/// 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);
 }
@@ -13,6 +14,10 @@
 /// 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,
@@ -24,7 +29,6 @@ $base-colors-defaults: (
   200: #f3f3f5,
   100: #fafafc,
   0: #fff,
-  "deprecated-grey": #e7e8e7,
 );
 
 $text-icon-colors: () !default;
@@ -111,13 +115,19 @@ $background-colors-defaults: (
   ),
 );
 
-/// Change this to what's available in your font
+/// 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
@@ -125,9 +135,6 @@ $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
-///
-/// 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 !default;
 
 // The color of the progress bar below the toast that shows when it will auto-close
@@ -139,86 +146,84 @@ $toast-progress-bar-color: map.get(
 /// 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: (
-  /// How much space should be between the input rows. Input row being a checkbox/radio button and its label.
   "spacing-between-input-rows": 10px,
-  /// 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.
-  "input-row-height-goal": 21px
+  "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: (
-  /// The max width of the modal
-  /// Also used for the max width of SearchField on the search page
   "max-width": 800px,
-  /// If the modal should snap to the top at certain screen sizes, only recommended to disable if you take care of this via JS
-  "top-snapping": true
+  "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: (
-  /// The distance from the bottom of the buttons to the bottom of the screen.
   "bottom-distance": 12px,
-  // The distance from the `$position`-side of the buttons to the `$position`-side of the screen.
   "side-distance": 12px,
-  //The side of the screen the buttons should be aligned to. Can be "left" or "right".
-  "position": "left"
+  "position": "left",
 );
 
-/// Background of the SearchField
+/// 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: (
-  /// The background color of the input field, clear button and back buton
   "background": map.get(get-merged($background-colors-defaults, $background-colors, "base"), "default"),
-  /// Border radius of the outer edges of the whole SearchField
-  "border-radius": calc(#{$border-radius} * 2.5)
+  "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: (
-  /// The gap between the individual instant results in the modal
   "between-instant-results": 5px,
-  /// The query suggestion part of the modal
-  "autocomplete":
-    (
-      /// The vertical gap between the "list-style items", the individual suggestions that have the full width.
-      "between-items-in-row-mode": 5px,
-      /// The vertical gap between the category and query suggestion sections
-      "between-category-and-other": 20px,
-      /// 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
-      "between-compact-suggestions": 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,
     ),
-  /// 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.
-  "listing-page":
-    (
-      /// The spacing between the filters and content.
-      "spacing-to-filters": 12px,
-      /// The vertical gap between the different items on desktop.
-      "desktop-item-gap": 20px,
-      /// The vertical gap between the different items on mobile.
-      "mobile-item-gap": 16px,
-      /// Spacing above and below selected filters
-      "above-and-below-selected-filters":
-        (
-          "mobile": 10px,
-          "desktop": 0,
-        ),
-      /// Values specific to the search page
-      "search":
-        (
-          /// Whether to add equal spacing above the search field as below.
-          "spacing-above-search-field": true,
-          /// The factor to multiply the gaps with to get the spacing above the recommendations.
-          "gap-to-recs-factor": 3
-        )
-    )
+    "search": (
+      "spacing-above-search-field": true,
+      "gap-to-recs-factor": 3,
+    ),
+  ),
 );
 
-/// Customize Instant Card
+/// 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,
@@ -226,33 +231,72 @@ $instant-card-defaults: (
   "show-tagline": true,
 );
 
-/// See documentation of Autocomplete mixin for explanation of these maps
-/// They allow customizing the highlighting in the query suggestions
+/// 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-color($type, $state) {
-  @return map.get(get-merged($text-icon-colors-defaults, $text-icon-colors, $type), $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 map.get(get-merged($border-colors-defaults, $border-colors, $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 map.get(get-merged($background-colors-defaults, $background-colors, $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
@@ -261,6 +305,8 @@ $secondary-button: () !default;
   @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.75";
+export const version = "0.0.77";
 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.75";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.77";
 
 
 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: ()=>{}
     };

package/dist-server/module.js

@@ -3,18 +3,18 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.75";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.77";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
     return props.children;
 }
-function $2b1fdeb83610500f$export$210723f5a54a7028() {
+function $2b1fdeb83610500f$export$a54ec244c8863715() {
     return (0, $1RlIW$jsx)("div", {
         children: []
     });
 }
-function $2b1fdeb83610500f$export$d87c61cecb2edf0d() {
+function $2b1fdeb83610500f$export$f7d2f673fc2f091d() {
     return (0, $1RlIW$jsx)("div", {
         children: []
     });
@@ -29,7 +29,7 @@ function $2b1fdeb83610500f$export$466cdc317043f6cb() {
         children: []
     });
 }
-function $2b1fdeb83610500f$export$3f4580d6398c5027() {
+function $2b1fdeb83610500f$export$80e99ee6b29cadd2() {
     return (0, $1RlIW$createElement)("div", {
         className: "depict aligner",
         style: {
@@ -47,19 +47,19 @@ function $2b1fdeb83610500f$export$89c6019e4baa40b1() {
         children: []
     });
 }
-function $2b1fdeb83610500f$export$45080d603eda647c() {
+function $2b1fdeb83610500f$export$9bb30bbe003b82e0() {
     return {
-        DepictSearchField: ()=>(0, $1RlIW$jsx)("div", {
+        SearchField: ()=>(0, $1RlIW$jsx)("div", {
                 children: []
             })
     };
 }
 function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}
-function $2b1fdeb83610500f$export$cc1e9aaf280afdcb() {
+function $2b1fdeb83610500f$export$912994940e660d32() {
     return {
         open: ()=>{}
     };
 }
 
 
-export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$210723f5a54a7028 as DepictSearchPage, $2b1fdeb83610500f$export$d87c61cecb2edf0d as DepictCategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$3f4580d6398c5027 as DepictAligner, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$45080d603eda647c as useDepictSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$cc1e9aaf280afdcb as useDepictSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
+export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.53",
-    "@depict-ai/utilishared": "^0.0.50",
+    "@depict-ai/ui": "^0.0.56",
+    "@depict-ai/utilishared": "^0.0.53",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -104,7 +104,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.14",
+    "@depict-ai/plp-styling": "^0.0.17",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",