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

package/lib/cjs/components/Modal/Modal.js

@@ -36,15 +36,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _overlays = require("@react-aria/overlays");
-
-var _dialog = require("@react-aria/dialog");
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _focus = require("@react-aria/focus");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+var _reactAria = require("react-aria");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -54,8 +50,6 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
-var _hooks = require("../../hooks");
-
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
@@ -113,33 +107,24 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }); // Handle interacting outside the dialog and pressing
   // the Escape key to close the modal.
 
-  var _useOverlay = (0, _overlays.useOverlay)(contentProps, modalRef),
+  var _useOverlay = (0, _reactAria.useOverlay)(contentProps, modalRef),
       overlayProps = _useOverlay.overlayProps; // Prevent scrolling while the modal is open, and hide content
   // outside the modal from screen readers.
 
 
-  (0, _overlays.usePreventScroll)();
+  (0, _reactAria.usePreventScroll)();
 
-  var _useModal = (0, _overlays.useModal)(),
+  var _useModal = (0, _reactAria.useModal)(),
       modalProps = _useModal.modalProps; // Get props for the dialog and its title
 
 
-  var _useDialog = (0, _dialog.useDialog)(contentProps, modalRef),
+  var _useDialog = (0, _reactAria.useDialog)(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
       titleProps = _useDialog.titleProps;
 
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isDarkMode: others.variant === 'modal.dark'
-  }),
-      classNames = _useStatusClasses.classNames;
-
-  (0, _hooks.useDeprecationWarning)('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
-    isActive: others.variant === 'modal.dark'
-  });
-  return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    className: classNames,
+  return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.container"
-  }, others, containerProps), (0, _react2.jsx)(_focus.FocusScope, {
+  }, others, containerProps), (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus

package/lib/cjs/{styles/variants/modal.js → components/Modal/Modal.styles.js}

@@ -22,11 +22,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports.modalCloseButton = exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.styles");
 
 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; }
 
@@ -58,28 +58,25 @@ var content = {
   pl: 'lg',
   maxWidth: '400px',
   boxShadow: 'standard',
-  borderRadius: 3,
-  '.is-dark-mode &': {
-    color: 'white',
-    bg: 'accent.5'
-  }
+  borderRadius: 3
 };
 
-var dark = _objectSpread({}, container);
-
-var title = _objectSpread(_objectSpread({}, _text.text.title), {}, {
+var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
   mr: 'sm',
-  fontWeight: 3,
-  '.is-dark-mode &': {
-    color: 'white'
-  }
+  fontWeight: 3
 });
 
+var modalCloseButton = {
+  position: 'absolute',
+  top: 14,
+  right: 10
+};
+exports.modalCloseButton = modalCloseButton;
 var _default = {
   closeIcon: closeIcon,
   container: container,
   content: content,
-  dark: dark,
-  title: title
+  title: title,
+  modalCloseButton: modalCloseButton
 };
 exports["default"] = _default;

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -52,15 +52,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _focus = require("@react-aria/focus");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _i18n = require("@react-aria/i18n");
+var _reactAria = require("react-aria");
 
-var _overlays = require("@react-aria/overlays");
+var _i18n = require("@react-aria/i18n");
 
 var _utils = require("@react-aria/utils");
 
@@ -70,6 +68,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _ListBox = _interopRequireDefault(require("../ListBox"));
@@ -207,7 +207,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var listBoxRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     isOpen: isOpen,
     onClose: close,
     overlayRef: popoverRef,
@@ -398,11 +398,11 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     });
 
     if (item) {
-      return (0, _react2.jsx)(_.Chip, {
+      return (0, _react2.jsx)(_.Badge, {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "variants.boxes.readOnlyChip",
+        variant: "readOnlyBadge",
         bg: "white",
         textProps: {
           sx: {
@@ -416,10 +416,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }));
 
   var multivaluesFieldChip = function multivaluesFieldChip(item) {
-    return (0, _react2.jsx)(_.Chip, (0, _extends2["default"])({
+    return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
-      variant: "variants.boxes.selectedItemChip",
+      variant: "selectedItemBadge",
       bg: "active",
       label: item.name,
       slots: item.slots
@@ -428,7 +428,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       onPress: function onPress() {
         return deleteItem(item.key);
       },
-      variant: "buttons.chipDeleteButton"
+      variant: "badge.deleteButton"
     }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
       icon: _CloseIcon["default"],
       color: "white",
@@ -449,7 +449,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
     return null;
   }));
-  var listbox = (0, _react2.jsx)(_focus.FocusScope, null, (0, _react2.jsx)(_overlays.DismissButton, {
+  var listbox = (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }), (0, _react2.jsx)(_.ScrollBox, scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], {
     ref: listBoxRef,
@@ -458,7 +458,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     hasNoEmptySelection: true,
     state: state,
     "aria-label": "List of options"
-  })), (0, _react2.jsx)(_overlays.DismissButton, {
+  })), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
 
@@ -523,10 +523,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = _objectSpread({
-  /** Props object that is spread directly into the root (top-level) Box component. */
-  containerProps: _propTypes["default"].shape({}),
-
+MultivaluesField.propTypes = _objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: _isIterable.isIterableProp,
 
@@ -649,7 +646,7 @@ MultivaluesField.propTypes = _objectSpread({
 
   /** Determines the input status indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -40,6 +40,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -55,7 +57,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -102,7 +104,7 @@ var _default = {
         type: 'text'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes),
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {
@@ -248,11 +250,11 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -265,11 +267,11 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -282,11 +284,11 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -616,13 +616,13 @@ test('default selected keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstChip = _testWrapper.screen.getByText(items[1].name);
+  var firstBadge = _testWrapper.screen.getByText(items[1].name);
 
-  expect(firstChip).toBeInTheDocument();
+  expect(firstBadge).toBeInTheDocument();
 
-  var secondChip = _testWrapper.screen.getByText(items[2].name);
+  var secondBadge = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondChip).toBeInTheDocument();
+  expect(secondBadge).toBeInTheDocument();
 });
 test('selected keys', function () {
   getComponent({
@@ -633,13 +633,13 @@ test('selected keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstChip = _testWrapper.screen.getByText(items[1].name);
+  var firstBadge = _testWrapper.screen.getByText(items[1].name);
 
-  expect(firstChip).toBeInTheDocument();
+  expect(firstBadge).toBeInTheDocument();
 
-  var secondChip = _testWrapper.screen.getByText(items[2].name);
+  var secondBadge = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondChip).toBeInTheDocument();
+  expect(secondBadge).toBeInTheDocument();
 });
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var _getComponent, container, results;
@@ -673,16 +673,16 @@ test('read only keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstChip = _testWrapper.screen.getByText(items[1].name);
+  var firstBadge = _testWrapper.screen.getByText(items[1].name);
 
-  var deleteButton1 = firstChip.nextSibling;
-  expect(firstChip).toBeInTheDocument();
+  var deleteButton1 = firstBadge.nextSibling;
+  expect(firstBadge).toBeInTheDocument();
   expect(deleteButton1).toBeNull();
 
-  var secondChip = _testWrapper.screen.getByText(items[2].name);
+  var secondBadge = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondChip).toBeInTheDocument();
-  var deleteButton2 = firstChip.nextSibling;
+  expect(secondBadge).toBeInTheDocument();
+  var deleteButton2 = firstBadge.nextSibling;
   expect(deleteButton2).toBeNull();
 });
 test('passing helper text should display it and correct aria attributes on input', function () {

package/lib/cjs/components/NavBar/NavBar.stories.js

@@ -147,7 +147,7 @@ var data = [{
   children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Dashboard Link Group",
     id: "Dashboard Link Group",
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     href: "https://pingidentity.com/"
   }, "Group"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Dashboard Link Populations",

package/lib/cjs/{styles/variants/navBar.js → components/NavBar/NavBar.styles.js}

@@ -26,7 +26,11 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _accordion = _interopRequireDefault(require("./accordion"));
+var _AccordionGrid = _interopRequireDefault(require("../AccordionGridGroup/AccordionGrid.styles"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+var _Text = require("../Text/Text.styles");
 
 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; }
 
@@ -87,16 +91,70 @@ var sectionContainer = {
   }
 };
 
-var sectionBody = _objectSpread(_objectSpread({}, _accordion["default"].accordionGridBody), {}, {
+var sectionBody = _objectSpread(_objectSpread({}, _AccordionGrid["default"].body), {}, {
   pl: '0'
 });
 
-var navItem = {
+var itemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
+  display: 'block',
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
+  }
+};
+var subtitle = {
+  ml: 'md',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
+  color: 'accent.80',
+  zIndex: '100'
+};
+
+var headerText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: 1,
+  fontSize: 'md',
+  fontWeight: 1,
+  maxWidth: '150px',
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
+});
+
+var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  py: 'sm',
-  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -106,26 +164,54 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
+  fontSize: '16px',
   '&.is-focused': {
-    outline: '1px solid',
-    outlineColor: 'focus'
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
     backgroundColor: 'accent.5'
-  },
+  }
+};
+
+var item = _objectSpread(_objectSpread({}, headerNav), {}, {
+  py: 'sm',
+  px: 'md',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
-};
+});
+
+var sectionButton = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  }
+});
+
 var _default = {
   container: container,
   itemHeaderContainer: itemHeaderContainer,
   sectionContainer: sectionContainer,
   sectionBody: sectionBody,
-  navItem: navItem
+  sectionButton: sectionButton,
+  itemButton: itemButton,
+  subtitle: subtitle,
+  headerText: headerText,
+  headerNav: headerNav,
+  item: item
 };
 exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -24,11 +24,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _interactions = require("@react-aria/interactions");
-
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _interactions = require("@react-aria/interactions");
 
 var _index = require("../../index");
 
@@ -62,12 +60,12 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
@@ -87,7 +85,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       pressProps = _usePress.pressProps,
       isPressed = _usePress.isPressed;
 
-  var mergedProps = (0, _utils.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
+  var mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -100,7 +98,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
-    variant: "navBar.navItem",
+    variant: "navBar.item",
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -124,7 +122,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -52,7 +52,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       key: "text".concat(subTitle),
       ml: "45px",
       mt: hasSeparator ? '0' : undefined,
-      variant: "text.navBarSubtitle"
+      variant: "variants.navBar.subtitle"
     }, subTitle));
   };
 

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -70,7 +70,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
 
   return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     id: key,
-    variant: "navItemButton",
+    variant: "variants.navBar.itemButton",
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -88,7 +88,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -69,7 +69,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
 
   return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({
     id: key,
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -70,7 +70,7 @@ var NavBarSection = function NavBarSection(_ref) {
   return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
   }), title && (0, _react2.jsx)(_.Text, {
-    variant: "text.navBarSubtitle",
+    variant: "variants.navBar.subtitle",
     mt: hasSeparator ? '0' : undefined
   }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
@@ -170,7 +170,7 @@ var SectionItem = function SectionItem(_ref2) {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     ref: headerButtonRef,
-    variant: "navBarSectionButton",
+    variant: "variants.navBar.sectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }