@deephaven/console 0.57.2-beta.1 → 0.58.1-alpha-theming.0

package/dist/Console.css

@@ -18,7 +18,7 @@
   display: block;
   position: absolute;
   width: 100%;
-  background: linear-gradient(hsla(var(--dh-color-black-hsl), 0.6), hsla(var(--dh-color-black-hsl), 0));
+  box-shadow: var(--dh-color-dropshadow) 0 6px 6px -6px inset;
   height: 6px;
   opacity: 0;
   transition: opacity 0.3s;

package/dist/Console.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/Console.scss","../../../node_modules/@deephaven/components/scss/new_variables.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../src/common/_ConsoleVariables.scss"],"names":[],"mappings":"AAAA;ACGA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EAGE;EACA;EACA;EACA;EACA;EAIA,QAVO;EAWP;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE,aC5CO;;AD6CP;EACE,aEwFkB;EFvFlB,OEkDG;EFjDH,WGpDM","file":"Console.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","@use 'common/ConsoleVariables';\n@import '@deephaven/components/scss/custom.scss';\n\n.iris-console {\n  display: flex;\n\n  .console-pane {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n\n    .scroll-pane {\n      flex-grow: 1;\n    }\n\n    // acts as scroll decoration element\n    .scroll-pane::before {\n      $size: 6px;\n\n      content: '';\n      display: block;\n      position: absolute;\n      width: 100%;\n      background: linear-gradient(\n        hsla(var(--dh-color-black-hsl), 0.6),\n        hsla(var(--dh-color-black-hsl), 0)\n      );\n      height: $size;\n      opacity: 0;\n      transition: opacity $transition-long;\n      pointer-events: none;\n    }\n\n    .scroll-pane.scroll-decoration::before {\n      opacity: 1;\n    }\n\n    .console-csv-container {\n      position: relative;\n      overflow: hidden;\n      flex-grow: 1;\n    }\n  }\n\n  .console-disconnected-info {\n    padding-top: $spacer-1;\n    .console-disconnected-info-message {\n      font-family: $font-family-monospace;\n      color: $danger;\n      font-size: ConsoleVariables.$font-size;\n    }\n  }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n@function hsla-opacity($semantic-name, $i: 100) {\n  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));\n}\n\n@function accent-opacity($i: 100) {\n  @return hsla-opacity('accent', $i);\n}\n\n@function background-opacity($i: 100) {\n  @return hsla-opacity('bg', $i);\n}\n\n@function foreground-opacity($i: 100) {\n  @return hsla-opacity('fg', $i);\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\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","$font-size: 12px;\n$line-height: 18px;\n$button-height: 26px;\n$button-vert-margin: 4px;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/Console.scss","../../../node_modules/@deephaven/components/scss/new_variables.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../src/common/_ConsoleVariables.scss"],"names":[],"mappings":"AAAA;ACGA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EAGE;EACA;EACA;EACA;EACA;EACA,QAPO;EAQP;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE,aCzCO;;AD0CP;EACE,aE2FkB;EF1FlB,OEqDG;EFpDH,WGjDM","file":"Console.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","@use 'common/ConsoleVariables';\n@import '@deephaven/components/scss/custom.scss';\n\n.iris-console {\n  display: flex;\n\n  .console-pane {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n\n    .scroll-pane {\n      flex-grow: 1;\n    }\n\n    // acts as scroll decoration element\n    .scroll-pane::before {\n      $size: 6px;\n\n      content: '';\n      display: block;\n      position: absolute;\n      width: 100%;\n      box-shadow: var(--dh-color-dropshadow) 0 6px 6px -6px inset;\n      height: $size;\n      opacity: 0;\n      transition: opacity $transition-long;\n      pointer-events: none;\n    }\n\n    .scroll-pane.scroll-decoration::before {\n      opacity: 1;\n    }\n\n    .console-csv-container {\n      position: relative;\n      overflow: hidden;\n      flex-grow: 1;\n    }\n  }\n\n  .console-disconnected-info {\n    padding-top: $spacer-1;\n    .console-disconnected-info-message {\n      font-family: $font-family-monospace;\n      color: $danger;\n      font-size: ConsoleVariables.$font-size;\n    }\n  }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n@function hsla-opacity($semantic-name, $i: 100) {\n  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));\n}\n\n@function accent-opacity($i: 100) {\n  @return hsla-opacity('accent', $i);\n}\n\n@function background-opacity($i: 100) {\n  @return hsla-opacity('bg', $i);\n}\n\n@function foreground-opacity($i: 100) {\n  @return hsla-opacity('fg', $i);\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\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","$font-size: 12px;\n$line-height: 18px;\n$button-height: 26px;\n$button-vert-margin: 4px;\n"]}

package/dist/ConsoleInput.css

@@ -1,6 +1,7 @@
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
 .console-input-wrapper {
-  background-color: var(--dh-color-gray-500);
+  --console-input-bg: var(--dh-color-surface-bg);
+  background-color: var(--console-input-bg);
   padding: 4px;
   min-height: 40px;
   display: flex;

package/dist/ConsoleInput.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/ConsoleInput.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACkBA;EACE;EACA,SAfsB;EAgBtB,YAjByB;EAkBzB;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,YApBwB;EAqBxB,aC0GoB;EDzGpB,WApB6B;EAqB7B;EACA,eArBiC;EAsBjC,aArB+B;EAsB/B,OCHS;;ADMX;EACE;EACA;EACA,kBCXS;EDYT,eC8GY;ED7GZ;;AAEA;EACE,eC0GU;;ADxGV;EACE,eCuGQ;;ADnGZ;EAEE,cCsHqB;EDrHrB,YCyHuB;EDxHvB","file":"ConsoleInput.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 '@deephaven/components/scss/custom.scss';\n\n$console-input-bg: $gray-600;\n$console-input-inner-bg: $content-bg;\n$console-input-min-height: 40px;\n$console-input-padding: 4px;\n$console-input-radius: $border-radius;\n$console-input-border-color: $input-border-color;\n$console-input-focus-border-color: $input-focus-border-color;\n$console-input-focus-box-shadow: $input-btn-focus-box-shadow;\n$console-input-border-width: $input-border-width;\n$console-input-margin-left: 33px;\n$console-input-margin-font-family: $font-family-monospace;\n$console-input-margin-font-size: 12px;\n$console-input-margin-padding-right: 15px;\n$console-input-margin-padding-top: 7px;\n$console-input-margin-color: $foreground;\n\n.console-input-wrapper {\n  background-color: $console-input-bg;\n  padding: $console-input-padding;\n  min-height: $console-input-min-height;\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  width: 100%;\n\n  &::before {\n    content: '>';\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: $console-input-margin-left;\n    font-family: $console-input-margin-font-family;\n    font-size: $console-input-margin-font-size;\n    text-align: right;\n    padding-right: $console-input-margin-padding-right;\n    padding-top: $console-input-margin-padding-top;\n    color: $console-input-margin-color;\n  }\n\n  .console-input-inner-wrapper {\n    min-width: 0;\n    flex-grow: 1;\n    background-color: $console-input-inner-bg;\n    border-radius: $console-input-radius;\n    border: $console-input-border-width solid $console-input-border-color;\n\n    .monaco-editor {\n      border-radius: $console-input-radius;\n\n      .overflow-guard {\n        border-radius: $console-input-radius;\n      }\n    }\n\n    &:focus,\n    &.focus {\n      border-color: $console-input-focus-border-color;\n      box-shadow: $console-input-focus-box-shadow;\n      outline: none;\n    }\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":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/ConsoleInput.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACiBA;EACE;EAEA;EACA,SAjBsB;EAkBtB,YAnByB;EAoBzB;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,YAtBwB;EAuBxB,aCyGoB;EDxGpB,WAtB6B;EAuB7B;EACA,eAvBiC;EAwBjC,aAvB+B;EAwB/B,OCJS;;ADOX;EACE;EACA;EACA,kBCZS;EDaT,eC6GY;ED5GZ;;AAEA;EACE,eCyGU;;ADvGV;EACE,eCsGQ;;ADlGZ;EAEE,cCqHqB;EDpHrB,YCwHuB;EDvHvB","file":"ConsoleInput.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 '@deephaven/components/scss/custom.scss';\n\n$console-input-inner-bg: $content-bg;\n$console-input-min-height: 40px;\n$console-input-padding: 4px;\n$console-input-radius: $border-radius;\n$console-input-border-color: $input-border-color;\n$console-input-focus-border-color: $input-focus-border-color;\n$console-input-focus-box-shadow: $input-btn-focus-box-shadow;\n$console-input-border-width: $input-border-width;\n$console-input-margin-left: 33px;\n$console-input-margin-font-family: $font-family-monospace;\n$console-input-margin-font-size: 12px;\n$console-input-margin-padding-right: 15px;\n$console-input-margin-padding-top: 7px;\n$console-input-margin-color: $foreground;\n\n.console-input-wrapper {\n  --console-input-bg: var(--dh-color-surface-bg);\n\n  background-color: var(--console-input-bg);\n  padding: $console-input-padding;\n  min-height: $console-input-min-height;\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  width: 100%;\n\n  &::before {\n    content: '>';\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: $console-input-margin-left;\n    font-family: $console-input-margin-font-family;\n    font-size: $console-input-margin-font-size;\n    text-align: right;\n    padding-right: $console-input-margin-padding-right;\n    padding-top: $console-input-margin-padding-top;\n    color: $console-input-margin-color;\n  }\n\n  .console-input-inner-wrapper {\n    min-width: 0;\n    flex-grow: 1;\n    background-color: $console-input-inner-bg;\n    border-radius: $console-input-radius;\n    border: $console-input-border-width solid $console-input-border-color;\n\n    .monaco-editor {\n      border-radius: $console-input-radius;\n\n      .overflow-guard {\n        border-radius: $console-input-radius;\n      }\n    }\n\n    &:focus,\n    &.focus {\n      border-color: $console-input-focus-border-color;\n      box-shadow: $console-input-focus-box-shadow;\n      outline: none;\n    }\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/ConsoleMenu.d.ts

@@ -1,7 +1,6 @@
 import { ChangeEvent, ChangeEventHandler, PureComponent, ReactElement } from 'react';
 import { DropdownAction, SearchInput } from '@deephaven/components';
 import type { dh as DhType, VariableDefinition } from '@deephaven/jsapi-types';
-import './ConsoleMenu.scss';
 interface ConsoleMenuProps {
     dh: DhType;
     openObject: (object: VariableDefinition) => void;

package/dist/ConsoleMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsoleMenu.d.ts","sourceRoot":"","sources":["../src/ConsoleMenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,cAAc,EAGd,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,EAAE,IAAI,MAAM,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE/E,OAAO,oBAAoB,CAAC;AAK5B,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,eAAe,EAAE,MAAM,cAAc,EAAE,CAAC;CACzC;AAED,UAAU,gBAAgB;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IACzE,MAAM,CAAC,eAAe,CACpB,OAAO,EAAE,kBAAkB,EAAE,EAC7B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,EACvC,cAAc,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,EACpD,YAAY,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,GACjD,cAAc,EAAE;gBAiCP,KAAK,EAAE,gBAAgB;IAgBnC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,gBAAgB,YAEH,kBAAkB,EAAE,cACjB,MAAM,uBACG,kBAAkB,KAAK,IAAI,KAC/C,cAAc,EAAE,CAenB;IAEF,iBAAiB,YAEJ,kBAAkB,EAAE,cACjB,MAAM,uBACG,kBAAkB,KAAK,IAAI,KAC/C,cAAc,EAAE,CAenB;IAEF,uBAAuB,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAK/D,qBAAqB,IAAI,IAAI;IAI7B,qBAAqB,IAAI,IAAI;IAI7B,wBAAwB,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAKhE,sBAAsB,IAAI,IAAI;IAI9B,sBAAsB,IAAI,IAAI;IAI9B,MAAM,IAAI,YAAY;CAyFvB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ConsoleMenu.d.ts","sourceRoot":"","sources":["../src/ConsoleMenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,cAAc,EAGd,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,EAAE,IAAI,MAAM,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAM/E,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,eAAe,EAAE,MAAM,cAAc,EAAE,CAAC;CACzC;AAED,UAAU,gBAAgB;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IACzE,MAAM,CAAC,eAAe,CACpB,OAAO,EAAE,kBAAkB,EAAE,EAC7B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,EACvC,cAAc,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,EACpD,YAAY,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,GACjD,cAAc,EAAE;gBAiCP,KAAK,EAAE,gBAAgB;IAgBnC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,gBAAgB,YAEH,kBAAkB,EAAE,cACjB,MAAM,uBACG,kBAAkB,KAAK,IAAI,KAC/C,cAAc,EAAE,CAenB;IAEF,iBAAiB,YAEJ,kBAAkB,EAAE,cACjB,MAAM,uBACG,kBAAkB,KAAK,IAAI,KAC/C,cAAc,EAAE,CAenB;IAEF,uBAAuB,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAK/D,qBAAqB,IAAI,IAAI;IAI7B,qBAAqB,IAAI,IAAI;IAI7B,wBAAwB,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAKhE,sBAAsB,IAAI,IAAI;IAI9B,sBAAsB,IAAI,IAAI;IAI9B,MAAM,IAAI,YAAY;CAgGvB;AAED,eAAe,WAAW,CAAC"}

package/dist/ConsoleMenu.js

@@ -7,10 +7,10 @@ import { Button, DropdownMenu, SearchInput } from '@deephaven/components';
 import { dhTable, vsGraph, vsKebabVertical, vsTriangleDown } from '@deephaven/icons';
 import Log from '@deephaven/log';
 import memoize from 'memoize-one';
-import "./ConsoleMenu.css";
 import ConsoleUtils from "./common/ConsoleUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var log = Log.module('ConsoleMenu');
 class ConsoleMenu extends PureComponent {
   static makeItemActions(objects, filterText, refCallback, changeCallback, openCallback) {
@@ -122,17 +122,14 @@ class ConsoleMenu extends PureComponent {
     };
     var disableTableActions = tableActions.length === 0;
     var disableWidgetActions = widgetActions.length === 0;
-    return /*#__PURE__*/_jsxs("div", {
-      className: "console-pane-menu",
-      children: [/*#__PURE__*/_jsxs(Button, {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
         kind: "ghost",
-        className: "btn-link-icon",
         disabled: disableTableActions,
         onClick: () => {
           // no-op: click is handled in `DropdownMenu`
         },
-        tooltip: disableTableActions ? 'No tables available' : 'Tables',
-        children: [/*#__PURE__*/_jsxs("div", {
+        icon: /*#__PURE__*/_jsxs("div", {
           className: "fa-md fa-layers",
           children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
             mask: dhTable,
@@ -142,7 +139,9 @@ class ConsoleMenu extends PureComponent {
             icon: vsTriangleDown,
             transform: "right-8 down-6"
           })]
-        }), /*#__PURE__*/_jsx(DropdownMenu, {
+        }),
+        tooltip: disableTableActions ? 'No tables available' : 'Tables',
+        children: /*#__PURE__*/_jsx(DropdownMenu, {
           actions: tableActions,
           onMenuOpened: this.handleTableMenuOpened,
           onMenuClosed: this.handleTableMenuClosed,
@@ -150,16 +149,14 @@ class ConsoleMenu extends PureComponent {
             initialKeyboardIndex: 1
           },
           popperOptions: popperOptions
-        }, "table-actions ")]
-      }), /*#__PURE__*/_jsxs(Button, {
+        }, "table-actions ")
+      }), /*#__PURE__*/_jsx(Button, {
         kind: "ghost",
-        className: "btn-link-icon",
         disabled: widgetActions.length === 0,
         onClick: () => {
           // no-op: click is handled in `DropdownMenu'
         },
-        tooltip: disableWidgetActions ? 'No widgets available' : 'Widgets',
-        children: [/*#__PURE__*/_jsxs("div", {
+        icon: /*#__PURE__*/_jsxs("div", {
           className: "fa-md fa-layers",
           children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
             mask: vsGraph,
@@ -169,7 +166,9 @@ class ConsoleMenu extends PureComponent {
             icon: vsTriangleDown,
             transform: "right-8 down-6"
           })]
-        }), /*#__PURE__*/_jsx(DropdownMenu, {
+        }),
+        tooltip: disableWidgetActions ? 'No widgets available' : 'Widgets',
+        children: /*#__PURE__*/_jsx(DropdownMenu, {
           actions: widgetActions,
           onMenuOpened: this.handleWidgetMenuOpened,
           onMenuClosed: this.handleWidgetMenuClosed,
@@ -177,10 +176,9 @@ class ConsoleMenu extends PureComponent {
             initialKeyboardIndex: 1
           },
           popperOptions: popperOptions
-        }, "table-actions")]
+        }, "table-actions")
       }), /*#__PURE__*/_jsx(Button, {
         kind: "ghost",
-        className: "btn-overflow btn-link-icon",
         icon: vsKebabVertical,
         tooltip: "More Actions...",
         onClick: () => {

package/dist/ConsoleMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConsoleMenu.js","names":["React","PureComponent","FontAwesomeIcon","Button","DropdownMenu","SearchInput","dhTable","vsGraph","vsKebabVertical","vsTriangleDown","Log","memoize","ConsoleUtils","jsx","_jsx","jsxs","_jsxs","log","module","ConsoleMenu","makeItemActions","objects","filterText","refCallback","changeCallback","openCallback","length","searchAction","menuElement","value","onChange","className","ref","filteredItems","filter","_ref","title","toLowerCase","indexOf","openActions","map","object","action","constructor","props","_defineProperty","openObject","dh","tables","isTableType","type","searchField","tableSearchField","handleTableFilterChange","widgets","isWidgetType","widgetSearchField","handleWidgetFilterChange","bind","handleTableMenuClosed","handleTableMenuOpened","handleWidgetMenuClosed","handleWidgetMenuOpened","state","tableFilterText","widgetFilterText","e","debug","setState","target","_this$tableSearchFiel","focus","_this$widgetSearchFie","render","overflowActions","tableActions","makeTableActions","widgetActions","makeWidgetActions","popperOptions","placement","disableTableActions","disableWidgetActions","children","kind","disabled","onClick","tooltip","mask","icon","transform","actions","onMenuOpened","onMenuClosed","options","initialKeyboardIndex"],"sources":["../src/ConsoleMenu.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  ChangeEventHandler,\n  PureComponent,\n  ReactElement,\n} from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  Button,\n  DropdownAction,\n  DropdownMenu,\n  PopperOptions,\n  SearchInput,\n} from '@deephaven/components';\nimport {\n  dhTable,\n  vsGraph,\n  vsKebabVertical,\n  vsTriangleDown,\n} from '@deephaven/icons';\nimport Log from '@deephaven/log';\nimport type { dh as DhType, VariableDefinition } from '@deephaven/jsapi-types';\nimport memoize from 'memoize-one';\nimport './ConsoleMenu.scss';\nimport ConsoleUtils from './common/ConsoleUtils';\n\nconst log = Log.module('ConsoleMenu');\n\ninterface ConsoleMenuProps {\n  dh: DhType;\n  openObject: (object: VariableDefinition) => void;\n  objects: VariableDefinition[];\n  overflowActions: () => DropdownAction[];\n}\n\ninterface ConsoleMenuState {\n  tableFilterText: string;\n  widgetFilterText: string;\n}\n\nclass ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {\n  static makeItemActions(\n    objects: VariableDefinition[],\n    filterText: string,\n    refCallback: (ref: SearchInput) => void,\n    changeCallback: ChangeEventHandler<HTMLInputElement>,\n    openCallback: (object: VariableDefinition) => void\n  ): DropdownAction[] {\n    if (objects.length === 0) {\n      return [];\n    }\n\n    const searchAction = {\n      menuElement: (\n        <SearchInput\n          value={filterText}\n          onChange={changeCallback}\n          className=\"console-menu\"\n          ref={refCallback}\n        />\n      ),\n    };\n    let filteredItems = objects;\n    if (filterText) {\n      filteredItems = filteredItems.filter(\n        ({ title }: { title?: string }) =>\n          title != null &&\n          title.toLowerCase().indexOf(filterText.toLowerCase()) >= 0\n      );\n    }\n    const openActions = filteredItems.map(object => ({\n      title: object.title,\n      action: () => {\n        openCallback(object);\n      },\n    }));\n\n    return [searchAction, ...openActions];\n  }\n\n  constructor(props: ConsoleMenuProps) {\n    super(props);\n\n    this.handleTableFilterChange = this.handleTableFilterChange.bind(this);\n    this.handleTableMenuClosed = this.handleTableMenuClosed.bind(this);\n    this.handleTableMenuOpened = this.handleTableMenuOpened.bind(this);\n    this.handleWidgetFilterChange = this.handleWidgetFilterChange.bind(this);\n    this.handleWidgetMenuClosed = this.handleWidgetMenuClosed.bind(this);\n    this.handleWidgetMenuOpened = this.handleWidgetMenuOpened.bind(this);\n\n    this.state = {\n      tableFilterText: '',\n      widgetFilterText: '',\n    };\n  }\n\n  tableSearchField?: SearchInput;\n\n  widgetSearchField?: SearchInput;\n\n  makeTableActions = memoize(\n    (\n      objects: VariableDefinition[],\n      filterText: string,\n      openObject: (object: VariableDefinition) => void\n    ): DropdownAction[] => {\n      const { dh } = this.props;\n      const tables = objects.filter(object =>\n        ConsoleUtils.isTableType(dh, object.type)\n      );\n      return ConsoleMenu.makeItemActions(\n        tables,\n        filterText,\n        searchField => {\n          this.tableSearchField = searchField;\n        },\n        this.handleTableFilterChange,\n        openObject\n      );\n    }\n  );\n\n  makeWidgetActions = memoize(\n    (\n      objects: VariableDefinition[],\n      filterText: string,\n      openObject: (object: VariableDefinition) => void\n    ): DropdownAction[] => {\n      const { dh } = this.props;\n      const widgets = objects.filter(object =>\n        ConsoleUtils.isWidgetType(dh, object.type)\n      );\n      return ConsoleMenu.makeItemActions(\n        widgets,\n        filterText,\n        searchField => {\n          this.widgetSearchField = searchField;\n        },\n        this.handleWidgetFilterChange,\n        openObject\n      );\n    }\n  );\n\n  handleTableFilterChange(e: ChangeEvent<HTMLInputElement>): void {\n    log.debug('filtering tables...');\n    this.setState({ tableFilterText: e.target.value });\n  }\n\n  handleTableMenuClosed(): void {\n    this.setState({ tableFilterText: '' });\n  }\n\n  handleTableMenuOpened(): void {\n    this.tableSearchField?.focus();\n  }\n\n  handleWidgetFilterChange(e: ChangeEvent<HTMLInputElement>): void {\n    log.debug('filtering widgets...');\n    this.setState({ widgetFilterText: e.target.value });\n  }\n\n  handleWidgetMenuClosed(): void {\n    this.setState({ widgetFilterText: '' });\n  }\n\n  handleWidgetMenuOpened(): void {\n    this.widgetSearchField?.focus();\n  }\n\n  render(): ReactElement {\n    const { overflowActions, objects, openObject } = this.props;\n    const { tableFilterText, widgetFilterText } = this.state;\n    const tableActions = this.makeTableActions(\n      objects,\n      tableFilterText,\n      openObject\n    );\n    const widgetActions = this.makeWidgetActions(\n      objects,\n      widgetFilterText,\n      openObject\n    );\n    const popperOptions: PopperOptions = { placement: 'bottom-end' };\n\n    const disableTableActions = tableActions.length === 0;\n    const disableWidgetActions = widgetActions.length === 0;\n\n    return (\n      <div className=\"console-pane-menu\">\n        <Button\n          kind=\"ghost\"\n          className=\"btn-link-icon\"\n          disabled={disableTableActions}\n          onClick={() => {\n            // no-op: click is handled in `DropdownMenu`\n          }}\n          tooltip={disableTableActions ? 'No tables available' : 'Tables'}\n        >\n          <div className=\"fa-md fa-layers\">\n            <FontAwesomeIcon\n              mask={dhTable}\n              icon={vsTriangleDown}\n              transform=\"right-5 down-5\"\n            />\n            <FontAwesomeIcon icon={vsTriangleDown} transform=\"right-8 down-6\" />\n          </div>\n          <DropdownMenu\n            key=\"table-actions \"\n            actions={tableActions}\n            onMenuOpened={this.handleTableMenuOpened}\n            onMenuClosed={this.handleTableMenuClosed}\n            options={{ initialKeyboardIndex: 1 }}\n            popperOptions={popperOptions}\n          />\n        </Button>\n        <Button\n          kind=\"ghost\"\n          className=\"btn-link-icon\"\n          disabled={widgetActions.length === 0}\n          onClick={() => {\n            // no-op: click is handled in `DropdownMenu'\n          }}\n          tooltip={disableWidgetActions ? 'No widgets available' : 'Widgets'}\n        >\n          <div className=\"fa-md fa-layers\">\n            <FontAwesomeIcon\n              mask={vsGraph}\n              icon={vsTriangleDown}\n              transform=\"right-5 down-5\"\n            />\n            <FontAwesomeIcon icon={vsTriangleDown} transform=\"right-8 down-6\" />\n          </div>\n          <DropdownMenu\n            key=\"table-actions\"\n            actions={widgetActions}\n            onMenuOpened={this.handleWidgetMenuOpened}\n            onMenuClosed={this.handleWidgetMenuClosed}\n            options={{ initialKeyboardIndex: 1 }}\n            popperOptions={popperOptions}\n          />\n        </Button>\n        <Button\n          kind=\"ghost\"\n          className=\"btn-overflow btn-link-icon\"\n          icon={vsKebabVertical}\n          tooltip=\"More Actions...\"\n          onClick={() => {\n            // no-op: click is handled in `DropdownMenu`\n          }}\n        >\n          <DropdownMenu\n            actions={overflowActions}\n            popperOptions={popperOptions}\n          />\n        </Button>\n      </div>\n    );\n  }\n}\n\nexport default ConsoleMenu;\n"],"mappings":"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"}
+{"version":3,"file":"ConsoleMenu.js","names":["React","PureComponent","FontAwesomeIcon","Button","DropdownMenu","SearchInput","dhTable","vsGraph","vsKebabVertical","vsTriangleDown","Log","memoize","ConsoleUtils","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","log","module","ConsoleMenu","makeItemActions","objects","filterText","refCallback","changeCallback","openCallback","length","searchAction","menuElement","value","onChange","className","ref","filteredItems","filter","_ref","title","toLowerCase","indexOf","openActions","map","object","action","constructor","props","_defineProperty","openObject","dh","tables","isTableType","type","searchField","tableSearchField","handleTableFilterChange","widgets","isWidgetType","widgetSearchField","handleWidgetFilterChange","bind","handleTableMenuClosed","handleTableMenuOpened","handleWidgetMenuClosed","handleWidgetMenuOpened","state","tableFilterText","widgetFilterText","e","debug","setState","target","_this$tableSearchFiel","focus","_this$widgetSearchFie","render","overflowActions","tableActions","makeTableActions","widgetActions","makeWidgetActions","popperOptions","placement","disableTableActions","disableWidgetActions","children","kind","disabled","onClick","icon","mask","transform","tooltip","actions","onMenuOpened","onMenuClosed","options","initialKeyboardIndex"],"sources":["../src/ConsoleMenu.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  ChangeEventHandler,\n  PureComponent,\n  ReactElement,\n} from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  Button,\n  DropdownAction,\n  DropdownMenu,\n  PopperOptions,\n  SearchInput,\n} from '@deephaven/components';\nimport {\n  dhTable,\n  vsGraph,\n  vsKebabVertical,\n  vsTriangleDown,\n} from '@deephaven/icons';\nimport Log from '@deephaven/log';\nimport type { dh as DhType, VariableDefinition } from '@deephaven/jsapi-types';\nimport memoize from 'memoize-one';\nimport ConsoleUtils from './common/ConsoleUtils';\n\nconst log = Log.module('ConsoleMenu');\n\ninterface ConsoleMenuProps {\n  dh: DhType;\n  openObject: (object: VariableDefinition) => void;\n  objects: VariableDefinition[];\n  overflowActions: () => DropdownAction[];\n}\n\ninterface ConsoleMenuState {\n  tableFilterText: string;\n  widgetFilterText: string;\n}\n\nclass ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {\n  static makeItemActions(\n    objects: VariableDefinition[],\n    filterText: string,\n    refCallback: (ref: SearchInput) => void,\n    changeCallback: ChangeEventHandler<HTMLInputElement>,\n    openCallback: (object: VariableDefinition) => void\n  ): DropdownAction[] {\n    if (objects.length === 0) {\n      return [];\n    }\n\n    const searchAction = {\n      menuElement: (\n        <SearchInput\n          value={filterText}\n          onChange={changeCallback}\n          className=\"console-menu\"\n          ref={refCallback}\n        />\n      ),\n    };\n    let filteredItems = objects;\n    if (filterText) {\n      filteredItems = filteredItems.filter(\n        ({ title }: { title?: string }) =>\n          title != null &&\n          title.toLowerCase().indexOf(filterText.toLowerCase()) >= 0\n      );\n    }\n    const openActions = filteredItems.map(object => ({\n      title: object.title,\n      action: () => {\n        openCallback(object);\n      },\n    }));\n\n    return [searchAction, ...openActions];\n  }\n\n  constructor(props: ConsoleMenuProps) {\n    super(props);\n\n    this.handleTableFilterChange = this.handleTableFilterChange.bind(this);\n    this.handleTableMenuClosed = this.handleTableMenuClosed.bind(this);\n    this.handleTableMenuOpened = this.handleTableMenuOpened.bind(this);\n    this.handleWidgetFilterChange = this.handleWidgetFilterChange.bind(this);\n    this.handleWidgetMenuClosed = this.handleWidgetMenuClosed.bind(this);\n    this.handleWidgetMenuOpened = this.handleWidgetMenuOpened.bind(this);\n\n    this.state = {\n      tableFilterText: '',\n      widgetFilterText: '',\n    };\n  }\n\n  tableSearchField?: SearchInput;\n\n  widgetSearchField?: SearchInput;\n\n  makeTableActions = memoize(\n    (\n      objects: VariableDefinition[],\n      filterText: string,\n      openObject: (object: VariableDefinition) => void\n    ): DropdownAction[] => {\n      const { dh } = this.props;\n      const tables = objects.filter(object =>\n        ConsoleUtils.isTableType(dh, object.type)\n      );\n      return ConsoleMenu.makeItemActions(\n        tables,\n        filterText,\n        searchField => {\n          this.tableSearchField = searchField;\n        },\n        this.handleTableFilterChange,\n        openObject\n      );\n    }\n  );\n\n  makeWidgetActions = memoize(\n    (\n      objects: VariableDefinition[],\n      filterText: string,\n      openObject: (object: VariableDefinition) => void\n    ): DropdownAction[] => {\n      const { dh } = this.props;\n      const widgets = objects.filter(object =>\n        ConsoleUtils.isWidgetType(dh, object.type)\n      );\n      return ConsoleMenu.makeItemActions(\n        widgets,\n        filterText,\n        searchField => {\n          this.widgetSearchField = searchField;\n        },\n        this.handleWidgetFilterChange,\n        openObject\n      );\n    }\n  );\n\n  handleTableFilterChange(e: ChangeEvent<HTMLInputElement>): void {\n    log.debug('filtering tables...');\n    this.setState({ tableFilterText: e.target.value });\n  }\n\n  handleTableMenuClosed(): void {\n    this.setState({ tableFilterText: '' });\n  }\n\n  handleTableMenuOpened(): void {\n    this.tableSearchField?.focus();\n  }\n\n  handleWidgetFilterChange(e: ChangeEvent<HTMLInputElement>): void {\n    log.debug('filtering widgets...');\n    this.setState({ widgetFilterText: e.target.value });\n  }\n\n  handleWidgetMenuClosed(): void {\n    this.setState({ widgetFilterText: '' });\n  }\n\n  handleWidgetMenuOpened(): void {\n    this.widgetSearchField?.focus();\n  }\n\n  render(): ReactElement {\n    const { overflowActions, objects, openObject } = this.props;\n    const { tableFilterText, widgetFilterText } = this.state;\n    const tableActions = this.makeTableActions(\n      objects,\n      tableFilterText,\n      openObject\n    );\n    const widgetActions = this.makeWidgetActions(\n      objects,\n      widgetFilterText,\n      openObject\n    );\n    const popperOptions: PopperOptions = { placement: 'bottom-end' };\n\n    const disableTableActions = tableActions.length === 0;\n    const disableWidgetActions = widgetActions.length === 0;\n\n    return (\n      <>\n        <Button\n          kind=\"ghost\"\n          disabled={disableTableActions}\n          onClick={() => {\n            // no-op: click is handled in `DropdownMenu`\n          }}\n          icon={\n            <div className=\"fa-md fa-layers\">\n              <FontAwesomeIcon\n                mask={dhTable}\n                icon={vsTriangleDown}\n                transform=\"right-5 down-5\"\n              />\n              <FontAwesomeIcon\n                icon={vsTriangleDown}\n                transform=\"right-8 down-6\"\n              />\n            </div>\n          }\n          tooltip={disableTableActions ? 'No tables available' : 'Tables'}\n        >\n          <DropdownMenu\n            key=\"table-actions \"\n            actions={tableActions}\n            onMenuOpened={this.handleTableMenuOpened}\n            onMenuClosed={this.handleTableMenuClosed}\n            options={{ initialKeyboardIndex: 1 }}\n            popperOptions={popperOptions}\n          />\n        </Button>\n        <Button\n          kind=\"ghost\"\n          disabled={widgetActions.length === 0}\n          onClick={() => {\n            // no-op: click is handled in `DropdownMenu'\n          }}\n          icon={\n            <div className=\"fa-md fa-layers\">\n              <FontAwesomeIcon\n                mask={vsGraph}\n                icon={vsTriangleDown}\n                transform=\"right-5 down-5\"\n              />\n              <FontAwesomeIcon\n                icon={vsTriangleDown}\n                transform=\"right-8 down-6\"\n              />\n            </div>\n          }\n          tooltip={disableWidgetActions ? 'No widgets available' : 'Widgets'}\n        >\n          <DropdownMenu\n            key=\"table-actions\"\n            actions={widgetActions}\n            onMenuOpened={this.handleWidgetMenuOpened}\n            onMenuClosed={this.handleWidgetMenuClosed}\n            options={{ initialKeyboardIndex: 1 }}\n            popperOptions={popperOptions}\n          />\n        </Button>\n        <Button\n          kind=\"ghost\"\n          icon={vsKebabVertical}\n          tooltip=\"More Actions...\"\n          onClick={() => {\n            // no-op: click is handled in `DropdownMenu`\n          }}\n        >\n          <DropdownMenu\n            actions={overflowActions}\n            popperOptions={popperOptions}\n          />\n        </Button>\n      </>\n    );\n  }\n}\n\nexport default ConsoleMenu;\n"],"mappings":"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"}

package/dist/ConsoleStatusBar.css

@@ -1,14 +1,15 @@
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
 .console-pane-status-bar {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  justify-content: flex-end;
   flex-grow: 0;
   width: 100%;
   font-size: small;
   text-align: right;
   color: var(--dh-color-gray-600);
 }
-.console-pane-status-bar div {
-  display: inline-block;
-}
 
 .console-pane-status-details {
   text-align: left;
@@ -24,6 +25,7 @@
   height: 9px;
   position: relative;
   width: 9px;
+  top: -1px;
 }
 .console-status-icon::before {
   border-radius: 50%;

package/dist/ConsoleStatusBar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/ConsoleStatusBar.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACKA;EACE;EACA;EACA;EACA;EACA,OCKS;;ADHT;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE,cC/BO;;;ADoCT;EACE,cCrCO;EDsCP,YCtCO;;;AD2CT;EACE,cCvDE","file":"ConsoleStatusBar.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 '@deephaven/components/scss/custom.scss';\n$console-pane-status-color: $gray-400;\n$console-pane-status-icon-connected-color: $gray-400;\n$console-pane-status-icon-disconnected-color: $red;\n\n.console-pane-status-bar {\n  flex-grow: 0;\n  width: 100%;\n  font-size: small;\n  text-align: right;\n  color: $console-pane-status-color;\n\n  div {\n    display: inline-block;\n  }\n}\n\n.console-pane-status-details {\n  text-align: left;\n  max-width: 400px;\n  max-height: 80vh;\n  overflow: auto;\n\n  dd {\n    white-space: pre-line;\n  }\n}\n\n.console-status-icon {\n  height: 9px;\n  position: relative;\n  width: 9px;\n  &::before {\n    border-radius: 50%;\n    border-style: solid;\n    border-width: 2px;\n    content: '';\n    display: block;\n    height: 100%;\n    position: absolute;\n    width: 100%;\n  }\n}\n\n.console-status-icon-idle {\n  &::before {\n    border-color: $console-pane-status-icon-connected-color;\n  }\n}\n\n.console-status-icon-pending {\n  &::before {\n    border-color: $console-pane-status-icon-connected-color;\n    background: $console-pane-status-icon-connected-color;\n  }\n}\n\n.console-status-icon-disconnected {\n  &::before {\n    border-color: $console-pane-status-icon-disconnected-color;\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":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/ConsoleStatusBar.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OCCS;;;ADEX;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE,cChCO;;;ADqCT;EACE,cCtCO;EDuCP,YCvCO;;;AD4CT;EACE,cCxDE","file":"ConsoleStatusBar.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 '@deephaven/components/scss/custom.scss';\n$console-pane-status-color: $gray-400;\n$console-pane-status-icon-connected-color: $gray-400;\n$console-pane-status-icon-disconnected-color: $red;\n\n.console-pane-status-bar {\n  display: flex;\n  gap: 3px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-grow: 0;\n  width: 100%;\n  font-size: small;\n  text-align: right;\n  color: $console-pane-status-color;\n}\n\n.console-pane-status-details {\n  text-align: left;\n  max-width: 400px;\n  max-height: 80vh;\n  overflow: auto;\n\n  dd {\n    white-space: pre-line;\n  }\n}\n\n.console-status-icon {\n  height: 9px;\n  position: relative;\n  width: 9px;\n  top: -1px; // Looks better next to a capital letter\n  &::before {\n    border-radius: 50%;\n    border-style: solid;\n    border-width: 2px;\n    content: '';\n    display: block;\n    height: 100%;\n    position: absolute;\n    width: 100%;\n  }\n}\n\n.console-status-icon-idle {\n  &::before {\n    border-color: $console-pane-status-icon-connected-color;\n  }\n}\n\n.console-status-icon-pending {\n  &::before {\n    border-color: $console-pane-status-icon-connected-color;\n    background: $console-pane-status-icon-connected-color;\n  }\n}\n\n.console-status-icon-disconnected {\n  &::before {\n    border-color: $console-pane-status-icon-disconnected-color;\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/HeapUsage.css

@@ -3,7 +3,7 @@
   position: relative;
   color: var(--dh-color-gray-700);
   background-color: var(--dh-color-gray-75);
-  border: var(--dh-color-black, #1a171a);
+  border: 1px solid var(--dh-color-bg);
   width: 4.25rem;
   vertical-align: middle;
   text-align: center;

package/dist/HeapUsage.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/HeapUsage.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA,OCUS;EDTT,kBCkBS;EDjBT,QCkBM;EDjBN;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE,kBCHS;;;ADMX;EACE,kBCXS;;;ADcX;EACE,kBC3BI;;;AD8BN;EACE,SE/BS;EFgCT;;;AAGF;EACE;EACA,OCPW;EDQX,SEtCS;EFuCT;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA,eEjDS;;;AFoDX;EACE,YErDS;EFsDT,OC3CS","file":"HeapUsage.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 '@deephaven/components/scss/custom.scss';\n\n.max-memory {\n  position: relative;\n  color: $gray-300;\n  background-color: $gray-900;\n  border: $black;\n  width: 4.25rem;\n  vertical-align: middle;\n  text-align: center;\n  user-select: none;\n  z-index: 1;\n}\n\n.total-memory,\n.used-memory {\n  position: absolute;\n  inset: 0;\n  margin: 1px;\n  z-index: -1;\n}\n\n.total-memory {\n  background-color: $gray-700;\n}\n\n.used-memory {\n  background-color: $gray-500;\n}\n\n.heap-overflow {\n  background-color: $red;\n}\n\n.heap-tooltip {\n  padding: $spacer-1;\n  width: 200px;\n}\n\n.heap-usage-info-row {\n  display: flex;\n  color: $foreground;\n  padding: $spacer-1;\n  justify-content: space-between;\n}\n\n.heap-plot {\n  display: flex;\n  align-items: center;\n}\n\n.heading-bottom-border {\n  border-bottom: 1px solid $gray-900;\n  margin-bottom: $spacer-1;\n}\n\n.heap-utilisation-text {\n  margin-top: $spacer-1;\n  color: $gray-400;\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","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n@function hsla-opacity($semantic-name, $i: 100) {\n  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));\n}\n\n@function accent-opacity($i: 100) {\n  @return hsla-opacity('accent', $i);\n}\n\n@function background-opacity($i: 100) {\n  @return hsla-opacity('bg', $i);\n}\n\n@function foreground-opacity($i: 100) {\n  @return hsla-opacity('fg', $i);\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/HeapUsage.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA,OCUS;EDTT,kBCkBS;EDjBT;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE,kBCHS;;;ADMX;EACE,kBCXS;;;ADcX;EACE,kBC3BI;;;AD8BN;EACE,SE/BS;EFgCT;;;AAGF;EACE;EACA,OCPW;EDQX,SEtCS;EFuCT;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA,eEjDS;;;AFoDX;EACE,YErDS;EFsDT,OC3CS","file":"HeapUsage.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 '@deephaven/components/scss/custom.scss';\n\n.max-memory {\n  position: relative;\n  color: $gray-300;\n  background-color: $gray-900;\n  border: 1px solid $background;\n  width: 4.25rem;\n  vertical-align: middle;\n  text-align: center;\n  user-select: none;\n  z-index: 1;\n}\n\n.total-memory,\n.used-memory {\n  position: absolute;\n  inset: 0;\n  margin: 1px;\n  z-index: -1;\n}\n\n.total-memory {\n  background-color: $gray-700;\n}\n\n.used-memory {\n  background-color: $gray-500;\n}\n\n.heap-overflow {\n  background-color: $red;\n}\n\n.heap-tooltip {\n  padding: $spacer-1;\n  width: 200px;\n}\n\n.heap-usage-info-row {\n  display: flex;\n  color: $foreground;\n  padding: $spacer-1;\n  justify-content: space-between;\n}\n\n.heap-plot {\n  display: flex;\n  align-items: center;\n}\n\n.heading-bottom-border {\n  border-bottom: 1px solid $gray-900;\n  margin-bottom: $spacer-1;\n}\n\n.heap-utilisation-text {\n  margin-top: $spacer-1;\n  color: $gray-400;\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","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n@function hsla-opacity($semantic-name, $i: 100) {\n  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));\n}\n\n@function accent-opacity($i: 100) {\n  @return hsla-opacity('accent', $i);\n}\n\n@function background-opacity($i: 100) {\n  @return hsla-opacity('bg', $i);\n}\n\n@function foreground-opacity($i: 100) {\n  @return hsla-opacity('fg', $i);\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}

package/dist/HeapUsage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeapUsage.d.ts","sourceRoot":"","sources":["../src/HeapUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,OAAO,kBAAkB,CAAC;AAI1B,UAAU,cAAc;IACtB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAAC,EACjB,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,YAAmB,EACnB,eAAe,GAChB,EAAE,cAAc,GAAG,YAAY,CAyK/B;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"HeapUsage.d.ts","sourceRoot":"","sources":["../src/HeapUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,OAAO,kBAAkB,CAAC;AAI1B,UAAU,cAAc;IACtB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAAC,EACjB,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,YAAmB,EACnB,eAAe,GAChB,EAAE,cAAc,GAAG,YAAY,CAuK/B;AAED,eAAe,SAAS,CAAC"}

package/dist/HeapUsage.js

@@ -9,7 +9,6 @@ import { useAsyncInterval } from '@deephaven/react-hooks';
 import "./HeapUsage.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var log = Log.module('HeapUsage');
 function HeapUsage(_ref) {
   var _timestamps2;
@@ -92,25 +91,23 @@ function HeapUsage(_ref) {
   var lastTimestamp = (_timestamps2 = timestamps[timestamps.length - 1]) !== null && _timestamps2 !== void 0 ? _timestamps2 : 0;
   var totalPercentage = totalHeapSize / maximumHeapSize;
   var usedPercentage = (totalHeapSize - freeMemory) / maximumHeapSize;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: "max-memory",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "total-memory",
-        style: {
-          width: "calc(".concat(totalPercentage * 100, "% - ").concat(totalPercentage * 2, "px")
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        className: classNames('used-memory', {
-          'heap-overflow': (totalHeapSize - freeMemory) / maximumHeapSize > 0.95
-        }),
-        style: {
-          width: "calc(".concat(usedPercentage * 100, "% - ").concat(usedPercentage * 2, "px")
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "memory-text",
-        children: [maxHeapGB.toFixed(1), " GB"]
-      })]
+  return /*#__PURE__*/_jsxs("div", {
+    className: "max-memory",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "total-memory",
+      style: {
+        width: "calc(".concat(totalPercentage * 100, "% - ").concat(totalPercentage * 2, "px")
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames('used-memory', {
+        'heap-overflow': (totalHeapSize - freeMemory) / maximumHeapSize > 0.95
+      }),
+      style: {
+        width: "calc(".concat(usedPercentage * 100, "% - ").concat(usedPercentage * 2, "px")
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "memory-text",
+      children: [maxHeapGB.toFixed(1), " GB"]
     }), /*#__PURE__*/_jsx(Tooltip, {
       onEntered: () => setIsOpen(true),
       onExited: () => setIsOpen(false),