@wordpress/components 27.6.0 → 28.0.1

package/build/confirm-dialog/component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ConfirmDialog = void 0;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _modal = _interopRequireDefault(require("../modal"));
@@ -16,6 +15,7 @@ var _text = require("../text");
 var _vStack = require("../v-stack");
 var styles = _interopRequireWildcard(require("./styles"));
 var _useCx = require("../utils/hooks/use-cx");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -67,31 +67,40 @@ const UnconnectedConfirmDialog = (props, forwardedRef) => {
   }, [handleEvent, onConfirm]);
   const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0, _i18n.__)('Cancel');
   const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0, _i18n.__)('OK');
-  return (0, _react.createElement)(_react.Fragment, null, isOpen && (0, _react.createElement)(_modal.default, {
-    onRequestClose: handleEvent(onCancel),
-    onKeyDown: handleEnter,
-    closeButtonLabel: cancelLabel,
-    isDismissible: true,
-    ref: forwardedRef,
-    overlayClassName: wrapperClassName,
-    __experimentalHideHeader: true,
-    ...otherProps
-  }, (0, _react.createElement)(_vStack.VStack, {
-    spacing: 8
-  }, (0, _react.createElement)(_text.Text, null, children), (0, _react.createElement)(_flex.Flex, {
-    direction: "row",
-    justify: "flex-end"
-  }, (0, _react.createElement)(_button.default, {
-    __next40pxDefaultSize: true,
-    ref: cancelButtonRef,
-    variant: "tertiary",
-    onClick: handleEvent(onCancel)
-  }, cancelLabel), (0, _react.createElement)(_button.default, {
-    __next40pxDefaultSize: true,
-    ref: confirmButtonRef,
-    variant: "primary",
-    onClick: handleEvent(onConfirm)
-  }, confirmLabel)))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
+      onRequestClose: handleEvent(onCancel),
+      onKeyDown: handleEnter,
+      closeButtonLabel: cancelLabel,
+      isDismissible: true,
+      ref: forwardedRef,
+      overlayClassName: wrapperClassName,
+      __experimentalHideHeader: true,
+      ...otherProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+        spacing: 8,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
+          children: children
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_flex.Flex, {
+          direction: "row",
+          justify: "flex-end",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            __next40pxDefaultSize: true,
+            ref: cancelButtonRef,
+            variant: "tertiary",
+            onClick: handleEvent(onCancel),
+            children: cancelLabel
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            __next40pxDefaultSize: true,
+            ref: confirmButtonRef,
+            variant: "primary",
+            onClick: handleEvent(onConfirm),
+            children: confirmLabel
+          })]
+        })]
+      })
+    })
+  });
 };
 
 /**

package/build/confirm-dialog/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_element","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","__","confirmLabel","_react","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","__next40pxDefaultSize","variant","onClick","ConfirmDialog","exports","contextConnect","_default"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { ConfirmDialogProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nconst UnconnectedConfirmDialog = (\n\tprops: WordPressComponentProps< ConfirmDialogProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(\n\tUnconnectedConfirmDialog,\n\t'ConfirmDialog'\n);\nexport default ConfirmDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_element","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","__","confirmLabel","jsx","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","jsxs","VStack","spacing","Text","Flex","direction","justify","__next40pxDefaultSize","variant","onClick","ConfirmDialog","exports","contextConnect","_default"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { ConfirmDialogProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nconst UnconnectedConfirmDialog = (\n\tprops: WordPressComponentProps< ConfirmDialogProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(\n\tUnconnectedConfirmDialog,\n\t'ConfirmDialog'\n);\nexport default ConfirmDialog;\n"],"mappings":"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AAqB;YACrBV,GAAG,EAAGzB,gBAAkB;YACxBoC,OAAO,EAAC,SAAS;YACjBC,OAAO,EAAG9B,WAAW,CAAEpB,SAAU,CAAG;YAAAE,QAAA,EAElC6B;UAAY,CACP,CAAC;QAAA,CACJ,CAAC;MAAA,CACA;IAAC,CACH;EACP,CACA,CAAC;AAEL,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMoB,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,uBAAc,EAC1C1D,wBAAwB,EACxB,eACD,CAAC;AAAC,IAAA2D,QAAA,GAAAF,OAAA,CAAAvE,OAAA,GACasE,aAAa","ignoreList":[]}

package/build/context/context-connect.js

@@ -56,7 +56,7 @@ function contextConnectWithoutRef(Component, namespace) {
 function _contextConnect(Component, namespace, options) {
   const WrappedComponent = options?.forwardsRef ? (0, _element.forwardRef)(Component) : Component;
   if (typeof namespace === 'undefined') {
-    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('contextConnect: Please provide a namespace') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('contextConnect: Please provide a namespace') : void 0;
   }
 
   // @ts-expect-error internal property

package/build/context/context-connect.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_constants","_getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","forwardRef","SCRIPT_DEBUG","warn","mergedNamespace","CONNECT_STATIC_NAMESPACE","Array","isArray","Object","assign","Set","displayName","selector","getStyledClassNameFromKey","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"sources":["@wordpress/components/src/context/context-connect.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactChild, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never,\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions,\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactChild | undefined | {}\n): string[] {\n\tif ( ! Component ) {\n\t\treturn [];\n\t}\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) {\n\t\treturn false;\n\t}\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_constants","_getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","forwardRef","globalThis","SCRIPT_DEBUG","warn","mergedNamespace","CONNECT_STATIC_NAMESPACE","Array","isArray","Object","assign","Set","displayName","selector","getStyledClassNameFromKey","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"sources":["@wordpress/components/src/context/context-connect.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactChild, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never,\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions,\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactChild | undefined | {}\n): string[] {\n\tif ( ! Component ) {\n\t\treturn [];\n\t}\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) {\n\t\treturn false;\n\t}\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"],"mappings":"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","ignoreList":[]}

package/build/context/context-system-provider.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComponentsContext = exports.ContextSystemProvider = exports.ComponentsContext = void 0;
-var _react = require("react");
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _isPlainObject = require("is-plain-object");
 var _element = require("@wordpress/element");
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -48,7 +48,7 @@ function useContextSystemBridge({
     (0, _es.default)(valueRef.current, value) &&
     // But not the same reference.
     valueRef.current !== value) {
-      typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;
+      globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;
     }
   }, [value]);
 
@@ -97,9 +97,10 @@ const BaseContextSystemProvider = ({
   const contextValue = useContextSystemBridge({
     value
   });
-  return (0, _react.createElement)(ComponentsContext.Provider, {
-    value: contextValue
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentsContext.Provider, {
+    value: contextValue,
+    children: children
+  });
 };
 const ContextSystemProvider = exports.ContextSystemProvider = (0, _element.memo)(BaseContextSystemProvider);
 //# sourceMappingURL=context-system-provider.js.map

package/build/context/context-system-provider.js.map

@@ -1 +1 @@
-{"version":3,"names":["_deepmerge","_interopRequireDefault","require","_es","_isPlainObject","_element","_warning","_utils","ComponentsContext","exports","createContext","useComponentsContext","useContext","useContextSystemBridge","value","parentContext","valueRef","useRef","useUpdateEffect","fastDeepEqual","current","SCRIPT_DEBUG","warn","JSON","stringify","config","useMemo","deepmerge","isMergeableObject","isPlainObject","BaseContextSystemProvider","children","contextValue","_react","createElement","Provider","ContextSystemProvider","memo"],"sources":["@wordpress/components/src/context/context-system-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `deepmerge()` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn deepmerge( parentContext ?? {}, value ?? {}, {\n\t\t\tisMergeableObject: isPlainObject,\n\t\t} );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AAOA,IAAAI,QAAA,GAAAL,sBAAA,CAAAC,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAtBA;AACA;AACA;;AAKA;AACA;AACA;;AAUA;AACA;AACA;;AAGO,MAAMM,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,sBAAa,GAC7C,kCAAqC,CAAC,CACvC,CAAC;AACM,MAAMC,oBAAoB,GAAGA,CAAA,KAAM,IAAAC,mBAAU,EAAEJ,iBAAkB,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAC,OAAA,CAAAE,oBAAA,GAAAA,oBAAA;AASA,SAASE,sBAAsBA,CAAE;EAAEC;AAAM,CAAC,EAAG;EAC5C,MAAMC,aAAa,GAAGJ,oBAAoB,CAAC,CAAC;EAE5C,MAAMK,QAAQ,GAAG,IAAAC,eAAM,EAAEH,KAAM,CAAC;EAEhC,IAAAI,sBAAe,EAAE,MAAM;IACtB;IACC;IACA,IAAAC,WAAa,EAAEH,QAAQ,CAACI,OAAO,EAAEN,KAAM,CAAC;IACxC;IACAE,QAAQ,CAACI,OAAO,KAAKN,KAAK,EACzB;MACD,OAAAO,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAG,gCAAgCC,IAAI,CAACC,SAAS,CAAEV,KAAM,CAAG,EAAE,CAAC;IACpE;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;;EAEd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMW,MAAM,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC7B;IACA,OAAO,IAAAC,kBAAS,EAAEZ,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,CAAC,CAAC,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAAE;MACnDc,iBAAiB,EAAEC;IACpB,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEd,aAAa,EAAED,KAAK,CAAG,CAAC;EAE7B,OAAOW,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,yBAAyB,GAAGA,CAAE;EAAEC,QAAQ;EAAEjB;AAAM,CAAC,KAAM;EAC5D,MAAMkB,YAAY,GAAGnB,sBAAsB,CAAE;IAAEC;EAAM,CAAE,CAAC;EAExD,OACC,IAAAmB,MAAA,CAAAC,aAAA,EAAC1B,iBAAiB,CAAC2B,QAAQ;IAACrB,KAAK,EAAGkB;EAAc,GAC/CD,QACyB,CAAC;AAE/B,CAAC;AAEM,MAAMK,qBAAqB,GAAA3B,OAAA,CAAA2B,qBAAA,GAAG,IAAAC,aAAI,EAAEP,yBAA0B,CAAC","ignoreList":[]}
+{"version":3,"names":["_deepmerge","_interopRequireDefault","require","_es","_isPlainObject","_element","_warning","_utils","_jsxRuntime","ComponentsContext","exports","createContext","useComponentsContext","useContext","useContextSystemBridge","value","parentContext","valueRef","useRef","useUpdateEffect","fastDeepEqual","current","globalThis","SCRIPT_DEBUG","warn","JSON","stringify","config","useMemo","deepmerge","isMergeableObject","isPlainObject","BaseContextSystemProvider","children","contextValue","jsx","Provider","ContextSystemProvider","memo"],"sources":["@wordpress/components/src/context/context-system-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `deepmerge()` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn deepmerge( parentContext ?? {}, value ?? {}, {\n\t\t\tisMergeableObject: isPlainObject,\n\t\t} );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AAOA,IAAAI,QAAA,GAAAL,sBAAA,CAAAC,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAA2C,IAAAM,WAAA,GAAAN,OAAA;AAtB3C;AACA;AACA;;AAKA;AACA;AACA;;AAUA;AACA;AACA;;AAGO,MAAMO,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,sBAAa,GAC7C,kCAAqC,CAAC,CACvC,CAAC;AACM,MAAMC,oBAAoB,GAAGA,CAAA,KAAM,IAAAC,mBAAU,EAAEJ,iBAAkB,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAC,OAAA,CAAAE,oBAAA,GAAAA,oBAAA;AASA,SAASE,sBAAsBA,CAAE;EAAEC;AAAM,CAAC,EAAG;EAC5C,MAAMC,aAAa,GAAGJ,oBAAoB,CAAC,CAAC;EAE5C,MAAMK,QAAQ,GAAG,IAAAC,eAAM,EAAEH,KAAM,CAAC;EAEhC,IAAAI,sBAAe,EAAE,MAAM;IACtB;IACC;IACA,IAAAC,WAAa,EAAEH,QAAQ,CAACI,OAAO,EAAEN,KAAM,CAAC;IACxC;IACAE,QAAQ,CAACI,OAAO,KAAKN,KAAK,EACzB;MACDO,UAAA,CAAAC,YAAA,gBAAAC,gBAAI,EAAG,gCAAgCC,IAAI,CAACC,SAAS,CAAEX,KAAM,CAAG,EAAE,CAAC;IACpE;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;;EAEd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMY,MAAM,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC7B;IACA,OAAO,IAAAC,kBAAS,EAAEb,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,CAAC,CAAC,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAAE;MACnDe,iBAAiB,EAAEC;IACpB,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEf,aAAa,EAAED,KAAK,CAAG,CAAC;EAE7B,OAAOY,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,yBAAyB,GAAGA,CAAE;EAAEC,QAAQ;EAAElB;AAAM,CAAC,KAAM;EAC5D,MAAMmB,YAAY,GAAGpB,sBAAsB,CAAE;IAAEC;EAAM,CAAE,CAAC;EAExD,oBACC,IAAAP,WAAA,CAAA2B,GAAA,EAAC1B,iBAAiB,CAAC2B,QAAQ;IAACrB,KAAK,EAAGmB,YAAc;IAAAD,QAAA,EAC/CA;EAAQ,CACiB,CAAC;AAE/B,CAAC;AAEM,MAAMI,qBAAqB,GAAA3B,OAAA,CAAA2B,qBAAA,GAAG,IAAAC,aAAI,EAAEN,yBAA0B,CAAC","ignoreList":[]}

package/build/context/use-context-system.js

@@ -35,7 +35,7 @@ var _useCx = require("../utils/hooks/use-cx");
 function useContextSystem(props, namespace) {
   const contextSystemProps = (0, _contextSystemProvider.useComponentsContext)();
   if (typeof namespace === 'undefined') {
-    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? (0, _warning.default)('useContextSystem: Please provide a namespace') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('useContextSystem: Please provide a namespace') : void 0;
   }
   const contextProps = contextSystemProps?.[namespace] || {};
 

package/build/context/use-context-system.js.map

@@ -1 +1 @@
-{"version":3,"names":["_warning","_interopRequireDefault","require","_contextSystemProvider","_utils","_getStyledClassNameFromKey","_useCx","useContextSystem","props","namespace","contextSystemProps","useComponentsContext","SCRIPT_DEBUG","warn","contextProps","finalComponentProps","getConnectedNamespace","getNamespace","_overrides","overrideProps","otherContextProps","initialMergedProps","Object","entries","length","assign","cx","useCx","classes","getStyledClassNameFromKey","className","rendered","renderChildren","children","key","undefined"],"sources":["@wordpress/components/src/context/use-context-system.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem( props, namespace ) {\n\tconst contextSystemProps = useComponentsContext();\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'useContextSystem: Please provide a namespace' );\n\t}\n\n\tconst contextProps = contextSystemProps?.[ namespace ] || {};\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {ConnectedProps<P>} */\n\t// @ts-ignore We fill in the missing properties below\n\tconst finalComponentProps = {\n\t\t...getConnectedNamespace(),\n\t\t...getNamespace( namespace ),\n\t};\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\tconst { _overrides: overrideProps, ...otherContextProps } = contextProps;\n\n\tconst initialMergedProps = Object.entries( otherContextProps ).length\n\t\t? Object.assign( {}, otherContextProps, props )\n\t\t: props;\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tgetStyledClassNameFromKey( namespace ),\n\t\tprops.className\n\t);\n\n\t// Provides the ability to customize the render of the component.\n\tconst rendered =\n\t\ttypeof initialMergedProps.renderChildren === 'function'\n\t\t\t? initialMergedProps.renderChildren( initialMergedProps )\n\t\t\t: initialMergedProps.children;\n\n\tfor ( const key in initialMergedProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = initialMergedProps[ key ];\n\t}\n\n\tfor ( const key in overrideProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = overrideProps[ key ];\n\t}\n\n\t// Setting an `undefined` explicitly can cause unintended overwrites\n\t// when a `cloneElement()` is involved.\n\tif ( rendered !== undefined ) {\n\t\t// @ts-ignore\n\t\tfinalComponentProps.children = rendered;\n\t}\n\n\tfinalComponentProps.className = classes;\n\n\treturn finalComponentProps;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,gBAAgBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EACpD,MAAMC,kBAAkB,GAAG,IAAAC,2CAAoB,EAAC,CAAC;EACjD,IAAK,OAAOF,SAAS,KAAK,WAAW,EAAG;IACvC,OAAAG,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAE,8CAA+C,CAAC;EACvD;EAEA,MAAMC,YAAY,GAAGJ,kBAAkB,GAAID,SAAS,CAAE,IAAI,CAAC,CAAC;;EAE5D;EACA;EACA;EACA,MAAMM,mBAAmB,GAAG;IAC3B,GAAG,IAAAC,4BAAqB,EAAC,CAAC;IAC1B,GAAG,IAAAC,mBAAY,EAAER,SAAU;EAC5B,CAAC;EACD;;EAEA,MAAM;IAAES,UAAU,EAAEC,aAAa;IAAE,GAAGC;EAAkB,CAAC,GAAGN,YAAY;EAExE,MAAMO,kBAAkB,GAAGC,MAAM,CAACC,OAAO,CAAEH,iBAAkB,CAAC,CAACI,MAAM,GAClEF,MAAM,CAACG,MAAM,CAAE,CAAC,CAAC,EAAEL,iBAAiB,EAAEZ,KAAM,CAAC,GAC7CA,KAAK;EAER,MAAMkB,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAGF,EAAE,CACjB,IAAAG,oDAAyB,EAAEpB,SAAU,CAAC,EACtCD,KAAK,CAACsB,SACP,CAAC;;EAED;EACA,MAAMC,QAAQ,GACb,OAAOV,kBAAkB,CAACW,cAAc,KAAK,UAAU,GACpDX,kBAAkB,CAACW,cAAc,CAAEX,kBAAmB,CAAC,GACvDA,kBAAkB,CAACY,QAAQ;EAE/B,KAAM,MAAMC,GAAG,IAAIb,kBAAkB,EAAG;IACvC;IACAN,mBAAmB,CAAEmB,GAAG,CAAE,GAAGb,kBAAkB,CAAEa,GAAG,CAAE;EACvD;EAEA,KAAM,MAAMA,GAAG,IAAIf,aAAa,EAAG;IAClC;IACAJ,mBAAmB,CAAEmB,GAAG,CAAE,GAAGf,aAAa,CAAEe,GAAG,CAAE;EAClD;;EAEA;EACA;EACA,IAAKH,QAAQ,KAAKI,SAAS,EAAG;IAC7B;IACApB,mBAAmB,CAACkB,QAAQ,GAAGF,QAAQ;EACxC;EAEAhB,mBAAmB,CAACe,SAAS,GAAGF,OAAO;EAEvC,OAAOb,mBAAmB;AAC3B","ignoreList":[]}
+{"version":3,"names":["_warning","_interopRequireDefault","require","_contextSystemProvider","_utils","_getStyledClassNameFromKey","_useCx","useContextSystem","props","namespace","contextSystemProps","useComponentsContext","globalThis","SCRIPT_DEBUG","warn","contextProps","finalComponentProps","getConnectedNamespace","getNamespace","_overrides","overrideProps","otherContextProps","initialMergedProps","Object","entries","length","assign","cx","useCx","classes","getStyledClassNameFromKey","className","rendered","renderChildren","children","key","undefined"],"sources":["@wordpress/components/src/context/use-context-system.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem( props, namespace ) {\n\tconst contextSystemProps = useComponentsContext();\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'useContextSystem: Please provide a namespace' );\n\t}\n\n\tconst contextProps = contextSystemProps?.[ namespace ] || {};\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {ConnectedProps<P>} */\n\t// @ts-ignore We fill in the missing properties below\n\tconst finalComponentProps = {\n\t\t...getConnectedNamespace(),\n\t\t...getNamespace( namespace ),\n\t};\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\tconst { _overrides: overrideProps, ...otherContextProps } = contextProps;\n\n\tconst initialMergedProps = Object.entries( otherContextProps ).length\n\t\t? Object.assign( {}, otherContextProps, props )\n\t\t: props;\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tgetStyledClassNameFromKey( namespace ),\n\t\tprops.className\n\t);\n\n\t// Provides the ability to customize the render of the component.\n\tconst rendered =\n\t\ttypeof initialMergedProps.renderChildren === 'function'\n\t\t\t? initialMergedProps.renderChildren( initialMergedProps )\n\t\t\t: initialMergedProps.children;\n\n\tfor ( const key in initialMergedProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = initialMergedProps[ key ];\n\t}\n\n\tfor ( const key in overrideProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = overrideProps[ key ];\n\t}\n\n\t// Setting an `undefined` explicitly can cause unintended overwrites\n\t// when a `cloneElement()` is involved.\n\tif ( rendered !== undefined ) {\n\t\t// @ts-ignore\n\t\tfinalComponentProps.children = rendered;\n\t}\n\n\tfinalComponentProps.className = classes;\n\n\treturn finalComponentProps;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,gBAAgBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EACpD,MAAMC,kBAAkB,GAAG,IAAAC,2CAAoB,EAAC,CAAC;EACjD,IAAK,OAAOF,SAAS,KAAK,WAAW,EAAG;IACvCG,UAAA,CAAAC,YAAA,gBAAAC,gBAAI,EAAE,8CAA+C,CAAC;EACvD;EAEA,MAAMC,YAAY,GAAGL,kBAAkB,GAAID,SAAS,CAAE,IAAI,CAAC,CAAC;;EAE5D;EACA;EACA;EACA,MAAMO,mBAAmB,GAAG;IAC3B,GAAG,IAAAC,4BAAqB,EAAC,CAAC;IAC1B,GAAG,IAAAC,mBAAY,EAAET,SAAU;EAC5B,CAAC;EACD;;EAEA,MAAM;IAAEU,UAAU,EAAEC,aAAa;IAAE,GAAGC;EAAkB,CAAC,GAAGN,YAAY;EAExE,MAAMO,kBAAkB,GAAGC,MAAM,CAACC,OAAO,CAAEH,iBAAkB,CAAC,CAACI,MAAM,GAClEF,MAAM,CAACG,MAAM,CAAE,CAAC,CAAC,EAAEL,iBAAiB,EAAEb,KAAM,CAAC,GAC7CA,KAAK;EAER,MAAMmB,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAGF,EAAE,CACjB,IAAAG,oDAAyB,EAAErB,SAAU,CAAC,EACtCD,KAAK,CAACuB,SACP,CAAC;;EAED;EACA,MAAMC,QAAQ,GACb,OAAOV,kBAAkB,CAACW,cAAc,KAAK,UAAU,GACpDX,kBAAkB,CAACW,cAAc,CAAEX,kBAAmB,CAAC,GACvDA,kBAAkB,CAACY,QAAQ;EAE/B,KAAM,MAAMC,GAAG,IAAIb,kBAAkB,EAAG;IACvC;IACAN,mBAAmB,CAAEmB,GAAG,CAAE,GAAGb,kBAAkB,CAAEa,GAAG,CAAE;EACvD;EAEA,KAAM,MAAMA,GAAG,IAAIf,aAAa,EAAG;IAClC;IACAJ,mBAAmB,CAAEmB,GAAG,CAAE,GAAGf,aAAa,CAAEe,GAAG,CAAE;EAClD;;EAEA;EACA;EACA,IAAKH,QAAQ,KAAKI,SAAS,EAAG;IAC7B;IACApB,mBAAmB,CAACkB,QAAQ,GAAGF,QAAQ;EACxC;EAEAhB,mBAAmB,CAACe,SAAS,GAAGF,OAAO;EAEvC,OAAOb,mBAAmB;AAC3B","ignoreList":[]}

package/build/css.d.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=css.d.js.map

package/build/css.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/css.d.ts"],"sourcesContent":["import type * as CSS from 'csstype';\n\n// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587\ndeclare module 'csstype' {\n\tinterface Properties {\n\t\t// Allow any CSS Custom Properties\n\t\t[ index: `--${ string }` ]: any;\n\t}\n}\n"],"mappings":"","ignoreList":[]}

package/build/custom-gradient-picker/gradient-bar/control-points.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _colord = require("colord");
 var _compose = require("@wordpress/compose");
@@ -20,6 +19,7 @@ var _colorPalette = require("../../color-palette");
 var _utils = require("./utils");
 var _constants = require("./constants");
 var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -40,20 +40,23 @@ function ControlPointButton({
 }) {
   const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_button.default, {
-    "aria-label": (0, _i18n.sprintf)(
-    // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
-    (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
-    "aria-describedby": descriptionId,
-    "aria-haspopup": "true",
-    "aria-expanded": isOpen,
-    className: (0, _clsx.default)('components-custom-gradient-picker__control-point-button', {
-      'is-active': isOpen
-    }),
-    ...additionalProps
-  }), (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
-    id: descriptionId
-  }, (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      "aria-label": (0, _i18n.sprintf)(
+      // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+      (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
+      "aria-describedby": descriptionId,
+      "aria-haspopup": "true",
+      "aria-expanded": isOpen,
+      className: (0, _clsx.default)('components-custom-gradient-picker__control-point-button', {
+        'is-active': isOpen
+      }),
+      ...additionalProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+      id: descriptionId,
+      children: (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')
+    })]
+  });
 }
 function GradientColorPickerDropdown({
   isRenderedInSidebar,
@@ -70,7 +73,7 @@ function GradientColorPickerDropdown({
     resize: false
   }), []);
   const mergedClassName = (0, _clsx.default)('components-custom-gradient-picker__control-point-dropdown', className);
-  return (0, _react.createElement)(_colorPalette.CustomColorPickerDropdown, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.CustomColorPickerDropdown, {
     isRenderedInSidebar: isRenderedInSidebar,
     popoverProps: popoverProps,
     className: mergedClassName,
@@ -123,84 +126,87 @@ function ControlPoints({
       cleanEventListenersRef.current?.();
     };
   }, []);
-  return (0, _react.createElement)(_react.Fragment, null, controlPoints.map((point, index) => {
-    const initialPosition = point?.position;
-    return ignoreMarkerPosition !== initialPosition && (0, _react.createElement)(GradientColorPickerDropdown, {
-      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
-      key: index,
-      onClose: onStopControlPointChange,
-      renderToggle: ({
-        isOpen,
-        onToggle
-      }) => (0, _react.createElement)(ControlPointButton, {
-        key: index,
-        onClick: () => {
-          if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
-            return;
-          }
-          if (isOpen) {
-            onStopControlPointChange();
-          } else {
-            onStartControlPointChange();
-          }
-          onToggle();
-        },
-        onMouseDown: () => {
-          if (window && window.addEventListener) {
-            controlPointMoveState.current = {
-              initialPosition,
-              index,
-              significantMoveHappened: false,
-              listenersActivated: true
-            };
-            onStartControlPointChange();
-            window.addEventListener('mousemove', onMouseMove);
-            window.addEventListener('mouseup', cleanEventListeners);
-          }
-        },
-        onKeyDown: event => {
-          if (event.code === 'ArrowLeft') {
-            // Stop propagation of the key press event to avoid focus moving
-            // to another editor area.
-            event.stopPropagation();
-            onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position - _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
-          } else if (event.code === 'ArrowRight') {
-            // Stop propagation of the key press event to avoid focus moving
-            // to another editor area.
-            event.stopPropagation();
-            onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position + _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
-          }
-        },
-        isOpen: isOpen,
-        position: point.position,
-        color: point.color
-      }),
-      renderContent: ({
-        onClose
-      }) => (0, _react.createElement)(_dropdownContentWrapper.default, {
-        paddingSize: "none"
-      }, (0, _react.createElement)(_colorPicker.ColorPicker, {
-        enableAlpha: !disableAlpha,
-        color: point.color,
-        onChange: color => {
-          onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: controlPoints.map((point, index) => {
+      const initialPosition = point?.position;
+      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientColorPickerDropdown, {
+        isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+        onClose: onStopControlPointChange,
+        renderToggle: ({
+          isOpen,
+          onToggle
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlPointButton, {
+          onClick: () => {
+            if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
+              return;
+            }
+            if (isOpen) {
+              onStopControlPointChange();
+            } else {
+              onStartControlPointChange();
+            }
+            onToggle();
+          },
+          onMouseDown: () => {
+            if (window && window.addEventListener) {
+              controlPointMoveState.current = {
+                initialPosition,
+                index,
+                significantMoveHappened: false,
+                listenersActivated: true
+              };
+              onStartControlPointChange();
+              window.addEventListener('mousemove', onMouseMove);
+              window.addEventListener('mouseup', cleanEventListeners);
+            }
+          },
+          onKeyDown: event => {
+            if (event.code === 'ArrowLeft') {
+              // Stop propagation of the key press event to avoid focus moving
+              // to another editor area.
+              event.stopPropagation();
+              onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position - _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
+            } else if (event.code === 'ArrowRight') {
+              // Stop propagation of the key press event to avoid focus moving
+              // to another editor area.
+              event.stopPropagation();
+              onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position + _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
+            }
+          },
+          isOpen: isOpen,
+          position: point.position,
+          color: point.color
+        }, index),
+        renderContent: ({
+          onClose
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_dropdownContentWrapper.default, {
+          paddingSize: "none",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+            enableAlpha: !disableAlpha,
+            color: point.color,
+            onChange: color => {
+              onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
+            }
+          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_hStack.HStack, {
+            className: "components-custom-gradient-picker__remove-control-point-wrapper",
+            alignment: "center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+              onClick: () => {
+                onChange((0, _utils.removeControlPoint)(controlPoints, index));
+                onClose();
+              },
+              variant: "link",
+              children: (0, _i18n.__)('Remove Control Point')
+            })
+          })]
+        }),
+        style: {
+          left: `${point.position}%`,
+          transform: 'translateX( -50% )'
         }
-      }), !disableRemove && controlPoints.length > 2 && (0, _react.createElement)(_hStack.HStack, {
-        className: "components-custom-gradient-picker__remove-control-point-wrapper",
-        alignment: "center"
-      }, (0, _react.createElement)(_button.default, {
-        onClick: () => {
-          onChange((0, _utils.removeControlPoint)(controlPoints, index));
-          onClose();
-        },
-        variant: "link"
-      }, (0, _i18n.__)('Remove Control Point')))),
-      style: {
-        left: `${point.position}%`,
-        transform: 'translateX( -50% )'
-      }
-    });
-  }));
+      }, index);
+    })
+  });
 }
 function InsertPoint({
   value: controlPoints,
@@ -212,7 +218,7 @@ function InsertPoint({
   __experimentalIsRenderedInSidebar
 }) {
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
-  return (0, _react.createElement)(GradientColorPickerDropdown, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
@@ -221,7 +227,7 @@ function InsertPoint({
     renderToggle: ({
       isOpen,
       onToggle
-    }) => (0, _react.createElement)(_button.default, {
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: () => {
@@ -236,19 +242,20 @@ function InsertPoint({
       className: "components-custom-gradient-picker__insert-point-dropdown",
       icon: _icons.plus
     }),
-    renderContent: () => (0, _react.createElement)(_dropdownContentWrapper.default, {
-      paddingSize: "none"
-    }, (0, _react.createElement)(_colorPicker.ColorPicker, {
-      enableAlpha: !disableAlpha,
-      onChange: color => {
-        if (!alreadyInsertedPoint) {
-          onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
-          setAlreadyInsertedPoint(true);
-        } else {
-          onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
+    renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownContentWrapper.default, {
+      paddingSize: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+        enableAlpha: !disableAlpha,
+        onChange: color => {
+          if (!alreadyInsertedPoint) {
+            onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
+            setAlreadyInsertedPoint(true);
+          } else {
+            onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
+          }
         }
-      }
-    })),
+      })
+    }),
     style: insertPosition !== null ? {
       left: `${insertPosition}%`,
       transform: 'translateX( -50% )'