@deephaven/iris-grid 0.54.1-ui.1 → 0.55.1-alpha-theming-bootstrap.77

package/dist/sidebar/aggregations/AggregationEdit.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../src/sidebar/aggregations/AggregationEdit.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;EACA;EACA;;AAEA;EACE,kBCYO;EDXP;;AAEE;EACE,aEdG;EFeH,gBEfG;;AFiBH;EACE;;AAGJ;EACE;;AAIJ;EACE,OCTK;;ADWL;EACE,OCpBS;;ADwBf;EACE;;AAEA;EACE;;AAEA;EACE,cEzCG;EF0CH,eE1CG;EF2CH;;AAGE;EACE,kBC5BD;ED6BC,OCtCK;;AD0CT;EACE;EACA;;AAEA;EACE;EACA,cE1DD;EF2DC,eE3DD;EF4DC;EACA,eCgEI;ED/DJ,eE9DD;EF+DC;;AAGF;AAAA;EAEE,kBArEY;EAsEZ,OC3DK","file":"AggregationEdit.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$item-list-selected-bg: rgba($primary, 0.4);\n$item-list-selected-color: $white;\n$item-list-hover-bg: $gray-500;\n$item-list-selected-hover-bg: $primary;\n\n.aggregation-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .top-menu {\n    background-color: $gray-800;\n    padding: 0 $spacer-2;\n    .form-inline {\n      .custom-control {\n        padding-top: $spacer-2;\n        padding-bottom: $spacer-2;\n\n        label {\n          justify-content: left;\n        }\n      }\n      .spacer {\n        flex-grow: 1;\n      }\n    }\n\n    .btn-link-icon {\n      color: $gray-400;\n\n      &.active {\n        color: $foreground;\n      }\n    }\n  }\n  .aggregation-edit-item-list {\n    flex-grow: 1;\n\n    .item-list-scroll-pane {\n      border: none;\n\n      .item-list-item {\n        padding-left: $spacer-2;\n        padding-right: $spacer-2;\n        display: flex;\n\n        &:hover {\n          label {\n            background-color: $item-list-hover-bg;\n            color: $item-list-selected-color;\n          }\n        }\n\n        .custom-control {\n          flex-grow: 1;\n          display: flex;\n\n          label {\n            padding-top: 1px;\n            padding-left: $spacer-2;\n            padding-right: $spacer-2;\n            flex-grow: 1;\n            border-radius: $border-radius;\n            margin-bottom: $spacer-2;\n            border: $input-border-width solid transparent;\n          }\n\n          &:focus-within label,\n          input[type='checkbox']:active + label {\n            background-color: $item-list-selected-bg;\n            color: $item-list-selected-color;\n          }\n        }\n      }\n    }\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\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//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\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 rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 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\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 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-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//Custom Select\n$custom-select-indicator-color: $gray-400;\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: darken($gray-400, 5%);\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: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\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: rgba($primary, 50%);\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: theme-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","//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$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/sidebar/aggregations/AggregationEdit.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;;AAEA;EACE,kBCaO;EDZP;;AAEE;EACE,aEPG;EFQH,gBERG;;AFUH;EACE;;AAGJ;EACE;;AAIJ;EACE,OCVK;;ADYL;EACE,OCMK;;ADFX;EACE;;AAEA;EACE;;AAEA;EACE,cElCG;EFmCH,eEnCG;EFoCH;;AAGE;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA,cEnDD;EFoDC,eEpDD;EFqDC;EACA,eC+FI;ED9FJ,eEvDD;EFwDC;;AAGF;AAAA;EAEE;EACA","file":"AggregationEdit.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.aggregation-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .top-menu {\n    background-color: $gray-800;\n    padding: 0 $spacer-2;\n    .form-inline {\n      .custom-control {\n        padding-top: $spacer-2;\n        padding-bottom: $spacer-2;\n\n        label {\n          justify-content: left;\n        }\n      }\n      .spacer {\n        flex-grow: 1;\n      }\n    }\n\n    .btn-link-icon {\n      color: $gray-400;\n\n      &.active {\n        color: $foreground;\n      }\n    }\n  }\n  .aggregation-edit-item-list {\n    flex-grow: 1;\n\n    .item-list-scroll-pane {\n      border: none;\n\n      .item-list-item {\n        padding-left: $spacer-2;\n        padding-right: $spacer-2;\n        display: flex;\n\n        &:hover {\n          label {\n            background-color: var(--dh-color-item-list-hover-bg);\n            color: var(--dh-color-item-list-selected-fg);\n          }\n        }\n\n        .custom-control {\n          flex-grow: 1;\n          display: flex;\n\n          label {\n            padding-top: 1px;\n            padding-left: $spacer-2;\n            padding-right: $spacer-2;\n            flex-grow: 1;\n            border-radius: $border-radius;\n            margin-bottom: $spacer-2;\n            border: $input-border-width solid transparent;\n          }\n\n          &:focus-within label,\n          input[type='checkbox']:active + label {\n            background-color: var(--dh-color-item-list-selected-bg);\n            color: var(--dh-color-item-list-selected-fg);\n          }\n        }\n      }\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\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"]}

package/dist/sidebar/aggregations/Aggregations.css

@@ -6,7 +6,7 @@
 }
 .aggregations hr {
   margin: 0.5rem 0.5rem;
-  background-color: #211f22;
+  background-color: var(--dh-color-gray-75);
 }
 .aggregations .form-inline {
   padding: 0.5rem;

package/dist/sidebar/aggregations/Aggregations.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../src/sidebar/aggregations/Aggregations.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;;AAEA;EACE;EACA,kBCkBO;;ADfT;EACE,SEVO;;AFYP;EACE,aEdK;;AFiBP;EACE,cEhBK;;AFiBL;EACE,aEnBG;;AFwBT;EACE;;AACA;EACE;;AAGF;EACE;;AAGE;EACE,aEnCC;;AFwCP;EACE;EACA;;AAEA;EACE,cE9CG","file":"Aggregations.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.aggregations {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  hr {\n    margin: $spacer-2 $spacer-2;\n    background-color: $gray-900;\n  }\n\n  .form-inline {\n    padding: $spacer-2;\n\n    .btn-add {\n      margin-left: $spacer-1;\n    }\n\n    .custom-radio {\n      margin-right: $spacer-3;\n      &:first-of-type {\n        margin-left: $spacer-2;\n      }\n    }\n  }\n\n  .draggable-item-list {\n    flex-grow: 1;\n    .item-list-scroll-pane {\n      border: none;\n    }\n\n    .draggable-item-list-item-content {\n      margin-right: 0;\n\n      .title {\n        span {\n          margin-left: $spacer-2;\n        }\n      }\n    }\n\n    .btn-link-icon {\n      padding: 0 $spacer-2 0;\n      margin: -1px 0 $spacer-1 $spacer-1;\n\n      &:last-child {\n        margin-right: $spacer-1;\n      }\n    }\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\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//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\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 rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 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\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 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-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//Custom Select\n$custom-select-indicator-color: $gray-400;\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: darken($gray-400, 5%);\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: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\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: rgba($primary, 50%);\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: theme-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","//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$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/sidebar/aggregations/Aggregations.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;;AAEA;EACE;EACA,kBCcO;;ADXT;EACE,SERO;;AFUP;EACE,aEZK;;AFeP;EACE,cEdK;;AFeL;EACE,aEjBG;;AFsBT;EACE;;AACA;EACE;;AAGF;EACE;;AAGE;EACE,aEjCC;;AFsCP;EACE;EACA;;AAEA;EACE,cE5CG","file":"Aggregations.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.aggregations {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  hr {\n    margin: $spacer-2 $spacer-2;\n    background-color: $gray-900;\n  }\n\n  .form-inline {\n    padding: $spacer-2;\n\n    .btn-add {\n      margin-left: $spacer-1;\n    }\n\n    .custom-radio {\n      margin-right: $spacer-3;\n      &:first-of-type {\n        margin-left: $spacer-2;\n      }\n    }\n  }\n\n  .draggable-item-list {\n    flex-grow: 1;\n    .item-list-scroll-pane {\n      border: none;\n    }\n\n    .draggable-item-list-item-content {\n      margin-right: 0;\n\n      .title {\n        span {\n          margin-left: $spacer-2;\n        }\n      }\n    }\n\n    .btn-link-icon {\n      padding: 0 $spacer-2 0;\n      margin: -1px 0 $spacer-1 $spacer-1;\n\n      &:last-child {\n        margin-right: $spacer-1;\n      }\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\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"]}

package/dist/sidebar/conditional-formatting/ConditionEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAOL,WAAW,EACX,eAAe,EAQhB,MAAM,8BAA8B,CAAC;AAItC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE;AAmOD,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA0LjE;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAOL,WAAW,EACX,eAAe,EAShB,MAAM,8BAA8B,CAAC;AAItC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE;AAmOD,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAyLjE;AAED,eAAe,eAAe,CAAC"}

package/dist/sidebar/conditional-formatting/ConditionEditor.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { TableUtils } from '@deephaven/jsapi-utils';
 import Log from '@deephaven/log';
+import { Select } from '@deephaven/components';
 import { StringCondition, DateCondition, getLabelForNumberCondition, getLabelForDateCondition, getLabelForStringCondition, NumberCondition, getDefaultConditionForType, getLabelForBooleanCondition, BooleanCondition, CharCondition, getLabelForCharCondition, isDateConditionValid, getDefaultValueForType } from "./ConditionalFormattingUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -165,10 +166,7 @@ function ConditionEditor(props) {
       return booleanConditions;
     }
   }, [selectedColumnType]);
-  var handleConditionChange = useCallback(e => {
-    var {
-      value
-    } = e.target;
+  var handleConditionChange = useCallback(value => {
     log.debug('handleConditionChange', value);
     setCondition(value);
   }, []);
@@ -235,7 +233,7 @@ function ConditionEditor(props) {
   }, [selectedColumnType, selectedCondition, conditionValue, startValue, endValue, handleValueChange, handleStartValueChange, handleEndValueChange]);
   return /*#__PURE__*/_jsxs("div", {
     className: "condition-editor mb-2",
-    children: [/*#__PURE__*/_jsx("select", {
+    children: [/*#__PURE__*/_jsx(Select, {
       value: selectedCondition,
       "data-testid": "condition-select",
       className: "custom-select mb-2",

package/dist/sidebar/conditional-formatting/ConditionEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionEditor.js","names":["useCallback","useEffect","useMemo","useState","TableUtils","Log","StringCondition","DateCondition","getLabelForNumberCondition","getLabelForDateCondition","getLabelForStringCondition","NumberCondition","getDefaultConditionForType","getLabelForBooleanCondition","BooleanCondition","CharCondition","getLabelForCharCondition","isDateConditionValid","getDefaultValueForType","jsx","_jsx","jsxs","_jsxs","log","module","DEFAULT_CALLBACK","undefined","numberConditionOptions","IS_EQUAL","IS_NOT_EQUAL","IS_BETWEEN","GREATER_THAN","GREATER_THAN_OR_EQUAL","LESS_THAN","LESS_THAN_OR_EQUAL","IS_NULL","IS_NOT_NULL","map","option","value","children","stringConditions","IS_EXACTLY","IS_NOT_EXACTLY","CONTAINS","DOES_NOT_CONTAIN","STARTS_WITH","ENDS_WITH","dateConditions","IS_BEFORE","IS_BEFORE_OR_EQUAL","IS_AFTER","IS_AFTER_OR_EQUAL","booleanConditions","IS_TRUE","IS_FALSE","charConditions","isNumberConditionValid","condition","startValue","endValue","Number","isNaN","parseFloat","getNumberInputs","selectedCondition","handleValueChange","handleStartValueChange","handleEndValueChange","conditionValue","type","className","placeholder","onChange","getStringInputs","getDateInputs","getBooleanInputs","getCharInputs","maxLength","ConditionEditor","props","column","config","dh","selectedColumnType","prevColumnType","setPrevColumnType","setCondition","setValue","setStartValue","start","setEndValue","end","conditions","isNumberType","isCharType","isStringType","isDateType","isBooleanType","handleConditionChange","e","target","debug","changeCondition","isValid","conditionInputs"],"sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { TableUtils } from '@deephaven/jsapi-utils';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport Log from '@deephaven/log';\nimport {\n  StringCondition,\n  DateCondition,\n  getLabelForNumberCondition,\n  getLabelForDateCondition,\n  getLabelForStringCondition,\n  NumberCondition,\n  ModelColumn,\n  ConditionConfig,\n  getDefaultConditionForType,\n  getLabelForBooleanCondition,\n  BooleanCondition,\n  CharCondition,\n  getLabelForCharCondition,\n  isDateConditionValid,\n  getDefaultValueForType,\n} from './ConditionalFormattingUtils';\n\nconst log = Log.module('ConditionEditor');\n\nexport interface ConditionEditorProps {\n  dh: DhType;\n  column: ModelColumn;\n  config: ConditionConfig;\n  onChange?: (config: ConditionConfig, isValid: boolean) => void;\n}\n\nconst DEFAULT_CALLBACK = (): void => undefined;\n\nconst numberConditionOptions = [\n  NumberCondition.IS_EQUAL,\n  NumberCondition.IS_NOT_EQUAL,\n  NumberCondition.IS_BETWEEN,\n  NumberCondition.GREATER_THAN,\n  NumberCondition.GREATER_THAN_OR_EQUAL,\n  NumberCondition.LESS_THAN,\n  NumberCondition.LESS_THAN_OR_EQUAL,\n  NumberCondition.IS_NULL,\n  NumberCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForNumberCondition(option)}\n  </option>\n));\n\nconst stringConditions = [\n  StringCondition.IS_EXACTLY,\n  StringCondition.IS_NOT_EXACTLY,\n  StringCondition.CONTAINS,\n  StringCondition.DOES_NOT_CONTAIN,\n  StringCondition.STARTS_WITH,\n  StringCondition.ENDS_WITH,\n  StringCondition.IS_NULL,\n  StringCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForStringCondition(option)}\n  </option>\n));\n\nconst dateConditions = [\n  DateCondition.IS_EXACTLY,\n  DateCondition.IS_NOT_EXACTLY,\n  DateCondition.IS_BEFORE,\n  DateCondition.IS_BEFORE_OR_EQUAL,\n  DateCondition.IS_AFTER,\n  DateCondition.IS_AFTER_OR_EQUAL,\n  DateCondition.IS_NULL,\n  DateCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForDateCondition(option)}\n  </option>\n));\n\nconst booleanConditions = [\n  BooleanCondition.IS_TRUE,\n  BooleanCondition.IS_FALSE,\n  BooleanCondition.IS_NULL,\n  BooleanCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForBooleanCondition(option)}\n  </option>\n));\n\nconst charConditions = [\n  CharCondition.IS_EQUAL,\n  CharCondition.IS_NOT_EQUAL,\n  CharCondition.IS_NULL,\n  CharCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForCharCondition(option)}\n  </option>\n));\n\nfunction isNumberConditionValid(\n  condition: NumberCondition,\n  value?: string,\n  startValue?: string,\n  endValue?: string\n): boolean {\n  if (\n    condition === NumberCondition.IS_NULL ||\n    condition === NumberCondition.IS_NOT_NULL\n  ) {\n    return true;\n  }\n  if (\n    condition === NumberCondition.IS_BETWEEN &&\n    startValue != null &&\n    startValue !== '' &&\n    !Number.isNaN(Number.parseFloat(startValue)) &&\n    endValue != null &&\n    endValue !== '' &&\n    !Number.isNaN(Number.parseFloat(endValue))\n  ) {\n    return true;\n  }\n  if (\n    condition !== NumberCondition.IS_BETWEEN &&\n    value !== undefined &&\n    value !== '' &&\n    !Number.isNaN(Number.parseFloat(value))\n  ) {\n    return true;\n  }\n  return false;\n}\n\nfunction getNumberInputs(\n  selectedCondition: NumberCondition,\n  handleValueChange: (e: unknown) => void,\n  handleStartValueChange: (e: unknown) => void,\n  handleEndValueChange: (e: unknown) => void,\n  conditionValue?: string,\n  startValue?: string,\n  endValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case NumberCondition.IS_EQUAL:\n    case NumberCondition.IS_NOT_EQUAL:\n    case NumberCondition.GREATER_THAN:\n    case NumberCondition.GREATER_THAN_OR_EQUAL:\n    case NumberCondition.LESS_THAN:\n    case NumberCondition.LESS_THAN_OR_EQUAL:\n      return (\n        <input\n          type=\"number\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n    case NumberCondition.IS_BETWEEN:\n      return (\n        <div className=\"d-flex flex-row\">\n          <input\n            type=\"number\"\n            className=\"form-control d-flex mr-2\"\n            placeholder=\"Start value\"\n            value={startValue ?? ''}\n            onChange={handleStartValueChange}\n          />\n          <input\n            type=\"number\"\n            className=\"form-control d-flex\"\n            placeholder=\"End value\"\n            value={endValue ?? ''}\n            onChange={handleEndValueChange}\n          />\n        </div>\n      );\n    case NumberCondition.IS_NULL:\n    case NumberCondition.IS_NOT_NULL:\n      return null;\n  }\n}\n\nfunction getStringInputs(\n  selectedCondition: StringCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case StringCondition.IS_NULL:\n    case StringCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction getDateInputs(\n  selectedCondition: DateCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case DateCondition.IS_NULL:\n    case DateCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction getBooleanInputs(): null {\n  return null;\n}\n\nfunction getCharInputs(\n  selectedCondition: CharCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case CharCondition.IS_NULL:\n    case CharCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          maxLength={1}\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction ConditionEditor(props: ConditionEditorProps): JSX.Element {\n  const { column, config, dh, onChange = DEFAULT_CALLBACK } = props;\n  const selectedColumnType = column.type;\n  const [prevColumnType, setPrevColumnType] = useState(selectedColumnType);\n  const [selectedCondition, setCondition] = useState(config.condition);\n  const [conditionValue, setValue] = useState(config.value);\n  const [startValue, setStartValue] = useState(config.start);\n  const [endValue, setEndValue] = useState(config.end);\n\n  if (selectedColumnType !== prevColumnType) {\n    // Column type changed, reset condition and value fields\n    setCondition(getDefaultConditionForType(selectedColumnType));\n    setValue(getDefaultValueForType(selectedColumnType));\n    setStartValue(undefined);\n    setEndValue(undefined);\n    setPrevColumnType(selectedColumnType);\n  }\n\n  const conditions = useMemo(() => {\n    if (selectedColumnType === undefined) {\n      return [];\n    }\n    if (TableUtils.isNumberType(selectedColumnType)) {\n      return numberConditionOptions;\n    }\n    if (TableUtils.isCharType(selectedColumnType)) {\n      return charConditions;\n    }\n    if (TableUtils.isStringType(selectedColumnType)) {\n      return stringConditions;\n    }\n    if (TableUtils.isDateType(selectedColumnType)) {\n      return dateConditions;\n    }\n    if (TableUtils.isBooleanType(selectedColumnType)) {\n      return booleanConditions;\n    }\n  }, [selectedColumnType]);\n\n  const handleConditionChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleConditionChange', value);\n    setCondition(value);\n  }, []);\n\n  const handleValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleValueChange', value);\n    setValue(value);\n  }, []);\n\n  const handleStartValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleStartValueChange', value);\n    setStartValue(value);\n  }, []);\n\n  const handleEndValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleEndValueChange', value);\n    setEndValue(value);\n  }, []);\n\n  useEffect(\n    function changeCondition() {\n      let isValid = true;\n\n      if (selectedCondition === undefined) {\n        log.debug(\n          'Unable to create formatting rule. Condition is not selected.'\n        );\n        isValid = false;\n      } else if (\n        TableUtils.isNumberType(column.type) &&\n        !isNumberConditionValid(\n          selectedCondition as NumberCondition,\n          conditionValue,\n          startValue,\n          endValue\n        )\n      ) {\n        log.debug(\n          'Unable to create formatting rule. Invalid value',\n          conditionValue\n        );\n        isValid = false;\n      } else if (\n        TableUtils.isDateType(column.type) &&\n        !isDateConditionValid(\n          dh,\n          selectedCondition as DateCondition,\n          conditionValue\n        )\n      ) {\n        log.debug(\n          'Unable to create formatting rule. Invalid date condition',\n          conditionValue\n        );\n        isValid = false;\n      }\n\n      onChange(\n        {\n          condition: selectedCondition,\n          value: conditionValue,\n          start: startValue,\n          end: endValue,\n        },\n        isValid\n      );\n    },\n    [\n      onChange,\n      column.type,\n      dh,\n      selectedCondition,\n      conditionValue,\n      startValue,\n      endValue,\n    ]\n  );\n\n  const conditionInputs = useMemo(() => {\n    if (selectedColumnType === undefined) {\n      // Column not selected\n      return null;\n    }\n    if (TableUtils.isNumberType(selectedColumnType)) {\n      return getNumberInputs(\n        selectedCondition as NumberCondition,\n        handleValueChange,\n        handleStartValueChange,\n        handleEndValueChange,\n        conditionValue,\n        startValue,\n        endValue\n      );\n    }\n    if (TableUtils.isCharType(selectedColumnType)) {\n      return getCharInputs(\n        selectedCondition as CharCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isStringType(selectedColumnType)) {\n      return getStringInputs(\n        selectedCondition as StringCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isDateType(selectedColumnType)) {\n      return getDateInputs(\n        selectedCondition as DateCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isBooleanType(selectedColumnType)) {\n      return getBooleanInputs();\n    }\n  }, [\n    selectedColumnType,\n    selectedCondition,\n    conditionValue,\n    startValue,\n    endValue,\n    handleValueChange,\n    handleStartValueChange,\n    handleEndValueChange,\n  ]);\n\n  return (\n    <div className=\"condition-editor mb-2\">\n      <select\n        value={selectedCondition}\n        data-testid=\"condition-select\"\n        className=\"custom-select mb-2\"\n        onChange={handleConditionChange}\n      >\n        {conditions}\n      </select>\n      {conditionInputs}\n    </div>\n  );\n}\n\nexport default ConditionEditor;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACjE,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,OAAOC,GAAG,MAAM,gBAAgB;AAAC,SAE/BC,eAAe,EACfC,aAAa,EACbC,0BAA0B,EAC1BC,wBAAwB,EACxBC,0BAA0B,EAC1BC,eAAe,EAGfC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,gBAAgB,EAChBC,aAAa,EACbC,wBAAwB,EACxBC,oBAAoB,EACpBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGxB,IAAMC,GAAG,GAAGlB,GAAG,CAACmB,MAAM,CAAC,iBAAiB,CAAC;AASzC,IAAMC,gBAAgB,GAAGA,CAAA,KAAYC,SAAS;AAE9C,IAAMC,sBAAsB,GAAG,CAC7BhB,eAAe,CAACiB,QAAQ,EACxBjB,eAAe,CAACkB,YAAY,EAC5BlB,eAAe,CAACmB,UAAU,EAC1BnB,eAAe,CAACoB,YAAY,EAC5BpB,eAAe,CAACqB,qBAAqB,EACrCrB,eAAe,CAACsB,SAAS,EACzBtB,eAAe,CAACuB,kBAAkB,EAClCvB,eAAe,CAACwB,OAAO,EACvBxB,eAAe,CAACyB,WAAW,CAC5B,CAACC,GAAG,CAACC,MAAM,iBACVlB,IAAA;EAAqBmB,KAAK,EAAED,MAAO;EAAAE,QAAA,EAChChC,0BAA0B,CAAC8B,MAAM;AAAC,GADxBA,MAEL,CACT,CAAC;AAEF,IAAMG,gBAAgB,GAAG,CACvBnC,eAAe,CAACoC,UAAU,EAC1BpC,eAAe,CAACqC,cAAc,EAC9BrC,eAAe,CAACsC,QAAQ,EACxBtC,eAAe,CAACuC,gBAAgB,EAChCvC,eAAe,CAACwC,WAAW,EAC3BxC,eAAe,CAACyC,SAAS,EACzBzC,eAAe,CAAC6B,OAAO,EACvB7B,eAAe,CAAC8B,WAAW,CAC5B,CAACC,GAAG,CAACC,MAAM,iBACVlB,IAAA;EAAqBmB,KAAK,EAAED,MAAO;EAAAE,QAAA,EAChC9B,0BAA0B,CAAC4B,MAAM;AAAC,GADxBA,MAEL,CACT,CAAC;AAEF,IAAMU,cAAc,GAAG,CACrBzC,aAAa,CAACmC,UAAU,EACxBnC,aAAa,CAACoC,cAAc,EAC5BpC,aAAa,CAAC0C,SAAS,EACvB1C,aAAa,CAAC2C,kBAAkB,EAChC3C,aAAa,CAAC4C,QAAQ,EACtB5C,aAAa,CAAC6C,iBAAiB,EAC/B7C,aAAa,CAAC4B,OAAO,EACrB5B,aAAa,CAAC6B,WAAW,CAC1B,CAACC,GAAG,CAACC,MAAM,iBACVlB,IAAA;EAAqBmB,KAAK,EAAED,MAAO;EAAAE,QAAA,EAChC/B,wBAAwB,CAAC6B,MAAM;AAAC,GADtBA,MAEL,CACT,CAAC;AAEF,IAAMe,iBAAiB,GAAG,CACxBvC,gBAAgB,CAACwC,OAAO,EACxBxC,gBAAgB,CAACyC,QAAQ,EACzBzC,gBAAgB,CAACqB,OAAO,EACxBrB,gBAAgB,CAACsB,WAAW,CAC7B,CAACC,GAAG,CAACC,MAAM,iBACVlB,IAAA;EAAqBmB,KAAK,EAAED,MAAO;EAAAE,QAAA,EAChC3B,2BAA2B,CAACyB,MAAM;AAAC,GADzBA,MAEL,CACT,CAAC;AAEF,IAAMkB,cAAc,GAAG,CACrBzC,aAAa,CAACa,QAAQ,EACtBb,aAAa,CAACc,YAAY,EAC1Bd,aAAa,CAACoB,OAAO,EACrBpB,aAAa,CAACqB,WAAW,CAC1B,CAACC,GAAG,CAACC,MAAM,iBACVlB,IAAA;EAAqBmB,KAAK,EAAED,MAAO;EAAAE,QAAA,EAChCxB,wBAAwB,CAACsB,MAAM;AAAC,GADtBA,MAEL,CACT,CAAC;AAEF,SAASmB,sBAAsBA,CAC7BC,SAA0B,EAC1BnB,KAAc,EACdoB,UAAmB,EACnBC,QAAiB,EACR;EACT,IACEF,SAAS,KAAK/C,eAAe,CAACwB,OAAO,IACrCuB,SAAS,KAAK/C,eAAe,CAACyB,WAAW,EACzC;IACA,OAAO,IAAI;EACb;EACA,IACEsB,SAAS,KAAK/C,eAAe,CAACmB,UAAU,IACxC6B,UAAU,IAAI,IAAI,IAClBA,UAAU,KAAK,EAAE,IACjB,CAACE,MAAM,CAACC,KAAK,CAACD,MAAM,CAACE,UAAU,CAACJ,UAAU,CAAC,CAAC,IAC5CC,QAAQ,IAAI,IAAI,IAChBA,QAAQ,KAAK,EAAE,IACf,CAACC,MAAM,CAACC,KAAK,CAACD,MAAM,CAACE,UAAU,CAACH,QAAQ,CAAC,CAAC,EAC1C;IACA,OAAO,IAAI;EACb;EACA,IACEF,SAAS,KAAK/C,eAAe,CAACmB,UAAU,IACxCS,KAAK,KAAKb,SAAS,IACnBa,KAAK,KAAK,EAAE,IACZ,CAACsB,MAAM,CAACC,KAAK,CAACD,MAAM,CAACE,UAAU,CAACxB,KAAK,CAAC,CAAC,EACvC;IACA,OAAO,IAAI;EACb;EACA,OAAO,KAAK;AACd;AAEA,SAASyB,eAAeA,CACtBC,iBAAkC,EAClCC,iBAAuC,EACvCC,sBAA4C,EAC5CC,oBAA0C,EAC1CC,cAAuB,EACvBV,UAAmB,EACnBC,QAAiB,EACG;EACpB,QAAQK,iBAAiB;IACvB,KAAKtD,eAAe,CAACiB,QAAQ;IAC7B,KAAKjB,eAAe,CAACkB,YAAY;IACjC,KAAKlB,eAAe,CAACoB,YAAY;IACjC,KAAKpB,eAAe,CAACqB,qBAAqB;IAC1C,KAAKrB,eAAe,CAACsB,SAAS;IAC9B,KAAKtB,eAAe,CAACuB,kBAAkB;MACrC,oBACEd,IAAA;QACEkD,IAAI,EAAC,QAAQ;QACbC,SAAS,EAAC,cAAc;QACxBC,WAAW,EAAC,aAAa;QACzBjC,KAAK,EAAE8B,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG;QAC5BI,QAAQ,EAAEP;MAAkB,CAC7B,CAAC;IAEN,KAAKvD,eAAe,CAACmB,UAAU;MAC7B,oBACER,KAAA;QAAKiD,SAAS,EAAC,iBAAiB;QAAA/B,QAAA,gBAC9BpB,IAAA;UACEkD,IAAI,EAAC,QAAQ;UACbC,SAAS,EAAC,0BAA0B;UACpCC,WAAW,EAAC,aAAa;UACzBjC,KAAK,EAAEoB,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAG;UACxBc,QAAQ,EAAEN;QAAuB,CAClC,CAAC,eACF/C,IAAA;UACEkD,IAAI,EAAC,QAAQ;UACbC,SAAS,EAAC,qBAAqB;UAC/BC,WAAW,EAAC,WAAW;UACvBjC,KAAK,EAAEqB,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAG;UACtBa,QAAQ,EAAEL;QAAqB,CAChC,CAAC;MAAA,CACC,CAAC;IAEV,KAAKzD,eAAe,CAACwB,OAAO;IAC5B,KAAKxB,eAAe,CAACyB,WAAW;MAC9B,OAAO,IAAI;EACf;AACF;AAEA,SAASsC,eAAeA,CACtBT,iBAAkC,EAClCC,iBAAuC,EACvCG,cAAuB,EACH;EACpB,QAAQJ,iBAAiB;IACvB,KAAK3D,eAAe,CAAC6B,OAAO;IAC5B,KAAK7B,eAAe,CAAC8B,WAAW;MAC9B,OAAO,IAAI;IACb;MACE,oBACEhB,IAAA;QACEkD,IAAI,EAAC,MAAM;QACXC,SAAS,EAAC,cAAc;QACxBC,WAAW,EAAC,aAAa;QACzBjC,KAAK,EAAE8B,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG;QAC5BI,QAAQ,EAAEP;MAAkB,CAC7B,CAAC;EAER;AACF;AAEA,SAASS,aAAaA,CACpBV,iBAAgC,EAChCC,iBAAuC,EACvCG,cAAuB,EACH;EACpB,QAAQJ,iBAAiB;IACvB,KAAK1D,aAAa,CAAC4B,OAAO;IAC1B,KAAK5B,aAAa,CAAC6B,WAAW;MAC5B,OAAO,IAAI;IACb;MACE,oBACEhB,IAAA;QACEkD,IAAI,EAAC,MAAM;QACXC,SAAS,EAAC,cAAc;QACxBC,WAAW,EAAC,aAAa;QACzBjC,KAAK,EAAE8B,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG;QAC5BI,QAAQ,EAAEP;MAAkB,CAC7B,CAAC;EAER;AACF;AAEA,SAASU,gBAAgBA,CAAA,EAAS;EAChC,OAAO,IAAI;AACb;AAEA,SAASC,aAAaA,CACpBZ,iBAAgC,EAChCC,iBAAuC,EACvCG,cAAuB,EACH;EACpB,QAAQJ,iBAAiB;IACvB,KAAKlD,aAAa,CAACoB,OAAO;IAC1B,KAAKpB,aAAa,CAACqB,WAAW;MAC5B,OAAO,IAAI;IACb;MACE,oBACEhB,IAAA;QACEkD,IAAI,EAAC,MAAM;QACXC,SAAS,EAAC,cAAc;QACxBO,SAAS,EAAE,CAAE;QACbN,WAAW,EAAC,aAAa;QACzBjC,KAAK,EAAE8B,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG;QAC5BI,QAAQ,EAAEP;MAAkB,CAC7B,CAAC;EAER;AACF;AAEA,SAASa,eAAeA,CAACC,KAA2B,EAAe;EACjE,IAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,EAAE;IAAEV,QAAQ,GAAGhD;EAAiB,CAAC,GAAGuD,KAAK;EACjE,IAAMI,kBAAkB,GAAGH,MAAM,CAACX,IAAI;EACtC,IAAM,CAACe,cAAc,EAAEC,iBAAiB,CAAC,GAAGnF,QAAQ,CAACiF,kBAAkB,CAAC;EACxE,IAAM,CAACnB,iBAAiB,EAAEsB,YAAY,CAAC,GAAGpF,QAAQ,CAAC+E,MAAM,CAACxB,SAAS,CAAC;EACpE,IAAM,CAACW,cAAc,EAAEmB,QAAQ,CAAC,GAAGrF,QAAQ,CAAC+E,MAAM,CAAC3C,KAAK,CAAC;EACzD,IAAM,CAACoB,UAAU,EAAE8B,aAAa,CAAC,GAAGtF,QAAQ,CAAC+E,MAAM,CAACQ,KAAK,CAAC;EAC1D,IAAM,CAAC9B,QAAQ,EAAE+B,WAAW,CAAC,GAAGxF,QAAQ,CAAC+E,MAAM,CAACU,GAAG,CAAC;EAEpD,IAAIR,kBAAkB,KAAKC,cAAc,EAAE;IACzC;IACAE,YAAY,CAAC3E,0BAA0B,CAACwE,kBAAkB,CAAC,CAAC;IAC5DI,QAAQ,CAACtE,sBAAsB,CAACkE,kBAAkB,CAAC,CAAC;IACpDK,aAAa,CAAC/D,SAAS,CAAC;IACxBiE,WAAW,CAACjE,SAAS,CAAC;IACtB4D,iBAAiB,CAACF,kBAAkB,CAAC;EACvC;EAEA,IAAMS,UAAU,GAAG3F,OAAO,CAAC,MAAM;IAC/B,IAAIkF,kBAAkB,KAAK1D,SAAS,EAAE;MACpC,OAAO,EAAE;IACX;IACA,IAAItB,UAAU,CAAC0F,YAAY,CAACV,kBAAkB,CAAC,EAAE;MAC/C,OAAOzD,sBAAsB;IAC/B;IACA,IAAIvB,UAAU,CAAC2F,UAAU,CAACX,kBAAkB,CAAC,EAAE;MAC7C,OAAO5B,cAAc;IACvB;IACA,IAAIpD,UAAU,CAAC4F,YAAY,CAACZ,kBAAkB,CAAC,EAAE;MAC/C,OAAO3C,gBAAgB;IACzB;IACA,IAAIrC,UAAU,CAAC6F,UAAU,CAACb,kBAAkB,CAAC,EAAE;MAC7C,OAAOpC,cAAc;IACvB;IACA,IAAI5C,UAAU,CAAC8F,aAAa,CAACd,kBAAkB,CAAC,EAAE;MAChD,OAAO/B,iBAAiB;IAC1B;EACF,CAAC,EAAE,CAAC+B,kBAAkB,CAAC,CAAC;EAExB,IAAMe,qBAAqB,GAAGnG,WAAW,CAACoG,CAAC,IAAI;IAC7C,IAAM;MAAE7D;IAAM,CAAC,GAAG6D,CAAC,CAACC,MAAM;IAC1B9E,GAAG,CAAC+E,KAAK,CAAC,uBAAuB,EAAE/D,KAAK,CAAC;IACzCgD,YAAY,CAAChD,KAAK,CAAC;EACrB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAM2B,iBAAiB,GAAGlE,WAAW,CAACoG,CAAC,IAAI;IACzC,IAAM;MAAE7D;IAAM,CAAC,GAAG6D,CAAC,CAACC,MAAM;IAC1B9E,GAAG,CAAC+E,KAAK,CAAC,mBAAmB,EAAE/D,KAAK,CAAC;IACrCiD,QAAQ,CAACjD,KAAK,CAAC;EACjB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAM4B,sBAAsB,GAAGnE,WAAW,CAACoG,CAAC,IAAI;IAC9C,IAAM;MAAE7D;IAAM,CAAC,GAAG6D,CAAC,CAACC,MAAM;IAC1B9E,GAAG,CAAC+E,KAAK,CAAC,wBAAwB,EAAE/D,KAAK,CAAC;IAC1CkD,aAAa,CAAClD,KAAK,CAAC;EACtB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAM6B,oBAAoB,GAAGpE,WAAW,CAACoG,CAAC,IAAI;IAC5C,IAAM;MAAE7D;IAAM,CAAC,GAAG6D,CAAC,CAACC,MAAM;IAC1B9E,GAAG,CAAC+E,KAAK,CAAC,sBAAsB,EAAE/D,KAAK,CAAC;IACxCoD,WAAW,CAACpD,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAENtC,SAAS,CACP,SAASsG,eAAeA,CAAA,EAAG;IACzB,IAAIC,OAAO,GAAG,IAAI;IAElB,IAAIvC,iBAAiB,KAAKvC,SAAS,EAAE;MACnCH,GAAG,CAAC+E,KAAK,CACP,8DACF,CAAC;MACDE,OAAO,GAAG,KAAK;IACjB,CAAC,MAAM,IACLpG,UAAU,CAAC0F,YAAY,CAACb,MAAM,CAACX,IAAI,CAAC,IACpC,CAACb,sBAAsB,CACrBQ,iBAAiB,EACjBI,cAAc,EACdV,UAAU,EACVC,QACF,CAAC,EACD;MACArC,GAAG,CAAC+E,KAAK,CACP,iDAAiD,EACjDjC,cACF,CAAC;MACDmC,OAAO,GAAG,KAAK;IACjB,CAAC,MAAM,IACLpG,UAAU,CAAC6F,UAAU,CAAChB,MAAM,CAACX,IAAI,CAAC,IAClC,CAACrD,oBAAoB,CACnBkE,EAAE,EACFlB,iBAAiB,EACjBI,cACF,CAAC,EACD;MACA9C,GAAG,CAAC+E,KAAK,CACP,0DAA0D,EAC1DjC,cACF,CAAC;MACDmC,OAAO,GAAG,KAAK;IACjB;IAEA/B,QAAQ,CACN;MACEf,SAAS,EAAEO,iBAAiB;MAC5B1B,KAAK,EAAE8B,cAAc;MACrBqB,KAAK,EAAE/B,UAAU;MACjBiC,GAAG,EAAEhC;IACP,CAAC,EACD4C,OACF,CAAC;EACH,CAAC,EACD,CACE/B,QAAQ,EACRQ,MAAM,CAACX,IAAI,EACXa,EAAE,EACFlB,iBAAiB,EACjBI,cAAc,EACdV,UAAU,EACVC,QAAQ,CAEZ,CAAC;EAED,IAAM6C,eAAe,GAAGvG,OAAO,CAAC,MAAM;IACpC,IAAIkF,kBAAkB,KAAK1D,SAAS,EAAE;MACpC;MACA,OAAO,IAAI;IACb;IACA,IAAItB,UAAU,CAAC0F,YAAY,CAACV,kBAAkB,CAAC,EAAE;MAC/C,OAAOpB,eAAe,CACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,sBAAsB,EACtBC,oBAAoB,EACpBC,cAAc,EACdV,UAAU,EACVC,QACF,CAAC;IACH;IACA,IAAIxD,UAAU,CAAC2F,UAAU,CAACX,kBAAkB,CAAC,EAAE;MAC7C,OAAOP,aAAa,CAClBZ,iBAAiB,EACjBC,iBAAiB,EACjBG,cACF,CAAC;IACH;IACA,IAAIjE,UAAU,CAAC4F,YAAY,CAACZ,kBAAkB,CAAC,EAAE;MAC/C,OAAOV,eAAe,CACpBT,iBAAiB,EACjBC,iBAAiB,EACjBG,cACF,CAAC;IACH;IACA,IAAIjE,UAAU,CAAC6F,UAAU,CAACb,kBAAkB,CAAC,EAAE;MAC7C,OAAOT,aAAa,CAClBV,iBAAiB,EACjBC,iBAAiB,EACjBG,cACF,CAAC;IACH;IACA,IAAIjE,UAAU,CAAC8F,aAAa,CAACd,kBAAkB,CAAC,EAAE;MAChD,OAAOR,gBAAgB,CAAC,CAAC;IAC3B;EACF,CAAC,EAAE,CACDQ,kBAAkB,EAClBnB,iBAAiB,EACjBI,cAAc,EACdV,UAAU,EACVC,QAAQ,EACRM,iBAAiB,EACjBC,sBAAsB,EACtBC,oBAAoB,CACrB,CAAC;EAEF,oBACE9C,KAAA;IAAKiD,SAAS,EAAC,uBAAuB;IAAA/B,QAAA,gBACpCpB,IAAA;MACEmB,KAAK,EAAE0B,iBAAkB;MACzB,eAAY,kBAAkB;MAC9BM,SAAS,EAAC,oBAAoB;MAC9BE,QAAQ,EAAE0B,qBAAsB;MAAA3D,QAAA,EAE/BqD;IAAU,CACL,CAAC,EACRY,eAAe;EAAA,CACb,CAAC;AAEV;AAEA,eAAe1B,eAAe"}
+{"version":3,"file":"ConditionEditor.js","names":["useCallback","useEffect","useMemo","useState","TableUtils","Log","Select","StringCondition","DateCondition","getLabelForNumberCondition","getLabelForDateCondition","getLabelForStringCondition","NumberCondition","getDefaultConditionForType","getLabelForBooleanCondition","BooleanCondition","CharCondition","getLabelForCharCondition","isDateConditionValid","getDefaultValueForType","jsx","_jsx","jsxs","_jsxs","log","module","DEFAULT_CALLBACK","undefined","numberConditionOptions","IS_EQUAL","IS_NOT_EQUAL","IS_BETWEEN","GREATER_THAN","GREATER_THAN_OR_EQUAL","LESS_THAN","LESS_THAN_OR_EQUAL","IS_NULL","IS_NOT_NULL","map","option","value","children","stringConditions","IS_EXACTLY","IS_NOT_EXACTLY","CONTAINS","DOES_NOT_CONTAIN","STARTS_WITH","ENDS_WITH","dateConditions","IS_BEFORE","IS_BEFORE_OR_EQUAL","IS_AFTER","IS_AFTER_OR_EQUAL","booleanConditions","IS_TRUE","IS_FALSE","charConditions","isNumberConditionValid","condition","startValue","endValue","Number","isNaN","parseFloat","getNumberInputs","selectedCondition","handleValueChange","handleStartValueChange","handleEndValueChange","conditionValue","type","className","placeholder","onChange","getStringInputs","getDateInputs","getBooleanInputs","getCharInputs","maxLength","ConditionEditor","props","column","config","dh","selectedColumnType","prevColumnType","setPrevColumnType","setCondition","setValue","setStartValue","start","setEndValue","end","conditions","isNumberType","isCharType","isStringType","isDateType","isBooleanType","handleConditionChange","debug","e","target","changeCondition","isValid","conditionInputs"],"sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { TableUtils } from '@deephaven/jsapi-utils';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport Log from '@deephaven/log';\nimport { Select } from '@deephaven/components';\nimport {\n  StringCondition,\n  DateCondition,\n  getLabelForNumberCondition,\n  getLabelForDateCondition,\n  getLabelForStringCondition,\n  NumberCondition,\n  ModelColumn,\n  ConditionConfig,\n  getDefaultConditionForType,\n  getLabelForBooleanCondition,\n  BooleanCondition,\n  CharCondition,\n  Condition,\n  getLabelForCharCondition,\n  isDateConditionValid,\n  getDefaultValueForType,\n} from './ConditionalFormattingUtils';\n\nconst log = Log.module('ConditionEditor');\n\nexport interface ConditionEditorProps {\n  dh: DhType;\n  column: ModelColumn;\n  config: ConditionConfig;\n  onChange?: (config: ConditionConfig, isValid: boolean) => void;\n}\n\nconst DEFAULT_CALLBACK = (): void => undefined;\n\nconst numberConditionOptions = [\n  NumberCondition.IS_EQUAL,\n  NumberCondition.IS_NOT_EQUAL,\n  NumberCondition.IS_BETWEEN,\n  NumberCondition.GREATER_THAN,\n  NumberCondition.GREATER_THAN_OR_EQUAL,\n  NumberCondition.LESS_THAN,\n  NumberCondition.LESS_THAN_OR_EQUAL,\n  NumberCondition.IS_NULL,\n  NumberCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForNumberCondition(option)}\n  </option>\n));\n\nconst stringConditions = [\n  StringCondition.IS_EXACTLY,\n  StringCondition.IS_NOT_EXACTLY,\n  StringCondition.CONTAINS,\n  StringCondition.DOES_NOT_CONTAIN,\n  StringCondition.STARTS_WITH,\n  StringCondition.ENDS_WITH,\n  StringCondition.IS_NULL,\n  StringCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForStringCondition(option)}\n  </option>\n));\n\nconst dateConditions = [\n  DateCondition.IS_EXACTLY,\n  DateCondition.IS_NOT_EXACTLY,\n  DateCondition.IS_BEFORE,\n  DateCondition.IS_BEFORE_OR_EQUAL,\n  DateCondition.IS_AFTER,\n  DateCondition.IS_AFTER_OR_EQUAL,\n  DateCondition.IS_NULL,\n  DateCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForDateCondition(option)}\n  </option>\n));\n\nconst booleanConditions = [\n  BooleanCondition.IS_TRUE,\n  BooleanCondition.IS_FALSE,\n  BooleanCondition.IS_NULL,\n  BooleanCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForBooleanCondition(option)}\n  </option>\n));\n\nconst charConditions = [\n  CharCondition.IS_EQUAL,\n  CharCondition.IS_NOT_EQUAL,\n  CharCondition.IS_NULL,\n  CharCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForCharCondition(option)}\n  </option>\n));\n\nfunction isNumberConditionValid(\n  condition: NumberCondition,\n  value?: string,\n  startValue?: string,\n  endValue?: string\n): boolean {\n  if (\n    condition === NumberCondition.IS_NULL ||\n    condition === NumberCondition.IS_NOT_NULL\n  ) {\n    return true;\n  }\n  if (\n    condition === NumberCondition.IS_BETWEEN &&\n    startValue != null &&\n    startValue !== '' &&\n    !Number.isNaN(Number.parseFloat(startValue)) &&\n    endValue != null &&\n    endValue !== '' &&\n    !Number.isNaN(Number.parseFloat(endValue))\n  ) {\n    return true;\n  }\n  if (\n    condition !== NumberCondition.IS_BETWEEN &&\n    value !== undefined &&\n    value !== '' &&\n    !Number.isNaN(Number.parseFloat(value))\n  ) {\n    return true;\n  }\n  return false;\n}\n\nfunction getNumberInputs(\n  selectedCondition: NumberCondition,\n  handleValueChange: (e: unknown) => void,\n  handleStartValueChange: (e: unknown) => void,\n  handleEndValueChange: (e: unknown) => void,\n  conditionValue?: string,\n  startValue?: string,\n  endValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case NumberCondition.IS_EQUAL:\n    case NumberCondition.IS_NOT_EQUAL:\n    case NumberCondition.GREATER_THAN:\n    case NumberCondition.GREATER_THAN_OR_EQUAL:\n    case NumberCondition.LESS_THAN:\n    case NumberCondition.LESS_THAN_OR_EQUAL:\n      return (\n        <input\n          type=\"number\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n    case NumberCondition.IS_BETWEEN:\n      return (\n        <div className=\"d-flex flex-row\">\n          <input\n            type=\"number\"\n            className=\"form-control d-flex mr-2\"\n            placeholder=\"Start value\"\n            value={startValue ?? ''}\n            onChange={handleStartValueChange}\n          />\n          <input\n            type=\"number\"\n            className=\"form-control d-flex\"\n            placeholder=\"End value\"\n            value={endValue ?? ''}\n            onChange={handleEndValueChange}\n          />\n        </div>\n      );\n    case NumberCondition.IS_NULL:\n    case NumberCondition.IS_NOT_NULL:\n      return null;\n  }\n}\n\nfunction getStringInputs(\n  selectedCondition: StringCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case StringCondition.IS_NULL:\n    case StringCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction getDateInputs(\n  selectedCondition: DateCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case DateCondition.IS_NULL:\n    case DateCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction getBooleanInputs(): null {\n  return null;\n}\n\nfunction getCharInputs(\n  selectedCondition: CharCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n): JSX.Element | null {\n  switch (selectedCondition) {\n    case CharCondition.IS_NULL:\n    case CharCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          maxLength={1}\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction ConditionEditor(props: ConditionEditorProps): JSX.Element {\n  const { column, config, dh, onChange = DEFAULT_CALLBACK } = props;\n  const selectedColumnType = column.type;\n  const [prevColumnType, setPrevColumnType] = useState(selectedColumnType);\n  const [selectedCondition, setCondition] = useState(config.condition);\n  const [conditionValue, setValue] = useState(config.value);\n  const [startValue, setStartValue] = useState(config.start);\n  const [endValue, setEndValue] = useState(config.end);\n\n  if (selectedColumnType !== prevColumnType) {\n    // Column type changed, reset condition and value fields\n    setCondition(getDefaultConditionForType(selectedColumnType));\n    setValue(getDefaultValueForType(selectedColumnType));\n    setStartValue(undefined);\n    setEndValue(undefined);\n    setPrevColumnType(selectedColumnType);\n  }\n\n  const conditions = useMemo(() => {\n    if (selectedColumnType === undefined) {\n      return [];\n    }\n    if (TableUtils.isNumberType(selectedColumnType)) {\n      return numberConditionOptions;\n    }\n    if (TableUtils.isCharType(selectedColumnType)) {\n      return charConditions;\n    }\n    if (TableUtils.isStringType(selectedColumnType)) {\n      return stringConditions;\n    }\n    if (TableUtils.isDateType(selectedColumnType)) {\n      return dateConditions;\n    }\n    if (TableUtils.isBooleanType(selectedColumnType)) {\n      return booleanConditions;\n    }\n  }, [selectedColumnType]);\n\n  const handleConditionChange = useCallback((value: string) => {\n    log.debug('handleConditionChange', value);\n    setCondition(value as Condition);\n  }, []);\n\n  const handleValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleValueChange', value);\n    setValue(value);\n  }, []);\n\n  const handleStartValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleStartValueChange', value);\n    setStartValue(value);\n  }, []);\n\n  const handleEndValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleEndValueChange', value);\n    setEndValue(value);\n  }, []);\n\n  useEffect(\n    function changeCondition() {\n      let isValid = true;\n\n      if (selectedCondition === undefined) {\n        log.debug(\n          'Unable to create formatting rule. Condition is not selected.'\n        );\n        isValid = false;\n      } else if (\n        TableUtils.isNumberType(column.type) &&\n        !isNumberConditionValid(\n          selectedCondition as NumberCondition,\n          conditionValue,\n          startValue,\n          endValue\n        )\n      ) {\n        log.debug(\n          'Unable to create formatting rule. Invalid value',\n          conditionValue\n        );\n        isValid = false;\n      } else if (\n        TableUtils.isDateType(column.type) &&\n        !isDateConditionValid(\n          dh,\n          selectedCondition as DateCondition,\n          conditionValue\n        )\n      ) {\n        log.debug(\n          'Unable to create formatting rule. Invalid date condition',\n          conditionValue\n        );\n        isValid = false;\n      }\n\n      onChange(\n        {\n          condition: selectedCondition,\n          value: conditionValue,\n          start: startValue,\n          end: endValue,\n        },\n        isValid\n      );\n    },\n    [\n      onChange,\n      column.type,\n      dh,\n      selectedCondition,\n      conditionValue,\n      startValue,\n      endValue,\n    ]\n  );\n\n  const conditionInputs = useMemo(() => {\n    if (selectedColumnType === undefined) {\n      // Column not selected\n      return null;\n    }\n    if (TableUtils.isNumberType(selectedColumnType)) {\n      return getNumberInputs(\n        selectedCondition as NumberCondition,\n        handleValueChange,\n        handleStartValueChange,\n        handleEndValueChange,\n        conditionValue,\n        startValue,\n        endValue\n      );\n    }\n    if (TableUtils.isCharType(selectedColumnType)) {\n      return getCharInputs(\n        selectedCondition as CharCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isStringType(selectedColumnType)) {\n      return getStringInputs(\n        selectedCondition as StringCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isDateType(selectedColumnType)) {\n      return getDateInputs(\n        selectedCondition as DateCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isBooleanType(selectedColumnType)) {\n      return getBooleanInputs();\n    }\n  }, [\n    selectedColumnType,\n    selectedCondition,\n    conditionValue,\n    startValue,\n    endValue,\n    handleValueChange,\n    handleStartValueChange,\n    handleEndValueChange,\n  ]);\n\n  return (\n    <div className=\"condition-editor mb-2\">\n      <Select\n        value={selectedCondition}\n        data-testid=\"condition-select\"\n        className=\"custom-select mb-2\"\n        onChange={handleConditionChange}\n      >\n        {conditions}\n      </Select>\n      {conditionInputs}\n    </div>\n  );\n}\n\nexport default ConditionEditor;\n"],"mappings":"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"}

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../src/sidebar/conditional-formatting/ConditionalFormatEditor.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE,SCCS;;ADCT;EACE;EACA;EACA,aCLO;;ADQT;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"ConditionalFormatEditor.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.conditional-format-editor {\n  padding: $spacer-3;\n\n  .formatter-list {\n    display: flex;\n    justify-content: flex-start;\n    padding-top: $spacer-2;\n  }\n\n  .formatter-type {\n    margin: 0 $spacer-3 0 0;\n    display: flex;\n  }\n\n  .btn-formatter-type {\n    font-size: smaller;\n    width: 100%;\n  }\n\n  .color-select {\n    padding: 0 2em 0 0.25em;\n  }\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$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/sidebar/conditional-formatting/ConditionalFormatEditor.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE,SCGS;;ADDT;EACE;EACA;EACA,aCHO;;ADMT;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"ConditionalFormatEditor.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.conditional-format-editor {\n  padding: $spacer-3;\n\n  .formatter-list {\n    display: flex;\n    justify-content: flex-start;\n    padding-top: $spacer-2;\n  }\n\n  .formatter-type {\n    margin: 0 $spacer-3 0 0;\n    display: flex;\n  }\n\n  .btn-formatter-type {\n    font-size: smaller;\n    width: 100%;\n  }\n\n  .color-select {\n    padding: 0 2em 0 0.25em;\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"]}

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.css

@@ -47,11 +47,11 @@
 }
 .conditional-formatting-list-item .formatting-item:focus {
   outline: 0;
-  border: 1px solid rgba(72, 120, 234, 0.85);
-  box-shadow: 0 0 0 0.2rem rgba(72, 120, 234, 0.35);
+  border: 1px solid var(--dh-color-input-focus-border);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .conditional-formatting-list-item .formatting-item:hover {
-  background: #5b5a5c;
+  background: var(--dh-color-gray-500);
 }
 
 /*# sourceMappingURL=ConditionalFormattingMenu.css.map */