@deephaven/components 0.57.2-beta.0 → 0.58.0

package/dist/AutoCompleteInput.css

@@ -10,13 +10,13 @@
   user-select: none;
 }
 .aci-options .no-match {
-  padding: 0.375rem 0.75rem;
+  padding: 0.4214rem 0.75rem;
 }
 .aci-options .aci-option-btn {
   border: none;
   width: 100%;
   color: var(--dh-color-fg);
-  padding: 0.375rem 0.75rem;
+  padding: 0.4214rem 0.75rem;
   white-space: nowrap;
   background: none;
   text-align: left;

package/dist/AutoCompleteInput.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/AutoCompleteInput.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;;;AAGF;EACE;EACA,eC6Ic;ED5Id;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA,OCUS;EDTT;EACA;EACA;EACA;;AAEF;EACE,kBA5B8B;;AA+BhC;EACE,OCDS;EDET,kBCwDM;;ADtDR;EACE","file":"AutoCompleteInput.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../scss/custom.scss';\n\n$aci-option-btn-color: $foreground;\n$aci-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$aci-option-hover-bg: $dropdown-link-hover-bg;\n$aci-option-hover-color: $dropdown-link-hover-color;\n\n.aci-container {\n  flex-grow: 1;\n}\n\n.aci-options {\n  max-height: 200px;\n  border-radius: $border-radius;\n  overflow: auto;\n  user-select: none;\n\n  .no-match {\n    padding: $input-btn-padding-y $input-btn-padding-x;\n  }\n\n  .aci-option-btn {\n    border: none;\n    width: 100%;\n    color: $aci-option-btn-color;\n    padding: $input-btn-padding-y $input-btn-padding-x;\n    white-space: nowrap;\n    background: none;\n    text-align: left;\n  }\n  .aci-option-btn.keyboard-active {\n    background-color: $aci-option-keyboard-selected-bg;\n  }\n\n  .aci-option-btn:hover {\n    color: $aci-option-hover-color;\n    background-color: $aci-option-hover-bg;\n  }\n  .aci-option-btn:focus {\n    outline: none;\n  }\n}\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg);\n$foreground: var(--dh-color-fg);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n  '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n  'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n  in (\n    'primary',\n    'secondary',\n    'success',\n    'info',\n    'warning',\n    'danger',\n    'light',\n    'dark'\n  )\n{\n  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n  'primary': 'accent',\n  'secondary': 'neutral',\n  'success': 'positive',\n  'info': 'info',\n  'warning': 'notice',\n  'danger': 'negative',\n  // We shouldn't be using these, but mapping so they work with our custom\n  // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n  // defined in Bootstrap _variables.scss, we should remove these\n  'light': 'neutral',\n  'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$primary-light: var(--dh-color-accent-1100);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n  'primary-hover': $primary-hover,\n  'primary-light': $primary-light,\n  'primary-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem hsla(var(--dh-color-black-hsl), 0.45); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem hsla(var(--dh-color-true-black-hsl), 0.45); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-active-bg: var(--dh-color-accent-1100);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n"]}
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/AutoCompleteInput.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;;;AAGF;EACE;EACA,eC6Ic;ED5Id;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA,OCUS;EDTT;EACA;EACA;EACA;;AAEF;EACE,kBA5B8B;;AA+BhC;EACE,OCDS;EDET,kBCwDM;;ADtDR;EACE","file":"AutoCompleteInput.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../scss/custom.scss';\n\n$aci-option-btn-color: $foreground;\n$aci-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$aci-option-hover-bg: $dropdown-link-hover-bg;\n$aci-option-hover-color: $dropdown-link-hover-color;\n\n.aci-container {\n  flex-grow: 1;\n}\n\n.aci-options {\n  max-height: 200px;\n  border-radius: $border-radius;\n  overflow: auto;\n  user-select: none;\n\n  .no-match {\n    padding: $input-btn-padding-y $input-btn-padding-x;\n  }\n\n  .aci-option-btn {\n    border: none;\n    width: 100%;\n    color: $aci-option-btn-color;\n    padding: $input-btn-padding-y $input-btn-padding-x;\n    white-space: nowrap;\n    background: none;\n    text-align: left;\n  }\n  .aci-option-btn.keyboard-active {\n    background-color: $aci-option-keyboard-selected-bg;\n  }\n\n  .aci-option-btn:hover {\n    color: $aci-option-hover-color;\n    background-color: $aci-option-hover-bg;\n  }\n  .aci-option-btn:focus {\n    outline: none;\n  }\n}\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg);\n$foreground: var(--dh-color-fg);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n  '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n  'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n  in (\n    'primary',\n    'secondary',\n    'success',\n    'info',\n    'warning',\n    'danger',\n    'light',\n    'dark'\n  )\n{\n  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n  'primary': 'accent',\n  'secondary': 'neutral',\n  'success': 'positive',\n  'info': 'info',\n  'warning': 'notice',\n  'danger': 'negative',\n  // We shouldn't be using these, but mapping so they work with our custom\n  // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n  // defined in Bootstrap _variables.scss, we should remove these\n  'light': 'neutral',\n  'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$primary-light: var(--dh-color-accent-1100);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n  'primary-hover': $primary-hover,\n  'primary-light': $primary-light,\n  'primary-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units. Using 0.4214rem with 1.3\n// line height gets us to 31.99px vs Spectrum's 32px.\n$input-btn-padding-y: 0.4214rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n"]}

package/dist/AutoResizeTextarea.css

@@ -1,6 +1,6 @@
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
 textarea.auto-resize-textarea {
-  min-height: calc(1.5em + 0.75rem + 2px);
+  min-height: calc(1.3em + 0.8428rem + 2px);
   white-space: nowrap;
 }
 

package/dist/BasicModal.js

@@ -52,7 +52,6 @@ function BasicModal(props) {
   }
   return /*#__PURE__*/_jsxs(Modal, {
     isOpen: isOpen,
-    className: "theme-bg-light",
     onOpened: onOpened,
     children: [/*#__PURE__*/_jsx(ModalHeader, {
       closeButton: false,

package/dist/BasicModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicModal.js","names":["React","useRef","useCallback","PropTypes","ButtonGroup","Button","Modal","ModalBody","ModalFooter","ModalHeader","jsx","_jsx","jsxs","_jsxs","BasicModal","props","isOpen","headerText","bodyText","onCancel","onConfirm","onDiscard","onModalDisable","cancelButtonText","confirmButtonText","discardButtonText","isConfirmDanger","children","dataTestId","confirmButton","disableModalCheckbox","onConfirmClicked","current","checked","onOpened","_confirmButton$curren","focus","modalBody","className","closeButton","type","id","defaultChecked","ref","undefined","concat","htmlFor","kind","onClick","propTypes","bool","isRequired","string","oneOfType","func","node","defaultProps"],"sources":["../src/BasicModal.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonGroup from './ButtonGroup';\nimport Button from './Button';\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from './modal';\n\nexport interface BasicModalProps {\n  isOpen: boolean;\n  headerText: string;\n  bodyText: string | (() => string);\n  onCancel?: () => void;\n  onConfirm: () => void;\n  onDiscard?: () => void;\n  onModalDisable?: () => void;\n  cancelButtonText?: string;\n  confirmButtonText?: string;\n  discardButtonText?: string;\n  isConfirmDanger?: boolean;\n  children?: React.ReactNode;\n  'data-testid'?: string;\n}\n\n/**\n * A basic modal dialog with two buttons: cancel / confirm.\n *\n * @param isOpen indicates if the modal dialog is open\n * @param headerText text displayed in the modal header\n * @param bodyText text displayed in the modal body\n * @param onCancel callback for the cancel button; if not provided, button not shown\n * @param onConfirm callback for the confirm button\n * @param onDiscard callback for the discard button; if not provided, button not shown\n * @param cancelButtonText optional text for the cancel button, defaults to 'Cancel'\n * @param confirmButtonText optional text for the confirm button, defaults to 'Okay'\n * @param discardButtonText optional text for the discard button, defaults to 'Discard'\n */\nfunction BasicModal(props: BasicModalProps): JSX.Element {\n  const {\n    isOpen,\n    headerText,\n    bodyText,\n    onCancel,\n    onConfirm,\n    onDiscard,\n    onModalDisable,\n    cancelButtonText = 'Cancel',\n    confirmButtonText = 'Okay',\n    discardButtonText = 'Discard',\n    isConfirmDanger = false,\n    children,\n    'data-testid': dataTestId,\n  } = props;\n\n  const confirmButton = useRef<HTMLButtonElement>(null);\n\n  const disableModalCheckbox = useRef<HTMLInputElement>(null);\n\n  const onConfirmClicked = useCallback(() => {\n    if (\n      disableModalCheckbox.current !== null &&\n      disableModalCheckbox.current.checked &&\n      onModalDisable\n    ) {\n      onModalDisable();\n    }\n    onConfirm();\n  }, [onConfirm, onModalDisable]);\n\n  const onOpened = useCallback(() => {\n    confirmButton.current?.focus();\n  }, []);\n\n  let modalBody = '';\n  if (isOpen) {\n    modalBody = typeof bodyText === 'function' ? bodyText() : bodyText;\n  }\n\n  return (\n    <Modal isOpen={isOpen} className=\"theme-bg-light\" onOpened={onOpened}>\n      <ModalHeader closeButton={false}>{headerText}</ModalHeader>\n      <ModalBody>{modalBody}</ModalBody>\n      <ModalFooter>\n        {onModalDisable && (\n          <div className=\"custom-control custom-checkbox form-group mr-auto\">\n            <input\n              type=\"checkbox\"\n              className=\"custom-control-input\"\n              id=\"move-confirmation-checkbox\"\n              defaultChecked={false}\n              ref={disableModalCheckbox}\n              data-testid={\n                dataTestId !== undefined\n                  ? `${dataTestId}-checkbox-confirm`\n                  : undefined\n              }\n            />\n            <label\n              className=\"custom-control-label\"\n              htmlFor=\"move-confirmation-checkbox\"\n            >\n              Don&#39;t ask me again\n            </label>\n          </div>\n        )}\n        {onDiscard && (\n          <Button\n            kind=\"secondary\"\n            className=\"mr-auto\"\n            data-dismiss=\"modal\"\n            onClick={onDiscard}\n            data-testid={\n              dataTestId !== undefined ? `${dataTestId}-btn-discard` : undefined\n            }\n          >\n            {discardButtonText}\n          </Button>\n        )}\n        {onCancel && (\n          <Button\n            kind=\"secondary\"\n            data-dismiss=\"modal\"\n            onClick={onCancel}\n            data-testid={\n              dataTestId !== undefined ? `${dataTestId}-btn-cancel` : undefined\n            }\n          >\n            {cancelButtonText}\n          </Button>\n        )}\n        <ButtonGroup>\n          <Button\n            kind={isConfirmDanger ? 'danger' : 'primary'}\n            onClick={onConfirmClicked}\n            ref={confirmButton}\n            data-testid={\n              dataTestId !== undefined ? `${dataTestId}-btn-confirm` : undefined\n            }\n          >\n            {confirmButtonText}\n          </Button>\n          {children}\n        </ButtonGroup>\n      </ModalFooter>\n    </Modal>\n  );\n}\n\nBasicModal.propTypes = {\n  isOpen: PropTypes.bool.isRequired,\n  headerText: PropTypes.string.isRequired,\n  bodyText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func.isRequired,\n  onDiscard: PropTypes.func,\n  onModalDisable: PropTypes.func,\n  cancelButtonText: PropTypes.string,\n  confirmButtonText: PropTypes.string,\n  discardButtonText: PropTypes.string,\n  children: PropTypes.node,\n  'data-testid': PropTypes.string,\n};\n\nBasicModal.defaultProps = {\n  children: undefined,\n  cancelButtonText: 'Cancel',\n  confirmButtonText: 'Okay',\n  discardButtonText: 'Discard',\n  onCancel: undefined,\n  onDiscard: undefined,\n  onModalDisable: undefined,\n  'data-testid': undefined,\n};\n\nexport default BasicModal;\n"],"mappings":"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"}
+{"version":3,"file":"BasicModal.js","names":["React","useRef","useCallback","PropTypes","ButtonGroup","Button","Modal","ModalBody","ModalFooter","ModalHeader","jsx","_jsx","jsxs","_jsxs","BasicModal","props","isOpen","headerText","bodyText","onCancel","onConfirm","onDiscard","onModalDisable","cancelButtonText","confirmButtonText","discardButtonText","isConfirmDanger","children","dataTestId","confirmButton","disableModalCheckbox","onConfirmClicked","current","checked","onOpened","_confirmButton$curren","focus","modalBody","closeButton","className","type","id","defaultChecked","ref","undefined","concat","htmlFor","kind","onClick","propTypes","bool","isRequired","string","oneOfType","func","node","defaultProps"],"sources":["../src/BasicModal.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonGroup from './ButtonGroup';\nimport Button from './Button';\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from './modal';\n\nexport interface BasicModalProps {\n  isOpen: boolean;\n  headerText: string;\n  bodyText: string | (() => string);\n  onCancel?: () => void;\n  onConfirm: () => void;\n  onDiscard?: () => void;\n  onModalDisable?: () => void;\n  cancelButtonText?: string;\n  confirmButtonText?: string;\n  discardButtonText?: string;\n  isConfirmDanger?: boolean;\n  children?: React.ReactNode;\n  'data-testid'?: string;\n}\n\n/**\n * A basic modal dialog with two buttons: cancel / confirm.\n *\n * @param isOpen indicates if the modal dialog is open\n * @param headerText text displayed in the modal header\n * @param bodyText text displayed in the modal body\n * @param onCancel callback for the cancel button; if not provided, button not shown\n * @param onConfirm callback for the confirm button\n * @param onDiscard callback for the discard button; if not provided, button not shown\n * @param cancelButtonText optional text for the cancel button, defaults to 'Cancel'\n * @param confirmButtonText optional text for the confirm button, defaults to 'Okay'\n * @param discardButtonText optional text for the discard button, defaults to 'Discard'\n */\nfunction BasicModal(props: BasicModalProps): JSX.Element {\n  const {\n    isOpen,\n    headerText,\n    bodyText,\n    onCancel,\n    onConfirm,\n    onDiscard,\n    onModalDisable,\n    cancelButtonText = 'Cancel',\n    confirmButtonText = 'Okay',\n    discardButtonText = 'Discard',\n    isConfirmDanger = false,\n    children,\n    'data-testid': dataTestId,\n  } = props;\n\n  const confirmButton = useRef<HTMLButtonElement>(null);\n\n  const disableModalCheckbox = useRef<HTMLInputElement>(null);\n\n  const onConfirmClicked = useCallback(() => {\n    if (\n      disableModalCheckbox.current !== null &&\n      disableModalCheckbox.current.checked &&\n      onModalDisable\n    ) {\n      onModalDisable();\n    }\n    onConfirm();\n  }, [onConfirm, onModalDisable]);\n\n  const onOpened = useCallback(() => {\n    confirmButton.current?.focus();\n  }, []);\n\n  let modalBody = '';\n  if (isOpen) {\n    modalBody = typeof bodyText === 'function' ? bodyText() : bodyText;\n  }\n\n  return (\n    <Modal isOpen={isOpen} onOpened={onOpened}>\n      <ModalHeader closeButton={false}>{headerText}</ModalHeader>\n      <ModalBody>{modalBody}</ModalBody>\n      <ModalFooter>\n        {onModalDisable && (\n          <div className=\"custom-control custom-checkbox form-group mr-auto\">\n            <input\n              type=\"checkbox\"\n              className=\"custom-control-input\"\n              id=\"move-confirmation-checkbox\"\n              defaultChecked={false}\n              ref={disableModalCheckbox}\n              data-testid={\n                dataTestId !== undefined\n                  ? `${dataTestId}-checkbox-confirm`\n                  : undefined\n              }\n            />\n            <label\n              className=\"custom-control-label\"\n              htmlFor=\"move-confirmation-checkbox\"\n            >\n              Don&#39;t ask me again\n            </label>\n          </div>\n        )}\n        {onDiscard && (\n          <Button\n            kind=\"secondary\"\n            className=\"mr-auto\"\n            data-dismiss=\"modal\"\n            onClick={onDiscard}\n            data-testid={\n              dataTestId !== undefined ? `${dataTestId}-btn-discard` : undefined\n            }\n          >\n            {discardButtonText}\n          </Button>\n        )}\n        {onCancel && (\n          <Button\n            kind=\"secondary\"\n            data-dismiss=\"modal\"\n            onClick={onCancel}\n            data-testid={\n              dataTestId !== undefined ? `${dataTestId}-btn-cancel` : undefined\n            }\n          >\n            {cancelButtonText}\n          </Button>\n        )}\n        <ButtonGroup>\n          <Button\n            kind={isConfirmDanger ? 'danger' : 'primary'}\n            onClick={onConfirmClicked}\n            ref={confirmButton}\n            data-testid={\n              dataTestId !== undefined ? `${dataTestId}-btn-confirm` : undefined\n            }\n          >\n            {confirmButtonText}\n          </Button>\n          {children}\n        </ButtonGroup>\n      </ModalFooter>\n    </Modal>\n  );\n}\n\nBasicModal.propTypes = {\n  isOpen: PropTypes.bool.isRequired,\n  headerText: PropTypes.string.isRequired,\n  bodyText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func.isRequired,\n  onDiscard: PropTypes.func,\n  onModalDisable: PropTypes.func,\n  cancelButtonText: PropTypes.string,\n  confirmButtonText: PropTypes.string,\n  discardButtonText: PropTypes.string,\n  children: PropTypes.node,\n  'data-testid': PropTypes.string,\n};\n\nBasicModal.defaultProps = {\n  children: undefined,\n  cancelButtonText: 'Cancel',\n  confirmButtonText: 'Okay',\n  discardButtonText: 'Discard',\n  onCancel: undefined,\n  onDiscard: undefined,\n  onModalDisable: undefined,\n  'data-testid': undefined,\n};\n\nexport default BasicModal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,WAAW,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAM,YAAY;AAAC,OAC5BC,WAAW;AAAA,OACXC,MAAM;AAAA,SACJC,KAAK,EAAEC,SAAS,EAAEC,WAAW,EAAEC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkBnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAUA,CAACC,KAAsB,EAAe;EACvD,IAAM;IACJC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,cAAc;IACdC,gBAAgB,GAAG,QAAQ;IAC3BC,iBAAiB,GAAG,MAAM;IAC1BC,iBAAiB,GAAG,SAAS;IAC7BC,eAAe,GAAG,KAAK;IACvBC,QAAQ;IACR,aAAa,EAAEC;EACjB,CAAC,GAAGb,KAAK;EAET,IAAMc,aAAa,GAAG5B,MAAM,CAAoB,IAAI,CAAC;EAErD,IAAM6B,oBAAoB,GAAG7B,MAAM,CAAmB,IAAI,CAAC;EAE3D,IAAM8B,gBAAgB,GAAG7B,WAAW,CAAC,MAAM;IACzC,IACE4B,oBAAoB,CAACE,OAAO,KAAK,IAAI,IACrCF,oBAAoB,CAACE,OAAO,CAACC,OAAO,IACpCX,cAAc,EACd;MACAA,cAAc,CAAC,CAAC;IAClB;IACAF,SAAS,CAAC,CAAC;EACb,CAAC,EAAE,CAACA,SAAS,EAAEE,cAAc,CAAC,CAAC;EAE/B,IAAMY,QAAQ,GAAGhC,WAAW,CAAC,MAAM;IAAA,IAAAiC,qBAAA;IACjC,CAAAA,qBAAA,GAAAN,aAAa,CAACG,OAAO,cAAAG,qBAAA,uBAArBA,qBAAA,CAAuBC,KAAK,CAAC,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIC,SAAS,GAAG,EAAE;EAClB,IAAIrB,MAAM,EAAE;IACVqB,SAAS,GAAG,OAAOnB,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC,CAAC,GAAGA,QAAQ;EACpE;EAEA,oBACEL,KAAA,CAACP,KAAK;IAACU,MAAM,EAAEA,MAAO;IAACkB,QAAQ,EAAEA,QAAS;IAAAP,QAAA,gBACxChB,IAAA,CAACF,WAAW;MAAC6B,WAAW,EAAE,KAAM;MAAAX,QAAA,EAAEV;IAAU,CAAc,CAAC,eAC3DN,IAAA,CAACJ,SAAS;MAAAoB,QAAA,EAAEU;IAAS,CAAY,CAAC,eAClCxB,KAAA,CAACL,WAAW;MAAAmB,QAAA,GACTL,cAAc,iBACbT,KAAA;QAAK0B,SAAS,EAAC,mDAAmD;QAAAZ,QAAA,gBAChEhB,IAAA;UACE6B,IAAI,EAAC,UAAU;UACfD,SAAS,EAAC,sBAAsB;UAChCE,EAAE,EAAC,4BAA4B;UAC/BC,cAAc,EAAE,KAAM;UACtBC,GAAG,EAAEb,oBAAqB;UAC1B,eACEF,UAAU,KAAKgB,SAAS,MAAAC,MAAA,CACjBjB,UAAU,yBACbgB;QACL,CACF,CAAC,eACFjC,IAAA;UACE4B,SAAS,EAAC,sBAAsB;UAChCO,OAAO,EAAC,4BAA4B;UAAAnB,QAAA,EACrC;QAED,CAAO,CAAC;MAAA,CACL,CACN,EACAN,SAAS,iBACRV,IAAA,CAACN,MAAM;QACL0C,IAAI,EAAC,WAAW;QAChBR,SAAS,EAAC,SAAS;QACnB,gBAAa,OAAO;QACpBS,OAAO,EAAE3B,SAAU;QACnB,eACEO,UAAU,KAAKgB,SAAS,MAAAC,MAAA,CAAMjB,UAAU,oBAAiBgB,SAC1D;QAAAjB,QAAA,EAEAF;MAAiB,CACZ,CACT,EACAN,QAAQ,iBACPR,IAAA,CAACN,MAAM;QACL0C,IAAI,EAAC,WAAW;QAChB,gBAAa,OAAO;QACpBC,OAAO,EAAE7B,QAAS;QAClB,eACES,UAAU,KAAKgB,SAAS,MAAAC,MAAA,CAAMjB,UAAU,mBAAgBgB,SACzD;QAAAjB,QAAA,EAEAJ;MAAgB,CACX,CACT,eACDV,KAAA,CAACT,WAAW;QAAAuB,QAAA,gBACVhB,IAAA,CAACN,MAAM;UACL0C,IAAI,EAAErB,eAAe,GAAG,QAAQ,GAAG,SAAU;UAC7CsB,OAAO,EAAEjB,gBAAiB;UAC1BY,GAAG,EAAEd,aAAc;UACnB,eACED,UAAU,KAAKgB,SAAS,MAAAC,MAAA,CAAMjB,UAAU,oBAAiBgB,SAC1D;UAAAjB,QAAA,EAEAH;QAAiB,CACZ,CAAC,EACRG,QAAQ;MAAA,CACE,CAAC;IAAA,CACH,CAAC;EAAA,CACT,CAAC;AAEZ;AAEAb,UAAU,CAACmC,SAAS,GAAG;EACrBjC,MAAM,EAAEb,SAAS,CAAC+C,IAAI,CAACC,UAAU;EACjClC,UAAU,EAAEd,SAAS,CAACiD,MAAM,CAACD,UAAU;EACvCjC,QAAQ,EAAEf,SAAS,CAACkD,SAAS,CAAC,CAAClD,SAAS,CAACiD,MAAM,EAAEjD,SAAS,CAACmD,IAAI,CAAC,CAAC,CAACH,UAAU;EAC5EhC,QAAQ,EAAEhB,SAAS,CAACmD,IAAI;EACxBlC,SAAS,EAAEjB,SAAS,CAACmD,IAAI,CAACH,UAAU;EACpC9B,SAAS,EAAElB,SAAS,CAACmD,IAAI;EACzBhC,cAAc,EAAEnB,SAAS,CAACmD,IAAI;EAC9B/B,gBAAgB,EAAEpB,SAAS,CAACiD,MAAM;EAClC5B,iBAAiB,EAAErB,SAAS,CAACiD,MAAM;EACnC3B,iBAAiB,EAAEtB,SAAS,CAACiD,MAAM;EACnCzB,QAAQ,EAAExB,SAAS,CAACoD,IAAI;EACxB,aAAa,EAAEpD,SAAS,CAACiD;AAC3B,CAAC;AAEDtC,UAAU,CAAC0C,YAAY,GAAG;EACxB7B,QAAQ,EAAEiB,SAAS;EACnBrB,gBAAgB,EAAE,QAAQ;EAC1BC,iBAAiB,EAAE,MAAM;EACzBC,iBAAiB,EAAE,SAAS;EAC5BN,QAAQ,EAAEyB,SAAS;EACnBvB,SAAS,EAAEuB,SAAS;EACpBtB,cAAc,EAAEsB,SAAS;EACzB,aAAa,EAAEA;AACjB,CAAC;AAED,eAAe9B,UAAU"}

package/dist/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,QAAA,MAAM,YAAY,uFAQR,CAAC;AACX,KAAK,WAAW,GAAG,OAAO,YAAY,CAAC;AACvC,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAE7C,QAAA,MAAM,aAAa,wBAAyB,CAAC;AAC7C,KAAK,YAAY,GAAG,OAAO,aAAa,CAAC;AACzC,KAAK,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AAExC,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjD,UAAU,eAAgB,SAAQ,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,KAAK,kBAAkB,GAAG,eAAe,GAAG;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,2BAA2B,GAAG,eAAe,GAAG;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,KAAK,wBAAwB,GAAG,eAAe,GAAG;IAChD,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAmCF,QAAA,MAAM,MAAM,4wcAkIX,CAAC;AA+EF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,QAAA,MAAM,YAAY,uFAQR,CAAC;AACX,KAAK,WAAW,GAAG,OAAO,YAAY,CAAC;AACvC,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAE7C,QAAA,MAAM,aAAa,wBAAyB,CAAC;AAC7C,KAAK,YAAY,GAAG,OAAO,aAAa,CAAC;AACzC,KAAK,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AAExC,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjD,UAAU,eAAgB,SAAQ,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,KAAK,kBAAkB,GAAG,eAAe,GAAG;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,2BAA2B,GAAG,eAAe,GAAG;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,KAAK,wBAAwB,GAAG,eAAe,GAAG;IAChD,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAmCF,QAAA,MAAM,MAAM,4wcAoIX,CAAC;AA+EF,eAAe,MAAM,CAAC"}

package/dist/Button.js

@@ -66,8 +66,6 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
       'aria-label': ariaLabel
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
-  var iconOnly = Boolean(icon && children == null);
-  var btnClassName = getClassName(kind, iconOnly);
   var variantClassName;
   if (variant) {
     variantClassName = getVariantClasses(variant);
@@ -78,13 +76,14 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
       icon: icon
     });
   }
-
+  var iconOnly = iconElem != null && children == null;
   // Best effort backwards-compatible attempt to auto add margin to icon if text is also present
   // We would need to audit our usage of Buttons to remove margins by classname to just add the margin to every icon button with children
   if (iconElem != null && children != null) {
     // check if react children contains a text node to a depth of 2
     // to exlude poppers/menus, but not button text nested in spans
     var containsTextNode = false;
+    iconOnly = true; // assume icon only until we find a text node
     React.Children.forEach(children, child => {
       if (typeof child === 'string') {
         containsTextNode = true;
@@ -97,11 +96,13 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     });
     if (containsTextNode) {
+      iconOnly = false; // is not iconOnly if we found a text node
       iconElem = /*#__PURE__*/React.cloneElement(iconElem, {
         className: classNames('mr-1', iconElem.props.className)
       });
     }
   }
+  var btnClassName = getClassName(kind, iconOnly);
   var tooltipElem;
   if (tooltip !== undefined) {
     tooltipElem = typeof tooltip === 'string' ? /*#__PURE__*/_jsx(Tooltip, {

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","PropTypes","classNames","FontAwesomeIcon","Tooltip","jsx","_jsx","jsxs","_jsxs","BUTTON_KINDS","VARIANT_KINDS","getClassName","kind","iconOnly","getVariantClasses","Button","forwardRef","props","ref","variant","type","tooltip","icon","disabled","active","onClick","onContextMenu","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","onKeyDown","className","style","children","tabIndex","dataTestId","ariaLabel","rest","_objectWithoutProperties","_excluded","Boolean","btnClassName","variantClassName","iconElem","isValidElement","containsTextNode","Children","forEach","child","grandchild","cloneElement","tooltipElem","undefined","ariaLabelString","button","_objectSpread","displayName","propTypes","oneOf","isRequired","Error","iconName","bool","func","number","node","string","object","defaultProps"],"sources":["../src/Button.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Tooltip } from './popper';\n\nconst BUTTON_KINDS = [\n  'primary',\n  'secondary',\n  'tertiary',\n  'success',\n  'danger',\n  'inline',\n  'ghost',\n] as const;\ntype ButtonTuple = typeof BUTTON_KINDS;\nexport type ButtonKind = ButtonTuple[number];\n\nconst VARIANT_KINDS = ['group-end'] as const;\ntype VariantTuple = typeof VARIANT_KINDS;\ntype VariantKind = VariantTuple[number];\n\ntype ButtonTypes = 'submit' | 'reset' | 'button';\n\ninterface BaseButtonProps extends React.ComponentPropsWithRef<'button'> {\n  kind: ButtonKind;\n  type?: ButtonTypes;\n  variant?: VariantKind;\n  tooltip?: string | JSX.Element;\n  icon?: IconDefinition | JSX.Element;\n  active?: boolean;\n  'data-testid'?: string;\n}\n\ntype ButtonWithChildren = BaseButtonProps & {\n  children: React.ReactNode;\n};\n\ntype IconOnlyButtonStringTooltip = BaseButtonProps & {\n  tooltip: string;\n  icon: IconDefinition | JSX.Element;\n  children?: undefined;\n};\n\ntype IconOnlyButtonJsxTooltip = BaseButtonProps & {\n  tooltip: JSX.Element;\n  'aria-label': string;\n  icon: IconDefinition | JSX.Element;\n  children?: undefined;\n};\n\ntype IconOnlyButton = IconOnlyButtonStringTooltip | IconOnlyButtonJsxTooltip;\n\ntype ButtonProps = IconOnlyButton | ButtonWithChildren;\n\nfunction getClassName(kind: ButtonKind, iconOnly: boolean): string {\n  switch (kind) {\n    case 'primary':\n      return 'btn-primary';\n    case 'secondary':\n      return 'btn-outline-primary';\n    case 'tertiary':\n      return 'btn-secondary';\n    case 'success':\n      return 'btn-success';\n    case 'danger':\n      return 'btn-danger';\n    case 'inline':\n      return 'btn-inline';\n    case 'ghost':\n      return classNames('btn-link', {\n        'btn-link-icon': iconOnly,\n        'btn-link-icon-only': iconOnly,\n      });\n  }\n}\n\nfunction getVariantClasses(kind: VariantKind): string {\n  switch (kind) {\n    case 'group-end':\n      return classNames('pl-2', 'pr-3');\n  }\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props: ButtonProps, ref) => {\n    const {\n      kind,\n      variant,\n      type,\n      tooltip,\n      icon,\n      disabled = false,\n      active,\n      onClick,\n      onContextMenu,\n      onMouseDown,\n      onMouseUp,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n      className,\n      style,\n      children,\n      tabIndex,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      ...rest\n    } = props;\n\n    const iconOnly = Boolean(icon && children == null);\n    const btnClassName = getClassName(kind, iconOnly);\n\n    let variantClassName;\n    if (variant) {\n      variantClassName = getVariantClasses(variant);\n    }\n\n    let iconElem: JSX.Element | undefined;\n    if (icon) {\n      iconElem = React.isValidElement(icon) ? (\n        icon\n      ) : (\n        <FontAwesomeIcon icon={icon as IconDefinition} />\n      );\n    }\n\n    // Best effort backwards-compatible attempt to auto add margin to icon if text is also present\n    // We would need to audit our usage of Buttons to remove margins by classname to just add the margin to every icon button with children\n    if (iconElem != null && children != null) {\n      // check if react children contains a text node to a depth of 2\n      // to exlude poppers/menus, but not button text nested in spans\n      let containsTextNode = false;\n      React.Children.forEach(children, child => {\n        if (typeof child === 'string') {\n          containsTextNode = true;\n        } else if (React.isValidElement(child)) {\n          React.Children.forEach(child.props.children, grandchild => {\n            if (typeof grandchild === 'string') {\n              containsTextNode = true;\n            }\n          });\n        }\n      });\n      if (containsTextNode) {\n        iconElem = React.cloneElement(iconElem, {\n          className: classNames('mr-1', iconElem.props.className),\n        });\n      }\n    }\n\n    let tooltipElem: JSX.Element | undefined;\n    if (tooltip !== undefined) {\n      tooltipElem =\n        typeof tooltip === 'string' ? <Tooltip>{tooltip}</Tooltip> : tooltip;\n    }\n\n    // use tooltip as arial-label for iconOnly buttons only\n    // if tooltip is also a string and aria-label is not set\n    let ariaLabelString = ariaLabel;\n    if (\n      ariaLabel === undefined &&\n      iconOnly &&\n      tooltip != null &&\n      typeof tooltip === 'string'\n    ) {\n      ariaLabelString = tooltip;\n    }\n\n    const button = (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={classNames(\n          'btn',\n          btnClassName,\n          variantClassName,\n          { active },\n          className\n        )}\n        onClick={onClick}\n        onContextMenu={onContextMenu}\n        onMouseUp={onMouseUp}\n        onMouseDown={onMouseDown}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onKeyDown={onKeyDown}\n        style={style}\n        disabled={disabled}\n        tabIndex={tabIndex}\n        aria-label={ariaLabelString}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...rest}\n      >\n        {icon && iconElem}\n        {children}\n        {tooltip != null && !disabled && tooltipElem}\n      </button>\n    );\n\n    // disabled buttons tooltips need a wrapped element to receive pointer events\n    // https://jakearchibald.com/2017/events-and-disabled-form-fields/\n\n    return disabled && tooltip != null ? (\n      <span className=\"btn-disabled-wrapper\">\n        {button}\n        {tooltipElem}\n      </span>\n    ) : (\n      button\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nButton.propTypes = {\n  kind: PropTypes.oneOf(BUTTON_KINDS).isRequired,\n  variant: PropTypes.oneOf(VARIANT_KINDS),\n  type: PropTypes.oneOf<ButtonTypes>(['submit', 'reset', 'button']),\n  tooltip(props) {\n    const { tooltip, icon, children } = props;\n    if (tooltip === undefined && icon != null && children == null) {\n      return new Error('Tooltip is required for icon only buttons');\n    }\n    return null;\n  },\n  icon(props) {\n    const { children, icon } = props;\n    if (icon == null && children == null) {\n      return new Error('Icon is required if no children are provided');\n    }\n\n    if (\n      children == null &&\n      !React.isValidElement(icon) &&\n      (icon == null || icon.iconName === '' || icon.iconName == null)\n    ) {\n      return new Error(\n        'Icon must be react element or fontawesome IconDefinition'\n      );\n    }\n\n    return null;\n  },\n  disabled: PropTypes.bool,\n  active: PropTypes.bool,\n  onClick(props) {\n    const { onClick, type } = props;\n    if (type === 'button' && typeof onClick !== 'function') {\n      return new Error('type button requires an onClick function');\n    }\n    if (onClick !== undefined && typeof onClick !== 'function') {\n      return new Error('onClick must be a function');\n    }\n    return null;\n  },\n  onContextMenu: PropTypes.func,\n  onMouseUp: PropTypes.func,\n  onMouseDown: PropTypes.func,\n  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  tabIndex: PropTypes.number,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.object,\n  'data-testid': PropTypes.string,\n};\n\nButton.defaultProps = {\n  type: 'button',\n  onClick: undefined,\n  onContextMenu: undefined,\n  onMouseUp: undefined,\n  onMouseDown: undefined,\n  onMouseEnter: undefined,\n  onMouseLeave: undefined,\n  onKeyDown: undefined,\n  variant: undefined,\n  tooltip: undefined,\n  icon: undefined,\n  disabled: false,\n  active: undefined,\n  tabIndex: undefined,\n  children: undefined,\n  className: undefined,\n  style: {},\n  'data-testid': undefined,\n};\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["React","PropTypes","classNames","FontAwesomeIcon","Tooltip","jsx","_jsx","jsxs","_jsxs","BUTTON_KINDS","VARIANT_KINDS","getClassName","kind","iconOnly","getVariantClasses","Button","forwardRef","props","ref","variant","type","tooltip","icon","disabled","active","onClick","onContextMenu","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","onKeyDown","className","style","children","tabIndex","dataTestId","ariaLabel","rest","_objectWithoutProperties","_excluded","variantClassName","iconElem","isValidElement","containsTextNode","Children","forEach","child","grandchild","cloneElement","btnClassName","tooltipElem","undefined","ariaLabelString","button","_objectSpread","displayName","propTypes","oneOf","isRequired","Error","iconName","bool","func","number","node","string","object","defaultProps"],"sources":["../src/Button.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Tooltip } from './popper';\n\nconst BUTTON_KINDS = [\n  'primary',\n  'secondary',\n  'tertiary',\n  'success',\n  'danger',\n  'inline',\n  'ghost',\n] as const;\ntype ButtonTuple = typeof BUTTON_KINDS;\nexport type ButtonKind = ButtonTuple[number];\n\nconst VARIANT_KINDS = ['group-end'] as const;\ntype VariantTuple = typeof VARIANT_KINDS;\ntype VariantKind = VariantTuple[number];\n\ntype ButtonTypes = 'submit' | 'reset' | 'button';\n\ninterface BaseButtonProps extends React.ComponentPropsWithRef<'button'> {\n  kind: ButtonKind;\n  type?: ButtonTypes;\n  variant?: VariantKind;\n  tooltip?: string | JSX.Element;\n  icon?: IconDefinition | JSX.Element;\n  active?: boolean;\n  'data-testid'?: string;\n}\n\ntype ButtonWithChildren = BaseButtonProps & {\n  children: React.ReactNode;\n};\n\ntype IconOnlyButtonStringTooltip = BaseButtonProps & {\n  tooltip: string;\n  icon: IconDefinition | JSX.Element;\n  children?: undefined;\n};\n\ntype IconOnlyButtonJsxTooltip = BaseButtonProps & {\n  tooltip: JSX.Element;\n  'aria-label': string;\n  icon: IconDefinition | JSX.Element;\n  children?: undefined;\n};\n\ntype IconOnlyButton = IconOnlyButtonStringTooltip | IconOnlyButtonJsxTooltip;\n\ntype ButtonProps = IconOnlyButton | ButtonWithChildren;\n\nfunction getClassName(kind: ButtonKind, iconOnly: boolean): string {\n  switch (kind) {\n    case 'primary':\n      return 'btn-primary';\n    case 'secondary':\n      return 'btn-outline-primary';\n    case 'tertiary':\n      return 'btn-secondary';\n    case 'success':\n      return 'btn-success';\n    case 'danger':\n      return 'btn-danger';\n    case 'inline':\n      return 'btn-inline';\n    case 'ghost':\n      return classNames('btn-link', {\n        'btn-link-icon': iconOnly,\n        'btn-link-icon-only': iconOnly,\n      });\n  }\n}\n\nfunction getVariantClasses(kind: VariantKind): string {\n  switch (kind) {\n    case 'group-end':\n      return classNames('pl-2', 'pr-3');\n  }\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props: ButtonProps, ref) => {\n    const {\n      kind,\n      variant,\n      type,\n      tooltip,\n      icon,\n      disabled = false,\n      active,\n      onClick,\n      onContextMenu,\n      onMouseDown,\n      onMouseUp,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n      className,\n      style,\n      children,\n      tabIndex,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      ...rest\n    } = props;\n\n    let variantClassName;\n    if (variant) {\n      variantClassName = getVariantClasses(variant);\n    }\n\n    let iconElem: JSX.Element | undefined;\n    if (icon) {\n      iconElem = React.isValidElement(icon) ? (\n        icon\n      ) : (\n        <FontAwesomeIcon icon={icon as IconDefinition} />\n      );\n    }\n\n    let iconOnly = iconElem != null && children == null;\n    // Best effort backwards-compatible attempt to auto add margin to icon if text is also present\n    // We would need to audit our usage of Buttons to remove margins by classname to just add the margin to every icon button with children\n    if (iconElem != null && children != null) {\n      // check if react children contains a text node to a depth of 2\n      // to exlude poppers/menus, but not button text nested in spans\n      let containsTextNode = false;\n      iconOnly = true; // assume icon only until we find a text node\n      React.Children.forEach(children, child => {\n        if (typeof child === 'string') {\n          containsTextNode = true;\n        } else if (React.isValidElement(child)) {\n          React.Children.forEach(child.props.children, grandchild => {\n            if (typeof grandchild === 'string') {\n              containsTextNode = true;\n            }\n          });\n        }\n      });\n      if (containsTextNode) {\n        iconOnly = false; // is not iconOnly if we found a text node\n        iconElem = React.cloneElement(iconElem, {\n          className: classNames('mr-1', iconElem.props.className),\n        });\n      }\n    }\n\n    const btnClassName = getClassName(kind, iconOnly);\n\n    let tooltipElem: JSX.Element | undefined;\n    if (tooltip !== undefined) {\n      tooltipElem =\n        typeof tooltip === 'string' ? <Tooltip>{tooltip}</Tooltip> : tooltip;\n    }\n\n    // use tooltip as arial-label for iconOnly buttons only\n    // if tooltip is also a string and aria-label is not set\n    let ariaLabelString = ariaLabel;\n    if (\n      ariaLabel === undefined &&\n      iconOnly &&\n      tooltip != null &&\n      typeof tooltip === 'string'\n    ) {\n      ariaLabelString = tooltip;\n    }\n\n    const button = (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={classNames(\n          'btn',\n          btnClassName,\n          variantClassName,\n          { active },\n          className\n        )}\n        onClick={onClick}\n        onContextMenu={onContextMenu}\n        onMouseUp={onMouseUp}\n        onMouseDown={onMouseDown}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onKeyDown={onKeyDown}\n        style={style}\n        disabled={disabled}\n        tabIndex={tabIndex}\n        aria-label={ariaLabelString}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...rest}\n      >\n        {icon && iconElem}\n        {children}\n        {tooltip != null && !disabled && tooltipElem}\n      </button>\n    );\n\n    // disabled buttons tooltips need a wrapped element to receive pointer events\n    // https://jakearchibald.com/2017/events-and-disabled-form-fields/\n\n    return disabled && tooltip != null ? (\n      <span className=\"btn-disabled-wrapper\">\n        {button}\n        {tooltipElem}\n      </span>\n    ) : (\n      button\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nButton.propTypes = {\n  kind: PropTypes.oneOf(BUTTON_KINDS).isRequired,\n  variant: PropTypes.oneOf(VARIANT_KINDS),\n  type: PropTypes.oneOf<ButtonTypes>(['submit', 'reset', 'button']),\n  tooltip(props) {\n    const { tooltip, icon, children } = props;\n    if (tooltip === undefined && icon != null && children == null) {\n      return new Error('Tooltip is required for icon only buttons');\n    }\n    return null;\n  },\n  icon(props) {\n    const { children, icon } = props;\n    if (icon == null && children == null) {\n      return new Error('Icon is required if no children are provided');\n    }\n\n    if (\n      children == null &&\n      !React.isValidElement(icon) &&\n      (icon == null || icon.iconName === '' || icon.iconName == null)\n    ) {\n      return new Error(\n        'Icon must be react element or fontawesome IconDefinition'\n      );\n    }\n\n    return null;\n  },\n  disabled: PropTypes.bool,\n  active: PropTypes.bool,\n  onClick(props) {\n    const { onClick, type } = props;\n    if (type === 'button' && typeof onClick !== 'function') {\n      return new Error('type button requires an onClick function');\n    }\n    if (onClick !== undefined && typeof onClick !== 'function') {\n      return new Error('onClick must be a function');\n    }\n    return null;\n  },\n  onContextMenu: PropTypes.func,\n  onMouseUp: PropTypes.func,\n  onMouseDown: PropTypes.func,\n  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  tabIndex: PropTypes.number,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.object,\n  'data-testid': PropTypes.string,\n};\n\nButton.defaultProps = {\n  type: 'button',\n  onClick: undefined,\n  onContextMenu: undefined,\n  onMouseUp: undefined,\n  onMouseDown: undefined,\n  onMouseEnter: undefined,\n  onMouseLeave: undefined,\n  onKeyDown: undefined,\n  variant: undefined,\n  tooltip: undefined,\n  icon: undefined,\n  disabled: false,\n  active: undefined,\n  tabIndex: undefined,\n  children: undefined,\n  className: undefined,\n  style: {},\n  'data-testid': undefined,\n};\n\nexport default Button;\n"],"mappings":"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"}

package/dist/ComboBox.css

@@ -3,11 +3,15 @@
   flex-wrap: nowrap;
 }
 .cb-container .btn {
+  background-color: var(--dh-color-selector-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
 }
+.cb-container .btn:disabled {
+  opacity: 1;
+}
 .cb-container .cb-caret {
   background-size: 10px 6px;
   background-color: var(--dh-color-fg);
@@ -19,13 +23,23 @@
   width: 10px;
   height: 6px;
 }
+.cb-container .btn:not(:disabled):hover {
+  background-color: var(--dh-color-selector-hover-bg);
+}
 .cb-container .btn:not(:disabled):hover .cb-caret {
   background-color: var(--dh-color-selector-hover-fg);
 }
+.cb-container .cb-input:focus + .cb-dropdown .btn {
+  border-color: var(--dh-color-input-focus-border);
+}
 .cb-container .cb-input.is-invalid + .cb-dropdown .btn {
   border-color: "danger";
   color: "danger";
 }
+.cb-container:hover .cb-input:not(:focus):not(:disabled),
+.cb-container:hover .cb-input:not(:focus) + .cb-dropdown .btn:not(:disabled) {
+  border-color: var(--dh-color-input-hover-border);
+}
 
 .cb-menu-container .cb-search-input-container {
   padding: 0.5rem;
@@ -43,7 +57,7 @@
   border: none;
   width: 100%;
   color: var(--dh-color-fg);
-  padding: 0.375rem 0.75rem;
+  padding: 0.4214rem 0.75rem;
   white-space: nowrap;
   text-decoration: none;
   background-color: transparent;