@pingux/astro 1.2.0-alpha.8 → 1.3.0

package/lib/components/SearchField/SearchField.stories.js

@@ -101,17 +101,6 @@ export var NoClearButton = function NoClearButton() {
 
   });
 };
-export var MaxLength = function MaxLength(args) {
-  return ___EmotionJSX(SearchField, _extends({}, args, {
-    icon: SearchIcon,
-    "aria-label": "Search Groups",
-    onSubmit: function onSubmit(text) {
-      return alert(text);
-    } // eslint-disable-line no-alert
-    ,
-    maxLength: 9
-  }));
-};
 export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -43,6 +43,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
       name = props.name,
       placeholder = props.placeholder,
       status = props.status,
+      slots = props.slots,
       columnStyleProps = props.columnStyleProps,
       fieldContainerProps = props.fieldContainerProps,
       fieldControlProps = props.fieldControlProps,
@@ -78,7 +79,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))));
+  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
 
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -146,6 +147,12 @@ SelectFieldBase.propTypes = {
     })
   }),
 
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted into the field container. */
+    inContainer: PropTypes.node
+  }),
+
   /** Control for interaction with SelectField */
   trigger: PropTypes.node,
 

package/lib/components/TextAreaField/TextAreaField.js

@@ -14,8 +14,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -31,7 +32,8 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
       isUnresizable = props.isUnresizable,
       rows = props.rows,
-      status = props.status;
+      status = props.status,
+      slots = props.slots;
   var statusClasses = {
     isUnresizable: isUnresizable
   };
@@ -45,6 +47,9 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var textAreaRef = useRef();
   var labelRef = useRef();
+  var containerRef = useRef();
+  var inputContainerRef = useRef();
+  var slotContainer = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -57,6 +62,24 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
   };
+  /* istanbul ignore next */
+
+
+  var resizeSlotContainer = function resizeSlotContainer() {
+    inputContainerRef.current.style.width = textAreaRef.current.style.width;
+  };
+
+  var onResize = useCallback(function () {
+    /* istanbul ignore next */
+    if (slots === null || slots === void 0 ? void 0 : slots.inContainer) {
+      resizeSlotContainer();
+    }
+  }, [slotContainer]);
+  useResizeObserver({
+    ref: textAreaRef,
+    onResize: onResize
+  });
+  useLayoutEffect(onResize, [onResize]);
 
   var _useLabelHeight = useLabelHeight({
     labelRef: labelRef,
@@ -68,18 +91,22 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     labelMode: props.labelMode
   });
   useEffect(function () {
+    var thisRef = textAreaRef.current;
+
     if (!props.isUnresizable && props.labelMode === 'float') {
-      textAreaRef.current.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
+      thisRef.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     }
 
     return function () {
-      textAreaRef.current.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
+      thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
-  }, []);
+  }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
-    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
+    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
+    ref: containerRef,
+    maxWidth: "100%"
   }), ___EmotionJSX(Label, _extends({
     ref: labelRef
   }, fieldLabelProps, {
@@ -87,12 +114,23 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   })), ___EmotionJSX(Box, {
+    isRow: true,
     variant: "forms.input.container",
-    className: fieldControlProps.className
+    className: fieldControlProps.className,
+    minWidth: "40px",
+    maxWidth: "100%",
+    ref: inputContainerRef
   }, ___EmotionJSX(TextArea, _extends({
     ref: textAreaRef,
     rows: rows
-  }, fieldControlProps))), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlProps, {
+    sx: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && {
+      paddingRight: '35px'
+    }
+  })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && ___EmotionJSX(Box, {
+    variant: "boxes.textFieldInContainerSlot",
+    ref: slotContainer
+  }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
@@ -187,7 +225,13 @@ TextAreaField.propTypes = {
   controlProps: PropTypes.shape({}),
 
   /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({})
+  labelProps: PropTypes.shape({}),
+
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted into the field container. */
+    inContainer: PropTypes.node
+  })
 };
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
@@ -195,7 +239,7 @@ TextAreaField.defaultProps = {
   isReadOnly: false,
   isRequired: false,
   isUnresizable: false,
-  rows: 2,
+  rows: 4,
   status: statuses.DEFAULT
 };
 TextAreaField.displayName = 'TextAreaField';

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -1,8 +1,11 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useState } from 'react';
+import SearchIcon from 'mdi-react/SearchIcon';
 import TextAreaField from '.';
 import Box from '../Box';
+import Icon from '../Icon';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { modes as labelModes } from '../Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -62,43 +65,38 @@ export default {
     }
   }
 };
+
+var IconSlot = ___EmotionJSX(Box, {
+  isRow: true
+}, ___EmotionJSX(Icon, {
+  icon: SearchIcon
+}));
+
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
+export var WithSlots = function WithSlots(args) {
+  return (// This is an example of a slot that can be passed into the component
+    // const IconSlot = (
+    //   <Box isRow>
+    //     <Icon
+    //       icon={SearchIcon}
+    //     />
+    //   </Box>
+    // );
+    ___EmotionJSX(TextAreaField, _extends({}, args, {
+      slots: {
+        inContainer: IconSlot
+      }
+    }))
+  );
+};
 export var FloatLabel = function FloatLabel() {
   return ___EmotionJSX(TextAreaField, {
     label: "Example label",
     labelMode: "float"
   });
 };
-export var LeftLabel = function LeftLabel() {
-  return ___EmotionJSX(Box, {
-    gap: "xl",
-    width: "fit-content"
-  }, ___EmotionJSX(TextAreaField, {
-    label: "Example label",
-    labelMode: "left"
-  }), ___EmotionJSX(TextAreaField, {
-    label: "Example label that is much longer than the previous one",
-    labelMode: "left",
-    status: "error"
-  }), ___EmotionJSX(TextAreaField, {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }));
-};
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
 export var Controlled = function Controlled() {
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -152,20 +150,6 @@ export var Error = function Error() {
     status: "error"
   });
 };
-export var Success = function Success() {
-  return ___EmotionJSX(TextAreaField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    status: "success"
-  });
-};
-export var Warning = function Warning() {
-  return ___EmotionJSX(TextAreaField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    status: "warning"
-  });
-};
 export var WithoutStatusIndicator = function WithoutStatusIndicator() {
   return ___EmotionJSX(TextAreaField, {
     label: "Example Label",

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -120,4 +120,17 @@ test('form wrapper will have a max label column width when custom width set', fu
   });
   var textAreaContainer = screen.getByTestId(testId);
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 120px auto');
+});
+test('providing slot props causes slot to render', function () {
+  var slot = ___EmotionJSX("p", {
+    "data-testid": "testSlot"
+  }, "testText");
+
+  var slots = {
+    inContainer: slot
+  };
+  getComponent({
+    slots: slots
+  });
+  expect(screen.getByTestId('testSlot')).toBeInTheDocument();
 });

package/lib/context/AccordionGridContext/index.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var AccordionGridContext = /*#__PURE__*/createContext({});
+export var useAccordionGridContext = function useAccordionGridContext() {
+  return useContext(AccordionGridContext);
+};

package/lib/context/NavBarContext/index.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var NavBarContext = /*#__PURE__*/createContext({});
+export var useNavBarContext = function useNavBarContext() {
+  return useContext(NavBarContext);
+};

package/lib/hooks/index.js

@@ -6,6 +6,7 @@ export { default as useLabelHeight } from './useLabelHeight';
 export { default as useModalState } from './useModalState';
 export { default as useOverlayPanelState } from './useOverlayPanelState';
 export { default as usePropWarning } from './usePropWarning';
+export { default as useNavBarPress } from './useNavBarPress';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';
 export { default as useStatusClasses } from './useStatusClasses';

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -7,8 +7,9 @@ import { useEffect } from 'react';
 */
 
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
+  var condition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   useEffect(function () {
-    if (process.env.NODE_ENV === 'development' && !ariaLabel) {
+    if (process.env.NODE_ENV === 'development' && condition && !ariaLabel) {
       // eslint-disable-next-line no-console
       console.warn("".concat(component, " requires an aria-label"), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
     }

package/lib/hooks/useField/useField.js

@@ -114,6 +114,11 @@ var useField = function useField() {
       setHasValue(true);
     } else {
       setHasValue(false);
+    } // adding this function resolves the error brought up in UIP-5116
+
+
+    if (e.persist) {
+      e.persist();
     } // Make sure to call the original onChange event
 
 

package/lib/hooks/useNavBarPress/index.js

@@ -0,0 +1 @@
+export { default } from './useNavBarPress';

package/lib/hooks/useNavBarPress/useNavBarPress.js

@@ -0,0 +1,27 @@
+/**
+ * A custom hook that will call an onPressCallback function, if the function is provided.
+ * @param {Object} params The accepted parameters object
+ * @param {string} props.key The unique identifier that is assigned to the element being pressed
+ * @param {Object} state The state object tracking selected keys
+ * @param {function} state.setSelectedKeys The function that sets the selected keys
+ * @callback props.onPressCallback The callback that will be called only if provided
+ */
+var useNavBarPress = function useNavBarPress(_ref, state) {
+  var key = _ref.key,
+      onPressCallback = _ref.onPressCallback;
+  var setSelectedKeys = state.setSelectedKeys;
+
+  var onNavPress = function onNavPress() {
+    setSelectedKeys(key);
+
+    if (onPressCallback) {
+      onPressCallback();
+    }
+  };
+
+  return {
+    onNavPress: onNavPress
+  };
+};
+
+export default useNavBarPress;

package/lib/hooks/useNavBarPress/useNavBarPress.test.js

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useNavBarPress from './';
+var key = 'testKey';
+test('using the onPress prop works as a callback', function () {
+  var onPress = jest.fn();
+  var setSelectedKeys = jest.fn();
+
+  var _renderHook = renderHook(function () {
+    return useNavBarPress({
+      key: key,
+      onPressCallback: onPress
+    }, {
+      setSelectedKeys: setSelectedKeys
+    });
+  }),
+      result = _renderHook.result;
+
+  result.current.onNavPress();
+  expect(onPress).toHaveBeenCalled();
+});
+test('if no onPress prop there is no callback', function () {
+  var onPress = jest.fn();
+  var setSelectedKeys = jest.fn();
+
+  var _renderHook2 = renderHook(function () {
+    return useNavBarPress({
+      key: key
+    }, {
+      setSelectedKeys: setSelectedKeys
+    });
+  }),
+      result = _renderHook2.result;
+
+  result.current.onNavPress();
+  expect(onPress).not.toHaveBeenCalled();
+});

package/lib/hooks/useRockerButton/useRockerButton.js

@@ -17,24 +17,22 @@ import { useId } from '@react-aria/utils';
 
 var useRockerButton = function useRockerButton(props, state, ref) {
   var item = props.item,
-      propsDisabled = props.isDisabled;
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected;
   var key = item.key;
-  var manager = state.selectionManager,
-      selectedKey = state.selectedKey;
-  var isSelected = key === selectedKey;
+  var manager = state.selectionManager;
 
   var _useSelectableItem = useSelectableItem({
+    isDisabled: isDisabled,
     selectionManager: manager,
     key: key,
     ref: ref
   }),
       itemProps = _useSelectableItem.itemProps;
 
-  var isDisabled = propsDisabled || state.disabledKeys.has(key);
   var rockerButtonId = useId();
   return {
     rockerButtonProps: _objectSpread(_objectSpread({}, itemProps), {}, {
-      isDisabled: isDisabled,
       id: rockerButtonId,
       'aria-pressed': isSelected,
       'aria-disabled': isDisabled || undefined

package/lib/index.js

@@ -11,6 +11,8 @@ export { default as AccordionItem } from './components/AccordionItem';
 export * from './components/AccordionItem';
 export { default as AccordionGridItem } from './components/AccordionGridItem';
 export * from './components/AccordionGridItem';
+export { default as ArrayField } from './components/ArrayField';
+export * from './components/ArrayField';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
 export { default as Box } from './components/Box';

package/lib/layouts/ListLayout.stories.js

@@ -547,7 +547,7 @@ export var Default = function Default() {
     mr: "md",
     "aria-label": "Save Button"
   }, "Save"), ___EmotionJSX(Button, {
-    variant: "text",
+    variant: "link",
     onPress: viewItem,
     "aria-label": "Cancel Button"
   }, "Cancel"))), editConfigurationVisible && ___EmotionJSX(OverlayPanel, {
@@ -677,7 +677,7 @@ export var Default = function Default() {
     mr: "md",
     "aria-label": "Save Button"
   }, "Save"), ___EmotionJSX(Button, {
-    variant: "text",
+    variant: "link",
     onPress: viewItem,
     "aria-label": "Cancel Button"
   }, "Cancel"))), addItemVisible && ___EmotionJSX(OverlayPanel, {
@@ -763,7 +763,7 @@ export var Default = function Default() {
     isRow: true,
     sx: buttonBarStyles
   }, ___EmotionJSX(Button, {
-    variant: "text",
+    variant: "link",
     onPress: resetListItem,
     mr: "md",
     "aria-label": "Cancel Button"
@@ -824,7 +824,7 @@ export var Default = function Default() {
     isRow: true,
     sx: buttonBarStyles
   }, ___EmotionJSX(Button, {
-    variant: "text",
+    variant: "link",
     onPress: resetListItem,
     mr: "md"
   }, "Cancel"), ___EmotionJSX(Button, {
@@ -846,11 +846,11 @@ export var Default = function Default() {
     pt: "lg",
     mr: "auto"
   }, ___EmotionJSX(Button, {
-    variant: "danger",
+    variant: "critical",
     mr: "md",
     onPress: deleteItem
   }, "Delete"), ___EmotionJSX(Button, {
-    variant: "text",
+    variant: "link",
     onPress: function onPress() {
       return setIsDeleting(false);
     }

package/lib/recipes/ConditionalFilter.stories.js

@@ -96,7 +96,9 @@ export var Default = function Default() {
       setEditOverviewVisible = _React$useState4[1];
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-    onPress: setStaticOverviewVisible
+    onPress: function onPress() {
+      return setStaticOverviewVisible(true);
+    }
   }, "Open Panel"), staticOverviewVisible && ___EmotionJSX(OverlayPanel, {
     isOpen: staticOverviewVisible
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
@@ -111,7 +113,9 @@ export var Default = function Default() {
     "aria-label": "edit",
     variant: "inverted",
     ml: "xs",
-    onPress: setEditOverviewVisible
+    onPress: function onPress() {
+      return setEditOverviewVisible(true);
+    }
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: 14
@@ -435,7 +439,7 @@ export var Default = function Default() {
     onPress: function onPress() {
       return setEditOverviewVisible(false);
     },
-    variant: "text",
+    variant: "link",
     "aria-label": "cancel"
   }, "Cancel"))))));
 };

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -48,7 +48,7 @@ export var Default = function Default() {
       label: fieldName,
       isDisabled: isDisabled
     }), ___EmotionJSX(Button, {
-      variant: "text",
+      variant: "link",
       mb: "xs",
       ml: "md",
       onPress: function onPress() {

package/lib/styles/variants/accordion.js

@@ -1,3 +1,17 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -71,7 +85,6 @@ var accordionGridHeaderNav = {
   flexGrow: 1,
   fontWeight: 0,
   fontSize: '16px',
-  mt: '5px',
   '&.is-focused': {
     outline: 'none',
     boxShadow: 'focus',
@@ -79,13 +92,20 @@ var accordionGridHeaderNav = {
     MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
-    backgroundColor: 'accent.10',
-    boxShadow: 'inset 2px 0 0 0 white'
+    backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
-    backgroundColor: 'accent.10'
+    backgroundColor: 'accent.5'
   }
 };
+
+var accordionGridNavItem = _objectSpread(_objectSpread({}, accordionGridHeaderNav), {}, {
+  '&.is-selected': {
+    backgroundColor: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+});
+
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -100,5 +120,6 @@ export default {
   accordionTitle: accordionTitle,
   accordion: accordion,
   accordionBody: accordionBody,
-  accordionGridHeaderNav: accordionGridHeaderNav
+  accordionGridHeaderNav: accordionGridHeaderNav,
+  accordionGridNavItem: accordionGridNavItem
 };

package/lib/styles/variants/boxes.js

@@ -117,6 +117,14 @@ var inputInContainerSlot = {
   top: '50%',
   transform: 'translateY(-50%)'
 };
+var textFieldInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
 var copy = {
   alignItems: 'center',
   width: 'max-content',
@@ -189,26 +197,6 @@ var expandableRow = {
     }
   }
 };
-var navBar = {
-  height: '100%',
-  width: '230px',
-  position: 'absolute',
-  zIndex: '1',
-  top: '0',
-  left: '0',
-  backgroundColor: 'accent.20',
-  overflowY: 'hidden'
-};
-var navBarSectionContainer = {
-  height: '100%',
-  maxHeight: '100%',
-  overflowY: 'overlay !important'
-};
-var navBarItemHeaderContainer = {
-  flexGrow: 1,
-  alignItems: 'center',
-  maxWidth: '180px'
-};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -295,6 +283,7 @@ export default {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
@@ -303,8 +292,5 @@ export default {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox,
-  navBar: navBar,
-  navBarSectionContainer: navBarSectionContainer,
-  navBarItemHeaderContainer: navBarItemHeaderContainer
+  bottomShadowScrollbox: bottomShadowScrollbox
 };