@deephaven/components 0.55.1-beta.1 → 0.55.1-beta.11

package/dist/SearchInput.js

@@ -3,21 +3,41 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React, { PureComponent } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsSearch } from '@deephaven/icons';
+import { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';
 import classNames from 'classnames';
+import Button from "./Button.js";
 import "./SearchInput.css";
+import { GLOBAL_SHORTCUTS } from "./shortcuts/index.js";
+import { ContextActions } from "./context-actions/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 class SearchInput extends PureComponent {
   constructor(props) {
     super(props);
     _defineProperty(this, "inputField", void 0);
+    _defineProperty(this, "searchChangeSelection", void 0);
     this.inputField = /*#__PURE__*/React.createRef();
+    this.searchChangeSelection = /*#__PURE__*/React.createRef();
+  }
+  componentDidMount() {
+    this.setInputPaddingRight();
+  }
+  componentDidUpdate() {
+    this.setInputPaddingRight();
   }
   focus() {
     var _this$inputField$curr;
     (_this$inputField$curr = this.inputField.current) === null || _this$inputField$curr === void 0 ? void 0 : _this$inputField$curr.focus();
   }
+  setInputPaddingRight() {
+    var inputField = this.inputField.current;
+    var searchChangeSelection = this.searchChangeSelection.current;
+    if (inputField && searchChangeSelection) {
+      var paddingRight = searchChangeSelection.getBoundingClientRect().width;
+      inputField.style.paddingRight = "".concat(paddingRight, "px");
+    }
+  }
   render() {
     var {
       value,
@@ -29,8 +49,48 @@ class SearchInput extends PureComponent {
       matchCount,
       id,
       onKeyDown,
-      'data-testid': dataTestId
+      'data-testid': dataTestId,
+      cursor
     } = this.props;
+    var matchCountSection;
+    var contextActions = [{
+      action: () => cursor === null || cursor === void 0 ? void 0 : cursor.next('forward'),
+      shortcut: GLOBAL_SHORTCUTS.NEXT
+    }, {
+      action: () => cursor === null || cursor === void 0 ? void 0 : cursor.next('back'),
+      shortcut: GLOBAL_SHORTCUTS.PREVIOUS
+    }];
+    if (cursor && matchCount > 1) {
+      matchCountSection = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          className: "search-change-button",
+          type: "button",
+          onClick: () => {
+            cursor.next('back');
+          },
+          icon: vsArrowLeft,
+          tooltip: "Previous match (".concat(GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText(), ")")
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "search-change-text",
+          children: [cursor.index !== undefined && "".concat(cursor.index + 1, " of "), matchCount]
+        }), /*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          className: "search-change-button",
+          type: "button",
+          onClick: () => {
+            cursor.next('forward');
+          },
+          icon: vsArrowRight,
+          tooltip: "Next match (".concat(GLOBAL_SHORTCUTS.NEXT.getDisplayText(), ")")
+        })]
+      });
+    } else {
+      matchCountSection = matchCount > 0 && /*#__PURE__*/_jsx("span", {
+        className: "search-match",
+        children: matchCount
+      });
+    }
     return /*#__PURE__*/_jsxs("div", {
       className: classNames('search-group', className),
       children: [/*#__PURE__*/_jsx("input", {
@@ -45,10 +105,15 @@ class SearchInput extends PureComponent {
         ref: this.inputField,
         id: id,
         "data-testid": dataTestId
-      }), matchCount != null && /*#__PURE__*/_jsx("span", {
-        className: "search-match",
-        children: matchCount
-      }), /*#__PURE__*/_jsx("span", {
+      }), matchCount != null ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "search-change-selection",
+          ref: this.searchChangeSelection,
+          children: matchCountSection
+        }), /*#__PURE__*/_jsx(ContextActions, {
+          actions: contextActions
+        })]
+      }) : /*#__PURE__*/_jsx("span", {
         className: "search-icon",
         children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
           icon: vsSearch
@@ -65,7 +130,8 @@ _defineProperty(SearchInput, "defaultProps", {
     // no-op
   },
   id: '',
-  'data-testid': undefined
+  'data-testid': undefined,
+  cursor: undefined
 });
 export default SearchInput;
 //# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","jsx","_jsx","jsxs","_jsxs","SearchInput","constructor","props","_defineProperty","inputField","createRef","focus","_this$inputField$curr","current","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","children","type","ref","icon","undefined"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n  value: string;\n  placeholder: string;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  className: string;\n  disabled?: boolean;\n  matchCount: number;\n  id: string;\n  'data-testid'?: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    onKeyDown(): void {\n      // no-op\n    },\n    id: '',\n    'data-testid': undefined,\n  };\n\n  constructor(props: SearchInputProps) {\n    super(props);\n    this.inputField = React.createRef();\n  }\n\n  inputField: React.RefObject<HTMLInputElement>;\n\n  focus(): void {\n    this.inputField.current?.focus();\n  }\n\n  render(): JSX.Element {\n    const {\n      value,\n      placeholder,\n      onBlur,\n      onChange,\n      className,\n      disabled,\n      matchCount,\n      id,\n      onKeyDown,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <div className={classNames('search-group', className)}>\n        <input\n          type=\"search\"\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          className=\"form-control\"\n          disabled={disabled}\n          placeholder={placeholder}\n          ref={this.inputField}\n          id={id}\n          data-testid={dataTestId}\n        />\n        {matchCount != null && (\n          <span className=\"search-match\">{matchCount}</span>\n        )}\n        <span className=\"search-icon\">\n          <FontAwesomeIcon icon={vsSearch} />\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default SearchInput;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAgBpC,MAAMC,WAAW,SAASR,aAAa,CAAmB;EAYxDS,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA;IACb,IAAI,CAACC,UAAU,gBAAGb,KAAK,CAACc,SAAS,CAAC,CAAC;EACrC;EAIAC,KAAKA,CAAA,EAAS;IAAA,IAAAC,qBAAA;IACZ,CAAAA,qBAAA,OAAI,CAACH,UAAU,CAACI,OAAO,cAAAD,qBAAA,uBAAvBA,qBAAA,CAAyBD,KAAK,CAAC,CAAC;EAClC;EAEAG,MAAMA,CAAA,EAAgB;IACpB,IAAM;MACJC,KAAK;MACLC,WAAW;MACXC,MAAM;MACNC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,EAAE;MACFC,SAAS;MACT,aAAa,EAAEC;IACjB,CAAC,GAAG,IAAI,CAACjB,KAAK;IACd,oBACEH,KAAA;MAAKe,SAAS,EAAEnB,UAAU,CAAC,cAAc,EAAEmB,SAAS,CAAE;MAAAM,QAAA,gBACpDvB,IAAA;QACEwB,IAAI,EAAC,QAAQ;QACbX,KAAK,EAAEA,KAAM;QACbE,MAAM,EAAEA,MAAO;QACfC,QAAQ,EAAEA,QAAS;QACnBK,SAAS,EAAEA,SAAU;QACrBJ,SAAS,EAAC,cAAc;QACxBC,QAAQ,EAAEA,QAAS;QACnBJ,WAAW,EAAEA,WAAY;QACzBW,GAAG,EAAE,IAAI,CAAClB,UAAW;QACrBa,EAAE,EAAEA,EAAG;QACP,eAAaE;MAAW,CACzB,CAAC,EACDH,UAAU,IAAI,IAAI,iBACjBnB,IAAA;QAAMiB,SAAS,EAAC,cAAc;QAAAM,QAAA,EAAEJ;MAAU,CAAO,CAClD,eACDnB,IAAA;QAAMiB,SAAS,EAAC,aAAa;QAAAM,QAAA,eAC3BvB,IAAA,CAACJ,eAAe;UAAC8B,IAAI,EAAE7B;QAAS,CAAE;MAAC,CAC/B,CAAC;IAAA,CACJ,CAAC;EAEV;AACF;AAACS,eAAA,CA5DKH,WAAW,kBACO;EACpBW,WAAW,EAAE,QAAQ;EACrBG,SAAS,EAAE,EAAE;EACbE,UAAU,EAAE,IAAI;EAChBE,SAASA,CAAA,EAAS;IAChB;EAAA,CACD;EACDD,EAAE,EAAE,EAAE;EACN,aAAa,EAAEO;AACjB,CAAC;AAoDH,eAAexB,WAAW"}
+{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsArrowLeft","vsArrowRight","vsSearch","classNames","Button","GLOBAL_SHORTCUTS","ContextActions","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SearchInput","constructor","props","_defineProperty","inputField","createRef","searchChangeSelection","componentDidMount","setInputPaddingRight","componentDidUpdate","focus","_this$inputField$curr","current","paddingRight","getBoundingClientRect","width","style","concat","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","cursor","matchCountSection","contextActions","action","next","shortcut","NEXT","PREVIOUS","children","kind","type","onClick","icon","tooltip","getDisplayText","index","undefined","ref","actions"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport Button from './Button';\nimport './SearchInput.scss';\nimport { GLOBAL_SHORTCUTS } from './shortcuts';\nimport { ContextActions } from './context-actions';\n\ninterface SearchInputProps {\n  value: string;\n  placeholder: string;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  className: string;\n  disabled?: boolean;\n  matchCount: number;\n  id: string;\n  'data-testid'?: string;\n  cursor?: {\n    index: number | undefined;\n    next: (direction: 'forward' | 'back') => void;\n  };\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    onKeyDown(): void {\n      // no-op\n    },\n    id: '',\n    'data-testid': undefined,\n    cursor: undefined,\n  };\n\n  constructor(props: SearchInputProps) {\n    super(props);\n    this.inputField = React.createRef();\n    this.searchChangeSelection = React.createRef();\n  }\n\n  componentDidMount(): void {\n    this.setInputPaddingRight();\n  }\n\n  componentDidUpdate(): void {\n    this.setInputPaddingRight();\n  }\n\n  focus(): void {\n    this.inputField.current?.focus();\n  }\n\n  inputField: React.RefObject<HTMLInputElement>;\n\n  searchChangeSelection: React.RefObject<HTMLDivElement>;\n\n  setInputPaddingRight(): void {\n    const inputField = this.inputField.current;\n    const searchChangeSelection = this.searchChangeSelection.current;\n    if (inputField && searchChangeSelection) {\n      const paddingRight = searchChangeSelection.getBoundingClientRect().width;\n      inputField.style.paddingRight = `${paddingRight}px`;\n    }\n  }\n\n  render(): JSX.Element {\n    const {\n      value,\n      placeholder,\n      onBlur,\n      onChange,\n      className,\n      disabled,\n      matchCount,\n      id,\n      onKeyDown,\n      'data-testid': dataTestId,\n      cursor,\n    } = this.props;\n\n    let matchCountSection;\n    const contextActions = [\n      {\n        action: () => cursor?.next('forward'),\n        shortcut: GLOBAL_SHORTCUTS.NEXT,\n      },\n      {\n        action: () => cursor?.next('back'),\n        shortcut: GLOBAL_SHORTCUTS.PREVIOUS,\n      },\n    ];\n\n    if (cursor && matchCount > 1) {\n      matchCountSection = (\n        <>\n          <Button\n            kind=\"ghost\"\n            className=\"search-change-button\"\n            type=\"button\"\n            onClick={() => {\n              cursor.next('back');\n            }}\n            icon={vsArrowLeft}\n            tooltip={`Previous match (${GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText()})`}\n          />\n          <span className=\"search-change-text\">\n            {cursor.index !== undefined && `${cursor.index + 1} of `}\n            {matchCount}\n          </span>\n          <Button\n            kind=\"ghost\"\n            className=\"search-change-button\"\n            type=\"button\"\n            onClick={() => {\n              cursor.next('forward');\n            }}\n            icon={vsArrowRight}\n            tooltip={`Next match (${GLOBAL_SHORTCUTS.NEXT.getDisplayText()})`}\n          />\n        </>\n      );\n    } else {\n      matchCountSection = matchCount > 0 && (\n        <span className=\"search-match\">{matchCount}</span>\n      );\n    }\n\n    return (\n      <div className={classNames('search-group', className)}>\n        <input\n          type=\"search\"\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          className=\"form-control\"\n          disabled={disabled}\n          placeholder={placeholder}\n          ref={this.inputField}\n          id={id}\n          data-testid={dataTestId}\n        />\n\n        {matchCount != null ? (\n          <>\n            <div\n              className=\"search-change-selection\"\n              ref={this.searchChangeSelection}\n            >\n              {matchCountSection}\n            </div>\n            <ContextActions actions={contextActions} />\n          </>\n        ) : (\n          <span className=\"search-icon\">\n            <FontAwesomeIcon icon={vsSearch} />\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default SearchInput;\n"],"mappings":"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"}

package/dist/shortcuts/GlobalShortcuts.d.ts

@@ -5,6 +5,8 @@ declare const GLOBAL_SHORTCUTS: {
     SELECT_ALL: import("./Shortcut").default;
     LINKER: import("./Shortcut").default;
     LINKER_CLOSE: import("./Shortcut").default;
+    NEXT: import("./Shortcut").default;
+    PREVIOUS: import("./Shortcut").default;
 };
 export default GLOBAL_SHORTCUTS;
 //# sourceMappingURL=GlobalShortcuts.d.ts.map

package/dist/shortcuts/GlobalShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalShortcuts.d.ts","sourceRoot":"","sources":["../../src/shortcuts/GlobalShortcuts.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;CA0CrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"GlobalShortcuts.d.ts","sourceRoot":"","sources":["../../src/shortcuts/GlobalShortcuts.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;;;CAwDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/shortcuts/GlobalShortcuts.js

@@ -41,6 +41,20 @@ var GLOBAL_SHORTCUTS = {
     shortcut: [KEY.ESCAPE],
     macShortcut: [KEY.ESCAPE],
     isEditable: false
+  }),
+  NEXT: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.NEXT',
+    name: 'Next',
+    shortcut: [KEY.ENTER],
+    macShortcut: [KEY.ENTER],
+    isEditable: false
+  }),
+  PREVIOUS: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.PREVIOUS',
+    name: 'Previous',
+    shortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    isEditable: false
   })
 };
 export default GLOBAL_SHORTCUTS;

package/dist/shortcuts/GlobalShortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","LINKER","L","LINKER_CLOSE","ESCAPE"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n  COPY: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.COPY',\n    name: 'Copy',\n    shortcut: [MODIFIER.CTRL, KEY.C],\n    macShortcut: [MODIFIER.CMD, KEY.C],\n    isEditable: false,\n  }),\n  PASTE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PASTE',\n    name: 'Paste',\n    shortcut: [MODIFIER.CTRL, KEY.V],\n    macShortcut: [MODIFIER.CMD, KEY.V],\n    isEditable: false,\n  }),\n  SAVE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SAVE',\n    name: 'Save',\n    shortcut: [MODIFIER.CTRL, KEY.S],\n    macShortcut: [MODIFIER.CMD, KEY.S],\n    isEditable: false,\n  }),\n  SELECT_ALL: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SELECT_ALL',\n    name: 'Select All',\n    shortcut: [MODIFIER.CTRL, KEY.A],\n    macShortcut: [MODIFIER.CMD, KEY.A],\n    isEditable: false,\n  }),\n  LINKER: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER',\n    name: 'Linker',\n    shortcut: [MODIFIER.CTRL, KEY.L],\n    macShortcut: [MODIFIER.CMD, KEY.L],\n  }),\n  LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER_CLOSE',\n    name: 'Close Linker Overlay',\n    shortcut: [KEY.ESCAPE],\n    macShortcut: [KEY.ESCAPE],\n    isEditable: false,\n  }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,MAAM,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACmB,CAAC,CAAC;IAChCV,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACmB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAEtB,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAACqB,MAAM,CAAC;IACtBZ,WAAW,EAAE,CAACT,GAAG,CAACqB,MAAM,CAAC;IACzBV,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB"}
+{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","LINKER","L","LINKER_CLOSE","ESCAPE","NEXT","ENTER","PREVIOUS","SHIFT"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n  COPY: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.COPY',\n    name: 'Copy',\n    shortcut: [MODIFIER.CTRL, KEY.C],\n    macShortcut: [MODIFIER.CMD, KEY.C],\n    isEditable: false,\n  }),\n  PASTE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PASTE',\n    name: 'Paste',\n    shortcut: [MODIFIER.CTRL, KEY.V],\n    macShortcut: [MODIFIER.CMD, KEY.V],\n    isEditable: false,\n  }),\n  SAVE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SAVE',\n    name: 'Save',\n    shortcut: [MODIFIER.CTRL, KEY.S],\n    macShortcut: [MODIFIER.CMD, KEY.S],\n    isEditable: false,\n  }),\n  SELECT_ALL: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SELECT_ALL',\n    name: 'Select All',\n    shortcut: [MODIFIER.CTRL, KEY.A],\n    macShortcut: [MODIFIER.CMD, KEY.A],\n    isEditable: false,\n  }),\n  LINKER: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER',\n    name: 'Linker',\n    shortcut: [MODIFIER.CTRL, KEY.L],\n    macShortcut: [MODIFIER.CMD, KEY.L],\n  }),\n  LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER_CLOSE',\n    name: 'Close Linker Overlay',\n    shortcut: [KEY.ESCAPE],\n    macShortcut: [KEY.ESCAPE],\n    isEditable: false,\n  }),\n  NEXT: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.NEXT',\n    name: 'Next',\n    shortcut: [KEY.ENTER],\n    macShortcut: [KEY.ENTER],\n    isEditable: false,\n  }),\n  PREVIOUS: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PREVIOUS',\n    name: 'Previous',\n    shortcut: [MODIFIER.SHIFT, KEY.ENTER],\n    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],\n    isEditable: false,\n  }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,MAAM,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACmB,CAAC,CAAC;IAChCV,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACmB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAEtB,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAACqB,MAAM,CAAC;IACtBZ,WAAW,EAAE,CAACT,GAAG,CAACqB,MAAM,CAAC;IACzBV,UAAU,EAAE;EACd,CAAC,CAAC;EACFW,IAAI,EAAExB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACN,GAAG,CAACuB,KAAK,CAAC;IACrBd,WAAW,EAAE,CAACT,GAAG,CAACuB,KAAK,CAAC;IACxBZ,UAAU,EAAE;EACd,CAAC,CAAC;EACFa,QAAQ,EAAE1B,gBAAgB,CAACK,YAAY,CAAC;IACtCC,EAAE,EAAE,iBAAiB;IACrBC,IAAI,EAAE,UAAU;IAChBC,QAAQ,EAAE,CAACP,QAAQ,CAAC0B,KAAK,EAAEzB,GAAG,CAACuB,KAAK,CAAC;IACrCd,WAAW,EAAE,CAACV,QAAQ,CAAC0B,KAAK,EAAEzB,GAAG,CAACuB,KAAK,CAAC;IACxCZ,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB"}

package/dist/theme/ThemeModel.d.ts

@@ -1,16 +1,22 @@
 export type BaseThemeType = 'dark' | 'light';
 export type BaseThemeKey = `default-${BaseThemeType}`;
-export type ThemePreloadStyleContent = `:root{${string}`;
+export type CssVariableStyleContent = `:root{${string}`;
+export type ThemeCssVariableName = `--dh-${string}`;
+export type ThemePreloadColorVariable = '--dh-color-loading-spinner-primary' | '--dh-color-loading-spinner-secondary' | '--dh-color-background' | '--dh-color-foreground';
+export type ThemeIconsRequiringManualColorChanges = '--dh-svg-icon-select-indicator' | '--dh-svg-icon-select-indicator-hover' | '--dh-svg-icon-select-indicator-disabled' | '--dh-svg-icon-error';
 export declare const DEFAULT_DARK_THEME_KEY = "default-dark";
 export declare const DEFAULT_LIGHT_THEME_KEY = "default-light";
-export declare const DEFAULT_PRELOAD_DATA_VARIABLES: {
-    '--dh-color-accent': string;
-    '--dh-color-background': string;
-};
+export declare const DEFAULT_PRELOAD_DATA_VARIABLES: Record<ThemePreloadColorVariable, string>;
+/**
+ * Some inline SVGs require manually updating their fill color via
+ * `updateSVGFillColors`. This object maps these variables to their respective
+ * fill color variables.
+ */
+export declare const SVG_ICON_MANUAL_COLOR_MAP: Record<ThemeIconsRequiringManualColorChanges, string>;
 export declare const THEME_CACHE_LOCAL_STORAGE_KEY = "deephaven.themeCache";
 export interface ThemePreloadData {
     themeKey: string;
-    preloadStyleContent?: ThemePreloadStyleContent;
+    preloadStyleContent?: CssVariableStyleContent;
 }
 export interface ThemeData {
     baseThemeKey?: BaseThemeKey;

package/dist/theme/ThemeModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeModel.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,WAAW,aAAa,EAAE,CAAC;AACtD,MAAM,MAAM,wBAAwB,GAAG,SAAS,MAAM,EAAE,CAAC;AAEzD,eAAO,MAAM,sBAAsB,iBAAwC,CAAC;AAC5E,eAAO,MAAM,uBAAuB,kBAAyC,CAAC;AAG9E,eAAO,MAAM,8BAA8B;;;CAGC,CAAC;AAE7C,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;CAChD;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB"}
+{"version":3,"file":"ThemeModel.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,WAAW,aAAa,EAAE,CAAC;AACtD,MAAM,MAAM,uBAAuB,GAAG,SAAS,MAAM,EAAE,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,MAAM,EAAE,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GACjC,oCAAoC,GACpC,sCAAsC,GACtC,uBAAuB,GACvB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,qCAAqC,GAC7C,gCAAgC,GAChC,sCAAsC,GACtC,yCAAyC,GACzC,qBAAqB,CAAC;AAE1B,eAAO,MAAM,sBAAsB,iBAAwC,CAAC;AAC5E,eAAO,MAAM,uBAAuB,kBAAyC,CAAC;AAG9E,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,yBAAyB,EACzB,MAAM,CAMP,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,qCAAqC,EACrC,MAAM,CAMP,CAAC;AAEF,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;CAC/C;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB"}

package/dist/theme/ThemeModel.js

@@ -3,10 +3,25 @@ export var DEFAULT_LIGHT_THEME_KEY = 'default-light';
 
 // Css properties that are used in preload data with default values.
 export var DEFAULT_PRELOAD_DATA_VARIABLES = {
-  '--dh-color-accent': '#4c7dee',
-  // dark theme --dh-color-blue-700
-  '--dh-color-background': '#1a171a' // dark theme --dh-color-gray-50
+  '--dh-color-loading-spinner-primary': '#3b6bda',
+  // dark theme --dh-color-blue-600
+  '--dh-color-loading-spinner-secondary': '#f0f0ee80',
+  // dark theme --dh-color-gray-800 + 50% opacity
+  '--dh-color-background': '#1a171a',
+  // dark theme --dh-color-gray-50
+  '--dh-color-foreground': '#f0f0ee' // dark theme --dh-color-gray-800
 };
 
+/**
+ * Some inline SVGs require manually updating their fill color via
+ * `updateSVGFillColors`. This object maps these variables to their respective
+ * fill color variables.
+ */
+export var SVG_ICON_MANUAL_COLOR_MAP = {
+  '--dh-svg-icon-select-indicator': '--dh-color-selector-fg',
+  '--dh-svg-icon-select-indicator-hover': '--dh-color-selector-hover-fg',
+  '--dh-svg-icon-select-indicator-disabled': '--dh-color-selector-disabled-fg',
+  '--dh-svg-icon-error': '--dh-color-form-control-error'
+};
 export var THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';
 //# sourceMappingURL=ThemeModel.js.map

package/dist/theme/ThemeModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeModel.js","names":["DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_PRELOAD_DATA_VARIABLES","THEME_CACHE_LOCAL_STORAGE_KEY"],"sources":["../../src/theme/ThemeModel.ts"],"sourcesContent":["export type BaseThemeType = 'dark' | 'light';\nexport type BaseThemeKey = `default-${BaseThemeType}`;\nexport type ThemePreloadStyleContent = `:root{${string}`;\n\nexport const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;\nexport const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;\n\n// Css properties that are used in preload data with default values.\nexport const DEFAULT_PRELOAD_DATA_VARIABLES = {\n  '--dh-color-accent': '#4c7dee', // dark theme --dh-color-blue-700\n  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50\n} satisfies Record<`--dh-${string}`, string>;\n\nexport const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';\n\nexport interface ThemePreloadData {\n  themeKey: string;\n  preloadStyleContent?: ThemePreloadStyleContent;\n}\n\nexport interface ThemeData {\n  baseThemeKey?: BaseThemeKey;\n  themeKey: string;\n  name: string;\n  styleContent: string;\n}\n\nexport interface ThemeRegistrationData {\n  base: ThemeData[];\n  custom: ThemeData[];\n}\n"],"mappings":"AAIA,OAAO,IAAMA,sBAAsB,GAAG,cAAqC;AAC3E,OAAO,IAAMC,uBAAuB,GAAG,eAAsC;;AAE7E;AACA,OAAO,IAAMC,8BAA8B,GAAG;EAC5C,mBAAmB,EAAE,SAAS;EAAE;EAChC,uBAAuB,EAAE,SAAS,CAAE;AACtC,CAA4C;;AAE5C,OAAO,IAAMC,6BAA6B,GAAG,sBAAsB"}
+{"version":3,"file":"ThemeModel.js","names":["DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_PRELOAD_DATA_VARIABLES","SVG_ICON_MANUAL_COLOR_MAP","THEME_CACHE_LOCAL_STORAGE_KEY"],"sources":["../../src/theme/ThemeModel.ts"],"sourcesContent":["export type BaseThemeType = 'dark' | 'light';\nexport type BaseThemeKey = `default-${BaseThemeType}`;\nexport type CssVariableStyleContent = `:root{${string}`;\nexport type ThemeCssVariableName = `--dh-${string}`;\n\nexport type ThemePreloadColorVariable =\n  | '--dh-color-loading-spinner-primary'\n  | '--dh-color-loading-spinner-secondary'\n  | '--dh-color-background'\n  | '--dh-color-foreground';\n\nexport type ThemeIconsRequiringManualColorChanges =\n  | '--dh-svg-icon-select-indicator'\n  | '--dh-svg-icon-select-indicator-hover'\n  | '--dh-svg-icon-select-indicator-disabled'\n  | '--dh-svg-icon-error';\n\nexport const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;\nexport const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;\n\n// Css properties that are used in preload data with default values.\nexport const DEFAULT_PRELOAD_DATA_VARIABLES: Record<\n  ThemePreloadColorVariable,\n  string\n> = {\n  '--dh-color-loading-spinner-primary': '#3b6bda', // dark theme --dh-color-blue-600\n  '--dh-color-loading-spinner-secondary': '#f0f0ee80', // dark theme --dh-color-gray-800 + 50% opacity\n  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50\n  '--dh-color-foreground': '#f0f0ee', // dark theme --dh-color-gray-800\n};\n\n/**\n * Some inline SVGs require manually updating their fill color via\n * `updateSVGFillColors`. This object maps these variables to their respective\n * fill color variables.\n */\nexport const SVG_ICON_MANUAL_COLOR_MAP: Record<\n  ThemeIconsRequiringManualColorChanges,\n  string\n> = {\n  '--dh-svg-icon-select-indicator': '--dh-color-selector-fg',\n  '--dh-svg-icon-select-indicator-hover': '--dh-color-selector-hover-fg',\n  '--dh-svg-icon-select-indicator-disabled': '--dh-color-selector-disabled-fg',\n  '--dh-svg-icon-error': '--dh-color-form-control-error',\n};\n\nexport const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';\n\nexport interface ThemePreloadData {\n  themeKey: string;\n  preloadStyleContent?: CssVariableStyleContent;\n}\n\nexport interface ThemeData {\n  baseThemeKey?: BaseThemeKey;\n  themeKey: string;\n  name: string;\n  styleContent: string;\n}\n\nexport interface ThemeRegistrationData {\n  base: ThemeData[];\n  custom: ThemeData[];\n}\n"],"mappings":"AAiBA,OAAO,IAAMA,sBAAsB,GAAG,cAAqC;AAC3E,OAAO,IAAMC,uBAAuB,GAAG,eAAsC;;AAE7E;AACA,OAAO,IAAMC,8BAGZ,GAAG;EACF,oCAAoC,EAAE,SAAS;EAAE;EACjD,sCAAsC,EAAE,WAAW;EAAE;EACrD,uBAAuB,EAAE,SAAS;EAAE;EACpC,uBAAuB,EAAE,SAAS,CAAE;AACtC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,yBAGZ,GAAG;EACF,gCAAgC,EAAE,wBAAwB;EAC1D,sCAAsC,EAAE,8BAA8B;EACtE,yCAAyC,EAAE,iCAAiC;EAC5E,qBAAqB,EAAE;AACzB,CAAC;AAED,OAAO,IAAMC,6BAA6B,GAAG,sBAAsB"}

package/dist/theme/ThemePicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function ThemePicker(): JSX.Element | null;
+export default ThemePicker;
+//# sourceMappingURL=ThemePicker.d.ts.map

package/dist/theme/ThemePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../src/theme/ThemePicker.tsx"],"names":[],"mappings":";AAIA,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAoBhD;AAED,eAAe,WAAW,CAAC"}

package/dist/theme/ThemePicker.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { Item, Picker } from '@adobe/react-spectrum';
+import useTheme from "./useTheme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ThemePicker() {
+  var {
+    selectedThemeKey,
+    setSelectedThemeKey,
+    themes
+  } = useTheme();
+  var onSelectionChange = useCallback(key => {
+    setSelectedThemeKey(key);
+  }, [setSelectedThemeKey]);
+  return /*#__PURE__*/_jsx(Picker, {
+    label: "Pick a color scheme",
+    items: themes,
+    selectedKey: selectedThemeKey,
+    onSelectionChange: onSelectionChange,
+    children: item => /*#__PURE__*/_jsx(Item, {
+      children: item.name
+    }, item.themeKey)
+  });
+}
+export default ThemePicker;
+//# sourceMappingURL=ThemePicker.js.map

package/dist/theme/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.js","names":["useCallback","Item","Picker","useTheme","jsx","_jsx","ThemePicker","selectedThemeKey","setSelectedThemeKey","themes","onSelectionChange","key","label","items","selectedKey","children","item","name","themeKey"],"sources":["../../src/theme/ThemePicker.tsx"],"sourcesContent":["import { Key, useCallback } from 'react';\nimport { Item, Picker } from '@adobe/react-spectrum';\nimport useTheme from './useTheme';\n\nexport function ThemePicker(): JSX.Element | null {\n  const { selectedThemeKey, setSelectedThemeKey, themes } = useTheme();\n\n  const onSelectionChange = useCallback(\n    (key: Key) => {\n      setSelectedThemeKey(key as string);\n    },\n    [setSelectedThemeKey]\n  );\n\n  return (\n    <Picker\n      label=\"Pick a color scheme\"\n      items={themes}\n      selectedKey={selectedThemeKey}\n      onSelectionChange={onSelectionChange}\n    >\n      {item => <Item key={item.themeKey}>{item.name}</Item>}\n    </Picker>\n  );\n}\n\nexport default ThemePicker;\n"],"mappings":"AAAA,SAAcA,WAAW,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,MAAM,QAAQ,uBAAuB;AAAC,OAC9CC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEf,OAAO,SAASC,WAAWA,CAAA,EAAuB;EAChD,IAAM;IAAEC,gBAAgB;IAAEC,mBAAmB;IAAEC;EAAO,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAEpE,IAAMO,iBAAiB,GAAGV,WAAW,CAClCW,GAAQ,IAAK;IACZH,mBAAmB,CAACG,GAAa,CAAC;EACpC,CAAC,EACD,CAACH,mBAAmB,CACtB,CAAC;EAED,oBACEH,IAAA,CAACH,MAAM;IACLU,KAAK,EAAC,qBAAqB;IAC3BC,KAAK,EAAEJ,MAAO;IACdK,WAAW,EAAEP,gBAAiB;IAC9BG,iBAAiB,EAAEA,iBAAkB;IAAAK,QAAA,EAEpCC,IAAI,iBAAIX,IAAA,CAACJ,IAAI;MAAAc,QAAA,EAAsBC,IAAI,CAACC;IAAI,GAAzBD,IAAI,CAACE,QAA2B;EAAC,CAC/C,CAAC;AAEb;AAEA,eAAeZ,WAAW"}

package/dist/theme/ThemeProvider.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { ThemeData } from './ThemeModel';
+import './theme-svg.scss';
 export interface ThemeContextValue {
     activeThemes: ThemeData[] | null;
     selectedThemeKey: string;
+    themes: ThemeData[];
     setSelectedThemeKey: (themeKey: string) => void;
 }
 export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;
@@ -10,6 +12,6 @@ export interface ThemeProviderProps {
     themes: ThemeData[] | null;
     children: ReactNode;
 }
-export declare function ThemeProvider({ themes, children, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ themes: customThemes, children, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjE,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkElC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EAAE,YAAY,EACpB,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA4ElC;AAED,eAAe,aAAa,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -1,8 +1,9 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 import Log from '@deephaven/log';
 import { DEFAULT_DARK_THEME_KEY } from "./ThemeModel.js";
-import { calculatePreloadStyleContent, getActiveThemes, getDefaultBaseThemes, getThemePreloadData, setThemePreloadData } from "./ThemeUtils.js";
+import { calculatePreloadStyleContent, getActiveThemes, getDefaultBaseThemes, getThemePreloadData, setThemePreloadData, overrideSVGFillColors } from "./ThemeUtils.js";
 import { SpectrumThemeProvider } from "./SpectrumThemeProvider.js";
+import "./theme-svg.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ var log = Log.module('ThemeProvider');
 export var ThemeContext = /*#__PURE__*/createContext(null);
 export function ThemeProvider(_ref) {
   var {
-    themes,
+    themes: customThemes,
     children
   } = _ref;
   var baseThemes = useMemo(() => getDefaultBaseThemes(), []);
@@ -20,19 +21,24 @@ export function ThemeProvider(_ref) {
   });
 
   // Calculate active themes once a non-null themes array is provided.
-  var activeThemes = useMemo(() => themes == null ? null : getActiveThemes(selectedThemeKey, {
+  var activeThemes = useMemo(() => customThemes == null ? null : getActiveThemes(selectedThemeKey, {
     base: baseThemes,
-    custom: themes !== null && themes !== void 0 ? themes : []
-  }), [baseThemes, selectedThemeKey, themes]);
+    custom: customThemes !== null && customThemes !== void 0 ? customThemes : []
+  }), [baseThemes, selectedThemeKey, customThemes]);
+  var themes = useMemo(() => [...baseThemes, ...(customThemes !== null && customThemes !== void 0 ? customThemes : [])], [baseThemes, customThemes]);
   useEffect(function updateThemePreloadData() {
     // Don't update preload data until themes have been loaded and activated
-    if (activeThemes == null || themes == null) {
+    if (activeThemes == null || customThemes == null) {
       return;
     }
+
+    // Override fill color for certain inline SVGs (the originals are provided
+    // by theme-svg.scss)
+    overrideSVGFillColors();
     var preloadStyleContent = calculatePreloadStyleContent();
     log.debug2('updateThemePreloadData:', {
       active: activeThemes.map(theme => theme.themeKey),
-      all: themes.map(theme => theme.themeKey),
+      custom: customThemes.map(theme => theme.themeKey),
       preloadStyleContent,
       selectedThemeKey
     });
@@ -40,12 +46,13 @@ export function ThemeProvider(_ref) {
       themeKey: selectedThemeKey,
       preloadStyleContent
     });
-  }, [activeThemes, selectedThemeKey, themes]);
+  }, [activeThemes, selectedThemeKey, customThemes]);
   var value = useMemo(() => ({
     activeThemes,
     selectedThemeKey,
+    themes,
     setSelectedThemeKey
-  }), [activeThemes, selectedThemeKey]);
+  }), [activeThemes, selectedThemeKey, themes]);
   return /*#__PURE__*/_jsxs(ThemeContext.Provider, {
     value: value,
     children: [activeThemes == null ? null : /*#__PURE__*/_jsx(_Fragment, {

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","getThemePreloadData","setThemePreloadData","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","children","baseThemes","selectedThemeKey","setSelectedThemeKey","_getThemePreloadData$","_getThemePreloadData","themeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","all","value","Provider","styleContent"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_DARK_THEME_KEY, ThemeData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getDefaultBaseThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\n\nexport interface ThemeContextValue {\n  activeThemes: ThemeData[] | null;\n  selectedThemeKey: string;\n  setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n  /*\n   * Additional themes to load in addition to the base themes. If no additional\n   * themes are to be loaded, this must be set to an empty array in order to\n   * tell the provider to activate the base themes.\n   */\n  themes: ThemeData[] | null;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({\n  themes,\n  children,\n}: ThemeProviderProps): JSX.Element {\n  const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  // Calculate active themes once a non-null themes array is provided.\n  const activeThemes = useMemo(\n    () =>\n      themes == null\n        ? null\n        : getActiveThemes(selectedThemeKey, {\n            base: baseThemes,\n            custom: themes ?? [],\n          }),\n    [baseThemes, selectedThemeKey, themes]\n  );\n\n  useEffect(\n    function updateThemePreloadData() {\n      // Don't update preload data until themes have been loaded and activated\n      if (activeThemes == null || themes == null) {\n        return;\n      }\n\n      const preloadStyleContent = calculatePreloadStyleContent();\n\n      log.debug2('updateThemePreloadData:', {\n        active: activeThemes.map(theme => theme.themeKey),\n        all: themes.map(theme => theme.themeKey),\n        preloadStyleContent,\n        selectedThemeKey,\n      });\n\n      setThemePreloadData({\n        themeKey: selectedThemeKey,\n        preloadStyleContent,\n      });\n    },\n    [activeThemes, selectedThemeKey, themes]\n  );\n\n  const value = useMemo(\n    () => ({\n      activeThemes,\n      selectedThemeKey,\n      setSelectedThemeKey,\n    }),\n    [activeThemes, selectedThemeKey]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {activeThemes == null ? null : (\n        <>\n          {activeThemes.map(theme => (\n            <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n              {theme.styleContent}\n            </style>\n          ))}\n        </>\n      )}\n      <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"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"}
+{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","getThemePreloadData","setThemePreloadData","overrideSVGFillColors","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","customThemes","children","baseThemes","selectedThemeKey","setSelectedThemeKey","_getThemePreloadData$","_getThemePreloadData","themeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","value","Provider","styleContent"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_DARK_THEME_KEY, ThemeData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getDefaultBaseThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n  overrideSVGFillColors,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\nimport './theme-svg.scss';\n\nexport interface ThemeContextValue {\n  activeThemes: ThemeData[] | null;\n  selectedThemeKey: string;\n  themes: ThemeData[];\n  setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n  /*\n   * Additional themes to load in addition to the base themes. If no additional\n   * themes are to be loaded, this must be set to an empty array in order to\n   * tell the provider to activate the base themes.\n   */\n  themes: ThemeData[] | null;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({\n  themes: customThemes,\n  children,\n}: ThemeProviderProps): JSX.Element {\n  const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  // Calculate active themes once a non-null themes array is provided.\n  const activeThemes = useMemo(\n    () =>\n      customThemes == null\n        ? null\n        : getActiveThemes(selectedThemeKey, {\n            base: baseThemes,\n            custom: customThemes ?? [],\n          }),\n    [baseThemes, selectedThemeKey, customThemes]\n  );\n\n  const themes = useMemo(\n    () => [...baseThemes, ...(customThemes ?? [])],\n    [baseThemes, customThemes]\n  );\n\n  useEffect(\n    function updateThemePreloadData() {\n      // Don't update preload data until themes have been loaded and activated\n      if (activeThemes == null || customThemes == null) {\n        return;\n      }\n\n      // Override fill color for certain inline SVGs (the originals are provided\n      // by theme-svg.scss)\n      overrideSVGFillColors();\n\n      const preloadStyleContent = calculatePreloadStyleContent();\n\n      log.debug2('updateThemePreloadData:', {\n        active: activeThemes.map(theme => theme.themeKey),\n        custom: customThemes.map(theme => theme.themeKey),\n        preloadStyleContent,\n        selectedThemeKey,\n      });\n\n      setThemePreloadData({\n        themeKey: selectedThemeKey,\n        preloadStyleContent,\n      });\n    },\n    [activeThemes, selectedThemeKey, customThemes]\n  );\n\n  const value = useMemo(\n    () => ({\n      activeThemes,\n      selectedThemeKey,\n      themes,\n      setSelectedThemeKey,\n    }),\n    [activeThemes, selectedThemeKey, themes]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {activeThemes == null ? null : (\n        <>\n          {activeThemes.map(theme => (\n            <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n              {theme.styleContent}\n            </style>\n          ))}\n        </>\n      )}\n      <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"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"}

package/dist/theme/ThemeUtils.d.ts

@@ -1,15 +1,24 @@
-import { ThemeData, ThemePreloadData, ThemePreloadStyleContent, ThemeRegistrationData } from './ThemeModel';
+import { ThemeData, ThemePreloadData, CssVariableStyleContent, ThemeRegistrationData, ThemeCssVariableName } from './ThemeModel';
 export declare const CSS_VAR_EXPRESSION_PREFIX = "var(--";
 export declare const TMP_CSS_PROP_PREFIX = "dh-tmp";
 export declare const NON_WHITESPACE_REGEX: RegExp;
 export declare const WHITESPACE_REGEX: RegExp;
 export type VarExpressionResolver = (varExpression: string) => string;
 /**
- * Creates a string containing preload style content for the current theme.
- * This resolves the current values of a few CSS variables that can be used
- * to style the page before the theme is loaded on next page load.
+ * Resolves the current values of CSS variables we want to preload. Preloading
+ * happens before themes are fully loaded so that we can style things like the
+ * loading spinner and background color which are shown to the user early on in
+ * the app lifecycle.
  */
-export declare function calculatePreloadStyleContent(): ThemePreloadStyleContent;
+export declare function calculatePreloadStyleContent(): CssVariableStyleContent;
+/**
+ * Create a resolver function for calculating the value of a css variable based
+ * on a given element's computed style. If the variable resolves to '', we check
+ * DEFAULT_PRELOAD_DATA_VARIABLES for a default value, and if one does not exist,
+ * return ''.
+ * @param el Element to resolve css variables against
+ */
+export declare function createCssVariableResolver(el: Element): (varName: ThemeCssVariableName) => string;
 /**
  * Extracts all css variable expressions from the given record and returns
  * a set of unique expressions.
@@ -57,6 +66,13 @@ export declare function getThemePreloadData(): ThemePreloadData | null;
  * @returns An array of [start, end] index pairs for each expression
  */
 export declare function getExpressionRanges(value: string): [number, number][];
+/**
+ * Replace the `fill='...'` attribute in the given SVG content with the given
+ * color string.
+ * @param svgContent Inline SVG content to replace the fill color in
+ * @param fillColor The color to replace the fill color with
+ */
+export declare function replaceSVGFillColor(svgContent: string, fillColor: string): string;
 /**
  * Make a copy of the given object replacing any css variable expressions
  * contained in its prop values with values resolved from the given HTML element.
@@ -99,4 +115,20 @@ export declare function getThemeKey(pluginName: string, themeName: string): stri
  * Preload minimal theme variables from the cache.
  */
 export declare function preloadTheme(): void;
+/**
+ * Inline SVGs cannot depend on dynamic CSS variables, so we have to statically
+ * update them if we want to change their color.
+ *
+ * This function:
+ * 1. Clears any previous overrides
+ * 2. Resolves CSS variables containing inline SVG urls
+ * 3. Resolves mapped color variables and replaces the `fill='...'` attribute with the result
+ * 4. Sets the original CSS variable to the new replaced value
+ *
+ * Note that it is preferable to use inline SVGs as background-mask values and
+ * just change the background color instead of relying on this util, but this
+ * is not always possible. e.g. <select> elements don't support pseudo elements,
+ * so there's not a good way to set icons via masks.
+ */
+export declare function overrideSVGFillColors(): void;
 //# sourceMappingURL=ThemeUtils.d.ts.map

package/dist/theme/ThemeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIL,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAItB,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAClD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,oBAAoB,QAAO,CAAC;AACzC,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,4BAA4B,IAAI,wBAAwB,CAWvE;AAED;;;;GAIG;AACH,wBAAgB,qCAAqC,CACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,GAAG,CAAC,MAAM,CAAC,CAcb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA+BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAalD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCrE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1E,MAAM,EAAE,CAAC,EACT,aAAa,GAAE,WAA2B,GACzC,CAAC,CA2CH;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,MAAM,CAyBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAKvE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAUnC"}
+{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,SAAS,EACT,gBAAgB,EAChB,uBAAuB,EAEvB,qBAAqB,EAGrB,oBAAoB,EAErB,MAAM,cAAc,CAAC;AAItB,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAClD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,oBAAoB,QAAO,CAAC;AACzC,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtE;;;;;GAKG;AACH,wBAAgB,4BAA4B,IAAI,uBAAuB,CAUtE;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,OAAO,GACV,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,CAkB3C;AAED;;;;GAIG;AACH,wBAAgB,qCAAqC,CACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,GAAG,CAAC,MAAM,CAAC,CAcb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA+BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAgBlD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCrE;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,MAAM,CAKR;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1E,MAAM,EAAE,CAAC,EACT,aAAa,GAAE,WAA2B,GACzC,CAAC,CA2CH;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,MAAM,CAyBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAKvE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAWnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAkB5C"}