@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -14,14 +14,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import theme from '../theme';
 var buttons = {
-  accordionHeader: _objectSpread(_objectSpread({}, theme.buttons.accordionHeader), {}, {
-    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
-      color: 'active'
-    }),
-    '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
-      border: 'none'
-    })
-  }),
   critical: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.critical), theme.buttons.defaultHover)
   },
@@ -38,55 +30,28 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
   },
-  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
-    ':focus': {
-      border: 'none'
-    }
-  }),
   primary: {
     '&:hover': _objectSpread({}, theme.buttons.primary)
   },
   link: {
     'body &': theme.buttons.link,
-    'body &:hover': theme.buttons.link
-  },
-  iconButton: {
-    ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
-      border: 'none'
-    })
-  },
-  environmentBreadcrumb: {
-    current: {
-      '&:hover:not(.disabled)': _objectSpread({}, theme.buttons.environmentBreadcrumb.current),
-      '&:focus': _objectSpread({}, theme.buttons.environmentBreadcrumb.current)
+    'body &:hover': theme.buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
     }
   },
-  rocker: _objectSpread(_objectSpread({}, theme.buttons.rocker), {}, {
-    ':focus': {
-      border: 'none'
-    },
-    '&.is-selected:hover': {
-      color: 'white'
-    },
-    ':not(.is-selected):hover': {
-      color: 'accent.30'
-    }
-  }),
-  navBarSectionButton: _objectSpread(_objectSpread({}, theme.buttons.navBarSectionButton), {}, {
-    height: 'unset',
-    minHeight: '36px',
-    '&:not(.disabled):hover': _objectSpread({}, theme.buttons.navBarSectionButton),
-    ':focus': {
-      border: 'none'
-    }
-  }),
-  navItemButton: _objectSpread(_objectSpread({
-    height: 'unset'
-  }, theme.buttons.navItemButton), {}, {
-    '&:not(.disabled):hover': _objectSpread({}, theme.buttons.navItemButton),
-    ':focus': {
-      border: 'none'
-    }
+  iconButtons: _objectSpread(_objectSpread({}, theme.buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    })
   })
 };
 var forms = {
@@ -107,7 +72,7 @@ var forms = {
     })
   },
   search: {
-    container: {
+    wrapper: {
       '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
         borderColor: 'neutral.80',
         bg: 'white',
@@ -131,8 +96,60 @@ var links = {
     '&:hover': _objectSpread({}, theme.links.app)
   }
 };
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, theme.variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, theme.variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'white'
+      },
+      ':not(.is-selected):hover': {
+        color: 'accent.30'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current)
+      }
+    }
+  },
+  navBar: {
+    sectionButton: _objectSpread(_objectSpread({}, theme.variants.navBar.sectionButton), {}, {
+      height: 'unset',
+      minHeight: '36px',
+      '&:not(.disabled):hover': _objectSpread({}, theme.variants.navBar.sectionButton),
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    itemButton: _objectSpread(_objectSpread({
+      height: 'unset'
+    }, theme.variants.navBar.itemButton), {}, {
+      '&:not(.disabled):hover': _objectSpread({}, theme.variants.navBar.itemButton),
+      ':focus': {
+        border: 'none'
+      }
+    })
+  }
+};
 export default {
   buttons: buttons,
   forms: forms,
-  links: links
+  links: links,
+  variants: variants
 };

package/lib/styles/themeOverrides/withUiLibraryCss.js

@@ -0,0 +1,28 @@
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React, { useEffect } from 'react';
+import { ThemeProvider } from 'theme-ui';
+import uiLibraryOverride from './uiLibraryOverride';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
+
+var WithUiLibraryCss = function WithUiLibraryCss(Story) {
+  useEffect(function () {
+    var uiLibraryCss = document.createElement('link');
+    uiLibraryCss.rel = 'stylesheet';
+    uiLibraryCss.className = 'uiLibraryCssLink';
+    uiLibraryCss.href = UI_LIBRARY_CSS_LINK;
+    document.getElementsByTagName('head')[0].appendChild(uiLibraryCss);
+    return function () {
+      var _context;
+
+      return _forEachInstanceProperty(_context = document.querySelectorAll('.uiLibraryCssLink')).call(_context, function (link) {
+        link.remove();
+      });
+    };
+  }, []);
+  return ___EmotionJSX(ThemeProvider, {
+    theme: uiLibraryOverride
+  }, ___EmotionJSX(Story, null));
+};
+
+export default WithUiLibraryCss;

package/lib/styles/themes/astro-nano/astro-nano.js

@@ -106,8 +106,8 @@ var modifyTheme = {
     }
   },
   variants: {
-    boxes: {
-      card: {
+    card: {
+      container: {
         borderRadius: borderRadius,
         flexGrow: [1, 0],
         maxWidth: astroTheme.breakpoints[0],
@@ -115,26 +115,26 @@ var modifyTheme = {
         alignItems: 'stretch',
         py: [0, 'xl'],
         my: 'auto',
-        boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
+        boxShadow: ['none', astroTheme.variants.card.container.boxShadow],
         width: ['100%', '450px'],
         minHeight: 'fit-content'
-      },
-      wrapper: {
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        bg: ['white', 'accent.99'],
-        py: 'lg',
-        gap: 'lg',
-        overflow: 'auto',
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-      },
-      cardBody: {
-        flexGrow: [1, 0]
       }
+    },
+    wrapper: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      bg: ['white', 'accent.99'],
+      py: 'lg',
+      gap: 'lg',
+      overflow: 'auto',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    cardBody: {
+      flexGrow: [1, 0]
     }
   }
 };

package/lib/styles/variants/index.js

@@ -1,6 +1,25 @@
-export { default as variants } from './variants';
-export { default as buttons } from './buttons';
-export { default as bidirectionalIconButton } from './bidirectionalIconButton';
-export { default as images } from './images';
-export { default as links } from './links';
-export * from './text';
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import defaultButtons from '../../components/Button/Buttons.styles';
+import iconButtons from '../../components/IconButton/IconButton.styles';
+export var buttons = _objectSpread(_objectSpread({}, defaultButtons), {}, {
+  iconButtons: iconButtons
+});
+export { default as images } from '../../components/Image/Image.styles';
+export { default as links } from '../../components/Link/Link.styles';
+export { default as cards } from '../../components/Card/Card.styles';
+export { default as badges } from '../../components/Badge/Badge.styles';
+export * from '../../components/Text/Text.styles';
+export { default as variants } from './variants';

package/lib/styles/variants/variants.js

@@ -12,54 +12,70 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import accordion from './accordion';
-import boxes from './boxes';
+import accordion from '../../components/AccordionGroup/Accordion.styles';
+import accordionGrid from '../../components/AccordionGridGroup/AccordionGrid.styles';
+import box from '../../components/Box/Box.styles';
+import bracket from '../../components/Bracket/Bracket.styles';
+import breadcrumb from '../../components/Breadcrumbs/Breadcrumb.styles';
 import callout from './callout';
-import codeView from './codeView';
-import collapsiblePanel from './collapsiblePanel';
+import codeView from '../../components/CodeView/CodeView.styles';
+import collapsiblePanel from '../../components/CollapsiblePanel/CollapsiblePanel.styles';
+import copyText from '../../components/CopyText/CopyText.styles';
 import dataTable from './../../components/DataTable/DataTable.styles';
-import imageUpload from './imageUpload';
-import images from './images';
-import links from './links';
-import listBox from './listBox';
-import loader from './loader';
-import menu from './menu';
-import menuItem from './menuItem';
-import messages from './messages';
-import modal from './modal';
-import navBar from './navBar';
-import numberField from './numberField';
-import overlayPanel from './overlayPanel';
-import popoverMenu from './popoverMenu';
-import rockerbutton from './rockerbutton';
-import separator from './separator';
-import stepper from './stepper';
-import table from './table';
-import * as tabs from './tabs';
-import tooltip from './tooltip';
-export default _objectSpread(_objectSpread({}, tabs), {}, {
+import environmentBreadcrumb from '../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles';
+import fieldHelperText from '../../components/FieldHelperText/FieldHelperText.styles';
+import helpHint from '../../components/HelpHint/HelpHint.styles';
+import imageUpload from '../../components/ImageUploadField/imageUpload';
+import listBox from '../../components/ListBox/ListBox.styles';
+import listItem from '../../components/ListItem/ListItem.styles';
+import listViewItem from '../../components/ListViewItem/ListViewItem.styles';
+import loader from '../../components/Loader/Loader.styles';
+import menu from '../../components/Menu/Menu.styles';
+import menuItem from '../../components/MenuItem/MenuItem.styles';
+import message from '../../components/Messages/Message.styles';
+import modal from '../../components/Modal/Modal.styles';
+import navBar from '../../components/NavBar/NavBar.styles';
+import overlayPanel from '../../components/OverlayPanel/OverlayPanel.styles';
+import popoverMenu from '../../components/PopoverMenu/PopoverMenu.styles';
+import rockerButton from '../../components/RockerButton/RockerButton.styles';
+import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
+import separator from '../../components/Separator/Separator.styles';
+import stepper from '../../components/Stepper/Stepper.styles';
+import table from '../../components/Table/Table.styles';
+import timeZone from '../../components/TimeZonePicker/TimeZone.styles';
+import tooltip from '../../components/TooltipTrigger/Tooltip.styles';
+import * as tab from '../../components/Tabs/Tabs.style';
+export default _objectSpread({
   accordion: accordion,
-  boxes: boxes,
+  accordionGrid: accordionGrid,
+  box: box,
+  bracket: bracket,
+  breadcrumb: breadcrumb,
   callout: callout,
   codeView: codeView,
   collapsiblePanel: collapsiblePanel,
+  copyText: copyText,
   dataTable: dataTable,
+  environmentBreadcrumb: environmentBreadcrumb,
+  fieldHelperText: fieldHelperText,
+  helpHint: helpHint,
   imageUpload: imageUpload,
-  images: images,
-  links: links,
   listBox: listBox,
+  listItem: listItem,
+  listViewItem: listViewItem,
   loader: loader,
   menu: menu,
   menuItem: menuItem,
-  messages: messages,
+  message: message,
   modal: modal,
   navBar: navBar,
-  numberField: numberField,
   overlayPanel: overlayPanel,
   popoverMenu: popoverMenu,
-  rockerbutton: rockerbutton,
+  rockerButton: rockerButton,
+  scrollBox: scrollBox,
   separator: separator,
   stepper: stepper,
   table: table,
+  timeZone: timeZone,
   tooltip: tooltip
-});
+}, tab);

package/lib/utils/devUtils/constants/variants.js

@@ -1,8 +1,8 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import { snakeCase, toUpper, fromPairs } from 'lodash';
-import { text } from '../../../styles/variants/text';
-import buttons from '../../../styles/variants/buttons';
+import { text } from '../../../components/Text/Text.styles';
+import buttons from '../../../components/Button/Buttons.styles';
 /**
  * Converts the given object to a constant mapping.
  * e.g. { aBox: '1', b: '2' } -> { A_BOX: 'a', B: 'b' }

package/lib/utils/devUtils/props/fieldAttributes.js

@@ -0,0 +1,52 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import PropTypes from 'prop-types';
+var descriptions = {
+  containerProps: 'Props object spread into the outer-most container. Wrapper and label will be children.',
+  controlProps: ' Props object that is spread directly into the input element. Will be a child of the Wrapper.',
+  controlWrapperProps: 'Props object spread to the field control wrapper, i.e. the immediate parent element for the control, sibling of the label, and child of the field container.',
+  labelProps: 'Props object spread to the field label, i.e. the visible text which labels the control.'
+};
+export var inputFieldAttributeBaseDocSettings = {
+  type: {
+    summary: 'object'
+  },
+  control: {
+    type: 'string'
+  },
+  table: {
+    category: 'Input Field Attributes'
+  }
+};
+export var inputFieldAttributeBaseArgTypes = {
+  'containerProps': _objectSpread({
+    description: descriptions.containerProps
+  }, inputFieldAttributeBaseDocSettings),
+  'controlProps': _objectSpread({
+    description: descriptions.controlProps
+  }, inputFieldAttributeBaseDocSettings),
+  'controlWrapperProps': _objectSpread({
+    description: descriptions.controlWrapperProps
+  }, inputFieldAttributeBaseDocSettings),
+  'labelProps': _objectSpread({
+    description: descriptions.labelProps
+  }, inputFieldAttributeBaseDocSettings)
+};
+export var inputFieldAttributesBasePropTypes = {
+  containerProps: PropTypes.shape({}),
+  controlProps: PropTypes.shape({}),
+  controlWrapperProps: PropTypes.shape({}),
+  labelProps: PropTypes.shape({})
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.42.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",
@@ -37,63 +37,29 @@
     "@emotion/jest": "^11.5.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
-    "@react-aria/accordion": "3.0.0-alpha.7",
-    "@react-aria/breadcrumbs": "^3.1.4",
-    "@react-aria/button": "^3.2.1",
-    "@react-aria/checkbox": "^3.2.0",
-    "@react-aria/color": "^3.0.0-beta.2",
-    "@react-aria/combobox": "^3.0.0",
-    "@react-aria/dialog": "^3.1.2",
-    "@react-aria/focus": "^3.5.0",
-    "@react-aria/grid": "^3.2.6",
-    "@react-aria/i18n": "^3.3.0",
-    "@react-aria/interactions": "^3.5.0",
-    "@react-aria/label": "^3.1.0",
-    "@react-aria/link": "^3.1.1",
+    "@react-aria/accordion": "~3.0.0-alpha.11",
+    "@react-aria/color": "~3.0.0-beta.15",
+    "@react-aria/focus": "~3.8.0",
+    "@react-aria/grid": "~3.4.1",
+    "@react-aria/i18n": "~3.6.0",
+    "@react-aria/interactions": "~3.11.0",
     "@react-aria/list": "3.0.0-nightly.3248",
-    "@react-aria/listbox": "^3.3.0",
-    "@react-aria/live-announcer": "^3.0.0",
-    "@react-aria/menu": "^3.1.4",
-    "@react-aria/numberfield": "~3.1.6",
-    "@react-aria/overlays": "^3.7.0",
-    "@react-aria/progress": "^3.1.1",
-    "@react-aria/radio": "^3.1.1",
-    "@react-aria/searchfield": "^3.1.1",
-    "@react-aria/select": "^3.2.3",
-    "@react-aria/selection": "^3.3.1",
-    "@react-aria/separator": "^3.1.1",
-    "@react-aria/slider": "^3.0.7",
-    "@react-aria/switch": "3.1.1",
-    "@react-aria/table": "^3.3.0",
-    "@react-aria/tabs": "^3.0.1",
-    "@react-aria/tooltip": "^3.1.2",
-    "@react-aria/utils": "^3.12.0",
-    "@react-aria/virtualizer": "^3.3.2",
-    "@react-aria/visually-hidden": "3.2.1",
-    "@react-stately/collections": "~3.3.8",
-    "@react-stately/color": "^3.0.0-beta.2",
-    "@react-stately/combobox": "^3.0.0",
-    "@react-stately/data": "^3.4.0",
-    "@react-stately/grid": "^3.1.4",
-    "@react-stately/layout": "~3.6.0",
-    "@react-stately/list": "^3.2.1",
-    "@react-stately/menu": "^3.2.1",
-    "@react-stately/numberfield": "~3.0.7",
-    "@react-stately/overlays": "^3.1.1",
-    "@react-stately/radio": "^3.2.0",
-    "@react-stately/searchfield": "^3.1.1",
-    "@react-stately/select": "^3.1.1",
-    "@react-stately/selection": "~3.10.2",
-    "@react-stately/slider": "^3.0.7",
+    "@react-aria/listbox": "~3.3.1",
+    "@react-aria/live-announcer": "~3.1.1",
+    "@react-aria/selection": "~3.10.1",
+    "@react-aria/utils": "~3.13.3",
+    "@react-aria/virtualizer": "~3.5.0",
+    "@react-aria/visually-hidden": "~3.6.0",
+    "@react-spectrum/utils": "~3.6.1",
+    "@react-stately/color": "~3.1.1",
+    "@react-stately/grid": "~3.3.1",
+    "@react-stately/layout": "~3.7.1",
+    "@react-stately/list": "~3.4.1",
     "@react-stately/table": "^3.2.1",
-    "@react-stately/tabs": "^3.0.1",
-    "@react-stately/toggle": "^3.2.0",
-    "@react-stately/tooltip": "^3.0.4",
-    "@react-stately/tree": "^3.1.2",
-    "@react-stately/utils": "~3.4.1",
     "@react-stately/virtualizer": "^3.2.1",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/props": "^5.1.5",
+    "@styled-system/should-forward-prop": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
@@ -104,13 +70,16 @@
     "prism-react-renderer": "1.2.1",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",
+    "react-aria": "~3.19.0",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
+    "react-stately": "~3.17.0",
+    "rebass": "^4.0.7",
     "recharts": "^2.1.4",
     "regenerator-runtime": "^0.13.7",
     "styled-system": "^5.1.5",
-    "theme-ui": "^0.10.0",
+    "theme-ui": "0.10.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
@@ -149,6 +118,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
+    "react-json-tree": "^0.17.0",
     "use-resize-observer": "^8.0.0"
   },
   "peerDependencies": {