@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,59 +1,34 @@
 "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.Default = void 0;
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("../../");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _ = require("../..");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 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; }
-
 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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Form/ColorField',
   component: _.ColorField,
@@ -64,7 +39,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -100,46 +75,29 @@ var _default = {
       }
     },
     containerProps: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: {
-        sx: {
-          marginLeft: 50
-        }
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
-
 var Default = function Default(args) {
   var _useState = (0, _react.useState)('rgba(127, 0, 127, 1)'),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      color = _useState2[0],
-      setColor = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
   var handleChange = (0, _react.useCallback)(function (_ref) {
     var _context, _context2, _context3;
-
     var rgb = _ref.rgb;
     var r = rgb.r,
-        b = rgb.b,
-        g = rgb.g,
-        a = rgb.a;
+      b = rgb.b,
+      g = rgb.g,
+      a = rgb.a;
     setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
   }, []);
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.ColorField, (0, _extends2["default"])({
       value: color
@@ -148,5 +106,4 @@ var Default = function Default(args) {
     })))
   );
 };
-
 exports.Default = Default;

package/lib/cjs/{styles/forms/comboBox.js → components/ColorField/ColorField.styles.js}

@@ -1,47 +1,31 @@
 "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["default"] = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _input = require("./input");
-
+var _colors = require("../../styles/colors");
+var _Buttons = require("../Button/Buttons.styles");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 container = {
-  position: 'relative'
+  border: "1px solid ".concat(_colors.neutral['80']),
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
 };
-
-var input = _objectSpread(_objectSpread({}, _input.input), {}, {
-  pr: 'xl'
-});
-
 var _default = {
-  container: container,
-  input: input
+  container: container
 };
 exports["default"] = _default;

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

@@ -1,21 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _testWrapper = require("../../utils/testUtils/testWrapper");
-
 var _ColorField = _interopRequireDefault(require("./ColorField"));
-
 var _react2 = require("@emotion/react");
-
 var testId = 'test-colorField';
 var testLabel = 'test-colorField-label';
 var hexLabel = 'hex';
@@ -26,28 +18,23 @@ var defaultProps = {
   label: testLabel,
   helperText: 'test-helper-text'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_ColorField["default"], (0, _extends2["default"])({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
 test('renders ColorField component', function () {
   getComponent();
-
   var container = _testWrapper.screen.getByLabelText(testLabel);
-
   expect(container).toBeInTheDocument();
 });
 test('button will have provided color background', function () {
   getComponent({
     value: testColor1
   });
-
   var button = _testWrapper.screen.getByRole('button');
-
   expect(button).toHaveStyle("background-color: ".concat(testColor1));
 });
 test('will call onChange with arguments if provided', function () {
@@ -56,36 +43,10 @@ test('will call onChange with arguments if provided', function () {
     onChange: testOnChange,
     value: testColor1
   });
-
   var button = _testWrapper.screen.getByRole('button');
-
   _userEvent["default"].click(button);
-
   var hexInput = _testWrapper.screen.getByLabelText(hexLabel);
-
   _userEvent["default"].clear(hexInput);
-
   _userEvent["default"].type(hexInput, testColor2);
-
   expect(testOnChange).toHaveBeenCalled();
-});
-test('clicking within the popover does not close it', function () {
-  var testOnChange = jest.fn();
-  getComponent({
-    onChange: testOnChange,
-    value: testColor1
-  });
-
-  var button = _testWrapper.screen.getByRole('button');
-
-  _userEvent["default"].click(button); // should be open now
-
-
-  var hexLabelElement = _testWrapper.screen.queryByText(hexLabel);
-
-  expect(hexLabelElement).toBeInTheDocument(); // click the popover container, which has caused closing in regressions
-
-  _userEvent["default"].click(_testWrapper.screen.queryByRole('presentation'));
-
-  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
 });

package/lib/cjs/components/ColorField/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 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
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _ColorField["default"];
   }
 });
-
 var _ColorField = _interopRequireDefault(require("./ColorField"));

package/lib/cjs/{styles/forms/radio.js → components/ComboBox/ComboBox.styles.js}

@@ -1,53 +1,44 @@
 "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.radioField = exports.radio = void 0;
-
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _buttons = require("../variants/buttons");
-
+var _Input = require("../Input/Input.styles");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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; }
-
-// Default radio
-var radio = {
-  width: 20,
-  height: 20,
-  color: 'active',
-  mr: 'xs',
-  // override the default focus styling
-  'input:focus ~ &': {
-    bg: 'transparent'
-  },
-  'input ~ &.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
+var container = {
+  position: 'relative'
+};
+var input = _objectSpread(_objectSpread({}, _Input.input), {}, {
+  pr: 'xl'
+});
+var inputInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  right: 'sm',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var button = {
+  bg: 'transparent',
+  color: 'black',
+  padding: 0
 };
-exports.radio = radio;
-var radioField = {
-  '.is-horizontal &': {
-    mr: '15px'
-  }
+var _default = {
+  container: container,
+  input: input,
+  inputInContainerSlot: inputInContainerSlot,
+  button: button
 };
-exports.radioField = radioField;
+exports["default"] = _default;

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -1,122 +1,85 @@
 "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"] = void 0;
-
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _focus = require("@react-aria/focus");
-
+var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-
-var _utils = require("@react-aria/utils");
-
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
-
-var _ = require("../../");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ = require("../..");
 var _hooks = require("../../hooks");
-
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _react2 = require("@emotion/react");
-
 var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "isDisabled", "isReadOnly", "isOpen", "loadingState", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
-
 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 _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 ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var controlProps = props.controlProps,
-      containerProps = props.containerProps,
-      hasAutoFocus = props.hasAutoFocus,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
-      isOpen = props.isOpen,
-      loadingState = props.loadingState,
-      style = props.style,
-      inputWrapperRef = props.inputWrapperRef,
-      inputRef = props.inputRef,
-      inputProps = props.inputProps,
-      triggerRef = props.triggerRef,
-      triggerProps = props.triggerProps,
-      menuTrigger = props.menuTrigger,
-      onInputChange = props.onInputChange,
-      onLoadMore = props.onLoadMore,
-      onOpenChange = props.onOpenChange,
-      onSelectionChange = props.onSelectionChange,
-      wrapperProps = props.wrapperProps,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
+    containerProps = props.containerProps,
+    hasAutoFocus = props.hasAutoFocus,
+    isDisabled = props.isDisabled,
+    isReadOnly = props.isReadOnly,
+    isOpen = props.isOpen,
+    loadingState = props.loadingState,
+    style = props.style,
+    inputWrapperRef = props.inputWrapperRef,
+    inputRef = props.inputRef,
+    inputProps = props.inputProps,
+    triggerRef = props.triggerRef,
+    triggerProps = props.triggerProps,
+    menuTrigger = props.menuTrigger,
+    onInputChange = props.onInputChange,
+    onLoadMore = props.onLoadMore,
+    onOpenChange = props.onOpenChange,
+    onSelectionChange = props.onSelectionChange,
+    wrapperProps = props.wrapperProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: containerProps
-  }, (0, _utils.mergeProps)(inputProps, others)); // istanbul ignore next
-
+    containerProps: _objectSpread(_objectSpread({
+      sx: style,
+      variant: 'forms.comboBox.container'
+    }, hoverProps), containerProps)
+  }, (0, _reactAria.mergeProps)(inputProps, others));
 
+  // istanbul ignore next
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
 
-  var _useHover = (0, _interactions.useHover)({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered; // START - minimum delay time for loading indicator = 500ms
-
-
+  // START - minimum delay time for loading indicator = 500ms
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      showLoading = _useState2[0],
-      setShowLoading = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
   var isLoading = loadingState === _loadingStates["default"].LOADING || loadingState === _loadingStates["default"].FILTERING;
   var inputValue = inputProps.value;
   var lastInputValue = (0, _react.useRef)(inputValue);
@@ -127,9 +90,9 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         timeout.current = (0, _setTimeout2["default"])(function () {
           setShowLoading(true);
         }, 500);
-      } // If user is typing, clear the timer and restart since it is a new request
-
+      }
 
+      // If user is typing, clear the timer and restart since it is a new request
       if (inputValue !== lastInputValue.current) {
         clearTimeout(timeout.current);
         timeout.current = (0, _setTimeout2["default"])(function () {
@@ -142,22 +105,23 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       clearTimeout(timeout.current);
       timeout.current = null;
     }
-
     lastInputValue.current = inputValue;
-  }, [isLoading, showLoading, inputValue]); // END - minimum delay time for loading indicator = 500ms
+  }, [isLoading, showLoading, inputValue]);
+  // END - minimum delay time for loading indicator = 500ms
 
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var button = !isReadOnly && (0, _react2.jsx)(_.Box, {
     isRow: true,
-    variant: "boxes.inputInContainerSlot"
-  }, // Render loader after delay if filtering or loading
+    variant: "forms.comboBox.inputInContainerSlot"
+  },
+  // Render loader after delay if filtering or loading
   showLoading && (isOpen || menuTrigger === 'manual' || loadingState === _loadingStates["default"].LOADING) && (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinInput"
   }), (0, _react2.jsx)(_interactions.PressResponder, {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    variant: "comboBox"
+    variant: "forms.comboBox.button"
   }, triggerProps, {
     ref: triggerRef,
     isDisabled: isDisabled || isReadOnly,
@@ -168,20 +132,16 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null
   }))));
-  return (0, _react2.jsx)(_focus.FocusRing, {
+  return (0, _react2.jsx)(_reactAria.FocusRing, {
     within: true,
     isTextInput: true,
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    isRow: true,
-    style: style,
-    variant: "forms.comboBox.container"
-  }, hoverProps, wrapperProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
-    wrapperProps: {
+  }, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
+    wrapperProps: _objectSpread({
       ref: inputWrapperRef
-    },
+    }, wrapperProps),
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -192,7 +152,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     slots: {
       inContainer: button
     }
-  }))));
+  })));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: _propTypes["default"].shape({}),

package/lib/cjs/components/ComboBox/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 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
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _ComboBoxInput["default"];
   }
 });
-
 var _ComboBoxInput = _interopRequireDefault(require("./ComboBoxInput"));