@depict-ai/react-ui 0.0.77 → 0.0.78

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

@@ -1,119 +0,0 @@
-@use "../../helpers/utils";
-@use "../../variables";
-
-/// Mixin that styles the idividual product cards in the InstantResults in the SearchModal
-
-@mixin InstantCard() {
-  .instant-results {
-    .instant-card {
-      $card-gap: 1.5vw;
-      &:hover,
-      &:focus {
-        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), -4px -4px 4px rgba(255, 255, 255, 0.3);
-        z-index: 2;
-      }
-      overflow: hidden;
-      flex: 1 1 100%;
-      display: flex;
-      background: white;
-      padding-left: 20px;
-      padding-top: 5px;
-      padding-bottom: 5px;
-      padding-right: 20px;
-      border-radius: variables.$border-radius;
-      @include utils.flex-gap($card-gap, "row nowrap");
-
-      .img-part {
-        flex: 0 0 100px;
-      }
-
-      .right-part {
-        flex-grow: 1;
-        display: flex;
-        justify-content: space-between;
-        @include utils.flex-gap($card-gap, "row nowrap");
-
-        .title-brand-tagline {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          @media (min-width: 601px) {
-            @include utils.flex-gap($card-gap, "row nowrap");
-          }
-
-          @media (max-width: 600px) {
-            @include utils.flex-gap($card-gap, "column nowrap");
-            flex-direction: column;
-            align-items: flex-start;
-          }
-
-          .title {
-            text-overflow: ellipsis;
-            white-space: pre-line;
-            overflow-wrap: anywhere;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-            word-break: break-word;
-          }
-
-          @if variables.get-merged(variables.$instant-card-defaults, variables.$instant-card, "show-tagline") {
-            .tagline {
-              font-size: 0.9em;
-              color: #868689;
-            }
-          } @else {
-            .tagline {
-              display: none;
-            }
-          }
-        }
-
-        .price-container {
-          @if variables.get-merged(variables.$instant-card-defaults, variables.$instant-card, "show-price") {
-            display: flex;
-
-            justify-content: center;
-            align-items: center;
-            @media (min-width: 601px) {
-              @include utils.flex-gap($card-gap, "row nowrap");
-            }
-
-            .price {
-              &:not(.orig) {
-                font-weight: 700;
-                color: #0f0f0f;
-              }
-              &.orig {
-                text-decoration: line-through;
-                color: #868689;
-              }
-              &.sales-price {
-                color: variables.get-merged(
-                  variables.$instant-card-defaults,
-                  variables.$instant-card,
-                  "sales-price-color"
-                );
-              }
-            }
-            @media (max-width: 600px) {
-              @include utils.flex-gap($card-gap, "column nowrap");
-              flex-direction: column;
-
-              .price:not(.orig) {
-                order: 0;
-              }
-
-              .price.orig {
-                order: 1;
-              }
-            }
-          } @else {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-@use "../../helpers/utils";
-@use "../../variables";
-
-/// Mixin that styles the container of the InstantResults in the SearchModal
-@mixin InstantResults() {
-  .instant-results {
-    display: flex;
-    flex-direction: column;
-    @include utils.flex-gap(variables.get-gap("between-instant-results"), "column nowrap");
-    @content;
-  }
-}

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

@@ -1,83 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../PLP/Buttons";
-@use "sass:map";
-
-/// 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.
-
-@mixin PreviousSearches() {
-  .previous-searches {
-    display: flex;
-    flex-direction: column;
-    @include utils.flex-gap(15px, "column nowrap");
-    $icon-color: variables.get-text-icon-color("neutral", "default");
-
-    .list {
-      display: flex;
-      flex-direction: column;
-      @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "between-items-in-row-mode"), "column nowrap");
-      .item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-top: 10px;
-        padding-bottom: 10px;
-        padding-left: 20px;
-        padding-right: 20px;
-        border-radius: variables.$border-radius;
-        overflow-wrap: anywhere;
-        .left {
-          @include utils.flex-gap(10px, "row nowrap");
-          display: flex;
-          align-items: center;
-          svg {
-            min-width: 12px;
-            path {
-              fill: $icon-color;
-            }
-          }
-        }
-        .delete {
-          height: 100%;
-          padding: 0 10px;
-          background: transparent;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          &:focus {
-            outline: none;
-          }
-
-          svg {
-            transition-duration: 150ms;
-            width: 13px;
-            height: 13px;
-            path {
-              fill: $icon-color;
-            }
-          }
-          &:hover svg {
-            transform: scale(1.2);
-            path {
-              fill: variables.get-text-icon-color("neutral", "pressed");
-            }
-          }
-          &:focus-visible {
-            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-            svg {
-              transform: scale(1.2);
-              path {
-                fill: variables.get-text-icon-color("neutral", "pressed");
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,160 +0,0 @@
-@use "../../variables";
-@use "../../helpers/supports-hover";
-@use "../PLP/Buttons";
-@use "sass:map";
-
-/// SearchField is the component that shows the search input, sometimes back button, clear button and the search button.
-
-@mixin SearchField() {
-  $search-field-background: variables.get-merged(
-    variables.$search-field-defaults,
-    variables.$search-field,
-    "background"
-  );
-  $border-radius: variables.get-merged(variables.$search-field-defaults, variables.$search-field, "border-radius");
-
-  .search-field {
-    input,
-    button {
-      margin: 0; // safari has some default margin
-    }
-    display: flex;
-    z-index: calc(#{variables.$search-page-base-z-index} + 5); // make shadow go above contents
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
-    // For the shadow
-    border-radius: $border-radius;
-
-    //&:focus-within {
-    //  // something like this could be nice?
-    //  box-shadow: 0px 4px 12px rgba(15, 15, 15, 0.16);
-    //}
-
-    .query {
-      font-size: initial;
-      border-radius: $border-radius 0 0 $border-radius;
-      flex-grow: 1;
-      padding-left: 20px;
-      padding-top: 14px;
-      padding-bottom: 14px;
-      padding-right: 55px;
-      width: 100%;
-      color: variables.get-text-icon-color("neutral", "default");
-      background-color: $search-field-background;
-      border: none;
-
-      &:focus {
-        outline: none;
-        color: variables.get-text-icon-color("neutral", "pressed");
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          outline: none;
-          color: variables.get-text-icon-color("neutral", "pressed");
-        }
-      }
-      &.has-adjacent-back-button {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        padding-left: 0;
-      }
-    }
-
-    .field {
-      position: relative;
-      flex-grow: 1;
-      display: flex;
-    }
-
-    .back {
-      background-color: $search-field-background;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      padding-left: 10px;
-      padding-top: 14px;
-      padding-bottom: 14px;
-      padding-right: 15px;
-      border-bottom-left-radius: $border-radius;
-      border-top-left-radius: $border-radius;
-      cursor: pointer;
-
-      svg path {
-        fill: variables.get-text-icon-color("neutral", "default");
-      }
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-        svg path {
-          fill: variables.get-text-icon-color("neutral", "hover");
-        }
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg path {
-            fill: variables.get-text-icon-color("neutral", "hover");
-          }
-        }
-      }
-    }
-
-    .clear,
-    .submit {
-      cursor: pointer;
-    }
-
-    .clear {
-      position: absolute;
-      right: 30px;
-      top: 50%;
-      transform: translateY(-50%) scale(0.8);
-      background-color: $search-field-background;
-      border: none;
-      padding: 0;
-      svg path {
-        fill: variables.get-text-icon-color("neutral", "default");
-      }
-
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-        svg path {
-          fill: variables.get-text-icon-color("neutral", "pressed");
-        }
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg path {
-            fill: variables.get-text-icon-color("neutral", "pressed");
-          }
-        }
-      }
-    }
-
-    .submit {
-      border: none;
-      padding: 0;
-      min-width: 50px;
-      border-radius: 0 $border-radius $border-radius 0;
-    }
-    @content;
-  }
-
-  .search-field:not(.in-modal) {
-    $border: 1px solid variables.get-border-color("neutral", "default");
-    .query {
-      border-top: $border;
-      border-bottom: $border;
-      border-left: $border;
-    }
-    .submit {
-      border-top: $border;
-      border-bottom: $border;
-      border-right: $border;
-    }
-  }
-}

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

@@ -1,86 +0,0 @@
-@use "../../helpers/utils";
-@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.
-@mixin SearchModal() {
-  .depict-search-modal-backdrop {
-    @include utils.modal-backdrop($z-index: variables.$base-z-index);
-  }
-
-  .depict-search-modal {
-    // Center horizontally by default, align_field can override
-    display: flex;
-    justify-content: center;
-
-    .search-field {
-      z-index: calc(#{variables.$base-z-index} + 5); // make shadow go above contents
-    }
-
-    .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: variables.get-background-color("subtle", "default");
-      max-width: variables.get-merged(variables.$search-modal-defaults, variables.$search-modal, "max-width");
-      z-index: calc(#{variables.$base-z-index} + 1);
-      border-radius: calc(#{variables.$border-radius} * 2.5);
-      $top-snapping: variables.get-merged(variables.$search-modal-defaults, variables.$search-modal, "top-snapping");
-
-      @media (hover: hover) and (pointer: fine) {
-        @media (max-height: 790px) {
-          @if $top-snapping {
-            max-height: 100%;
-            top: 0;
-            position: fixed;
-          }
-          @media (max-width: 600px) {
-            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%;
-            top: 0;
-            position: fixed;
-          }
-        }
-        @media (max-height: 1000px) and (max-width: 600px) {
-          left: 30px;
-          width: calc(100% - 30px);
-        }
-      }
-
-      .padded > *,
-      .search-field {
-        // workaround https://github.com/philipwalton/flexbugs#flexbug-1 in MobileSafari 12-14.2 (range is only what I tested)
-        flex-shrink: 0;
-      }
-      .padded {
-        padding-top: 20px;
-        padding-left: max(1vw, 10px);
-        padding-right: max(1vw, 10px);
-        @include utils.flex-gap(20px, "column nowrap");
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-      }
-
-      .discover-more {
-        display: flex;
-        justify-content: center;
-
-        button {
-          padding: 12px 18px;
-          margin: 20px 0;
-          @if variables.$uppercase-text-transform != "none" {
-            text-transform: variables.$uppercase-text-transform;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,28 +0,0 @@
-@use "../../variables";
-@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() {
-  .listing-page {
-    .search-recs {
-      border-top: 2px solid variables.get-border-color("subtle", "default");
-      display: flex;
-      flex-direction: column;
-      .search-recs-title {
-        line-height: 1;
-        font-weight: 600;
-        font-size: 24px;
-        margin-top: 0;
-        margin-bottom: 20px;
-      }
-      .load-more-container {
-        display: flex;
-        justify-content: center;
-        margin-top: 30px;
-      }
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-/// This is the styling for the text that says "Showing __30__ result(s) for __falk__"
-@mixin ShowingResultsFor() {
-  .results-for {
-    font-size: 1.5em;
-    overflow-wrap: anywhere;
-  }
-}

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

@@ -1,12 +0,0 @@
-/// Component style mixins for Search styling
-/// Don't forget to also include PLP styling
-
-@forward "Autocomplete";
-@forward "CategorySuggestions";
-@forward "InstantResults";
-@forward "InstantCard";
-@forward "SearchField";
-@forward "SearchRecommendations";
-@forward "ShowingResultsFor";
-@forward "SearchModal";
-@forward "../PLP/ProductListingPage";

package/dist/styles/helpers/color_inference.scss

@@ -1,112 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@use "./utils";
-
-@function get-possible-inferred-or-merged-something($default-values-map, $user-overrides-map, $type, $state) {
-  $value-from-merged-map: map.get(map.get(map.deep-merge($default-values-map, $user-overrides-map), $type), $state);
-  // If the color is specified as override, just return it.
-  @if map.has-key($user-overrides-map, $type) and map.has-key(map.get($user-overrides-map, $type), $state) {
-    @return $value-from-merged-map;
-  }
-  $infer-defaults-return-value: infer-defaults($user-overrides-map, $type);
-  $safe-overrides-map: map.get($infer-defaults-return-value, "map");
-  $changed-direction: map.get($infer-defaults-return-value, "changed-direction");
-  // If we don't have overrides or don't have a "default" override, don't infer and return from the merged map.
-  @if (not map.has-key($safe-overrides-map, $type)) or (not map.has-key(map.get($safe-overrides-map, $type), "default"))
-  {
-    @return $value-from-merged-map;
-  }
-
-  // If the color is specified as override NOW, just return it.
-  @if map.has-key($safe-overrides-map, $type) and map.has-key(map.get($safe-overrides-map, $type), $state) {
-    @return map.get(map.get($safe-overrides-map, $type), $state);
-  }
-
-  // We're good to infer
-  $our-color: map.get(map.get($safe-overrides-map, $type), "default");
-  $direction-to-go: if(
-    not $changed-direction,
-    if(color.lightness($our-color) >= 50%, "darken", "lighten"),
-    $changed-direction
-  );
-
-  //"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),
-  @if $direction-to-go == "darken" {
-    @if $state == "hover" {
-      @return color.adjust($our-color, $lightness: -12%, $saturation: -7%);
-    } @else if $state == "pressed" {
-      @return color.adjust($our-color, $lightness: -20%, $saturation: -10%);
-    } @else if $state == "disabled" {
-      @return color.adjust($our-color, $lightness: -30%, $saturation: -5%);
-    }
-  } @else {
-    @if $state == "hover" {
-      @return color.adjust($our-color, $lightness: 10%, $saturation: 5%);
-    } @else if $state == "pressed" {
-      @return color.adjust($our-color, $lightness: 20%);
-    } @else if $state == "disabled" {
-      @return color.adjust($our-color, $lightness: 30%);
-    }
-  }
-}
-
-@function infer-defaults($user-overrides-map, $type) {
-  @if (not map.has-key($user-overrides-map, "base")) or
-    (not map.has-key(map.get($user-overrides-map, "base"), "default"))
-  {
-    // If no base to fallback this function is useless
-    @return ("map": $user-overrides-map, "changed-direction": false);
-  }
-  // Check if have default
-  @if (not map.has-key($user-overrides-map, $type)) or (not map.has-key(map.get($user-overrides-map, $type), "default"))
-  {
-    $default-color: map.get(map.get($user-overrides-map, "base"), "default");
-    // it's important to always go in the same direction with our inference but since
-    // default color is the same for base, neutral and subtle we don't need to preserve the direction somewhere else, it will automatically be consistent
-    $changed-color: black;
-    $changed-direction: false;
-    @if $type == "neutral" {
-      @if color.lightness($default-color) >= 50% {
-        $changed-color: color.adjust($default-color, $lightness: -25%, $saturation: -10%);
-        $changed-direction: "darken";
-      } @else {
-        $changed-color: color.adjust($default-color, $lightness: 25%);
-        $changed-direction: "lighten";
-      }
-    } @else if $type == "subtle" {
-      @if color.lightness($default-color) >= 50% {
-        // Please never change lightness by more than 50% as the distance won't be the same between neutral and subtle anymore
-        // If you do, find out the max change possible for a certain color and only change neutral half of that (I think that's like using color.scale but that function doesn't work in the black-direction IIRC?)
-        $changed-color: color.adjust($default-color, $lightness: -30%, $saturation: -20%);
-        $changed-direction: "darken";
-      } @else {
-        $changed-color: color.adjust(
-          $default-color,
-          $lightness: 30%,
-          $saturation:
-            if((color.saturation($default-color)) < 30% and (color.saturation($default-color) > 2%), 20%, -20%)
-        );
-        $changed-direction: "lighten";
-      }
-    } @else if $type == "inverse" {
-      // Invert color and ensure saturation is same as input color
-      $changed-color: color.change(color.invert($default-color), $saturation: color.saturation($default-color));
-    } @else {
-      @debug "Unknown type: #{$type}";
-    }
-    // Merge in default
-    $modified-map: map.deep-merge(
-      $user-overrides-map,
-      (
-        $type: (
-          "default": $changed-color,
-        ),
-      )
-    );
-    @return ("map": $modified-map, "changed-direction": $changed-direction);
-  }
-
-  @return ("map": $user-overrides-map, "changed-direction": false);
-}