@deephaven/components 1.27.5-alpha-nodehttp2-config2.8090c45.0 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/ErrorView.css +1 -1
  2. package/dist/ErrorView.css.map +1 -1
  3. package/dist/UIConstants.d.ts +14 -0
  4. package/dist/UIConstants.d.ts.map +1 -1
  5. package/dist/UIConstants.js +16 -0
  6. package/dist/UIConstants.js.map +1 -1
  7. package/dist/spectrum/collections.js +1 -1
  8. package/dist/spectrum/collections.js.map +1 -1
  9. package/dist/spectrum/index.d.ts +1 -0
  10. package/dist/spectrum/index.d.ts.map +1 -1
  11. package/dist/spectrum/index.js +1 -0
  12. package/dist/spectrum/index.js.map +1 -1
  13. package/dist/spectrum/tableView/TableView.d.ts +33 -0
  14. package/dist/spectrum/tableView/TableView.d.ts.map +1 -0
  15. package/dist/spectrum/tableView/TableView.js +59 -0
  16. package/dist/spectrum/tableView/TableView.js.map +1 -0
  17. package/dist/spectrum/tableView/TableViewNormalized.d.ts +17 -0
  18. package/dist/spectrum/tableView/TableViewNormalized.d.ts.map +1 -0
  19. package/dist/spectrum/tableView/TableViewNormalized.js +99 -0
  20. package/dist/spectrum/tableView/TableViewNormalized.js.map +1 -0
  21. package/dist/spectrum/tableView/TableViewWrapper.css +5 -0
  22. package/dist/spectrum/tableView/TableViewWrapper.css.map +1 -0
  23. package/dist/spectrum/tableView/TableViewWrapper.d.ts +20 -0
  24. package/dist/spectrum/tableView/TableViewWrapper.d.ts.map +1 -0
  25. package/dist/spectrum/tableView/TableViewWrapper.js +94 -0
  26. package/dist/spectrum/tableView/TableViewWrapper.js.map +1 -0
  27. package/dist/spectrum/tableView/index.d.ts +4 -0
  28. package/dist/spectrum/tableView/index.d.ts.map +1 -0
  29. package/dist/spectrum/tableView/index.js +4 -0
  30. package/dist/spectrum/tableView/index.js.map +1 -0
  31. package/package.json +8 -8
@@ -74,7 +74,7 @@
74
74
  width: 100%;
75
75
  padding: 1rem;
76
76
  margin-bottom: 0;
77
- color: var(--dh-color-negative-bg);
77
+ color: var(--dh-color-fg);
78
78
  background-color: transparent;
79
79
  border: 0;
80
80
  resize: none;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../scss/bootstrap_overrides.scss","../src/ErrorView.scss","../../../node_modules/bootstrap/scss/_variables.scss","../scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;AC3LA;EACE;EACA,ODmGO;EClGP,eDsJc;ECrJd;EACA;EACA;EACA;EACA,aDiIsB;EChItB;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,cC0GG;EDzGH,eCyGG;EDxGH;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,cErCG;;AFyCP;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,SErDG;;AFsDH;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,SEhEG;EFkEH;EACA;AAAA;AAAA;EAGA;EACA;;AAKN;EACE;EACA,SCqDK;EDpDL;EACA,ODmBK;EClBL;EACA;EACA;EACA;EACA;EACA;EACA","file":"ErrorView.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.error-view {\n position: relative;\n color: $danger;\n border-radius: $border-radius;\n background-color: negative-down-bg-opacity($exception-transparency);\n display: flex;\n flex-direction: column;\n flex-grow: 0;\n font-family: $font-family-monospace;\n transition: all $transition ease-in-out;\n max-height: 150px;\n\n &.expanded {\n max-height: 100%;\n }\n\n .error-view-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n text-wrap: nowrap;\n width: 100%;\n\n .error-view-header-text {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-left: $spacer;\n padding-right: $spacer;\n font-weight: bold;\n flex-shrink: 1;\n overflow: hidden;\n white-space: nowrap;\n\n span {\n flex-shrink: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-left: $spacer-1;\n }\n }\n\n .error-view-buttons {\n display: flex;\n flex-direction: row;\n gap: 1px;\n overflow: hidden;\n border-radius: 0 $border-radius 0 0;\n flex-shrink: 0;\n\n .btn-danger {\n border-radius: 0;\n color: var(--dh-color-contrast-dark);\n opacity: 0.8;\n padding: $spacer-1;\n &:active {\n color: var(--dh-color-contrast-dark);\n }\n }\n\n .error-view-copy-button {\n min-width: 3rem;\n border-radius: 0;\n color: var(--dh-color-contrast-dark);\n opacity: 0.8;\n padding: $spacer-1;\n\n --spectrum-actionbutton-background-color: var(--dh-color-negative-bg);\n --spectrum-actionbutton-background-color-hover: var(\n --dh-color-negative-hover-bg\n );\n --spectrum-actionbutton-border-color: transparent;\n --spectrum-actionbutton-border-color-hover: transparent;\n }\n }\n }\n\n .error-view-text {\n width: 100%;\n padding: $spacer;\n margin-bottom: 0;\n color: $danger;\n background-color: transparent;\n border: 0;\n resize: none;\n outline: none;\n white-space: pre;\n flex-grow: 1;\n overflow: auto;\n }\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","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents, two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n background-size:\n $ant-size $ant-thickness,\n $ant-size $ant-thickness,\n $ant-thickness $ant-size,\n $ant-thickness $ant-size;\n background-position:\n 0 top,\n 0 bottom,\n left 0,\n right 0;\n background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n animation: march 0.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n &::#{$pseudo-element} {\n content: ' ';\n background: $primary;\n box-shadow: $box-shadow;\n border-radius: $border-radius;\n position: absolute;\n height: 100%;\n width: 100%;\n @content;\n }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../scss/bootstrap_overrides.scss","../src/ErrorView.scss","../../../node_modules/bootstrap/scss/_variables.scss","../scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;AC3LA;EACE;EACA,ODmGO;EClGP,eDsJc;ECrJd;EACA;EACA;EACA;EACA,aDiIsB;EChItB;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,cC0GG;EDzGH,eCyGG;EDxGH;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,cErCG;;AFyCP;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,SErDG;;AFsDH;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,SEhEG;EFkEH;EACA;AAAA;AAAA;EAGA;EACA;;AAKN;EACE;EACA,SCqDK;EDpDL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"ErrorView.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.error-view {\n position: relative;\n color: $danger;\n border-radius: $border-radius;\n background-color: negative-down-bg-opacity($exception-transparency);\n display: flex;\n flex-direction: column;\n flex-grow: 0;\n font-family: $font-family-monospace;\n transition: all $transition ease-in-out;\n max-height: 150px;\n\n &.expanded {\n max-height: 100%;\n }\n\n .error-view-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n text-wrap: nowrap;\n width: 100%;\n\n .error-view-header-text {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-left: $spacer;\n padding-right: $spacer;\n font-weight: bold;\n flex-shrink: 1;\n overflow: hidden;\n white-space: nowrap;\n\n span {\n flex-shrink: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-left: $spacer-1;\n }\n }\n\n .error-view-buttons {\n display: flex;\n flex-direction: row;\n gap: 1px;\n overflow: hidden;\n border-radius: 0 $border-radius 0 0;\n flex-shrink: 0;\n\n .btn-danger {\n border-radius: 0;\n color: var(--dh-color-contrast-dark);\n opacity: 0.8;\n padding: $spacer-1;\n &:active {\n color: var(--dh-color-contrast-dark);\n }\n }\n\n .error-view-copy-button {\n min-width: 3rem;\n border-radius: 0;\n color: var(--dh-color-contrast-dark);\n opacity: 0.8;\n padding: $spacer-1;\n\n --spectrum-actionbutton-background-color: var(--dh-color-negative-bg);\n --spectrum-actionbutton-background-color-hover: var(\n --dh-color-negative-hover-bg\n );\n --spectrum-actionbutton-border-color: transparent;\n --spectrum-actionbutton-border-color-hover: transparent;\n }\n }\n }\n\n .error-view-text {\n width: 100%;\n padding: $spacer;\n margin-bottom: 0;\n color: var(--dh-color-fg);\n background-color: transparent;\n border: 0;\n resize: none;\n outline: none;\n white-space: pre;\n flex-grow: 1;\n overflow: auto;\n }\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","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents, two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n background-size:\n $ant-size $ant-thickness,\n $ant-size $ant-thickness,\n $ant-thickness $ant-size,\n $ant-thickness $ant-size;\n background-position:\n 0 top,\n 0 bottom,\n left 0,\n right 0;\n background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n animation: march 0.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n &::#{$pseudo-element} {\n content: ' ';\n background: $primary;\n box-shadow: $box-shadow;\n border-radius: $border-radius;\n position: absolute;\n height: 100%;\n width: 100%;\n @content;\n }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}
@@ -19,4 +19,18 @@ export declare const PICKER_ITEM_HEIGHTS: {
19
19
  };
20
20
  export declare const PICKER_TOP_OFFSET = 4;
21
21
  export declare const TABLE_ROW_HEIGHT = 33;
22
+ export declare const TABLE_VIEW_ROW_HEIGHTS: {
23
+ readonly compact: {
24
+ readonly medium: 32;
25
+ readonly large: 40;
26
+ };
27
+ readonly regular: {
28
+ readonly medium: 40;
29
+ readonly large: 50;
30
+ };
31
+ readonly spacious: {
32
+ readonly medium: 48;
33
+ readonly large: 60;
34
+ };
35
+ };
22
36
  //# sourceMappingURL=UIConstants.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"UIConstants.d.ts","sourceRoot":"","sources":["../src/UIConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAGrC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAaxB,CAAC;AAGX,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,gBAAgB,KAAK,CAAC"}
1
+ {"version":3,"file":"UIConstants.d.ts","sourceRoot":"","sources":["../src/UIConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAGrC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAaxB,CAAC;AAGX,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAGnC,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAazB,CAAC"}
@@ -23,4 +23,20 @@ export var PICKER_ITEM_HEIGHTS = {
23
23
  };
24
24
  export var PICKER_TOP_OFFSET = 4;
25
25
  export var TABLE_ROW_HEIGHT = 33;
26
+
27
+ // Copied from https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/react-spectrum/src/table/TableViewBase.tsx
28
+ export var TABLE_VIEW_ROW_HEIGHTS = {
29
+ compact: {
30
+ medium: 32,
31
+ large: 40
32
+ },
33
+ regular: {
34
+ medium: 40,
35
+ large: 50
36
+ },
37
+ spacious: {
38
+ medium: 48,
39
+ large: 60
40
+ }
41
+ };
26
42
  //# sourceMappingURL=UIConstants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"UIConstants.js","names":["ACTION_ICON_HEIGHT","LIST_VIEW_ROW_HEIGHTS","compact","medium","large","regular","spacious","PICKER_ITEM_HEIGHTS","PICKER_TOP_OFFSET","TABLE_ROW_HEIGHT"],"sources":["../src/UIConstants.ts"],"sourcesContent":["export const ACTION_ICON_HEIGHT = 24;\n\n// Copied from https://github.com/adobe/react-spectrum/blob/b2d25ef23b827ec2427bf47b343e6dbd66326ed3/packages/%40react-spectrum/list/src/ListView.tsx#L78\nexport const LIST_VIEW_ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40,\n },\n regular: {\n medium: 40,\n large: 50,\n },\n spacious: {\n medium: 48,\n large: 60,\n },\n} as const;\n\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/src/ListBoxBase.tsx#L56\nexport const PICKER_ITEM_HEIGHTS = {\n medium: 32,\n large: 48,\n} as const;\n\nexport const PICKER_TOP_OFFSET = 4;\nexport const TABLE_ROW_HEIGHT = 33;\n"],"mappings":"AAAA,OAAO,IAAMA,kBAAkB,GAAG,EAAE;;AAEpC;AACA,OAAO,IAAMC,qBAAqB,GAAG;EACnCC,OAAO,EAAE;IACPC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDC,OAAO,EAAE;IACPF,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDE,QAAQ,EAAE;IACRH,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT;AACF,CAAU;;AAEV;AACA,OAAO,IAAMG,mBAAmB,GAAG;EACjCJ,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACT,CAAU;AAEV,OAAO,IAAMI,iBAAiB,GAAG,CAAC;AAClC,OAAO,IAAMC,gBAAgB,GAAG,EAAE","ignoreList":[]}
1
+ {"version":3,"file":"UIConstants.js","names":["ACTION_ICON_HEIGHT","LIST_VIEW_ROW_HEIGHTS","compact","medium","large","regular","spacious","PICKER_ITEM_HEIGHTS","PICKER_TOP_OFFSET","TABLE_ROW_HEIGHT","TABLE_VIEW_ROW_HEIGHTS"],"sources":["../src/UIConstants.ts"],"sourcesContent":["export const ACTION_ICON_HEIGHT = 24;\n\n// Copied from https://github.com/adobe/react-spectrum/blob/b2d25ef23b827ec2427bf47b343e6dbd66326ed3/packages/%40react-spectrum/list/src/ListView.tsx#L78\nexport const LIST_VIEW_ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40,\n },\n regular: {\n medium: 40,\n large: 50,\n },\n spacious: {\n medium: 48,\n large: 60,\n },\n} as const;\n\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/src/ListBoxBase.tsx#L56\nexport const PICKER_ITEM_HEIGHTS = {\n medium: 32,\n large: 48,\n} as const;\n\nexport const PICKER_TOP_OFFSET = 4;\nexport const TABLE_ROW_HEIGHT = 33;\n\n// Copied from https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/react-spectrum/src/table/TableViewBase.tsx\nexport const TABLE_VIEW_ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40,\n },\n regular: {\n medium: 40,\n large: 50,\n },\n spacious: {\n medium: 48,\n large: 60,\n },\n} as const;\n"],"mappings":"AAAA,OAAO,IAAMA,kBAAkB,GAAG,EAAE;;AAEpC;AACA,OAAO,IAAMC,qBAAqB,GAAG;EACnCC,OAAO,EAAE;IACPC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDC,OAAO,EAAE;IACPF,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDE,QAAQ,EAAE;IACRH,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT;AACF,CAAU;;AAEV;AACA,OAAO,IAAMG,mBAAmB,GAAG;EACjCJ,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACT,CAAU;AAEV,OAAO,IAAMI,iBAAiB,GAAG,CAAC;AAClC,OAAO,IAAMC,gBAAgB,GAAG,EAAE;;AAElC;AACA,OAAO,IAAMC,sBAAsB,GAAG;EACpCR,OAAO,EAAE;IACPC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDC,OAAO,EAAE;IACPF,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDE,QAAQ,EAAE;IACRH,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT;AACF,CAAU","ignoreList":[]}
@@ -6,7 +6,7 @@ export { ActionBar
6
6
  // ListBox - we aren't planning to support this component
7
7
  , MenuTrigger, SubmenuTrigger, ContextualHelpTrigger
8
8
 
9
- // TableView - we aren't planning to support this component
9
+ // TableView is exported from tableView/TableView.tsx as a custom DH component.
10
10
  // Picker is exported from Picker.tsx as a custom DH component. Re-exporting
11
11
  // the Spectrum props type for upstream consumers that need to compose prop types.
12
12
  , TagGroup } from '@adobe/react-spectrum';
@@ -1 +1 @@
1
- {"version":3,"file":"collections.js","names":["ActionBar","MenuTrigger","SubmenuTrigger","ContextualHelpTrigger","TagGroup","SpectrumMenu"],"sources":["../../src/spectrum/collections.ts"],"sourcesContent":["export {\n ActionBar,\n type SpectrumActionBarProps as ActionBarProps,\n // ComboBox is exported from ComboBox.tsx as a custom DH component. Re-exporting\n // the Spectrum props type for upstream consumers that need to compose prop types.\n type SpectrumComboBoxProps,\n // ListBox - we aren't planning to support this component\n type SpectrumMenuProps,\n MenuTrigger,\n type SpectrumMenuTriggerProps as MenuTriggerProps,\n SubmenuTrigger,\n type SpectrumSubmenuTriggerProps as SubmenuTriggerProps,\n ContextualHelpTrigger,\n type SpectrumMenuDialogTriggerProps as ContextualHelpTriggerProps,\n // TableView - we aren't planning to support this component\n // Picker is exported from Picker.tsx as a custom DH component. Re-exporting\n // the Spectrum props type for upstream consumers that need to compose prop types.\n type SpectrumPickerProps,\n TagGroup,\n type SpectrumTagGroupProps as TagGroupProps,\n} from '@adobe/react-spectrum';\nexport { SpectrumMenu } from './SpectrumMenu';\n"],"mappings":"AAAA,SACEA;;AAEA;AACA;;AAEA;AAAA,EAEAC,WAAW,EAEXC,cAAc,EAEdC;;AAEA;AACA;AACA;AAAA,EAEAC,QAAQ,QAEH,uBAAuB;AAAC,SACtBC,YAAY","ignoreList":[]}
1
+ {"version":3,"file":"collections.js","names":["ActionBar","MenuTrigger","SubmenuTrigger","ContextualHelpTrigger","TagGroup","SpectrumMenu"],"sources":["../../src/spectrum/collections.ts"],"sourcesContent":["export {\n ActionBar,\n type SpectrumActionBarProps as ActionBarProps,\n // ComboBox is exported from ComboBox.tsx as a custom DH component. Re-exporting\n // the Spectrum props type for upstream consumers that need to compose prop types.\n type SpectrumComboBoxProps,\n // ListBox - we aren't planning to support this component\n type SpectrumMenuProps,\n MenuTrigger,\n type SpectrumMenuTriggerProps as MenuTriggerProps,\n SubmenuTrigger,\n type SpectrumSubmenuTriggerProps as SubmenuTriggerProps,\n ContextualHelpTrigger,\n type SpectrumMenuDialogTriggerProps as ContextualHelpTriggerProps,\n // TableView is exported from tableView/TableView.tsx as a custom DH component.\n // Picker is exported from Picker.tsx as a custom DH component. Re-exporting\n // the Spectrum props type for upstream consumers that need to compose prop types.\n type SpectrumPickerProps,\n TagGroup,\n type SpectrumTagGroupProps as TagGroupProps,\n} from '@adobe/react-spectrum';\nexport { SpectrumMenu } from './SpectrumMenu';\n"],"mappings":"AAAA,SACEA;;AAEA;AACA;;AAEA;AAAA,EAEAC,WAAW,EAEXC,cAAc,EAEdC;;AAEA;AACA;AACA;AAAA,EAEAC,QAAQ,QAEH,uBAAuB;AAAC,SACtBC,YAAY","ignoreList":[]}
@@ -21,6 +21,7 @@ export * from './comboBox';
21
21
  export * from './ListActionGroup';
22
22
  export * from './ListActionMenu';
23
23
  export * from './listView';
24
+ export * from './tableView';
24
25
  export * from './multiSelect';
25
26
  export * from './picker';
26
27
  export * from './Heading';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spectrum/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AAEzB;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAEhC;;GAEG;AACH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spectrum/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AAEzB;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAEhC;;GAEG;AACH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}
@@ -21,6 +21,7 @@ export * from "./comboBox/index.js";
21
21
  export * from "./ListActionGroup.js";
22
22
  export * from "./ListActionMenu.js";
23
23
  export * from "./listView/index.js";
24
+ export * from "./tableView/index.js";
24
25
  export * from "./multiSelect/index.js";
25
26
  export * from "./picker/index.js";
26
27
  export * from "./Heading.js";
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/spectrum/index.ts"],"sourcesContent":["/**\n * Re-exporting React Spectrum components + props.\n */\nexport * from './buttons';\nexport * from './collections';\nexport * from './content';\nexport * from './dateAndTime';\nexport * from './forms';\nexport * from './icons';\nexport * from './layout';\nexport * from './navigation';\nexport * from './overlays';\nexport * from './shared';\nexport * from './status';\n\n/**\n * Custom DH components wrapping React Spectrum components.\n */\nexport * from './ActionMenu';\nexport * from './ActionGroup';\nexport * from './comboBox';\nexport * from './ListActionGroup';\nexport * from './ListActionMenu';\nexport * from './listView';\nexport * from './multiSelect';\nexport * from './picker';\nexport * from './Heading';\nexport * from './Text';\nexport * from './View';\nexport * from './CheckboxGroup';\n\n/**\n * Custom DH spectrum utils\n */\nexport * from './ItemContent';\nexport * from './ItemTooltip';\nexport * from './utils';\n"],"mappings":"AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AACA;AAFA;AAAA;AAAA","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/spectrum/index.ts"],"sourcesContent":["/**\n * Re-exporting React Spectrum components + props.\n */\nexport * from './buttons';\nexport * from './collections';\nexport * from './content';\nexport * from './dateAndTime';\nexport * from './forms';\nexport * from './icons';\nexport * from './layout';\nexport * from './navigation';\nexport * from './overlays';\nexport * from './shared';\nexport * from './status';\n\n/**\n * Custom DH components wrapping React Spectrum components.\n */\nexport * from './ActionMenu';\nexport * from './ActionGroup';\nexport * from './comboBox';\nexport * from './ListActionGroup';\nexport * from './ListActionMenu';\nexport * from './listView';\nexport * from './tableView';\nexport * from './multiSelect';\nexport * from './picker';\nexport * from './Heading';\nexport * from './Text';\nexport * from './View';\nexport * from './CheckboxGroup';\n\n/**\n * Custom DH spectrum utils\n */\nexport * from './ItemContent';\nexport * from './ItemTooltip';\nexport * from './utils';\n"],"mappings":"AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AACA;AACA;AAFA;AAAA;AAAA","ignoreList":[]}
@@ -0,0 +1,33 @@
1
+ import { type ReactNode } from 'react';
2
+ import type { SpectrumTableProps } from '@adobe/react-spectrum';
3
+ import type { Key } from '@react-types/shared';
4
+ export interface TableViewColumn {
5
+ key: string;
6
+ name: string;
7
+ width?: number;
8
+ defaultWidth?: number | `${number}fr`;
9
+ minWidth?: number;
10
+ maxWidth?: number;
11
+ align?: 'start' | 'center' | 'end';
12
+ allowsResizing?: boolean;
13
+ allowsSorting?: boolean;
14
+ showDivider?: boolean;
15
+ hideHeader?: boolean;
16
+ }
17
+ export interface TableViewProps<T> extends Omit<SpectrumTableProps<T>, 'children' | 'items' | 'overflowMode'> {
18
+ columns: TableViewColumn[];
19
+ items: readonly T[];
20
+ itemCount: number;
21
+ offset?: number;
22
+ onViewportChange?: (top: number, bottom: number) => void;
23
+ onScroll?: (event: Event) => void;
24
+ renderCell: (item: T, columnKey: Key) => ReactNode;
25
+ getTextValue?: (item: T) => string;
26
+ }
27
+ /**
28
+ * A resizable Spectrum table for small, potentially windowed data sets.
29
+ * The supplied items are placed at their absolute offset among itemCount rows.
30
+ */
31
+ export declare function TableView<T>({ columns, items, itemCount, offset, onViewportChange, onScroll, renderCell, getTextValue, 'aria-label': ariaLabel, ...spectrumProps }: TableViewProps<T>): JSX.Element;
32
+ export default TableView;
33
+ //# sourceMappingURL=TableView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableView.d.ts","sourceRoot":"","sources":["../../../src/spectrum/tableView/TableView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAI/C,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAC/B,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IAC1E,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,SAAS,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC;AAID;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EAAE,SAAmB,EACjC,GAAG,aAAa,EACjB,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+BjC;AAED,eAAe,SAAS,CAAC"}
@@ -0,0 +1,59 @@
1
+ var _excluded = ["columns", "items", "itemCount", "offset", "onViewportChange", "onScroll", "renderCell", "getTextValue", "aria-label"];
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
6
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
8
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
+ import { useMemo } from 'react';
10
+ import { TableViewNormalized } from "./TableViewNormalized.js";
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ /**
13
+ * A resizable Spectrum table for small, potentially windowed data sets.
14
+ * The supplied items are placed at their absolute offset among itemCount rows.
15
+ */
16
+ export function TableView(_ref) {
17
+ var columns = _ref.columns,
18
+ items = _ref.items,
19
+ itemCount = _ref.itemCount,
20
+ _ref$offset = _ref.offset,
21
+ offset = _ref$offset === void 0 ? 0 : _ref$offset,
22
+ onViewportChange = _ref.onViewportChange,
23
+ onScroll = _ref.onScroll,
24
+ renderCell = _ref.renderCell,
25
+ getTextValue = _ref.getTextValue,
26
+ _ref$ariaLabel = _ref['aria-label'],
27
+ ariaLabel = _ref$ariaLabel === void 0 ? 'Table' : _ref$ariaLabel,
28
+ spectrumProps = _objectWithoutProperties(_ref, _excluded);
29
+ var rowCount = Math.max(0, itemCount);
30
+ var tableItems = useMemo(() => {
31
+ var windowedItems = Array.from({
32
+ length: rowCount
33
+ }, (_, key) => ({
34
+ key
35
+ }));
36
+ items.forEach((item, index) => {
37
+ var key = offset + index;
38
+ if (key >= 0 && key < windowedItems.length) {
39
+ windowedItems[key] = {
40
+ key,
41
+ item
42
+ };
43
+ }
44
+ });
45
+ return windowedItems;
46
+ }, [items, offset, rowCount]);
47
+ return /*#__PURE__*/_jsx(TableViewNormalized, _objectSpread({
48
+ "aria-label": ariaLabel,
49
+ columns: columns,
50
+ normalizedItems: tableItems,
51
+ onViewportChange: onViewportChange,
52
+ onScroll: onScroll,
53
+ renderCell: renderCell,
54
+ getTextValue: getTextValue
55
+ // eslint-disable-next-line react/jsx-props-no-spreading
56
+ }, spectrumProps));
57
+ }
58
+ export default TableView;
59
+ //# sourceMappingURL=TableView.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableView.js","names":["useMemo","TableViewNormalized","jsx","_jsx","TableView","_ref","columns","items","itemCount","_ref$offset","offset","onViewportChange","onScroll","renderCell","getTextValue","_ref$ariaLabel","ariaLabel","spectrumProps","_objectWithoutProperties","_excluded","rowCount","Math","max","tableItems","windowedItems","Array","from","length","_","key","forEach","item","index","_objectSpread","normalizedItems"],"sources":["../../../src/spectrum/tableView/TableView.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react';\nimport type { SpectrumTableProps } from '@adobe/react-spectrum';\nimport type { Key } from '@react-types/shared';\nimport type { KeyedItem } from '@deephaven/utils';\nimport { TableViewNormalized } from './TableViewNormalized';\n\nexport interface TableViewColumn {\n key: string;\n name: string;\n width?: number;\n defaultWidth?: number | `${number}fr`;\n minWidth?: number;\n maxWidth?: number;\n align?: 'start' | 'center' | 'end';\n allowsResizing?: boolean;\n allowsSorting?: boolean;\n showDivider?: boolean;\n hideHeader?: boolean;\n}\n\nexport interface TableViewProps<T>\n extends Omit<SpectrumTableProps<T>, 'children' | 'items' | 'overflowMode'> {\n columns: TableViewColumn[];\n items: readonly T[];\n itemCount: number;\n offset?: number;\n onViewportChange?: (top: number, bottom: number) => void;\n onScroll?: (event: Event) => void;\n renderCell: (item: T, columnKey: Key) => ReactNode;\n getTextValue?: (item: T) => string;\n}\n\ntype WindowedItem<T> = KeyedItem<T, number>;\n\n/**\n * A resizable Spectrum table for small, potentially windowed data sets.\n * The supplied items are placed at their absolute offset among itemCount rows.\n */\nexport function TableView<T>({\n columns,\n items,\n itemCount,\n offset = 0,\n onViewportChange,\n onScroll,\n renderCell,\n getTextValue,\n 'aria-label': ariaLabel = 'Table',\n ...spectrumProps\n}: TableViewProps<T>): JSX.Element {\n const rowCount = Math.max(0, itemCount);\n const tableItems = useMemo<WindowedItem<T>[]>(() => {\n const windowedItems = Array.from<unknown, WindowedItem<T>>(\n { length: rowCount },\n (_, key) => ({ key })\n );\n\n items.forEach((item, index) => {\n const key = offset + index;\n if (key >= 0 && key < windowedItems.length) {\n windowedItems[key] = { key, item };\n }\n });\n\n return windowedItems;\n }, [items, offset, rowCount]);\n\n return (\n <TableViewNormalized\n aria-label={ariaLabel}\n columns={columns}\n normalizedItems={tableItems}\n onViewportChange={onViewportChange}\n onScroll={onScroll}\n renderCell={renderCell}\n getTextValue={getTextValue}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...spectrumProps}\n />\n );\n}\n\nexport default TableView;\n"],"mappings":";;;;;;;;AAAA,SAASA,OAAO,QAAwB,OAAO;AAAC,SAIvCC,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA8B5B;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAAC,IAAA,EAWU;EAAA,IAVjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,WAAA,GAAAJ,IAAA,CACTK,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IACVE,gBAAgB,GAAAN,IAAA,CAAhBM,gBAAgB;IAChBC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IACVC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IAAAC,cAAA,GAAAV,IAAA,CACZ,YAAY;IAAEW,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAC9BE,aAAa,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEhB,IAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEd,SAAS,CAAC;EACvC,IAAMe,UAAU,GAAGvB,OAAO,CAAoB,MAAM;IAClD,IAAMwB,aAAa,GAAGC,KAAK,CAACC,IAAI,CAC9B;MAAEC,MAAM,EAAEP;IAAS,CAAC,EACpB,CAACQ,CAAC,EAAEC,GAAG,MAAM;MAAEA;IAAI,CAAC,CACtB,CAAC;IAEDtB,KAAK,CAACuB,OAAO,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;MAC7B,IAAMH,GAAG,GAAGnB,MAAM,GAAGsB,KAAK;MAC1B,IAAIH,GAAG,IAAI,CAAC,IAAIA,GAAG,GAAGL,aAAa,CAACG,MAAM,EAAE;QAC1CH,aAAa,CAACK,GAAG,CAAC,GAAG;UAAEA,GAAG;UAAEE;QAAK,CAAC;MACpC;IACF,CAAC,CAAC;IAEF,OAAOP,aAAa;EACtB,CAAC,EAAE,CAACjB,KAAK,EAAEG,MAAM,EAAEU,QAAQ,CAAC,CAAC;EAE7B,oBACEjB,IAAA,CAACF,mBAAmB,EAAAgC,aAAA;IAClB,cAAYjB,SAAU;IACtBV,OAAO,EAAEA,OAAQ;IACjB4B,eAAe,EAAEX,UAAW;IAC5BZ,gBAAgB,EAAEA,gBAAiB;IACnCC,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,YAAY,EAAEA;IACd;EAAA,GACIG,aAAa,CAClB,CAAC;AAEN;AAEA,eAAeb,SAAS","ignoreList":[]}
@@ -0,0 +1,17 @@
1
+ import { type ReactNode } from 'react';
2
+ import { type SpectrumTableProps } from '@adobe/react-spectrum';
3
+ import type { Key } from '@react-types/shared';
4
+ import type { KeyedItem } from '@deephaven/utils';
5
+ import type { TableViewColumn } from './TableView';
6
+ export interface TableViewNormalizedProps<T> extends Omit<SpectrumTableProps<T>, 'children' | 'items' | 'overflowMode'> {
7
+ columns: TableViewColumn[];
8
+ normalizedItems: readonly KeyedItem<T, Key>[];
9
+ onScroll?: (event: Event) => void;
10
+ onViewportChange?: (top: number, bottom: number) => void;
11
+ renderCell: (item: T, columnKey: Key) => ReactNode;
12
+ getTextValue?: (item: T) => string;
13
+ }
14
+ /** Renders normalized, keyed row data in a resizable Spectrum TableView. */
15
+ export declare function TableViewNormalized<T>({ columns, normalizedItems, onScroll, onViewportChange, renderCell, getTextValue, 'aria-label': ariaLabel, density, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, ...spectrumProps }: TableViewNormalizedProps<T>): JSX.Element;
16
+ export default TableViewNormalized;
17
+ //# sourceMappingURL=TableViewNormalized.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableViewNormalized.d.ts","sourceRoot":"","sources":["../../../src/spectrum/tableView/TableViewNormalized.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,MAAM,WAAW,wBAAwB,CAAC,CAAC,CACzC,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IAC1E,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,eAAe,EAAE,SAAS,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,SAAS,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC;AAED,4EAA4E;AAC5E,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,OAAO,EACP,eAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,EAAE,SAAmB,EACjC,OAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,GAAG,aAAa,EACjB,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmF3C;AAED,eAAe,mBAAmB,CAAC"}
@@ -0,0 +1,99 @@
1
+ var _excluded = ["columns", "normalizedItems", "onScroll", "onViewportChange", "renderCell", "getTextValue", "aria-label", "density", "selectedKeys", "defaultSelectedKeys", "disabledKeys", "onSelectionChange"];
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
6
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
8
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
+ import { useCallback } from 'react';
10
+ import { Cell, Column, Row, TableBody, TableHeader } from '@adobe/react-spectrum';
11
+ import { TABLE_VIEW_ROW_HEIGHTS } from "../../UIConstants.js";
12
+ import { useSpectrumThemeProvider } from "../../theme/index.js";
13
+ import { TableViewWrapper } from "./TableViewWrapper.js";
14
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
15
+ /** Renders normalized, keyed row data in a resizable Spectrum TableView. */
16
+ export function TableViewNormalized(_ref) {
17
+ var columns = _ref.columns,
18
+ normalizedItems = _ref.normalizedItems,
19
+ onScroll = _ref.onScroll,
20
+ onViewportChange = _ref.onViewportChange,
21
+ renderCell = _ref.renderCell,
22
+ getTextValue = _ref.getTextValue,
23
+ _ref$ariaLabel = _ref['aria-label'],
24
+ ariaLabel = _ref$ariaLabel === void 0 ? 'Table' : _ref$ariaLabel,
25
+ _ref$density = _ref.density,
26
+ density = _ref$density === void 0 ? 'compact' : _ref$density,
27
+ selectedKeys = _ref.selectedKeys,
28
+ defaultSelectedKeys = _ref.defaultSelectedKeys,
29
+ disabledKeys = _ref.disabledKeys,
30
+ onSelectionChange = _ref.onSelectionChange,
31
+ spectrumProps = _objectWithoutProperties(_ref, _excluded);
32
+ var _useSpectrumThemeProv = useSpectrumThemeProvider(),
33
+ scale = _useSpectrumThemeProv.scale;
34
+
35
+ // Row keys are numeric indices; Spectrum stringifies JSX keys, so we must
36
+ // convert selection props to strings and convert results back to numbers.
37
+ var toStringSet = keys => {
38
+ if (keys == null) return undefined;
39
+ if (keys === 'all') return 'all';
40
+ return new Set([...keys].map(String));
41
+ };
42
+ var handleSelectionChange = useCallback(keys => {
43
+ if (onSelectionChange == null) return;
44
+ if (keys === 'all') {
45
+ onSelectionChange('all');
46
+ return;
47
+ }
48
+ // Recover numeric type where possible; keep strings for non-numeric keys
49
+ onSelectionChange(new Set([...keys].map(k => {
50
+ var n = Number(k);
51
+ return Number.isNaN(n) ? k : n;
52
+ })));
53
+ }, [onSelectionChange]);
54
+ return /*#__PURE__*/_jsxs(TableViewWrapper, _objectSpread(_objectSpread({
55
+ "aria-label": ariaLabel,
56
+ density: density,
57
+ selectionMode: "none",
58
+ selectedKeys: toStringSet(selectedKeys),
59
+ defaultSelectedKeys: toStringSet(defaultSelectedKeys),
60
+ disabledKeys: toStringSet(disabledKeys),
61
+ onSelectionChange: onSelectionChange != null ? handleSelectionChange : undefined,
62
+ onScroll: onScroll,
63
+ itemCount: normalizedItems.length,
64
+ rowHeight: TABLE_VIEW_ROW_HEIGHTS[density !== null && density !== void 0 ? density : 'compact'][scale],
65
+ onViewportChange: onViewportChange
66
+ // eslint-disable-next-line react/jsx-props-no-spreading
67
+ }, spectrumProps), {}, {
68
+ children: [/*#__PURE__*/_jsx(TableHeader, {
69
+ columns: columns,
70
+ children: column => /*#__PURE__*/_jsx(Column, {
71
+ width: column.width,
72
+ defaultWidth: column.defaultWidth,
73
+ minWidth: column.minWidth,
74
+ maxWidth: column.maxWidth,
75
+ align: column.align,
76
+ allowsResizing: column.allowsResizing,
77
+ allowsSorting: column.allowsSorting,
78
+ showDivider: column.showDivider,
79
+ hideHeader: column.hideHeader,
80
+ children: column.name
81
+ }, column.key)
82
+ }), /*#__PURE__*/_jsx(TableBody, {
83
+ items: normalizedItems,
84
+ children: _ref2 => {
85
+ var _getTextValue;
86
+ var key = _ref2.key,
87
+ item = _ref2.item;
88
+ return /*#__PURE__*/_jsx(Row, {
89
+ textValue: item == null ? '' : (_getTextValue = getTextValue === null || getTextValue === void 0 ? void 0 : getTextValue(item)) !== null && _getTextValue !== void 0 ? _getTextValue : '',
90
+ children: columnKey => /*#__PURE__*/_jsx(Cell, {
91
+ children: item == null ? null : renderCell(item, columnKey)
92
+ })
93
+ }, key);
94
+ }
95
+ })]
96
+ }));
97
+ }
98
+ export default TableViewNormalized;
99
+ //# sourceMappingURL=TableViewNormalized.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableViewNormalized.js","names":["useCallback","Cell","Column","Row","TableBody","TableHeader","TABLE_VIEW_ROW_HEIGHTS","useSpectrumThemeProvider","TableViewWrapper","jsx","_jsx","jsxs","_jsxs","TableViewNormalized","_ref","columns","normalizedItems","onScroll","onViewportChange","renderCell","getTextValue","_ref$ariaLabel","ariaLabel","_ref$density","density","selectedKeys","defaultSelectedKeys","disabledKeys","onSelectionChange","spectrumProps","_objectWithoutProperties","_excluded","_useSpectrumThemeProv","scale","toStringSet","keys","undefined","Set","map","String","handleSelectionChange","k","n","Number","isNaN","_objectSpread","selectionMode","itemCount","length","rowHeight","children","column","width","defaultWidth","minWidth","maxWidth","align","allowsResizing","allowsSorting","showDivider","hideHeader","name","key","items","_ref2","_getTextValue","item","textValue","columnKey"],"sources":["../../../src/spectrum/tableView/TableViewNormalized.tsx"],"sourcesContent":["import { useCallback, type ReactNode } from 'react';\nimport {\n Cell,\n Column,\n Row,\n TableBody,\n TableHeader,\n type SpectrumTableProps,\n} from '@adobe/react-spectrum';\nimport type { Key } from '@react-types/shared';\nimport type { KeyedItem } from '@deephaven/utils';\nimport { TABLE_VIEW_ROW_HEIGHTS } from '../../UIConstants';\nimport { useSpectrumThemeProvider } from '../../theme';\nimport type { TableViewColumn } from './TableView';\nimport { TableViewWrapper } from './TableViewWrapper';\n\nexport interface TableViewNormalizedProps<T>\n extends Omit<SpectrumTableProps<T>, 'children' | 'items' | 'overflowMode'> {\n columns: TableViewColumn[];\n normalizedItems: readonly KeyedItem<T, Key>[];\n onScroll?: (event: Event) => void;\n onViewportChange?: (top: number, bottom: number) => void;\n renderCell: (item: T, columnKey: Key) => ReactNode;\n getTextValue?: (item: T) => string;\n}\n\n/** Renders normalized, keyed row data in a resizable Spectrum TableView. */\nexport function TableViewNormalized<T>({\n columns,\n normalizedItems,\n onScroll,\n onViewportChange,\n renderCell,\n getTextValue,\n 'aria-label': ariaLabel = 'Table',\n density = 'compact',\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n ...spectrumProps\n}: TableViewNormalizedProps<T>): JSX.Element {\n const { scale } = useSpectrumThemeProvider();\n\n // Row keys are numeric indices; Spectrum stringifies JSX keys, so we must\n // convert selection props to strings and convert results back to numbers.\n const toStringSet = (\n keys: 'all' | Iterable<Key> | undefined\n ): 'all' | Set<string> | undefined => {\n if (keys == null) return undefined;\n if (keys === 'all') return 'all';\n return new Set([...keys].map(String));\n };\n\n const handleSelectionChange = useCallback(\n (keys: 'all' | Set<Key>): void => {\n if (onSelectionChange == null) return;\n if (keys === 'all') {\n onSelectionChange('all');\n return;\n }\n // Recover numeric type where possible; keep strings for non-numeric keys\n onSelectionChange(\n new Set(\n [...keys].map(k => {\n const n = Number(k);\n return Number.isNaN(n) ? k : n;\n })\n )\n );\n },\n [onSelectionChange]\n );\n\n return (\n <TableViewWrapper\n aria-label={ariaLabel}\n density={density}\n selectionMode=\"none\"\n selectedKeys={toStringSet(selectedKeys)}\n defaultSelectedKeys={toStringSet(defaultSelectedKeys)}\n disabledKeys={toStringSet(disabledKeys)}\n onSelectionChange={\n onSelectionChange != null ? handleSelectionChange : undefined\n }\n onScroll={onScroll}\n itemCount={normalizedItems.length}\n rowHeight={TABLE_VIEW_ROW_HEIGHTS[density ?? 'compact'][scale]}\n onViewportChange={onViewportChange}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...spectrumProps}\n >\n <TableHeader columns={columns}>\n {column => (\n <Column\n key={column.key}\n width={column.width}\n defaultWidth={column.defaultWidth}\n minWidth={column.minWidth}\n maxWidth={column.maxWidth}\n align={column.align}\n allowsResizing={column.allowsResizing}\n allowsSorting={column.allowsSorting}\n showDivider={column.showDivider}\n hideHeader={column.hideHeader}\n >\n {column.name}\n </Column>\n )}\n </TableHeader>\n <TableBody items={normalizedItems}>\n {({ key, item }) => (\n <Row\n key={key}\n textValue={item == null ? '' : getTextValue?.(item) ?? ''}\n >\n {columnKey => (\n <Cell>{item == null ? null : renderCell(item, columnKey)}</Cell>\n )}\n </Row>\n )}\n </TableBody>\n </TableViewWrapper>\n );\n}\n\nexport default TableViewNormalized;\n"],"mappings":";;;;;;;;AAAA,SAASA,WAAW,QAAwB,OAAO;AACnD,SACEC,IAAI,EACJC,MAAM,EACNC,GAAG,EACHC,SAAS,EACTC,WAAW,QAEN,uBAAuB;AAAC,SAGtBC,sBAAsB;AAAA,SACtBC,wBAAwB;AAAA,SAExBC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYzB;AACA,OAAO,SAASC,mBAAmBA,CAAAC,IAAA,EAcU;EAAA,IAb3CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,gBAAgB,GAAAJ,IAAA,CAAhBI,gBAAgB;IAChBC,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACVC,YAAY,GAAAN,IAAA,CAAZM,YAAY;IAAAC,cAAA,GAAAP,IAAA,CACZ,YAAY;IAAEQ,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAAAE,YAAA,GAAAT,IAAA,CACjCU,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,SAAS,GAAAA,YAAA;IACnBE,YAAY,GAAAX,IAAA,CAAZW,YAAY;IACZC,mBAAmB,GAAAZ,IAAA,CAAnBY,mBAAmB;IACnBC,YAAY,GAAAb,IAAA,CAAZa,YAAY;IACZC,iBAAiB,GAAAd,IAAA,CAAjBc,iBAAiB;IACdC,aAAa,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAEhB,IAAAC,qBAAA,GAAkBzB,wBAAwB,CAAC,CAAC;IAApC0B,KAAK,GAAAD,qBAAA,CAALC,KAAK;;EAEb;EACA;EACA,IAAMC,WAAW,GACfC,IAAuC,IACH;IACpC,IAAIA,IAAI,IAAI,IAAI,EAAE,OAAOC,SAAS;IAClC,IAAID,IAAI,KAAK,KAAK,EAAE,OAAO,KAAK;IAChC,OAAO,IAAIE,GAAG,CAAC,CAAC,GAAGF,IAAI,CAAC,CAACG,GAAG,CAACC,MAAM,CAAC,CAAC;EACvC,CAAC;EAED,IAAMC,qBAAqB,GAAGxC,WAAW,CACtCmC,IAAsB,IAAW;IAChC,IAAIP,iBAAiB,IAAI,IAAI,EAAE;IAC/B,IAAIO,IAAI,KAAK,KAAK,EAAE;MAClBP,iBAAiB,CAAC,KAAK,CAAC;MACxB;IACF;IACA;IACAA,iBAAiB,CACf,IAAIS,GAAG,CACL,CAAC,GAAGF,IAAI,CAAC,CAACG,GAAG,CAACG,CAAC,IAAI;MACjB,IAAMC,CAAC,GAAGC,MAAM,CAACF,CAAC,CAAC;MACnB,OAAOE,MAAM,CAACC,KAAK,CAACF,CAAC,CAAC,GAAGD,CAAC,GAAGC,CAAC;IAChC,CAAC,CACH,CACF,CAAC;EACH,CAAC,EACD,CAACd,iBAAiB,CACpB,CAAC;EAED,oBACEhB,KAAA,CAACJ,gBAAgB,EAAAqC,aAAA,CAAAA,aAAA;IACf,cAAYvB,SAAU;IACtBE,OAAO,EAAEA,OAAQ;IACjBsB,aAAa,EAAC,MAAM;IACpBrB,YAAY,EAAES,WAAW,CAACT,YAAY,CAAE;IACxCC,mBAAmB,EAAEQ,WAAW,CAACR,mBAAmB,CAAE;IACtDC,YAAY,EAAEO,WAAW,CAACP,YAAY,CAAE;IACxCC,iBAAiB,EACfA,iBAAiB,IAAI,IAAI,GAAGY,qBAAqB,GAAGJ,SACrD;IACDnB,QAAQ,EAAEA,QAAS;IACnB8B,SAAS,EAAE/B,eAAe,CAACgC,MAAO;IAClCC,SAAS,EAAE3C,sBAAsB,CAACkB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,SAAS,CAAC,CAACS,KAAK,CAAE;IAC/Df,gBAAgB,EAAEA;IAClB;EAAA,GACIW,aAAa;IAAAqB,QAAA,gBAEjBxC,IAAA,CAACL,WAAW;MAACU,OAAO,EAAEA,OAAQ;MAAAmC,QAAA,EAC3BC,MAAM,iBACLzC,IAAA,CAACR,MAAM;QAELkD,KAAK,EAAED,MAAM,CAACC,KAAM;QACpBC,YAAY,EAAEF,MAAM,CAACE,YAAa;QAClCC,QAAQ,EAAEH,MAAM,CAACG,QAAS;QAC1BC,QAAQ,EAAEJ,MAAM,CAACI,QAAS;QAC1BC,KAAK,EAAEL,MAAM,CAACK,KAAM;QACpBC,cAAc,EAAEN,MAAM,CAACM,cAAe;QACtCC,aAAa,EAAEP,MAAM,CAACO,aAAc;QACpCC,WAAW,EAAER,MAAM,CAACQ,WAAY;QAChCC,UAAU,EAAET,MAAM,CAACS,UAAW;QAAAV,QAAA,EAE7BC,MAAM,CAACU;MAAI,GAXPV,MAAM,CAACW,GAYN;IACT,CACU,CAAC,eACdpD,IAAA,CAACN,SAAS;MAAC2D,KAAK,EAAE/C,eAAgB;MAAAkC,QAAA,EAC/Bc,KAAA;QAAA,IAAAC,aAAA;QAAA,IAAGH,GAAG,GAAAE,KAAA,CAAHF,GAAG;UAAEI,IAAI,GAAAF,KAAA,CAAJE,IAAI;QAAA,oBACXxD,IAAA,CAACP,GAAG;UAEFgE,SAAS,EAAED,IAAI,IAAI,IAAI,GAAG,EAAE,IAAAD,aAAA,GAAG7C,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG8C,IAAI,CAAC,cAAAD,aAAA,cAAAA,aAAA,GAAI,EAAG;UAAAf,QAAA,EAEzDkB,SAAS,iBACR1D,IAAA,CAACT,IAAI;YAAAiD,QAAA,EAAEgB,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG/C,UAAU,CAAC+C,IAAI,EAAEE,SAAS;UAAC,CAAO;QAChE,GALIN,GAMF,CAAC;MAAA;IACP,CACQ,CAAC;EAAA,EACI,CAAC;AAEvB;AAEA,eAAejD,mBAAmB","ignoreList":[]}
@@ -0,0 +1,5 @@
1
+ .dh-table-view-wrapper [class*=spectrum-Table-columnResizer]:not([class*=spectrum-Table-columnResizerPlaceholder]) {
2
+ display: flex !important;
3
+ }
4
+
5
+ /*# sourceMappingURL=TableViewWrapper.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/spectrum/tableView/TableViewWrapper.scss"],"names":[],"mappings":"AACE;EAGE","file":"TableViewWrapper.css","sourcesContent":[".dh-table-view-wrapper {\n [class*='spectrum-Table-columnResizer']:not(\n [class*='spectrum-Table-columnResizerPlaceholder']\n ) {\n display: flex !important;\n }\n}"]}
@@ -0,0 +1,20 @@
1
+ import { type SpectrumTableProps } from '@adobe/react-spectrum';
2
+ import './TableViewWrapper.scss';
3
+ export interface TableViewWrapperProps<T> extends SpectrumTableProps<T> {
4
+ /** Total number of logical rows represented by a windowed collection. */
5
+ itemCount?: number;
6
+ /** Handler that is called when the table body is scrolled. */
7
+ onScroll?: (event: Event) => void;
8
+ /** Handler that is called when the visible row range changes. */
9
+ onViewportChange?: (top: number, bottom: number) => void;
10
+ /** Fixed row height used to calculate the visible viewport. */
11
+ rowHeight?: number;
12
+ }
13
+ /**
14
+ * Wraps a Spectrum TableView with consistent sizing and scroll handling.
15
+ * Table data wrappers can provide windowed items while sharing the same
16
+ * Spectrum integration.
17
+ */
18
+ export declare function TableViewWrapper<T>(props: TableViewWrapperProps<T>): JSX.Element;
19
+ export default TableViewWrapper;
20
+ //# sourceMappingURL=TableViewWrapper.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableViewWrapper.d.ts","sourceRoot":"","sources":["../../../src/spectrum/tableView/TableViewWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAU/B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAqB,CAAC,CAAC,CAAE,SAAQ,kBAAkB,CAAC,CAAC,CAAC;IACrE,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,GAAG,CAAC,OAAO,CAiGb;AAED,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,94 @@
1
+ var _excluded = ["itemCount", "onScroll", "onViewportChange", "rowHeight", "UNSAFE_className"];
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
6
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
8
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
9
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
10
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
11
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
12
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
13
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
14
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
15
+ import { TableView as SpectrumTableView } from '@adobe/react-spectrum';
16
+ import { useCallback, useEffect, useRef, useState } from 'react';
17
+ import { extractSpectrumLastChildHTMLElement, useOnScrollRef } from '@deephaven/react-hooks';
18
+ import { EMPTY_FUNCTION } from '@deephaven/utils';
19
+ import cl from 'classnames';
20
+ import { useSpectrumThemeProvider } from "../../theme/index.js";
21
+ import "./TableViewWrapper.css";
22
+ import { jsx as _jsx } from "react/jsx-runtime";
23
+ /**
24
+ * Wraps a Spectrum TableView with consistent sizing and scroll handling.
25
+ * Table data wrappers can provide windowed items while sharing the same
26
+ * Spectrum integration.
27
+ */
28
+ export function TableViewWrapper(props) {
29
+ var _tableViewProps$densi;
30
+ var _props$itemCount = props.itemCount,
31
+ itemCount = _props$itemCount === void 0 ? 0 : _props$itemCount,
32
+ _props$onScroll = props.onScroll,
33
+ onScroll = _props$onScroll === void 0 ? EMPTY_FUNCTION : _props$onScroll,
34
+ onViewportChange = props.onViewportChange,
35
+ rowHeight = props.rowHeight,
36
+ UNSAFE_className = props.UNSAFE_className,
37
+ tableViewProps = _objectWithoutProperties(props, _excluded);
38
+ var _useSpectrumThemeProv = useSpectrumThemeProvider(),
39
+ scale = _useSpectrumThemeProv.scale;
40
+ var _useState = useState(null),
41
+ _useState2 = _slicedToArray(_useState, 2),
42
+ scrollElement = _useState2[0],
43
+ setScrollElement = _useState2[1];
44
+
45
+ // Ref so callback identity changes don't retrigger updateViewport or the effect
46
+ var onViewportChangeRef = useRef(onViewportChange);
47
+ onViewportChangeRef.current = onViewportChange;
48
+ var lastRangeRef = useRef(null);
49
+ var updateViewport = useCallback(element => {
50
+ if (onViewportChangeRef.current == null || rowHeight == null || rowHeight <= 0 || itemCount <= 0) {
51
+ return;
52
+ }
53
+ var top = Math.min(itemCount - 1, Math.max(0, Math.floor(element.scrollTop / rowHeight)));
54
+ var visibleRowCount = Math.max(1, Math.ceil(element.clientHeight / rowHeight));
55
+ var bottom = Math.max(top, Math.min(itemCount - 1, top + visibleRowCount));
56
+ var last = lastRangeRef.current;
57
+ if (last != null && last[0] === top && last[1] === bottom) {
58
+ return;
59
+ }
60
+ lastRangeRef.current = [top, bottom];
61
+ onViewportChangeRef.current(top, bottom);
62
+ }, [itemCount, rowHeight]);
63
+ var handleScroll = useCallback(event => {
64
+ onScroll(event);
65
+ updateViewport(event.target);
66
+ }, [onScroll, updateViewport]);
67
+ var scrollRef = useOnScrollRef(handleScroll, extractSpectrumLastChildHTMLElement);
68
+ var tableViewRef = useCallback(ref => {
69
+ scrollRef(ref);
70
+ setScrollElement(extractSpectrumLastChildHTMLElement(ref));
71
+ }, [scrollRef]);
72
+ useEffect(() => {
73
+ if (scrollElement == null) {
74
+ return undefined;
75
+ }
76
+ lastRangeRef.current = null;
77
+ updateViewport(scrollElement);
78
+ var resizeObserver = new ResizeObserver(() => {
79
+ updateViewport(scrollElement);
80
+ });
81
+ resizeObserver.observe(scrollElement);
82
+ return () => {
83
+ resizeObserver.disconnect();
84
+ };
85
+ }, [scrollElement, updateViewport]);
86
+ return /*#__PURE__*/_jsx(SpectrumTableView, _objectSpread(_objectSpread({
87
+ ref: tableViewRef
88
+ // eslint-disable-next-line react/jsx-props-no-spreading
89
+ }, tableViewProps), {}, {
90
+ UNSAFE_className: cl('dh-table-view-wrapper', "dh-table-view-wrapper-density-".concat((_tableViewProps$densi = tableViewProps.density) !== null && _tableViewProps$densi !== void 0 ? _tableViewProps$densi : 'regular'), "dh-table-view-wrapper-scale-".concat(scale), UNSAFE_className)
91
+ }));
92
+ }
93
+ export default TableViewWrapper;
94
+ //# sourceMappingURL=TableViewWrapper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableViewWrapper.js","names":["TableView","SpectrumTableView","useCallback","useEffect","useRef","useState","extractSpectrumLastChildHTMLElement","useOnScrollRef","EMPTY_FUNCTION","cl","useSpectrumThemeProvider","jsx","_jsx","TableViewWrapper","props","_tableViewProps$densi","_props$itemCount","itemCount","_props$onScroll","onScroll","onViewportChange","rowHeight","UNSAFE_className","tableViewProps","_objectWithoutProperties","_excluded","_useSpectrumThemeProv","scale","_useState","_useState2","_slicedToArray","scrollElement","setScrollElement","onViewportChangeRef","current","lastRangeRef","updateViewport","element","top","Math","min","max","floor","scrollTop","visibleRowCount","ceil","clientHeight","bottom","last","handleScroll","event","target","scrollRef","tableViewRef","ref","undefined","resizeObserver","ResizeObserver","observe","disconnect","_objectSpread","concat","density"],"sources":["../../../src/spectrum/tableView/TableViewWrapper.tsx"],"sourcesContent":["import {\n TableView as SpectrumTableView,\n type SpectrumTableProps,\n} from '@adobe/react-spectrum';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { DOMRefValue } from '@react-types/shared';\nimport {\n extractSpectrumLastChildHTMLElement,\n useOnScrollRef,\n} from '@deephaven/react-hooks';\nimport { EMPTY_FUNCTION } from '@deephaven/utils';\nimport cl from 'classnames';\nimport { useSpectrumThemeProvider } from '../../theme';\nimport './TableViewWrapper.scss';\n\nexport interface TableViewWrapperProps<T> extends SpectrumTableProps<T> {\n /** Total number of logical rows represented by a windowed collection. */\n itemCount?: number;\n /** Handler that is called when the table body is scrolled. */\n onScroll?: (event: Event) => void;\n /** Handler that is called when the visible row range changes. */\n onViewportChange?: (top: number, bottom: number) => void;\n /** Fixed row height used to calculate the visible viewport. */\n rowHeight?: number;\n}\n\n/**\n * Wraps a Spectrum TableView with consistent sizing and scroll handling.\n * Table data wrappers can provide windowed items while sharing the same\n * Spectrum integration.\n */\nexport function TableViewWrapper<T>(\n props: TableViewWrapperProps<T>\n): JSX.Element {\n const {\n itemCount = 0,\n onScroll = EMPTY_FUNCTION,\n onViewportChange,\n rowHeight,\n UNSAFE_className,\n ...tableViewProps\n } = props;\n const { scale } = useSpectrumThemeProvider();\n const [scrollElement, setScrollElement] = useState<HTMLElement | null>(null);\n\n // Ref so callback identity changes don't retrigger updateViewport or the effect\n const onViewportChangeRef = useRef(onViewportChange);\n onViewportChangeRef.current = onViewportChange;\n const lastRangeRef = useRef<readonly [number, number] | null>(null);\n\n const updateViewport = useCallback(\n (element: HTMLElement) => {\n if (\n onViewportChangeRef.current == null ||\n rowHeight == null ||\n rowHeight <= 0 ||\n itemCount <= 0\n ) {\n return;\n }\n const top = Math.min(\n itemCount - 1,\n Math.max(0, Math.floor(element.scrollTop / rowHeight))\n );\n const visibleRowCount = Math.max(\n 1,\n Math.ceil(element.clientHeight / rowHeight)\n );\n const bottom = Math.max(\n top,\n Math.min(itemCount - 1, top + visibleRowCount)\n );\n const last = lastRangeRef.current;\n if (last != null && last[0] === top && last[1] === bottom) {\n return;\n }\n lastRangeRef.current = [top, bottom];\n onViewportChangeRef.current(top, bottom);\n },\n [itemCount, rowHeight]\n );\n\n const handleScroll = useCallback(\n (event: Event) => {\n onScroll(event);\n updateViewport(event.target as HTMLElement);\n },\n [onScroll, updateViewport]\n );\n\n const scrollRef = useOnScrollRef(\n handleScroll,\n extractSpectrumLastChildHTMLElement\n );\n const tableViewRef = useCallback(\n (ref: DOMRefValue<HTMLDivElement> | null) => {\n scrollRef(ref);\n setScrollElement(extractSpectrumLastChildHTMLElement(ref));\n },\n [scrollRef]\n );\n\n useEffect(() => {\n if (scrollElement == null) {\n return undefined;\n }\n lastRangeRef.current = null;\n updateViewport(scrollElement);\n const resizeObserver = new ResizeObserver(() => {\n updateViewport(scrollElement);\n });\n resizeObserver.observe(scrollElement);\n return () => {\n resizeObserver.disconnect();\n };\n }, [scrollElement, updateViewport]);\n\n return (\n <SpectrumTableView\n ref={tableViewRef}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...tableViewProps}\n UNSAFE_className={cl(\n 'dh-table-view-wrapper',\n `dh-table-view-wrapper-density-${tableViewProps.density ?? 'regular'}`,\n `dh-table-view-wrapper-scale-${scale}`,\n UNSAFE_className\n )}\n />\n );\n}\n\nexport default TableViewWrapper;\n"],"mappings":";;;;;;;;;;;;;;AAAA,SACEA,SAAS,IAAIC,iBAAiB,QAEzB,uBAAuB;AAC9B,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEhE,SACEC,mCAAmC,EACnCC,cAAc,QACT,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,kBAAkB;AACjD,OAAOC,EAAE,MAAM,YAAY;AAAC,SACnBC,wBAAwB;AAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAcjC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC9BC,KAA+B,EAClB;EAAA,IAAAC,qBAAA;EACb,IAAAC,gBAAA,GAOIF,KAAK,CANPG,SAAS;IAATA,SAAS,GAAAD,gBAAA,cAAG,CAAC,GAAAA,gBAAA;IAAAE,eAAA,GAMXJ,KAAK,CALPK,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAGV,cAAc,GAAAU,eAAA;IACzBE,gBAAgB,GAIdN,KAAK,CAJPM,gBAAgB;IAChBC,SAAS,GAGPP,KAAK,CAHPO,SAAS;IACTC,gBAAgB,GAEdR,KAAK,CAFPQ,gBAAgB;IACbC,cAAc,GAAAC,wBAAA,CACfV,KAAK,EAAAW,SAAA;EACT,IAAAC,qBAAA,GAAkBhB,wBAAwB,CAAC,CAAC;IAApCiB,KAAK,GAAAD,qBAAA,CAALC,KAAK;EACb,IAAAC,SAAA,GAA0CvB,QAAQ,CAAqB,IAAI,CAAC;IAAAwB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAArEG,aAAa,GAAAF,UAAA;IAAEG,gBAAgB,GAAAH,UAAA;;EAEtC;EACA,IAAMI,mBAAmB,GAAG7B,MAAM,CAACgB,gBAAgB,CAAC;EACpDa,mBAAmB,CAACC,OAAO,GAAGd,gBAAgB;EAC9C,IAAMe,YAAY,GAAG/B,MAAM,CAAmC,IAAI,CAAC;EAEnE,IAAMgC,cAAc,GAAGlC,WAAW,CAC/BmC,OAAoB,IAAK;IACxB,IACEJ,mBAAmB,CAACC,OAAO,IAAI,IAAI,IACnCb,SAAS,IAAI,IAAI,IACjBA,SAAS,IAAI,CAAC,IACdJ,SAAS,IAAI,CAAC,EACd;MACA;IACF;IACA,IAAMqB,GAAG,GAAGC,IAAI,CAACC,GAAG,CAClBvB,SAAS,GAAG,CAAC,EACbsB,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEF,IAAI,CAACG,KAAK,CAACL,OAAO,CAACM,SAAS,GAAGtB,SAAS,CAAC,CACvD,CAAC;IACD,IAAMuB,eAAe,GAAGL,IAAI,CAACE,GAAG,CAC9B,CAAC,EACDF,IAAI,CAACM,IAAI,CAACR,OAAO,CAACS,YAAY,GAAGzB,SAAS,CAC5C,CAAC;IACD,IAAM0B,MAAM,GAAGR,IAAI,CAACE,GAAG,CACrBH,GAAG,EACHC,IAAI,CAACC,GAAG,CAACvB,SAAS,GAAG,CAAC,EAAEqB,GAAG,GAAGM,eAAe,CAC/C,CAAC;IACD,IAAMI,IAAI,GAAGb,YAAY,CAACD,OAAO;IACjC,IAAIc,IAAI,IAAI,IAAI,IAAIA,IAAI,CAAC,CAAC,CAAC,KAAKV,GAAG,IAAIU,IAAI,CAAC,CAAC,CAAC,KAAKD,MAAM,EAAE;MACzD;IACF;IACAZ,YAAY,CAACD,OAAO,GAAG,CAACI,GAAG,EAAES,MAAM,CAAC;IACpCd,mBAAmB,CAACC,OAAO,CAACI,GAAG,EAAES,MAAM,CAAC;EAC1C,CAAC,EACD,CAAC9B,SAAS,EAAEI,SAAS,CACvB,CAAC;EAED,IAAM4B,YAAY,GAAG/C,WAAW,CAC7BgD,KAAY,IAAK;IAChB/B,QAAQ,CAAC+B,KAAK,CAAC;IACfd,cAAc,CAACc,KAAK,CAACC,MAAqB,CAAC;EAC7C,CAAC,EACD,CAAChC,QAAQ,EAAEiB,cAAc,CAC3B,CAAC;EAED,IAAMgB,SAAS,GAAG7C,cAAc,CAC9B0C,YAAY,EACZ3C,mCACF,CAAC;EACD,IAAM+C,YAAY,GAAGnD,WAAW,CAC7BoD,GAAuC,IAAK;IAC3CF,SAAS,CAACE,GAAG,CAAC;IACdtB,gBAAgB,CAAC1B,mCAAmC,CAACgD,GAAG,CAAC,CAAC;EAC5D,CAAC,EACD,CAACF,SAAS,CACZ,CAAC;EAEDjD,SAAS,CAAC,MAAM;IACd,IAAI4B,aAAa,IAAI,IAAI,EAAE;MACzB,OAAOwB,SAAS;IAClB;IACApB,YAAY,CAACD,OAAO,GAAG,IAAI;IAC3BE,cAAc,CAACL,aAAa,CAAC;IAC7B,IAAMyB,cAAc,GAAG,IAAIC,cAAc,CAAC,MAAM;MAC9CrB,cAAc,CAACL,aAAa,CAAC;IAC/B,CAAC,CAAC;IACFyB,cAAc,CAACE,OAAO,CAAC3B,aAAa,CAAC;IACrC,OAAO,MAAM;MACXyB,cAAc,CAACG,UAAU,CAAC,CAAC;IAC7B,CAAC;EACH,CAAC,EAAE,CAAC5B,aAAa,EAAEK,cAAc,CAAC,CAAC;EAEnC,oBACExB,IAAA,CAACX,iBAAiB,EAAA2D,aAAA,CAAAA,aAAA;IAChBN,GAAG,EAAED;IACL;EAAA,GACI9B,cAAc;IAClBD,gBAAgB,EAAEb,EAAE,CAClB,uBAAuB,mCAAAoD,MAAA,EAAA9C,qBAAA,GACUQ,cAAc,CAACuC,OAAO,cAAA/C,qBAAA,cAAAA,qBAAA,GAAI,SAAS,kCAAA8C,MAAA,CACrClC,KAAK,GACpCL,gBACF;EAAE,EACH,CAAC;AAEN;AAEA,eAAeT,gBAAgB","ignoreList":[]}
@@ -0,0 +1,4 @@
1
+ export * from './TableView';
2
+ export * from './TableViewNormalized';
3
+ export * from './TableViewWrapper';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/spectrum/tableView/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
@@ -0,0 +1,4 @@
1
+ export * from "./TableView.js";
2
+ export * from "./TableViewNormalized.js";
3
+ export * from "./TableViewWrapper.js";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/spectrum/tableView/index.ts"],"sourcesContent":["export * from './TableView';\nexport * from './TableViewNormalized';\nexport * from './TableViewWrapper';\n"],"mappings":"","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deephaven/components",
3
- "version": "1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
3
+ "version": "1.28.0",
4
4
  "description": "Deephaven React component library",
5
5
  "author": "Deephaven Data Labs LLC",
6
6
  "license": "Apache-2.0",
@@ -25,10 +25,10 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@adobe/react-spectrum": "3.47.0",
28
- "@deephaven/icons": "^1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
29
- "@deephaven/log": "^1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
30
- "@deephaven/react-hooks": "^1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
31
- "@deephaven/utils": "^1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
28
+ "@deephaven/icons": "^1.2.0",
29
+ "@deephaven/log": "^1.8.0",
30
+ "@deephaven/react-hooks": "^1.21.1",
31
+ "@deephaven/utils": "^1.10.0",
32
32
  "@fontsource/fira-mono": "5.0.13",
33
33
  "@fontsource/fira-sans": "5.0.20",
34
34
  "@fortawesome/fontawesome-svg-core": "^6.2.1",
@@ -70,8 +70,8 @@
70
70
  "react-is": ">=16.8.0"
71
71
  },
72
72
  "devDependencies": {
73
- "@deephaven/mocks": "^1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
74
- "@deephaven/test-utils": "^1.27.5-alpha-nodehttp2-config2.8090c45.0+8090c45",
73
+ "@deephaven/mocks": "^1.1.0",
74
+ "@deephaven/test-utils": "^1.8.0",
75
75
  "react-redux": "^7.2.7"
76
76
  },
77
77
  "files": [
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "8090c4520da10e71c8cc81f9615d2c9c29323381"
89
+ "gitHead": "1887981619668bf53682917796743b98d36c296d"
90
90
  }