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

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -33,14 +33,6 @@ 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) { (0, _defineProperty2["default"])(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; }
 
 var buttons = {
-  accordionHeader: _objectSpread(_objectSpread({}, _theme["default"].buttons.accordionHeader), {}, {
-    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultHover), {}, {
-      color: 'active'
-    }),
-    '&:focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
-      border: 'none'
-    })
-  }),
   critical: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.critical), _theme["default"].buttons.defaultHover)
   },
@@ -57,55 +49,28 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inline), _theme["default"].buttons.defaultHover)
   },
-  inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.inverted), {}, {
-    ':focus': {
-      border: 'none'
-    }
-  }),
   primary: {
     '&:hover': _objectSpread({}, _theme["default"].buttons.primary)
   },
   link: {
     'body &': _theme["default"].buttons.link,
-    'body &:hover': _theme["default"].buttons.link
-  },
-  iconButton: {
-    ':focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
-      border: 'none'
-    })
-  },
-  environmentBreadcrumb: {
-    current: {
-      '&:hover:not(.disabled)': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current),
-      '&:focus': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current)
+    'body &:hover': _theme["default"].buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
     }
   },
-  rocker: _objectSpread(_objectSpread({}, _theme["default"].buttons.rocker), {}, {
-    ':focus': {
-      border: 'none'
-    },
-    '&.is-selected:hover': {
-      color: 'white'
-    },
-    ':not(.is-selected):hover': {
-      color: 'accent.30'
-    }
-  }),
-  navBarSectionButton: _objectSpread(_objectSpread({}, _theme["default"].buttons.navBarSectionButton), {}, {
-    height: 'unset',
-    minHeight: '36px',
-    '&:not(.disabled):hover': _objectSpread({}, _theme["default"].buttons.navBarSectionButton),
-    ':focus': {
-      border: 'none'
-    }
-  }),
-  navItemButton: _objectSpread(_objectSpread({
-    height: 'unset'
-  }, _theme["default"].buttons.navItemButton), {}, {
-    '&:not(.disabled):hover': _objectSpread({}, _theme["default"].buttons.navItemButton),
-    ':focus': {
-      border: 'none'
-    }
+  iconButtons: _objectSpread(_objectSpread({}, _theme["default"].buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, _theme["default"].buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    })
   })
 };
 var forms = {
@@ -126,7 +91,7 @@ var forms = {
     })
   },
   search: {
-    container: {
+    wrapper: {
       '& input[type=search]': _objectSpread(_objectSpread({}, _theme["default"].text.inputValue), {}, {
         borderColor: 'neutral.80',
         bg: 'white',
@@ -150,9 +115,61 @@ var links = {
     '&:hover': _objectSpread({}, _theme["default"].links.app)
   }
 };
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, _theme["default"].variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, _theme["default"].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["default"].variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, _theme["default"].variants.environmentBreadcrumb.button.current)
+      }
+    }
+  },
+  navBar: {
+    sectionButton: _objectSpread(_objectSpread({}, _theme["default"].variants.navBar.sectionButton), {}, {
+      height: 'unset',
+      minHeight: '36px',
+      '&:not(.disabled):hover': _objectSpread({}, _theme["default"].variants.navBar.sectionButton),
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    itemButton: _objectSpread(_objectSpread({
+      height: 'unset'
+    }, _theme["default"].variants.navBar.itemButton), {}, {
+      '&:not(.disabled):hover': _objectSpread({}, _theme["default"].variants.navBar.itemButton),
+      ':focus': {
+        border: 'none'
+      }
+    })
+  }
+};
 var _default = {
   buttons: buttons,
   forms: forms,
-  links: links
+  links: links,
+  variants: variants
 };
 exports["default"] = _default;

package/lib/cjs/{components/List/List.js → styles/themeOverrides/withUiLibraryCss.js}

@@ -16,39 +16,41 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Box = _interopRequireDefault(require("../Box/Box"));
+var _themeUi = require("theme-ui");
 
-var _hooks = require("../../hooks");
+var _uiLibraryOverride = _interopRequireDefault(require("./uiLibraryOverride"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * The intended use of List is to hold a collection of <ListItem/> components.
- * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
-*/
-var List = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var children = props.children,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  (0, _hooks.useDeprecationWarning)('The  List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    ref: ref,
-    role: "list",
-    as: "ul",
-    pl: "0"
-  }, others), children);
-});
-List.displayName = 'List';
-var _default = List;
+var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
+
+var WithUiLibraryCss = function WithUiLibraryCss(Story) {
+  (0, _react.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 (0, _forEach["default"])(_context = document.querySelectorAll('.uiLibraryCssLink')).call(_context, function (link) {
+        link.remove();
+      });
+    };
+  }, []);
+  return (0, _react2.jsx)(_themeUi.ThemeProvider, {
+    theme: _uiLibraryOverride["default"]
+  }, (0, _react2.jsx)(Story, null));
+};
+
+var _default = WithUiLibraryCss;
 exports["default"] = _default;

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

@@ -127,8 +127,8 @@ var modifyTheme = {
     }
   },
   variants: {
-    boxes: {
-      card: {
+    card: {
+      container: {
         borderRadius: borderRadius,
         flexGrow: [1, 0],
         maxWidth: _theme["default"].breakpoints[0],
@@ -136,26 +136,26 @@ var modifyTheme = {
         alignItems: 'stretch',
         py: [0, 'xl'],
         my: 'auto',
-        boxShadow: ['none', _theme["default"].variants.boxes.card.boxShadow],
+        boxShadow: ['none', _theme["default"].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/cjs/styles/variants/index.js

@@ -1,12 +1,22 @@
 "use strict";
 
-var _context;
+var _context3;
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -15,38 +25,41 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 var _exportNames = {
-  variants: true,
   buttons: true,
-  bidirectionalIconButton: true,
   images: true,
-  links: true
+  links: true,
+  cards: true,
+  badges: true,
+  variants: true
 };
 
-_Object$defineProperty(exports, "bidirectionalIconButton", {
+_Object$defineProperty(exports, "badges", {
   enumerable: true,
   get: function get() {
-    return _bidirectionalIconButton["default"];
+    return _Badge["default"];
   }
 });
 
-_Object$defineProperty(exports, "buttons", {
+exports.buttons = void 0;
+
+_Object$defineProperty(exports, "cards", {
   enumerable: true,
   get: function get() {
-    return _buttons["default"];
+    return _Card["default"];
   }
 });
 
 _Object$defineProperty(exports, "images", {
   enumerable: true,
   get: function get() {
-    return _images["default"];
+    return _Image["default"];
   }
 });
 
 _Object$defineProperty(exports, "links", {
   enumerable: true,
   get: function get() {
-    return _links["default"];
+    return _Link["default"];
   }
 });
 
@@ -57,27 +70,43 @@ _Object$defineProperty(exports, "variants", {
   }
 });
 
-var _variants = _interopRequireDefault(require("./variants"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = _interopRequireDefault(require("./buttons"));
+var _Buttons = _interopRequireDefault(require("../../components/Button/Buttons.styles"));
 
-var _bidirectionalIconButton = _interopRequireDefault(require("./bidirectionalIconButton"));
+var _IconButton = _interopRequireDefault(require("../../components/IconButton/IconButton.styles"));
 
-var _images = _interopRequireDefault(require("./images"));
+var _Image = _interopRequireDefault(require("../../components/Image/Image.styles"));
 
-var _links = _interopRequireDefault(require("./links"));
+var _Link = _interopRequireDefault(require("../../components/Link/Link.styles"));
 
-var _text = require("./text");
+var _Card = _interopRequireDefault(require("../../components/Card/Card.styles"));
 
-_forEachInstanceProperty(_context = _Object$keys(_text)).call(_context, function (key) {
+var _Badge = _interopRequireDefault(require("../../components/Badge/Badge.styles"));
+
+var _Text = require("../../components/Text/Text.styles");
+
+_forEachInstanceProperty(_context3 = _Object$keys(_Text)).call(_context3, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _text[key]) return;
+  if (key in exports && exports[key] === _Text[key]) return;
 
   _Object$defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _text[key];
+      return _Text[key];
     }
   });
-});
+});
+
+var _variants = _interopRequireDefault(require("./variants"));
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var buttons = _objectSpread(_objectSpread({}, _Buttons["default"]), {}, {
+  iconButtons: _IconButton["default"]
+});
+
+exports.buttons = buttons;

package/lib/cjs/styles/variants/variants.js

@@ -30,55 +30,71 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _accordion = _interopRequireDefault(require("./accordion"));
+var _Accordion = _interopRequireDefault(require("../../components/AccordionGroup/Accordion.styles"));
 
-var _boxes = _interopRequireDefault(require("./boxes"));
+var _AccordionGrid = _interopRequireDefault(require("../../components/AccordionGridGroup/AccordionGrid.styles"));
+
+var _Box = _interopRequireDefault(require("../../components/Box/Box.styles"));
+
+var _Bracket = _interopRequireDefault(require("../../components/Bracket/Bracket.styles"));
+
+var _Breadcrumb = _interopRequireDefault(require("../../components/Breadcrumbs/Breadcrumb.styles"));
 
 var _callout = _interopRequireDefault(require("./callout"));
 
-var _codeView = _interopRequireDefault(require("./codeView"));
+var _CodeView = _interopRequireDefault(require("../../components/CodeView/CodeView.styles"));
 
-var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
+var _CollapsiblePanel = _interopRequireDefault(require("../../components/CollapsiblePanel/CollapsiblePanel.styles"));
+
+var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyText.styles"));
 
 var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
 
-var _imageUpload = _interopRequireDefault(require("./imageUpload"));
+var _EnvironmentalBreadcrumb = _interopRequireDefault(require("../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles"));
+
+var _FieldHelperText = _interopRequireDefault(require("../../components/FieldHelperText/FieldHelperText.styles"));
 
-var _images = _interopRequireDefault(require("./images"));
+var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHint.styles"));
 
-var _links = _interopRequireDefault(require("./links"));
+var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
 
-var _listBox = _interopRequireDefault(require("./listBox"));
+var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
 
-var _loader = _interopRequireDefault(require("./loader"));
+var _ListItem = _interopRequireDefault(require("../../components/ListItem/ListItem.styles"));
 
-var _menu = _interopRequireDefault(require("./menu"));
+var _ListViewItem = _interopRequireDefault(require("../../components/ListViewItem/ListViewItem.styles"));
 
-var _menuItem = _interopRequireDefault(require("./menuItem"));
+var _Loader = _interopRequireDefault(require("../../components/Loader/Loader.styles"));
 
-var _messages = _interopRequireDefault(require("./messages"));
+var _Menu = _interopRequireDefault(require("../../components/Menu/Menu.styles"));
 
-var _modal = _interopRequireDefault(require("./modal"));
+var _MenuItem = _interopRequireDefault(require("../../components/MenuItem/MenuItem.styles"));
 
-var _navBar = _interopRequireDefault(require("./navBar"));
+var _Message = _interopRequireDefault(require("../../components/Messages/Message.styles"));
 
-var _numberField = _interopRequireDefault(require("./numberField"));
+var _Modal = _interopRequireDefault(require("../../components/Modal/Modal.styles"));
 
-var _overlayPanel = _interopRequireDefault(require("./overlayPanel"));
+var _NavBar = _interopRequireDefault(require("../../components/NavBar/NavBar.styles"));
 
-var _popoverMenu = _interopRequireDefault(require("./popoverMenu"));
+var _OverlayPanel = _interopRequireDefault(require("../../components/OverlayPanel/OverlayPanel.styles"));
 
-var _rockerbutton = _interopRequireDefault(require("./rockerbutton"));
+var _PopoverMenu = _interopRequireDefault(require("../../components/PopoverMenu/PopoverMenu.styles"));
 
-var _separator = _interopRequireDefault(require("./separator"));
+var _RockerButton = _interopRequireDefault(require("../../components/RockerButton/RockerButton.styles"));
 
-var _stepper = _interopRequireDefault(require("./stepper"));
+var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/ScrollBox.styles"));
 
-var _table = _interopRequireDefault(require("./table"));
+var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
 
-var tabs = _interopRequireWildcard(require("./tabs"));
+var _Stepper = _interopRequireDefault(require("../../components/Stepper/Stepper.styles"));
 
-var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _Table = _interopRequireDefault(require("../../components/Table/Table.styles"));
+
+var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
+
+var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
+
+var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,31 +104,39 @@ 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) { (0, _defineProperty2["default"])(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; }
 
-var _default = _objectSpread(_objectSpread({}, tabs), {}, {
-  accordion: _accordion["default"],
-  boxes: _boxes["default"],
+var _default = _objectSpread({
+  accordion: _Accordion["default"],
+  accordionGrid: _AccordionGrid["default"],
+  box: _Box["default"],
+  bracket: _Bracket["default"],
+  breadcrumb: _Breadcrumb["default"],
   callout: _callout["default"],
-  codeView: _codeView["default"],
-  collapsiblePanel: _collapsiblePanel["default"],
+  codeView: _CodeView["default"],
+  collapsiblePanel: _CollapsiblePanel["default"],
+  copyText: _CopyText["default"],
   dataTable: _DataTable["default"],
+  environmentBreadcrumb: _EnvironmentalBreadcrumb["default"],
+  fieldHelperText: _FieldHelperText["default"],
+  helpHint: _HelpHint["default"],
   imageUpload: _imageUpload["default"],
-  images: _images["default"],
-  links: _links["default"],
-  listBox: _listBox["default"],
-  loader: _loader["default"],
-  menu: _menu["default"],
-  menuItem: _menuItem["default"],
-  messages: _messages["default"],
-  modal: _modal["default"],
-  navBar: _navBar["default"],
-  numberField: _numberField["default"],
-  overlayPanel: _overlayPanel["default"],
-  popoverMenu: _popoverMenu["default"],
-  rockerbutton: _rockerbutton["default"],
-  separator: _separator["default"],
-  stepper: _stepper["default"],
-  table: _table["default"],
-  tooltip: _tooltip["default"]
-});
+  listBox: _ListBox["default"],
+  listItem: _ListItem["default"],
+  listViewItem: _ListViewItem["default"],
+  loader: _Loader["default"],
+  menu: _Menu["default"],
+  menuItem: _MenuItem["default"],
+  message: _Message["default"],
+  modal: _Modal["default"],
+  navBar: _NavBar["default"],
+  overlayPanel: _OverlayPanel["default"],
+  popoverMenu: _PopoverMenu["default"],
+  rockerButton: _RockerButton["default"],
+  scrollBox: _ScrollBox["default"],
+  separator: _Separator["default"],
+  stepper: _Stepper["default"],
+  table: _Table["default"],
+  timeZone: _TimeZone["default"],
+  tooltip: _Tooltip["default"]
+}, tab);
 
 exports["default"] = _default;

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

@@ -16,9 +16,9 @@ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _lodash = require("lodash");
 
-var _text = require("../../../styles/variants/text");
+var _Text = require("../../../components/Text/Text.styles");
 
-var _buttons = _interopRequireDefault(require("../../../styles/variants/buttons"));
+var _Buttons = _interopRequireDefault(require("../../../components/Button/Buttons.styles"));
 
 /**
  * Converts the given object to a constant mapping.
@@ -34,7 +34,7 @@ var toConstantObject = function toConstantObject(obj) {
   }));
 };
 
-var textVariants = toConstantObject(_text.text);
+var textVariants = toConstantObject(_Text.text);
 exports.textVariants = textVariants;
-var buttonVariants = toConstantObject(_buttons["default"]);
+var buttonVariants = toConstantObject(_Buttons["default"]);
 exports.buttonVariants = buttonVariants;