@wordpress/components 27.5.0 → 28.0.0

package/build/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_context","_styles","Tab","exports","forwardRef","children","tabId","disabled","render","otherProps","ref","context","useTabsContext","SCRIPT_DEBUG","warning","store","instanceId","instancedTabId","_react","createElement","id"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\tOmit< WordPressComponentProps< TabProps, 'button', false >, 'id' >\n>( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";;;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAZA;AACA;AACA;;AAIA;AACA;AACA;;AAOO,MAAMK,GAAG,GAAAC,OAAA,CAAAD,GAAA,GAAG,IAAAE,mBAAU,EAG1B,SAASF,GAAGA,CAAE;EAAEG,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC5E,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,IAAK,CAAED,OAAO,EAAG;IAChB,OAAAE,YAAA,oBAAAA,YAAA,gBAAAC,gBAAO,EAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGL,OAAO;EACrC,MAAMM,cAAc,GAAI,GAAGD,UAAY,IAAIV,KAAO,EAAC;EACnD,OACC,IAAAY,MAAA,CAAAC,aAAA,EAAClB,OAAA,CAAAC,GAAS;IACTQ,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IACfK,EAAE,EAAGH,cAAgB;IACrBV,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_context","_styles","_jsxRuntime","Tab","exports","forwardRef","children","tabId","disabled","render","otherProps","ref","context","useTabsContext","globalThis","SCRIPT_DEBUG","warning","store","instanceId","instancedTabId","jsx","id"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\tOmit< WordPressComponentProps< TabProps, 'button', false >, 'id' >\n>( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA4C,IAAAK,WAAA,GAAAL,OAAA;AAZ5C;AACA;AACA;;AAIA;AACA;AACA;;AAOO,MAAMM,GAAG,GAAAC,OAAA,CAAAD,GAAA,GAAG,IAAAE,mBAAU,EAG1B,SAASF,GAAGA,CAAE;EAAEG,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC5E,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,IAAK,CAAED,OAAO,EAAG;IAChBE,UAAA,CAAAC,YAAA,gBAAAC,gBAAO,EAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGN,OAAO;EACrC,MAAMO,cAAc,GAAI,GAAGD,UAAY,IAAIX,KAAO,EAAC;EACnD,oBACC,IAAAL,WAAA,CAAAkB,GAAA,EAACnB,OAAA,CAAAE,GAAS;IACTQ,GAAG,EAAGA,GAAK;IACXM,KAAK,EAAGA,KAAO;IACfI,EAAE,EAAGF,cAAgB;IACrBX,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC,UAAU;IAAAJ,QAAA,EAEbA;EAAQ,CACA,CAAC;AAEd,CAAE,CAAC","ignoreList":[]}

package/build/tabs/tablist.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabList = void 0;
-var _react = require("react");
 var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
 var _element = require("@wordpress/element");
 var _context = require("./context");
 var _styles = require("./styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -26,20 +27,98 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Internal dependencies
  */
 
+function useTrackElementOffset(targetElement, onUpdate) {
+  const [indicatorPosition, setIndicatorPosition] = (0, _element.useState)({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  });
+
+  // TODO: replace with useEventCallback or similar when officially available.
+  const updateCallbackRef = (0, _element.useRef)(onUpdate);
+  (0, _element.useLayoutEffect)(() => {
+    updateCallbackRef.current = onUpdate;
+  });
+  const observedElementRef = (0, _element.useRef)();
+  const resizeObserverRef = (0, _element.useRef)();
+  (0, _element.useEffect)(() => {
+    if (targetElement === observedElementRef.current) {
+      return;
+    }
+    observedElementRef.current = targetElement !== null && targetElement !== void 0 ? targetElement : undefined;
+    function updateIndicator(element) {
+      setIndicatorPosition({
+        left: element.offsetLeft,
+        top: element.offsetTop,
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      });
+      updateCallbackRef.current?.();
+    }
+
+    // Set up a ResizeObserver.
+    if (!resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        if (observedElementRef.current) {
+          updateIndicator(observedElementRef.current);
+        }
+      });
+    }
+    const {
+      current: resizeObserver
+    } = resizeObserverRef;
+
+    // Observe new element.
+    if (targetElement) {
+      updateIndicator(targetElement);
+      resizeObserver.observe(targetElement);
+    }
+    return () => {
+      // Unobserve previous element.
+      if (observedElementRef.current) {
+        resizeObserver.unobserve(observedElementRef.current);
+      }
+    };
+  }, [targetElement]);
+  return indicatorPosition;
+}
+function useOnValueUpdate(value, onUpdate) {
+  const previousValueRef = (0, _element.useRef)(value);
+
+  // TODO: replace with useEventCallback or similar when officially available.
+  const updateCallbackRef = (0, _element.useRef)(onUpdate);
+  (0, _element.useLayoutEffect)(() => {
+    updateCallbackRef.current = onUpdate;
+  });
+  (0, _element.useEffect)(() => {
+    if (previousValueRef.current !== value) {
+      updateCallbackRef.current({
+        previousValue: previousValueRef.current
+      });
+      previousValueRef.current = value;
+    }
+  }, [value]);
+}
 const TabList = exports.TabList = (0, _element.forwardRef)(function TabList({
   children,
   ...otherProps
 }, ref) {
   const context = (0, _context.useTabsContext)();
+  const selectedId = context?.store.useState('selectedId');
+  const indicatorPosition = useTrackElementOffset(context?.store.item(selectedId)?.element);
+  const [animationEnabled, setAnimationEnabled] = (0, _element.useState)(false);
+  useOnValueUpdate(selectedId, ({
+    previousValue
+  }) => previousValue && setAnimationEnabled(true));
   if (!context) {
-    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;
     return null;
   }
   const {
     store
   } = context;
   const {
-    selectedId,
     activeId,
     selectOnMove
   } = store.useState();
@@ -59,12 +138,27 @@ const TabList = exports.TabList = (0, _element.forwardRef)(function TabList({
       setActiveId(selectedId);
     }
   };
-  return (0, _react.createElement)(Ariakit.TabList, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.TabList, {
     ref: ref,
     store: store,
-    render: (0, _react.createElement)(_styles.TabListWrapper, null),
+    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabListWrapper, {
+      onTransitionEnd: event => {
+        if (event.pseudoElement === '::after') {
+          setAnimationEnabled(false);
+        }
+      }
+    }),
     onBlur: onBlur,
-    ...otherProps
-  }, children);
+    ...otherProps,
+    style: {
+      '--indicator-left': `${indicatorPosition.left}px`,
+      '--indicator-top': `${indicatorPosition.top}px`,
+      '--indicator-width': `${indicatorPosition.width}px`,
+      '--indicator-height': `${indicatorPosition.height}px`,
+      ...otherProps.style
+    },
+    className: (0, _clsx.default)(animationEnabled ? 'is-animation-enabled' : '', otherProps.className),
+    children: children
+  });
 });
 //# sourceMappingURL=tablist.js.map

package/build/tabs/tablist.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_warning","_interopRequireDefault","_element","_context","_styles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TabList","exports","forwardRef","children","otherProps","ref","context","useTabsContext","SCRIPT_DEBUG","warning","store","selectedId","activeId","selectOnMove","useState","setActiveId","onBlur","_react","createElement","render","TabListWrapper"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport { useTabsContext } from './context';\nimport { TabListWrapper } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store } = context;\n\n\tconst { selectedId, activeId, selectOnMove } = store.useState();\n\tconst { setActiveId } = store;\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tsetActiveId( selectedId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Ariakit.TabList\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\trender={ <TabListWrapper /> }\n\t\t\tonBlur={ onBlur }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Ariakit.TabList>\n\t);\n} );\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAMA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAA0C,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAjB1C;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAMO,MAAMW,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,mBAAU,EAG9B,SAASF,OAAOA,CAAE;EAAEG,QAAQ;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACvD,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,IAAK,CAAED,OAAO,EAAG;IAChB,OAAAE,YAAA,oBAAAA,YAAA,gBAAAC,gBAAO,EAAE,uDAAwD,CAAC;IAClE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC;EAAM,CAAC,GAAGJ,OAAO;EAEzB,MAAM;IAAEK,UAAU;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAGH,KAAK,CAACI,QAAQ,CAAC,CAAC;EAC/D,MAAM;IAAEC;EAAY,CAAC,GAAGL,KAAK;EAE7B,MAAMM,MAAM,GAAGA,CAAA,KAAM;IACpB,IAAK,CAAEH,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKF,UAAU,KAAKC,QAAQ,EAAG;MAC9BG,WAAW,CAAEJ,UAAW,CAAC;IAC1B;EACD,CAAC;EAED,OACC,IAAAM,MAAA,CAAAC,aAAA,EAAC9C,OAAO,CAAC4B,OAAO;IACfK,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IACfS,MAAM,EAAG,IAAAF,MAAA,CAAAC,aAAA,EAACvC,OAAA,CAAAyC,cAAc,MAAE,CAAG;IAC7BJ,MAAM,EAAGA,MAAQ;IAAA,GACZZ;EAAU,GAEbD,QACc,CAAC;AAEpB,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_warning","_interopRequireDefault","_element","_context","_styles","_clsx","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useTrackElementOffset","targetElement","onUpdate","indicatorPosition","setIndicatorPosition","useState","left","top","width","height","updateCallbackRef","useRef","useLayoutEffect","current","observedElementRef","resizeObserverRef","useEffect","undefined","updateIndicator","element","offsetLeft","offsetTop","offsetWidth","offsetHeight","ResizeObserver","resizeObserver","observe","unobserve","useOnValueUpdate","value","previousValueRef","previousValue","TabList","exports","forwardRef","children","otherProps","ref","context","useTabsContext","selectedId","store","item","animationEnabled","setAnimationEnabled","globalThis","SCRIPT_DEBUG","warning","activeId","selectOnMove","setActiveId","onBlur","jsx","render","TabListWrapper","onTransitionEnd","event","pseudoElement","style","className","clsx"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport {\n\tforwardRef,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport { useTabsContext } from './context';\nimport { TabListWrapper } from './styles';\nimport type { WordPressComponentProps } from '../context';\nimport clsx from 'clsx';\n\nfunction useTrackElementOffset(\n\ttargetElement?: HTMLElement | null,\n\tonUpdate?: () => void\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] = useState( {\n\t\tleft: 0,\n\t\ttop: 0,\n\t\twidth: 0,\n\t\theight: 0,\n\t} );\n\n\t// TODO: replace with useEventCallback or similar when officially available.\n\tconst updateCallbackRef = useRef( onUpdate );\n\tuseLayoutEffect( () => {\n\t\tupdateCallbackRef.current = onUpdate;\n\t} );\n\n\tconst observedElementRef = useRef< HTMLElement >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\tuseEffect( () => {\n\t\tif ( targetElement === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tobservedElementRef.current = targetElement ?? undefined;\n\n\t\tfunction updateIndicator( element: HTMLElement ) {\n\t\t\tsetIndicatorPosition( {\n\t\t\t\tleft: element.offsetLeft,\n\t\t\t\ttop: element.offsetTop,\n\t\t\t\twidth: element.offsetWidth,\n\t\t\t\theight: element.offsetHeight,\n\t\t\t} );\n\t\t\tupdateCallbackRef.current?.();\n\t\t}\n\n\t\t// Set up a ResizeObserver.\n\t\tif ( ! resizeObserverRef.current ) {\n\t\t\tresizeObserverRef.current = new ResizeObserver( () => {\n\t\t\t\tif ( observedElementRef.current ) {\n\t\t\t\t\tupdateIndicator( observedElementRef.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Observe new element.\n\t\tif ( targetElement ) {\n\t\t\tupdateIndicator( targetElement );\n\t\t\tresizeObserver.observe( targetElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Unobserve previous element.\n\t\t\tif ( observedElementRef.current ) {\n\t\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t\t}\n\t\t};\n\t}, [ targetElement ] );\n\n\treturn indicatorPosition;\n}\n\ntype ValueUpdateContext< T > = {\n\tpreviousValue: T;\n};\n\nfunction useOnValueUpdate< T >(\n\tvalue: T,\n\tonUpdate: ( context: ValueUpdateContext< T > ) => void\n) {\n\tconst previousValueRef = useRef( value );\n\n\t// TODO: replace with useEventCallback or similar when officially available.\n\tconst updateCallbackRef = useRef( onUpdate );\n\tuseLayoutEffect( () => {\n\t\tupdateCallbackRef.current = onUpdate;\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( previousValueRef.current !== value ) {\n\t\t\tupdateCallbackRef.current( {\n\t\t\t\tpreviousValue: previousValueRef.current,\n\t\t\t} );\n\t\t\tpreviousValueRef.current = value;\n\t\t}\n\t}, [ value ] );\n}\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\n\tconst selectedId = context?.store.useState( 'selectedId' );\n\tconst indicatorPosition = useTrackElementOffset(\n\t\tcontext?.store.item( selectedId )?.element\n\t);\n\n\tconst [ animationEnabled, setAnimationEnabled ] = useState( false );\n\tuseOnValueUpdate(\n\t\tselectedId,\n\t\t( { previousValue } ) => previousValue && setAnimationEnabled( true )\n\t);\n\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store } = context;\n\n\tconst { activeId, selectOnMove } = store.useState();\n\tconst { setActiveId } = store;\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tsetActiveId( selectedId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Ariakit.TabList\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\trender={\n\t\t\t\t<TabListWrapper\n\t\t\t\t\tonTransitionEnd={ ( event ) => {\n\t\t\t\t\t\tif ( event.pseudoElement === '::after' ) {\n\t\t\t\t\t\t\tsetAnimationEnabled( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonBlur={ onBlur }\n\t\t\t{ ...otherProps }\n\t\t\tstyle={ {\n\t\t\t\t'--indicator-left': `${ indicatorPosition.left }px`,\n\t\t\t\t'--indicator-top': `${ indicatorPosition.top }px`,\n\t\t\t\t'--indicator-width': `${ indicatorPosition.width }px`,\n\t\t\t\t'--indicator-height': `${ indicatorPosition.height }px`,\n\t\t\t\t...otherProps.style,\n\t\t\t} }\n\t\t\tclassName={ clsx(\n\t\t\t\tanimationEnabled ? 'is-animation-enabled' : '',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Ariakit.TabList>\n\t);\n} );\n"],"mappings":";;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAYA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAEA,IAAAM,KAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAAwB,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAzBxB;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;;AAOA,SAASW,qBAAqBA,CAC7BC,aAAkC,EAClCC,QAAqB,EACpB;EACD,MAAM,CAAEC,iBAAiB,EAAEC,oBAAoB,CAAE,GAAG,IAAAC,iBAAQ,EAAE;IAC7DC,IAAI,EAAE,CAAC;IACPC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACT,CAAE,CAAC;;EAEH;EACA,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAET,QAAS,CAAC;EAC5C,IAAAU,wBAAe,EAAE,MAAM;IACtBF,iBAAiB,CAACG,OAAO,GAAGX,QAAQ;EACrC,CAAE,CAAC;EAEH,MAAMY,kBAAkB,GAAG,IAAAH,eAAM,EAAgB,CAAC;EAClD,MAAMI,iBAAiB,GAAG,IAAAJ,eAAM,EAAmB,CAAC;EACpD,IAAAK,kBAAS,EAAE,MAAM;IAChB,IAAKf,aAAa,KAAKa,kBAAkB,CAACD,OAAO,EAAG;MACnD;IACD;IAEAC,kBAAkB,CAACD,OAAO,GAAGZ,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIgB,SAAS;IAEvD,SAASC,eAAeA,CAAEC,OAAoB,EAAG;MAChDf,oBAAoB,CAAE;QACrBE,IAAI,EAAEa,OAAO,CAACC,UAAU;QACxBb,GAAG,EAAEY,OAAO,CAACE,SAAS;QACtBb,KAAK,EAAEW,OAAO,CAACG,WAAW;QAC1Bb,MAAM,EAAEU,OAAO,CAACI;MACjB,CAAE,CAAC;MACHb,iBAAiB,CAACG,OAAO,GAAG,CAAC;IAC9B;;IAEA;IACA,IAAK,CAAEE,iBAAiB,CAACF,OAAO,EAAG;MAClCE,iBAAiB,CAACF,OAAO,GAAG,IAAIW,cAAc,CAAE,MAAM;QACrD,IAAKV,kBAAkB,CAACD,OAAO,EAAG;UACjCK,eAAe,CAAEJ,kBAAkB,CAACD,OAAQ,CAAC;QAC9C;MACD,CAAE,CAAC;IACJ;IACA,MAAM;MAAEA,OAAO,EAAEY;IAAe,CAAC,GAAGV,iBAAiB;;IAErD;IACA,IAAKd,aAAa,EAAG;MACpBiB,eAAe,CAAEjB,aAAc,CAAC;MAChCwB,cAAc,CAACC,OAAO,CAAEzB,aAAc,CAAC;IACxC;IAEA,OAAO,MAAM;MACZ;MACA,IAAKa,kBAAkB,CAACD,OAAO,EAAG;QACjCY,cAAc,CAACE,SAAS,CAAEb,kBAAkB,CAACD,OAAQ,CAAC;MACvD;IACD,CAAC;EACF,CAAC,EAAE,CAAEZ,aAAa,CAAG,CAAC;EAEtB,OAAOE,iBAAiB;AACzB;AAMA,SAASyB,gBAAgBA,CACxBC,KAAQ,EACR3B,QAAsD,EACrD;EACD,MAAM4B,gBAAgB,GAAG,IAAAnB,eAAM,EAAEkB,KAAM,CAAC;;EAExC;EACA,MAAMnB,iBAAiB,GAAG,IAAAC,eAAM,EAAET,QAAS,CAAC;EAC5C,IAAAU,wBAAe,EAAE,MAAM;IACtBF,iBAAiB,CAACG,OAAO,GAAGX,QAAQ;EACrC,CAAE,CAAC;EAEH,IAAAc,kBAAS,EAAE,MAAM;IAChB,IAAKc,gBAAgB,CAACjB,OAAO,KAAKgB,KAAK,EAAG;MACzCnB,iBAAiB,CAACG,OAAO,CAAE;QAC1BkB,aAAa,EAAED,gBAAgB,CAACjB;MACjC,CAAE,CAAC;MACHiB,gBAAgB,CAACjB,OAAO,GAAGgB,KAAK;IACjC;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;AACf;AAEO,MAAMG,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,mBAAU,EAG9B,SAASF,OAAOA,CAAE;EAAEG,QAAQ;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EACvD,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAEhC,MAAMC,UAAU,GAAGF,OAAO,EAAEG,KAAK,CAACpC,QAAQ,CAAE,YAAa,CAAC;EAC1D,MAAMF,iBAAiB,GAAGH,qBAAqB,CAC9CsC,OAAO,EAAEG,KAAK,CAACC,IAAI,CAAEF,UAAW,CAAC,EAAErB,OACpC,CAAC;EAED,MAAM,CAAEwB,gBAAgB,EAAEC,mBAAmB,CAAE,GAAG,IAAAvC,iBAAQ,EAAE,KAAM,CAAC;EACnEuB,gBAAgB,CACfY,UAAU,EACV,CAAE;IAAET;EAAc,CAAC,KAAMA,aAAa,IAAIa,mBAAmB,CAAE,IAAK,CACrE,CAAC;EAED,IAAK,CAAEN,OAAO,EAAG;IAChBO,UAAA,CAAAC,YAAA,gBAAAC,gBAAO,EAAE,uDAAwD,CAAC;IAClE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEN;EAAM,CAAC,GAAGH,OAAO;EAEzB,MAAM;IAAEU,QAAQ;IAAEC;EAAa,CAAC,GAAGR,KAAK,CAACpC,QAAQ,CAAC,CAAC;EACnD,MAAM;IAAE6C;EAAY,CAAC,GAAGT,KAAK;EAE7B,MAAMU,MAAM,GAAGA,CAAA,KAAM;IACpB,IAAK,CAAEF,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKT,UAAU,KAAKQ,QAAQ,EAAG;MAC9BE,WAAW,CAAEV,UAAW,CAAC;IAC1B;EACD,CAAC;EAED,oBACC,IAAA7D,WAAA,CAAAyE,GAAA,EAAClF,OAAO,CAAC8D,OAAO;IACfK,GAAG,EAAGA,GAAK;IACXI,KAAK,EAAGA,KAAO;IACfY,MAAM,eACL,IAAA1E,WAAA,CAAAyE,GAAA,EAAC3E,OAAA,CAAA6E,cAAc;MACdC,eAAe,EAAKC,KAAK,IAAM;QAC9B,IAAKA,KAAK,CAACC,aAAa,KAAK,SAAS,EAAG;UACxCb,mBAAmB,CAAE,KAAM,CAAC;QAC7B;MACD;IAAG,CACH,CACD;IACDO,MAAM,EAAGA,MAAQ;IAAA,GACZf,UAAU;IACfsB,KAAK,EAAG;MACP,kBAAkB,EAAG,GAAGvD,iBAAiB,CAACG,IAAM,IAAG;MACnD,iBAAiB,EAAG,GAAGH,iBAAiB,CAACI,GAAK,IAAG;MACjD,mBAAmB,EAAG,GAAGJ,iBAAiB,CAACK,KAAO,IAAG;MACrD,oBAAoB,EAAG,GAAGL,iBAAiB,CAACM,MAAQ,IAAG;MACvD,GAAG2B,UAAU,CAACsB;IACf,CAAG;IACHC,SAAS,EAAG,IAAAC,aAAI,EACfjB,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,EAC9CP,UAAU,CAACuB,SACZ,CAAG;IAAAxB,QAAA,EAEDA;EAAQ,CACM,CAAC;AAEpB,CAAE,CAAC","ignoreList":[]}

package/build/tabs/tabpanel.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabPanel = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _styles = require("./styles");
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
 var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -26,7 +26,7 @@ const TabPanel = exports.TabPanel = (0, _element.forwardRef)(function TabPanel({
 }, ref) {
   const context = (0, _context.useTabsContext)();
   if (!context) {
-    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;
     return null;
   }
   const {
@@ -35,7 +35,7 @@ const TabPanel = exports.TabPanel = (0, _element.forwardRef)(function TabPanel({
   } = context;
   const instancedTabId = `${instanceId}-${tabId}`;
   const selectedId = store.useState(state => state.selectedId);
-  return (0, _react.createElement)(_styles.TabPanel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabPanel, {
     ref: ref,
     store: store
     // For TabPanel, the id passed here is the id attribute of the DOM
@@ -45,7 +45,8 @@ const TabPanel = exports.TabPanel = (0, _element.forwardRef)(function TabPanel({
     id: `${instancedTabId}-view`,
     tabId: instancedTabId,
     focusable: focusable,
-    ...otherProps
-  }, selectedId === instancedTabId && children);
+    ...otherProps,
+    children: selectedId === instancedTabId && children
+  });
 });
 //# sourceMappingURL=tabpanel.js.map

package/build/tabs/tabpanel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_styles","_warning","_interopRequireDefault","_context","TabPanel","exports","forwardRef","children","tabId","focusable","otherProps","ref","context","useTabsContext","SCRIPT_DEBUG","warning","store","instanceId","instancedTabId","selectedId","useState","state","_react","createElement","id"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\tOmit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >\n>( function TabPanel(\n\t{ children, tabId, focusable = true, ...otherProps },\n\tref\n) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\tconst selectedId = store.useState( ( state ) => state.selectedId );\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\t// For TabPanel, the id passed here is the id attribute of the DOM\n\t\t\t// element.\n\t\t\t// `tabId` is the id of the tab that controls this panel.\n\t\t\tid={ `${ instancedTabId }-view` }\n\t\t\ttabId={ instancedTabId }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ selectedId === instancedTabId && children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";;;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAbA;AACA;AACA;;AAIA;AACA;AACA;;AAQO,MAAMK,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAG/B,SAASF,QAAQA,CACnB;EAAEG,QAAQ;EAAEC,KAAK;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EACpDC,GAAG,EACF;EACD,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,IAAK,CAAED,OAAO,EAAG;IAChB,OAAAE,YAAA,oBAAAA,YAAA,gBAAAC,gBAAO,EAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGL,OAAO;EACrC,MAAMM,cAAc,GAAI,GAAGD,UAAY,IAAIT,KAAO,EAAC;EACnD,MAAMW,UAAU,GAAGH,KAAK,CAACI,QAAQ,CAAIC,KAAK,IAAMA,KAAK,CAACF,UAAW,CAAC;EAElE,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACvB,OAAA,CAAAI,QAAc;IACdO,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA;IACR;IACA;IACA;IAAA;IACAQ,EAAE,EAAI,GAAGN,cAAgB,OAAQ;IACjCV,KAAK,EAAGU,cAAgB;IACxBT,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbS,UAAU,KAAKD,cAAc,IAAIX,QACpB,CAAC;AAEnB,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_styles","_warning","_interopRequireDefault","_context","_jsxRuntime","TabPanel","exports","forwardRef","children","tabId","focusable","otherProps","ref","context","useTabsContext","globalThis","SCRIPT_DEBUG","warning","store","instanceId","instancedTabId","selectedId","useState","state","jsx","id"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\tOmit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >\n>( function TabPanel(\n\t{ children, tabId, focusable = true, ...otherProps },\n\tref\n) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\tconst selectedId = store.useState( ( state ) => state.selectedId );\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\t// For TabPanel, the id passed here is the id attribute of the DOM\n\t\t\t// element.\n\t\t\t// `tabId` is the id of the tab that controls this panel.\n\t\t\tid={ `${ instancedTabId }-view` }\n\t\t\ttabId={ instancedTabId }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ selectedId === instancedTabId && children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAb3C;AACA;AACA;;AAIA;AACA;AACA;;AAQO,MAAMM,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAG/B,SAASF,QAAQA,CACnB;EAAEG,QAAQ;EAAEC,KAAK;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EACpDC,GAAG,EACF;EACD,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,IAAK,CAAED,OAAO,EAAG;IAChBE,UAAA,CAAAC,YAAA,gBAAAC,gBAAO,EAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGN,OAAO;EACrC,MAAMO,cAAc,GAAI,GAAGD,UAAY,IAAIV,KAAO,EAAC;EACnD,MAAMY,UAAU,GAAGH,KAAK,CAACI,QAAQ,CAAIC,KAAK,IAAMA,KAAK,CAACF,UAAW,CAAC;EAElE,oBACC,IAAAjB,WAAA,CAAAoB,GAAA,EAACxB,OAAA,CAAAK,QAAc;IACdO,GAAG,EAAGA,GAAK;IACXM,KAAK,EAAGA;IACR;IACA;IACA;IAAA;IACAO,EAAE,EAAI,GAAGL,cAAgB,OAAQ;IACjCX,KAAK,EAAGW,cAAgB;IACxBV,SAAS,EAAGA,SAAW;IAAA,GAClBC,UAAU;IAAAH,QAAA,EAEba,UAAU,KAAKD,cAAc,IAAIZ;EAAQ,CAC5B,CAAC;AAEnB,CAAE,CAAC","ignoreList":[]}

package/build/text/component.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Text = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _view = require("../view");
 var _hook = _interopRequireDefault(require("./hook"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
@@ -19,7 +19,7 @@ var _hook = _interopRequireDefault(require("./hook"));
  */
 function UnconnectedText(props, forwardedRef) {
   const textProps = (0, _hook.default)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     as: "span",
     ...textProps,
     ref: forwardedRef

package/build/text/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","_interopRequireDefault","UnconnectedText","props","forwardedRef","textProps","useText","_react","createElement","View","as","ref","Text","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/text/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport useText from './hook';\nimport type { Props } from './types';\n\n/**\n * @param props\n * @param forwardedRef\n */\nfunction UnconnectedText(\n\tprops: WordPressComponentProps< Props, 'span' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst textProps = useText( props );\n\n\treturn <View as=\"span\" { ...textProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Text` is a core component that renders text in the library, using the\n * library's typography system.\n *\n * `Text` can be used to render any text-content, like an HTML `p` or `span`.\n *\n * @example\n *\n * ```jsx\n * import { __experimentalText as Text } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn <Text>Code is Poetry</Text>;\n * }\n * ```\n */\nexport const Text = contextConnect( UnconnectedText, 'Text' );\nexport default Text;\n"],"mappings":";;;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AANA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACA,SAASI,eAAeA,CACvBC,KAA+C,EAC/CC,YAAuC,EACtC;EACD,MAAMC,SAAS,GAAG,IAAAC,aAAO,EAAEH,KAAM,CAAC;EAElC,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACT,KAAA,CAAAU,IAAI;IAACC,EAAE,EAAC,MAAM;IAAA,GAAML,SAAS;IAAGM,GAAG,EAAGP;EAAc,CAAE,CAAC;AAChE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,uBAAc,EAAEZ,eAAe,EAAE,MAAO,CAAC;AAAC,IAAAa,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAC/CJ,IAAI","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_interopRequireDefault","_jsxRuntime","UnconnectedText","props","forwardedRef","textProps","useText","jsx","View","as","ref","Text","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/text/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport useText from './hook';\nimport type { Props } from './types';\n\n/**\n * @param props\n * @param forwardedRef\n */\nfunction UnconnectedText(\n\tprops: WordPressComponentProps< Props, 'span' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst textProps = useText( props );\n\n\treturn <View as=\"span\" { ...textProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Text` is a core component that renders text in the library, using the\n * library's typography system.\n *\n * `Text` can be used to render any text-content, like an HTML `p` or `span`.\n *\n * @example\n *\n * ```jsx\n * import { __experimentalText as Text } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn <Text>Code is Poetry</Text>;\n * }\n * ```\n */\nexport const Text = contextConnect( UnconnectedText, 'Text' );\nexport default Text;\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA6B,IAAAI,WAAA,GAAAJ,OAAA;AAN7B;AACA;AACA;;AAOA;AACA;AACA;AACA;AACA,SAASK,eAAeA,CACvBC,KAA+C,EAC/CC,YAAuC,EACtC;EACD,MAAMC,SAAS,GAAG,IAAAC,aAAO,EAAEH,KAAM,CAAC;EAElC,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACT,KAAA,CAAAU,IAAI;IAACC,EAAE,EAAC,MAAM;IAAA,GAAMJ,SAAS;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AAChE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,uBAAc,EAAEX,eAAe,EAAE,MAAO,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAC/CJ,IAAI","ignoreList":[]}

package/build/text-control/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextControl = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _baseControl = _interopRequireDefault(require("../base-control"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -38,25 +38,26 @@ function UnforwardedTextControl(props, ref) {
   } = props;
   const id = (0, _compose.useInstanceId)(TextControl, 'inspector-text-control', idProp);
   const onChangeValue = event => onChange(event.target.value);
-  return (0, _react.createElement)(_baseControl.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
-    className: className
-  }, (0, _react.createElement)("input", {
-    className: (0, _classnames.default)('components-text-control__input', {
-      'is-next-40px-default-size': __next40pxDefaultSize
-    }),
-    type: type,
-    id: id,
-    value: value,
-    onChange: onChangeValue,
-    "aria-describedby": !!help ? id + '__help' : undefined,
-    ref: ref,
-    ...additionalProps
-  }));
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: (0, _clsx.default)('components-text-control__input', {
+        'is-next-40px-default-size': __next40pxDefaultSize
+      }),
+      type: type,
+      id: id,
+      value: value,
+      onChange: onChangeValue,
+      "aria-describedby": !!help ? id + '__help' : undefined,
+      ref: ref,
+      ...additionalProps
+    })
+  });
 }
 
 /**

package/build/text-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_baseControl","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","useInstanceId","TextControl","onChangeValue","event","target","_react","createElement","default","classnames","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/text-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName={ classnames( 'components-text-control__input', {\n\t\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t} ) }\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"],"mappings":";;;;;;;;AAIA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAfA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,SAASI,sBAAsBA,CAC9BC,KAAkE,EAClEC,GAAqC,EACpC;EACD,MAAM;IACLC,uBAAuB;IACvBC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,QAAQ;IACRC,IAAI,GAAG,MAAM;IACb,GAAGC;EACJ,CAAC,GAAGb,KAAK;EACT,MAAMQ,EAAE,GAAG,IAAAM,sBAAa,EAAEC,WAAW,EAAE,wBAAwB,EAAEN,MAAO,CAAC;EACzE,MAAMO,aAAa,GAAKC,KAAsC,IAC7DN,QAAQ,CAAEM,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,OACC,IAAAa,MAAA,CAAAC,aAAA,EAACtB,YAAA,CAAAuB,OAAW;IACXnB,uBAAuB,EAAGA,uBAAyB;IACnDE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA;EAAW,GAEvB,IAAAS,MAAA,CAAAC,aAAA;IACCV,SAAS,EAAG,IAAAY,mBAAU,EAAE,gCAAgC,EAAE;MACzD,2BAA2B,EAAEnB;IAC9B,CAAE,CAAG;IACLS,IAAI,EAAGA,IAAM;IACbJ,EAAE,EAAGA,EAAI;IACTF,KAAK,EAAGA,KAAO;IACfK,QAAQ,EAAGK,aAAe;IAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGe,SAAW;IACxDtB,GAAG,EAAGA,GAAK;IAAA,GACNY;EAAe,CACpB,CACW,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,WAAW,GAAAS,OAAA,CAAAT,WAAA,GAAG,IAAAU,mBAAU,EAAE1B,sBAAuB,CAAC;AAAC,IAAA2B,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEjDN,WAAW","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_jsxRuntime","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","useInstanceId","TextControl","onChangeValue","event","target","jsx","default","children","clsx","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/text-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName={ clsx( 'components-text-control__input', {\n\t\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t} ) }\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"],"mappings":";;;;;;;AAIA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAA0C,IAAAI,WAAA,GAAAJ,OAAA;AAf1C;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,SAASK,sBAAsBA,CAC9BC,KAAkE,EAClEC,GAAqC,EACpC;EACD,MAAM;IACLC,uBAAuB;IACvBC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,QAAQ;IACRC,IAAI,GAAG,MAAM;IACb,GAAGC;EACJ,CAAC,GAAGb,KAAK;EACT,MAAMQ,EAAE,GAAG,IAAAM,sBAAa,EAAEC,WAAW,EAAE,wBAAwB,EAAEN,MAAO,CAAC;EACzE,MAAMO,aAAa,GAAKC,KAAsC,IAC7DN,QAAQ,CAAEM,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,oBACC,IAAAR,WAAA,CAAAqB,GAAA,EAACtB,YAAA,CAAAuB,OAAW;IACXlB,uBAAuB,EAAGA,uBAAyB;IACnDE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAW,QAAA,eAEvB,IAAAvB,WAAA,CAAAqB,GAAA;MACCT,SAAS,EAAG,IAAAY,aAAI,EAAE,gCAAgC,EAAE;QACnD,2BAA2B,EAAEnB;MAC9B,CAAE,CAAG;MACLS,IAAI,EAAGA,IAAM;MACbJ,EAAE,EAAGA,EAAI;MACTF,KAAK,EAAGA,KAAO;MACfK,QAAQ,EAAGK,aAAe;MAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGe,SAAW;MACxDtB,GAAG,EAAGA,GAAK;MAAA,GACNY;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,WAAW,GAAAS,OAAA,CAAAT,WAAA,GAAG,IAAAU,mBAAU,EAAE1B,sBAAuB,CAAC;AAAC,IAAA2B,QAAA,GAAAF,OAAA,CAAAJ,OAAA,GAEjDL,WAAW","ignoreList":[]}

package/build/text-control/index.native.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _cell = _interopRequireDefault(require("../mobile/bottom-sheet/cell"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -29,7 +29,7 @@ function TextControl({
   ...props
 }) {
   const id = `inspector-text-control-${instanceId}`;
-  return (0, _react.createElement)(_cell.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,

package/build/text-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_cell","_interopRequireDefault","TextControl","label","hideLabelFromVision","value","help","className","instanceId","onChange","type","placeholder","props","id","_react","createElement","default","onChangeValue","undefined","valuePlaceholder","_default","exports","memo"],"sources":["@wordpress/components/src/text-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport Cell from '../mobile/bottom-sheet/cell';\n\nfunction TextControl( {\n\tlabel,\n\thideLabelFromVision,\n\tvalue,\n\thelp,\n\tclassName,\n\tinstanceId,\n\tonChange,\n\ttype = 'text',\n\tplaceholder,\n\t...props\n} ) {\n\tconst id = `inspector-text-control-${ instanceId }`;\n\n\treturn (\n\t\t<Cell\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t\ttype={ type }\n\t\t\tvalue={ value }\n\t\t\tonChangeValue={ onChange }\n\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\tvaluePlaceholder={ placeholder }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default memo( TextControl );\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,SAASG,WAAWA,CAAE;EACrBC,KAAK;EACLC,mBAAmB;EACnBC,KAAK;EACLC,IAAI;EACJC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC,IAAI,GAAG,MAAM;EACbC,WAAW;EACX,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,EAAE,GAAI,0BAA0BL,UAAY,EAAC;EAEnD,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACf,KAAA,CAAAgB,OAAI;IACJb,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CS,EAAE,EAAGA,EAAI;IACTP,IAAI,EAAGA,IAAM;IACbC,SAAS,EAAGA,SAAW;IACvBG,IAAI,EAAGA,IAAM;IACbL,KAAK,EAAGA,KAAO;IACfY,aAAa,EAAGR,QAAU;IAC1B,oBAAmB,CAAC,CAAEH,IAAI,GAAGO,EAAE,GAAG,QAAQ,GAAGK,SAAW;IACxDC,gBAAgB,EAAGR,WAAa;IAAA,GAC3BC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEc,IAAAM,aAAI,EAAEpB,WAAY,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_cell","_interopRequireDefault","_jsxRuntime","TextControl","label","hideLabelFromVision","value","help","className","instanceId","onChange","type","placeholder","props","id","jsx","default","onChangeValue","undefined","valuePlaceholder","_default","exports","memo"],"sources":["@wordpress/components/src/text-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport Cell from '../mobile/bottom-sheet/cell';\n\nfunction TextControl( {\n\tlabel,\n\thideLabelFromVision,\n\tvalue,\n\thelp,\n\tclassName,\n\tinstanceId,\n\tonChange,\n\ttype = 'text',\n\tplaceholder,\n\t...props\n} ) {\n\tconst id = `inspector-text-control-${ instanceId }`;\n\n\treturn (\n\t\t<Cell\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t\ttype={ type }\n\t\t\tvalue={ value }\n\t\t\tonChangeValue={ onChange }\n\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\tvaluePlaceholder={ placeholder }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default memo( TextControl );\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+C,IAAAG,WAAA,GAAAH,OAAA;AAP/C;AACA;AACA;;AAEA;AACA;AACA;;AAGA,SAASI,WAAWA,CAAE;EACrBC,KAAK;EACLC,mBAAmB;EACnBC,KAAK;EACLC,IAAI;EACJC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC,IAAI,GAAG,MAAM;EACbC,WAAW;EACX,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,EAAE,GAAI,0BAA0BL,UAAY,EAAC;EAEnD,oBACC,IAAAP,WAAA,CAAAa,GAAA,EAACf,KAAA,CAAAgB,OAAI;IACJZ,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CS,EAAE,EAAGA,EAAI;IACTP,IAAI,EAAGA,IAAM;IACbC,SAAS,EAAGA,SAAW;IACvBG,IAAI,EAAGA,IAAM;IACbL,KAAK,EAAGA,KAAO;IACfW,aAAa,EAAGP,QAAU;IAC1B,oBAAmB,CAAC,CAAEH,IAAI,GAAGO,EAAE,GAAG,QAAQ,GAAGI,SAAW;IACxDC,gBAAgB,EAAGP,WAAa;IAAA,GAC3BC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEc,IAAAM,aAAI,EAAEnB,WAAY,CAAC","ignoreList":[]}

package/build/text-highlight/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextHighlight = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _strings = require("../utils/strings");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -37,11 +37,13 @@ const TextHighlight = props => {
   } = props;
   const trimmedHighlightText = highlight.trim();
   if (!trimmedHighlightText) {
-    return (0, _react.createElement)(_react.Fragment, null, text);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: text
+    });
   }
   const regex = new RegExp(`(${(0, _strings.escapeRegExp)(trimmedHighlightText)})`, 'gi');
   return (0, _element.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), {
-    mark: (0, _react.createElement)("mark", null)
+    mark: /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {})
   });
 };
 exports.TextHighlight = TextHighlight;

package/build/text-highlight/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_strings","TextHighlight","props","text","highlight","trimmedHighlightText","trim","_react","createElement","Fragment","regex","RegExp","escapeRegExp","createInterpolateElement","replace","mark","exports","_default","default"],"sources":["@wordpress/components/src/text-highlight/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport type { TextHighlightProps } from './types';\n\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n *   <TextHighlight\n *     text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n *     highlight=\"Gutenberg\"\n *   />\n * );\n * ```\n */\nexport const TextHighlight = ( props: TextHighlightProps ) => {\n\tconst { text = '', highlight = '' } = props;\n\tconst trimmedHighlightText = highlight.trim();\n\n\tif ( ! trimmedHighlightText ) {\n\t\treturn <>{ text }</>;\n\t}\n\n\tconst regex = new RegExp(\n\t\t`(${ escapeRegExp( trimmedHighlightText ) })`,\n\t\t'gi'\n\t);\n\n\treturn createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {\n\t\tmark: <mark />,\n\t} );\n};\n\nexport default TextHighlight;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,aAAa,GAAKC,KAAyB,IAAM;EAC7D,MAAM;IAAEC,IAAI,GAAG,EAAE;IAAEC,SAAS,GAAG;EAAG,CAAC,GAAGF,KAAK;EAC3C,MAAMG,oBAAoB,GAAGD,SAAS,CAACE,IAAI,CAAC,CAAC;EAE7C,IAAK,CAAED,oBAAoB,EAAG;IAC7B,OAAO,IAAAE,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QAAIN,IAAQ,CAAC;EACrB;EAEA,MAAMO,KAAK,GAAG,IAAIC,MAAM,CACtB,IAAI,IAAAC,qBAAY,EAAEP,oBAAqB,CAAG,GAAE,EAC7C,IACD,CAAC;EAED,OAAO,IAAAQ,iCAAwB,EAAEV,IAAI,CAACW,OAAO,CAAEJ,KAAK,EAAE,iBAAkB,CAAC,EAAE;IAC1EK,IAAI,EAAE,IAAAR,MAAA,CAAAC,aAAA,cAAO;EACd,CAAE,CAAC;AACJ,CAAC;AAACQ,OAAA,CAAAf,aAAA,GAAAA,aAAA;AAAA,IAAAgB,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAEajB,aAAa","ignoreList":[]}
+{"version":3,"names":["_element","require","_strings","_jsxRuntime","TextHighlight","props","text","highlight","trimmedHighlightText","trim","jsx","Fragment","children","regex","RegExp","escapeRegExp","createInterpolateElement","replace","mark","exports","_default","default"],"sources":["@wordpress/components/src/text-highlight/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport type { TextHighlightProps } from './types';\n\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n *   <TextHighlight\n *     text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n *     highlight=\"Gutenberg\"\n *   />\n * );\n * ```\n */\nexport const TextHighlight = ( props: TextHighlightProps ) => {\n\tconst { text = '', highlight = '' } = props;\n\tconst trimmedHighlightText = highlight.trim();\n\n\tif ( ! trimmedHighlightText ) {\n\t\treturn <>{ text }</>;\n\t}\n\n\tconst regex = new RegExp(\n\t\t`(${ escapeRegExp( trimmedHighlightText ) })`,\n\t\t'gi'\n\t);\n\n\treturn createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {\n\t\tmark: <mark />,\n\t} );\n};\n\nexport default TextHighlight;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAAgD,IAAAE,WAAA,GAAAF,OAAA;AARhD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,aAAa,GAAKC,KAAyB,IAAM;EAC7D,MAAM;IAAEC,IAAI,GAAG,EAAE;IAAEC,SAAS,GAAG;EAAG,CAAC,GAAGF,KAAK;EAC3C,MAAMG,oBAAoB,GAAGD,SAAS,CAACE,IAAI,CAAC,CAAC;EAE7C,IAAK,CAAED,oBAAoB,EAAG;IAC7B,oBAAO,IAAAL,WAAA,CAAAO,GAAA,EAAAP,WAAA,CAAAQ,QAAA;MAAAC,QAAA,EAAIN;IAAI,CAAI,CAAC;EACrB;EAEA,MAAMO,KAAK,GAAG,IAAIC,MAAM,CACtB,IAAI,IAAAC,qBAAY,EAAEP,oBAAqB,CAAG,GAAE,EAC7C,IACD,CAAC;EAED,OAAO,IAAAQ,iCAAwB,EAAEV,IAAI,CAACW,OAAO,CAAEJ,KAAK,EAAE,iBAAkB,CAAC,EAAE;IAC1EK,IAAI,eAAE,IAAAf,WAAA,CAAAO,GAAA,YAAO;EACd,CAAE,CAAC;AACJ,CAAC;AAACS,OAAA,CAAAf,aAAA,GAAAA,aAAA;AAAA,IAAAgB,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAEajB,aAAa","ignoreList":[]}

package/build/textarea-control/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextareaControl = void 0;
-var _react = require("react");
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _baseControl = _interopRequireDefault(require("../base-control"));
 var _textareaControlStyles = require("./styles/textarea-control-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -33,23 +33,24 @@ function UnforwardedTextareaControl(props, ref) {
   const instanceId = (0, _compose.useInstanceId)(TextareaControl);
   const id = `inspector-textarea-control-${instanceId}`;
   const onChangeValue = event => onChange(event.target.value);
-  return (0, _react.createElement)(_baseControl.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
-    className: className
-  }, (0, _react.createElement)(_textareaControlStyles.StyledTextarea, {
-    className: "components-textarea-control__input",
-    id: id,
-    rows: rows,
-    onChange: onChangeValue,
-    "aria-describedby": !!help ? id + '__help' : undefined,
-    value: value,
-    ref: ref,
-    ...additionalProps
-  }));
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textareaControlStyles.StyledTextarea, {
+      className: "components-textarea-control__input",
+      id: id,
+      rows: rows,
+      onChange: onChangeValue,
+      "aria-describedby": !!help ? id + '__help' : undefined,
+      value: value,
+      ref: ref,
+      ...additionalProps
+    })
+  });
 }
 
 /**

package/build/textarea-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_baseControl","_interopRequireDefault","_textareaControlStyles","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","useInstanceId","TextareaControl","id","onChangeValue","event","target","_react","createElement","default","StyledTextarea","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef( UnforwardedTextareaControl );\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAMA,SAASK,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAG,IAAAC,sBAAa,EAAEC,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAI,8BAA8BH,UAAY,EAAC;EACvD,MAAMI,aAAa,GAAKC,KAA+C,IACtET,QAAQ,CAAES,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,OACC,IAAAa,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAAwB,OAAW;IACXlB,uBAAuB,EAAGA,uBAAyB;IACnDC,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CU,EAAE,EAAGA,EAAI;IACTR,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA;EAAW,GAEvB,IAAAS,MAAA,CAAAC,aAAA,EAACrB,sBAAA,CAAAuB,cAAc;IACdZ,SAAS,EAAC,oCAAoC;IAC9CK,EAAE,EAAGA,EAAI;IACTN,IAAI,EAAGA,IAAM;IACbD,QAAQ,EAAGQ,aAAe;IAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGQ,EAAE,GAAG,QAAQ,GAAGQ,SAAW;IACxDjB,KAAK,EAAGA,KAAO;IACfJ,GAAG,EAAGA,GAAK;IAAA,GACNS;EAAe,CACpB,CACW,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,eAAe,GAAAU,OAAA,CAAAV,eAAA,GAAG,IAAAW,mBAAU,EAAEzB,0BAA2B,CAAC;AAAC,IAAA0B,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEzDP,eAAe","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_baseControl","_interopRequireDefault","_textareaControlStyles","_jsxRuntime","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","useInstanceId","TextareaControl","id","onChangeValue","event","target","jsx","default","children","StyledTextarea","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef( UnforwardedTextareaControl );\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AAAkE,IAAAK,WAAA,GAAAL,OAAA;AAVlE;AACA;AACA;;AAIA;AACA;AACA;;AAMA,SAASM,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAG,IAAAC,sBAAa,EAAEC,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAI,8BAA8BH,UAAY,EAAC;EACvD,MAAMI,aAAa,GAAKC,KAA+C,IACtET,QAAQ,CAAES,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,oBACC,IAAAP,WAAA,CAAAoB,GAAA,EAACvB,YAAA,CAAAwB,OAAW;IACXjB,uBAAuB,EAAGA,uBAAyB;IACnDC,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CU,EAAE,EAAGA,EAAI;IACTR,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAW,QAAA,eAEvB,IAAAtB,WAAA,CAAAoB,GAAA,EAACrB,sBAAA,CAAAwB,cAAc;MACdZ,SAAS,EAAC,oCAAoC;MAC9CK,EAAE,EAAGA,EAAI;MACTN,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGQ,aAAe;MAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGQ,EAAE,GAAG,QAAQ,GAAGQ,SAAW;MACxDjB,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,eAAe,GAAAU,OAAA,CAAAV,eAAA,GAAG,IAAAW,mBAAU,EAAEzB,0BAA2B,CAAC;AAAC,IAAA0B,QAAA,GAAAF,OAAA,CAAAJ,OAAA,GAEzDN,eAAe","ignoreList":[]}

package/build/textarea-control/index.native.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _baseControl = _interopRequireDefault(require("../base-control"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -23,21 +23,22 @@ function TextareaControl({
   onChange,
   rows = 4
 }) {
-  return (0, _react.createElement)(_baseControl.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
     label: label,
-    help: help
-  }, (0, _react.createElement)(_reactNative.TextInput, {
-    style: {
-      height: 80,
-      borderColor: 'gray',
-      borderWidth: 1
-    },
-    value: value,
-    onChangeText: onChange,
-    numberOfLines: rows,
-    multiline: rows > 1,
-    textAlignVertical: "top"
-  }));
+    help: help,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      style: {
+        height: 80,
+        borderColor: 'gray',
+        borderWidth: 1
+      },
+      value: value,
+      onChangeText: onChange,
+      numberOfLines: rows,
+      multiline: rows > 1,
+      textAlignVertical: "top"
+    })
+  });
 }
 var _default = exports.default = TextareaControl;
 //# sourceMappingURL=index.native.js.map

package/build/textarea-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_baseControl","_interopRequireDefault","TextareaControl","label","value","help","onChange","rows","_react","createElement","default","TextInput","style","height","borderColor","borderWidth","onChangeText","numberOfLines","multiline","textAlignVertical","_default","exports"],"sources":["@wordpress/components/src/textarea-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { TextInput } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nfunction TextareaControl( { label, value, help, onChange, rows = 4 } ) {\n\treturn (\n\t\t<BaseControl label={ label } help={ help }>\n\t\t\t<TextInput\n\t\t\t\tstyle={ { height: 80, borderColor: 'gray', borderWidth: 1 } }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChangeText={ onChange }\n\t\t\t\tnumberOfLines={ rows }\n\t\t\t\tmultiline={ rows > 1 }\n\t\t\t\ttextAlignVertical=\"top\"\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASG,eAAeA,CAAE;EAAEC,KAAK;EAAEC,KAAK;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,IAAI,GAAG;AAAE,CAAC,EAAG;EACtE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACT,YAAA,CAAAU,OAAW;IAACP,KAAK,EAAGA,KAAO;IAACE,IAAI,EAAGA;EAAM,GACzC,IAAAG,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,SAAS;IACTC,KAAK,EAAG;MAAEC,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE,MAAM;MAAEC,WAAW,EAAE;IAAE,CAAG;IAC7DX,KAAK,EAAGA,KAAO;IACfY,YAAY,EAAGV,QAAU;IACzBW,aAAa,EAAGV,IAAM;IACtBW,SAAS,EAAGX,IAAI,GAAG,CAAG;IACtBY,iBAAiB,EAAC;EAAK,CACvB,CACW,CAAC;AAEhB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEcR,eAAe","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_baseControl","_interopRequireDefault","_jsxRuntime","TextareaControl","label","value","help","onChange","rows","jsx","default","children","TextInput","style","height","borderColor","borderWidth","onChangeText","numberOfLines","multiline","textAlignVertical","_default","exports"],"sources":["@wordpress/components/src/textarea-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { TextInput } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nfunction TextareaControl( { label, value, help, onChange, rows = 4 } ) {\n\treturn (\n\t\t<BaseControl label={ label } help={ help }>\n\t\t\t<TextInput\n\t\t\t\tstyle={ { height: 80, borderColor: 'gray', borderWidth: 1 } }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChangeText={ onChange }\n\t\t\t\tnumberOfLines={ rows }\n\t\t\t\tmultiline={ rows > 1 }\n\t\t\t\ttextAlignVertical=\"top\"\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0C,IAAAG,WAAA,GAAAH,OAAA;AAR1C;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASI,eAAeA,CAAE;EAAEC,KAAK;EAAEC,KAAK;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,IAAI,GAAG;AAAE,CAAC,EAAG;EACtE,oBACC,IAAAN,WAAA,CAAAO,GAAA,EAACT,YAAA,CAAAU,OAAW;IAACN,KAAK,EAAGA,KAAO;IAACE,IAAI,EAAGA,IAAM;IAAAK,QAAA,eACzC,IAAAT,WAAA,CAAAO,GAAA,EAACX,YAAA,CAAAc,SAAS;MACTC,KAAK,EAAG;QAAEC,MAAM,EAAE,EAAE;QAAEC,WAAW,EAAE,MAAM;QAAEC,WAAW,EAAE;MAAE,CAAG;MAC7DX,KAAK,EAAGA,KAAO;MACfY,YAAY,EAAGV,QAAU;MACzBW,aAAa,EAAGV,IAAM;MACtBW,SAAS,EAAGX,IAAI,GAAG,CAAG;MACtBY,iBAAiB,EAAC;IAAK,CACvB;EAAC,CACU,CAAC;AAEhB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAEcP,eAAe","ignoreList":[]}

package/build/theme/color-algorithms.js

@@ -39,7 +39,7 @@ function generateThemeVariables(inputs) {
 function validateInputs(inputs) {
   for (const [key, value] of Object.entries(inputs)) {
     if (typeof value !== 'undefined' && !(0, _colord.colord)(value).isValid()) {
-      typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)(`wp.components.Theme: "${value}" is not a valid color value for the '${key}' prop.`) : void 0;
+      globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)(`wp.components.Theme: "${value}" is not a valid color value for the '${key}' prop.`) : void 0;
     }
   }
 }
@@ -57,7 +57,7 @@ function checkContrasts(inputs, outputs) {
 function warnContrastIssues(issues) {
   for (const error of Object.values(issues)) {
     if (error) {
-      typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.Theme: ' + error) : void 0;
+      globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.Theme: ' + error) : void 0;
     }
   }
 }