@aics/vole-app 2.11.0

package/es/aics-image-viewer/components/MetadataViewer/index.js

@@ -0,0 +1,99 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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."); }
+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; } }
+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; }
+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; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import { RightOutlined } from "@ant-design/icons";
+import React from "react";
+import "./styles.css";
+var isCategory = function isCategory(entry) {
+  return _typeof(entry) === "object" && entry !== null;
+};
+var sortCategoriesFirst = function sortCategoriesFirst(entry) {
+  if (!isCategory(entry) || Array.isArray(entry)) {
+    return entry;
+  }
+  var cats = {};
+  var vals = {};
+  for (var key in entry) {
+    if (isCategory(entry[key])) {
+      cats[key] = entry[key];
+    } else {
+      vals[key] = entry[key];
+    }
+  }
+  return _objectSpread(_objectSpread({}, cats), vals);
+};
+
+/** Component to hold collapse state */
+var MetadataCategory = function MetadataCategory(_ref) {
+  var metadata = _ref.metadata,
+    title = _ref.title;
+  var _React$useState = React.useState(true),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    collapsed = _React$useState2[0],
+    setCollapsed = _React$useState2[1];
+  var collapsedClass = collapsed ? " metadata-collapse-collapsed" : "";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+    className: "metadata-row-collapse-title" + collapsedClass,
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
+    }
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: 2
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "metadata-collapse-caret"
+  }, /*#__PURE__*/React.createElement(RightOutlined, {
+    style: {
+      transform: "rotate(".concat(collapsed ? 0 : 90, "deg)")
+    }
+  })), title)), /*#__PURE__*/React.createElement("tr", {
+    className: "metadata-row-collapse-content" + collapsedClass
+  }, /*#__PURE__*/React.createElement("td", {
+    className: "metadata-collapse-content",
+    colSpan: 2
+  }, /*#__PURE__*/React.createElement(MetadataTable, {
+    metadata: metadata
+  }))));
+};
+var MetadataTable = function MetadataTable(_ref2) {
+  var metadata = _ref2.metadata,
+    topLevel = _ref2.topLevel;
+  var metadataKeys = Object.keys(metadata);
+  var metadataIsArray = Array.isArray(metadata);
+  return /*#__PURE__*/React.createElement("table", {
+    className: "viewer-metadata-table" + (topLevel ? " metadata-top-level" : "")
+  }, /*#__PURE__*/React.createElement("tbody", null, metadataKeys.map(function (key, idx) {
+    var metadataValue = sortCategoriesFirst(metadataIsArray ? metadata[idx] : metadata[key]);
+    if (isCategory(metadataValue)) {
+      return /*#__PURE__*/React.createElement(MetadataCategory, {
+        key: key,
+        metadata: metadataValue,
+        title: key
+      });
+    } else {
+      return /*#__PURE__*/React.createElement("tr", {
+        key: key
+      }, /*#__PURE__*/React.createElement("td", {
+        className: "metadata-key"
+      }, key), /*#__PURE__*/React.createElement("td", {
+        className: "metadata-value"
+      }, metadataValue + ""));
+    }
+  })));
+};
+var MetadataViewer = function MetadataViewer(_ref3) {
+  var metadata = _ref3.metadata;
+  return /*#__PURE__*/React.createElement(MetadataTable, {
+    metadata: metadata,
+    topLevel: true
+  });
+};
+export default MetadataViewer;

package/es/aics-image-viewer/components/MetadataViewer/styles.css

@@ -0,0 +1,81 @@
+.viewer-metadata-table{
+  width:100%;
+  table-layout:fixed;
+  box-sizing:border-box;
+  border-spacing:0;
+  border-collapse:collapse;
+}
+
+  .viewer-metadata-table tbody{
+    padding:10px;
+  }
+
+  .viewer-metadata-table.metadata-top-level{
+    border-bottom:1px solid var(--color-controlpanel-border);
+  }
+
+  .viewer-metadata-table.metadata-top-level > tbody > tr.metadata-row-collapse-title:first-child{
+      border-top:none;
+    }
+
+  .viewer-metadata-table tr{
+    color:var(--color-controlpanel-text);
+  }
+
+  .viewer-metadata-table tr:nth-child(odd):not(.metadata-row-collapse-content):not(.metadata-row-collapse-title){
+      background-color:#3a3a3a;
+    }
+
+  .viewer-metadata-table tr.metadata-row-collapse-title{
+      color:var(--color-text-section);
+      background-color:var(--color-controlpanel-section-bg);
+    }
+
+  .viewer-metadata-table tr.metadata-row-collapse-title:not(.metadata-collapse-collapsed) > td{
+        padding-bottom:7px;
+      }
+
+  .viewer-metadata-table tr.metadata-row-collapse-content.metadata-collapse-collapsed{
+      visibility:collapse;
+      height:0px;
+      display:none;
+    }
+
+  .viewer-metadata-table tr tr.metadata-row-collapse-title,
+    .viewer-metadata-table tr.metadata-row-collapse-content + tr{
+      border-top:1px solid var(--color-controlpanel-border);
+    }
+
+  .viewer-metadata-table td{
+    padding:8px 0;
+    overflow-wrap:break-word;
+  }
+
+  .viewer-metadata-table td .metadata-collapse-caret{
+      cursor:pointer;
+      padding-left:16px;
+      padding-right:10px;
+    }
+
+  .viewer-metadata-table td.metadata-key{
+      padding-left:16px;
+    }
+
+  .viewer-metadata-table td.metadata-value{
+      text-align:right;
+      padding-left:20px;
+      padding-right:16px;
+    }
+
+  .viewer-metadata-table td:last-child{
+      padding-right:8px;
+    }
+
+  .viewer-metadata-table td.metadata-collapse-content{
+      padding:0;
+      padding-left:24px;
+    }
+
+  .viewer-metadata-table td i{
+      transition:transform 0.1s linear;
+    }

package/es/aics-image-viewer/components/StyleProvider/index.js

@@ -0,0 +1,210 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { theme as AntTheme, ConfigProvider } from "antd";
+import React from "react";
+import styled, { css } from "styled-components";
+var palette = {
+  black: "#000000",
+  white: "#ffffff",
+  ltGrey: "#bfbfbf",
+  purpleGrey: "#aeacae",
+  medLtGreyAlt: "#a0a0a0",
+  medGrey: "#6e6e6e",
+  medDarkGrey: "#4b4b4b",
+  darkGrey: "#313131",
+  veryDarkGrey: "#222222",
+  ltPurple: "#aa88ed",
+  medPurple: "#9e6aff",
+  darkPurple: "#7e46d4",
+  veryDarkPurple: "#5f369f",
+  veryLtPurple: "#e7e4f2",
+  brightRed: "#ff4d4d",
+  brightGreen: "#61d900",
+  brightBlue: "#0099ff"
+};
+var theme = {
+  colors: {
+    theme: {
+      primary: palette.medPurple,
+      primaryLt: palette.ltPurple,
+      primaryDk: palette.darkPurple,
+      success: palette.brightGreen,
+      error: palette.brightRed,
+      warning: palette.brightRed,
+      info: palette.brightBlue
+    },
+    text: {
+      link: palette.brightBlue,
+      header: palette.ltGrey,
+      section: palette.white,
+      body: palette.ltGrey,
+      error: palette.brightRed,
+      selectionBg: palette.medPurple,
+      selectionText: palette.white
+    },
+    header: {
+      bg: palette.veryDarkGrey,
+      border: palette.medGrey,
+      title: palette.white,
+      hoverTitle: palette.white
+    },
+    // TODO: Buttons could have a shared type
+    // with properties for bg, text, and outline across hover/focus,
+    // active, and disabled states. This could then be defined for
+    // each of the button types (primary, secondary, tertiary).
+    button: {
+      primary: {
+        bg: palette.medPurple,
+        text: palette.white,
+        hoverBg: palette.ltPurple,
+        activeOutline: palette.medPurple,
+        disabledBg: palette.medDarkGrey
+      },
+      link: {
+        text: palette.medPurple
+      },
+      secondary: {
+        bg: "transparent",
+        text: palette.medPurple,
+        outline: palette.medPurple
+      },
+      tertiary: {
+        bg: "transparent",
+        text: palette.ltGrey,
+        outline: palette.ltGrey,
+        hoverOutline: palette.ltPurple,
+        hoverText: palette.ltPurple,
+        activeOutline: palette.medPurple,
+        activatedText: palette.white,
+        activatedBg: palette.medDarkGrey,
+        activatedOutline: palette.purpleGrey,
+        disabledText: palette.medGrey
+      }
+    },
+    checkbox: {
+      bg: palette.medGrey,
+      hoverBg: palette.medLtGreyAlt,
+      text: palette.white
+    },
+    controlPanel: {
+      bg: palette.darkGrey,
+      border: palette.medGrey,
+      sectionText: palette.white,
+      text: palette.ltGrey,
+      sectionBg: palette.medDarkGrey,
+      drawerBg: palette.veryDarkGrey,
+      rampSlider: palette.medPurple
+    },
+    toolbar: {
+      buttonBg: "#000000cc"
+    },
+    landingPage: {
+      bg: palette.veryDarkGrey,
+      bgAlt: palette.darkGrey,
+      text: palette.ltGrey,
+      bannerBg: "#020202DB"
+    },
+    statusFlag: {
+      border: palette.medGrey,
+      text: palette.ltGrey
+    },
+    layout: {
+      dividers: palette.medGrey,
+      split: palette.white
+    },
+    menu: {
+      hoverText: palette.white,
+      hoverBg: palette.ltPurple,
+      selectedText: palette.white,
+      selectedBg: palette.medGrey,
+      textPlaceholder: palette.ltPurple
+    },
+    tooltip: {
+      bg: palette.black
+    },
+    modal: {
+      maskBg: "#000000cc",
+      bg: palette.veryDarkGrey,
+      border: palette.medDarkGrey
+    }
+  },
+  fonts: {
+    // Include web + local font files
+    family: "'Open Sans', 'Open Sans Local', Arial, sans-serif, apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
+  }
+};
+/** Makes theme styling available to child components via CSS variables. */
+var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n    &:not(:focus-visible) {\n      text-decoration: none;\n    }\n\n    &:focus-visible {\n      text-decoration: underline;\n    }\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent;\n  }\n\n  & .ant-checkbox-indeterminate.checked .ant-checkbox-inner {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
+  var $theme = _ref.$theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
+});
+
+/**
+ * Provides CSS variables and global styling for the image viewer.
+ */
+export default function StyleProvider(props) {
+  var darkAlgorithm = AntTheme.darkAlgorithm;
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      algorithm: darkAlgorithm,
+      token: {
+        colorPrimary: theme.colors.theme.primary,
+        colorPrimaryHover: theme.colors.theme.primaryLt,
+        colorLink: theme.colors.text.link,
+        colorBgBase: theme.colors.controlPanel.bg,
+        colorBgContainer: "transparent",
+        colorSplit: theme.colors.layout.split,
+        colorPrimaryTextHover: theme.colors.text.selectionText,
+        fontWeightStrong: 400,
+        colorBgElevated: palette.darkGrey,
+        controlItemBgHover: theme.colors.menu.hoverBg,
+        controlItemBgActiveHover: theme.colors.menu.hoverBg,
+        controlItemBgActive: theme.colors.menu.selectedBg,
+        borderRadius: 4
+      },
+      components: {
+        Button: {
+          defaultShadow: "",
+          primaryColor: theme.colors.button.primary.text,
+          defaultHoverBg: theme.colors.button.secondary.bg,
+          defaultActiveBg: theme.colors.button.secondary.bg,
+          defaultActiveBorderColor: theme.colors.button.tertiary.activeOutline
+        },
+        Card: {
+          borderRadiusLG: 0,
+          headerHeight: 48
+        },
+        Collapse: {
+          borderRadiusLG: 0,
+          colorTextHeading: theme.colors.text.section
+        },
+        Divider: {
+          colorSplit: theme.colors.layout.dividers,
+          marginLG: 0
+        },
+        Layout: {
+          siderBg: theme.colors.controlPanel.bg
+        },
+        Checkbox: {
+          borderRadiusSM: 2,
+          colorBgContainer: theme.colors.checkbox.bg,
+          colorPrimary: theme.colors.checkbox.bg,
+          colorPrimaryHover: theme.colors.checkbox.hoverBg,
+          colorText: theme.colors.checkbox.text
+        },
+        Tooltip: {
+          colorBgSpotlight: theme.colors.tooltip.bg
+        },
+        Modal: {
+          colorBgMask: theme.colors.modal.maskBg,
+          contentBg: theme.colors.modal.bg,
+          headerBg: theme.colors.modal.bg,
+          footerBg: theme.colors.modal.bg,
+          titleFontSize: 19
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(CssProvider, {
+    $theme: theme
+  }, props.children));
+}