@automattic/vip-design-system 0.23.7 → 0.25.0

package/build/system/Accordion/Accordion.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TriggerWithIcon = exports.Trigger = exports.Root = exports.Item = exports.Content = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _md = require("react-icons/md");
+
+var AccordionPrimitive = _interopRequireWildcard(require("@radix-ui/react-accordion"));
+
+var _react2 = require("@emotion/react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Heading = require("../Heading");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["children"],
+    _excluded2 = ["children", "headingVariant"],
+    _excluded3 = ["children", "icon"],
+    _excluded4 = ["children", "sx"];
+
+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; }
+
+var slideDown = (0, _react2.keyframes)({
+  from: {
+    height: 0
+  },
+  to: {
+    height: 'var(--radix-accordion-content-height)'
+  }
+});
+var slideUp = (0, _react2.keyframes)({
+  from: {
+    height: 'var(--radix-accordion-content-height)'
+  },
+  to: {
+    height: 0
+  }
+});
+
+var Item = function Item(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Item, (0, _extends2["default"])({}, props, {
+    sx: {
+      overflow: 'hidden',
+      borderWidth: '0 1px 1px 1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      '&:first-of-type': {
+        borderTopWidth: '1px',
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4
+      },
+      '&:focus-within': function focusWithin(theme) {
+        return theme.outline;
+      }
+    },
+    children: children
+  }));
+};
+
+exports.Item = Item;
+Item.displayName = 'Accordion.Item';
+Item.propTypes = {
+  children: _propTypes["default"].node.isRequired
+};
+
+var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardedRef) {
+  var children = _ref2.children,
+      _ref2$headingVariant = _ref2.headingVariant,
+      headingVariant = _ref2$headingVariant === void 0 ? 'h3' : _ref2$headingVariant,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+  return (0, _jsxRuntime.jsx)(_Heading.Heading, {
+    sx: {
+      all: 'unset',
+      display: 'flex'
+    },
+    variant: headingVariant,
+    children: (0, _jsxRuntime.jsxs)(AccordionPrimitive.Trigger, (0, _extends2["default"])({
+      sx: {
+        color: 'heading',
+        cursor: 'pointer',
+        all: 'unset',
+        fontFamily: 'inherit',
+        px: 3,
+        height: 45,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: 1,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        '&[data-state="closed"]': {
+          backgroundColor: 'transparent'
+        },
+        '&[data-state="open"]': {
+          backgroundColor: 'backgroundSecondary',
+          borderBottom: function borderBottom(theme) {
+            return "1px solid " + theme.colors.border;
+          }
+        },
+        '&:hover': {
+          backgroundColor: 'backgroundSecondary'
+        }
+      }
+    }, props, {
+      ref: forwardedRef,
+      children: [children, (0, _jsxRuntime.jsx)(_md.MdChevronRight, {
+        sx: {
+          fontSize: 3,
+          color: 'text',
+          transform: 'rotate(90deg)',
+          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          '[data-state=open] &': {
+            transform: 'rotate(270deg)'
+          }
+        },
+        "aria-hidden": true
+      })]
+    }))
+  });
+});
+
+exports.Trigger = Trigger;
+Trigger.displayName = 'Accordion.Trigger';
+Trigger.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  headingVariant: _propTypes["default"].string
+};
+
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
+  var children = _ref3.children,
+      icon = _ref3.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
+  return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
+    ref: forwardedRef,
+    children: [(0, _jsxRuntime.jsx)("span", {
+      sx: {
+        color: 'text',
+        fontSize: 3
+      },
+      children: icon
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        color: 'heading',
+        flexGrow: 1,
+        textAlign: 'left',
+        ml: 3
+      },
+      children: children
+    })]
+  }));
+});
+
+exports.TriggerWithIcon = TriggerWithIcon;
+TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
+TriggerWithIcon.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  icon: _propTypes["default"].node.isRequired
+};
+
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardedRef) {
+  var children = _ref4.children,
+      _ref4$sx = _ref4.sx,
+      sx = _ref4$sx === void 0 ? {} : _ref4$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
+      backgroundColor: 'transparent',
+      color: 'text',
+      fontSize: 2,
+      overflow: 'hidden',
+      '&[data-state="open"]': {
+        animation: slideDown + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+      },
+      '&[data-state="closed"]': {
+        animation: slideUp + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+      }
+    }, sx)
+  }, props, {
+    ref: forwardedRef,
+    children: (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        px: 3,
+        py: 2
+      },
+      children: children
+    })
+  }));
+});
+
+exports.Content = Content;
+Content.displayName = 'Accordion.Content';
+Content.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  sx: _propTypes["default"].object
+};
+
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref5, forwardRef) {
+  var _ref5$sx = _ref5.sx,
+      sx = _ref5$sx === void 0 ? {} : _ref5$sx,
+      defaultValue = _ref5.defaultValue,
+      type = _ref5.type,
+      children = _ref5.children,
+      className = _ref5.className;
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
+    className: (0, _classnames["default"])('vip-accordion-component', className),
+    collapsible: true,
+    defaultValue: defaultValue,
+    ref: forwardRef,
+    sx: (0, _extends2["default"])({
+      borderRadius: 6
+    }, sx),
+    type: type,
+    children: children
+  });
+});
+
+exports.Root = Root;
+Root.displayName = 'Accordion';
+Root.propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].any,
+  defaultValue: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  type: _propTypes["default"].oneOf(['single', 'multiple'])
+};

package/build/system/Accordion/Accordion.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ri = require("react-icons/ri");
+
+var _bi = require("react-icons/bi");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Accordion',
+  component: _.Accordion
+};
+exports["default"] = _default;
+
+var ExampleContent = function ExampleContent() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      sx: {
+        mt: 0
+      },
+      children: "Add your key team members to the VIP Dashboard."
+    }), (0, _jsxRuntime.jsx)("p", {
+      children: "Add developers to GitHub."
+    }), (0, _jsxRuntime.jsx)("p", {
+      sx: {
+        mb: 0
+      },
+      children: "Add content editors and developers to WordPress admin."
+    })]
+  });
+};
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    children: (0, _jsxRuntime.jsxs)(_.Accordion.Root, {
+      defaultValue: "teamPermissions",
+      sx: {
+        width: '450px'
+      },
+      children: [(0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+        value: "teamPermissions",
+        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+          icon: (0, _jsxRuntime.jsx)(_ri.RiUserAddLine, {}),
+          children: "Team & Permissions"
+        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+        })]
+      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+        value: "addContentMedia",
+        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+          icon: (0, _jsxRuntime.jsx)(_bi.BiBookContent, {}),
+          children: "Add Content & Media"
+        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+        })]
+      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+        value: "addCode",
+        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+          icon: (0, _jsxRuntime.jsx)(_ri.RiCodeSSlashFill, {}),
+          children: "Add Code"
+        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+        })]
+      })]
+    })
+  });
+};
+
+exports.Default = Default;

package/build/system/Accordion/Accordion.test.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _themeUi = require("theme-ui");
+
+var Accordion = _interopRequireWildcard(require("./Accordion"));
+
+var _ = require("../");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var renderWithTheme = function renderWithTheme(children) {
+  return (0, _react.render)((0, _jsxRuntime.jsx)(_themeUi.ThemeProvider, {
+    theme: _.theme,
+    children: children
+  }));
+};
+
+var renderComponent = function renderComponent() {
+  return renderWithTheme((0, _jsxRuntime.jsxs)(Accordion.Root, {
+    defaultValue: "one",
+    sx: {
+      width: '400px'
+    },
+    children: [(0, _jsxRuntime.jsxs)(Accordion.Item, {
+      value: "one",
+      children: [(0, _jsxRuntime.jsx)(Accordion.Trigger, {
+        children: "trigger one"
+      }), (0, _jsxRuntime.jsx)(Accordion.Content, {
+        children: "content one"
+      })]
+    }), (0, _jsxRuntime.jsxs)(Accordion.Item, {
+      value: "two",
+      children: [(0, _jsxRuntime.jsx)(Accordion.Trigger, {
+        children: "trigger two"
+      }), (0, _jsxRuntime.jsx)(Accordion.Content, {
+        children: "content two"
+      })]
+    })]
+  }));
+};
+
+describe('<Accordion />', function () {
+  it('renders the Accordion component with default value visible', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _renderComponent, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _renderComponent = renderComponent(), container = _renderComponent.container; // Should find the open content
+
+            expect(_react.screen.getByText('content one')).toBeInTheDocument(); // Should not find the closed content
+
+            expect(_react.screen.queryByText('content two')).toBeNull(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context.t1 = _context.sent;
+            _context.next = 9;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should open the content when clicking on its trigger', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _renderComponent2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _renderComponent2 = renderComponent(), container = _renderComponent2.container;
+
+            _react.fireEvent.click(_react.screen.getByRole('button', {
+              name: 'trigger two'
+            })); // Should find the open content
+
+
+            expect(_react.screen.queryByText('content one')).toBeNull(); // Should not find the closed content
+
+            expect(_react.screen.queryByText('content two')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Accordion/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Accordion = void 0;
+
+var Accordion = _interopRequireWildcard(require("./Accordion"));
+
+exports.Accordion = Accordion;
+
+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; }

package/build/system/NewForm/FormAutocomplete.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormAutocomplete = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Label = require("../Form/Label");
+
+var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
+
+var _FormAutocomplete = _interopRequireDefault(require("./FormAutocomplete.css"));
+
+exports.css = _FormAutocomplete["default"];
+
+var _FormSelectContent = require("./FormSelectContent");
+
+var _FormSelectArrow = require("./FormSelectArrow");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultStyles = {
+  width: '100%',
+  py: 0,
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'border',
+  borderRadius: 1,
+  backgroundColor: 'background',
+  color: 'text',
+  minHeight: '36px',
+  lineHeight: '36px',
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:focus-within': function focusWithin(theme) {
+    return theme.outline;
+  },
+  '&.autocomplete__input--focused': function autocomplete__inputFocused(theme) {
+    return theme.outline;
+  },
+  '& .autocomplete__input': {
+    width: '100%',
+    paddingLeft: 3,
+    py: 0,
+    borderWidth: 0,
+    color: 'text',
+    minHeight: '36px',
+    lineHeight: '36px',
+    '&:focus': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&:focus-visible': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&:focus-within': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&.autocomplete__input--focused': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    }
+  },
+  '& .autocomplete__menu': {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'border',
+    borderRadius: 1,
+    backgroundColor: 'background',
+    color: 'text'
+  },
+  '& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
+    fontSize: 'inherit'
+  },
+  '& .autocomplete__wrapper': {
+    width: '100%',
+    paddingRight: '40px'
+  },
+  '& .autocomplete__input--show-all-values': {
+    paddingRight: 0
+  }
+};
+var inlineStyles = {
+  borderWidth: 0
+};
+
+var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var isInline = _ref.isInline,
+      forLabel = _ref.forLabel,
+      options = _ref.options,
+      label = _ref.label,
+      getOptionValue = _ref.getOptionValue,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      _ref$showAllValues = _ref.showAllValues,
+      showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
+      _ref$displayMenu = _ref.displayMenu,
+      displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id;
+
+  var SelectLabel = function SelectLabel() {
+    return (0, _jsxRuntime.jsx)(_Label.Label, {
+      htmlFor: forLabel || id,
+      children: label
+    });
+  };
+
+  var inlineLabel = !!(isInline && label);
+  var optionValue = (0, _react.useCallback)(function (option) {
+    return getOptionValue ? getOptionValue(option) : option.value;
+  }, [getOptionValue]);
+  var getAllOptions = (0, _react.useMemo)(function () {
+    return [].concat(options.filter(function (option) {
+      return !option.options;
+    }), options.filter(function (option) {
+      return option.options;
+    }).map(function (option) {
+      return option.options;
+    })).reduce(function (a, b) {
+      return a.concat(b);
+    }, []);
+  }, [options]);
+  var getOptionByValue = (0, _react.useCallback)(function (inputValue) {
+    return getAllOptions.find(function (option) {
+      return "" + optionValue(option) === "" + inputValue;
+    });
+  }, [getAllOptions, optionValue]);
+  var onValueChange = (0, _react.useCallback)(function (inputValue) {
+    if (onChange) {
+      onChange(getOptionByValue(inputValue));
+    }
+  }, [onChange, getOptionByValue]);
+  var suggest = (0, _react.useCallback)(function (query, populateResults) {
+    var data = options.filter(function (option) {
+      return option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0;
+    });
+    populateResults(data.map(function (option) {
+      return option.label;
+    }));
+  }, [options]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
+  }, []);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
+  }, [label]);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles),
+      children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
+        isInline: inlineLabel,
+        label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
+        children: [(0, _jsxRuntime.jsx)(_react2["default"], {
+          id: id,
+          showAllValues: showAllValues,
+          ref: forwardRef,
+          source: suggest,
+          defaultValue: value,
+          displayMenu: displayMenu,
+          onConfirm: onValueChange
+        }), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+      })
+    })]
+  });
+});
+
+exports.FormAutocomplete = FormAutocomplete;
+FormAutocomplete.propTypes = {
+  id: _propTypes["default"].string,
+  showAllValues: _propTypes["default"].bool,
+  isInline: _propTypes["default"].bool,
+  forLabel: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  displayMenu: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  options: _propTypes["default"].array,
+  getOptionValue: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
+};
+FormAutocomplete.displayName = 'FormAutocomplete';