@wordpress/components 27.5.0 → 28.0.0

package/build-module/color-picker/hue-picker.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -14,6 +13,8 @@ import React, { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default class HuePicker extends Component {
   constructor(props) {
     super(props);
@@ -145,7 +146,7 @@ export default class HuePicker extends Component {
       borderRadius = 0
     } = this.props;
     const borderWidth = sliderSize / 10;
-    return createElement(View, {
+    return /*#__PURE__*/_jsxs(View, {
       style: this.getContainerStyle(),
       ...this.panResponder.panHandlers,
       hitSlop: {
@@ -153,37 +154,39 @@ export default class HuePicker extends Component {
         bottom: 10,
         left: 0,
         right: 0
-      }
-    }, createElement(LinearGradient, {
-      colors: hueColors,
-      style: {
-        borderRadius
       },
-      start: {
-        x: 0,
-        y: 0
-      },
-      end: {
-        x: 1,
-        y: 0
-      }
-    }, createElement(View, {
-      style: {
-        width: barWidth,
-        height: barHeight
-      }
-    })), createElement(Animated.View, {
-      pointerEvents: "none",
-      style: [styles['hue-slider'], {
-        width: sliderSize,
-        height: sliderSize,
-        left: (sliderSize - borderWidth) / 2,
-        borderRadius: sliderSize / 2,
-        transform: [{
-          translateX: this.sliderX
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        colors: hueColors,
+        style: {
+          borderRadius
+        },
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 1,
+          y: 0
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: barWidth,
+            height: barHeight
+          }
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles['hue-slider'], {
+          width: sliderSize,
+          height: sliderSize,
+          left: (sliderSize - borderWidth) / 2,
+          borderRadius: sliderSize / 2,
+          transform: [{
+            translateX: this.sliderX
+          }]
         }]
-      }]
-    }));
+      })]
+    });
   }
 }
 //# sourceMappingURL=hue-picker.native.js.map

package/build-module/color-picker/hue-picker.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","View","PanResponder","LinearGradient","React","Component","styles","HuePicker","constructor","props","hueColors","sliderX","Value","barHeight","hue","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","dragStartValue","computeHueValuePress","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","componentDidUpdate","prevProps","barWidth","sliderSize","borderWidth","setValue","normalizeValue","value","getContainerStyle","containerStyle","paddingLeft","paddingTop","paddingBottom","paddingRight","computeHueValueDrag","dx","diff","updatedHue","event","locationX","eventName","firePressEvent","render","borderRadius","createElement","style","panHandlers","hitSlop","top","bottom","left","right","colors","start","x","y","end","width","height","pointerEvents","transform","translateX"],"sources":["@wordpress/components/src/color-picker/hue-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default class HuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.hueColors = [\n\t\t\t'#ff0000',\n\t\t\t'#ffff00',\n\t\t\t'#00ff00',\n\t\t\t'#00ffff',\n\t\t\t'#0000ff',\n\t\t\t'#ff00ff',\n\t\t\t'#ff0000',\n\t\t];\n\t\tthis.sliderX = new Animated.Value(\n\t\t\t( props.barHeight * props.hue ) / 360\n\t\t);\n\t\tthis.panResponder = PanResponder.create( {\n\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\t\t\tonPanResponderGrant: ( evt, gestureState ) => {\n\t\t\t\tconst { onPress } = this.props;\n\t\t\t\tthis.dragStartValue = this.computeHueValuePress( evt );\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\thue: this.computeHueValuePress( evt ),\n\t\t\t\t\t\tnativeEvent: evt.nativeEvent,\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tthis.fireDragEvent( 'onDragStart', gestureState );\n\t\t\t},\n\t\t\tonPanResponderMove: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragMove', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminationRequest: () => true,\n\t\t\tonPanResponderRelease: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragEnd', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminate: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragTerminate', gestureState );\n\t\t\t},\n\t\t\tonShouldBlockNativeResponder: () => true,\n\t\t} );\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\tif ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {\n\t\t\tthis.sliderX.setValue(\n\t\t\t\t( ( barWidth - sliderSize + borderWidth ) * hue ) / 360\n\t\t\t);\n\t\t}\n\t}\n\n\tnormalizeValue( value ) {\n\t\tif ( value < 0 ) {\n\t\t\treturn 0;\n\t\t}\n\t\tif ( value > 1 ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn value;\n\t}\n\n\tgetContainerStyle() {\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarHeight = 12,\n\t\t\tcontainerStyle = {},\n\t\t} = this.props;\n\t\tconst paddingLeft = sliderSize / 2;\n\t\tconst paddingTop =\n\t\t\tsliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;\n\t\treturn [\n\t\t\tstyles[ 'hsv-container' ],\n\t\t\tcontainerStyle,\n\t\t\t{\n\t\t\t\tpaddingTop,\n\t\t\t\tpaddingBottom: paddingTop,\n\t\t\t\tpaddingLeft,\n\t\t\t\tpaddingRight: paddingLeft,\n\t\t\t},\n\t\t];\n\t}\n\n\tcomputeHueValueDrag( gestureState ) {\n\t\tconst { dx } = gestureState;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst { dragStartValue } = this;\n\t\tconst diff = dx / barWidth;\n\t\tconst updatedHue =\n\t\t\tthis.normalizeValue( dragStartValue / 360 + diff ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tcomputeHueValuePress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX } = nativeEvent;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst updatedHue = this.normalizeValue( locationX / barWidth ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tfireDragEvent( eventName, gestureState ) {\n\t\tconst { [ eventName ]: event } = this.props;\n\t\tif ( event ) {\n\t\t\tevent( {\n\t\t\t\thue: this.computeHueValueDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfirePressEvent( event ) {\n\t\tconst { onPress } = this.props;\n\t\tif ( onPress ) {\n\t\t\tonPress( {\n\t\t\t\thue: this.computeHueValuePress( event ),\n\t\t\t\tnativeEvent: event.nativeEvent,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hueColors } = this;\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarWidth = 200,\n\t\t\tbarHeight = 12,\n\t\t\tborderRadius = 0,\n\t\t} = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ this.getContainerStyle() }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t\thitSlop={ {\n\t\t\t\t\ttop: 10,\n\t\t\t\t\tbottom: 10,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tcolors={ hueColors }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t} }\n\t\t\t\t\tstart={ { x: 0, y: 0 } }\n\t\t\t\t\tend={ { x: 1, y: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: barWidth,\n\t\t\t\t\t\t\theight: barHeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<Animated.View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'hue-slider' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: sliderSize,\n\t\t\t\t\t\t\theight: sliderSize,\n\t\t\t\t\t\t\tleft: ( sliderSize - borderWidth ) / 2,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttranslateX: this.sliderX,\n\t\t\t\t\t\t\t\t},\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</View>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Animated","View","PanResponder","LinearGradient","React","Component","styles","jsx","_jsx","jsxs","_jsxs","HuePicker","constructor","props","hueColors","sliderX","Value","barHeight","hue","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","dragStartValue","computeHueValuePress","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","componentDidUpdate","prevProps","barWidth","sliderSize","borderWidth","setValue","normalizeValue","value","getContainerStyle","containerStyle","paddingLeft","paddingTop","paddingBottom","paddingRight","computeHueValueDrag","dx","diff","updatedHue","event","locationX","eventName","firePressEvent","render","borderRadius","style","panHandlers","hitSlop","top","bottom","left","right","children","colors","start","x","y","end","width","height","pointerEvents","transform","translateX"],"sources":["@wordpress/components/src/color-picker/hue-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default class HuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.hueColors = [\n\t\t\t'#ff0000',\n\t\t\t'#ffff00',\n\t\t\t'#00ff00',\n\t\t\t'#00ffff',\n\t\t\t'#0000ff',\n\t\t\t'#ff00ff',\n\t\t\t'#ff0000',\n\t\t];\n\t\tthis.sliderX = new Animated.Value(\n\t\t\t( props.barHeight * props.hue ) / 360\n\t\t);\n\t\tthis.panResponder = PanResponder.create( {\n\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\t\t\tonPanResponderGrant: ( evt, gestureState ) => {\n\t\t\t\tconst { onPress } = this.props;\n\t\t\t\tthis.dragStartValue = this.computeHueValuePress( evt );\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\thue: this.computeHueValuePress( evt ),\n\t\t\t\t\t\tnativeEvent: evt.nativeEvent,\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tthis.fireDragEvent( 'onDragStart', gestureState );\n\t\t\t},\n\t\t\tonPanResponderMove: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragMove', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminationRequest: () => true,\n\t\t\tonPanResponderRelease: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragEnd', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminate: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragTerminate', gestureState );\n\t\t\t},\n\t\t\tonShouldBlockNativeResponder: () => true,\n\t\t} );\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\tif ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {\n\t\t\tthis.sliderX.setValue(\n\t\t\t\t( ( barWidth - sliderSize + borderWidth ) * hue ) / 360\n\t\t\t);\n\t\t}\n\t}\n\n\tnormalizeValue( value ) {\n\t\tif ( value < 0 ) {\n\t\t\treturn 0;\n\t\t}\n\t\tif ( value > 1 ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn value;\n\t}\n\n\tgetContainerStyle() {\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarHeight = 12,\n\t\t\tcontainerStyle = {},\n\t\t} = this.props;\n\t\tconst paddingLeft = sliderSize / 2;\n\t\tconst paddingTop =\n\t\t\tsliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;\n\t\treturn [\n\t\t\tstyles[ 'hsv-container' ],\n\t\t\tcontainerStyle,\n\t\t\t{\n\t\t\t\tpaddingTop,\n\t\t\t\tpaddingBottom: paddingTop,\n\t\t\t\tpaddingLeft,\n\t\t\t\tpaddingRight: paddingLeft,\n\t\t\t},\n\t\t];\n\t}\n\n\tcomputeHueValueDrag( gestureState ) {\n\t\tconst { dx } = gestureState;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst { dragStartValue } = this;\n\t\tconst diff = dx / barWidth;\n\t\tconst updatedHue =\n\t\t\tthis.normalizeValue( dragStartValue / 360 + diff ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tcomputeHueValuePress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX } = nativeEvent;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst updatedHue = this.normalizeValue( locationX / barWidth ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tfireDragEvent( eventName, gestureState ) {\n\t\tconst { [ eventName ]: event } = this.props;\n\t\tif ( event ) {\n\t\t\tevent( {\n\t\t\t\thue: this.computeHueValueDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfirePressEvent( event ) {\n\t\tconst { onPress } = this.props;\n\t\tif ( onPress ) {\n\t\t\tonPress( {\n\t\t\t\thue: this.computeHueValuePress( event ),\n\t\t\t\tnativeEvent: event.nativeEvent,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hueColors } = this;\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarWidth = 200,\n\t\t\tbarHeight = 12,\n\t\t\tborderRadius = 0,\n\t\t} = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ this.getContainerStyle() }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t\thitSlop={ {\n\t\t\t\t\ttop: 10,\n\t\t\t\t\tbottom: 10,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tcolors={ hueColors }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t} }\n\t\t\t\t\tstart={ { x: 0, y: 0 } }\n\t\t\t\t\tend={ { x: 1, y: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: barWidth,\n\t\t\t\t\t\t\theight: barHeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<Animated.View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'hue-slider' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: sliderSize,\n\t\t\t\t\t\t\theight: sliderSize,\n\t\t\t\t\t\t\tleft: ( sliderSize - borderWidth ) / 2,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttranslateX: this.sliderX,\n\t\t\t\t\t\t\t\t},\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</View>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/color-picker/index.native.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -10,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon, check, close } from '@wordpress/icons';
 /**
@@ -18,6 +16,10 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 import HsvColorPicker from './hsv-color-picker.native.js';
+import BottomSheet from '../mobile/bottom-sheet';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 extend([namesPlugin]);
 function ColorPicker({
   shouldEnableBottomSheetScroll,
@@ -116,57 +118,70 @@ function ColorPicker({
       onBottomSheetClosed();
     }
   }
-  return createElement(Fragment, null, createElement(HsvColorPicker, {
-    huePickerHue: hue,
-    currentColor: currentColor,
-    onHuePickerDragMove: updateColor,
-    onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
-    satValPickerHue: hue,
-    satValPickerSaturation: sat,
-    satValPickerValue: val,
-    onSatValPickerDragMove: updateColor,
-    onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
-    onSatValPickerDragStart: () => {
-      shouldEnableBottomSheetScroll(false);
-    },
-    onSatValPickerDragEnd: () => shouldEnableBottomSheetScroll(true),
-    onHuePickerDragStart: () => shouldEnableBottomSheetScroll(false),
-    onHuePickerDragEnd: () => shouldEnableBottomSheetScroll(true),
-    huePickerBarWidth: pickerWidth,
-    huePickerBarHeight: pickerPointerSize / 2,
-    satValPickerSize: {
-      width: pickerWidth,
-      height: pickerHeight
-    },
-    satValPickerSliderSize: pickerPointerSize * 2,
-    satValPickerBorderRadius: borderRadius,
-    huePickerBorderRadius: borderRadius
-  }), createElement(View, {
-    style: footerStyle
-  }, createElement(TouchableWithoutFeedback, {
-    onPress: () => onButtonPress('cancel'),
-    hitSlop: hitSlop
-  }, createElement(View, null, isIOS ? createElement(Text, {
-    style: cancelButtonStyle
-  }, __('Cancel')) : createElement(Icon, {
-    icon: close,
-    size: 24,
-    style: cancelButtonStyle
-  }))), bottomLabelText ? createElement(Text, {
-    style: selectColorTextStyle
-  }, bottomLabelText) : createElement(Text, {
-    style: colorTextStyle,
-    selectable: true
-  }, currentColor.toUpperCase()), createElement(TouchableWithoutFeedback, {
-    onPress: () => onButtonPress('apply'),
-    hitSlop: hitSlop
-  }, createElement(View, null, isIOS ? createElement(Text, {
-    style: applyButtonStyle
-  }, __('Apply')) : createElement(Icon, {
-    icon: check,
-    size: 24,
-    style: applyButtonStyle
-  })))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(HsvColorPicker, {
+      huePickerHue: hue,
+      currentColor: currentColor,
+      onHuePickerDragMove: updateColor,
+      onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
+      satValPickerHue: hue,
+      satValPickerSaturation: sat,
+      satValPickerValue: val,
+      onSatValPickerDragMove: updateColor,
+      onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
+      onSatValPickerDragStart: () => {
+        shouldEnableBottomSheetScroll(false);
+      },
+      onSatValPickerDragEnd: () => shouldEnableBottomSheetScroll(true),
+      onHuePickerDragStart: () => shouldEnableBottomSheetScroll(false),
+      onHuePickerDragEnd: () => shouldEnableBottomSheetScroll(true),
+      huePickerBarWidth: pickerWidth,
+      huePickerBarHeight: pickerPointerSize / 2,
+      satValPickerSize: {
+        width: pickerWidth,
+        height: pickerHeight
+      },
+      satValPickerSliderSize: pickerPointerSize * 2,
+      satValPickerBorderRadius: borderRadius,
+      huePickerBorderRadius: borderRadius
+    }), /*#__PURE__*/_jsxs(View, {
+      style: footerStyle,
+      children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: () => onButtonPress('cancel'),
+        hitSlop: hitSlop,
+        children: /*#__PURE__*/_jsx(View, {
+          children: isIOS ? /*#__PURE__*/_jsx(Text, {
+            style: cancelButtonStyle,
+            children: __('Cancel')
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: close,
+            size: 24,
+            style: cancelButtonStyle
+          })
+        })
+      }), bottomLabelText ? /*#__PURE__*/_jsx(Text, {
+        style: selectColorTextStyle,
+        children: bottomLabelText
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: colorTextStyle,
+        selectable: true,
+        children: currentColor.toUpperCase()
+      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: () => onButtonPress('apply'),
+        hitSlop: hitSlop,
+        children: /*#__PURE__*/_jsx(View, {
+          children: isIOS ? /*#__PURE__*/_jsx(Text, {
+            style: applyButtonStyle,
+            children: __('Apply')
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: check,
+            size: 24,
+            style: applyButtonStyle
+          })
+        })
+      })]
+    })]
+  });
 }
 export { ColorPicker };
 //# sourceMappingURL=index.native.js.map

package/build-module/color-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Text","TouchableWithoutFeedback","Platform","colord","extend","namesPlugin","useState","useEffect","__","BottomSheet","usePreferredColorSchemeStyle","Icon","check","close","styles","HsvColorPicker","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","picker","pickerPointerSize","pickerPointer","pickerWidth","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","onButtonPress","action","createElement","Fragment","huePickerHue","onHuePickerDragMove","onHuePickerPress","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragMove","onSatValPickerPress","onSatValPickerDragStart","onSatValPickerDragEnd","onHuePickerDragStart","onHuePickerDragEnd","huePickerBarWidth","huePickerBarHeight","satValPickerSize","width","satValPickerSliderSize","satValPickerBorderRadius","huePickerBorderRadius","style","onPress","icon","size","selectable","toUpperCase"],"sources":["@wordpress/components/src/color-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport HsvColorPicker from './hsv-color-picker.native.js';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) {\n\t\t\tsetHue( h );\n\t\t}\n\t\tif ( s !== undefined ) {\n\t\t\tsetSaturation( s );\n\t\t}\n\t\tif ( v !== undefined ) {\n\t\t\tsetValue( v );\n\t\t}\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["View","Text","TouchableWithoutFeedback","Platform","colord","extend","namesPlugin","useState","useEffect","__","usePreferredColorSchemeStyle","Icon","check","close","styles","HsvColorPicker","BottomSheet","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","picker","pickerPointerSize","pickerPointer","pickerWidth","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","onButtonPress","action","children","huePickerHue","onHuePickerDragMove","onHuePickerPress","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragMove","onSatValPickerPress","onSatValPickerDragStart","onSatValPickerDragEnd","onHuePickerDragStart","onHuePickerDragEnd","huePickerBarWidth","huePickerBarHeight","satValPickerSize","width","satValPickerSliderSize","satValPickerBorderRadius","huePickerBorderRadius","style","onPress","icon","size","selectable","toUpperCase"],"sources":["@wordpress/components/src/color-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport HsvColorPicker from './hsv-color-picker.native.js';\nimport BottomSheet from '../mobile/bottom-sheet';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) {\n\t\t\tsetHue( h );\n\t\t}\n\t\tif ( s !== undefined ) {\n\t\t\tsetSaturation( s );\n\t\t}\n\t\tif ( v !== undefined ) {\n\t\t\tsetValue( v );\n\t\t}\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,IAAI,EAAEC,wBAAwB,EAAEC,QAAQ,QAAQ,cAAc;AAC7E,SAASC,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;AAC9C;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE,SAASC,IAAI,EAAEC,KAAK,EAAEC,KAAK,QAAQ,kBAAkB;AACrD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,cAAc,MAAM,8BAA8B;AACzD,OAAOC,WAAW,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEjDjB,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;AAEzB,SAASiB,WAAWA,CAAE;EACrBC,6BAA6B;EAC7BC,gCAAgC;EAChCC,6BAA6B;EAC7BC,QAAQ;EACRC,WAAW;EACXC,eAAe;EACfC,gBAAgB;EAChBC,0BAA0B;EAC1BC,mBAAmB;EACnBC,2BAA2B;EAC3BC;AACD,CAAC,EAAG;EACH,MAAMC,KAAK,GAAGhC,QAAQ,CAACiC,EAAE,KAAK,KAAK;EACnC,MAAMC,OAAO,GAAG;IAAEC,GAAG,EAAE,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAG,CAAC;EAC5D,MAAM;IACLC,CAAC,EAAEC,KAAK;IACRC,CAAC,EAAEC,KAAK;IACRC,CAAC,EAAEC;EACJ,CAAC,GAAG,CAAElB,eAAe,IAAID,WAAW,GACjCxB,MAAM,CAAEwB,WAAY,CAAC,CAACoB,KAAK,CAAC,CAAC,GAC7B;IAAEN,CAAC,EAAE,CAAC;IAAEE,CAAC,EAAE,EAAE;IAAEE,CAAC,EAAE;EAAG,CAAC;EACzB,MAAM,CAAEG,GAAG,EAAEC,MAAM,CAAE,GAAG3C,QAAQ,CAAEoC,KAAM,CAAC;EACzC,MAAM,CAAEQ,GAAG,EAAEC,aAAa,CAAE,GAAG7C,QAAQ,CAAEsC,KAAK,GAAG,GAAI,CAAC;EACtD,MAAM,CAAEQ,GAAG,EAAEC,QAAQ,CAAE,GAAG/C,QAAQ,CAAEwC,KAAK,GAAG,GAAI,CAAC;EACjD,MAAM,CAAEQ,UAAU,CAAE,GAAGhD,QAAQ,CAAEqB,WAAY,CAAC;EAE9C,MAAM;IACL4B,WAAW,EAAEC,OAAO;IACpBC,MAAM,EAAEC,YAAY;IACpBC;EACD,CAAC,GAAG9C,MAAM,CAAC+C,MAAM;EACjB,MAAM;IAAEH,MAAM,EAAEI;EAAkB,CAAC,GAAGhD,MAAM,CAACiD,aAAa;EAC1D,MAAMC,WAAW,GAAGhD,WAAW,CAACiD,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAGR,OAAO;EAExD,MAAMS,gBAAgB,GAAGxD,4BAA4B,CACpDI,MAAM,CAACqD,WAAW,EAClBrD,MAAM,CAACsD,eACR,CAAC;EACD,MAAMC,iBAAiB,GAAG3D,4BAA4B,CACrDI,MAAM,CAACwD,YAAY,EACnBxD,MAAM,CAACyD,gBACR,CAAC;EACD,MAAMC,cAAc,GAAG9D,4BAA4B,CAClDI,MAAM,CAAC2D,SAAS,EAChB3D,MAAM,CAAC4D,aACR,CAAC;EACD,MAAMC,oBAAoB,GAAGjE,4BAA4B,CACxDI,MAAM,CAAC8D,eAAe,EACtB9D,MAAM,CAAC+D,mBACR,CAAC;EACD,MAAMC,WAAW,GAAGpE,4BAA4B,CAC/CI,MAAM,CAACiE,MAAM,EACbjE,MAAM,CAACkE,UACR,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAEvC,CAAC,GAAGO,GAAG,EAAEL,CAAC,GAAGO,GAAG,EAAEL,CAAC,GAAGO,GAAG,KAC/CjD,MAAM,CAAE;IAAEsC,CAAC;IAAEE,CAAC,EAAEA,CAAC,GAAG,GAAG;IAAEE,CAAC,EAAEA,CAAC,GAAG;EAAI,CAAE,CAAC,CAACoC,KAAK,CAAC,CAAC;EAEhD,MAAMC,YAAY,GAAGF,YAAY,CAAC,CAAC;EAEnC,MAAMG,WAAW,GAAGA,CAAE;IAAEnC,GAAG,EAAEP,CAAC;IAAE2C,UAAU,EAAEzC,CAAC;IAAE0C,KAAK,EAAExC;EAAE,CAAC,KAAM;IAC9D,IAAKJ,CAAC,KAAK6C,SAAS,EAAG;MACtBrC,MAAM,CAAER,CAAE,CAAC;IACZ;IACA,IAAKE,CAAC,KAAK2C,SAAS,EAAG;MACtBnC,aAAa,CAAER,CAAE,CAAC;IACnB;IACA,IAAKE,CAAC,KAAKyC,SAAS,EAAG;MACtBjC,QAAQ,CAAER,CAAE,CAAC;IACd;IACAnB,QAAQ,CAAEsD,YAAY,CAAEvC,CAAC,EAAEE,CAAC,EAAEE,CAAE,CAAE,CAAC;EACpC,CAAC;EAEDtC,SAAS,CAAE,MAAM;IAChBiB,gCAAgC,CAAE,KAAM,CAAC;IACzCM,0BAA0B,CAAE,MAAM;MACjC,IAAKwB,UAAU,EAAG;QACjB5B,QAAQ,CAAE4B,UAAW,CAAC;MACvB;MACA,IAAKvB,mBAAmB,EAAG;QAC1BA,mBAAmB,CAAC,CAAC;MACtB;IACD,CAAE,CAAC;IACH,IAAKC,2BAA2B,EAAG;MAClCA,2BAA2B,CAAEuD,aAAc,CAAC;IAC7C;IACA;IACA;IACA;IACA;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,SAASA,aAAaA,CAAEC,MAAM,EAAG;IAChC3D,gBAAgB,CAAC,CAAC;IAClBC,0BAA0B,CAAE,IAAK,CAAC;IAClCN,gCAAgC,CAAE,IAAK,CAAC;IACxCE,QAAQ,CAAE8D,MAAM,KAAK,OAAO,GAAGN,YAAY,GAAG5B,UAAW,CAAC;IAC1D,IAAKvB,mBAAmB,EAAG;MAC1BA,mBAAmB,CAAC,CAAC;IACtB;EACD;EAEA,oBACCZ,KAAA,CAAAE,SAAA;IAAAoE,QAAA,gBACCxE,IAAA,CAACH,cAAc;MACd4E,YAAY,EAAG1C,GAAK;MACpBkC,YAAY,EAAGA,YAAc;MAC7BS,mBAAmB,EAAGR,WAAa;MACnCS,gBAAgB,EACf,CAAEnE,6BAA6B,IAAI0D,WACnC;MACDU,eAAe,EAAG7C,GAAK;MACvB8C,sBAAsB,EAAG5C,GAAK;MAC9B6C,iBAAiB,EAAG3C,GAAK;MACzB4C,sBAAsB,EAAGb,WAAa;MACtCc,mBAAmB,EAClB,CAAExE,6BAA6B,IAAI0D,WACnC;MACDe,uBAAuB,EAAGA,CAAA,KAAM;QAC/B3E,6BAA6B,CAAE,KAAM,CAAC;MACvC,CAAG;MACH4E,qBAAqB,EAAGA,CAAA,KACvB5E,6BAA6B,CAAE,IAAK,CACpC;MACD6E,oBAAoB,EAAGA,CAAA,KACtB7E,6BAA6B,CAAE,KAAM,CACrC;MACD8E,kBAAkB,EAAGA,CAAA,KACpB9E,6BAA6B,CAAE,IAAK,CACpC;MACD+E,iBAAiB,EAAGvC,WAAa;MACjCwC,kBAAkB,EAAG1C,iBAAiB,GAAG,CAAG;MAC5C2C,gBAAgB,EAAG;QAClBC,KAAK,EAAE1C,WAAW;QAClBN,MAAM,EAAEC;MACT,CAAG;MACHgD,sBAAsB,EAAG7C,iBAAiB,GAAG,CAAG;MAChD8C,wBAAwB,EAAGhD,YAAc;MACzCiD,qBAAqB,EAAGjD;IAAc,CACtC,CAAC,eACFxC,KAAA,CAACpB,IAAI;MAAC8G,KAAK,EAAGhC,WAAa;MAAAY,QAAA,gBAC1BxE,IAAA,CAAChB,wBAAwB;QACxB6G,OAAO,EAAGA,CAAA,KAAMvB,aAAa,CAAE,QAAS,CAAG;QAC3CnD,OAAO,EAAGA,OAAS;QAAAqD,QAAA,eAEnBxE,IAAA,CAAClB,IAAI;UAAA0F,QAAA,EACFvD,KAAK,gBACNjB,IAAA,CAACjB,IAAI;YAAC6G,KAAK,EAAGzC,iBAAmB;YAAAqB,QAAA,EAC9BjF,EAAE,CAAE,QAAS;UAAC,CACX,CAAC,gBAEPS,IAAA,CAACP,IAAI;YACJqG,IAAI,EAAGnG,KAAO;YACdoG,IAAI,EAAG,EAAI;YACXH,KAAK,EAAGzC;UAAmB,CAC3B;QACD,CACI;MAAC,CACkB,CAAC,EACzBnC,eAAe,gBAChBhB,IAAA,CAACjB,IAAI;QAAC6G,KAAK,EAAGnC,oBAAsB;QAAAe,QAAA,EACjCxD;MAAe,CACZ,CAAC,gBAEPhB,IAAA,CAACjB,IAAI;QAAC6G,KAAK,EAAGtC,cAAgB;QAAC0C,UAAU;QAAAxB,QAAA,EACtCP,YAAY,CAACgC,WAAW,CAAC;MAAC,CACvB,CACN,eACDjG,IAAA,CAAChB,wBAAwB;QACxB6G,OAAO,EAAGA,CAAA,KAAMvB,aAAa,CAAE,OAAQ,CAAG;QAC1CnD,OAAO,EAAGA,OAAS;QAAAqD,QAAA,eAEnBxE,IAAA,CAAClB,IAAI;UAAA0F,QAAA,EACFvD,KAAK,gBACNjB,IAAA,CAACjB,IAAI;YAAC6G,KAAK,EAAG5C,gBAAkB;YAAAwB,QAAA,EAC7BjF,EAAE,CAAE,OAAQ;UAAC,CACV,CAAC,gBAEPS,IAAA,CAACP,IAAI;YACJqG,IAAI,EAAGpG,KAAO;YACdqG,IAAI,EAAG,EAAI;YACXH,KAAK,EAAG5C;UAAkB,CAC1B;QACD,CACI;MAAC,CACkB,CAAC;IAAA,CACtB,CAAC;EAAA,CACN,CAAC;AAEL;AAEA,SAAS3C,WAAW","ignoreList":[]}

package/build-module/color-picker/input-with-slider.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
@@ -8,6 +7,8 @@ import { Spacer } from '../spacer';
 import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const InputWithSlider = ({
   min,
   max,
@@ -27,35 +28,37 @@ export const InputWithSlider = ({
     }
     onChange(newValue);
   };
-  return createElement(HStack, {
-    spacing: 4
-  }, createElement(NumberControlWrapper, {
-    min: min,
-    max: max,
-    label: label,
-    hideLabelFromVision: true,
-    value: value,
-    onChange: onNumberControlChange,
-    prefix: createElement(Spacer, {
-      as: Text,
-      paddingLeft: space(4),
-      color: COLORS.theme.accent,
-      lineHeight: 1
-    }, abbreviation),
-    spinControls: "none",
-    size: "__unstable-large"
-  }), createElement(RangeControl, {
-    __nextHasNoMarginBottom: true,
-    label: label,
-    hideLabelFromVision: true,
-    min: min,
-    max: max,
-    value: value
-    // @ts-expect-error
-    // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
-    ,
-    onChange: onChange,
-    withInputField: false
-  }));
+  return /*#__PURE__*/_jsxs(HStack, {
+    spacing: 4,
+    children: [/*#__PURE__*/_jsx(NumberControlWrapper, {
+      min: min,
+      max: max,
+      label: label,
+      hideLabelFromVision: true,
+      value: value,
+      onChange: onNumberControlChange,
+      prefix: /*#__PURE__*/_jsx(Spacer, {
+        as: Text,
+        paddingLeft: space(4),
+        color: COLORS.theme.accent,
+        lineHeight: 1,
+        children: abbreviation
+      }),
+      spinControls: "none",
+      size: "__unstable-large"
+    }), /*#__PURE__*/_jsx(RangeControl, {
+      __nextHasNoMarginBottom: true,
+      label: label,
+      hideLabelFromVision: true,
+      min: min,
+      max: max,
+      value: value
+      // @ts-expect-error
+      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
+      ,
+      onChange: onChange,
+      withInputField: false
+    })]
+  });
 };
 //# sourceMappingURL=input-with-slider.js.map

package/build-module/color-picker/input-with-slider.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","COLORS","InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","createElement","spacing","hideLabelFromVision","prefix","as","paddingLeft","color","theme","accent","lineHeight","spinControls","size","__nextHasNoMarginBottom","withInputField"],"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { InputWithSliderProps } from './types';\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,YAAY,EAAEC,oBAAoB,QAAQ,UAAU;AAC7D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,eAAe,GAAGA,CAAE;EAChCC,GAAG;EACHC,GAAG;EACHC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACqB,CAAC,KAAM;EAC5B,MAAMC,qBAAqB,GAAKC,QAA0B,IAAM;IAC/D,IAAK,CAAEA,QAAQ,EAAG;MACjBH,QAAQ,CAAE,CAAE,CAAC;MACb;IACD;IACA,IAAK,OAAOG,QAAQ,KAAK,QAAQ,EAAG;MACnCH,QAAQ,CAAEI,QAAQ,CAAED,QAAQ,EAAE,EAAG,CAAE,CAAC;MACpC;IACD;IACAH,QAAQ,CAAEG,QAAS,CAAC;EACrB,CAAC;EAED,OACCE,aAAA,CAACjB,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACZ,oBAAoB;IACpBG,GAAG,EAAGA,GAAK;IACXC,GAAG,EAAGA,GAAK;IACXC,KAAK,EAAGA,KAAO;IACfS,mBAAmB;IACnBN,KAAK,EAAGA,KAAO;IACfD,QAAQ,EAAGE,qBAAuB;IAClCM,MAAM,EACLH,aAAA,CAACf,MAAM;MACNmB,EAAE,EAAGpB,IAAM;MACXqB,WAAW,EAAGnB,KAAK,CAAE,CAAE,CAAG;MAC1BoB,KAAK,EAAGjB,MAAM,CAACkB,KAAK,CAACC,MAAQ;MAC7BC,UAAU,EAAG;IAAG,GAEdf,YACK,CACR;IACDgB,YAAY,EAAC,MAAM;IACnBC,IAAI,EAAC;EAAkB,CACvB,CAAC,EACFX,aAAA,CAACb,YAAY;IACZyB,uBAAuB;IACvBnB,KAAK,EAAGA,KAAO;IACfS,mBAAmB;IACnBX,GAAG,EAAGA,GAAK;IACXC,GAAG,EAAGA,GAAK;IACXI,KAAK,EAAGA;IACR;IACA;IAAA;IACAD,QAAQ,EAAGA,QAAU;IACrBkB,cAAc,EAAG;EAAO,CACxB,CACM,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","COLORS","jsx","_jsx","jsxs","_jsxs","InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","spacing","children","hideLabelFromVision","prefix","as","paddingLeft","color","theme","accent","lineHeight","spinControls","size","__nextHasNoMarginBottom","withInputField"],"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { InputWithSliderProps } from './types';\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,YAAY,EAAEC,oBAAoB,QAAQ,UAAU;AAC7D,SAASC,MAAM,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGhD,OAAO,MAAMC,eAAe,GAAGA,CAAE;EAChCC,GAAG;EACHC,GAAG;EACHC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACqB,CAAC,KAAM;EAC5B,MAAMC,qBAAqB,GAAKC,QAA0B,IAAM;IAC/D,IAAK,CAAEA,QAAQ,EAAG;MACjBH,QAAQ,CAAE,CAAE,CAAC;MACb;IACD;IACA,IAAK,OAAOG,QAAQ,KAAK,QAAQ,EAAG;MACnCH,QAAQ,CAAEI,QAAQ,CAAED,QAAQ,EAAE,EAAG,CAAE,CAAC;MACpC;IACD;IACAH,QAAQ,CAAEG,QAAS,CAAC;EACrB,CAAC;EAED,oBACCT,KAAA,CAACV,MAAM;IAACqB,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpBd,IAAA,CAACH,oBAAoB;MACpBO,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXC,KAAK,EAAGA,KAAO;MACfS,mBAAmB;MACnBN,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGE,qBAAuB;MAClCM,MAAM,eACLhB,IAAA,CAACN,MAAM;QACNuB,EAAE,EAAGxB,IAAM;QACXyB,WAAW,EAAGvB,KAAK,CAAE,CAAE,CAAG;QAC1BwB,KAAK,EAAGrB,MAAM,CAACsB,KAAK,CAACC,MAAQ;QAC7BC,UAAU,EAAG,CAAG;QAAAR,QAAA,EAEdP;MAAY,CACP,CACR;MACDgB,YAAY,EAAC,MAAM;MACnBC,IAAI,EAAC;IAAkB,CACvB,CAAC,eACFxB,IAAA,CAACJ,YAAY;MACZ6B,uBAAuB;MACvBnB,KAAK,EAAGA,KAAO;MACfS,mBAAmB;MACnBX,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXI,KAAK,EAAGA;MACR;MACA;MAAA;MACAD,QAAQ,EAAGA,QAAU;MACrBkB,cAAc,EAAG;IAAO,CACxB,CAAC;EAAA,CACK,CAAC;AAEX,CAAC","ignoreList":[]}

package/build-module/color-picker/legacy-adapter.js

@@ -1,11 +1,11 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
 import ColorPicker from './component';
 import { useDeprecatedProps } from './use-deprecated-props';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const LegacyAdapter = props => {
-  return createElement(ColorPicker, {
+  return /*#__PURE__*/_jsx(ColorPicker, {
     ...useDeprecatedProps(props)
   });
 };

package/build-module/color-picker/legacy-adapter.js.map

@@ -1 +1 @@
-{"version":3,"names":["ColorPicker","useDeprecatedProps","LegacyAdapter","props","createElement"],"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,WAAW,MAAM,aAAa;AAErC,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,OAAO,MAAMC,aAAa,GAAKC,KAAyB,IAAM;EAC7D,OAAOC,aAAA,CAACJ,WAAW;IAAA,GAAMC,kBAAkB,CAAEE,KAAM;EAAC,CAAI,CAAC;AAC1D,CAAC","ignoreList":[]}
+{"version":3,"names":["ColorPicker","useDeprecatedProps","jsx","_jsx","LegacyAdapter","props"],"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,WAAW,MAAM,aAAa;AAErC,SAASC,kBAAkB,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5D,OAAO,MAAMC,aAAa,GAAKC,KAAyB,IAAM;EAC7D,oBAAOF,IAAA,CAACH,WAAW;IAAA,GAAMC,kBAAkB,CAAEI,KAAM;EAAC,CAAI,CAAC;AAC1D,CAAC","ignoreList":[]}

package/build-module/color-picker/picker.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -12,7 +11,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export const Picker = ({
   color,
   enableAlpha,
@@ -20,7 +19,7 @@ export const Picker = ({
 }) => {
   const Component = enableAlpha ? RgbaStringColorPicker : RgbStringColorPicker;
   const rgbColor = useMemo(() => color.toRgbString(), [color]);
-  return createElement(Component, {
+  return /*#__PURE__*/_jsx(Component, {
     color: rgbColor,
     onChange: nextColor => {
       onChange(colord(nextColor));

package/build-module/color-picker/picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["RgbStringColorPicker","RgbaStringColorPicker","colord","useMemo","Picker","color","enableAlpha","onChange","Component","rgbColor","toRgbString","createElement","nextColor","onPointerDown","currentTarget","pointerId","setPointerCapture","onPointerUp","releasePointerCapture"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t\t// Pointer capture fortifies drag gestures so that they continue to\n\t\t\t// work while dragging outside the component over objects like\n\t\t\t// iframes. If a newer version of react-colorful begins to employ\n\t\t\t// pointer capture this will be redundant and should be removed.\n\t\t\tonPointerDown={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.setPointerCapture( pointerId );\n\t\t\t} }\n\t\t\tonPointerUp={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.releasePointerCapture( pointerId );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,oBAAoB,EAAEC,qBAAqB,QAAQ,gBAAgB;AAC5E,SAASC,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAC5C;AACA;AACA;;AAGA,OAAO,MAAMC,MAAM,GAAGA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAsB,CAAC,KAAM;EAC1E,MAAMC,SAAS,GAAGF,WAAW,GAC1BL,qBAAqB,GACrBD,oBAAoB;EACvB,MAAMS,QAAQ,GAAGN,OAAO,CAAE,MAAME,KAAK,CAACK,WAAW,CAAC,CAAC,EAAE,CAAEL,KAAK,CAAG,CAAC;EAEhE,OACCM,aAAA,CAACH,SAAS;IACTH,KAAK,EAAGI,QAAU;IAClBF,QAAQ,EAAKK,SAAS,IAAM;MAC3BL,QAAQ,CAAEL,MAAM,CAAEU,SAAU,CAAE,CAAC;IAChC;IACA;IACA;IACA;IACA;IAAA;IACAC,aAAa,EAAGA,CAAE;MAAEC,aAAa;MAAEC;IAAU,CAAC,KAAM;MACnDD,aAAa,CAACE,iBAAiB,CAAED,SAAU,CAAC;IAC7C,CAAG;IACHE,WAAW,EAAGA,CAAE;MAAEH,aAAa;MAAEC;IAAU,CAAC,KAAM;MACjDD,aAAa,CAACI,qBAAqB,CAAEH,SAAU,CAAC;IACjD;EAAG,CACH,CAAC;AAEJ,CAAC","ignoreList":[]}
+{"version":3,"names":["RgbStringColorPicker","RgbaStringColorPicker","colord","useMemo","jsx","_jsx","Picker","color","enableAlpha","onChange","Component","rgbColor","toRgbString","nextColor","onPointerDown","currentTarget","pointerId","setPointerCapture","onPointerUp","releasePointerCapture"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t\t// Pointer capture fortifies drag gestures so that they continue to\n\t\t\t// work while dragging outside the component over objects like\n\t\t\t// iframes. If a newer version of react-colorful begins to employ\n\t\t\t// pointer capture this will be redundant and should be removed.\n\t\t\tonPointerDown={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.setPointerCapture( pointerId );\n\t\t\t} }\n\t\t\tonPointerUp={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.releasePointerCapture( pointerId );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,EAAEC,qBAAqB,QAAQ,gBAAgB;AAC5E,SAASC,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAC5C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,OAAO,MAAMC,MAAM,GAAGA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAsB,CAAC,KAAM;EAC1E,MAAMC,SAAS,GAAGF,WAAW,GAC1BP,qBAAqB,GACrBD,oBAAoB;EACvB,MAAMW,QAAQ,GAAGR,OAAO,CAAE,MAAMI,KAAK,CAACK,WAAW,CAAC,CAAC,EAAE,CAAEL,KAAK,CAAG,CAAC;EAEhE,oBACCF,IAAA,CAACK,SAAS;IACTH,KAAK,EAAGI,QAAU;IAClBF,QAAQ,EAAKI,SAAS,IAAM;MAC3BJ,QAAQ,CAAEP,MAAM,CAAEW,SAAU,CAAE,CAAC;IAChC;IACA;IACA;IACA;IACA;IAAA;IACAC,aAAa,EAAGA,CAAE;MAAEC,aAAa;MAAEC;IAAU,CAAC,KAAM;MACnDD,aAAa,CAACE,iBAAiB,CAAED,SAAU,CAAC;IAC7C,CAAG;IACHE,WAAW,EAAGA,CAAE;MAAEH,aAAa;MAAEC;IAAU,CAAC,KAAM;MACjDD,aAAa,CAACI,qBAAqB,CAAEH,SAAU,CAAC;IACjD;EAAG,CACH,CAAC;AAEJ,CAAC","ignoreList":[]}