@wordpress/components 27.5.0 → 28.0.0

package/build/panel/actions.native.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
-var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _actions = _interopRequireDefault(require("./actions.scss"));
 var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-cover"));
+var _textControl = _interopRequireDefault(require("../text-control"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -33,17 +33,17 @@ function PanelActions({
       label,
       onPress
     }) => {
-      return (0, _react.createElement)(_components.TextControl, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_textControl.default, {
         label: label,
         onPress: onPress,
-        labelStyle: _actions.default.defaultLabelStyle,
-        key: label
-      });
+        labelStyle: _actions.default.defaultLabelStyle
+      }, label);
     });
   }, [actions]);
-  return (0, _react.createElement)(_reactNative.View, {
-    style: getStylesFromColorScheme(_actions.default.panelActionsContainer, _actions.default.panelActionsContainerDark)
-  }, mappedActions, (0, _react.createElement)(_bottomSeparatorCover.default, null));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: getStylesFromColorScheme(_actions.default.panelActionsContainer, _actions.default.panelActionsContainerDark),
+    children: [mappedActions, /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSeparatorCover.default, {})]
+  });
 }
 var _default = exports.default = (0, _compose.withPreferredColorScheme)(PanelActions);
 //# sourceMappingURL=actions.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_components","_compose","_element","_actions","_interopRequireDefault","_bottomSeparatorCover","PanelActions","actions","getStylesFromColorScheme","mappedActions","useMemo","map","label","onPress","_react","createElement","TextControl","labelStyle","styles","defaultLabelStyle","key","View","style","panelActionsContainer","panelActionsContainerDark","default","_default","exports","withPreferredColorScheme"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAD,sBAAA,CAAAL,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAIA,SAASO,YAAYA,CAAE;EAAEC,OAAO;EAAEC;AAAyB,CAAC,EAAG;EAC9D,MAAMC,aAAa,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACpC,OAAOH,OAAO,CAACI,GAAG,CAAE,CAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,KAAM;MAC7C,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAgB,WAAW;QACXJ,KAAK,EAAGA,KAAO;QACfC,OAAO,EAAGA,OAAS;QACnBI,UAAU,EAAGC,gBAAM,CAACC,iBAAmB;QACvCC,GAAG,EAAGR;MAAO,CACb,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEL,OAAO,CAAG,CAAC;EAEhB,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAuB,IAAI;IACJC,KAAK,EAAGd,wBAAwB,CAC/BU,gBAAM,CAACK,qBAAqB,EAC5BL,gBAAM,CAACM,yBACR;EAAG,GAEDf,aAAa,EACf,IAAAK,MAAA,CAAAC,aAAA,EAACV,qBAAA,CAAAoB,OAAoB,MAAE,CAClB,CAAC;AAET;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEc,IAAAG,iCAAwB,EAAEtB,YAAa,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_compose","_element","_actions","_interopRequireDefault","_bottomSeparatorCover","_textControl","_jsxRuntime","PanelActions","actions","getStylesFromColorScheme","mappedActions","useMemo","map","label","onPress","jsx","default","labelStyle","styles","defaultLabelStyle","jsxs","View","style","panelActionsContainer","panelActionsContainerDark","children","_default","exports","withPreferredColorScheme"],"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":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,YAAA,GAAAF,sBAAA,CAAAJ,OAAA;AAA0C,IAAAO,WAAA,GAAAP,OAAA;AAhB1C;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,SAASQ,YAAYA,CAAE;EAAEC,OAAO;EAAEC;AAAyB,CAAC,EAAG;EAC9D,MAAMC,aAAa,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACpC,OAAOH,OAAO,CAACI,GAAG,CAAE,CAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,KAAM;MAC7C,oBACC,IAAAR,WAAA,CAAAS,GAAA,EAACV,YAAA,CAAAW,OAAW;QACXH,KAAK,EAAGA,KAAO;QACfC,OAAO,EAAGA,OAAS;QACnBG,UAAU,EAAGC,gBAAM,CAACC;MAAmB,GACjCN,KACN,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEL,OAAO,CAAG,CAAC;EAEhB,oBACC,IAAAF,WAAA,CAAAc,IAAA,EAACtB,YAAA,CAAAuB,IAAI;IACJC,KAAK,EAAGb,wBAAwB,CAC/BS,gBAAM,CAACK,qBAAqB,EAC5BL,gBAAM,CAACM,yBACR,CAAG;IAAAC,QAAA,GAEDf,aAAa,eACf,IAAAJ,WAAA,CAAAS,GAAA,EAACX,qBAAA,CAAAY,OAAoB,IAAE,CAAC;EAAA,CACnB,CAAC;AAET;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEc,IAAAY,iCAAwB,EAAErB,YAAa,CAAC","ignoreList":[]}

package/build/panel/body.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.PanelBody = void 0;
 exports.UnforwardedPanelBody = UnforwardedPanelBody;
 exports.default = 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 _icons = require("@wordpress/icons");
 var _button = _interopRequireDefault(require("../button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -74,21 +74,22 @@ function UnforwardedPanelBody(props, ref) {
       });
     }
   }, [isOpened, scrollBehavior]);
-  const classes = (0, _classnames.default)('components-panel__body', className, {
+  const classes = (0, _clsx.default)('components-panel__body', className, {
     'is-opened': isOpened
   });
-  return (0, _react.createElement)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes,
-    ref: (0, _compose.useMergeRefs)([nodeRef, ref])
-  }, (0, _react.createElement)(PanelBodyTitle, {
-    icon: icon,
-    isOpened: Boolean(isOpened),
-    onClick: handleOnToggle,
-    title: title,
-    ...buttonProps
-  }), typeof children === 'function' ? children({
-    opened: Boolean(isOpened)
-  }) : isOpened && children);
+    ref: (0, _compose.useMergeRefs)([nodeRef, ref]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PanelBodyTitle, {
+      icon: icon,
+      isOpened: Boolean(isOpened),
+      onClick: handleOnToggle,
+      title: title,
+      ...buttonProps
+    }), typeof children === 'function' ? children({
+      opened: Boolean(isOpened)
+    }) : isOpened && children]
+  });
 }
 const PanelBodyTitle = (0, _element.forwardRef)(({
   isOpened,
@@ -99,23 +100,26 @@ const PanelBodyTitle = (0, _element.forwardRef)(({
   if (!title) {
     return null;
   }
-  return (0, _react.createElement)("h2", {
-    className: "components-panel__body-title"
-  }, (0, _react.createElement)(_button.default, {
-    className: "components-panel__body-toggle",
-    "aria-expanded": isOpened,
-    ref: ref,
-    ...props
-  }, (0, _react.createElement)("span", {
-    "aria-hidden": "true"
-  }, (0, _react.createElement)(_icon.default, {
-    className: "components-panel__arrow",
-    icon: isOpened ? _icons.chevronUp : _icons.chevronDown
-  })), title, icon && (0, _react.createElement)(_icon.default, {
-    icon: icon,
-    className: "components-panel__icon",
-    size: 20
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    className: "components-panel__body-title",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.default, {
+      className: "components-panel__body-toggle",
+      "aria-expanded": isOpened,
+      ref: ref,
+      ...props,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": "true",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+          className: "components-panel__arrow",
+          icon: isOpened ? _icons.chevronUp : _icons.chevronDown
+        })
+      }), title, icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+        icon: icon,
+        className: "components-panel__icon",
+        size: 20
+      })]
+    })
+  });
 });
 const PanelBody = exports.PanelBody = (0, _element.forwardRef)(UnforwardedPanelBody);
 var _default = exports.default = PanelBody;

package/build/panel/body.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_icons","_button","_icon","_utils","noop","UnforwardedPanelBody","props","ref","buttonProps","children","className","icon","initialOpen","onToggle","opened","title","scrollAfterOpen","isOpened","setIsOpened","useControlledState","initial","undefined","fallback","nodeRef","useRef","scrollBehavior","useReducedMotion","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","useUpdateEffect","scrollIntoView","inline","block","behavior","classes","classnames","_react","createElement","useMergeRefs","PanelBodyTitle","Boolean","onClick","forwardRef","default","chevronUp","chevronDown","size","PanelBody","exports","_default"],"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","_interopRequireDefault","require","_compose","_element","_icons","_button","_icon","_utils","_jsxRuntime","noop","UnforwardedPanelBody","props","ref","buttonProps","children","className","icon","initialOpen","onToggle","opened","title","scrollAfterOpen","isOpened","setIsOpened","useControlledState","initial","undefined","fallback","nodeRef","useRef","scrollBehavior","useReducedMotion","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","useUpdateEffect","scrollIntoView","inline","block","behavior","classes","clsx","jsxs","useMergeRefs","jsx","PanelBodyTitle","Boolean","onClick","forwardRef","default","chevronUp","chevronDown","size","PanelBody","exports","_default"],"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/panel/body.native.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanelBody = PanelBody;
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _body = _interopRequireDefault(require("./body.scss"));
 var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-cover"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -24,12 +24,14 @@ function PanelBody({
   style,
   titleStyle = {}
 }) {
-  return (0, _react.createElement)(_reactNative.View, {
-    style: [_body.default.panelContainer, style]
-  }, title && (0, _react.createElement)(_reactNative.Text, {
-    accessibilityRole: "header",
-    style: [_body.default.sectionHeaderText, titleStyle]
-  }, title), children, (0, _react.createElement)(_bottomSeparatorCover.default, null));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_body.default.panelContainer, style],
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      accessibilityRole: "header",
+      style: [_body.default.sectionHeaderText, titleStyle],
+      children: title
+    }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSeparatorCover.default, {})]
+  });
 }
 var _default = exports.default = PanelBody;
 //# sourceMappingURL=body.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_body","_interopRequireDefault","_bottomSeparatorCover","PanelBody","children","title","style","titleStyle","_react","createElement","View","styles","panelContainer","Text","accessibilityRole","sectionHeaderText","default","_default","exports"],"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":";;;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAD,sBAAA,CAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASI,SAASA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,KAAK;EAAEC,UAAU,GAAG,CAAC;AAAE,CAAC,EAAG;EACxE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAY,IAAI;IAACJ,KAAK,EAAG,CAAEK,aAAM,CAACC,cAAc,EAAEN,KAAK;EAAI,GAC7CD,KAAK,IACN,IAAAG,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAe,IAAI;IACJC,iBAAiB,EAAC,QAAQ;IAC1BR,KAAK,EAAG,CAAEK,aAAM,CAACI,iBAAiB,EAAER,UAAU;EAAI,GAEhDF,KACG,CACN,EACCD,QAAQ,EACV,IAAAI,MAAA,CAAAC,aAAA,EAACP,qBAAA,CAAAc,OAAoB,MAAE,CAClB,CAAC;AAET;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcb,SAAS","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_body","_interopRequireDefault","_bottomSeparatorCover","_jsxRuntime","PanelBody","children","title","style","titleStyle","jsxs","View","styles","panelContainer","jsx","Text","accessibilityRole","sectionHeaderText","default","_default","exports"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA4D,IAAAI,WAAA,GAAAJ,OAAA;AAT5D;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASK,SAASA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,KAAK;EAAEC,UAAU,GAAG,CAAC;AAAE,CAAC,EAAG;EACxE,oBACC,IAAAL,WAAA,CAAAM,IAAA,EAACX,YAAA,CAAAY,IAAI;IAACH,KAAK,EAAG,CAAEI,aAAM,CAACC,cAAc,EAAEL,KAAK,CAAI;IAAAF,QAAA,GAC7CC,KAAK,iBACN,IAAAH,WAAA,CAAAU,GAAA,EAACf,YAAA,CAAAgB,IAAI;MACJC,iBAAiB,EAAC,QAAQ;MAC1BR,KAAK,EAAG,CAAEI,aAAM,CAACK,iBAAiB,EAAER,UAAU,CAAI;MAAAH,QAAA,EAEhDC;IAAK,CACF,CACN,EACCD,QAAQ,eACV,IAAAF,WAAA,CAAAU,GAAA,EAACX,qBAAA,CAAAe,OAAoB,IAAE,CAAC;EAAA,CACnB,CAAC;AAET;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcb,SAAS","ignoreList":[]}

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _compose = require("@wordpress/compose");
 var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-cover.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -24,7 +24,7 @@ var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-c
 function BottomSeparatorCover({
   getStylesFromColorScheme
 }) {
-  return (0, _react.createElement)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: getStylesFromColorScheme(_bottomSeparatorCover.default.coverSeparator, _bottomSeparatorCover.default.coverSeparatorDark)
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_compose","_bottomSeparatorCover","_interopRequireDefault","BottomSeparatorCover","getStylesFromColorScheme","_react","createElement","View","style","styles","coverSeparator","coverSeparatorDark","_default","exports","default","withPreferredColorScheme"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASI,oBAAoBA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,YAAA,CAAAS,IAAI;IACJC,KAAK,EAAGJ,wBAAwB,CAC/BK,6BAAM,CAACC,cAAc,EACrBD,6BAAM,CAACE,kBACR;EAAG,CACH,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,iCAAwB,EAAEZ,oBAAqB,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_compose","_bottomSeparatorCover","_interopRequireDefault","_jsxRuntime","BottomSeparatorCover","getStylesFromColorScheme","jsx","View","style","styles","coverSeparator","coverSeparatorDark","_default","exports","default","withPreferredColorScheme"],"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":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAmD,IAAAI,WAAA,GAAAJ,OAAA;AAbnD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASK,oBAAoBA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC7D,oBACC,IAAAF,WAAA,CAAAG,GAAA,EAACR,YAAA,CAAAS,IAAI;IACJC,KAAK,EAAGH,wBAAwB,CAC/BI,6BAAM,CAACC,cAAc,EACrBD,6BAAM,CAACE,kBACR;EAAG,CACH,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,iCAAwB,EAAEX,oBAAqB,CAAC","ignoreList":[]}

package/build/panel/header.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
@@ -18,9 +18,12 @@ function PanelHeader({
   label,
   children
 }) {
-  return (0, _react.createElement)("div", {
-    className: "components-panel__header"
-  }, label && (0, _react.createElement)("h2", null, label), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "components-panel__header",
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+      children: label
+    }), children]
+  });
 }
 var _default = exports.default = PanelHeader;
 //# sourceMappingURL=header.js.map

package/build/panel/header.js.map

@@ -1 +1 @@
-{"version":3,"names":["PanelHeader","label","children","_react","createElement","className","_default","exports","default"],"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,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCJ,KAAK,IAAI,IAAAE,MAAA,CAAAC,aAAA,cAAMH,KAAW,CAAC,EAC3BC,QACE,CAAC;AAER;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcR,WAAW","ignoreList":[]}
+{"version":3,"names":["PanelHeader","label","children","_jsxRuntime","jsxs","className","jsx","_default","exports","default"],"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,oBACC,IAAAC,WAAA,CAAAC,IAAA;IAAKC,SAAS,EAAC,0BAA0B;IAAAH,QAAA,GACtCD,KAAK,iBAAI,IAAAE,WAAA,CAAAG,GAAA;MAAAJ,QAAA,EAAMD;IAAK,CAAM,CAAC,EAC3BC,QAAQ;EAAA,CACN,CAAC;AAER;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcT,WAAW","ignoreList":[]}

package/build/panel/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Panel = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _header = _interopRequireDefault(require("./header"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -26,13 +26,14 @@ function UnforwardedPanel({
   className,
   children
 }, ref) {
-  const classNames = (0, _classnames.default)(className, 'components-panel');
-  return (0, _react.createElement)("div", {
+  const classNames = (0, _clsx.default)(className, 'components-panel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classNames,
-    ref: ref
-  }, header && (0, _react.createElement)(_header.default, {
-    label: header
-  }), children);
+    ref: ref,
+    children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+      label: header
+    }), children]
+  });
 }
 
 /**

package/build/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_header","UnforwardedPanel","header","className","children","ref","classNames","classnames","_react","createElement","default","label","Panel","exports","forwardRef","_default"],"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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASG,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAG,IAAAC,mBAAU,EAAEJ,SAAS,EAAE,kBAAmB,CAAC;EAC9D,OACC,IAAAK,MAAA,CAAAC,aAAA;IAAKN,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA;EAAK,GACtCH,MAAM,IAAI,IAAAM,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAW;IAACC,KAAK,EAAGT;EAAQ,CAAE,CAAC,EAC1CE,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,IAAAE,mBAAU,EAAEb,gBAAiB,CAAC;AAAC,IAAAc,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAErCE,KAAK","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_header","_jsxRuntime","UnforwardedPanel","header","className","children","ref","classNames","clsx","jsxs","jsx","default","label","Panel","exports","forwardRef","_default"],"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":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AAbnC;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASI,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAG,IAAAC,aAAI,EAAEJ,SAAS,EAAE,kBAAmB,CAAC;EACxD,oBACC,IAAAH,WAAA,CAAAQ,IAAA;IAAKL,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA,GAAK;IAAAD,QAAA,GACtCF,MAAM,iBAAI,IAAAF,WAAA,CAAAS,GAAA,EAACV,OAAA,CAAAW,OAAW;MAACC,KAAK,EAAGT;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;AACO,MAAMQ,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,IAAAE,mBAAU,EAAEb,gBAAiB,CAAC;AAAC,IAAAc,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAErCE,KAAK","ignoreList":[]}

package/build/panel/row.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PanelRow = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -24,10 +24,11 @@ function UnforwardedPanelRow({
   className,
   children
 }, ref) {
-  return (0, _react.createElement)("div", {
-    className: (0, _classnames.default)('components-panel__row', className),
-    ref: ref
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx.default)('components-panel__row', className),
+    ref: ref,
+    children: children
+  });
 }
 
 /**

package/build/panel/row.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","UnforwardedPanelRow","className","children","ref","_react","createElement","classnames","PanelRow","exports","forwardRef","_default","default"],"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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA,SAASE,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,OACC,IAAAC,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAK,mBAAU,EAAE,uBAAuB,EAAEL,SAAU,CAAG;IAC9DE,GAAG,EAAGA;EAAK,GAETD,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACO,MAAMK,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAAET,mBAAoB,CAAC;AAAC,IAAAU,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE3CJ,QAAQ","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","UnforwardedPanelRow","className","children","ref","jsx","clsx","PanelRow","exports","forwardRef","_default","default"],"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":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAAgD,IAAAE,WAAA,GAAAF,OAAA;AARhD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA,SAASG,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,oBACC,IAAAJ,WAAA,CAAAK,GAAA;IACCH,SAAS,EAAG,IAAAI,aAAI,EAAE,uBAAuB,EAAEJ,SAAU,CAAG;IACxDE,GAAG,EAAGA,GAAK;IAAAD,QAAA,EAETA;EAAQ,CACN,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACO,MAAMI,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAAER,mBAAoB,CAAC;AAAC,IAAAS,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE3CJ,QAAQ","ignoreList":[]}

package/build/placeholder/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Placeholder = Placeholder;
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _primitives = require("@wordpress/primitives");
 var _element = require("@wordpress/element");
 var _a11y = require("@wordpress/a11y");
 var _icon = _interopRequireDefault(require("../icon"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -25,16 +25,17 @@ var _icon = _interopRequireDefault(require("../icon"));
  * Internal dependencies
  */
 
-const PlaceholderIllustration = (0, _react.createElement)(_primitives.SVG, {
+const PlaceholderIllustration = /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SVG, {
   className: "components-placeholder__illustration",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 60 60",
-  preserveAspectRatio: "none"
-}, (0, _react.createElement)(_primitives.Path, {
-  vectorEffect: "non-scaling-stroke",
-  d: "M60 60 0 0"
-}));
+  preserveAspectRatio: "none",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Path, {
+    vectorEffect: "non-scaling-stroke",
+    d: "M60 60 0 0"
+  })
+});
 
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
@@ -73,8 +74,8 @@ function Placeholder(props) {
       'is-small': width < 160
     };
   }
-  const classes = (0, _classnames.default)('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
-  const fieldsetClasses = (0, _classnames.default)('components-placeholder__fieldset', {
+  const classes = (0, _clsx.default)('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
+  const fieldsetClasses = (0, _clsx.default)('components-placeholder__fieldset', {
     'is-column-layout': isColumnLayout
   });
   (0, _element.useEffect)(() => {
@@ -82,20 +83,25 @@ function Placeholder(props) {
       (0, _a11y.speak)(instructions);
     }
   }, [instructions]);
-  return (0, _react.createElement)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ...additionalProps,
-    className: classes
-  }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0, _react.createElement)("div", {
-    className: "components-placeholder__preview"
-  }, preview), (0, _react.createElement)("div", {
-    className: "components-placeholder__label"
-  }, (0, _react.createElement)(_icon.default, {
-    icon: icon
-  }), label), !!instructions && (0, _react.createElement)("div", {
-    className: "components-placeholder__instructions"
-  }, instructions), (0, _react.createElement)("div", {
-    className: fieldsetClasses
-  }, children));
+    className: classes,
+    children: [withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "components-placeholder__preview",
+      children: preview
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "components-placeholder__label",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+        icon: icon
+      }), label]
+    }), !!instructions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "components-placeholder__instructions",
+      children: instructions
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: fieldsetClasses,
+      children: children
+    })]
+  });
 }
 var _default = exports.default = Placeholder;
 //# sourceMappingURL=index.js.map

package/build/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_primitives","_element","_a11y","_icon","PlaceholderIllustration","_react","createElement","SVG","className","fill","xmlns","viewBox","preserveAspectRatio","Path","vectorEffect","d","Placeholder","props","icon","children","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","useResizeObserver","modifierClassNames","classes","classnames","fieldsetClasses","useEffect","speak","default","_default","exports"],"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":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,KAAA,GAAAN,sBAAA,CAAAC,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAKA,MAAMM,uBAAuB,GAC5B,IAAAC,MAAA,CAAAC,aAAA,EAACN,WAAA,CAAAO,GAAG;EACHC,SAAS,EAAC,sCAAsC;EAChDC,IAAI,EAAC,MAAM;EACXC,KAAK,EAAC,4BAA4B;EAClCC,OAAO,EAAC,WAAW;EACnBC,mBAAmB,EAAC;AAAM,GAE1B,IAAAP,MAAA,CAAAC,aAAA,EAACN,WAAA,CAAAa,IAAI;EAACC,YAAY,EAAC,oBAAoB;EAACC,CAAC,EAAC;AAAY,CAAE,CACpD,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAC1BC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZb,SAAS;IACTc,OAAO;IACPC,OAAO;IACPC,cAAc;IACdC,gBAAgB;IAChB,GAAGC;EACJ,CAAC,GAAGT,KAAK;EACT,MAAM,CAAEU,cAAc,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;;EAEzD;EACA;EACA,IAAIC,kBAAkB;EACtB,IAAK,OAAOF,KAAK,KAAK,QAAQ,EAAG;IAChCE,kBAAkB,GAAG;MACpB,UAAU,EAAEF,KAAK,IAAI,GAAG;MACxB,WAAW,EAAEA,KAAK,IAAI,GAAG,IAAIA,KAAK,GAAG,GAAG;MACxC,UAAU,EAAEA,KAAK,GAAG;IACrB,CAAC;EACF;EAEA,MAAMG,OAAO,GAAG,IAAAC,mBAAU,EACzB,wBAAwB,EACxBxB,SAAS,EACTsB,kBAAkB,EAClBL,gBAAgB,GAAG,kBAAkB,GAAG,IACzC,CAAC;EAED,MAAMQ,eAAe,GAAG,IAAAD,mBAAU,EAAE,kCAAkC,EAAE;IACvE,kBAAkB,EAAER;EACrB,CAAE,CAAC;EAEH,IAAAU,kBAAS,EAAE,MAAM;IAChB,IAAKb,YAAY,EAAG;MACnB,IAAAc,WAAK,EAAEd,YAAa,CAAC;IACtB;EACD,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OACC,IAAAhB,MAAA,CAAAC,aAAA;IAAA,GAAUoB,eAAe;IAAGlB,SAAS,EAAGuB;EAAS,GAC9CN,gBAAgB,GAAGrB,uBAAuB,GAAG,IAAI,EACjDuB,cAAc,EACdL,OAAO,EACPC,OAAO,IACR,IAAAlB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAiC,GAC7Ce,OACE,CACL,EACD,IAAAlB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAA+B,GAC7C,IAAAH,MAAA,CAAAC,aAAA,EAACH,KAAA,CAAAiC,OAAI;IAAClB,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBE,KACE,CAAC,EACJ,CAAC,CAAEC,YAAY,IAChB,IAAAhB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAsC,GAClDa,YACE,CACL,EACD,IAAAhB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAGyB;EAAiB,GAAGd,QAAe,CAChD,CAAC;AAER;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcpB,WAAW","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_primitives","_element","_a11y","_icon","_jsxRuntime","PlaceholderIllustration","jsx","SVG","className","fill","xmlns","viewBox","preserveAspectRatio","children","Path","vectorEffect","d","Placeholder","props","icon","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","useResizeObserver","modifierClassNames","classes","clsx","fieldsetClasses","useEffect","speak","jsxs","default","_default","exports"],"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":"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","ignoreList":[]}