@pingux/astro 2.0.0-alpha.5 → 2.0.0-alpha.7

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

@@ -146,7 +146,7 @@ test('multiple selection is enabled, option disappears after selection', functio
   secondOption.click();
   expect(secondOption).not.toBeInTheDocument();
 });
-test('clicking an option renders chip with option name', function () {
+test('clicking an option renders badge with option name', function () {
   getComponent();
   var input = screen.getByRole('combobox');
   userEvent.tab();
@@ -155,10 +155,10 @@ test('clicking an option renders chip with option name', function () {
   var firstOption = options[0];
   firstOption.click();
   expect(firstOption).not.toBeInTheDocument();
-  var chip = screen.getByText(items[0].name);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
 });
 test('after clicking an option, and then clicking the text input, the listbox remains open', function () {
   getComponent();
@@ -173,7 +173,7 @@ test('after clicking an option, and then clicking the text input, the listbox re
   userEvent.click(input);
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
 });
-test('no chips are rendered, if nothing is selected', function () {
+test('no badges are rendered, if nothing is selected', function () {
   getComponent({
     isReadOnly: false
   });
@@ -222,11 +222,11 @@ test('clicking on delete button deletes selection, and re-adds option to list',
   var firstOption = options[0];
   firstOption.click();
   expect(firstOption).not.toBeInTheDocument();
-  var chip = screen.getByText(items[0].name);
-  expect(chip).toBeInTheDocument();
-  var deleteButton = chip.nextSibling;
+  var badge = screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  var deleteButton = badge.nextSibling;
   deleteButton.click();
-  expect(chip).not.toBeInTheDocument();
+  expect(badge).not.toBeInTheDocument();
   input.blur();
   input.focus();
   var updatedOptions = screen.getAllByRole('option');
@@ -269,7 +269,7 @@ test('changing the input value opens listbox, filters options, and fires "onInpu
   expect(onInputChange).toBeCalledTimes(value.length);
   expect(onInputChange).toHaveBeenCalledWith(value);
 });
-test('in non-restrictive mode, a chip gets added if there is input, onBlur', function () {
+test('in non-restrictive mode, a badge gets added if there is input, onBlur', function () {
   getComponent({
     mode: 'non-restrictive'
   });
@@ -277,13 +277,13 @@ test('in non-restrictive mode, a chip gets added if there is input, onBlur', fun
   var value = 'custom';
   userEvent.type(input, value);
   userEvent.tab();
-  var chip = screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
   expect(input.value).toBe('');
 });
-test('in non-restrictive mode, a chip gets added if there is only one matching filtered option, onBlur', function () {
+test('in non-restrictive mode, a badge gets added if there is only one matching filtered option, onBlur', function () {
   getComponent({
     mode: 'non-restrictive'
   });
@@ -295,10 +295,10 @@ test('in non-restrictive mode, a chip gets added if there is only one matching f
   var value = 'Aardvark';
   userEvent.type(input, value);
   userEvent.tab();
-  var chip = screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
   expect(firstOption).not.toBeInTheDocument();
 });
 test('dropdown with options reappears after entering a custom input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -351,10 +351,10 @@ test('changing the input value and hitting enter creates new value in non-restri
   expect(input).toHaveValue(value);
   userEvent.type(input, '{enter}');
   expect(input).toHaveValue('');
-  var chip = screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
 });
 test('pressing enter, when the input values is an empty string does not add an option, in non-restrictive mode', function () {
   var onSelectionChange = jest.fn();
@@ -378,8 +378,8 @@ test('in non-restrictive mode "onSelectionChange" returns entered keys', functio
   var value = 'custom';
   userEvent.type(input, value);
   userEvent.type(input, '{enter}');
-  var chip = screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
+  var badge = screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
   expect(onSelectionChange).toBeCalledTimes(1);
   expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
 });
@@ -393,8 +393,8 @@ test('in non-restrictive mode the same value cannot be applied twice', function
   var value = 'custom';
   userEvent.type(input, value);
   userEvent.type(input, '{enter}');
-  var chip = screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
+  var badge = screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
   expect(input).toHaveValue('');
   userEvent.type(input, value);
   userEvent.type(input, '{enter}');
@@ -452,10 +452,10 @@ test('options can be selected via keyboard', function () {
   expect(options[0]).toHaveClass('is-focused');
   userEvent.type(options[0], '{enter}');
   expect(options[0]).not.toBeInTheDocument();
-  var chip = screen.getByText(items[0].name);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
 });
 test('default selected keys', function () {
   getComponent({
@@ -533,10 +533,10 @@ test('read only field', function () {
   getComponent({
     isReadOnly: isReadOnly
   });
-  var chip = screen.queryAllByRole('presentation');
-  expect(chip[0]).toHaveAttribute('label', items[0].name);
-  expect(chip[1]).toHaveAttribute('label', items[1].name);
-  expect(chip[2]).toHaveAttribute('label', items[2].name);
+  var badge = screen.queryAllByRole('presentation');
+  expect(badge[0]).toHaveAttribute('label', items[0].name);
+  expect(badge[1]).toHaveAttribute('label', items[1].name);
+  expect(badge[2]).toHaveAttribute('label', items[2].name);
   var textArea = screen.getByLabelText(defaultProps.label);
   expect(textArea).toHaveClass('is-read-only');
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
@@ -547,9 +547,9 @@ test('read only keys with read only field', function () {
     isReadOnly: isReadOnly,
     readOnlyKeys: [items[1].key, items[2].key]
   });
-  var chip = screen.queryAllByRole('presentation');
-  expect(chip[0]).toHaveAttribute('label', items[1].name);
-  expect(chip[1]).toHaveAttribute('label', items[2].name);
+  var badge = screen.queryAllByRole('presentation');
+  expect(badge[0]).toHaveAttribute('label', items[1].name);
+  expect(badge[1]).toHaveAttribute('label', items[2].name);
   var textArea = screen.getByLabelText(defaultProps.label);
   expect(textArea).toHaveClass('is-read-only');
   expect(screen.queryByRole('option')).not.toBeInTheDocument();

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

@@ -6,9 +6,11 @@ import Earth from 'mdi-react/EarthIcon';
 import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
 import GlobeIcon from 'mdi-react/GlobeIcon';
+import OpenInNew from 'mdi-react/OpenInNewIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import ViewGridPlusOutline from 'mdi-react/ViewGridPlusOutlineIcon';
 import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -259,6 +261,13 @@ var data = [{
   }, "Sender")]
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: ViewGridPlusOutline,
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: OpenInNew,
+  href: 'https://pingidentity.com/'
+}, {
   'data-id': 'mfa-data-id',
   icon: Fingerprint,
   key: 'MFA',
@@ -333,7 +342,8 @@ var thirdData = [{
 }];
 export var Default = function Default() {
   return ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, ___EmotionJSX(Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -343,7 +353,8 @@ export var Default = function Default() {
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,

package/lib/components/NavBar/NavBar.test.js

@@ -7,10 +7,12 @@ import AccountMultiple from 'mdi-react/AccountMultipleIcon';
 import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
 import GlobeIcon from 'mdi-react/GlobeIcon';
+import OpenInNew from 'mdi-react/OpenInNewIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import Verify from 'mdi-react/VerifiedIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import ViewGridPlusOutline from 'mdi-react/ViewGridPlusOutlineIcon';
 import { Box, Button, Link, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
@@ -56,6 +58,13 @@ var data = [{
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: ViewGridPlusOutline,
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: OpenInNew,
+  href: 'https://pingidentity.com/'
+}, {
   icon: Fingerprint,
   key: 'MFA',
   heading: 'MFA',

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -10,6 +10,16 @@ import { useStatusClasses } from '../../hooks';
 import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var children = item.children,
+    href = item.href;
+  return !children && href ? ___EmotionJSX(NavBarPrimaryItemHeader, {
+    item: item
+  }) : ___EmotionJSX(NavBarSectionItemHeader, {
+    item: item
+  });
+};
+var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
   var _context;
   var item = props.item;
   var icon = item.icon,
@@ -45,7 +55,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     icon: icon,
     size: "sm",
     sx: {
-      mr: '10px',
+      mr: 'sm',
       color: color,
       fill: color
     },
@@ -68,13 +78,65 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
 };
+var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
+  var item = _ref.item;
+  var icon = item.icon,
+    className = item.className,
+    heading = item.heading,
+    customIcon = item.customIcon;
+  return ___EmotionJSX(Box, {
+    variant: "navBar.itemHeaderContainer",
+    className: className,
+    isRow: true,
+    "data-testid": heading
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    size: "sm",
+    sx: {
+      mr: 'sm',
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    },
+    "aria-hidden": "true"
+  }), ___EmotionJSX(Text, {
+    variant: "navBarHeaderText"
+  }, heading), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, customIcon && ___EmotionJSX(Icon, {
+    icon: customIcon,
+    size: "sm",
+    sx: {
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    }
+  })));
+};
 NavBarItemHeader.propTypes = {
+  item: PropTypes.shape({
+    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    href: PropTypes.string
+  })
+};
+NavBarSectionItemHeader.propTypes = {
   item: PropTypes.shape({
     heading: PropTypes.string,
     icon: PropTypes.elementType,
     className: PropTypes.string,
     children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
-    key: PropTypes.string
+    key: PropTypes.string,
+    href: PropTypes.string
+  })
+};
+NavBarPrimaryItemHeader.propTypes = {
+  item: PropTypes.shape({
+    heading: PropTypes.string,
+    icon: PropTypes.elementType,
+    className: PropTypes.string,
+    customIcon: PropTypes.elementType
   })
 };
 export default NavBarItemHeader;

package/lib/components/NavBarSection/NavBarSection.js

@@ -10,7 +10,7 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Button, Separator, Text } from '../..';
+import { Button, Link, Separator, Text } from '../..';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
@@ -28,7 +28,7 @@ var NavBarSection = function NavBarSection(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
   var childrenItems = _filterInstanceProperty(items).call(items, function (item) {
-    return item.children;
+    return item.children || item.href;
   });
   return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
     variant: "separator.navBarSeparator"
@@ -45,7 +45,10 @@ var NavBarSection = function NavBarSection(_ref) {
   }, others), _mapInstanceProperty(childrenItems).call(childrenItems, function (item) {
     return ___EmotionJSX("li", {
       key: item.key
-    }, ___EmotionJSX(SectionItem, {
+    }, !item.children && item.href ? ___EmotionJSX(PrimaryItem, {
+      key: item.key,
+      item: item
+    }) : ___EmotionJSX(SectionItem, {
       key: item.key,
       item: item
     }));
@@ -123,6 +126,16 @@ var SectionItem = function SectionItem(_ref2) {
     onKeyDown: _onKeyDown
   }));
 };
+var PrimaryItem = function PrimaryItem(_ref3) {
+  var item = _ref3.item;
+  return ___EmotionJSX(Link, {
+    variant: "buttons.navBarSectionButton",
+    href: item.href,
+    target: "_blank"
+  }, ___EmotionJSX(NavBarItemHeader, {
+    item: item
+  }));
+};
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
@@ -154,4 +167,9 @@ SectionItem.propTypes = {
   }),
   menuProps: PropTypes.shape({})
 };
+PrimaryItem.propTypes = {
+  item: PropTypes.shape({
+    href: PropTypes.string
+  })
+};
 export default NavBarSection;

package/lib/components/NumberField/NumberField.stories.js

@@ -11,10 +11,10 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
+import { NumberField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
-import NumberField from './NumberField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/NumberField',

package/lib/components/PasswordField/PasswordField.stories.js

@@ -13,10 +13,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
+import { PasswordField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
-import PasswordField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/PasswordField',

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -11,10 +11,9 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
+import { RadioField, RadioGroupField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import RadioField from '../RadioField';
-import RadioGroupField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/RadioGroupField',

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import RequirementsList from '.';
+import { RequirementsList } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/RequirementsList',

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -2,8 +2,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
-import RockerButton from '../RockerButton';
-import RockerButtonGroup from '.';
+import { RockerButton, RockerButtonGroup } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/RockerButtonGroup',

package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js

@@ -3,10 +3,9 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import { RockerButton, RockerButtonGroup } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { fireEvent, queryByAttribute, render, screen } from '../../utils/testUtils/testWrapper';
-import RockerButton from '../RockerButton';
-import RockerButtonGroup from './RockerButtonGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'testId';
 var testButtons = [{

package/lib/components/ScrollBox/ScrollBox.stories.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import Box from '../Box';
-import ScrollBox from './ScrollBox';
+import { Box, ScrollBox } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ScrollBox',

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

@@ -14,8 +14,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import Users from 'mdi-react/AccountGroupIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Box, SearchField, Text } from '../..';
 import { useDebounce } from '../../hooks';
+import { Box, SearchField, Text } from '../../index';
 import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/SelectField/SelectField.stories.js

@@ -29,7 +29,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import { OverlayProvider } from 'react-aria';
 import { useAsyncList } from 'react-stately';
-import { Item, Section, SelectField, Separator } from '../..';
+import { Item, Section, SelectField, Separator } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';

package/lib/components/Separator/Separator.stories.js

@@ -1,8 +1,7 @@
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import Box from '../Box/Box';
-import Separator from './Separator';
+import { Box, Separator } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Separator',

package/lib/components/SwitchField/SwitchField.js

@@ -67,9 +67,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     pressProps = _usePress.pressProps;
   var whitelistedProps = omit(props, _Object$keys(others));
-  var _useSwitch = useSwitch(_objectSpread({
+  var _useSwitch = useSwitch(_objectSpread(_objectSpread({
       children: label
-    }, whitelistedProps), state, switchRef),
+    }, whitelistedProps), {}, {
+      'aria-label': 'switch-field'
+    }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
     isSelected: inputProps.checked

package/lib/components/SwitchField/SwitchField.stories.js

@@ -12,11 +12,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
 import { Pressable } from '@react-aria/interactions';
-import { Tooltip, TooltipTrigger } from '../../index';
+import { SwitchField, Tooltip, TooltipTrigger } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
-import SwitchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SwitchField',

package/lib/components/Table/Table.stories.js

@@ -1,13 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
-import { Text } from '../../index';
-import TableBody from '../TableBody';
-import TableCaption from '../TableCaption';
-import TableCell from '../TableCell';
-import TableHead from '../TableHead';
-import TableRow from '../TableRow';
-import Table from './Table';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableRow, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Table',

package/lib/components/Tabs/Tabs.stories.js

@@ -4,11 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { useState } from 'react';
 import Earth from 'mdi-react/GlobeModelIcon';
 import LockIcon from 'mdi-react/LockIcon';
-import { Badge } from '../../index';
-import Icon from '../Icon';
-import Tab from '../Tab';
-import Text from '../Text';
-import Tabs from './Tabs';
+import { Badge, Icon, Tab, Tabs, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Tabs',

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

@@ -14,12 +14,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Box, Icon } from '../..';
+import { Box, Icon, TextAreaField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
-import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',

package/lib/components/TextField/TextField.stories.js

@@ -16,14 +16,13 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import { Box } from '../..';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import { Box, TextField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses.js';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import CopyButton from '../CopyText/CopyButton';
 import { modes as labelModes } from '../Label/constants';
-import TextField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',

package/lib/components/TimeZonePicker/TimeZonePicker.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TimeZonePicker from './TimeZonePicker';
+import { TimeZonePicker } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TimeZonePicker',

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import Earth from 'mdi-react/EarthIcon';
-import { Box, Button, Icon, Tooltip, TooltipTrigger } from '../../index';
-import IconButton from '../IconButton';
-import Text from '../Text';
+import { Box, Button, Icon, IconButton, Text, Tooltip, TooltipTrigger } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/TooltipTrigger',