@pingux/astro 2.6.1-alpha.2 → 2.7.0-alpha.0

package/lib/cjs/components/Menu/menuAttributes.js

@@ -0,0 +1,104 @@
+"use strict";
+
+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$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");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuPropTypes = exports.menuArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _docArgTypes = require("../../utils/docUtils/docArgTypes");
+var _hoverProps = require("../../utils/docUtils/hoverProps");
+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 descriptions = {
+  selectionMode: 'The type of selection that is allowed.',
+  disabledKeys: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.',
+  defaultSelectedKeys: "\n  The initial selected keys in the collection (uncontrolled).\n  `defaultSelectedKeys=\"all\"` can be used to select every key.\n  ",
+  selectedKeys: "\n  The currently selected keys in the collection (controlled).\n  `selectedKeys=\"all\"` can be used to select every key.\n  ",
+  isDisabled: 'Whether the item is disabled. ',
+  isSelected: 'Whether the menu item is selected.',
+  isNotFocusedOnHover: 'Whether menu item should receive focus state on hover.',
+  onAction: 'Handler that is called when an item is selected. `(key: Key) => void`',
+  onSelectionChange: "Handler that is called when the selection changes. Does not fire when `selectionMode=\"none\"`.\n  `(keys: Selection) => any`\n  "
+};
+var menuArgTypes = _objectSpread(_objectSpread({
+  onAction: _objectSpread({
+    description: descriptions.onAction
+  }, _docArgTypes.funcArg),
+  onSelectionChange: _objectSpread({
+    description: descriptions.onSelectionChange
+  }, _docArgTypes.funcArg),
+  selectionMode: {
+    description: descriptions.selectionMode,
+    control: {
+      type: 'radio',
+      options: ['none', 'single', 'multiple'],
+      defaultValue: 'none'
+    },
+    type: {
+      summary: 'none, single, multiple'
+    }
+  },
+  isDisabled: _objectSpread({
+    description: descriptions.isDisabled
+  }, _docArgTypes.booleanArg),
+  isNotFocusedOnHover: _objectSpread({
+    description: descriptions.isNotFocusedOnHover
+  }, _docArgTypes.booleanArg),
+  isSelected: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    control: {
+      type: 'none'
+    },
+    description: descriptions.isSelected
+  }),
+  disabledKeys: {
+    control: {
+      type: 'none'
+    },
+    description: descriptions.disabledKeys,
+    type: {
+      summary: _docArgTypes.stringOrStringArray
+    }
+  },
+  defaultSelectedKeys: {
+    control: {
+      type: 'none'
+    },
+    description: descriptions.defaultSelectedKeys,
+    type: {
+      summary: _docArgTypes.stringOrStringArray
+    }
+  },
+  selectedKeys: {
+    control: {
+      type: 'none'
+    },
+    type: {
+      summary: _docArgTypes.stringOrStringArray
+    },
+    description: descriptions.selectedKeys
+  }
+}, _ariaAttributes.ariaAttributeBaseArgTypes), _hoverProps.onHoverArgTypes);
+exports.menuArgTypes = menuArgTypes;
+var menuPropTypes = _objectSpread(_objectSpread({
+  selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
+  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+  defaultSelectedKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  selectedKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  isDisabled: _propTypes["default"].bool,
+  isSelected: _propTypes["default"].bool,
+  isNotFocusedOnHover: _propTypes["default"].bool,
+  onAction: _propTypes["default"].func,
+  onSelectionChange: _propTypes["default"].func
+}, _ariaAttributes.ariaAttributesBasePropTypes), _hoverProps.onHoverPropTypes);
+exports.menuPropTypes = menuPropTypes;

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -24,12 +24,10 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
+var _switchFieldAttributes = require("./switchFieldAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
 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); }
@@ -45,10 +43,14 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value = props.value,
     name = props.name,
     id = props.id,
-    isDisabled = props.isDisabled,
-    isReadOnly = props.isReadOnly,
-    isRequired = props.isRequired,
-    hasAutoFocus = props.hasAutoFocus,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$hasAutoFocus = props.hasAutoFocus,
+    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onFocusChange = props.onFocusChange,
@@ -98,56 +100,12 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, unhandledAriaProps, others))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** A list of class names to apply to the input element. */
-  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes["default"].string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Whether the element should be selected (uncontrolled). */
-  isDefaultSelected: _propTypes["default"].bool,
-  /** Whether the field is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the input can be selected, but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /** Whether the element should be selected (controlled). */
-  isSelected: _propTypes["default"].bool,
-  /** The rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
-  name: _propTypes["default"].string,
-  /** Handler that is called when the element loses focus. */
-  onBlur: _propTypes["default"].func,
-  /** Handler that is called when the element's selection state changes. */
-  onChange: _propTypes["default"].func,
-  /** Handler that is called when the element receives focus. */
-  onFocus: _propTypes["default"].func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: _propTypes["default"].func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: _propTypes["default"].func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].func,
-  /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
-  value: _propTypes["default"].string
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-SwitchField.defaultProps = _objectSpread({
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false,
-  hasAutoFocus: false
-}, _statusProp.statusDefaultProp);
+SwitchField.propTypes = _switchFieldAttributes.switchFieldPropTypes;
+SwitchField.defaultProps = _objectSpread({}, _statusProp.statusDefaultProp);
 SwitchField.displayName = 'SwitchField';
 var _default = SwitchField;
 exports["default"] = _default;

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

@@ -25,6 +25,7 @@ var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SwitchField = _interopRequireDefault(require("./SwitchField.mdx"));
+var _switchFieldAttributes = require("./switchFieldAttributes");
 var _react2 = require("@emotion/react");
 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; }
@@ -43,40 +44,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
-    label: {
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Example Label'
-    },
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    },
-    hintText: {
-      control: {
-        type: 'text'
-      }
-    },
-    value: {
-      defaultValue: 'my-switch'
-    },
-    name: {},
-    className: {},
-    isDisabled: {},
-    isRequired: {},
-    isReadOnly: {},
-    isDefaultSelected: {},
-    hasAutoFocus: {},
-    id: {},
-    isSelected: {
-      control: {
-        type: 'none'
-      }
-    }
-  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  argTypes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _switchFieldAttributes.switchFieldArgTypes), _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {

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

@@ -8,10 +8,9 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _SwitchField = _interopRequireDefault(require("./SwitchField"));
 var _react2 = require("@emotion/react");
-var testId = 'test-switch';
+var TEST_LABEL = 'test label';
 var defaultProps = {
-  label: 'Example label',
-  'data-testid': testId
+  label: TEST_LABEL
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -24,9 +23,9 @@ test('renders Switch component', function () {
   getComponent({
     'aria-label': 'test'
   });
-  var switchComponent = _testWrapper.screen.getByTestId(testId);
+  var switchComponent = _testWrapper.screen.getByText(TEST_LABEL);
   _testWrapper.screen.getByRole('switch');
-  expect(switchComponent).toBeInstanceOf(HTMLDivElement);
+  expect(switchComponent).toBeInstanceOf(HTMLLabelElement);
   expect(switchComponent).toBeInTheDocument();
 });
 test('renders label', function () {

package/lib/cjs/components/SwitchField/switchFieldAttributes.js

@@ -0,0 +1,191 @@
+"use strict";
+
+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$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");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.switchFieldPropTypes = exports.switchFieldArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _docArgTypes = require("../../utils/docUtils/docArgTypes");
+var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
+var _statusProp = require("../../utils/docUtils/statusProp");
+var _context;
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var descriptions = {
+  className: 'A list of class names to apply to the input element.',
+  hasAutoFocus: 'Whether the element should receive focus on render.',
+  helperText: 'Text rendered below the input.',
+  hintText: 'If present this prop will cause a help hint to render in the label of the field.',
+  id: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
+  isDefaultSelected: 'Whether the element should be selected (uncontrolled).',
+  isDisabled: 'Whether the field is disabled.',
+  isReadOnly: 'Whether the input can be selected, but not changed by the user.',
+  isRequired: 'Whether user input is required on the input before form submission.',
+  isSelected: 'Whether the element should be selected (controlled).',
+  label: 'The rendered label for the field.',
+  name: 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).',
+  onBlur: 'Handler that is called when the element loses focus.',
+  onChange: "Handler that is called when the element's selection state changes.",
+  onFocus: 'Handler that is called when the element receives focus.',
+  onFocusChange: "Handler that is called when the element's focus status changes.",
+  onKeyDown: 'Handler that is called when a key is pressed.',
+  onKeyUp: 'Handler that is called when a key is released.',
+  status: 'Determines the textarea status indicator and helper text styling.',
+  value: 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).'
+};
+var string = _docArgTypes.docArgTypes.string,
+  stringArray = _docArgTypes.docArgTypes.stringArray,
+  text = _docArgTypes.docArgTypes.text,
+  node = _docArgTypes.docArgTypes.node;
+var switchFieldArgTypes = {
+  className: {
+    type: {
+      summary: (0, _concat["default"])(_context = "".concat(string, " | ")).call(_context, stringArray)
+    },
+    description: descriptions.className
+  },
+  hasAutoFocus: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.hasAutoFocus
+  }),
+  helperText: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: node
+    },
+    description: descriptions.helperText
+  },
+  hintText: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.hintText
+  },
+  id: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.id
+  },
+  isDefaultSelected: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isDefaultSelected
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isDisabled
+  }),
+  isReadOnly: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isReadOnly
+  }),
+  isRequired: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isRequired
+  }),
+  isSelected: {
+    control: {
+      type: 'none'
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.isSelected
+  },
+  label: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    defaultValue: 'Example Label',
+    description: descriptions.label
+  },
+  name: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.name
+  },
+  onBlur: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onBlur
+  }),
+  onChange: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onChange
+  }),
+  onFocus: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onFocus
+  }),
+  onFocusChange: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onFocusChange
+  }),
+  onKeyDown: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onKeyDown
+  }),
+  onKeyUp: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onKeyUp
+  }),
+  value: {
+    defaultValue: 'my-switch',
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.value
+  },
+  status: {
+    control: {
+      type: 'select',
+      options: _statuses["default"]
+    },
+    defaultValue: _statuses["default"].DEFAULT,
+    description: descriptions.status
+  }
+};
+exports.switchFieldArgTypes = switchFieldArgTypes;
+var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
+  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  hasAutoFocus: _propTypes["default"].bool,
+  helperText: _propTypes["default"].node,
+  hintText: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  isDefaultSelected: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  isSelected: _propTypes["default"].bool,
+  label: _propTypes["default"].node,
+  name: _propTypes["default"].string,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onFocusChange: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  onKeyUp: _propTypes["default"].func,
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+  value: _propTypes["default"].string
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _statusProp.statusPropTypes);
+exports.switchFieldPropTypes = switchFieldPropTypes;

package/lib/cjs/experimental/StyledListItem/StyledListItem.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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$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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LIST_ITEM_ICON = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _interactions = require("@react-aria/interactions");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _styledListItemAttributes = require("./styledListItemAttributes");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "details", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+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; }
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var sx = {
+  container: {
+    m: 1,
+    minHeight: 72,
+    '&.is-hovered': {
+      bg: 'white',
+      cursor: 'pointer'
+    }
+  },
+  controls: {
+    alignSelf: 'center',
+    ml: 'auto',
+    pr: 'sm'
+  },
+  details: {
+    alignItems: 'center'
+  },
+  icon: {
+    width: 25,
+    color: 'accent.40'
+  },
+  rightOfDetails: {
+    alignSelf: 'center',
+    ml: 'sm'
+  },
+  subtitle: {
+    alignSelf: 'start',
+    fontSize: 'sm',
+    lineHeight: '16px',
+    my: '1px'
+  },
+  text: {
+    ml: 'md'
+  },
+  title: {
+    alignSelf: 'start',
+    fontSize: 'md'
+  },
+  wrapper: {
+    cursor: 'pointer',
+    display: 'flex',
+    flex: '1 1 0px',
+    ml: 'md'
+  }
+};
+var LIST_ITEM_ICON = '-list-item-icon';
+exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
+var StyledListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _context, _context2;
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$details = _ref.details,
+    details = _ref$details === void 0 ? {} : _ref$details,
+    isHovered = _ref.isHovered,
+    isSelected = _ref.isSelected,
+    linkProps = _ref.linkProps,
+    onHoverChange = _ref.onHoverChange,
+    onHoverEnd = _ref.onHoverEnd,
+    onHoverStart = _ref.onHoverStart,
+    slots = _ref.slots,
+    others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var icon = details.icon,
+    subtext = details.subtext,
+    text = details.text;
+  var shouldUseDefaultHover = isHovered === undefined;
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps,
+    defaultIsHovered = _useHover.isHovered;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isHovered: shouldUseDefaultHover ? defaultIsHovered : isHovered,
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
+  var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfDetails ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
+    ml: 0
+  }) : sx.wrapper;
+  var textStyles = slots !== null && slots !== void 0 && slots.leftOfDetails ? _objectSpread(_objectSpread({}, sx.text), {}, {
+    ml: 0
+  }) : sx.text;
+  var renderIcon = (0, _react2.jsx)(_index.Box, {
+    sx: sx.icon
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: "md",
+    title: {
+      id: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON),
+      name: (0, _concat["default"])(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
+    }
+  }));
+  var renderDetails = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.details
+  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfDetails) || renderIcon, (0, _react2.jsx)(_index.Box, {
+    sx: textStyles
+  }, text && (0, _react2.jsx)(_index.Text, {
+    variant: "bodyStrong",
+    sx: sx.title
+  }, text), subtext && (0, _react2.jsx)(_index.Text, {
+    variant: "subtitle",
+    sx: sx.subtitle
+  }, subtext)));
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    className: classNames,
+    ref: ref,
+    sx: sx.container
+  }, hoverProps, others), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: wrapperStyles
+  }, renderDetails, (slots === null || slots === void 0 ? void 0 : slots.rightOfDetails) && (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center",
+    ml: "md"
+  }, slots.rightOfDetails), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center",
+    sx: sx.controls
+  }, children)));
+});
+StyledListItem.propTypes = _styledListItemAttributes.styledListItemPropTypes;
+StyledListItem.displayName = 'StyledListItem';
+var _default = StyledListItem;
+exports["default"] = _default;