@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.2

package/lib/components/SearchField/SearchField.js

@@ -1,87 +1,27 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["hasNoClearButton", "mode", "icon"];
 import React, { forwardRef } from 'react';
-import { useSearchField } from 'react-aria';
-import { useSearchFieldState } from 'react-stately';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import { Box, Icon, IconButton, Input, Label } from '../..';
-import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
-import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import { SearchAutoComplete } from './SearchAutoComplete';
+import { SearchFieldBase } from './SearchFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'SearchField';
 var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var autocomplete = props.autocomplete,
-    hasAutoFocus = props.hasAutoFocus,
-    hasNoClearButton = props.hasNoClearButton,
-    icon = props.icon,
-    isExcludedFromTabOrder = props.isExcludedFromTabOrder,
-    label = props.label,
-    controlProps = props.controlProps,
-    iconProps = props.iconProps,
-    labelProps = props.labelProps;
-  usePropWarning(props, 'disabled', 'isDisabled');
-  var searchRef = useLocalOrForwardRef(ref);
-  var state = useSearchFieldState(props);
-  var _useSearchField = useSearchField(_objectSpread({
-      autoComplete: autocomplete,
-      autoFocus: hasAutoFocus,
-      excludeFromTabOrder: isExcludedFromTabOrder
-    }, props), state, searchRef),
-    raLabelProps = _useSearchField.labelProps,
-    raInputProps = _useSearchField.inputProps,
-    clearButtonProps = _useSearchField.clearButtonProps;
-  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
-      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
-      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
-    })),
-    fieldContainerProps = _useField.fieldContainerProps,
-    fieldControlInputProps = _useField.fieldControlInputProps,
-    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
-    fieldLabelProps = _useField.fieldLabelProps;
-  var handleKeyDownEvent = function handleKeyDownEvent(e) {
-    var key = e.key;
-    if (key === 'Enter' || key === ' ') {
-      state.setValue('');
-    }
-  };
-  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
-    variant: "forms.search.wrapper"
-  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
-    variant: "forms.input.search",
-    ref: searchRef
-  }, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
-    icon: icon,
-    variant: "forms.search.icon",
-    size: 20,
-    title: {
-      name: 'Search Icon'
-    }
-  }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
-    tabIndex: 0,
-    onKeyDown: handleKeyDownEvent,
-    color: "text.secondary",
-    variant: "searchClearButton"
-  }, clearButtonProps), ___EmotionJSX(Icon, {
-    icon: CloseIcon,
-    title: {
-      name: 'Close Icon'
-    }
-  }))));
+  var _props$hasNoClearButt = props.hasNoClearButton,
+    hasNoClearButton = _props$hasNoClearButt === void 0 ? false : _props$hasNoClearButt,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'default' : _props$mode,
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? SearchIcon : _props$icon,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Component = mode === 'autocomplete' ? SearchAutoComplete : SearchFieldBase;
+  return ___EmotionJSX(Component, _extends({
+    hasNoClearButton: hasNoClearButton,
+    icon: icon
+  }, rest, {
+    ref: ref
+  }));
 });
-SearchField.defaultProps = {
-  hasNoClearButton: false,
-  icon: SearchIcon
-};
 SearchField.displayName = displayName;
 export default SearchField;

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

@@ -18,7 +18,7 @@ import FilterVariantIcon from '@pingux/mdi-react/FilterVariantIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useDebounce, useGetTheme } from '../../hooks';
-import { Box, Icon, IconButton, SearchField, Text } from '../../index';
+import { Box, Icon, IconButton, Item, SearchField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
@@ -73,10 +73,9 @@ export var Default = function Default(args) {
     icon: SearchIcon,
     onSubmit: function onSubmit(text) {
       return alert(text);
-    } // eslint-disable-line no-alert
+    }
   }));
 };
-
 Default.parameters = {
   design: {
     type: 'figma',
@@ -166,4 +165,43 @@ export var WithFilter = function WithFilter() {
       name: 'Filter Icon'
     }
   })));
+};
+export var ControlledWithPopover = function ControlledWithPopover() {
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    value = _useState6[0],
+    setValue = _useState6[1];
+  var items = [{
+    id: 'apple',
+    name: 'Apple'
+  }, {
+    id: 'banana',
+    name: 'Banana'
+  }, {
+    id: 'blueberry',
+    name: 'Blueberry'
+  }];
+  return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
+    mode: "autocomplete",
+    defaultItems: items,
+    value: value,
+    onChange: function onChange(val) {
+      setValue(val);
+    },
+    "aria-label": "Search Groups",
+    placeholder: "Search",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    },
+    onClear: function onClear() {
+      setValue('');
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id,
+      textValue: item.name
+    }, item.name);
+  }), ___EmotionJSX(Text, {
+    mt: "xs"
+  }, "value: ".concat(value)));
 };

package/lib/components/SearchField/SearchField.test.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -7,6 +8,7 @@ import { universalFieldComponentTests } from '../../utils/testUtils/universalFor
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
+var testValue = 'Option';
 var testLabel = 'Test Label';
 var defaultProps = {
   'data-testid': testId,
@@ -16,6 +18,16 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(SearchField, _extends({}, defaultProps, props)));
 };
+var getAutocompleteComponent = function getAutocompleteComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SearchField, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "1"
+  }, "Option 1"), ___EmotionJSX(Item, {
+    key: "2"
+  }, "Option 2"), ___EmotionJSX(Item, {
+    key: "3"
+  }, "Option 3")));
+};
 universalFieldComponentTests({
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(SearchField, _extends({}, defaultProps, props));
@@ -216,4 +228,124 @@ test('clear button should not be present is hasNoClearButton=true ', function ()
     hasNoClearButton: true
   });
   expect(screen.queryByRole('button')).not.toBeInTheDocument();
+});
+describe('Autocomplete mode', function () {
+  beforeAll(function () {
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+      return 1024;
+    });
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+      cb(0);
+      return 0;
+    });
+    jest.useFakeTimers();
+  });
+  afterEach(function () {
+    jest.clearAllMocks();
+  });
+  test('default autocomplete search field', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    var label = screen.getByText(testLabel);
+    expect(search).toBeInstanceOf(HTMLInputElement);
+    expect(label).toBeInstanceOf(HTMLLabelElement);
+    expect(search).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  test('autocomplete options appear on user input', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var control = screen.getByLabelText(testLabel);
+    userEvent.type(control, testValue);
+    expect(control).toHaveValue(testValue);
+    expect(screen.queryByText('Option 1')).toBeInTheDocument();
+    expect(screen.queryByText('Option 2')).toBeInTheDocument();
+    expect(screen.queryByText('Option 3')).toBeInTheDocument();
+    fireEvent.change(control, {
+      target: {
+        value: '3'
+      }
+    });
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Option 3')).toBeInTheDocument();
+  });
+  test('Allow custom values', function () {
+    var onSubmit = jest.fn();
+    getAutocompleteComponent({
+      mode: 'autocomplete',
+      onSubmit: onSubmit
+    });
+    var control = screen.getByLabelText(testLabel);
+    userEvent.type(control, 'Custom Value{enter}');
+    expect(onSubmit).toHaveBeenCalledWith('Custom Value');
+  });
+  test('clear button works in autocomplete mode', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    userEvent.type(search, 'clear');
+    expect(search).toHaveValue('clear');
+    var clearButton = screen.getByRole('button');
+    expect(clearButton).toHaveAttribute('tabindex', '0');
+    act(function () {
+      clearButton.focus();
+    });
+    expect(clearButton).toHaveFocus();
+    fireEvent.keyDown(clearButton, {
+      key: 'Enter'
+    });
+    fireEvent.keyUp(clearButton, {
+      key: 'Enter'
+    });
+    expect(search).toHaveValue('');
+  });
+  test('Down arrow key open listbox popup', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    act(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    fireEvent.keyDown(search, {
+      key: 'ArrowDown'
+    });
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+  test("No popup when there aren't any options", function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = screen.getByLabelText(testLabel);
+    act(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    userEvent.type(search, 'xyz');
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(search).toHaveValue('xyz');
+  });
 });

package/lib/components/SearchField/SearchFieldBase.js

@@ -0,0 +1,79 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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, { forwardRef } from 'react';
+import { useSearchField } from 'react-aria';
+import { useSearchFieldState } from 'react-stately';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { Box, Icon, IconButton, Input, Label } from '../..';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SearchField';
+export var SearchFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
+  var autocomplete = props.autocomplete,
+    hasAutoFocus = props.hasAutoFocus,
+    hasNoClearButton = props.hasNoClearButton,
+    icon = props.icon,
+    isExcludedFromTabOrder = props.isExcludedFromTabOrder,
+    label = props.label,
+    controlProps = props.controlProps,
+    iconProps = props.iconProps,
+    labelProps = props.labelProps;
+  usePropWarning(props, 'disabled', 'isDisabled');
+  var searchRef = useLocalOrForwardRef(ref);
+  var state = useSearchFieldState(props);
+  var _useSearchField = useSearchField(_objectSpread({
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, props), state, searchRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
+  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.search.wrapper"
+  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
+    variant: "forms.input.search",
+    ref: searchRef
+  }, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    variant: "forms.search.icon",
+    title: {
+      name: 'Search Icon'
+    }
+  }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
+    color: "text.secondary",
+    variant: "searchClearButton"
+  }, clearButtonProps), ___EmotionJSX(Icon, {
+    icon: CloseIcon,
+    title: {
+      name: 'Close Icon'
+    }
+  }))));
+});

package/lib/components/Stepper/Step.js

@@ -26,7 +26,7 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className
   }), status === COMPLETED && !isHovered ? ___EmotionJSX(Icon, {
     icon: CheckBoldIcon,
-    size: 23,
+    size: "sm",
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'

package/lib/components/Stepper/Stepper.styles.js

@@ -84,6 +84,7 @@ var stepBase = {
   fontSize: '17px',
   fontWeight: 3,
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&[aria-expanded="true"]': {
     backgroundColor: 'active',
     borderColor: 'active',

package/lib/components/Switch/Switch.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from 'react-aria';
 import PropTypes from 'prop-types';
+import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 
 /**
@@ -13,21 +14,30 @@ import Box from '../Box';
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
-  var inputProps = props.inputProps;
+  var inputProps = props.inputProps,
+    isSelected = props.isSelected;
+  var _useStatusClasses = useStatusClasses('', {
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
+    className: classNames,
     variant: "forms.switch.container"
   }, props), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Box, _extends({
     as: "input"
   }, inputProps, {
     ref: ref
   }))), ___EmotionJSX(Box, {
+    className: classNames,
     variant: "forms.switch.thumbContainer"
   }, ___EmotionJSX(Box, {
+    className: classNames,
     variant: "forms.switch.thumb"
   })));
 });
 Switch.propTypes = {
-  inputProps: PropTypes.shape({})
+  inputProps: PropTypes.shape({}),
+  isSelected: PropTypes.bool
 };
 Switch.displayName = 'Switch';
 export default Switch;

package/lib/components/Switch/Switch.styles.js

@@ -48,7 +48,7 @@ export var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  'label.is-selected &': {
+  '&.is-selected': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/components/SwitchField/SwitchField.js

@@ -49,8 +49,9 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
       'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
+  var isSelected = (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false;
   var statusClasses = {
-    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
+    isSelected: isSelected
   };
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -65,7 +66,10 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps, {
+    alignSelf: "top",
+    alignItems: "start"
+  }), ___EmotionJSX(Label, _extends({
     variant: "forms.switch.label"
   }, fieldLabelProps), ___EmotionJSX(Box, _extends({}, fieldControlWrapperProps, {
     sx: _objectSpread(_objectSpread({}, fieldControlWrapperProps.sx), {}, {
@@ -73,6 +77,7 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     })
   }), ___EmotionJSX(Switch, _extends({
     ref: switchRef,
+    isSelected: isSelected,
     inputProps: fieldControlInputProps,
     name: name
   }, unhandledAriaProps, omit(others, 'data-pendo-id', 'aria-label')))), label), helperText && ___EmotionJSX(FieldHelperText, {

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

@@ -45,13 +45,25 @@ export default {
   }
 };
 var tabs = [{
-  name: 'Tab 1',
-  children: ___EmotionJSX(Text, null, "Tab 1 body")
+  name: 'Overview',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 2',
-  children: ___EmotionJSX(Text, null, "Tab 2 body")
+  name: 'Configuration',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Resources',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Policies',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Attribute Mappings',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Access',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 3',
+  name: 'Integration',
   children: ___EmotionJSX(Text, null, "Tab 3 body")
 }];
 var customTabs = [{
@@ -81,7 +93,11 @@ export var Controlled = function Controlled() {
     _useState2 = _slicedToArray(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  return ___EmotionJSX(Tabs, {
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, ___EmotionJSX(Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     items: tabs
@@ -91,7 +107,7 @@ export var Controlled = function Controlled() {
       title: item.name,
       textValue: item.name
     }, item.children);
-  });
+  }));
 };
 export var Centered = function Centered() {
   return ___EmotionJSX(Tabs, {