@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Form/_mixins.scss

@@ -3,7 +3,7 @@
   $padding-y,
   $line-height,
   $font-size,
-  $label-initial-border-width
+  $border-width
 ) {
   padding: 0 $padding-x;
 
@@ -19,225 +19,12 @@
   $padding-y,
   $line-height,
   $font-size,
-  $label-float-border-width
+  $border-width
 ) {
   .pgn__form-control-floating-label-text {
     $half-leading: calc(($line-height - .8) / 2);
     $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%);
 
-    transform:
-      translateY(calc($padding-y * -1)) scale(.75)
-      translateY(calc($percent-height-minus-no-bottom-leading * -1));
-  }
-}
-
-
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `var(--pgn-color-form-input-focus-border)` variable.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-@mixin form-control-focus($ignore-warning: false) {
-  &:focus {
-    color: var(--pgn-color-form-input-focus-base);
-    background-color: var(--pgn-color-form-input-focus-bg);
-    border-color: var(--pgn-color-form-input-focus-border);
-    outline: 0;
-    box-shadow: var(--pgn-elevation-form-input-focus);
-  }
-
-  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
-}
-
-// This mixin uses an `if()` technique to be compatible with Dart Sass
-// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
-@mixin form-validation-state-selector($state) {
-  @if ($state == "valid" or $state == "invalid") {
-    .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  }
-
-  @else {
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  }
-}
-
-@mixin form-validation-state(
-  $state, $color, $icon, $form-tooltip-color,
-  $form-tooltip-bg, $focus-box-shadow-color, $checked-border-color
-) {
-  .#{$state}-feedback {
-    display: none;
-    width: 100%;
-    margin-top: var(--pgn-spacing-form-control-select-feedback-margin-top);
-
-    @include font-size(var(--pgn-typography-form-feedback-font-size));
-
-    color: $color;
-  }
-
-  .#{$state}-tooltip {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 5;
-    display: none;
-    max-width: 100%; // Contain to parent when possible
-    padding:
-      var(--pgn-spacing-form-control-select-feedback-tooltip-padding-y)
-      var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x);
-    margin-top: .1rem;
-
-    @include font-size(var(--pgn-typography-form-feedback-tooltip-font-size));
-
-    line-height: var(--pgn-typography-form-feedback-tooltip-line-height);
-    color: $form-tooltip-color;
-    background-color: $form-tooltip-bg;
-
-    @include border-radius(var(--pgn-size-form-feedback-tooltip-border-radius));
-
-    // See https://github.com/twbs/bootstrap/pull/31557
-    // Align tooltip to form elements
-    .form-row > .col > &,
-    .form-row > [class*="col-"] > & {
-      left: calc(var(--pgn-size-form-grid-gutter-width) * .5);
-    }
-  }
-
-  @include form-validation-state-selector($state) {
-    ~ .#{$state}-feedback,
-    ~ .#{$state}-tooltip {
-      display: block;
-    }
-  }
-
-  .form-control {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      @if $enable-validation-icons {
-        padding-right: var(--pgn-size-form-input-height-inner-base) !important;
-        background-image: $icon;
-        background-repeat: no-repeat;
-        background-position: right var(--pgn-size-form-input-height-inner-quarter) center;
-        background-size: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
-      }
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
-      }
-    }
-  }
-
-  // stylelint-disable-next-line selector-no-qualifying-type
-  select.form-control {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        padding-right: calc(var(--pgn-spacing-form-input-padding-x-base) * 4) !important;
-        background-position: right calc(var(--pgn-spacing-form-input-padding-x-base) * 2) center;
-      }
-    }
-  }
-
-  // stylelint-disable-next-line selector-no-qualifying-type
-  textarea.form-control {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        padding-right: var(--pgn-size-form-input-height-inner-base);
-        background-position:
-          top var(--pgn-size-form-input-height-inner-quarter)
-          right var(--pgn-size-form-input-height-inner-quarter);
-      }
-    }
-  }
-
-  .custom-select {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      @if $enable-validation-icons {
-        padding-right: var(--pgn-spacing-form-control-select-feedback-icon-padding-right) !important;
-        background:
-          var(--pgn-other-content-form-control-select-bg),
-          var(--pgn-color-form-control-select-bg-base) $icon
-          var(--pgn-spacing-form-control-select-feedback-icon-position) / var(--pgn-size-form-control-select-feedback-icon) no-repeat; // stylelint-disable-line max-line-length
-      }
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
-      }
-    }
-  }
-
-  .form-check-input {
-    @include form-validation-state-selector($state) {
-      ~ .form-check-label {
-        color: $color;
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .custom-control-input {
-    @include form-validation-state-selector($state) {
-      ~ .custom-control-label {
-        color: $color;
-
-        &::before {
-          border-color: $color;
-        }
-      }
-
-      &:checked {
-        ~ .custom-control-label::before {
-          border-color: $checked-border-color;
-
-          @include gradient-bg($checked-border-color);
-        }
-      }
-
-      &:focus {
-        ~ .custom-control-label::before {
-          box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
-        }
-
-        &:not(:checked) ~ .custom-control-label::before {
-          border-color: $color;
-        }
-      }
-    }
-  }
-
-  // custom file
-  .custom-file-input {
-    @include form-validation-state-selector($state) {
-      ~ .custom-file-label {
-        border-color: $color;
-      }
-
-      &:focus {
-        ~ .custom-file-label {
-          border-color: $color;
-          box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
-        }
-      }
-    }
+    transform: translateY(-$padding-y) scale(.75)  translateY(-$percent-height-minus-no-bottom-leading);
   }
 }

package/dist/Form/_variables.scss

@@ -0,0 +1,267 @@
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-font-family:                     $input-btn-font-family !default;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     theme-color("gray", "background") !default;
+
+$input-color:                           theme-color("gray", "text") !default;
+$input-border-color:                    $gray-500 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
+
+$input-border-radius:                   $border-radius !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-focus-bg:                        $input-bg !default;
+$input-focus-border-color:              $component-active-bg !default;
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     1px !default;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color:               theme-color("gray", "light-text") !default;
+$input-plaintext-color:                 $body-color !default;
+
+$input-height-border:                   $input-border-width * 2 !default;
+
+$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
+$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default;
+
+$input-height:                          calc(
+  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}
+) !default;
+$input-height-sm:                       calc(
+  #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
+) !default;
+$input-height-lg:                       calc(
+  #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
+) !default;
+
+$input-hover-width:                     1px !default;
+$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-text-margin-top:                  .25rem !default;
+
+$form-check-input-gutter:               1.25rem !default;
+$form-check-input-margin-y:             .3rem !default;
+$form-check-input-margin-x:             .25rem !default;
+
+$form-check-inline-margin-x:            .75rem !default;
+$form-check-inline-input-margin-x:      .3125rem !default;
+
+$form-check-position-axis:              .375rem !default;
+$form-check-focus-border-radius:        .0625rem !default;
+$form-check-border-width:               .125rem !default;
+
+$form-grid-gutter-width:                10px !default;
+$form-group-margin-bottom:              1rem !default;
+
+$input-group-addon-color:               $input-color !default;
+$input-group-addon-bg:                  theme-color("gray", "background") !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$custom-forms-transition:               background-color .15s ease-in-out,
+  border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$custom-control-gutter:                 .5rem !default;
+$custom-control-spacer-x:               1rem !default;
+$custom-control-cursor:                 null !default;
+
+$custom-control-indicator-size:         1.25rem !default;
+$custom-control-indicator-bg:           $input-bg !default;
+
+$custom-control-indicator-bg-size:      100% !default;
+$custom-control-indicator-box-shadow:   $input-box-shadow !default;
+$custom-control-indicator-border-color: $gray-700 !default;
+$custom-control-indicator-border-width: 2px !default;
+
+$custom-control-label-color:            null !default;
+$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
+$custom-control-label-disabled-color:           theme-color("gray", "light-text") !default;
+
+$custom-control-indicator-checked-color:        $component-active-bg !default;
+$custom-control-indicator-checked-valid-color:    theme-color("success") !default;
+$custom-control-indicator-checked-invalid-color:  theme-color("danger") !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba($primary, .5) !default;
+$custom-control-indicator-checked-box-shadow:   none !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+
+$custom-control-indicator-focus-box-shadow:     0 0 0 4px rgba(0, 0, 0, .1) !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            $component-active-bg !default;
+$custom-control-indicator-active-box-shadow:    none !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
+$custom-checkbox-indicator-border-radius:       0 !default;
+$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-valid-checked:         str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-valid-color}'/></svg>"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-invalid-checked:       str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-invalid-color}'/></svg>"), "#", "%23") !default;
+
+$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='#{$custom-checkbox-indicator-indeterminate-color}'/></svg>"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
+
+$custom-radio-indicator-border-radius:          50% !default;
+$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-radio-indicator-icon-valid-checked:     str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-valid-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-radio-indicator-icon-invalid-checked:   str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-invalid-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
+
+$custom-switch-indicator-icon-off:              str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-switch-indicator-icon-on:               str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius:         calc($custom-control-indicator-size / 2) !default;
+$custom-switch-indicator-size:                  calc(
+  #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}
+) !default;
+$custom-switch-indicator-checked-bg:            theme-color("success") !default;
+
+$custom-select-padding-y:           $input-padding-y !default;
+$custom-select-padding-x:           $input-padding-x !default;
+$custom-select-font-family:         $input-font-family !default;
+$custom-select-font-size:           $input-font-size !default;
+$custom-select-height:              $input-height !default;
+
+// Extra padding to account for the presence of the background-image based indicator
+$custom-select-indicator-padding:   1rem !default;
+$custom-select-font-weight:         $input-font-weight !default;
+$custom-select-line-height:         $input-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      theme-color("gray", "light-text") !default;
+$custom-select-bg:                  $input-bg !default;
+$custom-select-disabled-bg:         theme-color("gray", "background") !default;
+$custom-select-bg-size:             24px 24px !default; // In pixels because image dimensions
+$custom-select-indicator-color:     theme-color("gray", "hover") !default;
+
+$custom-select-indicator:           str-replace(url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="#{$custom-select-indicator-color}"/></svg>'), "#", "%23") !default;
+
+// Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background:          $custom-select-indicator no-repeat right
+  $input-padding-y center / $custom-select-bg-size !default;
+
+$custom-select-feedback-icon-padding-right: calc(
+  (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}
+) !default;
+$custom-select-feedback-icon-position:      center right
+  ($custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
+
+$custom-select-border-width:        $input-border-width !default;
+$custom-select-border-color:        $input-border-color !default;
+$custom-select-border-radius:       $border-radius !default;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
+
+$custom-select-focus-border-color:  $input-focus-border-color !default;
+$custom-select-focus-width:         $input-focus-width !default;
+$custom-select-focus-box-shadow:    $input-btn-focus-box-shadow !default;
+
+$custom-select-padding-y-sm:        $input-padding-y-sm !default;
+$custom-select-padding-x-sm:        $input-padding-x-sm !default;
+$custom-select-font-size-sm:        $input-font-size-sm !default;
+$custom-select-height-sm:           $input-height-sm !default;
+
+$custom-select-padding-y-lg:        $input-padding-y-lg !default;
+$custom-select-padding-x-lg:        $input-padding-x-lg !default;
+$custom-select-font-size-lg:        $input-font-size-lg !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
+$custom-range-track-width:          100% !default;
+$custom-range-track-height:         .5rem !default;
+$custom-range-track-cursor:         pointer !default;
+$custom-range-track-bg:             theme-color("gray", "graphic") !default;
+$custom-range-track-border-radius:  1rem !default;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width:                   1rem !default;
+$custom-range-thumb-height:                  $custom-range-thumb-width !default;
+$custom-range-thumb-bg:                      $component-active-bg !default;
+$custom-range-thumb-border:                  0 !default;
+$custom-range-thumb-border-radius:           1rem !default;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;
+
+$custom-file-height:                $input-height !default;
+$custom-file-height-inner:          $input-height-inner !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
+$custom-file-disabled-bg:           $input-disabled-bg !default;
+
+$custom-file-padding-y:             $input-padding-y !default;
+$custom-file-padding-x:             $input-padding-x !default;
+$custom-file-line-height:           $input-line-height !default;
+$custom-file-font-family:           $input-font-family !default;
+$custom-file-font-weight:           $input-font-weight !default;
+$custom-file-color:                 $input-color !default;
+$custom-file-bg:                    $input-bg !default;
+$custom-file-border-width:          $input-border-width !default;
+$custom-file-border-color:          $input-border-color !default;
+$custom-file-border-radius:         $input-border-radius !default;
+$custom-file-box-shadow:            $input-box-shadow !default;
+$custom-file-button-color:          $custom-file-color !default;
+$custom-file-button-bg:             $input-group-addon-bg !default;
+$custom-file-text: (
+  en: "Browse"
+) !default;
+
+// Form validation
+
+$form-feedback-margin-top:          $form-text-margin-top !default;
+$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-valid-color:         theme-color("success") !default;
+$form-feedback-invalid-color:       theme-color("danger") !default;
+
+$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
+$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+
+$form-validation-states: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     .25rem !default;
+$form-feedback-tooltip-padding-x:     .5rem !default;
+$form-feedback-tooltip-font-size:     $font-size-sm !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       .9 !default;
+$form-feedback-tooltip-border-radius: $border-radius !default;
+
+$form-autosuggest-icon-width: 2.4rem;
+$form-autosuggest-icon-height: $form-autosuggest-icon-width;
+$form-autosuggest-spinner-width: 1.25rem;
+$form-autosuggest-spinner-height: $form-autosuggest-spinner-width;
+$form-autosuggest-border-width: .125rem;

package/dist/Form/useCheckboxSetValues.js

@@ -1,36 +1,59 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { useReducer } from 'react';
-const checkboxValuesReducer = (state, action) => {
+var checkboxValuesReducer = function checkboxValuesReducer(state, action) {
   switch (action.type) {
     case 'add':
-      return [...state, action.value];
+      return [].concat(_toConsumableArray(state), [action.value]);
     case 'remove':
-      return state.filter(value => value !== action.value);
+      return state.filter(function (value) {
+        return value !== action.value;
+      });
     case 'set':
-      return [...action.value];
+      return _toConsumableArray(action.value);
     case 'clear':
     default:
       return [];
   }
 };
-const useCheckboxSetValues = function () {
-  let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  const [state, dispatch] = useReducer(checkboxValuesReducer, initialState);
-  const dispatchers = {
-    add: value => dispatch({
-      type: 'add',
-      value
-    }),
-    remove: value => dispatch({
-      type: 'remove',
-      value
-    }),
-    set: value => dispatch({
-      type: 'set',
-      value
-    }),
-    clear: () => dispatch({
-      type: 'clear'
-    })
+var useCheckboxSetValues = function useCheckboxSetValues() {
+  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var _useReducer = useReducer(checkboxValuesReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var dispatchers = {
+    add: function add(value) {
+      return dispatch({
+        type: 'add',
+        value: value
+      });
+    },
+    remove: function remove(value) {
+      return dispatch({
+        type: 'remove',
+        value: value
+      });
+    },
+    set: function set(value) {
+      return dispatch({
+        type: 'set',
+        value: value
+      });
+    },
+    clear: function clear() {
+      return dispatch({
+        type: 'clear'
+      });
+    }
   };
   return [state, dispatchers];
 };

package/dist/Form/useCheckboxSetValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckboxSetValues.js","names":["useReducer","checkboxValuesReducer","state","action","type","value","filter","useCheckboxSetValues","initialState","arguments","length","undefined","dispatch","dispatchers","add","remove","set","clear"],"sources":["../../src/Form/useCheckboxSetValues.jsx"],"sourcesContent":["import { useReducer } from 'react';\n\nconst checkboxValuesReducer = (state, action) => {\n  switch (action.type) {\n    case 'add':\n      return [...state, action.value];\n    case 'remove':\n      return state.filter(value => value !== action.value);\n    case 'set':\n      return [...action.value];\n    case 'clear':\n    default:\n      return [];\n  }\n};\n\nconst useCheckboxSetValues = (initialState = []) => {\n  const [state, dispatch] = useReducer(checkboxValuesReducer, initialState);\n\n  const dispatchers = {\n    add: (value) => dispatch({ type: 'add', value }),\n    remove: (value) => dispatch({ type: 'remove', value }),\n    set: (value) => dispatch({ type: 'set', value }),\n    clear: () => dispatch({ type: 'clear' }),\n  };\n  return [state, dispatchers];\n};\n\nexport default useCheckboxSetValues;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,MAAMC,qBAAqB,GAAGA,CAACC,KAAK,EAAEC,MAAM,KAAK;EAC/C,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,KAAK;MACR,OAAO,CAAC,GAAGF,KAAK,EAAEC,MAAM,CAACE,KAAK,CAAC;IACjC,KAAK,QAAQ;MACX,OAAOH,KAAK,CAACI,MAAM,CAACD,KAAK,IAAIA,KAAK,KAAKF,MAAM,CAACE,KAAK,CAAC;IACtD,KAAK,KAAK;MACR,OAAO,CAAC,GAAGF,MAAM,CAACE,KAAK,CAAC;IAC1B,KAAK,OAAO;IACZ;MACE,OAAO,EAAE;EACb;AACF,CAAC;AAED,MAAME,oBAAoB,GAAG,SAAAA,CAAA,EAAuB;EAAA,IAAtBC,YAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAC7C,MAAM,CAACP,KAAK,EAAEU,QAAQ,CAAC,GAAGZ,UAAU,CAACC,qBAAqB,EAAEO,YAAY,CAAC;EAEzE,MAAMK,WAAW,GAAG;IAClBC,GAAG,EAAGT,KAAK,IAAKO,QAAQ,CAAC;MAAER,IAAI,EAAE,KAAK;MAAEC;IAAM,CAAC,CAAC;IAChDU,MAAM,EAAGV,KAAK,IAAKO,QAAQ,CAAC;MAAER,IAAI,EAAE,QAAQ;MAAEC;IAAM,CAAC,CAAC;IACtDW,GAAG,EAAGX,KAAK,IAAKO,QAAQ,CAAC;MAAER,IAAI,EAAE,KAAK;MAAEC;IAAM,CAAC,CAAC;IAChDY,KAAK,EAAEA,CAAA,KAAML,QAAQ,CAAC;MAAER,IAAI,EAAE;IAAQ,CAAC;EACzC,CAAC;EACD,OAAO,CAACF,KAAK,EAAEW,WAAW,CAAC;AAC7B,CAAC;AAED,eAAeN,oBAAoB"}
+{"version":3,"file":"useCheckboxSetValues.js","names":["useReducer","checkboxValuesReducer","state","action","type","concat","_toConsumableArray","value","filter","useCheckboxSetValues","initialState","arguments","length","undefined","_useReducer","_useReducer2","_slicedToArray","dispatch","dispatchers","add","remove","set","clear"],"sources":["../../src/Form/useCheckboxSetValues.jsx"],"sourcesContent":["import { useReducer } from 'react';\n\nconst checkboxValuesReducer = (state, action) => {\n  switch (action.type) {\n    case 'add':\n      return [...state, action.value];\n    case 'remove':\n      return state.filter(value => value !== action.value);\n    case 'set':\n      return [...action.value];\n    case 'clear':\n    default:\n      return [];\n  }\n};\n\nconst useCheckboxSetValues = (initialState = []) => {\n  const [state, dispatch] = useReducer(checkboxValuesReducer, initialState);\n\n  const dispatchers = {\n    add: (value) => dispatch({ type: 'add', value }),\n    remove: (value) => dispatch({ type: 'remove', value }),\n    set: (value) => dispatch({ type: 'set', value }),\n    clear: () => dispatch({ type: 'clear' }),\n  };\n  return [state, dispatchers];\n};\n\nexport default useCheckboxSetValues;\n"],"mappings":";;;;;;;;;;AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAK,EAAEC,MAAM,EAAK;EAC/C,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,KAAK;MACR,UAAAC,MAAA,CAAAC,kBAAA,CAAWJ,KAAK,IAAEC,MAAM,CAACI,KAAK;IAChC,KAAK,QAAQ;MACX,OAAOL,KAAK,CAACM,MAAM,CAAC,UAAAD,KAAK;QAAA,OAAIA,KAAK,KAAKJ,MAAM,CAACI,KAAK;MAAA,EAAC;IACtD,KAAK,KAAK;MACR,OAAAD,kBAAA,CAAWH,MAAM,CAACI,KAAK;IACzB,KAAK,OAAO;IACZ;MACE,OAAO,EAAE;EACb;AACF,CAAC;AAED,IAAME,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA,EAA0B;EAAA,IAAtBC,YAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAC7C,IAAAG,WAAA,GAA0Bd,UAAU,CAACC,qBAAqB,EAAES,YAAY,CAAC;IAAAK,YAAA,GAAAC,cAAA,CAAAF,WAAA;IAAlEZ,KAAK,GAAAa,YAAA;IAAEE,QAAQ,GAAAF,YAAA;EAEtB,IAAMG,WAAW,GAAG;IAClBC,GAAG,EAAE,SAAAA,IAACZ,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,KAAK;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IAChDa,MAAM,EAAE,SAAAA,OAACb,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,QAAQ;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IACtDc,GAAG,EAAE,SAAAA,IAACd,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,KAAK;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IAChDe,KAAK,EAAE,SAAAA,MAAA;MAAA,OAAML,QAAQ,CAAC;QAAEb,IAAI,EAAE;MAAQ,CAAC,CAAC;IAAA;EAC1C,CAAC;EACD,OAAO,CAACF,KAAK,EAAEgB,WAAW,CAAC;AAC7B,CAAC;AAED,eAAeT,oBAAoB"}