@wordpress/components 27.5.0 → 28.0.0

package/build-module/panel/actions.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,7 +6,6 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -16,6 +14,9 @@ import { useMemo } from '@wordpress/element';
  */
 import styles from './actions.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
+import TextControl from '../text-control';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function PanelActions({
   actions,
   getStylesFromColorScheme
@@ -25,17 +26,17 @@ function PanelActions({
       label,
       onPress
     }) => {
-      return createElement(TextControl, {
+      return /*#__PURE__*/_jsx(TextControl, {
         label: label,
         onPress: onPress,
-        labelStyle: styles.defaultLabelStyle,
-        key: label
-      });
+        labelStyle: styles.defaultLabelStyle
+      }, label);
     });
   }, [actions]);
-  return createElement(View, {
-    style: getStylesFromColorScheme(styles.panelActionsContainer, styles.panelActionsContainerDark)
-  }, mappedActions, createElement(BottomSeparatorCover, null));
+  return /*#__PURE__*/_jsxs(View, {
+    style: getStylesFromColorScheme(styles.panelActionsContainer, styles.panelActionsContainerDark),
+    children: [mappedActions, /*#__PURE__*/_jsx(BottomSeparatorCover, {})]
+  });
 }
 export default withPreferredColorScheme(PanelActions);
 //# sourceMappingURL=actions.native.js.map

package/build-module/panel/actions.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","TextControl","withPreferredColorScheme","useMemo","styles","BottomSeparatorCover","PanelActions","actions","getStylesFromColorScheme","mappedActions","map","label","onPress","createElement","labelStyle","defaultLabelStyle","key","style","panelActionsContainer","panelActionsContainerDark"],"sources":["@wordpress/components/src/panel/actions.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './actions.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nfunction PanelActions( { actions, getStylesFromColorScheme } ) {\n\tconst mappedActions = useMemo( () => {\n\t\treturn actions.map( ( { label, onPress } ) => {\n\t\t\treturn (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ onPress }\n\t\t\t\t\tlabelStyle={ styles.defaultLabelStyle }\n\t\t\t\t\tkey={ label }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ actions ] );\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.panelActionsContainer,\n\t\t\t\tstyles.panelActionsContainerDark\n\t\t\t) }\n\t\t>\n\t\t\t{ mappedActions }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( PanelActions );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,gBAAgB;AACnC,OAAOC,oBAAoB,MAAM,0BAA0B;AAE3D,SAASC,YAAYA,CAAE;EAAEC,OAAO;EAAEC;AAAyB,CAAC,EAAG;EAC9D,MAAMC,aAAa,GAAGN,OAAO,CAAE,MAAM;IACpC,OAAOI,OAAO,CAACG,GAAG,CAAE,CAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,KAAM;MAC7C,OACCC,aAAA,CAACZ,WAAW;QACXU,KAAK,EAAGA,KAAO;QACfC,OAAO,EAAGA,OAAS;QACnBE,UAAU,EAAGV,MAAM,CAACW,iBAAmB;QACvCC,GAAG,EAAGL;MAAO,CACb,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEJ,OAAO,CAAG,CAAC;EAEhB,OACCM,aAAA,CAACb,IAAI;IACJiB,KAAK,EAAGT,wBAAwB,CAC/BJ,MAAM,CAACc,qBAAqB,EAC5Bd,MAAM,CAACe,yBACR;EAAG,GAEDV,aAAa,EACfI,aAAA,CAACR,oBAAoB,MAAE,CAClB,CAAC;AAET;AAEA,eAAeH,wBAAwB,CAAEI,YAAa,CAAC","ignoreList":[]}
+{"version":3,"names":["View","withPreferredColorScheme","useMemo","styles","BottomSeparatorCover","TextControl","jsx","_jsx","jsxs","_jsxs","PanelActions","actions","getStylesFromColorScheme","mappedActions","map","label","onPress","labelStyle","defaultLabelStyle","style","panelActionsContainer","panelActionsContainerDark","children"],"sources":["@wordpress/components/src/panel/actions.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './actions.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\nimport TextControl from '../text-control';\n\nfunction PanelActions( { actions, getStylesFromColorScheme } ) {\n\tconst mappedActions = useMemo( () => {\n\t\treturn actions.map( ( { label, onPress } ) => {\n\t\t\treturn (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ onPress }\n\t\t\t\t\tlabelStyle={ styles.defaultLabelStyle }\n\t\t\t\t\tkey={ label }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ actions ] );\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.panelActionsContainer,\n\t\t\t\tstyles.panelActionsContainerDark\n\t\t\t) }\n\t\t>\n\t\t\t{ mappedActions }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( PanelActions );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,gBAAgB;AACnC,OAAOC,oBAAoB,MAAM,0BAA0B;AAC3D,OAAOC,WAAW,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE1C,SAASC,YAAYA,CAAE;EAAEC,OAAO;EAAEC;AAAyB,CAAC,EAAG;EAC9D,MAAMC,aAAa,GAAGX,OAAO,CAAE,MAAM;IACpC,OAAOS,OAAO,CAACG,GAAG,CAAE,CAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,KAAM;MAC7C,oBACCT,IAAA,CAACF,WAAW;QACXU,KAAK,EAAGA,KAAO;QACfC,OAAO,EAAGA,OAAS;QACnBC,UAAU,EAAGd,MAAM,CAACe;MAAmB,GACjCH,KACN,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEJ,OAAO,CAAG,CAAC;EAEhB,oBACCF,KAAA,CAACT,IAAI;IACJmB,KAAK,EAAGP,wBAAwB,CAC/BT,MAAM,CAACiB,qBAAqB,EAC5BjB,MAAM,CAACkB,yBACR,CAAG;IAAAC,QAAA,GAEDT,aAAa,eACfN,IAAA,CAACH,oBAAoB,IAAE,CAAC;EAAA,CACnB,CAAC;AAET;AAEA,eAAeH,wBAAwB,CAAES,YAAa,CAAC","ignoreList":[]}

package/build-module/panel/body.js

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,8 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
 import Button from '../button';
 import Icon from '../icon';
 import { useControlledState, useUpdateEffect } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const noop = () => {};
 export function UnforwardedPanelBody(props, ref) {
   const {
@@ -65,21 +66,22 @@ export function UnforwardedPanelBody(props, ref) {
       });
     }
   }, [isOpened, scrollBehavior]);
-  const classes = classnames('components-panel__body', className, {
+  const classes = clsx('components-panel__body', className, {
     'is-opened': isOpened
   });
-  return createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classes,
-    ref: useMergeRefs([nodeRef, ref])
-  }, createElement(PanelBodyTitle, {
-    icon: icon,
-    isOpened: Boolean(isOpened),
-    onClick: handleOnToggle,
-    title: title,
-    ...buttonProps
-  }), typeof children === 'function' ? children({
-    opened: Boolean(isOpened)
-  }) : isOpened && children);
+    ref: useMergeRefs([nodeRef, ref]),
+    children: [/*#__PURE__*/_jsx(PanelBodyTitle, {
+      icon: icon,
+      isOpened: Boolean(isOpened),
+      onClick: handleOnToggle,
+      title: title,
+      ...buttonProps
+    }), typeof children === 'function' ? children({
+      opened: Boolean(isOpened)
+    }) : isOpened && children]
+  });
 }
 const PanelBodyTitle = forwardRef(({
   isOpened,
@@ -90,23 +92,26 @@ const PanelBodyTitle = forwardRef(({
   if (!title) {
     return null;
   }
-  return createElement("h2", {
-    className: "components-panel__body-title"
-  }, createElement(Button, {
-    className: "components-panel__body-toggle",
-    "aria-expanded": isOpened,
-    ref: ref,
-    ...props
-  }, createElement("span", {
-    "aria-hidden": "true"
-  }, createElement(Icon, {
-    className: "components-panel__arrow",
-    icon: isOpened ? chevronUp : chevronDown
-  })), title, icon && createElement(Icon, {
-    icon: icon,
-    className: "components-panel__icon",
-    size: 20
-  })));
+  return /*#__PURE__*/_jsx("h2", {
+    className: "components-panel__body-title",
+    children: /*#__PURE__*/_jsxs(Button, {
+      className: "components-panel__body-toggle",
+      "aria-expanded": isOpened,
+      ref: ref,
+      ...props,
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: "components-panel__arrow",
+          icon: isOpened ? chevronUp : chevronDown
+        })
+      }), title, icon && /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        className: "components-panel__icon",
+        size: 20
+      })]
+    })
+  });
 });
 export const PanelBody = forwardRef(UnforwardedPanelBody);
 export default PanelBody;

package/build-module/panel/body.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useReducedMotion","useMergeRefs","forwardRef","useRef","chevronUp","chevronDown","Button","Icon","useControlledState","useUpdateEffect","noop","UnforwardedPanelBody","props","ref","buttonProps","children","className","icon","initialOpen","onToggle","opened","title","scrollAfterOpen","isOpened","setIsOpened","initial","undefined","fallback","nodeRef","scrollBehavior","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","scrollIntoView","inline","block","behavior","classes","createElement","PanelBodyTitle","Boolean","onClick","size","PanelBody"],"sources":["@wordpress/components/src/panel/body.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { PanelBodyProps, PanelBodyTitleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\n\nconst noop = () => {};\n\nexport function UnforwardedPanelBody(\n\tprops: PanelBodyProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbuttonProps = {},\n\t\tchildren,\n\t\tclassName,\n\t\ticon,\n\t\tinitialOpen,\n\t\tonToggle = noop,\n\t\topened,\n\t\ttitle,\n\t\tscrollAfterOpen = true,\n\t} = props;\n\tconst [ isOpened, setIsOpened ] = useControlledState< boolean | undefined >(\n\t\topened,\n\t\t{\n\t\t\tinitial: initialOpen === undefined ? true : initialOpen,\n\t\t\tfallback: false,\n\t\t}\n\t);\n\tconst nodeRef = useRef< HTMLElement >( null );\n\n\t// Defaults to 'smooth' scrolling\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n\tconst scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n\n\tconst handleOnToggle = ( event: React.MouseEvent ) => {\n\t\tevent.preventDefault();\n\t\tconst next = ! isOpened;\n\t\tsetIsOpened( next );\n\t\tonToggle( next );\n\t};\n\n\t// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.\n\tconst scrollAfterOpenRef = useRef< boolean | undefined >();\n\tscrollAfterOpenRef.current = scrollAfterOpen;\n\t// Runs after initial render.\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\tisOpened &&\n\t\t\tscrollAfterOpenRef.current &&\n\t\t\tnodeRef.current?.scrollIntoView\n\t\t) {\n\t\t\t/*\n\t\t\t * Scrolls the content into view when visible.\n\t\t\t * This improves the UX when there are multiple stacking <PanelBody />\n\t\t\t * components in a scrollable container.\n\t\t\t */\n\t\t\tnodeRef.current.scrollIntoView( {\n\t\t\t\tinline: 'nearest',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tbehavior: scrollBehavior,\n\t\t\t} );\n\t\t}\n\t}, [ isOpened, scrollBehavior ] );\n\n\tconst classes = classnames( 'components-panel__body', className, {\n\t\t'is-opened': isOpened,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>\n\t\t\t<PanelBodyTitle\n\t\t\t\ticon={ icon }\n\t\t\t\tisOpened={ Boolean( isOpened ) }\n\t\t\t\tonClick={ handleOnToggle }\n\t\t\t\ttitle={ title }\n\t\t\t\t{ ...buttonProps }\n\t\t\t/>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( { opened: Boolean( isOpened ) } )\n\t\t\t\t: isOpened && children }\n\t\t</div>\n\t);\n}\n\nconst PanelBodyTitle = forwardRef(\n\t(\n\t\t{\n\t\t\tisOpened,\n\t\t\ticon,\n\t\t\ttitle,\n\t\t\t...props\n\t\t}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,\n\t\tref: React.ForwardedRef< any >\n\t) => {\n\t\tif ( ! title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<h2 className=\"components-panel__body-title\">\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-panel__body-toggle\"\n\t\t\t\t\taria-expanded={ isOpened }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ /*\n\t\t\t\t\tFirefox + NVDA don't announce aria-expanded because the browser\n\t\t\t\t\trepaints the whole element, so this wrapping span hides that.\n\t\t\t\t*/ }\n\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-panel__arrow\"\n\t\t\t\t\t\t\ticon={ isOpened ? chevronUp : chevronDown }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ title }\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tclassName=\"components-panel__icon\"\n\t\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Button>\n\t\t\t</h2>\n\t\t);\n\t}\n);\n\nexport const PanelBody = forwardRef( UnforwardedPanelBody );\n\nexport default PanelBody;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useReducedMotion","useMergeRefs","forwardRef","useRef","chevronUp","chevronDown","Button","Icon","useControlledState","useUpdateEffect","jsx","_jsx","jsxs","_jsxs","noop","UnforwardedPanelBody","props","ref","buttonProps","children","className","icon","initialOpen","onToggle","opened","title","scrollAfterOpen","isOpened","setIsOpened","initial","undefined","fallback","nodeRef","scrollBehavior","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","scrollIntoView","inline","block","behavior","classes","PanelBodyTitle","Boolean","onClick","size","PanelBody"],"sources":["@wordpress/components/src/panel/body.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { PanelBodyProps, PanelBodyTitleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\n\nconst noop = () => {};\n\nexport function UnforwardedPanelBody(\n\tprops: PanelBodyProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbuttonProps = {},\n\t\tchildren,\n\t\tclassName,\n\t\ticon,\n\t\tinitialOpen,\n\t\tonToggle = noop,\n\t\topened,\n\t\ttitle,\n\t\tscrollAfterOpen = true,\n\t} = props;\n\tconst [ isOpened, setIsOpened ] = useControlledState< boolean | undefined >(\n\t\topened,\n\t\t{\n\t\t\tinitial: initialOpen === undefined ? true : initialOpen,\n\t\t\tfallback: false,\n\t\t}\n\t);\n\tconst nodeRef = useRef< HTMLElement >( null );\n\n\t// Defaults to 'smooth' scrolling\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n\tconst scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n\n\tconst handleOnToggle = ( event: React.MouseEvent ) => {\n\t\tevent.preventDefault();\n\t\tconst next = ! isOpened;\n\t\tsetIsOpened( next );\n\t\tonToggle( next );\n\t};\n\n\t// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.\n\tconst scrollAfterOpenRef = useRef< boolean | undefined >();\n\tscrollAfterOpenRef.current = scrollAfterOpen;\n\t// Runs after initial render.\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\tisOpened &&\n\t\t\tscrollAfterOpenRef.current &&\n\t\t\tnodeRef.current?.scrollIntoView\n\t\t) {\n\t\t\t/*\n\t\t\t * Scrolls the content into view when visible.\n\t\t\t * This improves the UX when there are multiple stacking <PanelBody />\n\t\t\t * components in a scrollable container.\n\t\t\t */\n\t\t\tnodeRef.current.scrollIntoView( {\n\t\t\t\tinline: 'nearest',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tbehavior: scrollBehavior,\n\t\t\t} );\n\t\t}\n\t}, [ isOpened, scrollBehavior ] );\n\n\tconst classes = clsx( 'components-panel__body', className, {\n\t\t'is-opened': isOpened,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>\n\t\t\t<PanelBodyTitle\n\t\t\t\ticon={ icon }\n\t\t\t\tisOpened={ Boolean( isOpened ) }\n\t\t\t\tonClick={ handleOnToggle }\n\t\t\t\ttitle={ title }\n\t\t\t\t{ ...buttonProps }\n\t\t\t/>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( { opened: Boolean( isOpened ) } )\n\t\t\t\t: isOpened && children }\n\t\t</div>\n\t);\n}\n\nconst PanelBodyTitle = forwardRef(\n\t(\n\t\t{\n\t\t\tisOpened,\n\t\t\ticon,\n\t\t\ttitle,\n\t\t\t...props\n\t\t}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,\n\t\tref: React.ForwardedRef< any >\n\t) => {\n\t\tif ( ! title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<h2 className=\"components-panel__body-title\">\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-panel__body-toggle\"\n\t\t\t\t\taria-expanded={ isOpened }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ /*\n\t\t\t\t\tFirefox + NVDA don't announce aria-expanded because the browser\n\t\t\t\t\trepaints the whole element, so this wrapping span hides that.\n\t\t\t\t*/ }\n\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-panel__arrow\"\n\t\t\t\t\t\t\ticon={ isOpened ? chevronUp : chevronDown }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ title }\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tclassName=\"components-panel__icon\"\n\t\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Button>\n\t\t\t</h2>\n\t\t);\n\t}\n);\n\nexport const PanelBody = forwardRef( UnforwardedPanelBody );\n\nexport default PanelBody;\n"],"mappings":"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","ignoreList":[]}

package/build-module/panel/body.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -9,18 +8,22 @@ import { Text, View } from 'react-native';
  */
 import styles from './body.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export function PanelBody({
   children,
   title,
   style,
   titleStyle = {}
 }) {
-  return createElement(View, {
-    style: [styles.panelContainer, style]
-  }, title && createElement(Text, {
-    accessibilityRole: "header",
-    style: [styles.sectionHeaderText, titleStyle]
-  }, title), children, createElement(BottomSeparatorCover, null));
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.panelContainer, style],
+    children: [title && /*#__PURE__*/_jsx(Text, {
+      accessibilityRole: "header",
+      style: [styles.sectionHeaderText, titleStyle],
+      children: title
+    }), children, /*#__PURE__*/_jsx(BottomSeparatorCover, {})]
+  });
 }
 export default PanelBody;
 //# sourceMappingURL=body.native.js.map

package/build-module/panel/body.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","View","styles","BottomSeparatorCover","PanelBody","children","title","style","titleStyle","createElement","panelContainer","accessibilityRole","sectionHeaderText"],"sources":["@wordpress/components/src/panel/body.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './body.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nexport function PanelBody( { children, title, style, titleStyle = {} } ) {\n\treturn (\n\t\t<View style={ [ styles.panelContainer, style ] }>\n\t\t\t{ title && (\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tstyle={ [ styles.sectionHeaderText, titleStyle ] }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default PanelBody;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,IAAI,QAAQ,cAAc;;AAEzC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,aAAa;AAChC,OAAOC,oBAAoB,MAAM,0BAA0B;AAE3D,OAAO,SAASC,SAASA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,KAAK;EAAEC,UAAU,GAAG,CAAC;AAAE,CAAC,EAAG;EACxE,OACCC,aAAA,CAACR,IAAI;IAACM,KAAK,EAAG,CAAEL,MAAM,CAACQ,cAAc,EAAEH,KAAK;EAAI,GAC7CD,KAAK,IACNG,aAAA,CAACT,IAAI;IACJW,iBAAiB,EAAC,QAAQ;IAC1BJ,KAAK,EAAG,CAAEL,MAAM,CAACU,iBAAiB,EAAEJ,UAAU;EAAI,GAEhDF,KACG,CACN,EACCD,QAAQ,EACVI,aAAA,CAACN,oBAAoB,MAAE,CAClB,CAAC;AAET;AAEA,eAAeC,SAAS","ignoreList":[]}
+{"version":3,"names":["Text","View","styles","BottomSeparatorCover","jsx","_jsx","jsxs","_jsxs","PanelBody","children","title","style","titleStyle","panelContainer","accessibilityRole","sectionHeaderText"],"sources":["@wordpress/components/src/panel/body.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './body.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nexport function PanelBody( { children, title, style, titleStyle = {} } ) {\n\treturn (\n\t\t<View style={ [ styles.panelContainer, style ] }>\n\t\t\t{ title && (\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tstyle={ [ styles.sectionHeaderText, titleStyle ] }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default PanelBody;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,IAAI,QAAQ,cAAc;;AAEzC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,aAAa;AAChC,OAAOC,oBAAoB,MAAM,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE5D,OAAO,SAASC,SAASA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,KAAK;EAAEC,UAAU,GAAG,CAAC;AAAE,CAAC,EAAG;EACxE,oBACCL,KAAA,CAACN,IAAI;IAACU,KAAK,EAAG,CAAET,MAAM,CAACW,cAAc,EAAEF,KAAK,CAAI;IAAAF,QAAA,GAC7CC,KAAK,iBACNL,IAAA,CAACL,IAAI;MACJc,iBAAiB,EAAC,QAAQ;MAC1BH,KAAK,EAAG,CAAET,MAAM,CAACa,iBAAiB,EAAEH,UAAU,CAAI;MAAAH,QAAA,EAEhDC;IAAK,CACF,CACN,EACCD,QAAQ,eACVJ,IAAA,CAACF,oBAAoB,IAAE,CAAC;EAAA,CACnB,CAAC;AAET;AAEA,eAAeK,SAAS","ignoreList":[]}

package/build-module/panel/bottom-separator-cover.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -13,10 +12,11 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './bottom-separator-cover.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
 function BottomSeparatorCover({
   getStylesFromColorScheme
 }) {
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     style: getStylesFromColorScheme(styles.coverSeparator, styles.coverSeparatorDark)
   });
 }

package/build-module/panel/bottom-separator-cover.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","withPreferredColorScheme","styles","BottomSeparatorCover","getStylesFromColorScheme","createElement","style","coverSeparator","coverSeparatorDark"],"sources":["@wordpress/components/src/panel/bottom-separator-cover.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './bottom-separator-cover.scss';\n\nfunction BottomSeparatorCover( { getStylesFromColorScheme } ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.coverSeparator,\n\t\t\t\tstyles.coverSeparatorDark\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( BottomSeparatorCover );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,+BAA+B;AAElD,SAASC,oBAAoBA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC7D,OACCC,aAAA,CAACL,IAAI;IACJM,KAAK,EAAGF,wBAAwB,CAC/BF,MAAM,CAACK,cAAc,EACrBL,MAAM,CAACM,kBACR;EAAG,CACH,CAAC;AAEJ;AAEA,eAAeP,wBAAwB,CAAEE,oBAAqB,CAAC","ignoreList":[]}
+{"version":3,"names":["View","withPreferredColorScheme","styles","jsx","_jsx","BottomSeparatorCover","getStylesFromColorScheme","style","coverSeparator","coverSeparatorDark"],"sources":["@wordpress/components/src/panel/bottom-separator-cover.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './bottom-separator-cover.scss';\n\nfunction BottomSeparatorCover( { getStylesFromColorScheme } ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.coverSeparator,\n\t\t\t\tstyles.coverSeparatorDark\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( BottomSeparatorCover );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnD,SAASC,oBAAoBA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC7D,oBACCF,IAAA,CAACJ,IAAI;IACJO,KAAK,EAAGD,wBAAwB,CAC/BJ,MAAM,CAACM,cAAc,EACrBN,MAAM,CAACO,kBACR;EAAG,CACH,CAAC;AAEJ;AAEA,eAAeR,wBAAwB,CAAEI,oBAAqB,CAAC","ignoreList":[]}

package/build-module/panel/header.js

@@ -1,4 +1,5 @@
-import { createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Internal dependencies
  */
@@ -12,9 +13,12 @@ function PanelHeader({
   label,
   children
 }) {
-  return createElement("div", {
-    className: "components-panel__header"
-  }, label && createElement("h2", null, label), children);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-panel__header",
+    children: [label && /*#__PURE__*/_jsx("h2", {
+      children: label
+    }), children]
+  });
 }
 export default PanelHeader;
 //# sourceMappingURL=header.js.map

package/build-module/panel/header.js.map

@@ -1 +1 @@
-{"version":3,"names":["PanelHeader","label","children","createElement","className"],"sources":["@wordpress/components/src/panel/header.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { PanelHeaderProps } from './types';\n\n/**\n * `PanelHeader` renders the header for the `Panel`.\n * This is used by the `Panel` component under the hood,\n * so it does not typically need to be used.\n */\nfunction PanelHeader( { label, children }: PanelHeaderProps ) {\n\treturn (\n\t\t<div className=\"components-panel__header\">\n\t\t\t{ label && <h2>{ label }</h2> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default PanelHeader;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAWA,CAAE;EAAEC,KAAK;EAAEC;AAA2B,CAAC,EAAG;EAC7D,OACCC,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCH,KAAK,IAAIE,aAAA,aAAMF,KAAW,CAAC,EAC3BC,QACE,CAAC;AAER;AAEA,eAAeF,WAAW","ignoreList":[]}
+{"version":3,"names":["PanelHeader","label","children","_jsxs","className","_jsx"],"sources":["@wordpress/components/src/panel/header.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { PanelHeaderProps } from './types';\n\n/**\n * `PanelHeader` renders the header for the `Panel`.\n * This is used by the `Panel` component under the hood,\n * so it does not typically need to be used.\n */\nfunction PanelHeader( { label, children }: PanelHeaderProps ) {\n\treturn (\n\t\t<div className=\"components-panel__header\">\n\t\t\t{ label && <h2>{ label }</h2> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default PanelHeader;\n"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAWA,CAAE;EAAEC,KAAK;EAAEC;AAA2B,CAAC,EAAG;EAC7D,oBACCC,KAAA;IAAKC,SAAS,EAAC,0BAA0B;IAAAF,QAAA,GACtCD,KAAK,iBAAII,IAAA;MAAAH,QAAA,EAAMD;IAAK,CAAM,CAAC,EAC3BC,QAAQ;EAAA,CACN,CAAC;AAER;AAEA,eAAeF,WAAW","ignoreList":[]}

package/build-module/panel/index.js

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,18 +12,21 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import PanelHeader from './header';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedPanel({
   header,
   className,
   children
 }, ref) {
-  const classNames = classnames(className, 'components-panel');
-  return createElement("div", {
+  const classNames = clsx(className, 'components-panel');
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    ref: ref
-  }, header && createElement(PanelHeader, {
-    label: header
-  }), children);
+    ref: ref,
+    children: [header && /*#__PURE__*/_jsx(PanelHeader, {
+      label: header
+    }), children]
+  });
 }
 
 /**

package/build-module/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","forwardRef","PanelHeader","UnforwardedPanel","header","className","children","ref","classNames","createElement","label","Panel"],"sources":["@wordpress/components/src/panel/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport PanelHeader from './header';\nimport type { PanelProps } from './types';\n\nfunction UnforwardedPanel(\n\t{ header, className, children }: PanelProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst classNames = classnames( className, 'components-panel' );\n\treturn (\n\t\t<div className={ classNames } ref={ ref }>\n\t\t\t{ header && <PanelHeader label={ header } /> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `Panel` expands and collapses multiple sections of content.\n *\n * ```jsx\n * import { Panel, PanelBody, PanelRow } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPanel = () => (\n * \t<Panel header=\"My Panel\">\n * \t\t<PanelBody title=\"My Block Settings\" icon={ more } initialOpen={ true }>\n * \t\t\t<PanelRow>My Panel Inputs and Labels</PanelRow>\n * \t\t</PanelBody>\n * \t</Panel>\n * );\n * ```\n */\nexport const Panel = forwardRef( UnforwardedPanel );\n\nexport default Panel;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,UAAU;AAGlC,SAASC,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAGR,UAAU,CAAEK,SAAS,EAAE,kBAAmB,CAAC;EAC9D,OACCI,aAAA;IAAKJ,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA;EAAK,GACtCH,MAAM,IAAIK,aAAA,CAACP,WAAW;IAACQ,KAAK,EAAGN;EAAQ,CAAE,CAAC,EAC1CE,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,KAAK,GAAGV,UAAU,CAAEE,gBAAiB,CAAC;AAEnD,eAAeQ,KAAK","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","PanelHeader","jsx","_jsx","jsxs","_jsxs","UnforwardedPanel","header","className","children","ref","classNames","label","Panel"],"sources":["@wordpress/components/src/panel/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport PanelHeader from './header';\nimport type { PanelProps } from './types';\n\nfunction UnforwardedPanel(\n\t{ header, className, children }: PanelProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst classNames = clsx( className, 'components-panel' );\n\treturn (\n\t\t<div className={ classNames } ref={ ref }>\n\t\t\t{ header && <PanelHeader label={ header } /> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `Panel` expands and collapses multiple sections of content.\n *\n * ```jsx\n * import { Panel, PanelBody, PanelRow } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPanel = () => (\n * \t<Panel header=\"My Panel\">\n * \t\t<PanelBody title=\"My Block Settings\" icon={ more } initialOpen={ true }>\n * \t\t\t<PanelRow>My Panel Inputs and Labels</PanelRow>\n * \t\t</PanelBody>\n * \t</Panel>\n * );\n * ```\n */\nexport const Panel = forwardRef( UnforwardedPanel );\n\nexport default Panel;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGnC,SAASC,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAGZ,IAAI,CAAES,SAAS,EAAE,kBAAmB,CAAC;EACxD,oBACCH,KAAA;IAAKG,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA,GAAK;IAAAD,QAAA,GACtCF,MAAM,iBAAIJ,IAAA,CAACF,WAAW;MAACW,KAAK,EAAGL;IAAQ,CAAE,CAAC,EAC1CE,QAAQ;EAAA,CACN,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,KAAK,GAAGb,UAAU,CAAEM,gBAAiB,CAAC;AAEnD,eAAeO,KAAK","ignoreList":[]}

package/build-module/panel/row.js

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,15 +11,16 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedPanelRow({
   className,
   children
 }, ref) {
-  return createElement("div", {
-    className: classnames('components-panel__row', className),
-    ref: ref
-  }, children);
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx('components-panel__row', className),
+    ref: ref,
+    children: children
+  });
 }
 
 /**

package/build-module/panel/row.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","forwardRef","UnforwardedPanelRow","className","children","ref","createElement","PanelRow"],"sources":["@wordpress/components/src/panel/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { PanelRowProps } from './types';\n\nfunction UnforwardedPanelRow(\n\t{ className, children }: PanelRowProps,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-panel__row', className ) }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `PanelRow` is a generic container for rows within a `PanelBody`.\n * It is a flex container with a top margin for spacing.\n */\nexport const PanelRow = forwardRef( UnforwardedPanelRow );\n\nexport default PanelRow;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAG/C;AACA;AACA;;AAGA,SAASC,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,OACCC,aAAA;IACCH,SAAS,EAAGH,UAAU,CAAE,uBAAuB,EAAEG,SAAU,CAAG;IAC9DE,GAAG,EAAGA;EAAK,GAETD,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMG,QAAQ,GAAGN,UAAU,CAAEC,mBAAoB,CAAC;AAEzD,eAAeK,QAAQ","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","jsx","_jsx","UnforwardedPanelRow","className","children","ref","PanelRow"],"sources":["@wordpress/components/src/panel/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { PanelRowProps } from './types';\n\nfunction UnforwardedPanelRow(\n\t{ className, children }: PanelRowProps,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'components-panel__row', className ) }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `PanelRow` is a generic container for rows within a `PanelBody`.\n * It is a flex container with a top margin for spacing.\n */\nexport const PanelRow = forwardRef( UnforwardedPanelRow );\n\nexport default PanelRow;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAG/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,SAASC,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,oBACCJ,IAAA;IACCE,SAAS,EAAGL,IAAI,CAAE,uBAAuB,EAAEK,SAAU,CAAG;IACxDE,GAAG,EAAGA,GAAK;IAAAD,QAAA,EAETA;EAAQ,CACN,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAME,QAAQ,GAAGP,UAAU,CAAEG,mBAAoB,CAAC;AAEzD,eAAeI,QAAQ","ignoreList":[]}

package/build-module/placeholder/index.js

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,16 +15,19 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import Icon from '../icon';
-const PlaceholderIllustration = createElement(SVG, {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PlaceholderIllustration = /*#__PURE__*/_jsx(SVG, {
   className: "components-placeholder__illustration",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 60 60",
-  preserveAspectRatio: "none"
-}, createElement(Path, {
-  vectorEffect: "non-scaling-stroke",
-  d: "M60 60 0 0"
-}));
+  preserveAspectRatio: "none",
+  children: /*#__PURE__*/_jsx(Path, {
+    vectorEffect: "non-scaling-stroke",
+    d: "M60 60 0 0"
+  })
+});
 
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
@@ -64,8 +66,8 @@ export function Placeholder(props) {
       'is-small': width < 160
     };
   }
-  const classes = classnames('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
-  const fieldsetClasses = classnames('components-placeholder__fieldset', {
+  const classes = clsx('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
+  const fieldsetClasses = clsx('components-placeholder__fieldset', {
     'is-column-layout': isColumnLayout
   });
   useEffect(() => {
@@ -73,20 +75,25 @@ export function Placeholder(props) {
       speak(instructions);
     }
   }, [instructions]);
-  return createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ...additionalProps,
-    className: classes
-  }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && createElement("div", {
-    className: "components-placeholder__preview"
-  }, preview), createElement("div", {
-    className: "components-placeholder__label"
-  }, createElement(Icon, {
-    icon: icon
-  }), label), !!instructions && createElement("div", {
-    className: "components-placeholder__instructions"
-  }, instructions), createElement("div", {
-    className: fieldsetClasses
-  }, children));
+    className: classes,
+    children: [withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && /*#__PURE__*/_jsx("div", {
+      className: "components-placeholder__preview",
+      children: preview
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "components-placeholder__label",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: icon
+      }), label]
+    }), !!instructions && /*#__PURE__*/_jsx("div", {
+      className: "components-placeholder__instructions",
+      children: instructions
+    }), /*#__PURE__*/_jsx("div", {
+      className: fieldsetClasses,
+      children: children
+    })]
+  });
 }
 export default Placeholder;
 //# sourceMappingURL=index.js.map

package/build-module/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useResizeObserver","SVG","Path","useEffect","speak","Icon","PlaceholderIllustration","createElement","className","fill","xmlns","viewBox","preserveAspectRatio","vectorEffect","d","Placeholder","props","icon","children","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","modifierClassNames","classes","fieldsetClasses"],"sources":["@wordpress/components/src/placeholder/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver } from '@wordpress/compose';\nimport { SVG, Path } from '@wordpress/primitives';\nimport { useEffect } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport type { PlaceholderProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst PlaceholderIllustration = (\n\t<SVG\n\t\tclassName=\"components-placeholder__illustration\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 60 60\"\n\t\tpreserveAspectRatio=\"none\"\n\t>\n\t\t<Path vectorEffect=\"non-scaling-stroke\" d=\"M60 60 0 0\" />\n\t</SVG>\n);\n\n/**\n * Renders a placeholder. Normally used by blocks to render their empty state.\n *\n * ```jsx\n * import { Placeholder } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPlaceholder = () => <Placeholder icon={ more } label=\"Placeholder\" />;\n * ```\n */\nexport function Placeholder(\n\tprops: WordPressComponentProps< PlaceholderProps, 'div', false >\n) {\n\tconst {\n\t\ticon,\n\t\tchildren,\n\t\tlabel,\n\t\tinstructions,\n\t\tclassName,\n\t\tnotices,\n\t\tpreview,\n\t\tisColumnLayout,\n\t\twithIllustration,\n\t\t...additionalProps\n\t} = props;\n\tconst [ resizeListener, { width } ] = useResizeObserver();\n\n\t// Since `useResizeObserver` will report a width of `null` until after the\n\t// first render, avoid applying any modifier classes until width is known.\n\tlet modifierClassNames;\n\tif ( typeof width === 'number' ) {\n\t\tmodifierClassNames = {\n\t\t\t'is-large': width >= 480,\n\t\t\t'is-medium': width >= 160 && width < 480,\n\t\t\t'is-small': width < 160,\n\t\t};\n\t}\n\n\tconst classes = classnames(\n\t\t'components-placeholder',\n\t\tclassName,\n\t\tmodifierClassNames,\n\t\twithIllustration ? 'has-illustration' : null\n\t);\n\n\tconst fieldsetClasses = classnames( 'components-placeholder__fieldset', {\n\t\t'is-column-layout': isColumnLayout,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( instructions ) {\n\t\t\tspeak( instructions );\n\t\t}\n\t}, [ instructions ] );\n\n\treturn (\n\t\t<div { ...additionalProps } className={ classes }>\n\t\t\t{ withIllustration ? PlaceholderIllustration : null }\n\t\t\t{ resizeListener }\n\t\t\t{ notices }\n\t\t\t{ preview && (\n\t\t\t\t<div className=\"components-placeholder__preview\">\n\t\t\t\t\t{ preview }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"components-placeholder__label\">\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t{ label }\n\t\t\t</div>\n\t\t\t{ !! instructions && (\n\t\t\t\t<div className=\"components-placeholder__instructions\">\n\t\t\t\t\t{ instructions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className={ fieldsetClasses }>{ children }</div>\n\t\t</div>\n\t);\n}\n\nexport default Placeholder;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,GAAG,EAAEC,IAAI,QAAQ,uBAAuB;AACjD,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAI1B,MAAMC,uBAAuB,GAC5BC,aAAA,CAACN,GAAG;EACHO,SAAS,EAAC,sCAAsC;EAChDC,IAAI,EAAC,MAAM;EACXC,KAAK,EAAC,4BAA4B;EAClCC,OAAO,EAAC,WAAW;EACnBC,mBAAmB,EAAC;AAAM,GAE1BL,aAAA,CAACL,IAAI;EAACW,YAAY,EAAC,oBAAoB;EAACC,CAAC,EAAC;AAAY,CAAE,CACpD,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAC1BC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZZ,SAAS;IACTa,OAAO;IACPC,OAAO;IACPC,cAAc;IACdC,gBAAgB;IAChB,GAAGC;EACJ,CAAC,GAAGT,KAAK;EACT,MAAM,CAAEU,cAAc,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAG3B,iBAAiB,CAAC,CAAC;;EAEzD;EACA;EACA,IAAI4B,kBAAkB;EACtB,IAAK,OAAOD,KAAK,KAAK,QAAQ,EAAG;IAChCC,kBAAkB,GAAG;MACpB,UAAU,EAAED,KAAK,IAAI,GAAG;MACxB,WAAW,EAAEA,KAAK,IAAI,GAAG,IAAIA,KAAK,GAAG,GAAG;MACxC,UAAU,EAAEA,KAAK,GAAG;IACrB,CAAC;EACF;EAEA,MAAME,OAAO,GAAG9B,UAAU,CACzB,wBAAwB,EACxBS,SAAS,EACToB,kBAAkB,EAClBJ,gBAAgB,GAAG,kBAAkB,GAAG,IACzC,CAAC;EAED,MAAMM,eAAe,GAAG/B,UAAU,CAAE,kCAAkC,EAAE;IACvE,kBAAkB,EAAEwB;EACrB,CAAE,CAAC;EAEHpB,SAAS,CAAE,MAAM;IAChB,IAAKiB,YAAY,EAAG;MACnBhB,KAAK,CAAEgB,YAAa,CAAC;IACtB;EACD,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OACCb,aAAA;IAAA,GAAUkB,eAAe;IAAGjB,SAAS,EAAGqB;EAAS,GAC9CL,gBAAgB,GAAGlB,uBAAuB,GAAG,IAAI,EACjDoB,cAAc,EACdL,OAAO,EACPC,OAAO,IACRf,aAAA;IAAKC,SAAS,EAAC;EAAiC,GAC7Cc,OACE,CACL,EACDf,aAAA;IAAKC,SAAS,EAAC;EAA+B,GAC7CD,aAAA,CAACF,IAAI;IAACY,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBE,KACE,CAAC,EACJ,CAAC,CAAEC,YAAY,IAChBb,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDY,YACE,CACL,EACDb,aAAA;IAAKC,SAAS,EAAGsB;EAAiB,GAAGZ,QAAe,CAChD,CAAC;AAER;AAEA,eAAeH,WAAW","ignoreList":[]}
+{"version":3,"names":["clsx","useResizeObserver","SVG","Path","useEffect","speak","Icon","jsx","_jsx","jsxs","_jsxs","PlaceholderIllustration","className","fill","xmlns","viewBox","preserveAspectRatio","children","vectorEffect","d","Placeholder","props","icon","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","modifierClassNames","classes","fieldsetClasses"],"sources":["@wordpress/components/src/placeholder/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver } from '@wordpress/compose';\nimport { SVG, Path } from '@wordpress/primitives';\nimport { useEffect } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport type { PlaceholderProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst PlaceholderIllustration = (\n\t<SVG\n\t\tclassName=\"components-placeholder__illustration\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 60 60\"\n\t\tpreserveAspectRatio=\"none\"\n\t>\n\t\t<Path vectorEffect=\"non-scaling-stroke\" d=\"M60 60 0 0\" />\n\t</SVG>\n);\n\n/**\n * Renders a placeholder. Normally used by blocks to render their empty state.\n *\n * ```jsx\n * import { Placeholder } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPlaceholder = () => <Placeholder icon={ more } label=\"Placeholder\" />;\n * ```\n */\nexport function Placeholder(\n\tprops: WordPressComponentProps< PlaceholderProps, 'div', false >\n) {\n\tconst {\n\t\ticon,\n\t\tchildren,\n\t\tlabel,\n\t\tinstructions,\n\t\tclassName,\n\t\tnotices,\n\t\tpreview,\n\t\tisColumnLayout,\n\t\twithIllustration,\n\t\t...additionalProps\n\t} = props;\n\tconst [ resizeListener, { width } ] = useResizeObserver();\n\n\t// Since `useResizeObserver` will report a width of `null` until after the\n\t// first render, avoid applying any modifier classes until width is known.\n\tlet modifierClassNames;\n\tif ( typeof width === 'number' ) {\n\t\tmodifierClassNames = {\n\t\t\t'is-large': width >= 480,\n\t\t\t'is-medium': width >= 160 && width < 480,\n\t\t\t'is-small': width < 160,\n\t\t};\n\t}\n\n\tconst classes = clsx(\n\t\t'components-placeholder',\n\t\tclassName,\n\t\tmodifierClassNames,\n\t\twithIllustration ? 'has-illustration' : null\n\t);\n\n\tconst fieldsetClasses = clsx( 'components-placeholder__fieldset', {\n\t\t'is-column-layout': isColumnLayout,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( instructions ) {\n\t\t\tspeak( instructions );\n\t\t}\n\t}, [ instructions ] );\n\n\treturn (\n\t\t<div { ...additionalProps } className={ classes }>\n\t\t\t{ withIllustration ? PlaceholderIllustration : null }\n\t\t\t{ resizeListener }\n\t\t\t{ notices }\n\t\t\t{ preview && (\n\t\t\t\t<div className=\"components-placeholder__preview\">\n\t\t\t\t\t{ preview }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"components-placeholder__label\">\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t{ label }\n\t\t\t</div>\n\t\t\t{ !! instructions && (\n\t\t\t\t<div className=\"components-placeholder__instructions\">\n\t\t\t\t\t{ instructions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className={ fieldsetClasses }>{ children }</div>\n\t\t</div>\n\t);\n}\n\nexport default Placeholder;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,GAAG,EAAEC,IAAI,QAAQ,uBAAuB;AACjD,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAI3B,MAAMC,uBAAuB,gBAC5BH,IAAA,CAACN,GAAG;EACHU,SAAS,EAAC,sCAAsC;EAChDC,IAAI,EAAC,MAAM;EACXC,KAAK,EAAC,4BAA4B;EAClCC,OAAO,EAAC,WAAW;EACnBC,mBAAmB,EAAC,MAAM;EAAAC,QAAA,eAE1BT,IAAA,CAACL,IAAI;IAACe,YAAY,EAAC,oBAAoB;IAACC,CAAC,EAAC;EAAY,CAAE;AAAC,CACrD,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAC1BC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJL,QAAQ;IACRM,KAAK;IACLC,YAAY;IACZZ,SAAS;IACTa,OAAO;IACPC,OAAO;IACPC,cAAc;IACdC,gBAAgB;IAChB,GAAGC;EACJ,CAAC,GAAGR,KAAK;EACT,MAAM,CAAES,cAAc,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAG9B,iBAAiB,CAAC,CAAC;;EAEzD;EACA;EACA,IAAI+B,kBAAkB;EACtB,IAAK,OAAOD,KAAK,KAAK,QAAQ,EAAG;IAChCC,kBAAkB,GAAG;MACpB,UAAU,EAAED,KAAK,IAAI,GAAG;MACxB,WAAW,EAAEA,KAAK,IAAI,GAAG,IAAIA,KAAK,GAAG,GAAG;MACxC,UAAU,EAAEA,KAAK,GAAG;IACrB,CAAC;EACF;EAEA,MAAME,OAAO,GAAGjC,IAAI,CACnB,wBAAwB,EACxBY,SAAS,EACToB,kBAAkB,EAClBJ,gBAAgB,GAAG,kBAAkB,GAAG,IACzC,CAAC;EAED,MAAMM,eAAe,GAAGlC,IAAI,CAAE,kCAAkC,EAAE;IACjE,kBAAkB,EAAE2B;EACrB,CAAE,CAAC;EAEHvB,SAAS,CAAE,MAAM;IAChB,IAAKoB,YAAY,EAAG;MACnBnB,KAAK,CAAEmB,YAAa,CAAC;IACtB;EACD,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,oBACCd,KAAA;IAAA,GAAUmB,eAAe;IAAGjB,SAAS,EAAGqB,OAAS;IAAAhB,QAAA,GAC9CW,gBAAgB,GAAGjB,uBAAuB,GAAG,IAAI,EACjDmB,cAAc,EACdL,OAAO,EACPC,OAAO,iBACRlB,IAAA;MAAKI,SAAS,EAAC,iCAAiC;MAAAK,QAAA,EAC7CS;IAAO,CACL,CACL,eACDhB,KAAA;MAAKE,SAAS,EAAC,+BAA+B;MAAAK,QAAA,gBAC7CT,IAAA,CAACF,IAAI;QAACgB,IAAI,EAAGA;MAAM,CAAE,CAAC,EACpBC,KAAK;IAAA,CACH,CAAC,EACJ,CAAC,CAAEC,YAAY,iBAChBhB,IAAA;MAAKI,SAAS,EAAC,sCAAsC;MAAAK,QAAA,EAClDO;IAAY,CACV,CACL,eACDhB,IAAA;MAAKI,SAAS,EAAGsB,eAAiB;MAAAjB,QAAA,EAAGA;IAAQ,CAAO,CAAC;EAAA,CACjD,CAAC;AAER;AAEA,eAAeG,WAAW","ignoreList":[]}