@deephaven/components 1.2.1-plotly-rc.3 → 1.3.0

package/dist/UISwitch.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../scss/bootstrap_overrides.scss","../src/UISwitch.scss"],"names":[],"mappings":"AAAA;AC6LA;AC/KA;EACE;EACA,WAZiB;EAajB;EACA,YDMS;ECLT;EACA,WAjBa;EAkBb,OAlBa;EAmBb;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,OArBiB;EAsBjB,QAtBiB;EAuBjB,eAvBiB;EAwBjB,kBDjBO;ECkBP;EACA,YACE;;AAIJ;AAAA;EAEE,OAzCU;EA0CV;EACA;EACA;EACA;EACA;EACA,aAvCiB;EAwCjB,ODjCO;ECkCP;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA,OAvDuB;EAwDvB;EACA;EACA;;AAGF;EACE;EACA,YDiHyB;EChHzB,cDwGuB;;ACrGzB;EACE,YDmBM;EClBN;EACA,cDiBM;;ACfN;EACE,cD+FqB;;AC5FvB;EACE;EAGA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE,kBDpFO;;ACuFT;EAEE,cDDK;;ACIP;EAEE,cDNK;ECOL,kBDPK;;ACUP;EACE,kBD1FO;EC2FP,cDxFI;ECyFJ;;AAGF;EACE,cD7FI;;AC+FJ;EACE,kBDxGK","file":"UISwitch.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 './util.scss';\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// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\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, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\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$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-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '../scss/custom.scss';\n\n$switch-size: 15px;\n$switch-width: 40px;\n$switch-font-size: 0.6rem;\n$switch-handle-color: $gray-300;\n$switch-handle-hover-color: $gray-100;\n$switch-text-color: $gray-300;\n$switch-text-color-active: var(--dh-color-accent-contrast);\n$switch-handle-padding: 1px;\n$switch-handle-size: $switch-size - ($switch-handle-padding * 2);\n$switch-background-color: $gray-800;\n$switch-background-active-color: $primary;\n\n.btn-switch {\n  display: inline-block;\n  font-size: $switch-font-size;\n  color: $gray-300;\n  background: $switch-background-color;\n  padding: 0;\n  min-width: $switch-width;\n  width: $switch-width;\n  overflow: hidden;\n  border: 1px solid $input-border-color;\n  height: calc($switch-size + $switch-handle-padding * 2);\n\n  .handle {\n    position: relative;\n    top: 0;\n    left: 0;\n    margin: 1px;\n    width: $switch-handle-size;\n    height: $switch-handle-size;\n    border-radius: $switch-handle-size;\n    background-color: $switch-handle-color;\n    transform: translateX(0);\n    transition:\n      transform $transition ease-in,\n      background-color $transition;\n  }\n\n  ::before,\n  ::after {\n    width: $switch-size;\n    text-align: center;\n    font-weight: 600;\n    text-transform: uppercase;\n    position: absolute;\n    bottom: 0;\n    line-height: $switch-handle-size;\n    color: $switch-text-color;\n    letter-spacing: 0.75px;\n    transition: opacity $transition;\n  }\n\n  ::before {\n    content: 'Off';\n    left: $switch-size + 2px;\n    text-align: right;\n  }\n\n  ::after {\n    content: 'On';\n    color: $switch-text-color-active;\n    left: -$switch-size - 1px;\n    text-align: left;\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: $input-btn-focus-box-shadow;\n    border-color: $input-focus-border-color;\n  }\n\n  &.active {\n    background: $switch-background-active-color;\n    transition: background-color $transition;\n    border-color: $switch-background-active-color;\n\n    &:focus {\n      border-color: $input-focus-border-color;\n    }\n\n    .handle {\n      transform: translateX(\n        $switch-width - $switch-size - $switch-handle-padding * 2\n      );\n      transition: transform $transition ease-in;\n    }\n    ::before {\n      opacity: 0;\n    }\n    ::after {\n      opacity: 1;\n    }\n  }\n\n  &:hover:not(:disabled) .handle {\n    background-color: $switch-handle-hover-color;\n  }\n\n  &.is-invalid,\n  &:focus.is-invalid {\n    border-color: $danger;\n  }\n\n  &.is-invalid.active,\n  &:focus.is-invalid.active {\n    border-color: $danger;\n    background-color: $danger;\n  }\n\n  &:disabled {\n    background-color: $gray-800;\n    border-color: $black;\n    cursor: not-allowed;\n  }\n\n  &:disabled.active {\n    border-color: $black;\n    // background-color: $gray-800;\n    .handle {\n      background-color: $gray-500;\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../scss/bootstrap_overrides.scss","../src/UISwitch.scss"],"names":[],"mappings":"AAAA;AC6LA;AC/KA;EACE;EACA,WAZiB;EAajB;EACA,YDMS;ECLT;EACA,WAjBa;EAkBb,OAlBa;EAmBb;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,OArBiB;EAsBjB,QAtBiB;EAuBjB,eAvBiB;EAwBjB,kBDjBO;ECkBP;EACA,YACE;;AAIJ;AAAA;EAEE,OAzCU;EA0CV;EACA;EACA;EACA;EACA;EACA,aAvCiB;EAwCjB,ODjCO;ECkCP;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA,OAvDuB;EAwDvB;EACA;EACA;;AAGF;EACE;EACA,YDiHyB;EChHzB,cDwGuB;;ACrGzB;EACE,YDmBM;EClBN;EACA,cDiBM;;ACfN;EACE,cD+FqB;;AC5FvB;EACE;EAGA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE,kBDpFO;;ACuFT;EAEE,cDDK;;ACIP;EAEE,cDNK;ECOL,kBDPK;;ACUP;EACE,kBD1FO;EC2FP,cDxFI;ECyFJ;;AAGF;EACE,cD7FI;;AC+FJ;EACE,kBDxGK","file":"UISwitch.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 './util.scss';\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// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\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, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\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$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-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '../scss/custom.scss';\n\n$switch-size: 15px;\n$switch-width: 40px;\n$switch-font-size: 0.6rem;\n$switch-handle-color: $gray-300;\n$switch-handle-hover-color: $gray-100;\n$switch-text-color: $gray-300;\n$switch-text-color-active: var(--dh-color-accent-contrast);\n$switch-handle-padding: 1px;\n$switch-handle-size: $switch-size - ($switch-handle-padding * 2);\n$switch-background-color: $gray-800;\n$switch-background-active-color: $primary;\n\n.btn-switch {\n  display: inline-block;\n  font-size: $switch-font-size;\n  color: $gray-300;\n  background: $switch-background-color;\n  padding: 0;\n  min-width: $switch-width;\n  width: $switch-width;\n  overflow: hidden;\n  border: 1px solid $input-border-color;\n  height: calc($switch-size + $switch-handle-padding * 2);\n\n  .handle {\n    position: relative;\n    top: 0;\n    left: 0;\n    margin: 1px;\n    width: $switch-handle-size;\n    height: $switch-handle-size;\n    border-radius: $switch-handle-size;\n    background-color: $switch-handle-color;\n    transform: translateX(0);\n    transition:\n      transform $transition ease-in,\n      background-color $transition;\n  }\n\n  ::before,\n  ::after {\n    width: $switch-size;\n    text-align: center;\n    font-weight: 600;\n    text-transform: uppercase;\n    position: absolute;\n    bottom: 0;\n    line-height: $switch-handle-size;\n    color: $switch-text-color;\n    letter-spacing: 0.75px;\n    transition: opacity $transition;\n  }\n\n  ::before {\n    content: 'Off';\n    left: $switch-size + 2px;\n    text-align: right;\n  }\n\n  ::after {\n    content: 'On';\n    color: $switch-text-color-active;\n    left: -$switch-size - 1px;\n    text-align: left;\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: $input-btn-focus-box-shadow;\n    border-color: $input-focus-border-color;\n  }\n\n  &.active {\n    background: $switch-background-active-color;\n    transition: background-color $transition;\n    border-color: $switch-background-active-color;\n\n    &:focus {\n      border-color: $input-focus-border-color;\n    }\n\n    .handle {\n      transform: translateX(\n        $switch-width - $switch-size - $switch-handle-padding * 2\n      );\n      transition: transform $transition ease-in;\n    }\n    ::before {\n      opacity: 0;\n    }\n    ::after {\n      opacity: 1;\n    }\n  }\n\n  &:hover:not(:disabled) .handle {\n    background-color: $switch-handle-hover-color;\n  }\n\n  &.is-invalid,\n  &:focus.is-invalid {\n    border-color: $danger;\n  }\n\n  &.is-invalid.active,\n  &:focus.is-invalid.active {\n    border-color: $danger;\n    background-color: $danger;\n  }\n\n  &:disabled {\n    background-color: $gray-800;\n    border-color: $black;\n    cursor: not-allowed;\n  }\n\n  &:disabled.active {\n    border-color: $black;\n    // background-color: $gray-800;\n    .handle {\n      background-color: $gray-500;\n    }\n  }\n}\n"]}

package/dist/UISwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"UISwitch.js","names":["React","classNames","jsx","_jsx","UISwitch","_ref","on","id","className","isInvalid","disabled","onClick","dataTestId","type","active","children"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n  on: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  id?: string;\n  className?: string;\n  isInvalid?: boolean;\n  disabled?: boolean;\n  'data-testid'?: string;\n};\n\nfunction UISwitch({\n  on,\n  id,\n  className,\n  isInvalid,\n  disabled = false,\n  onClick,\n  'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\n        'btn',\n        'btn-switch',\n        className,\n        { active: on },\n        { 'is-invalid': isInvalid }\n      )}\n      id={id}\n      onClick={onClick}\n      disabled={disabled}\n      data-testid={dataTestId}\n    >\n      <div className=\"handle\" />\n    </button>\n  );\n}\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAapC,SAASC,QAAQA,CAAAC,IAAA,EAQc;EAAA,IARb;IAChBC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACP,aAAa,EAAEC;EACF,CAAC,GAAAP,IAAA;EACd,oBACEF,IAAA;IACEU,IAAI,EAAC,QAAQ;IACbL,SAAS,EAAEP,UAAU,CACnB,KAAK,EACL,YAAY,EACZO,SAAS,EACT;MAAEM,MAAM,EAAER;IAAG,CAAC,EACd;MAAE,YAAY,EAAEG;IAAU,CAC5B,CAAE;IACFF,EAAE,EAAEA,EAAG;IACPI,OAAO,EAAEA,OAAQ;IACjBD,QAAQ,EAAEA,QAAS;IACnB,eAAaE,UAAW;IAAAG,QAAA,eAExBZ,IAAA;MAAKK,SAAS,EAAC;IAAQ,CAAE;EAAC,CACpB,CAAC;AAEb;AAEA,eAAeJ,QAAQ","ignoreList":[]}
+{"version":3,"file":"UISwitch.js","names":["React","classNames","jsx","_jsx","UISwitch","_ref","on","id","className","isInvalid","disabled","onClick","dataTestId","type","active","children"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n  on: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  id?: string;\n  className?: string;\n  isInvalid?: boolean;\n  disabled?: boolean;\n  'data-testid'?: string;\n};\n\nfunction UISwitch({\n  on,\n  id,\n  className,\n  isInvalid,\n  disabled = false,\n  onClick,\n  'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\n        'btn',\n        'btn-switch',\n        className,\n        { active: on },\n        { 'is-invalid': isInvalid }\n      )}\n      id={id}\n      onClick={onClick}\n      disabled={disabled}\n      data-testid={dataTestId}\n    >\n      <div className=\"handle\" />\n    </button>\n  );\n}\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAapC,SAASC,QAAQA,CAAAC,IAAA,EAQc;EAAA,IARb;IAChBC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACP,aAAa,EAAEC;EACF,CAAC,GAAAP,IAAA;EACd,oBACEF,IAAA;IACEU,IAAI,EAAC,QAAQ;IACbL,SAAS,EAAEP,UAAU,CACnB,KAAK,EACL,YAAY,EACZO,SAAS,EACT;MAAEM,MAAM,EAAER;IAAG,CAAC,EACd;MAAE,YAAY,EAAEG;IAAU,CAC5B,CAAE;IACFF,EAAE,EAAEA,EAAG;IACPI,OAAO,EAAEA,OAAQ;IACjBD,QAAQ,EAAEA,QAAS;IACnB,eAAaE,UAAW;IAAAG,QAAA,eAExBZ,IAAA;MAAKK,SAAS,EAAC;IAAQ,CAAE;EAAC,CACpB,CAAC;AAEb;AAEA,eAAeJ,QAAQ"}

package/dist/XComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"XComponent.js","names":["React","forwardRef","canHaveRef","useXComponent","jsx","_jsx","createXComponent","Component","_Component$displayNam","forwardedRefComponent","XComponent","props","ref","ReplacementComponent","_objectSpread","displayName","concat","name","Original","isXComponent"],"sources":["../src/XComponent.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef } from 'react';\nimport { canHaveRef } from './ComponentUtils';\nimport { useXComponent, type XComponentType } from './XComponentMap';\n\n/**\n * Helper function that will wrap the provided component, and return an ExtendableComponent type.\n * Whenever that ExtendableComponent is used, it will check if there is a replacement component for the provided component on the context.\n * If there is, it will use that component instead of the provided component.\n * This is a similar concept to how swizzling is done in Docusaurus or obj-c, but for any React component.\n *\n * Usage:\n *\n * ```tsx\n * function MyComponent() {\n *   return <div>MyComponent</div>;\n * }\n *\n * const XMyComponent = extendableComponent(MyComponent);\n *\n * function MyReplacementComponent() {\n *  return <div>MyReplacementComponent</div>;\n * }\n *\n * <XMyComponent /> // Will render MyComponent\n *\n * <XComponentMapProvider value={new Map([[XMyComponent, MyReplacementComponent]])}>\n *   <XMyComponent /> // Will render MyReplacementComponent\n * </XComponentMapProvider>\n *\n * ```\n *\n * Is useful in cases where we have a component deep down in the component tree that we want to replace with a different component, but don't want to\n * have to provide props at the top level just to hook into that.\n *\n * @param Component The component to wrap\n * @returns The wrapped component\n */\nexport function createXComponent<P extends Record<string, unknown>>(\n  Component: React.ComponentType<P>\n): XComponentType<P> {\n  let forwardedRefComponent: XComponentType<P>;\n  function XComponent(\n    props: P,\n    ref: React.ForwardedRef<ComponentType<P>>\n  ): JSX.Element {\n    const ReplacementComponent = useXComponent(forwardedRefComponent);\n    return canHaveRef(Component) ? (\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      <ReplacementComponent {...props} ref={ref} />\n    ) : (\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      <ReplacementComponent {...props} />\n    );\n  }\n\n  // Add the display name so this appears as a tag in the React DevTools\n  // Need to add it here, and then when it's wrapped with the `forwardRef` it will automatically get the display name of the original component\n  XComponent.displayName = `XComponent(${\n    Component.displayName ?? Component.name\n  })`;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  forwardedRefComponent = forwardRef(XComponent) as any;\n\n  forwardedRefComponent.Original = Component;\n  forwardedRefComponent.isXComponent = true;\n\n  return forwardedRefComponent;\n}\n\nexport default createXComponent;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAwBC,UAAU,QAAQ,OAAO;AAAC,SACrDC,UAAU;AAAA,SACVC,aAAa;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhCA,SAAAC,GAAA,IAAAC,IAAA;AAiCA,OAAO,SAASC,gBAAgBA,CAC9BC,SAAiC,EACd;EAAA,IAAAC,qBAAA;EACnB,IAAIC,qBAAwC;EAC5C,SAASC,UAAUA,CACjBC,KAAQ,EACRC,GAAyC,EAC5B;IACb,IAAMC,oBAAoB,GAAGV,aAAa,CAACM,qBAAqB,CAAC;IACjE,OAAOP,UAAU,CAACK,SAAS,CAAC;IAAA;IAC1B;IACAF,IAAA,CAACQ,oBAAoB,EAAAC,aAAA,CAAAA,aAAA,KAAKH,KAAK;MAAEC,GAAG,EAAEA;IAAI,EAAE,CAAC;IAAA;IAE7C;IACAP,IAAA,CAACQ,oBAAoB,EAAAC,aAAA,KAAKH,KAAK,CAAG,CACnC;EACH;;EAEA;EACA;EACAD,UAAU,CAACK,WAAW,iBAAAC,MAAA,EAAAR,qBAAA,GACpBD,SAAS,CAACQ,WAAW,cAAAP,qBAAA,cAAAA,qBAAA,GAAID,SAAS,CAACU,IAAI,MACtC;;EAEH;EACAR,qBAAqB,gBAAGR,UAAU,CAACS,UAAU,CAAQ;EAErDD,qBAAqB,CAACS,QAAQ,GAAGX,SAAS;EAC1CE,qBAAqB,CAACU,YAAY,GAAG,IAAI;EAEzC,OAAOV,qBAAqB;AAC9B;AAEA,eAAeH,gBAAgB","ignoreList":[]}
+{"version":3,"file":"XComponent.js","names":["React","forwardRef","canHaveRef","useXComponent","jsx","_jsx","createXComponent","Component","_Component$displayNam","forwardedRefComponent","XComponent","props","ref","ReplacementComponent","_objectSpread","displayName","concat","name","Original","isXComponent"],"sources":["../src/XComponent.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef } from 'react';\nimport { canHaveRef } from './ComponentUtils';\nimport { useXComponent, type XComponentType } from './XComponentMap';\n\n/**\n * Helper function that will wrap the provided component, and return an ExtendableComponent type.\n * Whenever that ExtendableComponent is used, it will check if there is a replacement component for the provided component on the context.\n * If there is, it will use that component instead of the provided component.\n * This is a similar concept to how swizzling is done in Docusaurus or obj-c, but for any React component.\n *\n * Usage:\n *\n * ```tsx\n * function MyComponent() {\n *   return <div>MyComponent</div>;\n * }\n *\n * const XMyComponent = extendableComponent(MyComponent);\n *\n * function MyReplacementComponent() {\n *  return <div>MyReplacementComponent</div>;\n * }\n *\n * <XMyComponent /> // Will render MyComponent\n *\n * <XComponentMapProvider value={new Map([[XMyComponent, MyReplacementComponent]])}>\n *   <XMyComponent /> // Will render MyReplacementComponent\n * </XComponentMapProvider>\n *\n * ```\n *\n * Is useful in cases where we have a component deep down in the component tree that we want to replace with a different component, but don't want to\n * have to provide props at the top level just to hook into that.\n *\n * @param Component The component to wrap\n * @returns The wrapped component\n */\nexport function createXComponent<P extends Record<string, unknown>>(\n  Component: React.ComponentType<P>\n): XComponentType<P> {\n  let forwardedRefComponent: XComponentType<P>;\n  function XComponent(\n    props: P,\n    ref: React.ForwardedRef<ComponentType<P>>\n  ): JSX.Element {\n    const ReplacementComponent = useXComponent(forwardedRefComponent);\n    return canHaveRef(Component) ? (\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      <ReplacementComponent {...props} ref={ref} />\n    ) : (\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      <ReplacementComponent {...props} />\n    );\n  }\n\n  // Add the display name so this appears as a tag in the React DevTools\n  // Need to add it here, and then when it's wrapped with the `forwardRef` it will automatically get the display name of the original component\n  XComponent.displayName = `XComponent(${\n    Component.displayName ?? Component.name\n  })`;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  forwardedRefComponent = forwardRef(XComponent) as any;\n\n  forwardedRefComponent.Original = Component;\n  forwardedRefComponent.isXComponent = true;\n\n  return forwardedRefComponent;\n}\n\nexport default createXComponent;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAwBC,UAAU,QAAQ,OAAO;AAAC,SACrDC,UAAU;AAAA,SACVC,aAAa;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhCA,SAAAC,GAAA,IAAAC,IAAA;AAiCA,OAAO,SAASC,gBAAgBA,CAC9BC,SAAiC,EACd;EAAA,IAAAC,qBAAA;EACnB,IAAIC,qBAAwC;EAC5C,SAASC,UAAUA,CACjBC,KAAQ,EACRC,GAAyC,EAC5B;IACb,IAAMC,oBAAoB,GAAGV,aAAa,CAACM,qBAAqB,CAAC;IACjE,OAAOP,UAAU,CAACK,SAAS,CAAC;IAAA;IAC1B;IACAF,IAAA,CAACQ,oBAAoB,EAAAC,aAAA,CAAAA,aAAA,KAAKH,KAAK;MAAEC,GAAG,EAAEA;IAAI,EAAE,CAAC;IAAA;IAE7C;IACAP,IAAA,CAACQ,oBAAoB,EAAAC,aAAA,KAAKH,KAAK,CAAG,CACnC;EACH;;EAEA;EACA;EACAD,UAAU,CAACK,WAAW,iBAAAC,MAAA,EAAAR,qBAAA,GACpBD,SAAS,CAACQ,WAAW,cAAAP,qBAAA,cAAAA,qBAAA,GAAID,SAAS,CAACU,IAAI,MACtC;;EAEH;EACAR,qBAAqB,gBAAGR,UAAU,CAACS,UAAU,CAAQ;EAErDD,qBAAqB,CAACS,QAAQ,GAAGX,SAAS;EAC1CE,qBAAqB,CAACU,YAAY,GAAG,IAAI;EAEzC,OAAOV,qBAAqB;AAC9B;AAEA,eAAeH,gBAAgB"}

package/dist/XComponentMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"XComponentMap.js","names":["React","useContext","XComponentMapContext","createContext","Map","XComponentMapProvider","Provider","useXComponent","Component","_ctx$get","ctx","get","Original"],"sources":["../src/XComponentMap.ts"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Type for an extended component. Can fetch the original component using `.Original` */\nexport type XComponentType<P extends Record<string, unknown>> =\n  React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<P> & React.RefAttributes<unknown>\n  > & {\n    Original: React.ComponentType<P>;\n    isXComponent: boolean;\n  };\n\nexport const XComponentMapContext = React.createContext(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  new Map<React.ComponentType<any>, React.ComponentType<any>>()\n);\n\nexport const XComponentMapProvider = XComponentMapContext.Provider;\n\n/**\n * Use the replacement component for the provided component if it exists, or just return the provided component.\n * @param Component Component to check if there's a replacement for\n * @returns The replacement component if it exists, otherwise the original component\n */\nexport function useXComponent<P extends Record<string, unknown>>(\n  Component: XComponentType<P>\n): React.ComponentType<P> {\n  const ctx = useContext(XComponentMapContext);\n  return ctx.get(Component) ?? Component.Original;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC;;AASA,OAAO,IAAMC,oBAAoB,gBAAGF,KAAK,CAACG,aAAa;AACrD;AACA,IAAIC,GAAG,CAAqD,CAC9D,CAAC;AAED,OAAO,IAAMC,qBAAqB,GAAGH,oBAAoB,CAACI,QAAQ;;AAElE;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAC3BC,SAA4B,EACJ;EAAA,IAAAC,QAAA;EACxB,IAAMC,GAAG,GAAGT,UAAU,CAACC,oBAAoB,CAAC;EAC5C,QAAAO,QAAA,GAAOC,GAAG,CAACC,GAAG,CAACH,SAAS,CAAC,cAAAC,QAAA,cAAAA,QAAA,GAAID,SAAS,CAACI,QAAQ;AACjD","ignoreList":[]}
+{"version":3,"file":"XComponentMap.js","names":["React","useContext","XComponentMapContext","createContext","Map","XComponentMapProvider","Provider","useXComponent","Component","_ctx$get","ctx","get","Original"],"sources":["../src/XComponentMap.ts"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Type for an extended component. Can fetch the original component using `.Original` */\nexport type XComponentType<P extends Record<string, unknown>> =\n  React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<P> & React.RefAttributes<unknown>\n  > & {\n    Original: React.ComponentType<P>;\n    isXComponent: boolean;\n  };\n\nexport const XComponentMapContext = React.createContext(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  new Map<React.ComponentType<any>, React.ComponentType<any>>()\n);\n\nexport const XComponentMapProvider = XComponentMapContext.Provider;\n\n/**\n * Use the replacement component for the provided component if it exists, or just return the provided component.\n * @param Component Component to check if there's a replacement for\n * @returns The replacement component if it exists, otherwise the original component\n */\nexport function useXComponent<P extends Record<string, unknown>>(\n  Component: XComponentType<P>\n): React.ComponentType<P> {\n  const ctx = useContext(XComponentMapContext);\n  return ctx.get(Component) ?? Component.Original;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC;;AASA,OAAO,IAAMC,oBAAoB,gBAAGF,KAAK,CAACG,aAAa;AACrD;AACA,IAAIC,GAAG,CAAqD,CAC9D,CAAC;AAED,OAAO,IAAMC,qBAAqB,GAAGH,oBAAoB,CAACI,QAAQ;;AAElE;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAC3BC,SAA4B,EACJ;EAAA,IAAAC,QAAA;EACxB,IAAMC,GAAG,GAAGT,UAAU,CAACC,oBAAoB,CAAC;EAC5C,QAAAO,QAAA,GAAOC,GAAG,CAACC,GAAG,CAACH,SAAS,CAAC,cAAAC,QAAA,cAAAA,QAAA,GAAID,SAAS,CAACI,QAAQ;AACjD"}

package/dist/actions/ConfirmActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmActionButton.js","names":["useCallback","vsTrash","ActionButtonDialogTrigger","ConfirmationDialog","ACTION_ICON_HEIGHT","jsx","_jsx","ConfirmActionButton","_ref","ariaLabel","heading","confirmationButtonLabel","isHidden","children","tooltip","onConfirm","renderDialog","close","onCancel","icon","isQuiet","height"],"sources":["../../src/actions/ConfirmActionButton.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode, useCallback } from 'react';\nimport type { SpectrumLabelableProps } from '@react-types/shared';\nimport { vsTrash } from '@deephaven/icons';\nimport { ActionButtonDialogTrigger, ConfirmationDialog } from '../dialogs';\nimport { ACTION_ICON_HEIGHT } from '../UIConstants';\n\nexport interface ConfirmActionButtonProps {\n  ariaLabel: string;\n  heading: ReactNode;\n  confirmationButtonLabel: string;\n  children:\n    | ReactElement<SpectrumLabelableProps>\n    | ReactElement<SpectrumLabelableProps>[];\n  isHidden?: boolean;\n  tooltip?: string;\n  onConfirm: () => void;\n}\n\nexport function ConfirmActionButton({\n  ariaLabel,\n  heading,\n  confirmationButtonLabel,\n  isHidden,\n  children,\n  tooltip,\n  onConfirm,\n}: ConfirmActionButtonProps): JSX.Element {\n  const renderDialog = useCallback(\n    close => (\n      <ConfirmationDialog\n        heading={heading}\n        confirmationButtonLabel={confirmationButtonLabel}\n        onCancel={close}\n        onConfirm={() => {\n          close();\n          onConfirm();\n        }}\n      >\n        {children}\n      </ConfirmationDialog>\n    ),\n    [children, confirmationButtonLabel, heading, onConfirm]\n  );\n\n  return (\n    <ActionButtonDialogTrigger\n      ariaLabel={ariaLabel}\n      icon={vsTrash}\n      isHidden={isHidden}\n      isQuiet\n      height={ACTION_ICON_HEIGHT}\n      tooltip={tooltip}\n    >\n      {renderDialog}\n    </ActionButtonDialogTrigger>\n  );\n}\n\nexport default ConfirmActionButton;\n"],"mappings":"AAAA,SAA4CA,WAAW,QAAQ,OAAO;AAEtE,SAASC,OAAO,QAAQ,kBAAkB;AAAC,SAClCC,yBAAyB,EAAEC,kBAAkB;AAAA,SAC7CC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAc3B,OAAO,SAASC,mBAAmBA,CAAAC,IAAA,EAQO;EAAA,IARN;IAClCC,SAAS;IACTC,OAAO;IACPC,uBAAuB;IACvBC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,SAAS,EAATA;EACwB,CAAC,GAAAP,IAAA;EACzB,IAAMQ,YAAY,GAAGhB,WAAW,CAC9BiB,KAAK,iBACHX,IAAA,CAACH,kBAAkB;IACjBO,OAAO,EAAEA,OAAQ;IACjBC,uBAAuB,EAAEA,uBAAwB;IACjDO,QAAQ,EAAED,KAAM;IAChBF,SAAS,EAAEA,CAAA,KAAM;MACfE,KAAK,CAAC,CAAC;MACPF,UAAS,CAAC,CAAC;IACb,CAAE;IAAAF,QAAA,EAEDA;EAAQ,CACS,CACrB,EACD,CAACA,QAAQ,EAAEF,uBAAuB,EAAED,OAAO,EAAEK,UAAS,CACxD,CAAC;EAED,oBACET,IAAA,CAACJ,yBAAyB;IACxBO,SAAS,EAAEA,SAAU;IACrBU,IAAI,EAAElB,OAAQ;IACdW,QAAQ,EAAEA,QAAS;IACnBQ,OAAO;IACPC,MAAM,EAAEjB,kBAAmB;IAC3BU,OAAO,EAAEA,OAAQ;IAAAD,QAAA,EAEhBG;EAAY,CACY,CAAC;AAEhC;AAEA,eAAeT,mBAAmB","ignoreList":[]}
+{"version":3,"file":"ConfirmActionButton.js","names":["useCallback","vsTrash","ActionButtonDialogTrigger","ConfirmationDialog","ACTION_ICON_HEIGHT","jsx","_jsx","ConfirmActionButton","_ref","ariaLabel","heading","confirmationButtonLabel","isHidden","children","tooltip","onConfirm","renderDialog","close","onCancel","icon","isQuiet","height"],"sources":["../../src/actions/ConfirmActionButton.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode, useCallback } from 'react';\nimport type { SpectrumLabelableProps } from '@react-types/shared';\nimport { vsTrash } from '@deephaven/icons';\nimport { ActionButtonDialogTrigger, ConfirmationDialog } from '../dialogs';\nimport { ACTION_ICON_HEIGHT } from '../UIConstants';\n\nexport interface ConfirmActionButtonProps {\n  ariaLabel: string;\n  heading: ReactNode;\n  confirmationButtonLabel: string;\n  children:\n    | ReactElement<SpectrumLabelableProps>\n    | ReactElement<SpectrumLabelableProps>[];\n  isHidden?: boolean;\n  tooltip?: string;\n  onConfirm: () => void;\n}\n\nexport function ConfirmActionButton({\n  ariaLabel,\n  heading,\n  confirmationButtonLabel,\n  isHidden,\n  children,\n  tooltip,\n  onConfirm,\n}: ConfirmActionButtonProps): JSX.Element {\n  const renderDialog = useCallback(\n    close => (\n      <ConfirmationDialog\n        heading={heading}\n        confirmationButtonLabel={confirmationButtonLabel}\n        onCancel={close}\n        onConfirm={() => {\n          close();\n          onConfirm();\n        }}\n      >\n        {children}\n      </ConfirmationDialog>\n    ),\n    [children, confirmationButtonLabel, heading, onConfirm]\n  );\n\n  return (\n    <ActionButtonDialogTrigger\n      ariaLabel={ariaLabel}\n      icon={vsTrash}\n      isHidden={isHidden}\n      isQuiet\n      height={ACTION_ICON_HEIGHT}\n      tooltip={tooltip}\n    >\n      {renderDialog}\n    </ActionButtonDialogTrigger>\n  );\n}\n\nexport default ConfirmActionButton;\n"],"mappings":"AAAA,SAA4CA,WAAW,QAAQ,OAAO;AAEtE,SAASC,OAAO,QAAQ,kBAAkB;AAAC,SAClCC,yBAAyB,EAAEC,kBAAkB;AAAA,SAC7CC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAc3B,OAAO,SAASC,mBAAmBA,CAAAC,IAAA,EAQO;EAAA,IARN;IAClCC,SAAS;IACTC,OAAO;IACPC,uBAAuB;IACvBC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,SAAS,EAATA;EACwB,CAAC,GAAAP,IAAA;EACzB,IAAMQ,YAAY,GAAGhB,WAAW,CAC9BiB,KAAK,iBACHX,IAAA,CAACH,kBAAkB;IACjBO,OAAO,EAAEA,OAAQ;IACjBC,uBAAuB,EAAEA,uBAAwB;IACjDO,QAAQ,EAAED,KAAM;IAChBF,SAAS,EAAEA,CAAA,KAAM;MACfE,KAAK,CAAC,CAAC;MACPF,UAAS,CAAC,CAAC;IACb,CAAE;IAAAF,QAAA,EAEDA;EAAQ,CACS,CACrB,EACD,CAACA,QAAQ,EAAEF,uBAAuB,EAAED,OAAO,EAAEK,UAAS,CACxD,CAAC;EAED,oBACET,IAAA,CAACJ,yBAAyB;IACxBO,SAAS,EAAEA,SAAU;IACrBU,IAAI,EAAElB,OAAQ;IACdW,QAAQ,EAAEA,QAAS;IACnBQ,OAAO;IACPC,MAAM,EAAEjB,kBAAmB;IAC3BU,OAAO,EAAEA,OAAQ;IAAAD,QAAA,EAEhBG;EAAY,CACY,CAAC;AAEhC;AAEA,eAAeT,mBAAmB"}

package/dist/actions/IconActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconActionButton.js","names":["FontAwesomeIcon","ActionButton","Icon","Tooltip","ACTION_ICON_HEIGHT","jsx","_jsx","jsxs","_jsxs","IconActionButton","_ref","icon","label","tooltip","props","_objectWithoutProperties","_excluded","_objectSpread","isQuiet","height","children","UNSAFE_className","undefined","displayName"],"sources":["../../src/actions/IconActionButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport type { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { ActionButton, Icon, type ActionButtonProps } from '../spectrum';\nimport { Tooltip } from '../popper';\nimport { ACTION_ICON_HEIGHT } from '../UIConstants';\n\nexport interface IconActionButtonProps\n  extends Omit<ActionButtonProps, 'aria-label' | 'isQuiet' | 'height'> {\n  icon: IconProp;\n  label: string;\n  tooltip?: string;\n}\n\nexport function IconActionButton({\n  icon,\n  label,\n  tooltip,\n  ...props\n}: IconActionButtonProps): JSX.Element {\n  return (\n    <ActionButton\n      {...props}\n      aria-label={label}\n      isQuiet\n      height={ACTION_ICON_HEIGHT}\n    >\n      <Icon\n        UNSAFE_className={\n          tooltip == null ? undefined : 'action-button-icon-with-tooltip'\n        }\n      >\n        <FontAwesomeIcon icon={icon} />\n      </Icon>\n      {tooltip == null ? null : <Tooltip>{tooltip}</Tooltip>}\n    </ActionButton>\n  );\n}\nIconActionButton.displayName = 'IconActionButton';\n\nexport default IconActionButton;\n"],"mappings":";;;;;;;;AAAA;AACA,SAASA,eAAe,QAAQ,gCAAgC;AAAC,SAExDC,YAAY,EAAEC,IAAI;AAAA,SAClBC,OAAO;AAAA,SACPC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAS3B,OAAO,SAASC,gBAAgBA,CAAAC,IAAA,EAKO;EAAA,IALN;MAC/BC,IAAI;MACJC,KAAK;MACLC;IAEqB,CAAC,GAAAH,IAAA;IADnBI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBACER,KAAA,CAACP,YAAY,EAAAgB,aAAA,CAAAA,aAAA,KACPH,KAAK;IACT,cAAYF,KAAM;IAClBM,OAAO;IACPC,MAAM,EAAEf,kBAAmB;IAAAgB,QAAA,gBAE3Bd,IAAA,CAACJ,IAAI;MACHmB,gBAAgB,EACdR,OAAO,IAAI,IAAI,GAAGS,SAAS,GAAG,iCAC/B;MAAAF,QAAA,eAEDd,IAAA,CAACN,eAAe;QAACW,IAAI,EAAEA;MAAK,CAAE;IAAC,CAC3B,CAAC,EACNE,OAAO,IAAI,IAAI,GAAG,IAAI,gBAAGP,IAAA,CAACH,OAAO;MAAAiB,QAAA,EAAEP;IAAO,CAAU,CAAC;EAAA,EAC1C,CAAC;AAEnB;AACAJ,gBAAgB,CAACc,WAAW,GAAG,kBAAkB;AAEjD,eAAed,gBAAgB","ignoreList":[]}
+{"version":3,"file":"IconActionButton.js","names":["FontAwesomeIcon","ActionButton","Icon","Tooltip","ACTION_ICON_HEIGHT","jsx","_jsx","jsxs","_jsxs","IconActionButton","_ref","icon","label","tooltip","props","_objectWithoutProperties","_excluded","_objectSpread","isQuiet","height","children","UNSAFE_className","undefined","displayName"],"sources":["../../src/actions/IconActionButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport type { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { ActionButton, Icon, type ActionButtonProps } from '../spectrum';\nimport { Tooltip } from '../popper';\nimport { ACTION_ICON_HEIGHT } from '../UIConstants';\n\nexport interface IconActionButtonProps\n  extends Omit<ActionButtonProps, 'aria-label' | 'isQuiet' | 'height'> {\n  icon: IconProp;\n  label: string;\n  tooltip?: string;\n}\n\nexport function IconActionButton({\n  icon,\n  label,\n  tooltip,\n  ...props\n}: IconActionButtonProps): JSX.Element {\n  return (\n    <ActionButton\n      {...props}\n      aria-label={label}\n      isQuiet\n      height={ACTION_ICON_HEIGHT}\n    >\n      <Icon\n        UNSAFE_className={\n          tooltip == null ? undefined : 'action-button-icon-with-tooltip'\n        }\n      >\n        <FontAwesomeIcon icon={icon} />\n      </Icon>\n      {tooltip == null ? null : <Tooltip>{tooltip}</Tooltip>}\n    </ActionButton>\n  );\n}\nIconActionButton.displayName = 'IconActionButton';\n\nexport default IconActionButton;\n"],"mappings":";;;;;;;;AAAA;AACA,SAASA,eAAe,QAAQ,gCAAgC;AAAC,SAExDC,YAAY,EAAEC,IAAI;AAAA,SAClBC,OAAO;AAAA,SACPC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAS3B,OAAO,SAASC,gBAAgBA,CAAAC,IAAA,EAKO;EAAA,IALN;MAC/BC,IAAI;MACJC,KAAK;MACLC;IAEqB,CAAC,GAAAH,IAAA;IADnBI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBACER,KAAA,CAACP,YAAY,EAAAgB,aAAA,CAAAA,aAAA,KACPH,KAAK;IACT,cAAYF,KAAM;IAClBM,OAAO;IACPC,MAAM,EAAEf,kBAAmB;IAAAgB,QAAA,gBAE3Bd,IAAA,CAACJ,IAAI;MACHmB,gBAAgB,EACdR,OAAO,IAAI,IAAI,GAAGS,SAAS,GAAG,iCAC/B;MAAAF,QAAA,eAEDd,IAAA,CAACN,eAAe;QAACW,IAAI,EAAEA;MAAK,CAAE;IAAC,CAC3B,CAAC,EACNE,OAAO,IAAI,IAAI,GAAG,IAAI,gBAAGP,IAAA,CAACH,OAAO;MAAAiB,QAAA,EAAEP;IAAO,CAAU,CAAC;EAAA,EAC1C,CAAC;AAEnB;AACAJ,gBAAgB,CAACc,WAAW,GAAG,kBAAkB;AAEjD,eAAed,gBAAgB"}

package/dist/actions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/actions/index.ts"],"sourcesContent":["export * from './ConfirmActionButton';\nexport * from './IconActionButton';\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/actions/index.ts"],"sourcesContent":["export * from './ConfirmActionButton';\nexport * from './IconActionButton';\n"],"mappings":""}

package/dist/context-actions/ContextActionUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextActionUtils.js","names":["isPromise","value","then","undefined","ContextActionUtils","disableAllActions","actionsDisabled","enableAllActions","isContextActionEvent","e","Array","isArray","contextActions","compareActions","a","b","group","_a$group","_b$group","order","_a$order","_b$order","title","_a$title","_b$title","sortActions","actions","sortedActions","slice","sort","isMacPlatform","platform","window","navigator","startsWith","getModifierKey","isModifierKeyDown","event","modifierKey","getMenuItems","actionsParam","includePromises","arguments","length","menuItems","i","action","newMenuItems","Promise","push","concat","filter","menuElement","getNextMenuItem","startIndex","delta","firstIndex","menuIndex","item","disabled","_defineProperty"],"sources":["../../src/context-actions/ContextActionUtils.ts"],"sourcesContent":["import { type IconDefinition } from '@deephaven/icons';\nimport type React from 'react';\nimport type { Shortcut } from '../shortcuts';\n\nexport type ResolvableContextAction =\n  | ContextAction\n  | Promise<ContextAction[]>\n  | (() => Promise<ContextAction[]> | ContextAction[] | ContextAction);\n\nexport type MenuItem = ContextAction | Promise<ContextAction[]>;\n\nexport interface ContextAction {\n  title?: string | JSX.Element;\n  description?: string;\n  action?: (event: Event) => void;\n  actions?: ResolvableContextAction[];\n  icon?: IconDefinition | React.ReactElement<unknown>;\n  iconColor?: string;\n  shortcut?: Shortcut;\n\n  /* Display text for the shortcut if the shortcut is not wired up through the Shortcut class */\n  shortcutText?: string;\n  isGlobal?: boolean;\n  group?: number;\n  order?: number;\n  disabled?: boolean;\n  menuElement?: React.ReactElement;\n  iconOutline?: boolean;\n}\n\nexport interface ContextActionEvent extends MouseEvent {\n  contextActions: ResolvableContextAction[];\n}\n\nexport function isPromise<A, T>(value: A | Promise<T>): value is Promise<T> {\n  return (value as Promise<T>).then !== undefined;\n}\n\nclass ContextActionUtils {\n  static actionsDisabled = false;\n\n  static disableAllActions(): void {\n    ContextActionUtils.actionsDisabled = true;\n  }\n\n  static enableAllActions(): void {\n    ContextActionUtils.actionsDisabled = false;\n  }\n\n  static isContextActionEvent(e: MouseEvent): e is ContextActionEvent {\n    return Array.isArray((e as ContextActionEvent).contextActions);\n  }\n\n  /**\n   * Compare two action items. Useful in Array.sort\n   * @param a First context action to compare\n   * @param b Second context action to compare\n   */\n  static compareActions(a: ContextAction, b: ContextAction): number {\n    if (a.group !== b.group) {\n      return (a.group ?? 0) > (b.group ?? 0) ? 1 : -1;\n    }\n\n    if (a.order !== b.order) {\n      return (a.order ?? 0) > (b.order ?? 0) ? 1 : -1;\n    }\n\n    if (a.title !== b.title) {\n      return (a.title ?? '') > (b.title ?? '') ? 1 : -1;\n    }\n\n    if (a !== b) {\n      return a > b ? 1 : -1;\n    }\n\n    return 0;\n  }\n\n  /**\n   *\n   * @param actions The array of actions to sort\n   */\n  static sortActions(actions: ContextAction[]): ContextAction[] {\n    if (actions == null || !Array.isArray(actions)) {\n      return [];\n    }\n\n    const sortedActions = actions.slice();\n    sortedActions.sort(ContextActionUtils.compareActions);\n    return sortedActions;\n  }\n\n  static isMacPlatform(): boolean {\n    const { platform } = window.navigator;\n    return platform.startsWith('Mac');\n  }\n\n  /**\n   * Retrieve the preferred modifier key based on the current platform\n   */\n  static getModifierKey(): 'metaKey' | 'ctrlKey' {\n    if (ContextActionUtils.isMacPlatform()) {\n      return 'metaKey';\n    }\n\n    return 'ctrlKey';\n  }\n\n  /**\n   * Returns true if the modifier key for the current platform is down for the event (Ctrl for windows/linux, Command (meta) for mac)\n   * @param event The event to get the meta key status from\n   */\n  static isModifierKeyDown(\n    event: KeyboardEvent | MouseEvent | React.KeyboardEvent | React.MouseEvent\n  ): boolean {\n    const modifierKey = ContextActionUtils.getModifierKey();\n    return event[modifierKey];\n  }\n\n  /**\n   * Returns the menu items for the provided context actions, or empty array if none found.\n   * @param actionsParam The actions to get menu items for\n   * @param includePromises Whether or not to include promises in the returned menu items\n   */\n  static getMenuItems(\n    actionsParam: ResolvableContextAction | ResolvableContextAction[],\n    includePromises?: true\n  ): MenuItem[];\n\n  // If ignoring promises, then the return type is narrowed\n  static getMenuItems(\n    actionsParam: ResolvableContextAction | ResolvableContextAction[],\n    includePromises: false\n  ): ContextAction[];\n\n  static getMenuItems(\n    actionsParam: ResolvableContextAction | ResolvableContextAction[],\n    includePromises = true\n  ): MenuItem[] {\n    let menuItems: MenuItem[] = [];\n    let actions = actionsParam;\n    if (!Array.isArray(actions)) {\n      actions = [actions];\n    }\n\n    for (let i = 0; i < actions.length; i += 1) {\n      const action = actions[i];\n      let newMenuItems:\n        | ContextAction\n        | ContextAction[]\n        | Promise<ContextAction[]>;\n      if (typeof action === 'function') {\n        newMenuItems = action();\n      } else {\n        newMenuItems = action;\n      }\n\n      if (newMenuItems != null) {\n        if (newMenuItems instanceof Promise) {\n          if (includePromises) {\n            menuItems.push(newMenuItems);\n          }\n        } else if (Array.isArray(newMenuItems)) {\n          menuItems = menuItems.concat(newMenuItems);\n        } else {\n          menuItems.push(newMenuItems);\n        }\n      }\n    }\n\n    menuItems = menuItems.filter(\n      action =>\n        (action as ContextAction).title !== undefined ||\n        (action as Promise<ContextAction[]>).then != null ||\n        (action as ContextAction).menuElement\n    );\n\n    return menuItems;\n  }\n\n  /**\n   * Returns the index of the next menu item in a list that doesn't have a disabled=true prop\n   * @param startIndex the starting position for the iteration\n   * @param delta the direction of travel, -1 or 1\n   * @param menuItems an array of menuItems\n   */\n  static getNextMenuItem(\n    startIndex: number,\n    delta: -1 | 1,\n    menuItems: MenuItem[]\n  ): number {\n    let firstIndex = startIndex;\n    if (firstIndex < 0 && delta < 0) {\n      // if menu index is -1 and delta -1 manually set start point\n      firstIndex = menuItems.length;\n    }\n    // find the next non disabled menu option, iterating the list only once\n    for (let i = 1; i < menuItems.length + 1; i += 1) {\n      const menuIndex =\n        (firstIndex + delta * i + menuItems.length) % menuItems.length;\n      const item = menuItems[menuIndex];\n      if (!(item instanceof Promise) && item.disabled !== true) {\n        return menuIndex;\n      }\n    }\n    return startIndex;\n  }\n}\n\nexport default ContextActionUtils;\n"],"mappings":";;;AAkCA,OAAO,SAASA,SAASA,CAAOC,KAAqB,EAAuB;EAC1E,OAAQA,KAAK,CAAgBC,IAAI,KAAKC,SAAS;AACjD;AAEA,MAAMC,kBAAkB,CAAC;EAGvB,OAAOC,iBAAiBA,CAAA,EAAS;IAC/BD,kBAAkB,CAACE,eAAe,GAAG,IAAI;EAC3C;EAEA,OAAOC,gBAAgBA,CAAA,EAAS;IAC9BH,kBAAkB,CAACE,eAAe,GAAG,KAAK;EAC5C;EAEA,OAAOE,oBAAoBA,CAACC,CAAa,EAA2B;IAClE,OAAOC,KAAK,CAACC,OAAO,CAAEF,CAAC,CAAwBG,cAAc,CAAC;EAChE;;EAEA;AACF;AACA;AACA;AACA;EACE,OAAOC,cAAcA,CAACC,CAAgB,EAAEC,CAAgB,EAAU;IAChE,IAAID,CAAC,CAACE,KAAK,KAAKD,CAAC,CAACC,KAAK,EAAE;MAAA,IAAAC,QAAA,EAAAC,QAAA;MACvB,OAAO,EAAAD,QAAA,GAACH,CAAC,CAACE,KAAK,cAAAC,QAAA,cAAAA,QAAA,GAAI,CAAC,MAAAC,QAAA,GAAKH,CAAC,CAACC,KAAK,cAAAE,QAAA,cAAAA,QAAA,GAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjD;IAEA,IAAIJ,CAAC,CAACK,KAAK,KAAKJ,CAAC,CAACI,KAAK,EAAE;MAAA,IAAAC,QAAA,EAAAC,QAAA;MACvB,OAAO,EAAAD,QAAA,GAACN,CAAC,CAACK,KAAK,cAAAC,QAAA,cAAAA,QAAA,GAAI,CAAC,MAAAC,QAAA,GAAKN,CAAC,CAACI,KAAK,cAAAE,QAAA,cAAAA,QAAA,GAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjD;IAEA,IAAIP,CAAC,CAACQ,KAAK,KAAKP,CAAC,CAACO,KAAK,EAAE;MAAA,IAAAC,QAAA,EAAAC,QAAA;MACvB,OAAO,EAAAD,QAAA,GAACT,CAAC,CAACQ,KAAK,cAAAC,QAAA,cAAAA,QAAA,GAAI,EAAE,MAAAC,QAAA,GAAKT,CAAC,CAACO,KAAK,cAAAE,QAAA,cAAAA,QAAA,GAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnD;IAEA,IAAIV,CAAC,KAAKC,CAAC,EAAE;MACX,OAAOD,CAAC,GAAGC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB;IAEA,OAAO,CAAC;EACV;;EAEA;AACF;AACA;AACA;EACE,OAAOU,WAAWA,CAACC,OAAwB,EAAmB;IAC5D,IAAIA,OAAO,IAAI,IAAI,IAAI,CAAChB,KAAK,CAACC,OAAO,CAACe,OAAO,CAAC,EAAE;MAC9C,OAAO,EAAE;IACX;IAEA,IAAMC,aAAa,GAAGD,OAAO,CAACE,KAAK,CAAC,CAAC;IACrCD,aAAa,CAACE,IAAI,CAACzB,kBAAkB,CAACS,cAAc,CAAC;IACrD,OAAOc,aAAa;EACtB;EAEA,OAAOG,aAAaA,CAAA,EAAY;IAC9B,IAAM;MAAEC;IAAS,CAAC,GAAGC,MAAM,CAACC,SAAS;IACrC,OAAOF,QAAQ,CAACG,UAAU,CAAC,KAAK,CAAC;EACnC;;EAEA;AACF;AACA;EACE,OAAOC,cAAcA,CAAA,EAA0B;IAC7C,IAAI/B,kBAAkB,CAAC0B,aAAa,CAAC,CAAC,EAAE;MACtC,OAAO,SAAS;IAClB;IAEA,OAAO,SAAS;EAClB;;EAEA;AACF;AACA;AACA;EACE,OAAOM,iBAAiBA,CACtBC,KAA0E,EACjE;IACT,IAAMC,WAAW,GAAGlC,kBAAkB,CAAC+B,cAAc,CAAC,CAAC;IACvD,OAAOE,KAAK,CAACC,WAAW,CAAC;EAC3B;;EAEA;AACF;AACA;AACA;AACA;;EAME;;EAMA,OAAOC,YAAYA,CACjBC,YAAiE,EAErD;IAAA,IADZC,eAAe,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAvC,SAAA,GAAAuC,SAAA,MAAG,IAAI;IAEtB,IAAIE,SAAqB,GAAG,EAAE;IAC9B,IAAIlB,OAAO,GAAGc,YAAY;IAC1B,IAAI,CAAC9B,KAAK,CAACC,OAAO,CAACe,OAAO,CAAC,EAAE;MAC3BA,OAAO,GAAG,CAACA,OAAO,CAAC;IACrB;IAEA,KAAK,IAAImB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGnB,OAAO,CAACiB,MAAM,EAAEE,CAAC,IAAI,CAAC,EAAE;MAC1C,IAAMC,MAAM,GAAGpB,OAAO,CAACmB,CAAC,CAAC;MACzB,IAAIE,YAGwB;MAC5B,IAAI,OAAOD,MAAM,KAAK,UAAU,EAAE;QAChCC,YAAY,GAAGD,MAAM,CAAC,CAAC;MACzB,CAAC,MAAM;QACLC,YAAY,GAAGD,MAAM;MACvB;MAEA,IAAIC,YAAY,IAAI,IAAI,EAAE;QACxB,IAAIA,YAAY,YAAYC,OAAO,EAAE;UACnC,IAAIP,eAAe,EAAE;YACnBG,SAAS,CAACK,IAAI,CAACF,YAAY,CAAC;UAC9B;QACF,CAAC,MAAM,IAAIrC,KAAK,CAACC,OAAO,CAACoC,YAAY,CAAC,EAAE;UACtCH,SAAS,GAAGA,SAAS,CAACM,MAAM,CAACH,YAAY,CAAC;QAC5C,CAAC,MAAM;UACLH,SAAS,CAACK,IAAI,CAACF,YAAY,CAAC;QAC9B;MACF;IACF;IAEAH,SAAS,GAAGA,SAAS,CAACO,MAAM,CAC1BL,MAAM,IACHA,MAAM,CAAmBxB,KAAK,KAAKnB,SAAS,IAC5C2C,MAAM,CAA8B5C,IAAI,IAAI,IAAI,IAChD4C,MAAM,CAAmBM,WAC9B,CAAC;IAED,OAAOR,SAAS;EAClB;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOS,eAAeA,CACpBC,UAAkB,EAClBC,KAAa,EACbX,SAAqB,EACb;IACR,IAAIY,UAAU,GAAGF,UAAU;IAC3B,IAAIE,UAAU,GAAG,CAAC,IAAID,KAAK,GAAG,CAAC,EAAE;MAC/B;MACAC,UAAU,GAAGZ,SAAS,CAACD,MAAM;IAC/B;IACA;IACA,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,SAAS,CAACD,MAAM,GAAG,CAAC,EAAEE,CAAC,IAAI,CAAC,EAAE;MAChD,IAAMY,SAAS,GACb,CAACD,UAAU,GAAGD,KAAK,GAAGV,CAAC,GAAGD,SAAS,CAACD,MAAM,IAAIC,SAAS,CAACD,MAAM;MAChE,IAAMe,IAAI,GAAGd,SAAS,CAACa,SAAS,CAAC;MACjC,IAAI,EAAEC,IAAI,YAAYV,OAAO,CAAC,IAAIU,IAAI,CAACC,QAAQ,KAAK,IAAI,EAAE;QACxD,OAAOF,SAAS;MAClB;IACF;IACA,OAAOH,UAAU;EACnB;AACF;AAACM,eAAA,CAzKKxD,kBAAkB,qBACG,KAAK;AA0KhC,eAAeA,kBAAkB","ignoreList":[]}
+{"version":3,"file":"ContextActionUtils.js","names":["isPromise","value","then","undefined","ContextActionUtils","disableAllActions","actionsDisabled","enableAllActions","isContextActionEvent","e","Array","isArray","contextActions","compareActions","a","b","group","_a$group","_b$group","order","_a$order","_b$order","title","_a$title","_b$title","sortActions","actions","sortedActions","slice","sort","isMacPlatform","platform","window","navigator","startsWith","getModifierKey","isModifierKeyDown","event","modifierKey","getMenuItems","actionsParam","includePromises","arguments","length","menuItems","i","action","newMenuItems","Promise","push","concat","filter","menuElement","getNextMenuItem","startIndex","delta","firstIndex","menuIndex","item","disabled","_defineProperty"],"sources":["../../src/context-actions/ContextActionUtils.ts"],"sourcesContent":["import { type IconDefinition } from '@deephaven/icons';\nimport type React from 'react';\nimport type { Shortcut } from '../shortcuts';\n\nexport type ResolvableContextAction =\n  | ContextAction\n  | Promise<ContextAction[]>\n  | (() => Promise<ContextAction[]> | ContextAction[] | ContextAction);\n\nexport type MenuItem = ContextAction | Promise<ContextAction[]>;\n\nexport interface ContextAction {\n  title?: string | JSX.Element;\n  description?: string;\n  action?: (event: Event) => void;\n  actions?: ResolvableContextAction[];\n  icon?: IconDefinition | React.ReactElement<unknown>;\n  iconColor?: string;\n  shortcut?: Shortcut;\n\n  /* Display text for the shortcut if the shortcut is not wired up through the Shortcut class */\n  shortcutText?: string;\n  isGlobal?: boolean;\n  group?: number;\n  order?: number;\n  disabled?: boolean;\n  menuElement?: React.ReactElement;\n  iconOutline?: boolean;\n}\n\nexport interface ContextActionEvent extends MouseEvent {\n  contextActions: ResolvableContextAction[];\n}\n\nexport function isPromise<A, T>(value: A | Promise<T>): value is Promise<T> {\n  return (value as Promise<T>).then !== undefined;\n}\n\nclass ContextActionUtils {\n  static actionsDisabled = false;\n\n  static disableAllActions(): void {\n    ContextActionUtils.actionsDisabled = true;\n  }\n\n  static enableAllActions(): void {\n    ContextActionUtils.actionsDisabled = false;\n  }\n\n  static isContextActionEvent(e: MouseEvent): e is ContextActionEvent {\n    return Array.isArray((e as ContextActionEvent).contextActions);\n  }\n\n  /**\n   * Compare two action items. Useful in Array.sort\n   * @param a First context action to compare\n   * @param b Second context action to compare\n   */\n  static compareActions(a: ContextAction, b: ContextAction): number {\n    if (a.group !== b.group) {\n      return (a.group ?? 0) > (b.group ?? 0) ? 1 : -1;\n    }\n\n    if (a.order !== b.order) {\n      return (a.order ?? 0) > (b.order ?? 0) ? 1 : -1;\n    }\n\n    if (a.title !== b.title) {\n      return (a.title ?? '') > (b.title ?? '') ? 1 : -1;\n    }\n\n    if (a !== b) {\n      return a > b ? 1 : -1;\n    }\n\n    return 0;\n  }\n\n  /**\n   *\n   * @param actions The array of actions to sort\n   */\n  static sortActions(actions: ContextAction[]): ContextAction[] {\n    if (actions == null || !Array.isArray(actions)) {\n      return [];\n    }\n\n    const sortedActions = actions.slice();\n    sortedActions.sort(ContextActionUtils.compareActions);\n    return sortedActions;\n  }\n\n  static isMacPlatform(): boolean {\n    const { platform } = window.navigator;\n    return platform.startsWith('Mac');\n  }\n\n  /**\n   * Retrieve the preferred modifier key based on the current platform\n   */\n  static getModifierKey(): 'metaKey' | 'ctrlKey' {\n    if (ContextActionUtils.isMacPlatform()) {\n      return 'metaKey';\n    }\n\n    return 'ctrlKey';\n  }\n\n  /**\n   * Returns true if the modifier key for the current platform is down for the event (Ctrl for windows/linux, Command (meta) for mac)\n   * @param event The event to get the meta key status from\n   */\n  static isModifierKeyDown(\n    event: KeyboardEvent | MouseEvent | React.KeyboardEvent | React.MouseEvent\n  ): boolean {\n    const modifierKey = ContextActionUtils.getModifierKey();\n    return event[modifierKey];\n  }\n\n  /**\n   * Returns the menu items for the provided context actions, or empty array if none found.\n   * @param actionsParam The actions to get menu items for\n   * @param includePromises Whether or not to include promises in the returned menu items\n   */\n  static getMenuItems(\n    actionsParam: ResolvableContextAction | ResolvableContextAction[],\n    includePromises?: true\n  ): MenuItem[];\n\n  // If ignoring promises, then the return type is narrowed\n  static getMenuItems(\n    actionsParam: ResolvableContextAction | ResolvableContextAction[],\n    includePromises: false\n  ): ContextAction[];\n\n  static getMenuItems(\n    actionsParam: ResolvableContextAction | ResolvableContextAction[],\n    includePromises = true\n  ): MenuItem[] {\n    let menuItems: MenuItem[] = [];\n    let actions = actionsParam;\n    if (!Array.isArray(actions)) {\n      actions = [actions];\n    }\n\n    for (let i = 0; i < actions.length; i += 1) {\n      const action = actions[i];\n      let newMenuItems:\n        | ContextAction\n        | ContextAction[]\n        | Promise<ContextAction[]>;\n      if (typeof action === 'function') {\n        newMenuItems = action();\n      } else {\n        newMenuItems = action;\n      }\n\n      if (newMenuItems != null) {\n        if (newMenuItems instanceof Promise) {\n          if (includePromises) {\n            menuItems.push(newMenuItems);\n          }\n        } else if (Array.isArray(newMenuItems)) {\n          menuItems = menuItems.concat(newMenuItems);\n        } else {\n          menuItems.push(newMenuItems);\n        }\n      }\n    }\n\n    menuItems = menuItems.filter(\n      action =>\n        (action as ContextAction).title !== undefined ||\n        (action as Promise<ContextAction[]>).then != null ||\n        (action as ContextAction).menuElement\n    );\n\n    return menuItems;\n  }\n\n  /**\n   * Returns the index of the next menu item in a list that doesn't have a disabled=true prop\n   * @param startIndex the starting position for the iteration\n   * @param delta the direction of travel, -1 or 1\n   * @param menuItems an array of menuItems\n   */\n  static getNextMenuItem(\n    startIndex: number,\n    delta: -1 | 1,\n    menuItems: MenuItem[]\n  ): number {\n    let firstIndex = startIndex;\n    if (firstIndex < 0 && delta < 0) {\n      // if menu index is -1 and delta -1 manually set start point\n      firstIndex = menuItems.length;\n    }\n    // find the next non disabled menu option, iterating the list only once\n    for (let i = 1; i < menuItems.length + 1; i += 1) {\n      const menuIndex =\n        (firstIndex + delta * i + menuItems.length) % menuItems.length;\n      const item = menuItems[menuIndex];\n      if (!(item instanceof Promise) && item.disabled !== true) {\n        return menuIndex;\n      }\n    }\n    return startIndex;\n  }\n}\n\nexport default ContextActionUtils;\n"],"mappings":";;;AAkCA,OAAO,SAASA,SAASA,CAAOC,KAAqB,EAAuB;EAC1E,OAAQA,KAAK,CAAgBC,IAAI,KAAKC,SAAS;AACjD;AAEA,MAAMC,kBAAkB,CAAC;EAGvB,OAAOC,iBAAiBA,CAAA,EAAS;IAC/BD,kBAAkB,CAACE,eAAe,GAAG,IAAI;EAC3C;EAEA,OAAOC,gBAAgBA,CAAA,EAAS;IAC9BH,kBAAkB,CAACE,eAAe,GAAG,KAAK;EAC5C;EAEA,OAAOE,oBAAoBA,CAACC,CAAa,EAA2B;IAClE,OAAOC,KAAK,CAACC,OAAO,CAAEF,CAAC,CAAwBG,cAAc,CAAC;EAChE;;EAEA;AACF;AACA;AACA;AACA;EACE,OAAOC,cAAcA,CAACC,CAAgB,EAAEC,CAAgB,EAAU;IAChE,IAAID,CAAC,CAACE,KAAK,KAAKD,CAAC,CAACC,KAAK,EAAE;MAAA,IAAAC,QAAA,EAAAC,QAAA;MACvB,OAAO,EAAAD,QAAA,GAACH,CAAC,CAACE,KAAK,cAAAC,QAAA,cAAAA,QAAA,GAAI,CAAC,MAAAC,QAAA,GAAKH,CAAC,CAACC,KAAK,cAAAE,QAAA,cAAAA,QAAA,GAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjD;IAEA,IAAIJ,CAAC,CAACK,KAAK,KAAKJ,CAAC,CAACI,KAAK,EAAE;MAAA,IAAAC,QAAA,EAAAC,QAAA;MACvB,OAAO,EAAAD,QAAA,GAACN,CAAC,CAACK,KAAK,cAAAC,QAAA,cAAAA,QAAA,GAAI,CAAC,MAAAC,QAAA,GAAKN,CAAC,CAACI,KAAK,cAAAE,QAAA,cAAAA,QAAA,GAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjD;IAEA,IAAIP,CAAC,CAACQ,KAAK,KAAKP,CAAC,CAACO,KAAK,EAAE;MAAA,IAAAC,QAAA,EAAAC,QAAA;MACvB,OAAO,EAAAD,QAAA,GAACT,CAAC,CAACQ,KAAK,cAAAC,QAAA,cAAAA,QAAA,GAAI,EAAE,MAAAC,QAAA,GAAKT,CAAC,CAACO,KAAK,cAAAE,QAAA,cAAAA,QAAA,GAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnD;IAEA,IAAIV,CAAC,KAAKC,CAAC,EAAE;MACX,OAAOD,CAAC,GAAGC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB;IAEA,OAAO,CAAC;EACV;;EAEA;AACF;AACA;AACA;EACE,OAAOU,WAAWA,CAACC,OAAwB,EAAmB;IAC5D,IAAIA,OAAO,IAAI,IAAI,IAAI,CAAChB,KAAK,CAACC,OAAO,CAACe,OAAO,CAAC,EAAE;MAC9C,OAAO,EAAE;IACX;IAEA,IAAMC,aAAa,GAAGD,OAAO,CAACE,KAAK,CAAC,CAAC;IACrCD,aAAa,CAACE,IAAI,CAACzB,kBAAkB,CAACS,cAAc,CAAC;IACrD,OAAOc,aAAa;EACtB;EAEA,OAAOG,aAAaA,CAAA,EAAY;IAC9B,IAAM;MAAEC;IAAS,CAAC,GAAGC,MAAM,CAACC,SAAS;IACrC,OAAOF,QAAQ,CAACG,UAAU,CAAC,KAAK,CAAC;EACnC;;EAEA;AACF;AACA;EACE,OAAOC,cAAcA,CAAA,EAA0B;IAC7C,IAAI/B,kBAAkB,CAAC0B,aAAa,CAAC,CAAC,EAAE;MACtC,OAAO,SAAS;IAClB;IAEA,OAAO,SAAS;EAClB;;EAEA;AACF;AACA;AACA;EACE,OAAOM,iBAAiBA,CACtBC,KAA0E,EACjE;IACT,IAAMC,WAAW,GAAGlC,kBAAkB,CAAC+B,cAAc,CAAC,CAAC;IACvD,OAAOE,KAAK,CAACC,WAAW,CAAC;EAC3B;;EAEA;AACF;AACA;AACA;AACA;;EAME;;EAMA,OAAOC,YAAYA,CACjBC,YAAiE,EAErD;IAAA,IADZC,eAAe,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAvC,SAAA,GAAAuC,SAAA,MAAG,IAAI;IAEtB,IAAIE,SAAqB,GAAG,EAAE;IAC9B,IAAIlB,OAAO,GAAGc,YAAY;IAC1B,IAAI,CAAC9B,KAAK,CAACC,OAAO,CAACe,OAAO,CAAC,EAAE;MAC3BA,OAAO,GAAG,CAACA,OAAO,CAAC;IACrB;IAEA,KAAK,IAAImB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGnB,OAAO,CAACiB,MAAM,EAAEE,CAAC,IAAI,CAAC,EAAE;MAC1C,IAAMC,MAAM,GAAGpB,OAAO,CAACmB,CAAC,CAAC;MACzB,IAAIE,YAGwB;MAC5B,IAAI,OAAOD,MAAM,KAAK,UAAU,EAAE;QAChCC,YAAY,GAAGD,MAAM,CAAC,CAAC;MACzB,CAAC,MAAM;QACLC,YAAY,GAAGD,MAAM;MACvB;MAEA,IAAIC,YAAY,IAAI,IAAI,EAAE;QACxB,IAAIA,YAAY,YAAYC,OAAO,EAAE;UACnC,IAAIP,eAAe,EAAE;YACnBG,SAAS,CAACK,IAAI,CAACF,YAAY,CAAC;UAC9B;QACF,CAAC,MAAM,IAAIrC,KAAK,CAACC,OAAO,CAACoC,YAAY,CAAC,EAAE;UACtCH,SAAS,GAAGA,SAAS,CAACM,MAAM,CAACH,YAAY,CAAC;QAC5C,CAAC,MAAM;UACLH,SAAS,CAACK,IAAI,CAACF,YAAY,CAAC;QAC9B;MACF;IACF;IAEAH,SAAS,GAAGA,SAAS,CAACO,MAAM,CAC1BL,MAAM,IACHA,MAAM,CAAmBxB,KAAK,KAAKnB,SAAS,IAC5C2C,MAAM,CAA8B5C,IAAI,IAAI,IAAI,IAChD4C,MAAM,CAAmBM,WAC9B,CAAC;IAED,OAAOR,SAAS;EAClB;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOS,eAAeA,CACpBC,UAAkB,EAClBC,KAAa,EACbX,SAAqB,EACb;IACR,IAAIY,UAAU,GAAGF,UAAU;IAC3B,IAAIE,UAAU,GAAG,CAAC,IAAID,KAAK,GAAG,CAAC,EAAE;MAC/B;MACAC,UAAU,GAAGZ,SAAS,CAACD,MAAM;IAC/B;IACA;IACA,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,SAAS,CAACD,MAAM,GAAG,CAAC,EAAEE,CAAC,IAAI,CAAC,EAAE;MAChD,IAAMY,SAAS,GACb,CAACD,UAAU,GAAGD,KAAK,GAAGV,CAAC,GAAGD,SAAS,CAACD,MAAM,IAAIC,SAAS,CAACD,MAAM;MAChE,IAAMe,IAAI,GAAGd,SAAS,CAACa,SAAS,CAAC;MACjC,IAAI,EAAEC,IAAI,YAAYV,OAAO,CAAC,IAAIU,IAAI,CAACC,QAAQ,KAAK,IAAI,EAAE;QACxD,OAAOF,SAAS;MAClB;IACF;IACA,OAAOH,UAAU;EACnB;AACF;AAACM,eAAA,CAzKKxD,kBAAkB,qBACG,KAAK;AA0KhC,eAAeA,kBAAkB"}

package/dist/context-actions/ContextActions.css

@@ -93,7 +93,7 @@
   justify-self: flex-end;
 }
 .context-menu-container .btn-context-menu .submenu-indicator.disabled {
-  color: var(--dh-color-input-disabled-fg);
+  color: var(--dh-color-text-disabled);
 }
 .context-menu-container .btn-context-menu.menu-title {
   user-select: none;
@@ -121,7 +121,7 @@
   color: var(--dh-color-gray-700);
 }
 .context-menu-container .btn-context-menu.disabled {
-  color: var(--dh-color-input-disabled-fg);
+  color: var(--dh-color-text-disabled);
   background-color: var(--dh-color-popover-bg);
 }
 .context-menu-container .context-menu-item:last-child > .btn-context-menu {

package/dist/context-actions/ContextActions.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../scss/bootstrap_overrides.scss","../../src/context-actions/ContextActions.scss","../../../../node_modules/bootstrap/scss/_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACzLA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,SCmqBkC;;ADjqBlC;EACE;;;AAIJ;EACE;EACA;EACA,kBDoOe;ECnOf,ODoOkB;ECnOlB;EACA;EACA;EACA;EACA,eD4Hc;EC3Hd;EACA,YD2HW;EC1HX;EACA;;AAEA;EAQE;;AAGF;EACE;EACA;EACA,kBD5BO;;AC+BT;EACE;EACA,ODsMgB;ECrMhB;EACA;EACA;EACA;;AAGF;EACE;EACA;EAIA;EACA,ODwLgB;ECvLhB;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE,QDkKW;ECjKX;;AAGF;EACE;EACA;EACA;;AAGF;EACE,ODpFK;ECqFL;EACA;EACA;EACA;EACA;;AAGF;EACE,OD+Ic;EC9Id;EACA;;AAEF;EACE,OD2IuB;;ACvI3B;EACE;EACA;EACA,YDxFS;;AC2FX;EACE,kBDiI+B;;AC9HjC;AAAA;EAEE,kBD6HsB;;AC1HxB;EACE;;AAGF;AAAA;AAAA;EAGE,ODoHyB;;AClHzB;AAAA;AAAA;EACE,ODhIK;;ACoIT;EACE,ODyGyB;ECxGzB,kBDsGa;;ACnGf;EACE;EACA,4BDDY;;ACId;EACE,wBDLY;ECMZ,yBDNY;;ACSd;EACE;EACA,ODrJO;ECsJP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE","file":"ContextActions.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 './util.scss';\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// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\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, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\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$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-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '../../scss/custom.scss';\n\n$hr-bg-color: $gray-700;\n\n.context-actions-listener {\n  display: none;\n}\n\n.context-menu-root {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: $zindex-popover;\n\n  &.active {\n    pointer-events: all;\n  }\n}\n\n.context-menu-container {\n  pointer-events: auto;\n  position: fixed;\n  background-color: $contextmenu-bg;\n  color: $contextmenu-color;\n  z-index: initial;\n  min-width: 10rem;\n  max-width: 30rem;\n  text-align: left;\n  border-radius: $border-radius;\n  background-clip: border-box;\n  box-shadow: $box-shadow;\n  max-height: 100vh;\n  overflow-y: auto;\n\n  &.has-overflow {\n    // Fixes #IDS-7035. Intrinsic width of \"overflow:auto\"\n    // element doesn't grow to accomodate its scrollbar.\n    // https://bugzilla.mozilla.org/show_bug.cgi?id=764076\n    // class is added in the verifyPosition calc, forcing a redraw\n    // that will include a forced scrollbar as part of intrinsic width\n\n    //update: happens in safari as well\n    overflow-y: scroll;\n  }\n\n  hr {\n    margin-top: 0;\n    margin-bottom: 0;\n    background-color: $hr-bg-color;\n  }\n\n  .custom-menu-item {\n    width: 100%;\n    color: $contextmenu-color;\n    white-space: nowrap;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n  }\n\n  .btn-context-menu {\n    border: none;\n    width: 100%;\n    // not sure exactly why, but safari is creating an uncessary scrollbar\n    // if these are rem units that cause a fractional pixel\n    // maybe calculating overflow with full precision when in fixed parent\n    padding: 4px 8px;\n    color: $contextmenu-color;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n    cursor: pointer;\n    user-select: none;\n\n    .btn-context-menu-wrapper {\n      // firefox can misbehave with buttons as display: flex\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n\n    .icon {\n      margin-right: 0.5rem;\n      width: 1rem;\n      flex-grow: 0;\n      text-align: center;\n    }\n    .icon.outline {\n      stroke: $contextmenu-bg;\n      stroke-width: 60;\n    }\n\n    .title {\n      flex: 1 1 auto;\n      text-align: left;\n      white-space: nowrap;\n    }\n\n    .shortcut {\n      color: $text-muted;\n      margin-left: 0.5rem;\n      justify-self: flex-end;\n      flex: 1 1 auto;\n      text-align: right;\n      white-space: nowrap;\n    }\n\n    .submenu-indicator {\n      color: $contextmenu-color;\n      flex-grow: 0;\n      justify-self: flex-end;\n    }\n    .submenu-indicator.disabled {\n      color: $contextmenu-disabled-color;\n    }\n  }\n\n  .btn-context-menu.menu-title {\n    user-select: none;\n    cursor: default;\n    background: $content-bg;\n  }\n\n  .btn-context-menu.keyboard-active {\n    background-color: $contextmenu-keyboard-selected-bg;\n  }\n\n  .btn-context-menu:focus,\n  .btn-context-menu.active {\n    background-color: $contextmenu-selected-bg;\n  }\n\n  .btn-context-menu:focus {\n    outline: none;\n  }\n\n  .btn-context-menu.active,\n  .btn-context-menu.keyboard-active,\n  .btn-context-menu:focus:not(.disabled) {\n    color: $contextmenu-selected-color;\n\n    .shortcut {\n      color: $gray-300;\n    }\n  }\n\n  .btn-context-menu.disabled {\n    color: $contextmenu-disabled-color;\n    background-color: $contextmenu-bg;\n  }\n\n  .context-menu-item:last-child > .btn-context-menu {\n    border-bottom-left-radius: $border-radius;\n    border-bottom-right-radius: $border-radius;\n  }\n\n  .context-menu-item:first-child > .btn-context-menu {\n    border-top-left-radius: $border-radius;\n    border-top-right-radius: $border-radius;\n  }\n\n  .context-menu-group-header {\n    margin: $spacer-2 $input-btn-padding-x $spacer-1 $input-btn-padding-x;\n    color: $gray-300;\n    white-space: nowrap;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n    cursor: default;\n    user-select: none;\n    font-weight: 500;\n    border-bottom: 1px solid var(--dh-color-hr);\n  }\n\n  .loading {\n    padding: 0.25rem 1.5rem;\n    width: 100%;\n    display: block;\n    text-align: center;\n  }\n}\n\n.context-menu-container:focus {\n  outline: none;\n}\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white:    #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black:    #000 !default;\n\n$grays: () !default;\n$grays: map-merge(\n  (\n    \"100\": $gray-100,\n    \"200\": $gray-200,\n    \"300\": $gray-300,\n    \"400\": $gray-400,\n    \"500\": $gray-500,\n    \"600\": $gray-600,\n    \"700\": $gray-700,\n    \"800\": $gray-800,\n    \"900\": $gray-900\n  ),\n  $grays\n);\n\n$blue:    #007bff !default;\n$indigo:  #6610f2 !default;\n$purple:  #6f42c1 !default;\n$pink:    #e83e8c !default;\n$red:     #dc3545 !default;\n$orange:  #fd7e14 !default;\n$yellow:  #ffc107 !default;\n$green:   #28a745 !default;\n$teal:    #20c997 !default;\n$cyan:    #17a2b8 !default;\n\n$colors: () !default;\n$colors: map-merge(\n  (\n    \"blue\":       $blue,\n    \"indigo\":     $indigo,\n    \"purple\":     $purple,\n    \"pink\":       $pink,\n    \"red\":        $red,\n    \"orange\":     $orange,\n    \"yellow\":     $yellow,\n    \"green\":      $green,\n    \"teal\":       $teal,\n    \"cyan\":       $cyan,\n    \"white\":      $white,\n    \"gray\":       $gray-600,\n    \"gray-dark\":  $gray-800\n  ),\n  $colors\n);\n\n$primary:       $blue !default;\n$secondary:     $gray-600 !default;\n$success:       $green !default;\n$info:          $cyan !default;\n$warning:       $yellow !default;\n$danger:        $red !default;\n$light:         $gray-100 !default;\n$dark:          $gray-800 !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    \"primary\":    $primary,\n    \"secondary\":  $secondary,\n    \"success\":    $success,\n    \"info\":       $info,\n    \"warning\":    $warning,\n    \"danger\":     $danger,\n    \"light\":      $light,\n    \"dark\":       $dark\n  ),\n  $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval:      8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold:  150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark:             $gray-900 !default;\n$yiq-text-light:            $white !default;\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n  (\"<\", \"%3c\"),\n  (\">\", \"%3e\"),\n  (\"#\", \"%23\"),\n  (\"(\", \"%28\"),\n  (\")\", \"%29\"),\n) !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret:                                true !default;\n$enable-rounded:                              true !default;\n$enable-shadows:                              false !default;\n$enable-gradients:                            false !default;\n$enable-transitions:                          true !default;\n$enable-prefers-reduced-motion-media-query:   true !default;\n$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes:                         true !default;\n$enable-pointer-cursor-for-buttons:           true !default;\n$enable-print-styles:                         true !default;\n$enable-responsive-font-sizes:                false !default;\n$enable-validation-icons:                     true !default;\n$enable-deprecation-messages:                 true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n$spacers: map-merge(\n  (\n    0: 0,\n    1: ($spacer * .25),\n    2: ($spacer * .5),\n    3: $spacer,\n    4: ($spacer * 1.5),\n    5: ($spacer * 3)\n  ),\n  $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n$sizes: map-merge(\n  (\n    25: 25%,\n    50: 50%,\n    75: 75%,\n    100: 100%,\n    auto: auto\n  ),\n  $sizes\n);\n\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white !default;\n$body-color:                $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color:                              theme-color(\"primary\") !default;\n$link-decoration:                         none !default;\n$link-hover-color:                        darken($link-color, 15%) !default;\n$link-hover-decoration:                   underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns:                12 !default;\n$grid-gutter-width:           30px !default;\n$grid-row-columns:            6 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg:              1.5 !default;\n$line-height-sm:              1.5 !default;\n\n$border-width:                1px !default;\n$border-color:                $gray-300 !default;\n\n$border-radius:               .25rem !default;\n$border-radius-lg:            .3rem !default;\n$border-radius-sm:            .2rem !default;\n\n$rounded-pill:                50rem !default;\n\n$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color:      $white !default;\n$component-active-bg:         theme-color(\"primary\") !default;\n\n$caret-width:                 .3em !default;\n$caret-vertical-align:        $caret-width * .85 !default;\n$caret-spacing:               $caret-width * .85 !default;\n\n$transition-base:             all .2s ease-in-out !default;\n$transition-fade:             opacity .15s linear !default;\n$transition-collapse:         height .35s ease !default;\n$transition-collapse-width:   width .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n$embed-responsive-aspect-ratios: join(\n  (\n    (21 9),\n    (16 9),\n    (4 3),\n    (1 1),\n  ),\n  $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base:            $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg:                $font-size-base * 1.25 !default;\n$font-size-sm:                $font-size-base * .875 !default;\n\n$font-weight-lighter:         lighter !default;\n$font-weight-light:           300 !default;\n$font-weight-normal:          400 !default;\n$font-weight-bold:            700 !default;\n$font-weight-bolder:          bolder !default;\n\n$font-weight-base:            $font-weight-normal !default;\n$line-height-base:            1.5 !default;\n\n$h1-font-size:                $font-size-base * 2.5 !default;\n$h2-font-size:                $font-size-base * 2 !default;\n$h3-font-size:                $font-size-base * 1.75 !default;\n$h4-font-size:                $font-size-base * 1.5 !default;\n$h5-font-size:                $font-size-base * 1.25 !default;\n$h6-font-size:                $font-size-base !default;\n\n$headings-margin-bottom:      $spacer * .5 !default;\n$headings-font-family:        null !default;\n$headings-font-weight:        500 !default;\n$headings-line-height:        1.2 !default;\n$headings-color:              null !default;\n\n$display1-size:               6rem !default;\n$display2-size:               5.5rem !default;\n$display3-size:               4.5rem !default;\n$display4-size:               3.5rem !default;\n\n$display1-weight:             300 !default;\n$display2-weight:             300 !default;\n$display3-weight:             300 !default;\n$display4-weight:             300 !default;\n$display-line-height:         $headings-line-height !default;\n\n$lead-font-size:              $font-size-base * 1.25 !default;\n$lead-font-weight:            300 !default;\n\n$small-font-size:             .875em !default;\n\n$text-muted:                  $gray-600 !default;\n\n$blockquote-small-color:      $gray-600 !default;\n$blockquote-small-font-size:  $small-font-size !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n\n$hr-border-color:             rgba($black, .1) !default;\n$hr-border-width:             $border-width !default;\n\n$mark-padding:                .2em !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     #fcf8e3 !default;\n\n$hr-margin-y:                 $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding:          .75rem !default;\n$table-cell-padding-sm:       .3rem !default;\n\n$table-color:                 $body-color !default;\n$table-bg:                    null !default;\n$table-accent-bg:             rgba($black, .05) !default;\n$table-hover-color:           $table-color !default;\n$table-hover-bg:              rgba($black, .075) !default;\n$table-active-bg:             $table-hover-bg !default;\n\n$table-border-width:          $border-width !default;\n$table-border-color:          $border-color !default;\n\n$table-head-bg:               $gray-200 !default;\n$table-head-color:            $gray-700 !default;\n$table-th-font-weight:        null !default;\n\n$table-dark-color:            $white !default;\n$table-dark-bg:               $gray-800 !default;\n$table-dark-accent-bg:        rgba($white, .05) !default;\n$table-dark-hover-color:      $table-dark-color !default;\n$table-dark-hover-bg:         rgba($white, .075) !default;\n$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;\n\n$table-striped-order:         odd !default;\n\n$table-caption-color:         $text-muted !default;\n\n$table-bg-level:              -9 !default;\n$table-border-level:          -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y:         .375rem !default;\n$input-btn-padding-x:         .75rem !default;\n$input-btn-font-family:       null !default;\n$input-btn-font-size:         $font-size-base !default;\n$input-btn-line-height:       $line-height-base !default;\n\n$input-btn-focus-width:       .2rem !default;\n$input-btn-focus-color:       rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm:      .25rem !default;\n$input-btn-padding-x-sm:      .5rem !default;\n$input-btn-font-size-sm:      $font-size-sm !default;\n$input-btn-line-height-sm:    $line-height-sm !default;\n\n$input-btn-padding-y-lg:      .5rem !default;\n$input-btn-padding-x-lg:      1rem !default;\n$input-btn-font-size-lg:      $font-size-lg !default;\n$input-btn-line-height-lg:    $line-height-lg !default;\n\n$input-btn-border-width:      $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y:               $input-btn-padding-y !default;\n$btn-padding-x:               $input-btn-padding-x !default;\n$btn-font-family:             $input-btn-font-family !default;\n$btn-font-size:               $input-btn-font-size !default;\n$btn-line-height:             $input-btn-line-height !default;\n$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm:            $input-btn-padding-y-sm !default;\n$btn-padding-x-sm:            $input-btn-padding-x-sm !default;\n$btn-font-size-sm:            $input-btn-font-size-sm !default;\n$btn-line-height-sm:          $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg:            $input-btn-padding-y-lg !default;\n$btn-padding-x-lg:            $input-btn-padding-x-lg !default;\n$btn-font-size-lg:            $input-btn-font-size-lg !default;\n$btn-line-height-lg:          $input-btn-line-height-lg !default;\n\n$btn-border-width:            $input-btn-border-width !default;\n\n$btn-font-weight:             $font-weight-normal !default;\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width:             $input-btn-focus-width !default;\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity:        .65 !default;\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color:     $gray-600 !default;\n\n$btn-block-spacing-y:         .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius:           $border-radius !default;\n$btn-border-radius-lg:        $border-radius-lg !default;\n$btn-border-radius-sm:        $border-radius-sm !default;\n\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom:                   .5rem !default;\n\n$input-padding-y:                       $input-btn-padding-y !default;\n$input-padding-x:                       $input-btn-padding-x !default;\n$input-font-family:                     $input-btn-font-family !default;\n$input-font-size:                       $input-btn-font-size !default;\n$input-font-weight:                     $font-weight-base !default;\n$input-line-height:                     $input-btn-line-height !default;\n\n$input-padding-y-sm:                    $input-btn-padding-y-sm !default;\n$input-padding-x-sm:                    $input-btn-padding-x-sm !default;\n$input-font-size-sm:                    $input-btn-font-size-sm !default;\n$input-line-height-sm:                  $input-btn-line-height-sm !default;\n\n$input-padding-y-lg:                    $input-btn-padding-y-lg !default;\n$input-padding-x-lg:                    $input-btn-padding-x-lg !default;\n$input-font-size-lg:                    $input-btn-font-size-lg !default;\n$input-line-height-lg:                  $input-btn-line-height-lg !default;\n\n$input-bg:                              $white !default;\n$input-disabled-bg:                     $gray-200 !default;\n\n$input-color:                           $gray-700 !default;\n$input-border-color:                    $gray-400 !default;\n$input-border-width:                    $input-btn-border-width !default;\n$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius:                   $border-radius !default;\n$input-border-radius-lg:                $border-radius-lg !default;\n$input-border-radius-sm:                $border-radius-sm !default;\n\n$input-focus-bg:                        $input-bg !default;\n$input-focus-border-color:              lighten($component-active-bg, 25%) !default;\n$input-focus-color:                     $input-color !default;\n$input-focus-width:                     $input-btn-focus-width !default;\n$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color:               $gray-600 !default;\n$input-plaintext-color:                 $body-color !default;\n\n$input-height-border:                   $input-border-width * 2 !default;\n\n$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;\n\n$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top:                  .25rem !default;\n\n$form-check-input-gutter:               1.25rem !default;\n$form-check-input-margin-y:             .3rem !default;\n$form-check-input-margin-x:             .25rem !default;\n\n$form-check-inline-margin-x:            .75rem !default;\n$form-check-inline-input-margin-x:      .3125rem !default;\n\n$form-grid-gutter-width:                10px !default;\n$form-group-margin-bottom:              1rem !default;\n\n$input-group-addon-color:               $input-color !default;\n$input-group-addon-bg:                  $gray-200 !default;\n$input-group-addon-border-color:        $input-border-color !default;\n\n$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter:                 .5rem !default;\n$custom-control-spacer-x:               1rem !default;\n$custom-control-cursor:                 null !default;\n\n$custom-control-indicator-size:         1rem !default;\n$custom-control-indicator-bg:           $input-bg !default;\n\n$custom-control-indicator-bg-size:      50% 50% !default;\n$custom-control-indicator-box-shadow:   $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-label-color:            null !default;\n\n$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;\n$custom-control-label-disabled-color:           $gray-600 !default;\n\n$custom-control-indicator-checked-color:        $component-active-color !default;\n$custom-control-indicator-checked-bg:           $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg:  rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow:   null !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;\n\n$custom-control-indicator-active-color:         $component-active-color !default;\n$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow:    null !default;\n$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius:       $border-radius !default;\n$custom-checkbox-indicator-icon-checked:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius:          50% !default;\n$custom-radio-indicator-icon-checked:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>\") !default;\n\n$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius:         $custom-control-indicator-size * .5 !default;\n$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;\n\n$custom-select-padding-y:           $input-padding-y !default;\n$custom-select-padding-x:           $input-padding-x !default;\n$custom-select-font-family:         $input-font-family !default;\n$custom-select-font-size:           $input-font-size !default;\n$custom-select-height:              $input-height !default;\n$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight:         $input-font-weight !default;\n$custom-select-line-height:         $input-line-height !default;\n$custom-select-color:               $input-color !default;\n$custom-select-disabled-color:      $gray-600 !default;\n$custom-select-bg:                  $input-bg !default;\n$custom-select-disabled-bg:         $gray-200 !default;\n$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color:     $gray-800 !default;\n$custom-select-indicator:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>\") !default;\n$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width:        $input-border-width !default;\n$custom-select-border-color:        $input-border-color !default;\n$custom-select-border-radius:       $border-radius !default;\n$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color:  $input-focus-border-color !default;\n$custom-select-focus-width:         $input-focus-width !default;\n$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm:        $input-padding-y-sm !default;\n$custom-select-padding-x-sm:        $input-padding-x-sm !default;\n$custom-select-font-size-sm:        $input-font-size-sm !default;\n$custom-select-height-sm:           $input-height-sm !default;\n\n$custom-select-padding-y-lg:        $input-padding-y-lg !default;\n$custom-select-padding-x-lg:        $input-padding-x-lg !default;\n$custom-select-font-size-lg:        $input-font-size-lg !default;\n$custom-select-height-lg:           $input-height-lg !default;\n\n$custom-range-track-width:          100% !default;\n$custom-range-track-height:         .5rem !default;\n$custom-range-track-cursor:         pointer !default;\n$custom-range-track-bg:             $gray-300 !default;\n$custom-range-track-border-radius:  1rem !default;\n$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width:                   1rem !default;\n$custom-range-thumb-height:                  $custom-range-thumb-width !default;\n$custom-range-thumb-bg:                      $component-active-bg !default;\n$custom-range-thumb-border:                  0 !default;\n$custom-range-thumb-border-radius:           1rem !default;\n$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg:             $gray-500 !default;\n\n$custom-file-height:                $input-height !default;\n$custom-file-height-inner:          $input-height-inner !default;\n$custom-file-focus-border-color:    $input-focus-border-color !default;\n$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;\n$custom-file-disabled-bg:           $input-disabled-bg !default;\n\n$custom-file-padding-y:             $input-padding-y !default;\n$custom-file-padding-x:             $input-padding-x !default;\n$custom-file-line-height:           $input-line-height !default;\n$custom-file-font-family:           $input-font-family !default;\n$custom-file-font-weight:           $input-font-weight !default;\n$custom-file-color:                 $input-color !default;\n$custom-file-bg:                    $input-bg !default;\n$custom-file-border-width:          $input-border-width !default;\n$custom-file-border-color:          $input-border-color !default;\n$custom-file-border-radius:         $input-border-radius !default;\n$custom-file-box-shadow:            $input-box-shadow !default;\n$custom-file-button-color:          $custom-file-color !default;\n$custom-file-button-bg:             $input-group-addon-bg !default;\n$custom-file-text: (\n  en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top:          $form-text-margin-top !default;\n$form-feedback-font-size:           $small-font-size !default;\n$form-feedback-valid-color:         theme-color(\"success\") !default;\n$form-feedback-invalid-color:       theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\") !default;\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\") !default;\n\n$form-validation-states: () !default;\n$form-validation-states: map-merge(\n  (\n    \"valid\": (\n      \"color\": $form-feedback-valid-color,\n      \"icon\": $form-feedback-icon-valid\n    ),\n    \"invalid\": (\n      \"color\": $form-feedback-invalid-color,\n      \"icon\": $form-feedback-icon-invalid\n    ),\n  ),\n  $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown:                   1000 !default;\n$zindex-sticky:                     1020 !default;\n$zindex-fixed:                      1030 !default;\n$zindex-modal-backdrop:             1040 !default;\n$zindex-modal:                      1050 !default;\n$zindex-popover:                    1060 !default;\n$zindex-tooltip:                    1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y:                .5rem !default;\n$nav-link-padding-x:                1rem !default;\n$nav-link-disabled-color:           $gray-600 !default;\n\n$nav-tabs-border-color:             $gray-300 !default;\n$nav-tabs-border-width:             $border-width !default;\n$nav-tabs-border-radius:            $border-radius !default;\n$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color:        $gray-700 !default;\n$nav-tabs-link-active-bg:           $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius:           $border-radius !default;\n$nav-pills-link-active-color:       $component-active-color !default;\n$nav-pills-link-active-bg:          $component-active-bg !default;\n\n$nav-divider-color:                 $gray-200 !default;\n$nav-divider-margin-y:              $spacer * .5 !default;\n\n\n// Navbar\n\n$navbar-padding-y:                  $spacer * .5 !default;\n$navbar-padding-x:                  $spacer !default;\n\n$navbar-nav-link-padding-x:         .5rem !default;\n\n$navbar-brand-font-size:            $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;\n\n$navbar-toggler-padding-y:          .25rem !default;\n$navbar-toggler-padding-x:          .75rem !default;\n$navbar-toggler-font-size:          $font-size-lg !default;\n$navbar-toggler-border-radius:      $btn-border-radius !default;\n\n$navbar-nav-scroll-max-height:      75vh !default;\n\n$navbar-dark-color:                 rgba($white, .5) !default;\n$navbar-dark-hover-color:           rgba($white, .75) !default;\n$navbar-dark-active-color:          $white !default;\n$navbar-dark-disabled-color:        rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-dark-toggler-border-color:  rgba($white, .1) !default;\n\n$navbar-light-color:                rgba($black, .5) !default;\n$navbar-light-hover-color:          rgba($black, .7) !default;\n$navbar-light-active-color:         rgba($black, .9) !default;\n$navbar-light-disabled-color:       rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color:                $navbar-light-active-color !default;\n$navbar-light-brand-hover-color:          $navbar-light-active-color !default;\n$navbar-dark-brand-color:                 $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width:                10rem !default;\n$dropdown-padding-x:                0 !default;\n$dropdown-padding-y:                .5rem !default;\n$dropdown-spacer:                   .125rem !default;\n$dropdown-font-size:                $font-size-base !default;\n$dropdown-color:                    $body-color !default;\n$dropdown-bg:                       $white !default;\n$dropdown-border-color:             rgba($black, .15) !default;\n$dropdown-border-radius:            $border-radius !default;\n$dropdown-border-width:             $border-width !default;\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg:               $gray-200 !default;\n$dropdown-divider-margin-y:         $nav-divider-margin-y !default;\n$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color:               $gray-900 !default;\n$dropdown-link-hover-color:         darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg:            $gray-200 !default;\n\n$dropdown-link-active-color:        $component-active-color !default;\n$dropdown-link-active-bg:           $component-active-bg !default;\n\n$dropdown-link-disabled-color:      $gray-500 !default;\n\n$dropdown-item-padding-y:           .25rem !default;\n$dropdown-item-padding-x:           1.5rem !default;\n\n$dropdown-header-color:             $gray-600 !default;\n$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;\n\n\n// Pagination\n\n$pagination-padding-y:              .5rem !default;\n$pagination-padding-x:              .75rem !default;\n$pagination-padding-y-sm:           .25rem !default;\n$pagination-padding-x-sm:           .5rem !default;\n$pagination-padding-y-lg:           .75rem !default;\n$pagination-padding-x-lg:           1.5rem !default;\n$pagination-line-height:            1.25 !default;\n\n$pagination-color:                  $link-color !default;\n$pagination-bg:                     $white !default;\n$pagination-border-width:           $border-width !default;\n$pagination-border-color:           $gray-300 !default;\n\n$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n$pagination-focus-outline:          0 !default;\n\n$pagination-hover-color:            $link-hover-color !default;\n$pagination-hover-bg:               $gray-200 !default;\n$pagination-hover-border-color:     $gray-300 !default;\n\n$pagination-active-color:           $component-active-color !default;\n$pagination-active-bg:              $component-active-bg !default;\n$pagination-active-border-color:    $pagination-active-bg !default;\n\n$pagination-disabled-color:         $gray-600 !default;\n$pagination-disabled-bg:            $white !default;\n$pagination-disabled-border-color:  $gray-300 !default;\n\n$pagination-border-radius-sm:       $border-radius-sm !default;\n$pagination-border-radius-lg:       $border-radius-lg !default;\n\n\n// Jumbotron\n\n$jumbotron-padding:                 2rem !default;\n$jumbotron-color:                   null !default;\n$jumbotron-bg:                      $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y:                     .75rem !default;\n$card-spacer-x:                     1.25rem !default;\n$card-border-width:                 $border-width !default;\n$card-border-radius:                $border-radius !default;\n$card-border-color:                 rgba($black, .125) !default;\n$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;\n$card-cap-bg:                       rgba($black, .03) !default;\n$card-cap-color:                    null !default;\n$card-height:                       null !default;\n$card-color:                        null !default;\n$card-bg:                           $white !default;\n\n$card-img-overlay-padding:          1.25rem !default;\n\n$card-group-margin:                 $grid-gutter-width * .5 !default;\n$card-deck-margin:                  $card-group-margin !default;\n\n$card-columns-count:                3 !default;\n$card-columns-gap:                  1.25rem !default;\n$card-columns-margin:               $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size:                 $font-size-sm !default;\n$tooltip-max-width:                 200px !default;\n$tooltip-color:                     $white !default;\n$tooltip-bg:                        $black !default;\n$tooltip-border-radius:             $border-radius !default;\n$tooltip-opacity:                   .9 !default;\n$tooltip-padding-y:                 .25rem !default;\n$tooltip-padding-x:                 .5rem !default;\n$tooltip-margin:                    0 !default;\n\n$tooltip-arrow-width:               .8rem !default;\n$tooltip-arrow-height:              .4rem !default;\n$tooltip-arrow-color:               $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size:     $tooltip-font-size !default;\n$form-feedback-tooltip-line-height:   $line-height-base !default;\n$form-feedback-tooltip-opacity:       $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size:                 $font-size-sm !default;\n$popover-bg:                        $white !default;\n$popover-max-width:                 276px !default;\n$popover-border-width:              $border-width !default;\n$popover-border-color:              rgba($black, .2) !default;\n$popover-border-radius:             $border-radius-lg !default;\n$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg:                 darken($popover-bg, 3%) !default;\n$popover-header-color:              $headings-color !default;\n$popover-header-padding-y:          .5rem !default;\n$popover-header-padding-x:          .75rem !default;\n\n$popover-body-color:                $body-color !default;\n$popover-body-padding-y:            $popover-header-padding-y !default;\n$popover-body-padding-x:            $popover-header-padding-x !default;\n\n$popover-arrow-width:               1rem !default;\n$popover-arrow-height:              .5rem !default;\n$popover-arrow-color:               $popover-bg !default;\n\n$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width:                   350px !default;\n$toast-padding-x:                   .75rem !default;\n$toast-padding-y:                   .25rem !default;\n$toast-font-size:                   .875rem !default;\n$toast-color:                       null !default;\n$toast-background-color:            rgba($white, .85) !default;\n$toast-border-width:                1px !default;\n$toast-border-color:                rgba(0, 0, 0, .1) !default;\n$toast-border-radius:               .25rem !default;\n$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color:                $gray-600 !default;\n$toast-header-background-color:     rgba($white, .85) !default;\n$toast-header-border-color:         rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size:                   75% !default;\n$badge-font-weight:                 $font-weight-bold !default;\n$badge-padding-y:                   .25em !default;\n$badge-padding-x:                   .4em !default;\n$badge-border-radius:               $border-radius !default;\n\n$badge-transition:                  $btn-transition !default;\n$badge-focus-width:                 $input-btn-focus-width !default;\n\n$badge-pill-padding-x:              .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius:          10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding:               1rem !default;\n\n// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding\n$modal-footer-margin-between:       .5rem !default;\n\n$modal-dialog-margin:               .5rem !default;\n$modal-dialog-margin-y-sm-up:       1.75rem !default;\n\n$modal-title-line-height:           $line-height-base !default;\n\n$modal-content-color:               null !default;\n$modal-content-bg:                  $white !default;\n$modal-content-border-color:        rgba($black, .2) !default;\n$modal-content-border-width:        $border-width !default;\n$modal-content-border-radius:       $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg:                 $black !default;\n$modal-backdrop-opacity:            .5 !default;\n$modal-header-border-color:         $border-color !default;\n$modal-footer-border-color:         $modal-header-border-color !default;\n$modal-header-border-width:         $modal-content-border-width !default;\n$modal-footer-border-width:         $modal-header-border-width !default;\n$modal-header-padding-y:            1rem !default;\n$modal-header-padding-x:            1rem !default;\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl:                          1140px !default;\n$modal-lg:                          800px !default;\n$modal-md:                          500px !default;\n$modal-sm:                          300px !default;\n\n$modal-fade-transform:              translate(0, -50px) !default;\n$modal-show-transform:              none !default;\n$modal-transition:                  transform .3s ease-out !default;\n$modal-scale-transform:             scale(1.02) !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y:                   .75rem !default;\n$alert-padding-x:                   1.25rem !default;\n$alert-margin-bottom:               1rem !default;\n$alert-border-radius:               $border-radius !default;\n$alert-link-font-weight:            $font-weight-bold !default;\n$alert-border-width:                $border-width !default;\n\n$alert-bg-level:                    -10 !default;\n$alert-border-level:                -9 !default;\n$alert-color-level:                 6 !default;\n\n\n// Progress bars\n\n$progress-height:                   1rem !default;\n$progress-font-size:                $font-size-base * .75 !default;\n$progress-bg:                       $gray-200 !default;\n$progress-border-radius:            $border-radius !default;\n$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color:                $white !default;\n$progress-bar-bg:                   theme-color(\"primary\") !default;\n$progress-bar-animation-timing:     1s linear infinite !default;\n$progress-bar-transition:           width .6s ease !default;\n\n\n// List group\n\n$list-group-color:                  null !default;\n$list-group-bg:                     $white !default;\n$list-group-border-color:           rgba($black, .125) !default;\n$list-group-border-width:           $border-width !default;\n$list-group-border-radius:          $border-radius !default;\n\n$list-group-item-padding-y:         .75rem !default;\n$list-group-item-padding-x:         1.25rem !default;\n\n$list-group-hover-bg:               $gray-100 !default;\n$list-group-active-color:           $component-active-color !default;\n$list-group-active-bg:              $component-active-bg !default;\n$list-group-active-border-color:    $list-group-active-bg !default;\n\n$list-group-disabled-color:         $gray-600 !default;\n$list-group-disabled-bg:            $list-group-bg !default;\n\n$list-group-action-color:           $gray-700 !default;\n$list-group-action-hover-color:     $list-group-action-color !default;\n\n$list-group-action-active-color:    $body-color !default;\n$list-group-action-active-bg:       $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding:                 .25rem !default;\n$thumbnail-bg:                      $body-bg !default;\n$thumbnail-border-width:            $border-width !default;\n$thumbnail-border-color:            $gray-300 !default;\n$thumbnail-border-radius:           $border-radius !default;\n$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size:          90% !default;\n$figure-caption-color:              $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-font-size:              null !default;\n\n$breadcrumb-padding-y:              .75rem !default;\n$breadcrumb-padding-x:              1rem !default;\n$breadcrumb-item-padding:           .5rem !default;\n\n$breadcrumb-margin-bottom:          1rem !default;\n\n$breadcrumb-bg:                     $gray-200 !default;\n$breadcrumb-divider-color:          $gray-600 !default;\n$breadcrumb-active-color:           $gray-600 !default;\n$breadcrumb-divider:                quote(\"/\") !default;\n\n$breadcrumb-border-radius:          $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color:             $white !default;\n$carousel-control-width:             15% !default;\n$carousel-control-opacity:           .5 !default;\n$carousel-control-hover-opacity:     .9 !default;\n$carousel-control-transition:        opacity .15s ease !default;\n\n$carousel-indicator-width:           30px !default;\n$carousel-indicator-height:          3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer:          3px !default;\n$carousel-indicator-active-bg:       $white !default;\n$carousel-indicator-transition:      opacity .6s ease !default;\n\n$carousel-caption-width:             70% !default;\n$carousel-caption-color:             $white !default;\n\n$carousel-control-icon-width:        20px !default;\n\n$carousel-control-prev-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>\") !default;\n$carousel-control-next-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>\") !default;\n\n$carousel-transition-duration:       .6s !default;\n$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width:           2rem !default;\n$spinner-height:          $spinner-width !default;\n$spinner-vertical-align:  -.125em !default;\n$spinner-border-width:    .25em !default;\n\n$spinner-width-sm:        1rem !default;\n$spinner-height-sm:       $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size:                   $font-size-base * 1.5 !default;\n$close-font-weight:                 $font-weight-bold !default;\n$close-color:                       $black !default;\n$close-text-shadow:                 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size:                    87.5% !default;\n$code-color:                        $pink !default;\n\n$kbd-padding-y:                     .2rem !default;\n$kbd-padding-x:                     .4rem !default;\n$kbd-font-size:                     $code-font-size !default;\n$kbd-color:                         $white !default;\n$kbd-bg:                            $gray-900 !default;\n\n$pre-color:                         $gray-900 !default;\n$pre-scrollable-max-height:         340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n$user-selects: all, auto, none !default;\n\n\n// Printing\n\n$print-page-size:                   a3 !default;\n$print-body-min-width:              map-get($grid-breakpoints, \"lg\") !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../scss/bootstrap_overrides.scss","../../src/context-actions/ContextActions.scss","../../../../node_modules/bootstrap/scss/_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACzLA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,SCmqBkC;;ADjqBlC;EACE;;;AAIJ;EACE;EACA;EACA,kBDoOe;ECnOf,ODoOkB;ECnOlB;EACA;EACA;EACA;EACA,eD4Hc;EC3Hd;EACA,YD2HW;EC1HX;EACA;;AAEA;EAQE;;AAGF;EACE;EACA;EACA,kBD5BO;;AC+BT;EACE;EACA,ODsMgB;ECrMhB;EACA;EACA;EACA;;AAGF;EACE;EACA;EAIA;EACA,ODwLgB;ECvLhB;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE,QDkKW;ECjKX;;AAGF;EACE;EACA;EACA;;AAGF;EACE,ODpFK;ECqFL;EACA;EACA;EACA;EACA;;AAGF;EACE,OD+Ic;EC9Id;EACA;;AAEF;EACE,OD2IuB;;ACvI3B;EACE;EACA;EACA,YDxFS;;AC2FX;EACE,kBDiI+B;;AC9HjC;AAAA;EAEE,kBD6HsB;;AC1HxB;EACE;;AAGF;AAAA;AAAA;EAGE,ODoHyB;;AClHzB;AAAA;AAAA;EACE,ODhIK;;ACoIT;EACE,ODyGyB;ECxGzB,kBDsGa;;ACnGf;EACE;EACA,4BDDY;;ACId;EACE,wBDLY;ECMZ,yBDNY;;ACSd;EACE;EACA,ODrJO;ECsJP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE","file":"ContextActions.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 './util.scss';\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// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\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, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\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$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-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '../../scss/custom.scss';\n\n$hr-bg-color: $gray-700;\n\n.context-actions-listener {\n  display: none;\n}\n\n.context-menu-root {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: $zindex-popover;\n\n  &.active {\n    pointer-events: all;\n  }\n}\n\n.context-menu-container {\n  pointer-events: auto;\n  position: fixed;\n  background-color: $contextmenu-bg;\n  color: $contextmenu-color;\n  z-index: initial;\n  min-width: 10rem;\n  max-width: 30rem;\n  text-align: left;\n  border-radius: $border-radius;\n  background-clip: border-box;\n  box-shadow: $box-shadow;\n  max-height: 100vh;\n  overflow-y: auto;\n\n  &.has-overflow {\n    // Fixes #IDS-7035. Intrinsic width of \"overflow:auto\"\n    // element doesn't grow to accomodate its scrollbar.\n    // https://bugzilla.mozilla.org/show_bug.cgi?id=764076\n    // class is added in the verifyPosition calc, forcing a redraw\n    // that will include a forced scrollbar as part of intrinsic width\n\n    //update: happens in safari as well\n    overflow-y: scroll;\n  }\n\n  hr {\n    margin-top: 0;\n    margin-bottom: 0;\n    background-color: $hr-bg-color;\n  }\n\n  .custom-menu-item {\n    width: 100%;\n    color: $contextmenu-color;\n    white-space: nowrap;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n  }\n\n  .btn-context-menu {\n    border: none;\n    width: 100%;\n    // not sure exactly why, but safari is creating an uncessary scrollbar\n    // if these are rem units that cause a fractional pixel\n    // maybe calculating overflow with full precision when in fixed parent\n    padding: 4px 8px;\n    color: $contextmenu-color;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n    cursor: pointer;\n    user-select: none;\n\n    .btn-context-menu-wrapper {\n      // firefox can misbehave with buttons as display: flex\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n\n    .icon {\n      margin-right: 0.5rem;\n      width: 1rem;\n      flex-grow: 0;\n      text-align: center;\n    }\n    .icon.outline {\n      stroke: $contextmenu-bg;\n      stroke-width: 60;\n    }\n\n    .title {\n      flex: 1 1 auto;\n      text-align: left;\n      white-space: nowrap;\n    }\n\n    .shortcut {\n      color: $text-muted;\n      margin-left: 0.5rem;\n      justify-self: flex-end;\n      flex: 1 1 auto;\n      text-align: right;\n      white-space: nowrap;\n    }\n\n    .submenu-indicator {\n      color: $contextmenu-color;\n      flex-grow: 0;\n      justify-self: flex-end;\n    }\n    .submenu-indicator.disabled {\n      color: $contextmenu-disabled-color;\n    }\n  }\n\n  .btn-context-menu.menu-title {\n    user-select: none;\n    cursor: default;\n    background: $content-bg;\n  }\n\n  .btn-context-menu.keyboard-active {\n    background-color: $contextmenu-keyboard-selected-bg;\n  }\n\n  .btn-context-menu:focus,\n  .btn-context-menu.active {\n    background-color: $contextmenu-selected-bg;\n  }\n\n  .btn-context-menu:focus {\n    outline: none;\n  }\n\n  .btn-context-menu.active,\n  .btn-context-menu.keyboard-active,\n  .btn-context-menu:focus:not(.disabled) {\n    color: $contextmenu-selected-color;\n\n    .shortcut {\n      color: $gray-300;\n    }\n  }\n\n  .btn-context-menu.disabled {\n    color: $contextmenu-disabled-color;\n    background-color: $contextmenu-bg;\n  }\n\n  .context-menu-item:last-child > .btn-context-menu {\n    border-bottom-left-radius: $border-radius;\n    border-bottom-right-radius: $border-radius;\n  }\n\n  .context-menu-item:first-child > .btn-context-menu {\n    border-top-left-radius: $border-radius;\n    border-top-right-radius: $border-radius;\n  }\n\n  .context-menu-group-header {\n    margin: $spacer-2 $input-btn-padding-x $spacer-1 $input-btn-padding-x;\n    color: $gray-300;\n    white-space: nowrap;\n    text-decoration: none;\n    background-color: transparent;\n    text-align: left;\n    cursor: default;\n    user-select: none;\n    font-weight: 500;\n    border-bottom: 1px solid var(--dh-color-hr);\n  }\n\n  .loading {\n    padding: 0.25rem 1.5rem;\n    width: 100%;\n    display: block;\n    text-align: center;\n  }\n}\n\n.context-menu-container:focus {\n  outline: none;\n}\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white:    #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black:    #000 !default;\n\n$grays: () !default;\n$grays: map-merge(\n  (\n    \"100\": $gray-100,\n    \"200\": $gray-200,\n    \"300\": $gray-300,\n    \"400\": $gray-400,\n    \"500\": $gray-500,\n    \"600\": $gray-600,\n    \"700\": $gray-700,\n    \"800\": $gray-800,\n    \"900\": $gray-900\n  ),\n  $grays\n);\n\n$blue:    #007bff !default;\n$indigo:  #6610f2 !default;\n$purple:  #6f42c1 !default;\n$pink:    #e83e8c !default;\n$red:     #dc3545 !default;\n$orange:  #fd7e14 !default;\n$yellow:  #ffc107 !default;\n$green:   #28a745 !default;\n$teal:    #20c997 !default;\n$cyan:    #17a2b8 !default;\n\n$colors: () !default;\n$colors: map-merge(\n  (\n    \"blue\":       $blue,\n    \"indigo\":     $indigo,\n    \"purple\":     $purple,\n    \"pink\":       $pink,\n    \"red\":        $red,\n    \"orange\":     $orange,\n    \"yellow\":     $yellow,\n    \"green\":      $green,\n    \"teal\":       $teal,\n    \"cyan\":       $cyan,\n    \"white\":      $white,\n    \"gray\":       $gray-600,\n    \"gray-dark\":  $gray-800\n  ),\n  $colors\n);\n\n$primary:       $blue !default;\n$secondary:     $gray-600 !default;\n$success:       $green !default;\n$info:          $cyan !default;\n$warning:       $yellow !default;\n$danger:        $red !default;\n$light:         $gray-100 !default;\n$dark:          $gray-800 !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    \"primary\":    $primary,\n    \"secondary\":  $secondary,\n    \"success\":    $success,\n    \"info\":       $info,\n    \"warning\":    $warning,\n    \"danger\":     $danger,\n    \"light\":      $light,\n    \"dark\":       $dark\n  ),\n  $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval:      8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold:  150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark:             $gray-900 !default;\n$yiq-text-light:            $white !default;\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n  (\"<\", \"%3c\"),\n  (\">\", \"%3e\"),\n  (\"#\", \"%23\"),\n  (\"(\", \"%28\"),\n  (\")\", \"%29\"),\n) !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret:                                true !default;\n$enable-rounded:                              true !default;\n$enable-shadows:                              false !default;\n$enable-gradients:                            false !default;\n$enable-transitions:                          true !default;\n$enable-prefers-reduced-motion-media-query:   true !default;\n$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes:                         true !default;\n$enable-pointer-cursor-for-buttons:           true !default;\n$enable-print-styles:                         true !default;\n$enable-responsive-font-sizes:                false !default;\n$enable-validation-icons:                     true !default;\n$enable-deprecation-messages:                 true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n$spacers: map-merge(\n  (\n    0: 0,\n    1: ($spacer * .25),\n    2: ($spacer * .5),\n    3: $spacer,\n    4: ($spacer * 1.5),\n    5: ($spacer * 3)\n  ),\n  $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n$sizes: map-merge(\n  (\n    25: 25%,\n    50: 50%,\n    75: 75%,\n    100: 100%,\n    auto: auto\n  ),\n  $sizes\n);\n\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white !default;\n$body-color:                $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color:                              theme-color(\"primary\") !default;\n$link-decoration:                         none !default;\n$link-hover-color:                        darken($link-color, 15%) !default;\n$link-hover-decoration:                   underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns:                12 !default;\n$grid-gutter-width:           30px !default;\n$grid-row-columns:            6 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg:              1.5 !default;\n$line-height-sm:              1.5 !default;\n\n$border-width:                1px !default;\n$border-color:                $gray-300 !default;\n\n$border-radius:               .25rem !default;\n$border-radius-lg:            .3rem !default;\n$border-radius-sm:            .2rem !default;\n\n$rounded-pill:                50rem !default;\n\n$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color:      $white !default;\n$component-active-bg:         theme-color(\"primary\") !default;\n\n$caret-width:                 .3em !default;\n$caret-vertical-align:        $caret-width * .85 !default;\n$caret-spacing:               $caret-width * .85 !default;\n\n$transition-base:             all .2s ease-in-out !default;\n$transition-fade:             opacity .15s linear !default;\n$transition-collapse:         height .35s ease !default;\n$transition-collapse-width:   width .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n$embed-responsive-aspect-ratios: join(\n  (\n    (21 9),\n    (16 9),\n    (4 3),\n    (1 1),\n  ),\n  $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base:            $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg:                $font-size-base * 1.25 !default;\n$font-size-sm:                $font-size-base * .875 !default;\n\n$font-weight-lighter:         lighter !default;\n$font-weight-light:           300 !default;\n$font-weight-normal:          400 !default;\n$font-weight-bold:            700 !default;\n$font-weight-bolder:          bolder !default;\n\n$font-weight-base:            $font-weight-normal !default;\n$line-height-base:            1.5 !default;\n\n$h1-font-size:                $font-size-base * 2.5 !default;\n$h2-font-size:                $font-size-base * 2 !default;\n$h3-font-size:                $font-size-base * 1.75 !default;\n$h4-font-size:                $font-size-base * 1.5 !default;\n$h5-font-size:                $font-size-base * 1.25 !default;\n$h6-font-size:                $font-size-base !default;\n\n$headings-margin-bottom:      $spacer * .5 !default;\n$headings-font-family:        null !default;\n$headings-font-weight:        500 !default;\n$headings-line-height:        1.2 !default;\n$headings-color:              null !default;\n\n$display1-size:               6rem !default;\n$display2-size:               5.5rem !default;\n$display3-size:               4.5rem !default;\n$display4-size:               3.5rem !default;\n\n$display1-weight:             300 !default;\n$display2-weight:             300 !default;\n$display3-weight:             300 !default;\n$display4-weight:             300 !default;\n$display-line-height:         $headings-line-height !default;\n\n$lead-font-size:              $font-size-base * 1.25 !default;\n$lead-font-weight:            300 !default;\n\n$small-font-size:             .875em !default;\n\n$text-muted:                  $gray-600 !default;\n\n$blockquote-small-color:      $gray-600 !default;\n$blockquote-small-font-size:  $small-font-size !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n\n$hr-border-color:             rgba($black, .1) !default;\n$hr-border-width:             $border-width !default;\n\n$mark-padding:                .2em !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     #fcf8e3 !default;\n\n$hr-margin-y:                 $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding:          .75rem !default;\n$table-cell-padding-sm:       .3rem !default;\n\n$table-color:                 $body-color !default;\n$table-bg:                    null !default;\n$table-accent-bg:             rgba($black, .05) !default;\n$table-hover-color:           $table-color !default;\n$table-hover-bg:              rgba($black, .075) !default;\n$table-active-bg:             $table-hover-bg !default;\n\n$table-border-width:          $border-width !default;\n$table-border-color:          $border-color !default;\n\n$table-head-bg:               $gray-200 !default;\n$table-head-color:            $gray-700 !default;\n$table-th-font-weight:        null !default;\n\n$table-dark-color:            $white !default;\n$table-dark-bg:               $gray-800 !default;\n$table-dark-accent-bg:        rgba($white, .05) !default;\n$table-dark-hover-color:      $table-dark-color !default;\n$table-dark-hover-bg:         rgba($white, .075) !default;\n$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;\n\n$table-striped-order:         odd !default;\n\n$table-caption-color:         $text-muted !default;\n\n$table-bg-level:              -9 !default;\n$table-border-level:          -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y:         .375rem !default;\n$input-btn-padding-x:         .75rem !default;\n$input-btn-font-family:       null !default;\n$input-btn-font-size:         $font-size-base !default;\n$input-btn-line-height:       $line-height-base !default;\n\n$input-btn-focus-width:       .2rem !default;\n$input-btn-focus-color:       rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm:      .25rem !default;\n$input-btn-padding-x-sm:      .5rem !default;\n$input-btn-font-size-sm:      $font-size-sm !default;\n$input-btn-line-height-sm:    $line-height-sm !default;\n\n$input-btn-padding-y-lg:      .5rem !default;\n$input-btn-padding-x-lg:      1rem !default;\n$input-btn-font-size-lg:      $font-size-lg !default;\n$input-btn-line-height-lg:    $line-height-lg !default;\n\n$input-btn-border-width:      $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y:               $input-btn-padding-y !default;\n$btn-padding-x:               $input-btn-padding-x !default;\n$btn-font-family:             $input-btn-font-family !default;\n$btn-font-size:               $input-btn-font-size !default;\n$btn-line-height:             $input-btn-line-height !default;\n$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm:            $input-btn-padding-y-sm !default;\n$btn-padding-x-sm:            $input-btn-padding-x-sm !default;\n$btn-font-size-sm:            $input-btn-font-size-sm !default;\n$btn-line-height-sm:          $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg:            $input-btn-padding-y-lg !default;\n$btn-padding-x-lg:            $input-btn-padding-x-lg !default;\n$btn-font-size-lg:            $input-btn-font-size-lg !default;\n$btn-line-height-lg:          $input-btn-line-height-lg !default;\n\n$btn-border-width:            $input-btn-border-width !default;\n\n$btn-font-weight:             $font-weight-normal !default;\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width:             $input-btn-focus-width !default;\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity:        .65 !default;\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color:     $gray-600 !default;\n\n$btn-block-spacing-y:         .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius:           $border-radius !default;\n$btn-border-radius-lg:        $border-radius-lg !default;\n$btn-border-radius-sm:        $border-radius-sm !default;\n\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom:                   .5rem !default;\n\n$input-padding-y:                       $input-btn-padding-y !default;\n$input-padding-x:                       $input-btn-padding-x !default;\n$input-font-family:                     $input-btn-font-family !default;\n$input-font-size:                       $input-btn-font-size !default;\n$input-font-weight:                     $font-weight-base !default;\n$input-line-height:                     $input-btn-line-height !default;\n\n$input-padding-y-sm:                    $input-btn-padding-y-sm !default;\n$input-padding-x-sm:                    $input-btn-padding-x-sm !default;\n$input-font-size-sm:                    $input-btn-font-size-sm !default;\n$input-line-height-sm:                  $input-btn-line-height-sm !default;\n\n$input-padding-y-lg:                    $input-btn-padding-y-lg !default;\n$input-padding-x-lg:                    $input-btn-padding-x-lg !default;\n$input-font-size-lg:                    $input-btn-font-size-lg !default;\n$input-line-height-lg:                  $input-btn-line-height-lg !default;\n\n$input-bg:                              $white !default;\n$input-disabled-bg:                     $gray-200 !default;\n\n$input-color:                           $gray-700 !default;\n$input-border-color:                    $gray-400 !default;\n$input-border-width:                    $input-btn-border-width !default;\n$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius:                   $border-radius !default;\n$input-border-radius-lg:                $border-radius-lg !default;\n$input-border-radius-sm:                $border-radius-sm !default;\n\n$input-focus-bg:                        $input-bg !default;\n$input-focus-border-color:              lighten($component-active-bg, 25%) !default;\n$input-focus-color:                     $input-color !default;\n$input-focus-width:                     $input-btn-focus-width !default;\n$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color:               $gray-600 !default;\n$input-plaintext-color:                 $body-color !default;\n\n$input-height-border:                   $input-border-width * 2 !default;\n\n$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;\n\n$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top:                  .25rem !default;\n\n$form-check-input-gutter:               1.25rem !default;\n$form-check-input-margin-y:             .3rem !default;\n$form-check-input-margin-x:             .25rem !default;\n\n$form-check-inline-margin-x:            .75rem !default;\n$form-check-inline-input-margin-x:      .3125rem !default;\n\n$form-grid-gutter-width:                10px !default;\n$form-group-margin-bottom:              1rem !default;\n\n$input-group-addon-color:               $input-color !default;\n$input-group-addon-bg:                  $gray-200 !default;\n$input-group-addon-border-color:        $input-border-color !default;\n\n$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter:                 .5rem !default;\n$custom-control-spacer-x:               1rem !default;\n$custom-control-cursor:                 null !default;\n\n$custom-control-indicator-size:         1rem !default;\n$custom-control-indicator-bg:           $input-bg !default;\n\n$custom-control-indicator-bg-size:      50% 50% !default;\n$custom-control-indicator-box-shadow:   $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-label-color:            null !default;\n\n$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;\n$custom-control-label-disabled-color:           $gray-600 !default;\n\n$custom-control-indicator-checked-color:        $component-active-color !default;\n$custom-control-indicator-checked-bg:           $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg:  rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow:   null !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;\n\n$custom-control-indicator-active-color:         $component-active-color !default;\n$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow:    null !default;\n$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius:       $border-radius !default;\n$custom-checkbox-indicator-icon-checked:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius:          50% !default;\n$custom-radio-indicator-icon-checked:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>\") !default;\n\n$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius:         $custom-control-indicator-size * .5 !default;\n$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;\n\n$custom-select-padding-y:           $input-padding-y !default;\n$custom-select-padding-x:           $input-padding-x !default;\n$custom-select-font-family:         $input-font-family !default;\n$custom-select-font-size:           $input-font-size !default;\n$custom-select-height:              $input-height !default;\n$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight:         $input-font-weight !default;\n$custom-select-line-height:         $input-line-height !default;\n$custom-select-color:               $input-color !default;\n$custom-select-disabled-color:      $gray-600 !default;\n$custom-select-bg:                  $input-bg !default;\n$custom-select-disabled-bg:         $gray-200 !default;\n$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color:     $gray-800 !default;\n$custom-select-indicator:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>\") !default;\n$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width:        $input-border-width !default;\n$custom-select-border-color:        $input-border-color !default;\n$custom-select-border-radius:       $border-radius !default;\n$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color:  $input-focus-border-color !default;\n$custom-select-focus-width:         $input-focus-width !default;\n$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm:        $input-padding-y-sm !default;\n$custom-select-padding-x-sm:        $input-padding-x-sm !default;\n$custom-select-font-size-sm:        $input-font-size-sm !default;\n$custom-select-height-sm:           $input-height-sm !default;\n\n$custom-select-padding-y-lg:        $input-padding-y-lg !default;\n$custom-select-padding-x-lg:        $input-padding-x-lg !default;\n$custom-select-font-size-lg:        $input-font-size-lg !default;\n$custom-select-height-lg:           $input-height-lg !default;\n\n$custom-range-track-width:          100% !default;\n$custom-range-track-height:         .5rem !default;\n$custom-range-track-cursor:         pointer !default;\n$custom-range-track-bg:             $gray-300 !default;\n$custom-range-track-border-radius:  1rem !default;\n$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width:                   1rem !default;\n$custom-range-thumb-height:                  $custom-range-thumb-width !default;\n$custom-range-thumb-bg:                      $component-active-bg !default;\n$custom-range-thumb-border:                  0 !default;\n$custom-range-thumb-border-radius:           1rem !default;\n$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg:             $gray-500 !default;\n\n$custom-file-height:                $input-height !default;\n$custom-file-height-inner:          $input-height-inner !default;\n$custom-file-focus-border-color:    $input-focus-border-color !default;\n$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;\n$custom-file-disabled-bg:           $input-disabled-bg !default;\n\n$custom-file-padding-y:             $input-padding-y !default;\n$custom-file-padding-x:             $input-padding-x !default;\n$custom-file-line-height:           $input-line-height !default;\n$custom-file-font-family:           $input-font-family !default;\n$custom-file-font-weight:           $input-font-weight !default;\n$custom-file-color:                 $input-color !default;\n$custom-file-bg:                    $input-bg !default;\n$custom-file-border-width:          $input-border-width !default;\n$custom-file-border-color:          $input-border-color !default;\n$custom-file-border-radius:         $input-border-radius !default;\n$custom-file-box-shadow:            $input-box-shadow !default;\n$custom-file-button-color:          $custom-file-color !default;\n$custom-file-button-bg:             $input-group-addon-bg !default;\n$custom-file-text: (\n  en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top:          $form-text-margin-top !default;\n$form-feedback-font-size:           $small-font-size !default;\n$form-feedback-valid-color:         theme-color(\"success\") !default;\n$form-feedback-invalid-color:       theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\") !default;\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\") !default;\n\n$form-validation-states: () !default;\n$form-validation-states: map-merge(\n  (\n    \"valid\": (\n      \"color\": $form-feedback-valid-color,\n      \"icon\": $form-feedback-icon-valid\n    ),\n    \"invalid\": (\n      \"color\": $form-feedback-invalid-color,\n      \"icon\": $form-feedback-icon-invalid\n    ),\n  ),\n  $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown:                   1000 !default;\n$zindex-sticky:                     1020 !default;\n$zindex-fixed:                      1030 !default;\n$zindex-modal-backdrop:             1040 !default;\n$zindex-modal:                      1050 !default;\n$zindex-popover:                    1060 !default;\n$zindex-tooltip:                    1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y:                .5rem !default;\n$nav-link-padding-x:                1rem !default;\n$nav-link-disabled-color:           $gray-600 !default;\n\n$nav-tabs-border-color:             $gray-300 !default;\n$nav-tabs-border-width:             $border-width !default;\n$nav-tabs-border-radius:            $border-radius !default;\n$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color:        $gray-700 !default;\n$nav-tabs-link-active-bg:           $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius:           $border-radius !default;\n$nav-pills-link-active-color:       $component-active-color !default;\n$nav-pills-link-active-bg:          $component-active-bg !default;\n\n$nav-divider-color:                 $gray-200 !default;\n$nav-divider-margin-y:              $spacer * .5 !default;\n\n\n// Navbar\n\n$navbar-padding-y:                  $spacer * .5 !default;\n$navbar-padding-x:                  $spacer !default;\n\n$navbar-nav-link-padding-x:         .5rem !default;\n\n$navbar-brand-font-size:            $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;\n\n$navbar-toggler-padding-y:          .25rem !default;\n$navbar-toggler-padding-x:          .75rem !default;\n$navbar-toggler-font-size:          $font-size-lg !default;\n$navbar-toggler-border-radius:      $btn-border-radius !default;\n\n$navbar-nav-scroll-max-height:      75vh !default;\n\n$navbar-dark-color:                 rgba($white, .5) !default;\n$navbar-dark-hover-color:           rgba($white, .75) !default;\n$navbar-dark-active-color:          $white !default;\n$navbar-dark-disabled-color:        rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-dark-toggler-border-color:  rgba($white, .1) !default;\n\n$navbar-light-color:                rgba($black, .5) !default;\n$navbar-light-hover-color:          rgba($black, .7) !default;\n$navbar-light-active-color:         rgba($black, .9) !default;\n$navbar-light-disabled-color:       rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color:                $navbar-light-active-color !default;\n$navbar-light-brand-hover-color:          $navbar-light-active-color !default;\n$navbar-dark-brand-color:                 $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width:                10rem !default;\n$dropdown-padding-x:                0 !default;\n$dropdown-padding-y:                .5rem !default;\n$dropdown-spacer:                   .125rem !default;\n$dropdown-font-size:                $font-size-base !default;\n$dropdown-color:                    $body-color !default;\n$dropdown-bg:                       $white !default;\n$dropdown-border-color:             rgba($black, .15) !default;\n$dropdown-border-radius:            $border-radius !default;\n$dropdown-border-width:             $border-width !default;\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg:               $gray-200 !default;\n$dropdown-divider-margin-y:         $nav-divider-margin-y !default;\n$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color:               $gray-900 !default;\n$dropdown-link-hover-color:         darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg:            $gray-200 !default;\n\n$dropdown-link-active-color:        $component-active-color !default;\n$dropdown-link-active-bg:           $component-active-bg !default;\n\n$dropdown-link-disabled-color:      $gray-500 !default;\n\n$dropdown-item-padding-y:           .25rem !default;\n$dropdown-item-padding-x:           1.5rem !default;\n\n$dropdown-header-color:             $gray-600 !default;\n$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;\n\n\n// Pagination\n\n$pagination-padding-y:              .5rem !default;\n$pagination-padding-x:              .75rem !default;\n$pagination-padding-y-sm:           .25rem !default;\n$pagination-padding-x-sm:           .5rem !default;\n$pagination-padding-y-lg:           .75rem !default;\n$pagination-padding-x-lg:           1.5rem !default;\n$pagination-line-height:            1.25 !default;\n\n$pagination-color:                  $link-color !default;\n$pagination-bg:                     $white !default;\n$pagination-border-width:           $border-width !default;\n$pagination-border-color:           $gray-300 !default;\n\n$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n$pagination-focus-outline:          0 !default;\n\n$pagination-hover-color:            $link-hover-color !default;\n$pagination-hover-bg:               $gray-200 !default;\n$pagination-hover-border-color:     $gray-300 !default;\n\n$pagination-active-color:           $component-active-color !default;\n$pagination-active-bg:              $component-active-bg !default;\n$pagination-active-border-color:    $pagination-active-bg !default;\n\n$pagination-disabled-color:         $gray-600 !default;\n$pagination-disabled-bg:            $white !default;\n$pagination-disabled-border-color:  $gray-300 !default;\n\n$pagination-border-radius-sm:       $border-radius-sm !default;\n$pagination-border-radius-lg:       $border-radius-lg !default;\n\n\n// Jumbotron\n\n$jumbotron-padding:                 2rem !default;\n$jumbotron-color:                   null !default;\n$jumbotron-bg:                      $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y:                     .75rem !default;\n$card-spacer-x:                     1.25rem !default;\n$card-border-width:                 $border-width !default;\n$card-border-radius:                $border-radius !default;\n$card-border-color:                 rgba($black, .125) !default;\n$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;\n$card-cap-bg:                       rgba($black, .03) !default;\n$card-cap-color:                    null !default;\n$card-height:                       null !default;\n$card-color:                        null !default;\n$card-bg:                           $white !default;\n\n$card-img-overlay-padding:          1.25rem !default;\n\n$card-group-margin:                 $grid-gutter-width * .5 !default;\n$card-deck-margin:                  $card-group-margin !default;\n\n$card-columns-count:                3 !default;\n$card-columns-gap:                  1.25rem !default;\n$card-columns-margin:               $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size:                 $font-size-sm !default;\n$tooltip-max-width:                 200px !default;\n$tooltip-color:                     $white !default;\n$tooltip-bg:                        $black !default;\n$tooltip-border-radius:             $border-radius !default;\n$tooltip-opacity:                   .9 !default;\n$tooltip-padding-y:                 .25rem !default;\n$tooltip-padding-x:                 .5rem !default;\n$tooltip-margin:                    0 !default;\n\n$tooltip-arrow-width:               .8rem !default;\n$tooltip-arrow-height:              .4rem !default;\n$tooltip-arrow-color:               $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size:     $tooltip-font-size !default;\n$form-feedback-tooltip-line-height:   $line-height-base !default;\n$form-feedback-tooltip-opacity:       $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size:                 $font-size-sm !default;\n$popover-bg:                        $white !default;\n$popover-max-width:                 276px !default;\n$popover-border-width:              $border-width !default;\n$popover-border-color:              rgba($black, .2) !default;\n$popover-border-radius:             $border-radius-lg !default;\n$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg:                 darken($popover-bg, 3%) !default;\n$popover-header-color:              $headings-color !default;\n$popover-header-padding-y:          .5rem !default;\n$popover-header-padding-x:          .75rem !default;\n\n$popover-body-color:                $body-color !default;\n$popover-body-padding-y:            $popover-header-padding-y !default;\n$popover-body-padding-x:            $popover-header-padding-x !default;\n\n$popover-arrow-width:               1rem !default;\n$popover-arrow-height:              .5rem !default;\n$popover-arrow-color:               $popover-bg !default;\n\n$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width:                   350px !default;\n$toast-padding-x:                   .75rem !default;\n$toast-padding-y:                   .25rem !default;\n$toast-font-size:                   .875rem !default;\n$toast-color:                       null !default;\n$toast-background-color:            rgba($white, .85) !default;\n$toast-border-width:                1px !default;\n$toast-border-color:                rgba(0, 0, 0, .1) !default;\n$toast-border-radius:               .25rem !default;\n$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color:                $gray-600 !default;\n$toast-header-background-color:     rgba($white, .85) !default;\n$toast-header-border-color:         rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size:                   75% !default;\n$badge-font-weight:                 $font-weight-bold !default;\n$badge-padding-y:                   .25em !default;\n$badge-padding-x:                   .4em !default;\n$badge-border-radius:               $border-radius !default;\n\n$badge-transition:                  $btn-transition !default;\n$badge-focus-width:                 $input-btn-focus-width !default;\n\n$badge-pill-padding-x:              .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius:          10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding:               1rem !default;\n\n// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding\n$modal-footer-margin-between:       .5rem !default;\n\n$modal-dialog-margin:               .5rem !default;\n$modal-dialog-margin-y-sm-up:       1.75rem !default;\n\n$modal-title-line-height:           $line-height-base !default;\n\n$modal-content-color:               null !default;\n$modal-content-bg:                  $white !default;\n$modal-content-border-color:        rgba($black, .2) !default;\n$modal-content-border-width:        $border-width !default;\n$modal-content-border-radius:       $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg:                 $black !default;\n$modal-backdrop-opacity:            .5 !default;\n$modal-header-border-color:         $border-color !default;\n$modal-footer-border-color:         $modal-header-border-color !default;\n$modal-header-border-width:         $modal-content-border-width !default;\n$modal-footer-border-width:         $modal-header-border-width !default;\n$modal-header-padding-y:            1rem !default;\n$modal-header-padding-x:            1rem !default;\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl:                          1140px !default;\n$modal-lg:                          800px !default;\n$modal-md:                          500px !default;\n$modal-sm:                          300px !default;\n\n$modal-fade-transform:              translate(0, -50px) !default;\n$modal-show-transform:              none !default;\n$modal-transition:                  transform .3s ease-out !default;\n$modal-scale-transform:             scale(1.02) !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y:                   .75rem !default;\n$alert-padding-x:                   1.25rem !default;\n$alert-margin-bottom:               1rem !default;\n$alert-border-radius:               $border-radius !default;\n$alert-link-font-weight:            $font-weight-bold !default;\n$alert-border-width:                $border-width !default;\n\n$alert-bg-level:                    -10 !default;\n$alert-border-level:                -9 !default;\n$alert-color-level:                 6 !default;\n\n\n// Progress bars\n\n$progress-height:                   1rem !default;\n$progress-font-size:                $font-size-base * .75 !default;\n$progress-bg:                       $gray-200 !default;\n$progress-border-radius:            $border-radius !default;\n$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color:                $white !default;\n$progress-bar-bg:                   theme-color(\"primary\") !default;\n$progress-bar-animation-timing:     1s linear infinite !default;\n$progress-bar-transition:           width .6s ease !default;\n\n\n// List group\n\n$list-group-color:                  null !default;\n$list-group-bg:                     $white !default;\n$list-group-border-color:           rgba($black, .125) !default;\n$list-group-border-width:           $border-width !default;\n$list-group-border-radius:          $border-radius !default;\n\n$list-group-item-padding-y:         .75rem !default;\n$list-group-item-padding-x:         1.25rem !default;\n\n$list-group-hover-bg:               $gray-100 !default;\n$list-group-active-color:           $component-active-color !default;\n$list-group-active-bg:              $component-active-bg !default;\n$list-group-active-border-color:    $list-group-active-bg !default;\n\n$list-group-disabled-color:         $gray-600 !default;\n$list-group-disabled-bg:            $list-group-bg !default;\n\n$list-group-action-color:           $gray-700 !default;\n$list-group-action-hover-color:     $list-group-action-color !default;\n\n$list-group-action-active-color:    $body-color !default;\n$list-group-action-active-bg:       $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding:                 .25rem !default;\n$thumbnail-bg:                      $body-bg !default;\n$thumbnail-border-width:            $border-width !default;\n$thumbnail-border-color:            $gray-300 !default;\n$thumbnail-border-radius:           $border-radius !default;\n$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size:          90% !default;\n$figure-caption-color:              $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-font-size:              null !default;\n\n$breadcrumb-padding-y:              .75rem !default;\n$breadcrumb-padding-x:              1rem !default;\n$breadcrumb-item-padding:           .5rem !default;\n\n$breadcrumb-margin-bottom:          1rem !default;\n\n$breadcrumb-bg:                     $gray-200 !default;\n$breadcrumb-divider-color:          $gray-600 !default;\n$breadcrumb-active-color:           $gray-600 !default;\n$breadcrumb-divider:                quote(\"/\") !default;\n\n$breadcrumb-border-radius:          $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color:             $white !default;\n$carousel-control-width:             15% !default;\n$carousel-control-opacity:           .5 !default;\n$carousel-control-hover-opacity:     .9 !default;\n$carousel-control-transition:        opacity .15s ease !default;\n\n$carousel-indicator-width:           30px !default;\n$carousel-indicator-height:          3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer:          3px !default;\n$carousel-indicator-active-bg:       $white !default;\n$carousel-indicator-transition:      opacity .6s ease !default;\n\n$carousel-caption-width:             70% !default;\n$carousel-caption-color:             $white !default;\n\n$carousel-control-icon-width:        20px !default;\n\n$carousel-control-prev-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>\") !default;\n$carousel-control-next-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>\") !default;\n\n$carousel-transition-duration:       .6s !default;\n$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width:           2rem !default;\n$spinner-height:          $spinner-width !default;\n$spinner-vertical-align:  -.125em !default;\n$spinner-border-width:    .25em !default;\n\n$spinner-width-sm:        1rem !default;\n$spinner-height-sm:       $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size:                   $font-size-base * 1.5 !default;\n$close-font-weight:                 $font-weight-bold !default;\n$close-color:                       $black !default;\n$close-text-shadow:                 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size:                    87.5% !default;\n$code-color:                        $pink !default;\n\n$kbd-padding-y:                     .2rem !default;\n$kbd-padding-x:                     .4rem !default;\n$kbd-font-size:                     $code-font-size !default;\n$kbd-color:                         $white !default;\n$kbd-bg:                            $gray-900 !default;\n\n$pre-color:                         $gray-900 !default;\n$pre-scrollable-max-height:         340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n$user-selects: all, auto, none !default;\n\n\n// Printing\n\n$print-page-size:                   a3 !default;\n$print-body-min-width:              map-get($grid-breakpoints, \"lg\") !default;\n"]}