@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

package/lib/styles/themes/next-gen/variants/stepper.js

@@ -1,18 +1,7 @@
-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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import spacing from '../spacing';
-var line = {
-  mx: "".concat(spacing.xs, " !important"),
+const line = {
+  mx: `${spacing.xs} !important`,
   maxWidth: '82px',
   borderBottomWidth: '2px',
   borderBottomColor: 'active',
@@ -31,7 +20,7 @@ var line = {
     my: 'xs'
   }
 };
-var stepBase = {
+const stepBase = {
   borderWidth: '2px',
   width: 32,
   height: 32,
@@ -41,16 +30,16 @@ var stepBase = {
   fontWeight: 2,
   fontSize: 'md'
 };
-var tab = {
+const tab = {
   mr: 'xs'
 };
-var step = {
+const step = {
   active: {
-    '&.is-horizontal': _objectSpread(_objectSpread({
+    '&.is-horizontal': {
       backgroundColor: 'active',
       borderColor: 'active',
-      color: 'white'
-    }, stepBase), {}, {
+      color: 'white',
+      ...stepBase,
       '&:before': {
         content: '""',
         height: '24px',
@@ -64,26 +53,29 @@ var step = {
         borderWidth: '2px',
         zIndex: 0
       }
-    })
+    }
   },
-  completed: _objectSpread(_objectSpread({}, stepBase), {}, {
+  completed: {
+    ...stepBase,
     borderColor: 'active'
-  }),
+  },
   inactive: {
-    '&.is-horizontal': _objectSpread({
+    '&.is-horizontal': {
       backgroundColor: 'backgroundBase',
       borderColor: astroTokens.color.blue[200],
-      color: 'active'
-    }, stepBase)
+      color: 'active',
+      ...stepBase
+    }
   },
-  "default": _objectSpread({
+  default: {
     backgroundColor: 'backgroundBase',
     borderColor: astroTokens.color.blue[200],
-    color: 'active'
-  }, stepBase)
+    color: 'active',
+    ...stepBase
+  }
 };
 export default {
-  tab: tab,
-  line: line,
-  step: step
+  tab,
+  line,
+  step
 };

package/lib/styles/themes/next-gen/variants/suggestion.js

@@ -1,8 +1,8 @@
-var iconContainer = {
+const iconContainer = {
   ml: 'auto',
   mr: '0px',
   minWidth: '25px'
 };
 export default {
-  iconContainer: iconContainer
+  iconContainer
 };

package/lib/styles/themes/next-gen/variants/switch.js

@@ -1,4 +1,4 @@
-export var switchable = {
+export const switchable = {
   container: {
     minWidth: '28px',
     mr: '12px',

package/lib/styles/themes/next-gen/variants/table.js

@@ -1,24 +1,13 @@
-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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var container = {
+const container = {
   overflow: 'hidden'
 };
-var caption = {
+const caption = {
   px: 'lg',
   color: 'text.primary',
   borderBottom: '1px solid',
   borderBottomColor: 'border.base'
 };
-var head = {
+const head = {
   px: 'lg',
   py: 'sm',
   fontSize: 'md',
@@ -26,7 +15,7 @@ var head = {
   color: 'text.primary',
   lineHeight: 'body'
 };
-var body = {
+const body = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
   backgroundColor: 'backgroundBase',
@@ -44,14 +33,15 @@ var body = {
     borderBottomRightRadius: '16px'
   }
 };
-var data = _objectSpread(_objectSpread({}, head), {}, {
+const data = {
+  ...head,
   py: 'md',
   fontWeight: '1'
-});
-export var table = {
-  container: container,
-  caption: caption,
-  head: head,
-  body: body,
-  data: data
+};
+export const table = {
+  container,
+  caption,
+  head,
+  body,
+  data
 };

package/lib/styles/themes/next-gen/variants/tableBase.js

@@ -1,21 +1,11 @@
-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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import { defaultFocus as baseFocus } from './button';
-var borderRadius = '16px';
-var defaultFocus = _objectSpread(_objectSpread({}, baseFocus), {}, {
+const borderRadius = '16px';
+const defaultFocus = {
+  ...baseFocus,
   outlineOffset: '-2px'
-});
-var container = {
+};
+const container = {
   '& > thead > tr': {
     '& > th:first-of-type': {
       borderTopLeftRadius: borderRadius
@@ -49,7 +39,7 @@ var container = {
     }
   }
 };
-var caption = {
+const caption = {
   backgroundColor: 'backgroundBase',
   px: 'lg',
   color: astroTokens.color.font.base,
@@ -58,10 +48,12 @@ var caption = {
   borderTopLeftRadius: borderRadius,
   borderTopRightRadius: borderRadius
 };
-var row = {
+const row = {
   borderBottom: '1px solid',
   borderBottomColor: astroTokens.color.common.border,
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': {
+    ...defaultFocus
+  },
   '&.is-hovered': {
     bg: astroTokens.color['table-row'].hover.bg,
     '& > td:last-of-type': {
@@ -78,47 +70,50 @@ var row = {
     }
   }
 };
-var thead = {
+const thead = {
   borderBottomColor: astroTokens.color.common.border,
   backgroundColor: 'backgroundBase',
   '&.is-sticky': {
     border: 'none',
-    boxShadow: "0 1px 0 ".concat(astroTokens.color.common.border)
+    boxShadow: `0 1px 0 ${astroTokens.color.common.border}`
   }
 };
-var resizer = {
+const resizer = {
   backgroundColor: astroTokens.color.common['border-dark']
 };
-var head = {
+const head = {
   px: 'lg',
   py: 'sm',
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': {
+    ...defaultFocus
+  },
   '&:last-of-type': {
     backgroundColor: 'backgroundBase'
   }
 };
-var tbody = {
+const tbody = {
   borderTopColor: astroTokens.color.common.border,
   borderBottom: 'unset',
   backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
   borderBottomRightRadius: borderRadius
 };
-var data = _objectSpread(_objectSpread({}, head), {}, {
+const data = {
+  ...head,
   py: 'md',
   fontWeight: '0',
   '&:last-of-type': {
     backgroundColor: 'backgroundBase',
     zIndex: 1
   }
-});
-export var tableBase = {
-  container: container,
-  caption: caption,
-  row: row,
-  thead: thead,
-  head: head,
-  tbody: tbody,
-  data: data,
-  resizer: resizer
+};
+export const tableBase = {
+  container,
+  caption,
+  row,
+  thead,
+  head,
+  tbody,
+  data,
+  resizer
 };

package/lib/styles/themes/next-gen/variants/tabs.js

@@ -1,18 +1,18 @@
-export var tabs = {
+export const tabs = {
   mb: 'md',
   '&.is-horizontal': {
     gap: '0px'
   }
 };
-export var tabPickerExpandIcon = {
+export const tabPickerExpandIcon = {
   ml: 'sm',
   width: '16px',
   height: '16px'
 };
-export var menuTab = {
+export const menuTab = {
   ml: '0px !important'
 };
-export var tab = {
+export const tab = {
   borderRadius: '2px',
   '& > span': {
     px: 'md',
@@ -36,6 +36,6 @@ export var tab = {
     ml: '0px'
   }
 };
-export var tabLine = {
+export const tabLine = {
   height: '3px'
 };

package/lib/styles/themes/next-gen/variants/text.js

@@ -1,17 +1,6 @@
-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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
-var fontSizes = astroTokens["default"]['font-size'];
-var hTags = {
+const fontSizes = astroTokens.default['font-size'];
+const hTags = {
   H1: {
     lineHeight: '1.2',
     fontSize: fontSizes.h1,
@@ -101,34 +90,36 @@ var hTags = {
     letterSpacing: '1px'
   }
 };
-var buttonTitle = {
+const buttonTitle = {
   fontSize: '13px'
 };
-var buttonSubtitle = {
+const buttonSubtitle = {
   fontSize: '13px',
   fontWeight: 2
 };
-var stepperTabContent = {
+const stepperTabContent = {
   fontSize: 'md',
   color: 'font.base',
   lineHeight: 'body'
 };
-var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
+const stepperTabContentHeader = {
+  ...hTags.H2,
   color: 'font.base'
-});
-var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
+};
+const modalTitle = {
+  ...hTags.H3,
   lineHeight: '2rem'
-});
-var label = {
+};
+const label = {
   fontSize: fontSizes.label
 };
-export var text = _objectSpread(_objectSpread({
+export const text = {
   base: {
     lineHeight: 'body'
   },
-  modalTitle: modalTitle,
-  buttonSubtitle: buttonSubtitle,
-  buttonTitle: buttonTitle,
+  modalTitle,
+  buttonSubtitle,
+  buttonTitle,
   pageHeaderBody: {
     lineHeight: 'body',
     color: 'text.primary',
@@ -215,21 +206,22 @@ export var text = _objectSpread(_objectSpread({
     '&::marker': {
       color: 'text.primary'
     }
-  }
-}, hTags), {}, {
+  },
+  ...hTags,
   aiPanelHeader: {
     fontFamily: 'standard',
     color: 'text.primary',
     fontSize: 'lg',
     fontWeight: 2
   },
-  panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+  panelHeaderText: {
+    ...hTags.h4,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     color: 'font.base',
     lineHeight: 'xs'
-  }),
+  },
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
       color: astroTokens.color.gray[700],
@@ -257,17 +249,18 @@ export var text = _objectSpread(_objectSpread({
     fontWeight: 0,
     lineHeight: 'body'
   },
-  stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader,
+  stepperTabContent,
+  stepperTabContentHeader,
   headText: {
     fontSize: 'md',
     fontWeight: '2',
     color: astroTokens.color.font.base,
     lineHeight: 'xs'
   },
-  label: label,
-  linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
+  label,
+  linkSelectFieldLabel: {
+    ...label,
     color: astroTokens.color.font.link,
     fontWeight: 0
-  })
-});
+  }
+};

package/lib/styles/themes/next-gen/variants/tooltip.js

@@ -1,17 +1,6 @@
-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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import { defaultFocus } from './button';
-var container = {
+const container = {
   backgroundColor: astroTokens.color.tooltip.container.bg,
   borderRadius: '3px',
   fontSize: 'sm',
@@ -21,7 +10,7 @@ var container = {
   px: 'sm',
   py: 'xs'
 };
-var badge = {
+const badge = {
   borderRadius: '4px',
   position: 'relative',
   '&.is-focused:before': {
@@ -35,12 +24,14 @@ var badge = {
     borderColor: 'focus'
   }
 };
-var inline = {
+const inline = {
   color: astroTokens.color.font.base,
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': {
+    ...defaultFocus
+  }
 };
 export default {
-  container: container,
-  badge: badge,
-  inline: inline
+  container,
+  badge,
+  inline
 };

package/lib/styles/themes/next-gen/variants/tree.js

@@ -1,31 +1,22 @@
-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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import treeSource from '../../../../components/Tree/Tree.styles';
 
 // The base styles file builds its object imperatively (tree.item = {...}), so its
 // inferred type has possibly-undefined members; treat it as a complete object here.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var tree = treeSource;
+const tree = treeSource;
 
 /**
  * Onyx (next-gen) theme overrides for the Tree component, derived from
  * @pingux/onyx-tokens. Deep-merged onto the base Astro tree styles, so only
  * differences from the Astro values are specified here.
  */
-var onyxTree = _objectSpread(_objectSpread({}, tree), {}, {
-  item: _objectSpread(_objectSpread({}, tree.item), {}, {
+const onyxTree = {
+  ...tree,
+  item: {
+    ...tree.item,
     '&.is-focused, &[data-focused]': {
-      boxShadow: "inset 0 0 0 2px ".concat(astroTokens.color.primary),
+      boxShadow: `inset 0 0 0 2px ${astroTokens.color.primary}`,
       // the base Astro theme draws focus with outline: 2px solid; the Onyx
       // treatment is a single inset shadow (matching ListView/DataTable), so
       // the outline must be reset or both stack and the ring reads ~4px thick
@@ -40,7 +31,7 @@ var onyxTree = _objectSpread(_objectSpread({}, tree), {}, {
       outline: 'none'
     },
     '&.is-focus-visible, &[data-focus-visible]': {
-      boxShadow: "inset 0 0 0 2px ".concat(astroTokens.color.primary),
+      boxShadow: `inset 0 0 0 2px ${astroTokens.color.primary}`,
       outline: 'none',
       borderRadius: '4px'
     },
@@ -56,28 +47,30 @@ var onyxTree = _objectSpread(_objectSpread({}, tree), {}, {
     },
     '&.is-dragging, &[data-dragging]': {
       bg: astroTokens.color['nav-bar-item'].hover.bg,
-      boxShadow: "inset 0 0 0 2px ".concat(astroTokens.color.primary),
+      boxShadow: `inset 0 0 0 2px ${astroTokens.color.primary}`,
       borderRadius: '4px',
       '& *': {
         color: astroTokens.color['nav-bar-item'].selected.text
       }
     },
     '&.is-drop-target, &[data-drop-target]': {
-      boxShadow: "inset 0 0 0 2px ".concat(astroTokens.color.primary),
+      boxShadow: `inset 0 0 0 2px ${astroTokens.color.primary}`,
       borderRadius: '4px'
     },
     '&:hover': {
       bg: astroTokens.color['nav-bar-item'].hover.bg,
       borderRadius: '4px'
     }
-  }),
-  itemContent: _objectSpread(_objectSpread({}, tree.itemContent), {}, {
+  },
+  itemContent: {
+    ...tree.itemContent,
     color: astroTokens.color.gray[900],
     '&:hover': {
       bg: 'transparent'
     }
-  }),
-  dragButton: _objectSpread(_objectSpread({}, tree.dragButton), {}, {
+  },
+  dragButton: {
+    ...tree.dragButton,
     path: {
       fill: astroTokens.color.gray[500]
     },
@@ -88,7 +81,7 @@ var onyxTree = _objectSpread(_objectSpread({}, tree), {}, {
       }
     },
     '&:focus, &:focus-visible': {
-      boxShadow: "0 0 0 2px ".concat(astroTokens.color.primary),
+      boxShadow: `0 0 0 2px ${astroTokens.color.primary}`,
       borderRadius: '4px'
     },
     '&:active, &[data-pressed]': {
@@ -98,50 +91,59 @@ var onyxTree = _objectSpread(_objectSpread({}, tree), {}, {
         fill: astroTokens.color['primary-dark']
       }
     }
-  }),
+  },
   // the visible checkbox box is drawn by tree.selectionCheckboxBox on the
   // inner RAC CheckboxButton label; Onyx re-colors it from tokens
-  selectionCheckbox: _objectSpread(_objectSpread({}, tree.selectionCheckbox), {}, {
+  selectionCheckbox: {
+    ...tree.selectionCheckbox,
     '&:focus-visible, [data-focus-visible]': {
-      boxShadow: "0 0 0 2px ".concat(astroTokens.color.primary)
+      boxShadow: `0 0 0 2px ${astroTokens.color.primary}`
     }
-  }),
-  selectionCheckboxBox: _objectSpread(_objectSpread({}, tree.selectionCheckboxBox), {}, {
+  },
+  selectionCheckboxBox: {
+    ...tree.selectionCheckboxBox,
     borderColor: astroTokens.color.gray[500],
-    '&[data-selected]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-selected]']), {}, {
+    '&[data-selected]': {
+      ...tree.selectionCheckboxBox['&[data-selected]'],
       borderColor: astroTokens.color.primary,
       bg: astroTokens.color.primary
-    }),
+    },
     '[data-hovered] &, [data-pressed] &': {
       borderColor: astroTokens.color.primary
     },
-    '&[data-disabled]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-disabled]']), {}, {
+    '&[data-disabled]': {
+      ...tree.selectionCheckboxBox['&[data-disabled]'],
       borderColor: astroTokens.color.border,
       background: astroTokens.color.gray[100]
-    })
-  }),
+    }
+  },
   // blue circle with a blue.600 folder glyph for expandable nodes; the file
   // (indigo) variant is applied per-item in TreeItemContent via is-leaf
-  iconSlot: _objectSpread(_objectSpread({}, tree.iconSlot), {}, {
+  iconSlot: {
+    ...tree.iconSlot,
     bg: astroTokens.color.avatar.blue.bg,
     color: astroTokens.color.avatar.blue.text,
     '&.is-leaf': {
       bg: astroTokens.color.avatar.indigo.bg,
       color: astroTokens.color.avatar.indigo.text
     }
-  }),
-  lockSlot: _objectSpread(_objectSpread({}, tree.lockSlot), {}, {
+  },
+  lockSlot: {
+    ...tree.lockSlot,
     color: '#5F6DA7'
-  }),
-  container: _objectSpread(_objectSpread({}, tree.container), {}, {
-    '& .react-aria-DropIndicator': _objectSpread(_objectSpread({}, tree.container['& .react-aria-DropIndicator']), {}, {
-      '&::before': _objectSpread(_objectSpread({}, tree.container['& .react-aria-DropIndicator']['&::before']), {}, {
+  },
+  container: {
+    ...tree.container,
+    '& .react-aria-DropIndicator': {
+      ...tree.container['& .react-aria-DropIndicator'],
+      '&::before': {
+        ...tree.container['& .react-aria-DropIndicator']['&::before'],
         bg: 'transparent'
-      }),
+      },
       '&[data-drop-target]::before': {
         bg: astroTokens.color.primary
       }
-    })
-  })
-});
+    }
+  }
+};
 export default onyxTree;