@openedx/paragon 21.7.1 → 22.0.0-alpha.15

package/dist/Popover/popover-bootstrap.scss

@@ -0,0 +1,198 @@
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--pgn-elevation-popover-zindex);
+  display: block;
+  max-width: var(--pgn-size-popover-max-width);
+
+  @include reset-text();
+  @include font-size(var(--pgn-typography-popover-font-size));
+
+  word-wrap: break-word;
+  background-color: var(--pgn-color-popover-bg);
+  background-clip: padding-box;
+  border: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-border);
+  box-shadow: var(--pgn-elevation-popover-box-shadow);
+
+  @include border-radius(var(--pgn-size-popover-border-radius));
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: var(--pgn-size-popover-arrow-width);
+    height: var(--pgn-size-popover-arrow-height);
+    margin: 0 var(--pgn-size-popover-border-radius);
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      display: block;
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-popover-top {
+  margin-bottom: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    bottom: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+
+    &::before {
+      bottom: 0;
+      border-width: var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-top-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      bottom: var(--pgn-size-popover-border-width);
+      border-width: var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-top-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+}
+
+.bs-popover-right {
+  margin-left: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    left: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    width: var(--pgn-size-popover-arrow-height);
+    height: var(--pgn-size-popover-arrow-width);
+    margin: var(--pgn-size-popover-border-radius) 0;
+
+    &::before {
+      left: 0;
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-right-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      left: var(--pgn-size-popover-border-width);
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-right-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+}
+
+.bs-popover-bottom {
+  margin-top: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    top: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+
+    &::before {
+      top: 0;
+      border-width:
+        0 calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5);
+      border-bottom-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      top: var(--pgn-size-popover-border-width);
+      border-width:
+        0 calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5);
+      border-bottom-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+
+  // This will remove the popover-header's border just below the arrow
+  .popover-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: var(--pgn-size-popover-arrow-width);
+    margin-left: calc(var(--pgn-size-popover-arrow-width) * -.5);
+    border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-bg);
+  }
+}
+
+.bs-popover-left {
+  margin-right: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    right: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    width: var(--pgn-size-popover-arrow-height);
+    height: var(--pgn-size-popover-arrow-width);
+    margin: var(--pgn-size-popover-border-radius) 0;
+
+    &::before {
+      right: 0;
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height);
+      border-left-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      right: var(--pgn-size-popover-border-width);
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height);
+      border-left-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+}
+
+.bs-popover-auto {
+  &[x-placement^="top"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-top;
+  }
+
+  &[x-placement^="right"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-right;
+  }
+
+  &[x-placement^="bottom"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-bottom;
+  }
+
+  &[x-placement^="left"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-left;
+  }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  padding: var(--pgn-spacing-popover-header-padding-y) var(--pgn-spacing-popover-header-padding-x);
+  margin-bottom: 0;
+
+  @include font-size(var(--pgn-typography-font-size-base));
+
+  color: var(--pgn-color-popover-header-text);
+  background-color: var(--pgn-color-popover-header-bg);
+  border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-border-bottom-dark);
+
+  @include border-top-radius(calc(var(--pgn-size-popover-border-radius) - var(--pgn-size-popover-border-width)));
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-body {
+  padding: var(--pgn-spacing-popover-body-padding-y) var(--pgn-spacing-popover-body-padding-x);
+  color: var(--pgn-color-popover-body);
+}

package/dist/ProductTour/Checkpoint.scss

@@ -1,20 +1,16 @@
-@import "variables";
-
-$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color;
-$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color;
-$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
-
 .pgn__checkpoint {
   position: absolute;
-  background: $checkpoint-background-color;
-  border-top: $checkpoint-border-width solid $checkpoint-border-color;
-  border-radius: $border-radius;
-  padding: map_get($spacers, 4);
-  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
-  z-index: $checkpoint-z-index;
-  max-width: $checkpoint-max-width;
-
-  @media (max-width: map-get($grid-breakpoints, "md")) {
+  background: var(--pgn-color-product-tour-checkpoint-bg);
+  border-top:
+    var(--pgn-size-product-tour-checkpoint-width-border)
+    solid var(--pgn-color-product-tour-checkpoint-border);
+  border-radius: var(--pgn-size-border-radius-base);
+  padding: var(--pgn-spacing-spacer-4);
+  box-shadow: 0 .25rem .5rem var(--pgn-color-product-tour-checkpoint-box-shadow);
+  z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
+  max-width: var(--pgn-size-product-tour-checkpoint-width-max);
+
+  @media (--pgn-size-breakpoint-max-width-sm) {
     min-width: 90%;
     max-width: 90%;
   }
@@ -38,12 +34,12 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
   #pgn__checkpoint-arrow::before,
   #pgn__checkpoint-arrow::after {
-    visibility: visible;
     content: "";
+    visibility: visible;
   }
 
   .pgn__checkpoint-button_dismiss {
-    margin-inline-end: map_get($spacers, 2);
+    margin-inline-end: var(--pgn-spacing-spacer-2);
   }
 
   .pgn__checkpoint-breadcrumb {
@@ -52,11 +48,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
     border-radius: 50%;
 
     &.pgn__checkpoint-breadcrumb_active {
-      background: $checkpoint-breadcrumb-color;
+      background: var(--pgn-color-product-tour-checkpoint-breadcrumb);
     }
 
     &.pgn__checkpoint-breadcrumb_inactive {
-      border: 1px solid $checkpoint-breadcrumb-color;
+      border: 1px solid var(--pgn-color-product-tour-checkpoint-breadcrumb);
       background: transparent;
     }
 
@@ -80,7 +76,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   }
 
   .pgn__checkpoint-body {
-    color: $checkpoint-body-color;
+    color: var(--pgn-color-product-tour-checkpoint-body);
     margin-bottom: map_get($spacers, 3\.5);
     text-align: start;
   }
@@ -92,25 +88,33 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   }
 
   #pgn__checkpoint-title {
-    font-size: $h3-font-size;
+    font-size: var(--pgn-typography-font-size-h3);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow {
-  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
   bottom: 1px;
 
   [dir="rtl"] & {
-    left: $checkpoint-arrow-width !important;
+    left: var(--pgn-size-product-tour-checkpoint-width-arrow) !important;
   }
 
   &::after {
-    border-bottom: $checkpoint-arrow-transparent;
-    border-top: $checkpoint-arrow-default-color;
-    border-left: $checkpoint-arrow-transparent;
-    border-right: $checkpoint-arrow-transparent;
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
     filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
     -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
   }
@@ -118,39 +122,63 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
 .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow {
   top: -36px;
-  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
 
   &::after {
-    border-bottom: $checkpoint-arrow-top-color;
-    border-top: $checkpoint-arrow-transparent;
-    border-left: $checkpoint-arrow-transparent;
-    border-right: $checkpoint-arrow-transparent;
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-border);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow {
-  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
   right: 1px;
 
   &::after {
-    border-bottom: $checkpoint-arrow-transparent;
-    border-top: $checkpoint-arrow-transparent;
-    border-left: $checkpoint-arrow-default-color;
-    border-right: $checkpoint-arrow-transparent;
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
     filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1));
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow {
-  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
   left: 1px;
 
   &::after {
-    left: -2 * $checkpoint-arrow-width;
-    border-bottom: $checkpoint-arrow-transparent;
-    border-top: $checkpoint-arrow-transparent;
-    border-left: $checkpoint-arrow-transparent;
-    border-right: $checkpoint-arrow-default-color;
+    left: calc(-2 * var(--pgn-size-product-tour-checkpoint-width-arrow));
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
     filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
   }
 }

package/dist/ProgressBar/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin progress-bar-variant($bg) {
+  background-color: $bg;
+
+  &::after {
+    content: "";
+    display: block;
+    background: $bg;
+    position: absolute;
+    // stylelint-disable-next-line max-line-length
+    top: calc(calc(var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2) * -1);
+    right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2);
+    width: var(--pgn-size-progress-bar-threshold-circle);
+    height: var(--pgn-size-progress-bar-threshold-circle);
+    border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2);
+    z-index: 1;
+
+    [dir="rtl"] & {
+      left: calc(calc(var(--pgn-size-progress-bar-threshold-circle) / 2) * -1);
+      right: auto;
+    }
+  }
+}

package/dist/ProgressBar/bootstrap-progress.scss

@@ -0,0 +1,49 @@
+@if $enable-transitions {
+  @keyframes progress-bar-stripes {
+    from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
+    to { background-position: 0 0; }
+  }
+}
+
+.progress {
+  display: flex;
+  height: var(--pgn-size-progress-bar-height-base);
+  overflow: hidden;
+  line-height: 0;
+  background-color: var(--pgn-color-progress-bar-bg);
+  box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
+
+  @include font-size(var(--pgn-typography-progress-bar-font-size));
+  @include border-radius(var(--pgn-size-progress-bar-border-radius));
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--pgn-color-progress-bar-bar-base);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+
+  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+}
+
+.progress-bar-striped {
+  @include gradient-striped();
+
+  background-size: var(--pgn-size-progress-bar-height-base) var(--pgn-size-progress-bar-height-base);
+}
+
+@if $enable-transitions {
+  .progress-bar-animated {
+    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+
+    @if $enable-prefers-reduced-motion-media-query {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+  }
+}

package/dist/ProgressBar/index.scss

@@ -1,12 +1,12 @@
-@import "variables";
-@import "~bootstrap/scss/progress";
+@import "bootstrap-progress";
+@import "mixins";
 
 .progress {
-  border: $progress-bar-border-width solid $progress-bar-border-color;
+  border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border);
 }
 
 .progress-bar {
-  background-color: $progress-bar-bg;
+  background-color: var(--pgn-color-progress-bar-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -17,12 +17,12 @@
 
   .progress {
     overflow: visible;
-    background-color: $light-300;
-    height: $annotated-progress-height;
+    background-color: var(--pgn-color-light-300);
+    height: var(--pgn-size-progress-bar-height-annotated);
     border: none;
 
     .progress-bar {
-      background-color: $annotated-progress-bar-bg;
+      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -31,41 +31,33 @@
     .pgn__progress-tick--black::after {
       content: "";
       position: absolute;
-      height: $annotated-progress-height;
+      height: var(--pgn-size-progress-bar-height-annotated);
       width: 1px;
       right: 0;
     }
 
     .pgn__progress-tick--white::after {
-      background: $light-300;
+      background: var(--pgn-color-light-300);
     }
 
     .pgn__progress-tick--black::after {
-      background: $primary-500;
+      background: var(--pgn-color-primary-500);
     }
 
-    @each $name, $color in $progress-colors {
-      .pgn__progress-bar--#{$name} {
-        background-color: $color;
-
-        &::after {
-          content: "";
-          display: block;
-          background: $color;
-          position: absolute;
-          top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2));
-          right: -(calc($progress-threshold-circle / 2));
-          width: $progress-threshold-circle;
-          height: $progress-threshold-circle;
-          border-radius: calc($progress-threshold-circle / 2);
-          z-index: 1;
-
-          [dir="rtl"] & {
-            left: -(calc($progress-threshold-circle / 2));
-            right: auto;
-          }
-        }
-      }
+    .pgn__progress-bar--dark {
+      @include progress-bar-variant(var(--pgn-color-primary-500));
+    }
+
+    .pgn__progress-bar--success {
+      @include progress-bar-variant(var(--pgn-color-success-500));
+    }
+
+    .pgn__progress-bar--error {
+      @include progress-bar-variant(var(--pgn-color-danger-500));
+    }
+
+    .pgn__progress-bar--warning {
+      @include progress-bar-variant(var(--pgn-color-accent-b));
     }
   }
 
@@ -73,9 +65,9 @@
   .progress::after {
     position: absolute;
     content: "";
-    height: $annotated-progress-height;
+    height: var(--pgn-size-progress-bar-height-annotated);
     width: 1px;
-    background: $primary-500;
+    background: var(--pgn-color-primary-500);
   }
 
   .progress::after {
@@ -94,7 +86,7 @@
 
   .pgn__progress-hint {
     box-sizing: border-box;
-    padding: 0 $progress-hint-annotation-gap;
-    font-size: $small-font-size;
+    padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
+    font-size: var(--pgn-typography-font-size-small-base);
   }
 }

package/dist/Scrollable/index.scss

@@ -9,7 +9,7 @@
   &::before {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
+    box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow);
     display: block;
     height: 2px;
     position: sticky;
@@ -21,7 +21,7 @@
   &::after {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
+    box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow);
     display: block;
     height: 2px;
     position: sticky;

package/dist/SearchField/SearchFieldInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import Input from '../Input';
+import { FormControl } from '../Form';
 import { SearchFieldContext } from './SearchFieldAdvanced';
 function SearchFieldInput(props) {
   const {
@@ -13,7 +13,7 @@ function SearchFieldInput(props) {
     refs,
     disabled
   } = useContext(SearchFieldContext);
-  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(FormControl, _extends({}, props, {
     ref: refs.input,
     type: "text",
     role: "searchbox",

package/dist/SearchField/SearchFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFieldInput.js","names":["React","useContext","PropTypes","Input","SearchFieldContext","SearchFieldInput","props","inputId","value","handleChange","handleFocus","handleBlur","refs","disabled","createElement","_extends","ref","input","type","role","id","current","name","onFocus","onBlur","onChange","propTypes","className","string","placeholder","defaultProps","undefined"],"sources":["../../src/SearchField/SearchFieldInput.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Input from '../Input';\nimport { SearchFieldContext } from './SearchFieldAdvanced';\n\nfunction SearchFieldInput(props) {\n  const {\n    inputId, value, handleChange, handleFocus, handleBlur, refs, disabled,\n  } = useContext(SearchFieldContext);\n\n  return (\n    <Input\n      {...props}\n      ref={refs.input}\n      type=\"text\"\n      role=\"searchbox\"\n      id={inputId.current}\n      name=\"searchfield-input\"\n      value={value}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      disabled={disabled}\n    />\n  );\n}\n\nSearchFieldInput.propTypes = {\n  /** specifies a custom class name. */\n  className: PropTypes.string,\n  /** specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n};\n\nSearchFieldInput.defaultProps = {\n  className: undefined,\n  placeholder: undefined,\n};\n\nexport default SearchFieldInput;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,KAAK,MAAM,UAAU;AAC5B,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,MAAM;IACJC,OAAO;IAAEC,KAAK;IAAEC,YAAY;IAAEC,WAAW;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAC/D,CAAC,GAAGZ,UAAU,CAACG,kBAAkB,CAAC;EAElC,oBACEJ,KAAA,CAAAc,aAAA,CAACX,KAAK,EAAAY,QAAA,KACAT,KAAK;IACTU,GAAG,EAAEJ,IAAI,CAACK,KAAM;IAChBC,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,WAAW;IAChBC,EAAE,EAAEb,OAAO,CAACc,OAAQ;IACpBC,IAAI,EAAC,mBAAmB;IACxBd,KAAK,EAAEA,KAAM;IACbe,OAAO,EAAEb,WAAY;IACrBc,MAAM,EAAEb,UAAW;IACnBc,QAAQ,EAAEhB,YAAa;IACvBI,QAAQ,EAAEA;EAAS,EACpB,CAAC;AAEN;AAEAR,gBAAgB,CAACqB,SAAS,GAAG;EAC3B;EACAC,SAAS,EAAEzB,SAAS,CAAC0B,MAAM;EAC3B;EACAC,WAAW,EAAE3B,SAAS,CAAC0B;AACzB,CAAC;AAEDvB,gBAAgB,CAACyB,YAAY,GAAG;EAC9BH,SAAS,EAAEI,SAAS;EACpBF,WAAW,EAAEE;AACf,CAAC;AAED,eAAe1B,gBAAgB"}
+{"version":3,"file":"SearchFieldInput.js","names":["React","useContext","PropTypes","FormControl","SearchFieldContext","SearchFieldInput","props","inputId","value","handleChange","handleFocus","handleBlur","refs","disabled","createElement","_extends","ref","input","type","role","id","current","name","onFocus","onBlur","onChange","propTypes","className","string","placeholder","defaultProps","undefined"],"sources":["../../src/SearchField/SearchFieldInput.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FormControl } from '../Form';\nimport { SearchFieldContext } from './SearchFieldAdvanced';\n\nfunction SearchFieldInput(props) {\n  const {\n    inputId, value, handleChange, handleFocus, handleBlur, refs, disabled,\n  } = useContext(SearchFieldContext);\n\n  return (\n    <FormControl\n      {...props}\n      ref={refs.input}\n      type=\"text\"\n      role=\"searchbox\"\n      id={inputId.current}\n      name=\"searchfield-input\"\n      value={value}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      disabled={disabled}\n    />\n  );\n}\n\nSearchFieldInput.propTypes = {\n  /** specifies a custom class name. */\n  className: PropTypes.string,\n  /** specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n};\n\nSearchFieldInput.defaultProps = {\n  className: undefined,\n  placeholder: undefined,\n};\n\nexport default SearchFieldInput;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,WAAW,QAAQ,SAAS;AACrC,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,MAAM;IACJC,OAAO;IAAEC,KAAK;IAAEC,YAAY;IAAEC,WAAW;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAC/D,CAAC,GAAGZ,UAAU,CAACG,kBAAkB,CAAC;EAElC,oBACEJ,KAAA,CAAAc,aAAA,CAACX,WAAW,EAAAY,QAAA,KACNT,KAAK;IACTU,GAAG,EAAEJ,IAAI,CAACK,KAAM;IAChBC,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,WAAW;IAChBC,EAAE,EAAEb,OAAO,CAACc,OAAQ;IACpBC,IAAI,EAAC,mBAAmB;IACxBd,KAAK,EAAEA,KAAM;IACbe,OAAO,EAAEb,WAAY;IACrBc,MAAM,EAAEb,UAAW;IACnBc,QAAQ,EAAEhB,YAAa;IACvBI,QAAQ,EAAEA;EAAS,EACpB,CAAC;AAEN;AAEAR,gBAAgB,CAACqB,SAAS,GAAG;EAC3B;EACAC,SAAS,EAAEzB,SAAS,CAAC0B,MAAM;EAC3B;EACAC,WAAW,EAAE3B,SAAS,CAAC0B;AACzB,CAAC;AAEDvB,gBAAgB,CAACyB,YAAY,GAAG;EAC9BH,SAAS,EAAEI,SAAS;EACpBF,WAAW,EAAEE;AACf,CAAC;AAED,eAAe1B,gBAAgB"}