@wordpress/block-editor 12.25.0 → 13.0.0

package/build/components/child-layout-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","helpText","selfStretch","parentLayout","orientation","__","ChildLayoutControl","value","childLayout","onChange","isShownByDefault","panelId","flexSize","columnStart","rowStart","columnSpan","rowSpan","type","parentType","default","defaultParentType","parentLayoutType","hasFlexValue","flexResetLabel","resetFlex","undefined","hasStartValue","hasSpanValue","resetGridStarts","resetGridSpans","useEffect","_react","createElement","Fragment","__experimentalVStack","as","ToolsPanelItem","spacing","hasValue","label","onDeselect","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","childLayoutOrientation","help","newFlexSize","isBlock","__experimentalToggleGroupControlOption","key","__experimentalUnitControl","__experimentalHStack","__experimentalInputControl","min","window","__experimentalEnableGridInteractivity","Flex","FlexItem","style","width","max","columnCount"],"sources":["@wordpress/block-editor/src/components/child-layout-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' && orientation === 'horizontal' ) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( selfStretch === 'fixed' ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                  Props.\n * @param {Object}   props.value            The child layout value.\n * @param {Function} props.onChange         Function to update the child layout value.\n * @param {Object}   props.parentLayout     The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault\n * @param {string}   props.panelId\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst {\n\t\tselfStretch,\n\t\tflexSize,\n\t\tcolumnStart,\n\t\trowStart,\n\t\tcolumnSpan,\n\t\trowSpan,\n\t} = childLayout;\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t\torientation = 'horizontal',\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: 'fit',\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ parentLayoutType === 'flex' && (\n\t\t\t\t<VStack\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\thasValue={ hasFlexValue }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\tonDeselect={ resetFlex }\n\t\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newFlexSize =\n\t\t\t\t\t\t\t\tvalue !== 'fixed' ? null : flexSize;\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fit' }\n\t\t\t\t\t\t\tvalue={ 'fit' }\n\t\t\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fill' }\n\t\t\t\t\t\t\tvalue={ 'fill' }\n\t\t\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\t\t\tvalue={ 'fixed' }\n\t\t\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tselfStretch,\n\t\t\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ parentLayoutType === 'grid' && (\n\t\t\t\t<>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\tcolumnSpan: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnSpan }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowSpan }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t\t\t// sized incorrectly.\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\tcolumnStart: value,\n\t\t\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvalue={ columnStart }\n\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\tmax={ parentLayout?.columnCount }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\t\trowStart: value,\n\t\t\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvalue={ rowStart }\n\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\tmax={ parentLayout?.columnCount }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_element","_jsxRuntime","helpText","selfStretch","parentLayout","orientation","__","ChildLayoutControl","value","childLayout","onChange","isShownByDefault","panelId","flexSize","columnStart","rowStart","columnSpan","rowSpan","type","parentType","default","defaultParentType","parentLayoutType","hasFlexValue","flexResetLabel","resetFlex","undefined","hasStartValue","hasSpanValue","resetGridStarts","resetGridSpans","useEffect","jsxs","Fragment","children","__experimentalVStack","as","ToolsPanelItem","spacing","hasValue","label","onDeselect","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","childLayoutOrientation","help","newFlexSize","isBlock","jsx","__experimentalToggleGroupControlOption","__experimentalUnitControl","__experimentalHStack","__experimentalInputControl","min","window","__experimentalEnableGridInteractivity","Flex","FlexItem","style","width","max","columnCount","rowCount"],"sources":["@wordpress/block-editor/src/components/child-layout-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' && orientation === 'horizontal' ) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( selfStretch === 'fixed' ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                  Props.\n * @param {Object}   props.value            The child layout value.\n * @param {Function} props.onChange         Function to update the child layout value.\n * @param {Object}   props.parentLayout     The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault\n * @param {string}   props.panelId\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst {\n\t\tselfStretch,\n\t\tflexSize,\n\t\tcolumnStart,\n\t\trowStart,\n\t\tcolumnSpan,\n\t\trowSpan,\n\t} = childLayout;\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t\torientation = 'horizontal',\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: 'fit',\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ parentLayoutType === 'flex' && (\n\t\t\t\t<VStack\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\thasValue={ hasFlexValue }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\tonDeselect={ resetFlex }\n\t\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newFlexSize =\n\t\t\t\t\t\t\t\tvalue !== 'fixed' ? null : flexSize;\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey=\"fit\"\n\t\t\t\t\t\t\tvalue=\"fit\"\n\t\t\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey=\"fill\"\n\t\t\t\t\t\t\tvalue=\"fill\"\n\t\t\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey=\"fixed\"\n\t\t\t\t\t\t\tvalue=\"fixed\"\n\t\t\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tselfStretch,\n\t\t\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ parentLayoutType === 'grid' && (\n\t\t\t\t<>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\tcolumnSpan: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnSpan }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowSpan }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t\t\t// sized incorrectly.\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\tcolumnStart: value,\n\t\t\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvalue={ columnStart }\n\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\t\tparentLayout?.columnCount\n\t\t\t\t\t\t\t\t\t\t\t? parentLayout.columnCount -\n\t\t\t\t\t\t\t\t\t\t\t  ( columnSpan ?? 1 ) +\n\t\t\t\t\t\t\t\t\t\t\t  1\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\t\trowStart: value,\n\t\t\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvalue={ rowStart }\n\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\t\tparentLayout?.rowCount\n\t\t\t\t\t\t\t\t\t\t\t? parentLayout.rowCount -\n\t\t\t\t\t\t\t\t\t\t\t  ( rowSpan ?? 1 ) +\n\t\t\t\t\t\t\t\t\t\t\t  1\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAWA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAA+C,IAAAG,WAAA,GAAAH,OAAA;AAf/C;AACA;AACA;;AAeA,SAASI,QAAQA,CAAEC,WAAW,EAAEC,YAAY,EAAG;EAC9C,MAAM;IAAEC,WAAW,GAAG;EAAa,CAAC,GAAGD,YAAY;EAEnD,IAAKD,WAAW,KAAK,MAAM,EAAG;IAC7B,OAAO,IAAAG,QAAE,EAAE,kCAAmC,CAAC;EAChD;EACA,IAAKH,WAAW,KAAK,OAAO,IAAIE,WAAW,KAAK,YAAY,EAAG;IAC9D,OAAO,IAAAC,QAAE,EAAE,wBAAyB,CAAC;EACtC,CAAC,MAAM,IAAKH,WAAW,KAAK,OAAO,EAAG;IACrC,OAAO,IAAAG,QAAE,EAAE,yBAA0B,CAAC;EACvC;EACA,OAAO,IAAAA,QAAE,EAAE,eAAgB,CAAC;AAC7B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,kBAAkBA,CAAE;EAC3CC,KAAK,EAAEC,WAAW,GAAG,CAAC,CAAC;EACvBC,QAAQ;EACRN,YAAY;EACZO,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IACLT,WAAW;IACXU,QAAQ;IACRC,WAAW;IACXC,QAAQ;IACRC,UAAU;IACVC;EACD,CAAC,GAAGR,WAAW;EACf,MAAM;IACLS,IAAI,EAAEC,UAAU;IAChBC,OAAO,EAAE;MAAEF,IAAI,EAAEG,iBAAiB,GAAG;IAAU,CAAC,GAAG,CAAC,CAAC;IACrDhB,WAAW,GAAG;EACf,CAAC,GAAGD,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,CAAC,CAAC;EACtB,MAAMkB,gBAAgB,GAAGH,UAAU,IAAIE,iBAAiB;EAExD,MAAME,YAAY,GAAGA,CAAA,KAAM,CAAC,CAAEpB,WAAW;EACzC,MAAMqB,cAAc,GACnBnB,WAAW,KAAK,YAAY,GAAG,IAAAC,QAAE,EAAE,OAAQ,CAAC,GAAG,IAAAA,QAAE,EAAE,QAAS,CAAC;EAC9D,MAAMmB,SAAS,GAAGA,CAAA,KAAM;IACvBf,QAAQ,CAAE;MACTP,WAAW,EAAEuB,SAAS;MACtBb,QAAQ,EAAEa;IACX,CAAE,CAAC;EACJ,CAAC;EAED,MAAMC,aAAa,GAAGA,CAAA,KAAM,CAAC,CAAEb,WAAW,IAAI,CAAC,CAAEC,QAAQ;EACzD,MAAMa,YAAY,GAAGA,CAAA,KAAM,CAAC,CAAEZ,UAAU,IAAI,CAAC,CAAEC,OAAO;EACtD,MAAMY,eAAe,GAAGA,CAAA,KAAM;IAC7BnB,QAAQ,CAAE;MACTI,WAAW,EAAEY,SAAS;MACtBX,QAAQ,EAAEW;IACX,CAAE,CAAC;EACJ,CAAC;EACD,MAAMI,cAAc,GAAGA,CAAA,KAAM;IAC5BpB,QAAQ,CAAE;MACTM,UAAU,EAAEU,SAAS;MACrBT,OAAO,EAAES;IACV,CAAE,CAAC;EACJ,CAAC;EAED,IAAAK,kBAAS,EAAE,MAAM;IAChB,IAAK5B,WAAW,KAAK,OAAO,IAAI,CAAEU,QAAQ,EAAG;MAC5CH,QAAQ,CAAE;QACT,GAAGD,WAAW;QACdN,WAAW,EAAE;MACd,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,oBACC,IAAAF,WAAA,CAAA+B,IAAA,EAAA/B,WAAA,CAAAgC,QAAA;IAAAC,QAAA,GACGZ,gBAAgB,KAAK,MAAM,iBAC5B,IAAArB,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAAsC,oBAAM;MACNC,EAAE,EAAGC,wCAAgB;MACrBC,OAAO,EAAG,CAAG;MACbC,QAAQ,EAAGhB,YAAc;MACzBiB,KAAK,EAAGhB,cAAgB;MACxBiB,UAAU,EAAGhB,SAAW;MACxBd,gBAAgB,EAAGA,gBAAkB;MACrCC,OAAO,EAAGA,OAAS;MAAAsB,QAAA,gBAEnB,IAAAjC,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAA6C,gCAAkB;QAClBC,uBAAuB;QACvBC,IAAI,EAAC,kBAAkB;QACvBJ,KAAK,EAAGK,sBAAsB,CAAEzC,YAAa,CAAG;QAChDI,KAAK,EAAGL,WAAW,IAAI,KAAO;QAC9B2C,IAAI,EAAG5C,QAAQ,CAAEC,WAAW,EAAEC,YAAa,CAAG;QAC9CM,QAAQ,EAAKF,KAAK,IAAM;UACvB,MAAMuC,WAAW,GAChBvC,KAAK,KAAK,OAAO,GAAG,IAAI,GAAGK,QAAQ;UACpCH,QAAQ,CAAE;YACTP,WAAW,EAAEK,KAAK;YAClBK,QAAQ,EAAEkC;UACX,CAAE,CAAC;QACJ,CAAG;QACHC,OAAO;QAAAd,QAAA,gBAEP,IAAAjC,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAqD,sCAAwB;UAExB1C,KAAK,EAAC,KAAK;UACXgC,KAAK,EAAG,IAAAlC,QAAE,EAAE,KAAM;QAAG,GAFjB,KAGJ,CAAC,eACF,IAAAL,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAqD,sCAAwB;UAExB1C,KAAK,EAAC,MAAM;UACZgC,KAAK,EAAG,IAAAlC,QAAE,EAAE,MAAO;QAAG,GAFlB,MAGJ,CAAC,eACF,IAAAL,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAqD,sCAAwB;UAExB1C,KAAK,EAAC,OAAO;UACbgC,KAAK,EAAG,IAAAlC,QAAE,EAAE,OAAQ;QAAG,GAFnB,OAGJ,CAAC;MAAA,CACiB,CAAC,EACnBH,WAAW,KAAK,OAAO,iBACxB,IAAAF,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAsD,yBAAW;QACXP,IAAI,EAAC,kBAAkB;QACvBlC,QAAQ,EAAKF,KAAK,IAAM;UACvBE,QAAQ,CAAE;YACTP,WAAW;YACXU,QAAQ,EAAEL;UACX,CAAE,CAAC;QACJ,CAAG;QACHA,KAAK,EAAGK;MAAU,CAClB,CACD;IAAA,CACM,CACR,EACCS,gBAAgB,KAAK,MAAM,iBAC5B,IAAArB,WAAA,CAAA+B,IAAA,EAAA/B,WAAA,CAAAgC,QAAA;MAAAC,QAAA,gBACC,IAAAjC,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAAuD,oBAAM;QACNhB,EAAE,EAAGC,wCAAgB;QACrBE,QAAQ,EAAGX,YAAc;QACzBY,KAAK,EAAG,IAAAlC,QAAE,EAAE,WAAY,CAAG;QAC3BmC,UAAU,EAAGX,cAAgB;QAC7BnB,gBAAgB,EAAGA,gBAAkB;QACrCC,OAAO,EAAGA,OAAS;QAAAsB,QAAA,gBAEnB,IAAAjC,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAwD,0BAAY;UACZT,IAAI,EAAC,kBAAkB;UACvBJ,KAAK,EAAG,IAAAlC,QAAE,EAAE,aAAc,CAAG;UAC7BY,IAAI,EAAC,QAAQ;UACbR,QAAQ,EAAKF,KAAK,IAAM;YACvBE,QAAQ,CAAE;cACTI,WAAW;cACXC,QAAQ;cACRE,OAAO;cACPD,UAAU,EAAER;YACb,CAAE,CAAC;UACJ,CAAG;UACHA,KAAK,EAAGQ,UAAY;UACpBsC,GAAG,EAAG;QAAG,CACT,CAAC,eACF,IAAArD,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAwD,0BAAY;UACZT,IAAI,EAAC,kBAAkB;UACvBJ,KAAK,EAAG,IAAAlC,QAAE,EAAE,UAAW,CAAG;UAC1BY,IAAI,EAAC,QAAQ;UACbR,QAAQ,EAAKF,KAAK,IAAM;YACvBE,QAAQ,CAAE;cACTI,WAAW;cACXC,QAAQ;cACRC,UAAU;cACVC,OAAO,EAAET;YACV,CAAE,CAAC;UACJ,CAAG;UACHA,KAAK,EAAGS,OAAS;UACjBqC,GAAG,EAAG;QAAG,CACT,CAAC;MAAA,CACK,CAAC,EACPC,MAAM,CAACC,qCAAqC;MAAA;MAC7C;MACA;MACA;MACA,IAAAvD,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAA4D,IAAI;QACJrB,EAAE,EAAGC,wCAAgB;QACrBE,QAAQ,EAAGZ,aAAe;QAC1Ba,KAAK,EAAG,IAAAlC,QAAE,EAAE,gBAAiB,CAAG;QAChCmC,UAAU,EAAGZ,eAAiB;QAC9BlB,gBAAgB,EAAG,KAAO;QAC1BC,OAAO,EAAGA,OAAS;QAAAsB,QAAA,gBAEnB,IAAAjC,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAA6D,QAAQ;UAACC,KAAK,EAAG;YAAEC,KAAK,EAAE;UAAM,CAAG;UAAA1B,QAAA,eACnC,IAAAjC,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAwD,0BAAY;YACZT,IAAI,EAAC,kBAAkB;YACvBJ,KAAK,EAAG,IAAAlC,QAAE,EAAE,QAAS,CAAG;YACxBY,IAAI,EAAC,QAAQ;YACbR,QAAQ,EAAKF,KAAK,IAAM;cACvBE,QAAQ,CAAE;gBACTI,WAAW,EAAEN,KAAK;gBAClBO,QAAQ;gBACRC,UAAU;gBACVC;cACD,CAAE,CAAC;YACJ,CAAG;YACHT,KAAK,EAAGM,WAAa;YACrBwC,GAAG,EAAG,CAAG;YACTO,GAAG,EACFzD,YAAY,EAAE0D,WAAW,GACtB1D,YAAY,CAAC0D,WAAW,IACtB9C,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAE,GACnB,CAAC,GACDU;UACH,CACD;QAAC,CACO,CAAC,eACX,IAAAzB,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAA6D,QAAQ;UAACC,KAAK,EAAG;YAAEC,KAAK,EAAE;UAAM,CAAG;UAAA1B,QAAA,eACnC,IAAAjC,WAAA,CAAAgD,GAAA,EAACpD,WAAA,CAAAwD,0BAAY;YACZT,IAAI,EAAC,kBAAkB;YACvBJ,KAAK,EAAG,IAAAlC,QAAE,EAAE,KAAM,CAAG;YACrBY,IAAI,EAAC,QAAQ;YACbR,QAAQ,EAAKF,KAAK,IAAM;cACvBE,QAAQ,CAAE;gBACTI,WAAW;gBACXC,QAAQ,EAAEP,KAAK;gBACfQ,UAAU;gBACVC;cACD,CAAE,CAAC;YACJ,CAAG;YACHT,KAAK,EAAGO,QAAU;YAClBuC,GAAG,EAAG,CAAG;YACTO,GAAG,EACFzD,YAAY,EAAE2D,QAAQ,GACnB3D,YAAY,CAAC2D,QAAQ,IACnB9C,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,CAAC,CAAE,GAChB,CAAC,GACDS;UACH,CACD;QAAC,CACO,CAAC;MAAA,CACN,CACN;IAAA,CACA,CACF;EAAA,CACA,CAAC;AAEL;AAEO,SAASmB,sBAAsBA,CAAEzC,YAAY,EAAG;EACtD,MAAM;IAAEC,WAAW,GAAG;EAAa,CAAC,GAAGD,YAAY;EAEnD,OAAOC,WAAW,KAAK,YAAY,GAAG,IAAAC,QAAE,EAAE,OAAQ,CAAC,GAAG,IAAAA,QAAE,EAAE,QAAS,CAAC;AACrE","ignoreList":[]}

package/build/components/color-palette/control.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ColorPaletteControl;
-var _react = require("react");
 var _control = _interopRequireDefault(require("../colors-gradients/control"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
@@ -16,7 +16,7 @@ function ColorPaletteControl({
   value,
   ...otherProps
 }) {
-  return (0, _react.createElement)(_control.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_control.default, {
     ...otherProps,
     onColorChange: onChange,
     colorValue: value,

package/build/components/color-palette/control.js.map

@@ -1 +1 @@
-{"version":3,"names":["_control","_interopRequireDefault","require","ColorPaletteControl","onChange","value","otherProps","_react","createElement","default","onColorChange","colorValue","gradients","disableCustomGradients"],"sources":["@wordpress/block-editor/src/components/color-palette/control.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\n\nexport default function ColorPaletteControl( {\n\tonChange,\n\tvalue,\n\t...otherProps\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...otherProps }\n\t\t\tonColorChange={ onChange }\n\t\t\tcolorValue={ value }\n\t\t\tgradients={ [] }\n\t\t\tdisableCustomGradients\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGe,SAASC,mBAAmBA,CAAE;EAC5CC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,QAAA,CAAAS,OAAoB;IAAA,GACfH,UAAU;IACfI,aAAa,EAAGN,QAAU;IAC1BO,UAAU,EAAGN,KAAO;IACpBO,SAAS,EAAG,EAAI;IAChBC,sBAAsB;EAAA,CACtB,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_control","_interopRequireDefault","require","_jsxRuntime","ColorPaletteControl","onChange","value","otherProps","jsx","default","onColorChange","colorValue","gradients","disableCustomGradients"],"sources":["@wordpress/block-editor/src/components/color-palette/control.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\n\nexport default function ColorPaletteControl( {\n\tonChange,\n\tvalue,\n\t...otherProps\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...otherProps }\n\t\t\tonColorChange={ onChange }\n\t\t\tcolorValue={ value }\n\t\t\tgradients={ [] }\n\t\t\tdisableCustomGradients\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA+D,IAAAC,WAAA,GAAAD,OAAA;AAH/D;AACA;AACA;;AAGe,SAASE,mBAAmBA,CAAE;EAC5CC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACJ,CAAC,EAAG;EACH,oBACC,IAAAJ,WAAA,CAAAK,GAAA,EAACR,QAAA,CAAAS,OAAoB;IAAA,GACfF,UAAU;IACfG,aAAa,EAAGL,QAAU;IAC1BM,UAAU,EAAGL,KAAO;IACpBM,SAAS,EAAG,EAAI;IAChBC,sBAAsB;EAAA,CACtB,CAAC;AAEJ","ignoreList":[]}

package/build/components/color-palette/with-color-context.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _compose = require("@wordpress/compose");
 var _useSettings = require("../use-settings");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -21,7 +21,7 @@ var _default = exports.default = (0, _compose.createHigherOrderComponent)(Wrappe
       disableCustomColors = !enableCustomColors
     } = props;
     const hasColorsToChoose = colors && colors.length > 0 || !disableCustomColors;
-    return (0, _react.createElement)(WrappedComponent, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
       ...props,
       colors,
       disableCustomColors,

package/build/components/color-palette/with-color-context.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_useSettings","_default","exports","default","createHigherOrderComponent","WrappedComponent","props","colorsFeature","enableCustomColors","useSettings","colors","disableCustomColors","hasColorsToChoose","length","_react","createElement"],"sources":["@wordpress/block-editor/src/components/color-palette/with-color-context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default createHigherOrderComponent( ( WrappedComponent ) => {\n\treturn ( props ) => {\n\t\tconst [ colorsFeature, enableCustomColors ] = useSettings(\n\t\t\t'color.palette',\n\t\t\t'color.custom'\n\t\t);\n\t\tconst {\n\t\t\tcolors = colorsFeature,\n\t\t\tdisableCustomColors = ! enableCustomColors,\n\t\t} = props;\n\t\tconst hasColorsToChoose =\n\t\t\t( colors && colors.length > 0 ) || ! disableCustomColors;\n\t\treturn (\n\t\t\t<WrappedComponent\n\t\t\t\t{ ...{\n\t\t\t\t\t...props,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\thasColorsToChoose,\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t};\n}, 'withColorContext' );\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAD,OAAA;AARA;AACA;AACA;AAGA;AACA;AACA;AAFA,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAKe,IAAAC,mCAA0B,EAAIC,gBAAgB,IAAM;EAClE,OAASC,KAAK,IAAM;IACnB,MAAM,CAAEC,aAAa,EAAEC,kBAAkB,CAAE,GAAG,IAAAC,wBAAW,EACxD,eAAe,EACf,cACD,CAAC;IACD,MAAM;MACLC,MAAM,GAAGH,aAAa;MACtBI,mBAAmB,GAAG,CAAEH;IACzB,CAAC,GAAGF,KAAK;IACT,MAAMM,iBAAiB,GACpBF,MAAM,IAAIA,MAAM,CAACG,MAAM,GAAG,CAAC,IAAM,CAAEF,mBAAmB;IACzD,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACV,gBAAgB;MAEf,GAAGC,KAAK;MACRI,MAAM;MACNC,mBAAmB;MACnBC;IAAiB,CAElB,CAAC;EAEJ,CAAC;AACF,CAAC,EAAE,kBAAmB,CAAC","ignoreList":[]}
+{"version":3,"names":["_compose","require","_useSettings","_jsxRuntime","_default","exports","default","createHigherOrderComponent","WrappedComponent","props","colorsFeature","enableCustomColors","useSettings","colors","disableCustomColors","hasColorsToChoose","length","jsx"],"sources":["@wordpress/block-editor/src/components/color-palette/with-color-context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default createHigherOrderComponent( ( WrappedComponent ) => {\n\treturn ( props ) => {\n\t\tconst [ colorsFeature, enableCustomColors ] = useSettings(\n\t\t\t'color.palette',\n\t\t\t'color.custom'\n\t\t);\n\t\tconst {\n\t\t\tcolors = colorsFeature,\n\t\t\tdisableCustomColors = ! enableCustomColors,\n\t\t} = props;\n\t\tconst hasColorsToChoose =\n\t\t\t( colors && colors.length > 0 ) || ! disableCustomColors;\n\t\treturn (\n\t\t\t<WrappedComponent\n\t\t\t\t{ ...{\n\t\t\t\t\t...props,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\thasColorsToChoose,\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t};\n}, 'withColorContext' );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAD,OAAA;AAA8C,IAAAE,WAAA,GAAAF,OAAA;AAR9C;AACA;AACA;AAGA;AACA;AACA;AAFA,IAAAG,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAKe,IAAAC,mCAA0B,EAAIC,gBAAgB,IAAM;EAClE,OAASC,KAAK,IAAM;IACnB,MAAM,CAAEC,aAAa,EAAEC,kBAAkB,CAAE,GAAG,IAAAC,wBAAW,EACxD,eAAe,EACf,cACD,CAAC;IACD,MAAM;MACLC,MAAM,GAAGH,aAAa;MACtBI,mBAAmB,GAAG,CAAEH;IACzB,CAAC,GAAGF,KAAK;IACT,MAAMM,iBAAiB,GACpBF,MAAM,IAAIA,MAAM,CAACG,MAAM,GAAG,CAAC,IAAM,CAAEF,mBAAmB;IACzD,oBACC,IAAAX,WAAA,CAAAc,GAAA,EAACT,gBAAgB;MAEf,GAAGC,KAAK;MACRI,MAAM;MACNC,mBAAmB;MACnBC;IAAiB,CAElB,CAAC;EAEJ,CAAC;AACF,CAAC,EAAE,kBAAmB,CAAC","ignoreList":[]}

package/build/components/color-style-selector/index.js

@@ -5,21 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _keycodes = require("@wordpress/keycodes");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
 
-const ColorSelectorSVGIcon = () => (0, _react.createElement)(_components.SVG, {
+const ColorSelectorSVGIcon = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 20 20"
-}, (0, _react.createElement)(_components.Path, {
-  d: "M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z"
-}));
+  viewBox: "0 0 20 20",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
+    d: "M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z"
+  })
+});
 
 /**
  * Color Selector Icon component.
@@ -34,12 +35,14 @@ const ColorSelectorIcon = ({
   style,
   className
 }) => {
-  return (0, _react.createElement)("div", {
-    className: "block-library-colors-selector__icon-container"
-  }, (0, _react.createElement)("div", {
-    className: `${className} block-library-colors-selector__state-selection`,
-    style: style
-  }, (0, _react.createElement)(ColorSelectorSVGIcon, null)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "block-library-colors-selector__icon-container",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${className} block-library-colors-selector__state-selection`,
+      style: style,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSelectorSVGIcon, {})
+    })
+  });
 };
 
 /**
@@ -64,13 +67,19 @@ const renderToggleComponent = ({
       onToggle();
     }
   };
-  return (0, _react.createElement)(_components.ToolbarGroup, null, (0, _react.createElement)(_components.ToolbarButton, {
-    className: "components-toolbar__control block-library-colors-selector__toggle",
-    label: (0, _i18n.__)('Open Colors Selector'),
-    onClick: onToggle,
-    onKeyDown: openOnArrowDown,
-    icon: (0, _react.createElement)(BackgroundColor, null, (0, _react.createElement)(TextColor, null, (0, _react.createElement)(ColorSelectorIcon, null)))
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
+      className: "components-toolbar__control block-library-colors-selector__toggle",
+      label: (0, _i18n.__)('Open Colors Selector'),
+      onClick: onToggle,
+      onKeyDown: openOnArrowDown,
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackgroundColor, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TextColor, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSelectorIcon, {})
+        })
+      })
+    })
+  });
 };
 const BlockColorsStyleSelector = ({
   children,
@@ -81,7 +90,7 @@ const BlockColorsStyleSelector = ({
     since: '6.1',
     version: '6.3'
   });
-  return (0, _react.createElement)(_components.Dropdown, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
     popoverProps: {
       placement: 'bottom-start'
     },

package/build/components/color-style-selector/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_keycodes","_deprecated","_interopRequireDefault","ColorSelectorSVGIcon","_react","createElement","SVG","xmlns","viewBox","Path","d","ColorSelectorIcon","style","className","renderToggleComponent","TextColor","BackgroundColor","onToggle","isOpen","openOnArrowDown","event","keyCode","DOWN","preventDefault","ToolbarGroup","ToolbarButton","label","__","onClick","onKeyDown","icon","BlockColorsStyleSelector","children","other","deprecated","alternative","since","version","Dropdown","popoverProps","placement","contentClassName","renderToggle","renderContent","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/color-style-selector/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tDropdown,\n\tToolbarGroup,\n\tSVG,\n\tPath,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport deprecated from '@wordpress/deprecated';\n\nconst ColorSelectorSVGIcon = () => (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n\t\t<Path d=\"M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z\" />\n\t</SVG>\n);\n\n/**\n * Color Selector Icon component.\n *\n * @param {Object} props           Component properties.\n * @param {Object} props.style     Style object.\n * @param {string} props.className Class name for component.\n *\n * @return {*} React Icon component.\n */\nconst ColorSelectorIcon = ( { style, className } ) => {\n\treturn (\n\t\t<div className=\"block-library-colors-selector__icon-container\">\n\t\t\t<div\n\t\t\t\tclassName={ `${ className } block-library-colors-selector__state-selection` }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<ColorSelectorSVGIcon />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n/**\n * Renders the Colors Selector Toolbar with the icon button.\n *\n * @param {Object} props                 Component properties.\n * @param {Object} props.TextColor       Text color component that wraps icon.\n * @param {Object} props.BackgroundColor Background color component that wraps icon.\n *\n * @return {*} React toggle button component.\n */\nconst renderToggleComponent =\n\t( { TextColor, BackgroundColor } ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst openOnArrowDown = ( event ) => {\n\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonToggle();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t\t</BackgroundColor>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => {\n\tdeprecated( `wp.blockEditor.BlockColorsStyleSelector`, {\n\t\talternative: 'block supports API',\n\t\tsince: '6.1',\n\t\tversion: '6.3',\n\t} );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\tclassName=\"block-library-colors-selector\"\n\t\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\t\trenderToggle={ renderToggleComponent( other ) }\n\t\t\trenderContent={ () => children }\n\t\t/>\n\t);\n};\n\nexport default BlockColorsStyleSelector;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAOA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAZA;AACA;AACA;;AAYA,MAAMK,oBAAoB,GAAGA,CAAA,KAC5B,IAAAC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAS,GAAG;EAACC,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1D,IAAAJ,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAY,IAAI;EAACC,CAAC,EAAC;AAA6e,CAAE,CACnf,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAGA,CAAE;EAAEC,KAAK;EAAEC;AAAU,CAAC,KAAM;EACrD,OACC,IAAAT,MAAA,CAAAC,aAAA;IAAKQ,SAAS,EAAC;EAA+C,GAC7D,IAAAT,MAAA,CAAAC,aAAA;IACCQ,SAAS,EAAI,GAAGA,SAAW,iDAAkD;IAC7ED,KAAK,EAAGA;EAAO,GAEf,IAAAR,MAAA,CAAAC,aAAA,EAACF,oBAAoB,MAAE,CACnB,CACD,CAAC;AAER,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMW,qBAAqB,GAC1BA,CAAE;EAAEC,SAAS;EAAEC;AAAgB,CAAC,KAChC,CAAE;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAM;EAC3B,MAAMC,eAAe,GAAKC,KAAK,IAAM;IACpC,IAAK,CAAEF,MAAM,IAAIE,KAAK,CAACC,OAAO,KAAKC,cAAI,EAAG;MACzCF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBN,QAAQ,CAAC,CAAC;IACX;EACD,CAAC;EAED,OACC,IAAAb,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAA2B,YAAY,QACZ,IAAApB,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAA4B,aAAa;IACbZ,SAAS,EAAC,mEAAmE;IAC7Ea,KAAK,EAAG,IAAAC,QAAE,EAAE,sBAAuB,CAAG;IACtCC,OAAO,EAAGX,QAAU;IACpBY,SAAS,EAAGV,eAAiB;IAC7BW,IAAI,EACH,IAAA1B,MAAA,CAAAC,aAAA,EAACW,eAAe,QACf,IAAAZ,MAAA,CAAAC,aAAA,EAACU,SAAS,QACT,IAAAX,MAAA,CAAAC,aAAA,EAACM,iBAAiB,MAAE,CACV,CACK;EACjB,CACD,CACY,CAAC;AAEjB,CAAC;AAEF,MAAMoB,wBAAwB,GAAGA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC9D,IAAAC,mBAAU,EAAG,yCAAwC,EAAE;IACtDC,WAAW,EAAE,oBAAoB;IACjCC,KAAK,EAAE,KAAK;IACZC,OAAO,EAAE;EACV,CAAE,CAAC;EAEH,OACC,IAAAjC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAyC,QAAQ;IACRC,YAAY,EAAG;MAAEC,SAAS,EAAE;IAAe,CAAG;IAC9C3B,SAAS,EAAC,+BAA+B;IACzC4B,gBAAgB,EAAC,wCAAwC;IACzDC,YAAY,EAAG5B,qBAAqB,CAAEmB,KAAM,CAAG;IAC/CU,aAAa,EAAGA,CAAA,KAAMX;EAAU,CAChC,CAAC;AAEJ,CAAC;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaf,wBAAwB","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_keycodes","_deprecated","_interopRequireDefault","_jsxRuntime","ColorSelectorSVGIcon","jsx","SVG","xmlns","viewBox","children","Path","d","ColorSelectorIcon","style","className","renderToggleComponent","TextColor","BackgroundColor","onToggle","isOpen","openOnArrowDown","event","keyCode","DOWN","preventDefault","ToolbarGroup","ToolbarButton","label","__","onClick","onKeyDown","icon","BlockColorsStyleSelector","other","deprecated","alternative","since","version","Dropdown","popoverProps","placement","contentClassName","renderToggle","renderContent","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/color-style-selector/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tDropdown,\n\tToolbarGroup,\n\tSVG,\n\tPath,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport deprecated from '@wordpress/deprecated';\n\nconst ColorSelectorSVGIcon = () => (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n\t\t<Path d=\"M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z\" />\n\t</SVG>\n);\n\n/**\n * Color Selector Icon component.\n *\n * @param {Object} props           Component properties.\n * @param {Object} props.style     Style object.\n * @param {string} props.className Class name for component.\n *\n * @return {*} React Icon component.\n */\nconst ColorSelectorIcon = ( { style, className } ) => {\n\treturn (\n\t\t<div className=\"block-library-colors-selector__icon-container\">\n\t\t\t<div\n\t\t\t\tclassName={ `${ className } block-library-colors-selector__state-selection` }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<ColorSelectorSVGIcon />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n/**\n * Renders the Colors Selector Toolbar with the icon button.\n *\n * @param {Object} props                 Component properties.\n * @param {Object} props.TextColor       Text color component that wraps icon.\n * @param {Object} props.BackgroundColor Background color component that wraps icon.\n *\n * @return {*} React toggle button component.\n */\nconst renderToggleComponent =\n\t( { TextColor, BackgroundColor } ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst openOnArrowDown = ( event ) => {\n\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonToggle();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t\t</BackgroundColor>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => {\n\tdeprecated( `wp.blockEditor.BlockColorsStyleSelector`, {\n\t\talternative: 'block supports API',\n\t\tsince: '6.1',\n\t\tversion: '6.3',\n\t} );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\tclassName=\"block-library-colors-selector\"\n\t\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\t\trenderToggle={ renderToggleComponent( other ) }\n\t\t\trenderContent={ () => children }\n\t\t/>\n\t);\n};\n\nexport default BlockColorsStyleSelector;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAOA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAZ/C;AACA;AACA;;AAYA,MAAMM,oBAAoB,GAAGA,CAAA,kBAC5B,IAAAD,WAAA,CAAAE,GAAA,EAACR,WAAA,CAAAS,GAAG;EAACC,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC,WAAW;EAAAC,QAAA,eAC1D,IAAAN,WAAA,CAAAE,GAAA,EAACR,WAAA,CAAAa,IAAI;IAACC,CAAC,EAAC;EAA6e,CAAE;AAAC,CACpf,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAGA,CAAE;EAAEC,KAAK;EAAEC;AAAU,CAAC,KAAM;EACrD,oBACC,IAAAX,WAAA,CAAAE,GAAA;IAAKS,SAAS,EAAC,+CAA+C;IAAAL,QAAA,eAC7D,IAAAN,WAAA,CAAAE,GAAA;MACCS,SAAS,EAAI,GAAGA,SAAW,iDAAkD;MAC7ED,KAAK,EAAGA,KAAO;MAAAJ,QAAA,eAEf,IAAAN,WAAA,CAAAE,GAAA,EAACD,oBAAoB,IAAE;IAAC,CACpB;EAAC,CACF,CAAC;AAER,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMW,qBAAqB,GAC1BA,CAAE;EAAEC,SAAS;EAAEC;AAAgB,CAAC,KAChC,CAAE;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAM;EAC3B,MAAMC,eAAe,GAAKC,KAAK,IAAM;IACpC,IAAK,CAAEF,MAAM,IAAIE,KAAK,CAACC,OAAO,KAAKC,cAAI,EAAG;MACzCF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBN,QAAQ,CAAC,CAAC;IACX;EACD,CAAC;EAED,oBACC,IAAAf,WAAA,CAAAE,GAAA,EAACR,WAAA,CAAA4B,YAAY;IAAAhB,QAAA,eACZ,IAAAN,WAAA,CAAAE,GAAA,EAACR,WAAA,CAAA6B,aAAa;MACbZ,SAAS,EAAC,mEAAmE;MAC7Ea,KAAK,EAAG,IAAAC,QAAE,EAAE,sBAAuB,CAAG;MACtCC,OAAO,EAAGX,QAAU;MACpBY,SAAS,EAAGV,eAAiB;MAC7BW,IAAI,eACH,IAAA5B,WAAA,CAAAE,GAAA,EAACY,eAAe;QAAAR,QAAA,eACf,IAAAN,WAAA,CAAAE,GAAA,EAACW,SAAS;UAAAP,QAAA,eACT,IAAAN,WAAA,CAAAE,GAAA,EAACO,iBAAiB,IAAE;QAAC,CACX;MAAC,CACI;IACjB,CACD;EAAC,CACW,CAAC;AAEjB,CAAC;AAEF,MAAMoB,wBAAwB,GAAGA,CAAE;EAAEvB,QAAQ;EAAE,GAAGwB;AAAM,CAAC,KAAM;EAC9D,IAAAC,mBAAU,EAAG,yCAAwC,EAAE;IACtDC,WAAW,EAAE,oBAAoB;IACjCC,KAAK,EAAE,KAAK;IACZC,OAAO,EAAE;EACV,CAAE,CAAC;EAEH,oBACC,IAAAlC,WAAA,CAAAE,GAAA,EAACR,WAAA,CAAAyC,QAAQ;IACRC,YAAY,EAAG;MAAEC,SAAS,EAAE;IAAe,CAAG;IAC9C1B,SAAS,EAAC,+BAA+B;IACzC2B,gBAAgB,EAAC,wCAAwC;IACzDC,YAAY,EAAG3B,qBAAqB,CAAEkB,KAAM,CAAG;IAC/CU,aAAa,EAAGA,CAAA,KAAMlC;EAAU,CAChC,CAAC;AAEJ,CAAC;AAAC,IAAAmC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEad,wBAAwB","ignoreList":[]}

package/build/components/colors/utils.js

@@ -25,6 +25,9 @@ var _lockUnlock = require("../../lock-unlock");
  */
 
 (0, _colord.extend)([_names.default, _a11y.default]);
+const {
+  kebabCase
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
@@ -78,9 +81,6 @@ function getColorClassName(colorContextName, colorSlug) {
   if (!colorContextName || !colorSlug) {
     return undefined;
   }
-  const {
-    kebabCase
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
   return `has-${kebabCase(colorSlug)}-${colorContextName}`;
 }
 

package/build/components/colors/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_components","_lockUnlock","extend","namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","find","color","slug","exports","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","kebabCase","unlock","componentsPrivateApis","getMostReadableColor","colordColor","colord","getColorContrast","contrast","maxContrast","Math","max","map"],"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn colors?.find( ( color ) => color.color === colorValue );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAKA,IAAAK,WAAA,GAAAL,OAAA;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,IAAAM,cAAM,EAAE,CAAEC,cAAW,EAAEC,aAAU,CAAG,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,+BAA+B,GAAGA,CAC9CC,MAAM,EACNC,YAAY,EACZC,WAAW,KACP;EACJ,IAAKD,YAAY,EAAG;IACnB,MAAME,QAAQ,GAAGH,MAAM,EAAEI,IAAI,CAC1BC,KAAK,IAAMA,KAAK,CAACC,IAAI,KAAKL,YAC7B,CAAC;IAED,IAAKE,QAAQ,EAAG;MACf,OAAOA,QAAQ;IAChB;EACD;EACA,OAAO;IACNE,KAAK,EAAEH;EACR,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAK,OAAA,CAAAR,+BAAA,GAAAA,+BAAA;AASO,MAAMS,0BAA0B,GAAGA,CAAER,MAAM,EAAES,UAAU,KAAM;EACnE,OAAOT,MAAM,EAAEI,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKI,UAAW,CAAC;AAC/D,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAF,OAAA,CAAAC,0BAAA,GAAAA,0BAAA;AASO,SAASE,iBAAiBA,CAAEC,gBAAgB,EAAEC,SAAS,EAAG;EAChE,IAAK,CAAED,gBAAgB,IAAI,CAAEC,SAAS,EAAG;IACxC,OAAOC,SAAS;EACjB;EAEA,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;EAErD,OAAQ,OAAOF,SAAS,CAAEF,SAAU,CAAG,IAAID,gBAAkB,EAAC;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASM,oBAAoBA,CAAEjB,MAAM,EAAES,UAAU,EAAG;EAC1D,MAAMS,WAAW,GAAG,IAAAC,cAAM,EAAEV,UAAW,CAAC;EACxC,MAAMW,gBAAgB,GAAGA,CAAE;IAAEf;EAAM,CAAC,KAAMa,WAAW,CAACG,QAAQ,CAAEhB,KAAM,CAAC;EAEvE,MAAMiB,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAE,GAAGxB,MAAM,CAACyB,GAAG,CAAEL,gBAAiB,CAAE,CAAC;EACjE,OAAOpB,MAAM,CAACI,IAAI,CAAIC,KAAK,IAAMe,gBAAgB,CAAEf,KAAM,CAAC,KAAKiB,WAAY,CAAC,CAC1EjB,KAAK;AACR","ignoreList":[]}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_components","_lockUnlock","extend","namesPlugin","a11yPlugin","kebabCase","unlock","componentsPrivateApis","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","find","color","slug","exports","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","colord","getColorContrast","contrast","maxContrast","Math","max","map"],"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn colors?.find( ( color ) => color.color === colorValue );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAKA,IAAAK,WAAA,GAAAL,OAAA;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,IAAAM,cAAM,EAAE,CAAEC,cAAW,EAAEC,aAAU,CAAG,CAAC;AAErC,MAAM;EAAEC;AAAU,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,+BAA+B,GAAGA,CAC9CC,MAAM,EACNC,YAAY,EACZC,WAAW,KACP;EACJ,IAAKD,YAAY,EAAG;IACnB,MAAME,QAAQ,GAAGH,MAAM,EAAEI,IAAI,CAC1BC,KAAK,IAAMA,KAAK,CAACC,IAAI,KAAKL,YAC7B,CAAC;IAED,IAAKE,QAAQ,EAAG;MACf,OAAOA,QAAQ;IAChB;EACD;EACA,OAAO;IACNE,KAAK,EAAEH;EACR,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAK,OAAA,CAAAR,+BAAA,GAAAA,+BAAA;AASO,MAAMS,0BAA0B,GAAGA,CAAER,MAAM,EAAES,UAAU,KAAM;EACnE,OAAOT,MAAM,EAAEI,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKI,UAAW,CAAC;AAC/D,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAF,OAAA,CAAAC,0BAAA,GAAAA,0BAAA;AASO,SAASE,iBAAiBA,CAAEC,gBAAgB,EAAEC,SAAS,EAAG;EAChE,IAAK,CAAED,gBAAgB,IAAI,CAAEC,SAAS,EAAG;IACxC,OAAOC,SAAS;EACjB;EAEA,OAAQ,OAAOjB,SAAS,CAAEgB,SAAU,CAAG,IAAID,gBAAkB,EAAC;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,oBAAoBA,CAAEd,MAAM,EAAES,UAAU,EAAG;EAC1D,MAAMM,WAAW,GAAG,IAAAC,cAAM,EAAEP,UAAW,CAAC;EACxC,MAAMQ,gBAAgB,GAAGA,CAAE;IAAEZ;EAAM,CAAC,KAAMU,WAAW,CAACG,QAAQ,CAAEb,KAAM,CAAC;EAEvE,MAAMc,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAE,GAAGrB,MAAM,CAACsB,GAAG,CAAEL,gBAAiB,CAAE,CAAC;EACjE,OAAOjB,MAAM,CAACI,IAAI,CAAIC,KAAK,IAAMY,gBAAgB,CAAEZ,KAAM,CAAC,KAAKc,WAAY,CAAC,CAC1Ed,KAAK;AACR","ignoreList":[]}

package/build/components/colors/with-colors.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createCustomColorsHOC = createCustomColorsHOC;
 exports.default = withColors;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _utils = require("./utils");
 var _useSettings = require("../use-settings");
 var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -20,6 +20,10 @@ var _lockUnlock = require("../../lock-unlock");
  * Internal dependencies
  */
 
+const {
+  kebabCase
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+
 /**
  * Capitalizes the first letter in a string.
  *
@@ -37,7 +41,7 @@ const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.
  *
  * @return {Function} The higher order component.
  */
-const withCustomColorPalette = colorsArray => (0, _compose.createHigherOrderComponent)(WrappedComponent => props => (0, _react.createElement)(WrappedComponent, {
+const withCustomColorPalette = colorsArray => (0, _compose.createHigherOrderComponent)(WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
   ...props,
   colors: colorsArray
 }), 'withCustomColorPalette');
@@ -51,7 +55,7 @@ const withCustomColorPalette = colorsArray => (0, _compose.createHigherOrderComp
 const withEditorColorPalette = () => (0, _compose.createHigherOrderComponent)(WrappedComponent => props => {
   const [userPalette, themePalette, defaultPalette] = (0, _useSettings.useSettings)('color.palette.custom', 'color.palette.theme', 'color.palette.default');
   const allColors = (0, _element.useMemo)(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
-  return (0, _react.createElement)(WrappedComponent, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
     ...props,
     colors: allColors
   });
@@ -67,9 +71,6 @@ const withEditorColorPalette = () => (0, _compose.createHigherOrderComponent)(Wr
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC(colorTypes, withColorPalette) {
-  const {
-    kebabCase
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
   const colorMap = colorTypes.reduce((colorObject, colorType) => {
     return {
       ...colorObject,
@@ -136,7 +137,7 @@ function createColorHOC(colorTypes, withColorPalette) {
         }, {});
       }
       render() {
-        return (0, _react.createElement)(WrappedComponent, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
           ...this.props,
           colors: undefined,
           ...this.state,

package/build/components/colors/with-colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_components","_utils","_useSettings","_lockUnlock","upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","createHigherOrderComponent","WrappedComponent","props","_react","createElement","colors","withEditorColorPalette","userPalette","themePalette","defaultPalette","useSettings","allColors","useMemo","createColorHOC","colorTypes","withColorPalette","kebabCase","unlock","componentsPrivateApis","colorMap","reduce","colorObject","colorType","compose","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","getColorObjectByColorValue","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","entries","newState","colorContext","getColorObjectByAttributeValues","previousColorObject","previousColor","color","class","getColorClassName","render","createCustomColorsHOC","withColors"],"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t\t\t'color.palette.custom',\n\t\t\t\t'color.palette.theme',\n\t\t\t\t'color.palette.default'\n\t\t\t);\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t\t) }`\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_components","_utils","_useSettings","_lockUnlock","_jsxRuntime","kebabCase","unlock","componentsPrivateApis","upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","createHigherOrderComponent","WrappedComponent","props","jsx","colors","withEditorColorPalette","userPalette","themePalette","defaultPalette","useSettings","allColors","useMemo","createColorHOC","colorTypes","withColorPalette","colorMap","reduce","colorObject","colorType","compose","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","getColorObjectByColorValue","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","entries","newState","colorContext","getColorObjectByAttributeValues","previousColorObject","previousColor","color","class","getColorClassName","render","createCustomColorsHOC","withColors"],"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t\t\t'color.palette.custom',\n\t\t\t\t'color.palette.theme',\n\t\t\t\t'color.palette.default'\n\t\t\t);\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t\t) }`\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/colors-gradients/control.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _useSettings = require("../use-settings");
 var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -23,6 +23,9 @@ var _lockUnlock = require("../../lock-unlock");
  * Internal dependencies
  */
 
+const {
+  Tabs
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 const TAB_IDS = {
   color: 'color',
@@ -51,7 +54,7 @@ function ColorGradientControlInner({
     return null;
   }
   const tabPanels = {
-    [TAB_IDS.color]: (0, _react.createElement)(_components.ColorPalette, {
+    [TAB_IDS.color]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPalette, {
       value: colorValue,
       onChange: canChooseAGradient ? newColor => {
         onColorChange(newColor);
@@ -64,7 +67,7 @@ function ColorGradientControlInner({
       enableAlpha: enableAlpha,
       headingLevel: headingLevel
     }),
-    [TAB_IDS.gradient]: (0, _react.createElement)(_components.GradientPicker, {
+    [TAB_IDS.gradient]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GradientPicker, {
       value: gradientValue,
       onChange: canChooseAColor ? newGradient => {
         onGradientChange(newGradient);
@@ -77,44 +80,55 @@ function ColorGradientControlInner({
       headingLevel: headingLevel
     })
   };
-  const renderPanelType = type => (0, _react.createElement)("div", {
-    className: "block-editor-color-gradient-control__panel"
-  }, tabPanels[type]);
-
-  // Unlocking `Tabs` too early causes the `unlock` method to receive an empty
-  // object, due to circular dependencies.
-  // See https://github.com/WordPress/gutenberg/issues/52692
-  const {
-    Tabs
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
-  return (0, _react.createElement)(_components.BaseControl, {
+  const renderPanelType = type => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "block-editor-color-gradient-control__panel",
+    children: tabPanels[type]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     __nextHasNoMarginBottom: true,
-    className: (0, _classnames.default)('block-editor-color-gradient-control', className)
-  }, (0, _react.createElement)("fieldset", {
-    className: "block-editor-color-gradient-control__fieldset"
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 1
-  }, showTitle && (0, _react.createElement)("legend", null, (0, _react.createElement)("div", {
-    className: "block-editor-color-gradient-control__color-indicator"
-  }, (0, _react.createElement)(_components.BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && (0, _react.createElement)("div", null, (0, _react.createElement)(Tabs, {
-    defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color
-  }, (0, _react.createElement)(Tabs.TabList, null, (0, _react.createElement)(Tabs.Tab, {
-    tabId: TAB_IDS.color
-  }, (0, _i18n.__)('Solid')), (0, _react.createElement)(Tabs.Tab, {
-    tabId: TAB_IDS.gradient
-  }, (0, _i18n.__)('Gradient'))), (0, _react.createElement)(Tabs.TabPanel, {
-    tabId: TAB_IDS.color,
-    className: 'block-editor-color-gradient-control__panel',
-    focusable: false
-  }, tabPanels.color), (0, _react.createElement)(Tabs.TabPanel, {
-    tabId: TAB_IDS.gradient,
-    className: 'block-editor-color-gradient-control__panel',
-    focusable: false
-  }, tabPanels.gradient))), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient))));
+    className: (0, _clsx.default)('block-editor-color-gradient-control', className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+      className: "block-editor-color-gradient-control__fieldset",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+        spacing: 1,
+        children: [showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "block-editor-color-gradient-control__color-indicator",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
+              children: label
+            })
+          })
+        }), canChooseAColor && canChooseAGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
+            defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs.TabList, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
+                tabId: TAB_IDS.color,
+                children: (0, _i18n.__)('Color')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
+                tabId: TAB_IDS.gradient,
+                children: (0, _i18n.__)('Gradient')
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
+              tabId: TAB_IDS.color,
+              className: "block-editor-color-gradient-control__panel",
+              focusable: false,
+              children: tabPanels.color
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
+              tabId: TAB_IDS.gradient,
+              className: "block-editor-color-gradient-control__panel",
+              focusable: false,
+              children: tabPanels.gradient
+            })]
+          })
+        }), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient)]
+      })
+    })
+  });
 }
 function ColorGradientControlSelect(props) {
   const [colors, gradients, customColors, customGradients] = (0, _useSettings.useSettings)('color.palette', 'color.gradients', 'color.custom', 'color.customGradient');
-  return (0, _react.createElement)(ColorGradientControlInner, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorGradientControlInner, {
     colors: colors,
     gradients: gradients,
     disableCustomColors: !customColors,
@@ -124,11 +138,11 @@ function ColorGradientControlSelect(props) {
 }
 function ColorGradientControl(props) {
   if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
-    return (0, _react.createElement)(ColorGradientControlInner, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorGradientControlInner, {
       ...props
     });
   }
-  return (0, _react.createElement)(ColorGradientControlSelect, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorGradientControlSelect, {
     ...props
   });
 }