@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

package/build/animate/index.js

@@ -1,72 +1,62 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var animate_exports = {};
+__export(animate_exports, {
+  Animate: () => Animate,
+  default: () => animate_default,
+  getAnimateClassName: () => getAnimateClassName
 });
-exports.Animate = Animate;
-exports.default = void 0;
-exports.getAnimateClassName = getAnimateClassName;
-var _clsx = _interopRequireDefault(require("clsx"));
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * @param type The animation type
- * @return Default origin
- */
+module.exports = __toCommonJS(animate_exports);
+var import_clsx = __toESM(require("clsx"));
 function getDefaultOrigin(type) {
-  return type === 'appear' ? 'top' : 'left';
+  return type === "appear" ? "top" : "left";
 }
-
-/**
- * @param options
- *
- * @return ClassName that applies the animations
- */
 function getAnimateClassName(options) {
-  if (options.type === 'loading') {
-    return 'components-animate__loading';
+  if (options.type === "loading") {
+    return "components-animate__loading";
   }
   const {
     type,
     origin = getDefaultOrigin(type)
   } = options;
-  if (type === 'appear') {
-    const [yAxis, xAxis = 'center'] = origin.split(' ');
-    return (0, _clsx.default)('components-animate__appear', {
-      ['is-from-' + xAxis]: xAxis !== 'center',
-      ['is-from-' + yAxis]: yAxis !== 'middle'
+  if (type === "appear") {
+    const [yAxis, xAxis = "center"] = origin.split(" ");
+    return (0, import_clsx.default)("components-animate__appear", {
+      ["is-from-" + xAxis]: xAxis !== "center",
+      ["is-from-" + yAxis]: yAxis !== "middle"
     });
   }
-  if (type === 'slide-in') {
-    return (0, _clsx.default)('components-animate__slide-in', 'is-from-' + origin);
+  if (type === "slide-in") {
+    return (0, import_clsx.default)("components-animate__slide-in", "is-from-" + origin);
   }
-  return undefined;
+  return void 0;
 }
-
-/**
- * Simple interface to introduce animations to components.
- *
- * ```jsx
- * import { Animate, Notice } from '@wordpress/components';
- *
- * const MyAnimatedNotice = () => (
- * 	<Animate type="slide-in" options={ { origin: 'top' } }>
- * 		{ ( { className } ) => (
- * 			<Notice className={ className } status="success">
- * 				<p>Animation finished.</p>
- * 			</Notice>
- * 		) }
- * 	</Animate>
- * );
- * ```
- */
 function Animate({
   type,
   options = {},
@@ -79,5 +69,10 @@ function Animate({
     })
   });
 }
-var _default = exports.default = Animate;
-//# sourceMappingURL=index.js.map
+var animate_default = Animate;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Animate,
+  getAnimateClassName
+});
+//# sourceMappingURL=index.js.map

package/build/animate/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","getDefaultOrigin","type","getAnimateClassName","options","origin","yAxis","xAxis","split","clsx","undefined","Animate","children","className","_default","exports","default"],"sources":["@wordpress/components/src/animate/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { AnimateProps, GetAnimateOptions } from './types';\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {\n\treturn type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName( options: GetAnimateOptions ) {\n\tif ( options.type === 'loading' ) {\n\t\treturn 'components-animate__loading';\n\t}\n\n\tconst { type, origin = getDefaultOrigin( type ) } = options;\n\n\tif ( type === 'appear' ) {\n\t\tconst [ yAxis, xAxis = 'center' ] = origin.split( ' ' );\n\t\treturn clsx( 'components-animate__appear', {\n\t\t\t[ 'is-from-' + xAxis ]: xAxis !== 'center',\n\t\t\t[ 'is-from-' + yAxis ]: yAxis !== 'middle',\n\t\t} );\n\t}\n\n\tif ( type === 'slide-in' ) {\n\t\treturn clsx( 'components-animate__slide-in', 'is-from-' + origin );\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate( { type, options = {}, children }: AnimateProps ) {\n\treturn children( {\n\t\tclassName: getAnimateClassName( {\n\t\t\ttype,\n\t\t\t...options,\n\t\t} as GetAnimateOptions ),\n\t} );\n}\n\nexport default Animate;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAEC,IAAkC,EAAG;EAC/D,OAAOA,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,MAAM;AAC1C;;AAEA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CAAEC,OAA0B,EAAG;EACjE,IAAKA,OAAO,CAACF,IAAI,KAAK,SAAS,EAAG;IACjC,OAAO,6BAA6B;EACrC;EAEA,MAAM;IAAEA,IAAI;IAAEG,MAAM,GAAGJ,gBAAgB,CAAEC,IAAK;EAAE,CAAC,GAAGE,OAAO;EAE3D,IAAKF,IAAI,KAAK,QAAQ,EAAG;IACxB,MAAM,CAAEI,KAAK,EAAEC,KAAK,GAAG,QAAQ,CAAE,GAAGF,MAAM,CAACG,KAAK,CAAE,GAAI,CAAC;IACvD,OAAO,IAAAC,aAAI,EAAE,4BAA4B,EAAE;MAC1C,CAAE,UAAU,GAAGF,KAAK,GAAIA,KAAK,KAAK,QAAQ;MAC1C,CAAE,UAAU,GAAGD,KAAK,GAAIA,KAAK,KAAK;IACnC,CAAE,CAAC;EACJ;EAEA,IAAKJ,IAAI,KAAK,UAAU,EAAG;IAC1B,OAAO,IAAAO,aAAI,EAAE,8BAA8B,EAAE,UAAU,GAAGJ,MAAO,CAAC;EACnE;EAEA,OAAOK,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAAE;EAAET,IAAI;EAAEE,OAAO,GAAG,CAAC,CAAC;EAAEQ;AAAuB,CAAC,EAAG;EACzE,OAAOA,QAAQ,CAAE;IAChBC,SAAS,EAAEV,mBAAmB,CAAE;MAC/BD,IAAI;MACJ,GAAGE;IACJ,CAAuB;EACxB,CAAE,CAAC;AACJ;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcL,OAAO","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/animate/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin(type) {\n  return type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName(options) {\n  if (options.type === 'loading') {\n    return 'components-animate__loading';\n  }\n  const {\n    type,\n    origin = getDefaultOrigin(type)\n  } = options;\n  if (type === 'appear') {\n    const [yAxis, xAxis = 'center'] = origin.split(' ');\n    return clsx('components-animate__appear', {\n      ['is-from-' + xAxis]: xAxis !== 'center',\n      ['is-from-' + yAxis]: yAxis !== 'middle'\n    });\n  }\n  if (type === 'slide-in') {\n    return clsx('components-animate__slide-in', 'is-from-' + origin);\n  }\n  return undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate({\n  type,\n  options = {},\n  children\n}) {\n  return children({\n    className: getAnimateClassName({\n      type,\n      ...options\n    })\n  });\n}\nexport default Animate;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAUjB,SAAS,iBAAiB,MAAM;AAC9B,SAAO,SAAS,WAAW,QAAQ;AACrC;AAOO,SAAS,oBAAoB,SAAS;AAC3C,MAAI,QAAQ,SAAS,WAAW;AAC9B,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,iBAAiB,IAAI;AAAA,EAChC,IAAI;AACJ,MAAI,SAAS,UAAU;AACrB,UAAM,CAAC,OAAO,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;AAClD,eAAO,YAAAA,SAAK,8BAA8B;AAAA,MACxC,CAAC,aAAa,KAAK,GAAG,UAAU;AAAA,MAChC,CAAC,aAAa,KAAK,GAAG,UAAU;AAAA,IAClC,CAAC;AAAA,EACH;AACA,MAAI,SAAS,YAAY;AACvB,eAAO,YAAAA,SAAK,gCAAgC,aAAa,MAAM;AAAA,EACjE;AACA,SAAO;AACT;AAmBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AACF,GAAG;AACD,SAAO,SAAS;AAAA,IACd,WAAW,oBAAoB;AAAA,MAC7B;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,kBAAQ;",
+  "names": ["clsx"]
+}

package/build/animate/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/animate/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/animate/types.ts"],"sourcesContent":["export type AppearOptions = {\n\ttype: 'appear';\n\torigin?:\n\t\t| 'top'\n\t\t| 'top left'\n\t\t| 'top right'\n\t\t| 'middle'\n\t\t| 'middle left'\n\t\t| 'middle right'\n\t\t| 'bottom'\n\t\t| 'bottom left'\n\t\t| 'bottom right';\n};\ntype SlideInOptions = { type: 'slide-in'; origin?: 'left' | 'right' };\ntype LoadingOptions = { type: 'loading'; origin?: never };\ntype NoAnimationOptions = { type?: never; origin?: never };\n\nexport type GetAnimateOptions =\n\t| AppearOptions\n\t| SlideInOptions\n\t| LoadingOptions\n\t| NoAnimationOptions;\n\n// Create a new type that and distributes the `Pick` operator separately to\n// every individual type of a union, thus preserving that same union.\ntype DistributiveTypeAndOptions< T extends { type?: any } > = T extends any\n\t? Pick< T, 'type' > & { options?: Omit< T, 'type' > }\n\t: never;\n\nexport type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {\n\tchildren: ( props: { className?: string } ) => JSX.Element;\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/animate/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/animation/index.js

@@ -1,19 +1,31 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "__unstableAnimatePresence", {
-  enumerable: true,
-  get: function () {
-    return _framerMotion.AnimatePresence;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var animation_exports = {};
+__export(animation_exports, {
+  __unstableAnimatePresence: () => import_framer_motion.AnimatePresence,
+  __unstableMotion: () => import_framer_motion.motion
 });
-Object.defineProperty(exports, "__unstableMotion", {
-  enumerable: true,
-  get: function () {
-    return _framerMotion.motion;
-  }
+module.exports = __toCommonJS(animation_exports);
+var import_framer_motion = require("framer-motion");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  __unstableAnimatePresence,
+  __unstableMotion
 });
-var _framerMotion = require("framer-motion");
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/build/animation/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_framerMotion","require"],"sources":["@wordpress/components/src/animation/index.tsx"],"sourcesContent":["/**\n * Framer Motion is used to create animated, interactive interfaces. The package is roughly ~30kb so\n * this should ideally be loaded once across all Gutenberg packages. To give ourselves more flexibility\n * in trying animation options, we avoid making this public API.\n *\n * @see https://www.framer.com/docs/animation/\n */\n\nexport {\n\tmotion as __unstableMotion,\n\tAnimatePresence as __unstableAnimatePresence,\n} from 'framer-motion';\n"],"mappings":";;;;;;;;;;;;;;;;;AAQA,IAAAA,aAAA,GAAAC,OAAA","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/animation/index.tsx"],
+  "sourcesContent": ["/**\n * Framer Motion is used to create animated, interactive interfaces. The package is roughly ~30kb so\n * this should ideally be loaded once across all Gutenberg packages. To give ourselves more flexibility\n * in trying animation options, we avoid making this public API.\n *\n * @see https://www.framer.com/docs/animation/\n */\n\nexport { motion as __unstableMotion, AnimatePresence as __unstableAnimatePresence } from 'framer-motion';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,2BAAyF;",
+  "names": []
+}

package/build/autocomplete/autocompleter-ui.js

@@ -1,34 +1,48 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var autocompleter_ui_exports = {};
+__export(autocompleter_ui_exports, {
+  getAutoCompleterUI: () => getAutoCompleterUI
 });
-exports.getAutoCompleterUI = getAutoCompleterUI;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _richText = require("@wordpress/rich-text");
-var _compose = require("@wordpress/compose");
-var _a11y = require("@wordpress/a11y");
-var _i18n = require("@wordpress/i18n");
-var _getDefaultUseItems = _interopRequireDefault(require("./get-default-use-items"));
-var _button = _interopRequireDefault(require("../button"));
-var _popover = _interopRequireDefault(require("../popover"));
-var _visuallyHidden = require("../visually-hidden");
-var _reactDom = require("react-dom");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(autocompleter_ui_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_rich_text = require("@wordpress/rich-text");
+var import_compose = require("@wordpress/compose");
+var import_a11y = require("@wordpress/a11y");
+var import_i18n = require("@wordpress/i18n");
+var import_get_default_use_items = __toESM(require("./get-default-use-items"));
+var import_button = __toESM(require("../button"));
+var import_popover = __toESM(require("../popover"));
+var import_visually_hidden = require("../visually-hidden");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
 function ListBox({
   items,
   onSelect,
@@ -36,24 +50,24 @@ function ListBox({
   instanceId,
   listBoxId,
   className,
-  Component = 'div'
+  Component = "div"
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     id: listBoxId,
     role: "listbox",
     className: "components-autocomplete__results",
-    children: items.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+    children: items.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
       id: `components-autocomplete-item-${instanceId}-${option.key}`,
       role: "option",
       __next40pxDefaultSize: true,
       "aria-selected": index === selectedIndex,
       accessibleWhenDisabled: true,
       disabled: option.isDisabled,
-      className: (0, _clsx.default)('components-autocomplete__result', className, {
+      className: (0, import_clsx.default)("components-autocomplete__result", className, {
         // Unused, for backwards compatibility.
-        'is-selected': index === selectedIndex
+        "is-selected": index === selectedIndex
       }),
-      variant: index === selectedIndex ? 'primary' : undefined,
+      variant: index === selectedIndex ? "primary" : void 0,
       onClick: () => onSelect(option),
       children: option.label
     }, option.key))
@@ -61,7 +75,7 @@ function ListBox({
 }
 function getAutoCompleterUI(autocompleter) {
   var _autocompleter$useIte;
-  const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : (0, _getDefaultUseItems.default)(autocompleter);
+  const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : (0, import_get_default_use_items.default)(autocompleter);
   function AutocompleterUI({
     filterValue,
     instanceId,
@@ -75,93 +89,95 @@ function getAutoCompleterUI(autocompleter) {
     contentRef
   }) {
     const [items] = useItems(filterValue);
-    const popoverAnchor = (0, _richText.useAnchor)({
+    const popoverAnchor = (0, import_rich_text.useAnchor)({
       editableContentElement: contentRef.current
     });
-    const [needsA11yCompat, setNeedsA11yCompat] = (0, _element.useState)(false);
-    const popoverRef = (0, _element.useRef)(null);
-    const popoverRefs = (0, _compose.useMergeRefs)([popoverRef, (0, _compose.useRefEffect)(node => {
+    const [needsA11yCompat, setNeedsA11yCompat] = (0, import_element.useState)(false);
+    const popoverRef = (0, import_element.useRef)(null);
+    const popoverRefs = (0, import_compose.useMergeRefs)([popoverRef, (0, import_compose.useRefEffect)((node) => {
       if (!contentRef.current) {
         return;
       }
-
-      // If the popover is rendered in a different document than
-      // the content, we need to duplicate the options list in the
-      // content document so that it's available to the screen
-      // readers, which check the DOM ID based aria-* attributes.
       setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
     }, [contentRef])]);
     useOnClickOutside(popoverRef, reset);
-    const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
+    const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500);
     function announce(options) {
       if (!debouncedSpeak) {
         return;
       }
       if (!!options.length) {
         if (filterValue) {
-          debouncedSpeak((0, _i18n.sprintf)(/* translators: %d: number of results. */
-          (0, _i18n._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
+          debouncedSpeak((0, import_i18n.sprintf)(
+            /* translators: %d: number of results. */
+            (0, import_i18n._n)("%d result found, use up and down arrow keys to navigate.", "%d results found, use up and down arrow keys to navigate.", options.length),
+            options.length
+          ), "assertive");
         } else {
-          debouncedSpeak((0, _i18n.sprintf)(/* translators: %d: number of results. */
-          (0, _i18n._n)('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
+          debouncedSpeak((0, import_i18n.sprintf)(
+            /* translators: %d: number of results. */
+            (0, import_i18n._n)("Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.", "Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.", options.length),
+            options.length
+          ), "assertive");
         }
       } else {
-        debouncedSpeak((0, _i18n.__)('No results.'), 'assertive');
+        debouncedSpeak((0, import_i18n.__)("No results."), "assertive");
       }
     }
-    (0, _element.useLayoutEffect)(() => {
+    (0, import_element.useLayoutEffect)(() => {
       onChangeOptions(items);
       announce(items);
-      // We want to avoid introducing unexpected side effects.
-      // See https://github.com/WordPress/gutenberg/pull/41820
     }, [items]);
     if (items.length === 0) {
       return null;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.default, {
         focusOnMount: false,
         onClose: onReset,
         placement: "top-start",
         className: "components-autocomplete__popover",
         anchor: popoverAnchor,
         ref: popoverRefs,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListBox, {
-          items: items,
-          onSelect: onSelect,
-          selectedIndex: selectedIndex,
-          instanceId: instanceId,
-          listBoxId: listBoxId,
-          className: className
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBox, {
+          items,
+          onSelect,
+          selectedIndex,
+          instanceId,
+          listBoxId,
+          className
         })
-      }), contentRef.current && needsA11yCompat && (0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(ListBox, {
-        items: items,
-        onSelect: onSelect,
-        selectedIndex: selectedIndex,
-        instanceId: instanceId,
-        listBoxId: listBoxId,
-        className: className,
-        Component: _visuallyHidden.VisuallyHidden
+      }), contentRef.current && needsA11yCompat && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBox, {
+        items,
+        onSelect,
+        selectedIndex,
+        instanceId,
+        listBoxId,
+        className,
+        Component: import_visually_hidden.VisuallyHidden
       }), contentRef.current.ownerDocument.body)]
     });
   }
   return AutocompleterUI;
 }
 function useOnClickOutside(ref, handler) {
-  (0, _element.useEffect)(() => {
-    const listener = event => {
-      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
+  (0, import_element.useEffect)(() => {
+    const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
       }
       handler(event);
     };
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
     return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
     };
   }, [handler, ref]);
 }
-//# sourceMappingURL=autocompleter-ui.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAutoCompleterUI
+});
+//# sourceMappingURL=autocompleter-ui.js.map

package/build/autocomplete/autocompleter-ui.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_richText","_compose","_a11y","_i18n","_getDefaultUseItems","_button","_popover","_visuallyHidden","_reactDom","_jsxRuntime","ListBox","items","onSelect","selectedIndex","instanceId","listBoxId","className","Component","jsx","id","role","children","map","option","index","default","key","__next40pxDefaultSize","accessibleWhenDisabled","disabled","isDisabled","clsx","variant","undefined","onClick","label","getAutoCompleterUI","autocompleter","_autocompleter$useIte","useItems","getDefaultUseItems","AutocompleterUI","filterValue","onChangeOptions","onReset","reset","contentRef","popoverAnchor","useAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","useState","popoverRef","useRef","popoverRefs","useMergeRefs","useRefEffect","node","ownerDocument","useOnClickOutside","debouncedSpeak","useDebounce","speak","announce","options","length","sprintf","_n","__","useLayoutEffect","jsxs","Fragment","focusOnMount","onClose","placement","anchor","ref","createPortal","VisuallyHidden","body","handler","useEffect","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\ntype ListBoxProps = {\n\titems: KeyedOption[];\n\tonSelect: ( option: KeyedOption ) => void;\n\tselectedIndex: number;\n\tinstanceId: number;\n\tlistBoxId: string | undefined;\n\tclassName?: string;\n\tComponent?: React.ElementType;\n};\n\nfunction ListBox( {\n\titems,\n\tonSelect,\n\tselectedIndex,\n\tinstanceId,\n\tlistBoxId,\n\tclassName,\n\tComponent = 'div',\n}: ListBoxProps ) {\n\treturn (\n\t\t<Component\n\t\t\tid={ listBoxId }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"components-autocomplete__results\"\n\t\t>\n\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t<Button\n\t\t\t\t\tkey={ option.key }\n\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// Unused, for backwards compatibility.\n\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvariant={ index === selectedIndex ? 'primary' : undefined }\n\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</Button>\n\t\t\t) ) }\n\t\t</Component>\n\t);\n}\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems =\n\t\tautocompleter.useItems ?? getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aria-* attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// We want to avoid introducing unexpected side effects.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox\n\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox\n\t\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tComponent={ VisuallyHidden }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent | TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current ||\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t}, [ handler, ref ] );\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/autocomplete/autocompleter-ui.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useEffect, useState } from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListBox({\n  items,\n  onSelect,\n  selectedIndex,\n  instanceId,\n  listBoxId,\n  className,\n  Component = 'div'\n}) {\n  return /*#__PURE__*/_jsx(Component, {\n    id: listBoxId,\n    role: \"listbox\",\n    className: \"components-autocomplete__results\",\n    children: items.map((option, index) => /*#__PURE__*/_jsx(Button, {\n      id: `components-autocomplete-item-${instanceId}-${option.key}`,\n      role: \"option\",\n      __next40pxDefaultSize: true,\n      \"aria-selected\": index === selectedIndex,\n      accessibleWhenDisabled: true,\n      disabled: option.isDisabled,\n      className: clsx('components-autocomplete__result', className, {\n        // Unused, for backwards compatibility.\n        'is-selected': index === selectedIndex\n      }),\n      variant: index === selectedIndex ? 'primary' : undefined,\n      onClick: () => onSelect(option),\n      children: option.label\n    }, option.key))\n  });\n}\nexport function getAutoCompleterUI(autocompleter) {\n  var _autocompleter$useIte;\n  const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : getDefaultUseItems(autocompleter);\n  function AutocompleterUI({\n    filterValue,\n    instanceId,\n    listBoxId,\n    className,\n    selectedIndex,\n    onChangeOptions,\n    onSelect,\n    onReset,\n    reset,\n    contentRef\n  }) {\n    const [items] = useItems(filterValue);\n    const popoverAnchor = useAnchor({\n      editableContentElement: contentRef.current\n    });\n    const [needsA11yCompat, setNeedsA11yCompat] = useState(false);\n    const popoverRef = useRef(null);\n    const popoverRefs = useMergeRefs([popoverRef, useRefEffect(node => {\n      if (!contentRef.current) {\n        return;\n      }\n\n      // If the popover is rendered in a different document than\n      // the content, we need to duplicate the options list in the\n      // content document so that it's available to the screen\n      // readers, which check the DOM ID based aria-* attributes.\n      setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);\n    }, [contentRef])]);\n    useOnClickOutside(popoverRef, reset);\n    const debouncedSpeak = useDebounce(speak, 500);\n    function announce(options) {\n      if (!debouncedSpeak) {\n        return;\n      }\n      if (!!options.length) {\n        if (filterValue) {\n          debouncedSpeak(sprintf(/* translators: %d: number of results. */\n          _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive');\n        } else {\n          debouncedSpeak(sprintf(/* translators: %d: number of results. */\n          _n('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');\n        }\n      } else {\n        debouncedSpeak(__('No results.'), 'assertive');\n      }\n    }\n    useLayoutEffect(() => {\n      onChangeOptions(items);\n      announce(items);\n      // We want to avoid introducing unexpected side effects.\n      // See https://github.com/WordPress/gutenberg/pull/41820\n    }, [items]);\n    if (items.length === 0) {\n      return null;\n    }\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Popover, {\n        focusOnMount: false,\n        onClose: onReset,\n        placement: \"top-start\",\n        className: \"components-autocomplete__popover\",\n        anchor: popoverAnchor,\n        ref: popoverRefs,\n        children: /*#__PURE__*/_jsx(ListBox, {\n          items: items,\n          onSelect: onSelect,\n          selectedIndex: selectedIndex,\n          instanceId: instanceId,\n          listBoxId: listBoxId,\n          className: className\n        })\n      }), contentRef.current && needsA11yCompat && createPortal(/*#__PURE__*/_jsx(ListBox, {\n        items: items,\n        onSelect: onSelect,\n        selectedIndex: selectedIndex,\n        instanceId: instanceId,\n        listBoxId: listBoxId,\n        className: className,\n        Component: VisuallyHidden\n      }), contentRef.current.ownerDocument.body)]\n    });\n  }\n  return AutocompleterUI;\n}\nfunction useOnClickOutside(ref, handler) {\n  useEffect(() => {\n    const listener = event => {\n      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n      if (!ref.current || ref.current.contains(event.target)) {\n        return;\n      }\n      handler(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [handler, ref]);\n}"],
+  "mappings": "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",
+  "names": ["_jsx", "Button", "clsx", "getDefaultUseItems", "_jsxs", "_Fragment", "Popover"]
+}

package/build/autocomplete/background-view.android.js

@@ -1,34 +1,48 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var background_view_android_exports = {};
+__export(background_view_android_exports, {
+  default: () => background_view_android_default
 });
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _compose = require("@wordpress/compose");
-var _style = _interopRequireDefault(require("./style.scss"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(background_view_android_exports);
+var import_react_native = require("react-native");
+var import_compose = require("@wordpress/compose");
+var import_style = __toESM(require("./style.scss"));
+var import_jsx_runtime = require("react/jsx-runtime");
 const BackgroundView = ({
   children
 }) => {
-  const backgroundStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__background'], _style.default['components-autocomplete__background-dark']);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const backgroundStyles = (0, import_compose.usePreferredColorSchemeStyle)(import_style.default["components-autocomplete__background"], import_style.default["components-autocomplete__background-dark"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
     style: backgroundStyles,
-    children: children
+    children
   });
 };
-var _default = exports.default = BackgroundView;
-//# sourceMappingURL=background-view.android.js.map
+var background_view_android_default = BackgroundView;
+//# sourceMappingURL=background-view.android.js.map