@wordpress/components 25.5.0 → 25.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","__","sprintf","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","Set","colors","map","color","mergedColors","allColors","defaultGradientColors","gradients","gradient","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","getColorGradientName","value","fallbackName","foundColorName","find","name","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","scaleValue","colorName","selected","transform","colorIndicator","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.colors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst mergedColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst defaultGradientColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.gradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction getColorGradientName( value ) {\n\t\tconst fallbackName = sprintf(\n\t\t\t/* translators: %s: the hex color value */\n\t\t\t__( 'Unlabeled color. %s' ),\n\t\t\tvalue\n\t\t);\n\t\tconst foundColorName = isGradientSegment\n\t\t\t? defaultSettings.gradients?.find(\n\t\t\t\t\t( gradient ) => gradient.gradient === value\n\t\t\t  )\n\t\t\t: defaultSettings.allColors?.find(\n\t\t\t\t\t( color ) => color.color === value\n\t\t\t  );\n\t\treturn foundColorName ? foundColorName?.name : fallbackName;\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\tconst colorName = getColorGradientName( color );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\taccessibilityLabel={ colorName }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\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>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}
+{"version":3,"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","__","sprintf","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","_defaultSettings$colo","_defaultSettings$allC","_defaultSettings$grad","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","Set","colors","map","color","mergedColors","allColors","defaultGradientColors","gradients","gradient","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","getColorGradientName","value","fallbackName","foundColorName","find","name","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","createElement","Fragment","accessibilityRole","style","headerText","contentContainerStyle","contentContainer","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","disableScrollViewPanResponder","scrollEventThrottle","onScrollBeginDrag","onScrollEndDrag","ref","testID","scaleValue","colorName","key","onPress","accessibilityState","selected","accessibilityLabel","transform","colorIndicator","onLayout","withCustomPicker","toUpperCase"],"sources":["@wordpress/components/src/color-palette/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.colors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst mergedColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst defaultGradientColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.gradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction getColorGradientName( value ) {\n\t\tconst fallbackName = sprintf(\n\t\t\t/* translators: %s: the hex color value */\n\t\t\t__( 'Unlabeled color. %s' ),\n\t\t\tvalue\n\t\t);\n\t\tconst foundColorName = isGradientSegment\n\t\t\t? defaultSettings.gradients?.find(\n\t\t\t\t\t( gradient ) => gradient.gradient === value\n\t\t\t  )\n\t\t\t: defaultSettings.allColors?.find(\n\t\t\t\t\t( color ) => color.color === value\n\t\t\t  );\n\t\treturn foundColorName ? foundColorName?.name : fallbackName;\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\tconst colorName = getColorGradientName( color );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\taccessibilityLabel={ colorName }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\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>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,UAAU,EACVC,wBAAwB,EACxBC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACNC,UAAU,EACVC,QAAQ,EACRC,IAAI,QACE,cAAc;;AAErB;AACA;AACA;AACA,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,SAASC,WAAW,QAAQ,gCAAgC;AAE5D,MAAMC,kBAAkB,GAAG,GAAG;AAE9B,IAAIC,YAAY,GAAG,CAAC;AACpB,IAAIC,cAAc,GAAG,CAAC;AACtB,IAAIC,oBAAoB,GAAG,CAAC;AAE5B,SAASC,YAAYA,CAAE;EACtBC,iBAAiB,GAAG,IAAI;EACxBC,QAAQ;EACRC,WAAW;EACXC,eAAe;EACfC,eAAe;EACfC,cAAc;EACdC,aAAa;EACbC,6BAA6B;EAC7BC,+BAA+B,GAAG,IAAI;EACtCC,qBAAqB,GAAG,IAAI;EAC5BC,iCAAiC,GAAG,IAAI;EACxCC,0BAA0B;EAC1BC,4BAA4B;EAC5BC;AACD,CAAC,EAAG;EAAA,IAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA;EACH,MAAMC,qBAAqB,GAAG,CAC7B,0EAA0E,EAC1E,sEAAsE,EACtE,sEAAsE,CACtE;EAED,MAAMC,aAAa,GAAG7B,MAAM,CAAC,CAAC;EAC9B,MAAM8B,KAAK,GAAGlC,QAAQ,CAACmC,EAAE,KAAK,KAAK;EAEnC,MAAMC,iBAAiB,GAAGhB,cAAc,KAAKX,WAAW,CAAC4B,QAAQ,CAAE,CAAC,CAAE;EAEtE,MAAMC,KAAK,GAAGlC,MAAM,CAAE,IAAIP,QAAQ,CAAC0C,KAAK,CAAE,CAAE,CAAE,CAAC,CAACC,OAAO;EACvD,MAAMC,OAAO,GAAGrC,MAAM,CAAE,IAAIP,QAAQ,CAAC0C,KAAK,CAAE,CAAE,CAAE,CAAC,CAACC,OAAO;EAEzD,MAAME,aAAa,GAAG,CACrB,GAAG,IAAIC,GAAG,CACT,EAAAd,qBAAA,GAAEV,eAAe,CAACyB,MAAM,cAAAf,qBAAA,cAAAA,qBAAA,GAAI,EAAE,EAAGgB,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAC9D,CAAC,CACD;EACD,MAAMC,YAAY,GAAG,CACpB,GAAG,IAAIJ,GAAG,CACT,EAAAb,qBAAA,GAAEX,eAAe,CAAC6B,SAAS,cAAAlB,qBAAA,cAAAA,qBAAA,GAAI,EAAE,EAAGe,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CACjE,CAAC,CACD;EACD,MAAMG,qBAAqB,GAAG,CAC7B,GAAG,IAAIN,GAAG,CACT,EAAAZ,qBAAA,GAAEZ,eAAe,CAAC+B,SAAS,cAAAnB,qBAAA,cAAAA,qBAAA,GAAI,EAAE,EAAGc,GAAG,CACtC,CAAE;IAAEM;EAAS,CAAC,KAAMA,QACrB,CACD,CAAC,CACD;EACD,MAAMP,MAAM,GAAGR,iBAAiB,GAAGa,qBAAqB,GAAGP,aAAa;EAExE,MAAMU,oBAAoB,GAAGhB,iBAAiB,GAC3CnB,WAAW,GACXe,qBAAqB;EACxB,MAAMqB,qBAAqB,GAAGnC,eAAe,IAAIoC,gBAAgB,CAAC,CAAC;EACnE,MAAMC,yBAAyB,GAC9BxC,iBAAiB,IACjBQ,+BAA+B,KAC7B,CAAEa,iBAAiB,IAAIiB,qBAAqB,CAAE;EAEjD,MAAMG,iBAAiB,GAAGpB,iBAAiB,GACxClC,EAAE,CAAE,qCAAsC,CAAC,GAC3CA,EAAE,CAAE,kCAAmC,CAAC;EAC3C,MAAMuD,UAAU,GAAGvD,EAAE,CAAE,QAAS,CAAC;EAEjCG,SAAS,CAAE,MAAM;IAChB,IAAK4B,aAAa,CAACO,OAAO,EAAG;MAC5B,IAAKc,gBAAgB,CAAC,CAAC,EAAG;QACzBI,oBAAoB,CAAC,CAAC;MACvB,CAAC,MAAM;QACNzB,aAAa,CAACO,OAAO,CAACmB,QAAQ,CAAE;UAAEC,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAE,CAAE,CAAC;MACjD;IACD;IACA;IACA;IACA;EACD,CAAC,EAAE,CAAEzC,cAAc,CAAG,CAAC;EAEvB,SAASkC,gBAAgBA,CAAA,EAAG;IAC3B,MAAMQ,cAAc,GACnB7C,WAAW,IAAI8B,YAAY,IAAIA,YAAY,CAACgB,QAAQ,CAAE9C,WAAY,CAAC;IACpE,IAAKF,iBAAiB,IAAIE,WAAW,EAAG;MACvC,IAAKmB,iBAAiB,EAAG;QACxB,OAAOlB,eAAe,IAAI,CAAE4C,cAAc;MAC3C;MACA,OAAO,CAAE5C,eAAe,IAAI,CAAE4C,cAAc;IAC7C;IACA,OAAO,KAAK;EACb;EAEA,SAASE,UAAUA,CAAElB,KAAK,EAAG;IAC5B,OAAO,CAAEQ,gBAAgB,CAAC,CAAC,IAAIrC,WAAW,KAAK6B,KAAK;EACrD;EAEA,SAASmB,eAAeA,CAAEC,QAAQ,EAAEC,OAAO,EAAG;IAC7C,OAAOtE,QAAQ,CAACuE,MAAM,CAAEF,QAAQ,EAAE;MACjCC,OAAO;MACPE,QAAQ,EAAE3D,kBAAkB;MAC5B4D,MAAM,EAAExE,MAAM,CAACyE,IAAI;MACnBC,eAAe,EAAE;IAClB,CAAE,CAAC;EACJ;EAEA,SAASC,gBAAgBA,CAAE3B,KAAK,EAAG;IAClC,IAAK,CAAEkB,UAAU,CAAElB,KAAM,CAAC,EAAG;MAC5BL,OAAO,CAACiC,QAAQ,CAAE,CAAE,CAAC;IACtB;IAEA7E,QAAQ,CAAC8E,QAAQ,CAAE,CAClBV,eAAe,CAAE3B,KAAK,EAAE,CAAE,CAAC,EAC3B2B,eAAe,CAAExB,OAAO,EAAE,CAAE,CAAC,CAC5B,CAAC,CAACmC,KAAK,CAAE,MAAM;MAChBnC,OAAO,CAACiC,QAAQ,CAAE,CAAE,CAAC;MACrBpC,KAAK,CAACoC,QAAQ,CAAE,CAAE,CAAC;IACpB,CAAE,CAAC;EACJ;EAEA,MAAMG,kBAAkB,GAAGvC,KAAK,CAACwC,WAAW,CAAE;IAC7CC,UAAU,EAAE,CAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAE;IACzBC,WAAW,EAAE,CAAE,CAAC,EAAE,GAAG,EAAE,CAAC;EACzB,CAAE,CAAC;EAEH,SAASC,sBAAsBA,CAAA,EAAG;IACjC,MAAM;MAAEC;IAAM,CAAC,GAAGnF,UAAU,CAACoF,GAAG,CAAE,QAAS,CAAC;IAC5C,MAAMC,SAAS,GACdzE,YAAY,GAAGC,cAAc,GAAGC,oBAAoB,GAAGqE,KAAK;IAE7D,IAAK7B,qBAAqB,EAAG;MAC5B,IAAK,CAAEnB,KAAK,EAAG;QACd;QACA;QACA;QACA,IACCmB,qBAAqB,IACrB+B,SAAS,IACTnD,aAAa,CAACO,OAAO,EACpB;UACDP,aAAa,CAACO,OAAO,CAACmB,QAAQ,CAAE;YAC/BC,CAAC,EAAEhD,cAAc,GAAGC;UACrB,CAAE,CAAC;QACJ;MACD;IACD;EACD;EAEA,SAASwE,oBAAoBA,CAAEC,KAAK,EAAG;IACtC,MAAMC,YAAY,GAAGpF,OAAO,EAC3B;IACAD,EAAE,CAAE,qBAAsB,CAAC,EAC3BoF,KACD,CAAC;IACD,MAAME,cAAc,GAAGpD,iBAAiB,GACrCjB,eAAe,CAAC+B,SAAS,EAAEuC,IAAI,CAC7BtC,QAAQ,IAAMA,QAAQ,CAACA,QAAQ,KAAKmC,KACtC,CAAC,GACDnE,eAAe,CAAC6B,SAAS,EAAEyC,IAAI,CAC7B3C,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKwC,KAC7B,CAAC;IACJ,OAAOE,cAAc,GAAGA,cAAc,EAAEE,IAAI,GAAGH,YAAY;EAC5D;EAEA,SAASI,YAAYA,CAAE7C,KAAK,EAAG;IAC9BmC,sBAAsB,CAAC,CAAC;IACxBR,gBAAgB,CAAE3B,KAAM,CAAC;IACzB9B,QAAQ,CAAE8B,KAAM,CAAC;EAClB;EAEA,SAAS8C,mBAAmBA,CAAEV,KAAK,EAAG;IACrCvE,YAAY,GAAGuE,KAAK;IACpB,IAAK5B,gBAAgB,CAAC,CAAC,IAAIrB,aAAa,CAACO,OAAO,EAAG;MAClDkB,oBAAoB,CAAC,CAAC;IACvB;EACD;EAEA,SAASA,oBAAoBA,CAAA,EAAG;IAC/B,MAAMmC,aAAa,GAAGC,UAAU,CAAE,MAAM;MACvC7D,aAAa,CAACO,OAAO,CAACuD,WAAW,CAAC,CAAC;IACpC,CAAC,EAAErF,kBAAmB,CAAC;IACvB,OAAO,MAAM;MACZsF,YAAY,CAAEH,aAAc,CAAC;IAC9B,CAAC;EACF;EAEA,SAASI,uBAAuBA,CAAE;IAAEC;EAAY,CAAC,EAAG;IACnD,MAAM;MAAEhB;IAAM,CAAC,GAAGgB,WAAW,CAACC,MAAM;IACpC,IAAKjB,KAAK,KAAKrE,oBAAoB,EAAG;MACrCA,oBAAoB,GAAGqE,KAAK;IAC7B;EACD;EAEA,SAASkB,QAAQA,CAAE;IAAEF;EAAY,CAAC,EAAG;IACpCtF,cAAc,GAAGsF,WAAW,CAACG,aAAa,CAACzC,CAAC;EAC7C;EAEA,MAAM0C,sBAAsB,GAAGhG,4BAA4B,CAC1DC,MAAM,CAACgG,iBAAiB,EACxBhG,MAAM,CAACiG,qBACR,CAAC;EAED,MAAMC,eAAe,GAAGnG,4BAA4B,CACnD,CAAEC,MAAM,CAACkD,UAAU,EAAE,CAAEvB,KAAK,IAAI3B,MAAM,CAACmG,iBAAiB,CAAE,EAC1DnG,MAAM,CAACoG,cACR,CAAC;EAED,MAAMC,2BAA2B,GAAG,CACnCrG,MAAM,CAACsG,sBAAsB,EAC7BlF,4BAA4B,CAC5B;EAED,OACCmF,aAAA,CAAAC,QAAA,QACGnF,KAAK,IACNkF,aAAA,CAAC7G,IAAI;IAAC+G,iBAAiB,EAAC,QAAQ;IAACC,KAAK,EAAG1G,MAAM,CAAC2G;EAAY,GACzDtF,KACG,CACN,EAEDkF,aAAA,CAACpH,UAAU;IACVyH,qBAAqB,EAAG5G,MAAM,CAAC6G,gBAAkB;IACjDC,UAAU;IACVC,8BAA8B,EAAG,KAAO;IACxCC,yBAAyB,EAAC,QAAQ;IAClCC,6BAA6B;IAC7BC,mBAAmB,EAAG,EAAI;IAC1BrB,QAAQ,EAAGA,QAAU;IACrBR,mBAAmB,EAAGA,mBAAqB;IAC3C8B,iBAAiB,EAAGA,CAAA,KACnBpG,6BAA6B,CAAE,KAAM,CACrC;IACDqG,eAAe,EAAGA,CAAA,KAAMrG,6BAA6B,CAAE,IAAK,CAAG;IAC/DsG,GAAG,EAAG3F,aAAe;IACrB4F,MAAM,EAAI,gBAAgBjG,KAAK,GAAG,GAAG,GAAGA,KAAK,GAAG,EAAI;EAAG,GAErDgB,MAAM,CAACC,GAAG,CAAIC,KAAK,IAAM;IAC1B,MAAMgF,UAAU,GAAG9D,UAAU,CAAElB,KAAM,CAAC,GACnC+B,kBAAkB,GAClB,CAAC;IACJ,MAAMkD,SAAS,GAAG1C,oBAAoB,CAAEvC,KAAM,CAAC;IAE/C,OACCgE,aAAA,CAAClH,IAAI;MAACoI,GAAG,EAAI,GAAGlF,KAAO,IAAIkB,UAAU,CAAElB,KAAM,CAAG;IAAG,GAClDgE,aAAA,CAACnH,wBAAwB;MACxBsI,OAAO,EAAGA,CAAA,KAAMtC,YAAY,CAAE7C,KAAM,CAAG;MACvCkE,iBAAiB,EAAG,QAAU;MAC9BkB,kBAAkB,EAAG;QACpBC,QAAQ,EAAEnE,UAAU,CAAElB,KAAM;MAC7B,CAAG;MACHU,iBAAiB,EAAGV,KAAO;MAC3BsF,kBAAkB,EAAGL,SAAW;MAChCF,MAAM,EAAG/E;IAAO,GAEhBgE,aAAA,CAACjH,QAAQ,CAACD,IAAI;MACbqH,KAAK,EAAG;QACPoB,SAAS,EAAE,CACV;UACC/F,KAAK,EAAEwF;QACR,CAAC;MAEH;IAAG,GAEHhB,aAAA,CAACtG,cAAc;MACdsC,KAAK,EAAGA,KAAO;MACfkB,UAAU,EAAGA,UAAU,CAAElB,KAAM,CAAG;MAClCL,OAAO,EAAGA,OAAS;MACnBwE,KAAK,EAAG,CACP1G,MAAM,CAAC+H,cAAc,EACrB5G,0BAA0B;IACxB,CACH,CACa,CACU,CACrB,CAAC;EAET,CAAE,CAAC,EACD6B,yBAAyB,IAC1BuD,aAAA,CAAClH,IAAI;IACJqH,KAAK,EAAGL,2BAA6B;IACrC2B,QAAQ,EAAGtC;EAAyB,GAElCxE,iCAAiC,IAClCqF,aAAA,CAAClH,IAAI;IAACqH,KAAK,EAAGX;EAAwB,CAAE,CACxC,EACDQ,aAAA,CAACnH,wBAAwB;IACxBsI,OAAO,EAAG5G,aAAe;IACzB2F,iBAAiB,EAAG,QAAU;IAC9BkB,kBAAkB,EAAG;MACpBC,QAAQ,EAAE7E,gBAAgB,CAAC;IAC5B,CAAG;IACHE,iBAAiB,EAAGA;EAAmB,GAEvCsD,aAAA,CAAClH,IAAI;IAACqH,KAAK,EAAGL;EAA6B,GAC1CE,aAAA,CAACtG,cAAc;IACdgI,gBAAgB,EAAG,CAAEpG,iBAAmB;IACxCU,KAAK,EAAGM,oBAAsB;IAC9BY,UAAU,EAAGV,gBAAgB,CAAC,CAAG;IACjC2D,KAAK,EAAG,CACP1G,MAAM,CAAC+H,cAAc,EACrB5G,0BAA0B;EACxB,CACH,CAAC,EACAF,qBAAqB,IACtBsF,aAAA,CAAC7G,IAAI;IAACgH,KAAK,EAAGR;EAAiB,GAC5BvE,KAAK,GACJuB,UAAU,GACVA,UAAU,CAACgF,WAAW,CAAC,CACrB,CAEF,CACmB,CACrB,CAEI,CACX,CAAC;AAEL;AAEA,eAAe3H,YAAY"}

package/build-module/color-palette/styles.js

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 /**
  * External dependencies
  */

package/build-module/color-palette/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/styles.ts"],"names":["Heading","ColorHeading"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,YAAxB;AAEA,OAAO,MAAMC,YAAY,GAAG,qBAAQD,OAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"]}
+{"version":3,"names":["Heading","ColorHeading","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["@wordpress/components/src/color-palette/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,YAAY;AAEpC,OAAO,MAAMC,YAAY,GAAG,aAAAC,OAAA,CAAQF,OAAO,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAQ5C"}

package/build-module/color-palette/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/color-palette/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DropdownProps } from '../dropdown/types';\nimport type { HeadingSize } from '../heading/types';\n\nexport type ColorObject = {\n\tname: string;\n\tcolor: NonNullable< CSSProperties[ 'color' ] >;\n};\n\nexport type PaletteObject = {\n\tname: string;\n\tcolors: ColorObject[];\n};\n\ntype PaletteProps = {\n\tclassName?: string;\n\tclearColor: () => void;\n\t/**\n\t * Callback called when a color is selected.\n\t */\n\tonChange: ( newColor?: string, index?: number ) => void;\n\tvalue?: string;\n\tactions?: ReactNode;\n\theadingLevel?: HeadingSize;\n};\n\nexport type SinglePaletteProps = PaletteProps & {\n\tcolors: ColorObject[];\n};\n\nexport type MultiplePalettesProps = PaletteProps & {\n\tcolors: PaletteObject[];\n};\n\nexport type CustomColorPickerDropdownProps = DropdownProps & {\n\tisRenderedInSidebar: boolean;\n};\n\nexport type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {\n\t/**\n\t * Whether the palette should have a clearing button.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Array with the colors to be shown. When displaying multiple color palettes\n\t * to choose from, the format of the array changes from an array of colors\n\t * objects, to an array of color palettes.\n\t *\n\t * @default []\n\t */\n\tcolors?: PaletteObject[] | ColorObject[];\n\t/**\n\t * Whether to allow the user to pick a custom color on top of the predefined\n\t * choices (defined via the `colors` prop).\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t *\n\t * @default false\n\t */\n\tenableAlpha?: boolean;\n\t/**\n\t * The heading level.\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Currently active value.\n\t */\n\tvalue?: string;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n"],"mappings":""}

package/build-module/color-palette/utils.js

@@ -4,11 +4,12 @@
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -18,14 +19,14 @@ export const extractColorNameFromCurrentValue = (currentValue, colors = [], show
   if (!currentValue) {
     return '';
   }
-
   const currentValueIsCssVariable = /^var\(/.test(currentValue);
-  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : colord(currentValue).toHex(); // Normalize format of `colors` to simplify the following loop
+  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : colord(currentValue).toHex();
+
+  // Normalize format of `colors` to simplify the following loop
 
   const colorPalettes = showMultiplePalettes ? colors : [{
     colors: colors
   }];
-
   for (const {
     colors: paletteColors
   } of colorPalettes) {
@@ -34,29 +35,29 @@ export const extractColorNameFromCurrentValue = (currentValue, colors = [], show
       color: colorValue
     } of paletteColors) {
       const normalizedColorValue = currentValueIsCssVariable ? colorValue : colord(colorValue).toHex();
-
       if (normalizedCurrentValue === normalizedColorValue) {
         return colorName;
       }
     }
-  } // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
-
+  }
 
+  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
   return __('Custom');
 };
 export const showTransparentBackground = currentValue => {
   if (typeof currentValue === 'undefined') {
     return true;
   }
-
   return colord(currentValue).alpha() === 0;
-}; // The PaletteObject type has a `colors` property (an array of ColorObject),
-// while the ColorObject type has a `color` property (the CSS color value).
+};
 
+// The PaletteObject type has a `colors` property (an array of ColorObject),
+// while the ColorObject type has a `color` property (the CSS color value).
 export const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
 export const isMultiplePaletteArray = arr => {
   return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));
 };
+
 /**
  * Transform a CSS variable used as background color into the color value itself.
  *
@@ -64,14 +65,11 @@ export const isMultiplePaletteArray = arr => {
  * @param element The element for which to get the computed style.
  * @return The background color value computed from a element.
  */
-
 export const normalizeColorValue = (value, element) => {
   const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');
-
   if (!currentValueIsCssVariable || element === null) {
     return value;
   }
-
   const {
     ownerDocument
   } = element;

package/build-module/color-palette/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/utils.ts"],"names":["colord","extend","namesPlugin","a11yPlugin","__","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","showTransparentBackground","alpha","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","value","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AAGAH,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;AAEA,OAAO,MAAME,gCAAgC,GAAG,CAC/CC,YAD+C,EAE/CC,MAAqC,GAAG,EAFO,EAG/CC,oBAA6B,GAAG,KAHe,KAI3C;AACJ,MAAK,CAAEF,YAAP,EAAsB;AACrB,WAAO,EAAP;AACA;;AAED,QAAMG,yBAAyB,GAAG,SAASC,IAAT,CAAeJ,YAAf,CAAlC;AACA,QAAMK,sBAAsB,GAAGF,yBAAyB,GACrDH,YADqD,GAErDN,MAAM,CAAEM,YAAF,CAAN,CAAuBM,KAAvB,EAFH,CANI,CAUJ;;AAEA,QAAMC,aAAwC,GAAGL,oBAAoB,GAChED,MADgE,GAElE,CAAE;AAAEA,IAAAA,MAAM,EAAEA;AAAV,GAAF,CAFH;;AAGA,OAAM,MAAM;AAAEA,IAAAA,MAAM,EAAEO;AAAV,GAAZ,IAAyCD,aAAzC,EAAyD;AACxD,SAAM,MAAM;AAAEE,MAAAA,IAAI,EAAEC,SAAR;AAAmBC,MAAAA,KAAK,EAAEC;AAA1B,KAAZ,IAAsDJ,aAAtD,EAAsE;AACrE,YAAMK,oBAAoB,GAAGV,yBAAyB,GACnDS,UADmD,GAEnDlB,MAAM,CAAEkB,UAAF,CAAN,CAAqBN,KAArB,EAFH;;AAIA,UAAKD,sBAAsB,KAAKQ,oBAAhC,EAAuD;AACtD,eAAOH,SAAP;AACA;AACD;AACD,GAzBG,CA2BJ;;;AACA,SAAOZ,EAAE,CAAE,QAAF,CAAT;AACA,CAjCM;AAmCP,OAAO,MAAMgB,yBAAyB,GAAKd,YAAF,IAA6B;AACrE,MAAK,OAAOA,YAAP,KAAwB,WAA7B,EAA2C;AAC1C,WAAO,IAAP;AACA;;AACD,SAAON,MAAM,CAAEM,YAAF,CAAN,CAAuBe,KAAvB,OAAmC,CAA1C;AACA,CALM,C,CAOP;AACA;;AACA,OAAO,MAAMC,uBAAuB,GACnCC,GADsC,IAGtCC,KAAK,CAACC,OAAN,CAAiBF,GAAF,CAAyBhB,MAAxC,KAAoD,EAAI,WAAWgB,GAAf,CAH9C;AAKP,OAAO,MAAMG,sBAAsB,GAClCC,GADqC,IAET;AAC5B,SACCA,GAAG,CAACC,MAAJ,GAAa,CAAb,IACAD,GAAG,CAACE,KAAJ,CAAaC,QAAF,IAAgBR,uBAAuB,CAAEQ,QAAF,CAAlD,CAFD;AAIA,CAPM;AASP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,mBAAmB,GAAG,CAClCC,KADkC,EAElCC,OAFkC,KAG9B;AACJ,QAAMxB,yBAAyB,GAAG,SAASC,IAAT,CAAesB,KAAf,aAAeA,KAAf,cAAeA,KAAf,GAAwB,EAAxB,CAAlC;;AAEA,MAAK,CAAEvB,yBAAF,IAA+BwB,OAAO,KAAK,IAAhD,EAAuD;AACtD,WAAOD,KAAP;AACA;;AAED,QAAM;AAAEE,IAAAA;AAAF,MAAoBD,OAA1B;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAkBD,aAAxB;AACA,QAAME,uBAAuB,GAC5BD,WAAW,EAAEE,gBAAb,CAA+BJ,OAA/B,EAAyCK,eAD1C;AAGA,SAAOF,uBAAuB,GAC3BpC,MAAM,CAAEoC,uBAAF,CAAN,CAAkCxB,KAAlC,EAD2B,GAE3BoB,KAFH;AAGA,CAlBM","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 { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue?: string ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tconst currentValueIsCssVariable = /^var\\(/.test( value ?? '' );\n\n\tif ( ! currentValueIsCssVariable || element === null ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"]}
+{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","__","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","showTransparentBackground","alpha","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","value","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"sources":["@wordpress/components/src/color-palette/utils.ts"],"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 { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue?: string ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tconst currentValueIsCssVariable = /^var\\(/.test( value ?? '' );\n\n\tif ( ! currentValueIsCssVariable || element === null ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,UAAU,MAAM,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAGAH,MAAM,CAAE,CAAEC,WAAW,EAAEC,UAAU,CAAG,CAAC;AAErC,OAAO,MAAME,gCAAgC,GAAGA,CAC/CC,YAA2C,EAC3CC,MAAqC,GAAG,EAAE,EAC1CC,oBAA6B,GAAG,KAAK,KACjC;EACJ,IAAK,CAAEF,YAAY,EAAG;IACrB,OAAO,EAAE;EACV;EAEA,MAAMG,yBAAyB,GAAG,QAAQ,CAACC,IAAI,CAAEJ,YAAa,CAAC;EAC/D,MAAMK,sBAAsB,GAAGF,yBAAyB,GACrDH,YAAY,GACZN,MAAM,CAAEM,YAAa,CAAC,CAACM,KAAK,CAAC,CAAC;;EAEjC;;EAEA,MAAMC,aAAwC,GAAGL,oBAAoB,GAChED,MAAM,GACR,CAAE;IAAEA,MAAM,EAAEA;EAAwB,CAAC,CAAE;EAC1C,KAAM,MAAM;IAAEA,MAAM,EAAEO;EAAc,CAAC,IAAID,aAAa,EAAG;IACxD,KAAM,MAAM;MAAEE,IAAI,EAAEC,SAAS;MAAEC,KAAK,EAAEC;IAAW,CAAC,IAAIJ,aAAa,EAAG;MACrE,MAAMK,oBAAoB,GAAGV,yBAAyB,GACnDS,UAAU,GACVlB,MAAM,CAAEkB,UAAW,CAAC,CAACN,KAAK,CAAC,CAAC;MAE/B,IAAKD,sBAAsB,KAAKQ,oBAAoB,EAAG;QACtD,OAAOH,SAAS;MACjB;IACD;EACD;;EAEA;EACA,OAAOZ,EAAE,CAAE,QAAS,CAAC;AACtB,CAAC;AAED,OAAO,MAAMgB,yBAAyB,GAAKd,YAAqB,IAAM;EACrE,IAAK,OAAOA,YAAY,KAAK,WAAW,EAAG;IAC1C,OAAO,IAAI;EACZ;EACA,OAAON,MAAM,CAAEM,YAAa,CAAC,CAACe,KAAK,CAAC,CAAC,KAAK,CAAC;AAC5C,CAAC;;AAED;AACA;AACA,OAAO,MAAMC,uBAAuB,GACnCC,GAAgC,IAEhCC,KAAK,CAACC,OAAO,CAAIF,GAAG,CAAoBhB,MAAO,CAAC,IAAI,EAAI,OAAO,IAAIgB,GAAG,CAAE;AAEzE,OAAO,MAAMG,sBAAsB,GAClCC,GAAsC,IACV;EAC5B,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,QAAQ,IAAMR,uBAAuB,CAAEQ,QAAS,CAAE,CAAC;AAElE,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGA,CAClCC,KAAyB,EACzBC,OAA2B,KACvB;EACJ,MAAMxB,yBAAyB,GAAG,QAAQ,CAACC,IAAI,CAAEsB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG,CAAC;EAE9D,IAAK,CAAEvB,yBAAyB,IAAIwB,OAAO,KAAK,IAAI,EAAG;IACtD,OAAOD,KAAK;EACb;EAEA,MAAM;IAAEE;EAAc,CAAC,GAAGD,OAAO;EACjC,MAAM;IAAEE;EAAY,CAAC,GAAGD,aAAa;EACrC,MAAME,uBAAuB,GAC5BD,WAAW,EAAEE,gBAAgB,CAAEJ,OAAQ,CAAC,CAACK,eAAe;EAEzD,OAAOF,uBAAuB,GAC3BpC,MAAM,CAAEoC,uBAAwB,CAAC,CAACxB,KAAK,CAAC,CAAC,GACzCoB,KAAK;AACT,CAAC"}

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -7,10 +6,10 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { copy } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 import { CopyButton } from './styles';
 import { Text } from '../text';
 import { Tooltip } from '../ui/tooltip';
@@ -27,12 +26,10 @@ export const ColorCopyButton = props => {
         {
           return color.toHslString();
         }
-
       case 'rgb':
         {
           return color.toRgbString();
         }
-
       default:
       case 'hex':
         {
@@ -43,7 +40,6 @@ export const ColorCopyButton = props => {
     if (copyTimer.current) {
       clearTimeout(copyTimer.current);
     }
-
     setCopiedColor(color.toHex());
     copyTimer.current = setTimeout(() => {
       setCopiedColor(null);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","copy","__","CopyButton","Text","Tooltip","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","copyTimer","copyRef","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,kBAAT,QAAmC,oBAAnC;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,MAA9B,QAA4C,oBAA5C;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,UAA3B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,OAAT,QAAwB,eAAxB;AAIA,OAAO,MAAMC,eAAe,GAAKC,KAAF,IAAmC;AACjE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAuBF,KAA7B;AACA,QAAM,CAAEG,WAAF,EAAeC,cAAf,IAAkCb,QAAQ,CAAmB,IAAnB,CAAhD;AACA,QAAMc,SAAS,GAAGZ,MAAM,EAAxB;AACA,QAAMa,OAAO,GAAGhB,kBAAkB,CACjC,MAAM;AACL,YAASY,SAAT;AACC,WAAK,KAAL;AAAY;AACX,iBAAOD,KAAK,CAACM,WAAN,EAAP;AACA;;AACD,WAAK,KAAL;AAAY;AACX,iBAAON,KAAK,CAACO,WAAN,EAAP;AACA;;AACD;AACA,WAAK,KAAL;AAAY;AACX,iBAAOP,KAAK,CAACQ,KAAN,EAAP;AACA;AAVF;AAYA,GAdgC,EAejC,MAAM;AACL,QAAKJ,SAAS,CAACK,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEN,SAAS,CAACK,OAAZ,CAAZ;AACA;;AACDN,IAAAA,cAAc,CAAEH,KAAK,CAACQ,KAAN,EAAF,CAAd;AACAJ,IAAAA,SAAS,CAACK,OAAV,GAAoBE,UAAU,CAAE,MAAM;AACrCR,MAAAA,cAAc,CAAE,IAAF,CAAd;AACAC,MAAAA,SAAS,CAACK,OAAV,GAAoBG,SAApB;AACA,KAH6B,EAG3B,IAH2B,CAA9B;AAIA,GAxBgC,CAAlC;AA0BArB,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,WAAO,MAAM;AACZ,UAAKa,SAAS,CAACK,OAAf,EAAyB;AACxBC,QAAAA,YAAY,CAAEN,SAAS,CAACK,OAAZ,CAAZ;AACA;AACD,KAJD;AAKA,GAPQ,EAON,EAPM,CAAT;AASA,SACC,cAAC,OAAD;AACC,IAAA,OAAO,EACN,cAAC,IAAD;AAAM,MAAA,KAAK,EAAC;AAAZ,OACGP,WAAW,KAAKF,KAAK,CAACQ,KAAN,EAAhB,GACCd,EAAE,CAAE,SAAF,CADH,GAECA,EAAE,CAAE,MAAF,CAHN,CAFF;AAQC,IAAA,SAAS,EAAC;AARX,KAUC,cAAC,UAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,GAAG,EAAGW,OAFP;AAGC,IAAA,IAAI,EAAGZ,IAHR;AAIC,IAAA,WAAW,EAAG;AAJf,IAVD,CADD;AAmBA,CA1DM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport { Text } from '../text';\nimport { Tooltip } from '../ui/tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t\tplacement=\"bottom\"\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tisSmall\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"]}
+{"version":3,"names":["useCopyToClipboard","useState","useEffect","useRef","copy","__","CopyButton","Text","Tooltip","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","copyTimer","copyRef","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","createElement","content","placement","isSmall","ref","icon","showTooltip"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport { Text } from '../text';\nimport { Tooltip } from '../ui/tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t\tplacement=\"bottom\"\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tisSmall\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AAChE,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,OAAO,QAAQ,eAAe;AAIvC,OAAO,MAAMC,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAGb,QAAQ,CAAmB,IAAK,CAAC;EACzE,MAAMc,SAAS,GAAGZ,MAAM,CAAgD,CAAC;EACzE,MAAMa,OAAO,GAAGhB,kBAAkB,CACjC,MAAM;IACL,QAASY,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACM,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAON,KAAK,CAACO,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOP,KAAK,CAACQ,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKJ,SAAS,CAACK,OAAO,EAAG;MACxBC,YAAY,CAAEN,SAAS,CAACK,OAAQ,CAAC;IAClC;IACAN,cAAc,CAAEH,KAAK,CAACQ,KAAK,CAAC,CAAE,CAAC;IAC/BJ,SAAS,CAACK,OAAO,GAAGE,UAAU,CAAE,MAAM;MACrCR,cAAc,CAAE,IAAK,CAAC;MACtBC,SAAS,CAACK,OAAO,GAAGG,SAAS;IAC9B,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACDrB,SAAS,CAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKa,SAAS,CAACK,OAAO,EAAG;QACxBC,YAAY,CAAEN,SAAS,CAACK,OAAQ,CAAC;MAClC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OACCI,aAAA,CAAChB,OAAO;IACPiB,OAAO,EACND,aAAA,CAACjB,IAAI;MAACI,KAAK,EAAC;IAAO,GAChBE,WAAW,KAAKF,KAAK,CAACQ,KAAK,CAAC,CAAC,GAC5Bd,EAAE,CAAE,SAAU,CAAC,GACfA,EAAE,CAAE,MAAO,CACT,CACN;IACDqB,SAAS,EAAC;EAAQ,GAElBF,aAAA,CAAClB,UAAU;IACVqB,OAAO;IACPC,GAAG,EAAGZ,OAAS;IACfa,IAAI,EAAGzB,IAAM;IACb0B,WAAW,EAAG;EAAO,CACrB,CACO,CAAC;AAEZ,CAAC"}

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * Internal dependencies
  */
@@ -17,19 +16,19 @@ export const ColorInput = ({
     onChange,
     enableAlpha
   };
-
   switch (colorType) {
     case 'hsl':
-      return createElement(HslInput, { ...props
+      return createElement(HslInput, {
+        ...props
       });
-
     case 'rgb':
-      return createElement(RgbInput, { ...props
+      return createElement(RgbInput, {
+        ...props
       });
-
     default:
     case 'hex':
-      return createElement(HexInput, { ...props
+      return createElement(HexInput, {
+        ...props
       });
   }
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AAGA,OAAO,MAAMC,UAAU,GAAG,CAAE;AAC3BC,EAAAA,SAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA;AAJ2B,CAAF,KAKF;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,OAAeI;AAAf,QAAP;;AACD,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,OAAeA;AAAf,QAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,OAAeA;AAAf,QAAP;AAPF;AASA,CAhBM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}
+{"version":3,"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props","createElement"],"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,aAAa;AAGtC,OAAO,MAAMC,UAAU,GAAGA,CAAE;EAC3BC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC;AACgB,CAAC,KAAM;EACvB,MAAMC,KAAK,GAAG;IAAEH,KAAK;IAAEC,QAAQ;IAAEC;EAAY,CAAC;EAC9C,QAASH,SAAS;IACjB,KAAK,KAAK;MACT,OAAOK,aAAA,CAACR,QAAQ;QAAA,GAAMO;MAAK,CAAI,CAAC;IACjC,KAAK,KAAK;MACT,OAAOC,aAAA,CAACT,QAAQ;QAAA,GAAMQ;MAAK,CAAI,CAAC;IACjC;IACA,KAAK,KAAK;MACT,OAAOC,aAAA,CAACP,QAAQ;QAAA,GAAMM;MAAK,CAAI,CAAC;EAClC;AACD,CAAC"}

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

@@ -1,21 +1,21 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
+
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
+
 /**
  * WordPress dependencies
  */
-
 import { useCallback, useState, useMemo } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 import { useContextSystem, contextConnect } from '../ui/context';
 import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';
 import { ColorCopyButton } from './color-copy-button';
@@ -33,7 +33,6 @@ const options = [{
   label: 'Hex',
   value: 'hex'
 }];
-
 const UnconnectedColorPicker = (props, forwardedRef) => {
   const {
     enableAlpha = false,
@@ -42,8 +41,9 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     defaultValue = '#fff',
     copyFormat,
     ...divProps
-  } = useContextSystem(props, 'ColorPicker'); // Use a safe default value for the color and remove the possibility of `undefined`.
+  } = useContextSystem(props, 'ColorPicker');
 
+  // Use a safe default value for the color and remove the possibility of `undefined`.
   const [color, setColor] = useControlledValue({
     onChange,
     value: colorProp,
@@ -86,7 +86,6 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     enableAlpha: enableAlpha
   }))));
 };
-
 export const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
 export default ColorPicker;
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"]}
+{"version":3,"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","createElement","ref","justify","__nextHasNoMarginBottom","nextColorType","hideLabelFromVision","direction","gap","ColorPicker"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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"}

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

@@ -1,18 +1,17 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import { colord } from 'colord';
+
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
@@ -28,26 +27,24 @@ export const HexInput = ({
     const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
     onChange(colord(hexValue));
   };
-
   const stateReducer = (state, action) => {
     const nativeEvent = action.payload?.event?.nativeEvent;
-
     if ('insertFromPaste' !== nativeEvent?.inputType) {
-      return { ...state
+      return {
+        ...state
       };
     }
-
     const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
-    return { ...state,
+    return {
+      ...state,
       value
     };
   };
-
   return createElement(InputControl, {
     prefix: createElement(Spacer, {
       as: Text,
       marginLeft: space(4),
-      color: COLORS.ui.theme,
+      color: COLORS.theme.accent,
       lineHeight: 1
     }, "#"),
     value: color.toHex().slice(1).toUpperCase(),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","InputControl","Text","Spacer","space","COLORS","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","ui","theme","toHex"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,QAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAIA,OAAO,MAAMC,QAAQ,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,QAAT;AAAmBC,EAAAA;AAAnB,CAAF,KAAuD;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAET,MAAM,CAAEa,QAAF,CAAR,CAAR;AACA,GAPD;;AASA,QAAME,YAA0B,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AACvD,UAAMC,WAAW,GAAGD,MAAM,CAACE,OAAP,EAAgBC,KAAhB,EAAuBF,WAA3C;;AAEA,QAAK,sBAAsBA,WAAW,EAAEG,SAAxC,EAAoD;AACnD,aAAO,EAAE,GAAGL;AAAL,OAAP;AACA;;AAED,UAAMM,KAAK,GAAGN,KAAK,CAACM,KAAN,EAAaR,UAAb,CAAyB,GAAzB,IACXE,KAAK,CAACM,KAAN,CAAYC,KAAZ,CAAmB,CAAnB,EAAuBC,WAAvB,EADW,GAEXR,KAAK,CAACM,KAAN,EAAaE,WAAb,EAFH;AAIA,WAAO,EAAE,GAAGR,KAAL;AAAYM,MAAAA;AAAZ,KAAP;AACA,GAZD;;AAcA,SACC,cAAC,YAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGnB,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,CAAF,CAFnB;AAGC,MAAA,KAAK,EAAGC,MAAM,CAACmB,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGlB,KAAK,CAACmB,KAAN,GAAcJ,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGb,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAGT,EAAE,CAAE,WAAF,CAdX;AAeC,IAAA,mBAAmB,MAfpB;AAgBC,IAAA,IAAI,EAAC,kBAhBN;AAiBC,IAAA,sBAAsB,EAAGc,YAjB1B;AAkBC,IAAA,oBAAoB,EAAC;AAlBtB,IADD;AAsBA,CA9CM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"names":["colord","__","InputControl","Text","Spacer","space","COLORS","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","createElement","prefix","as","marginLeft","theme","accent","lineHeight","toHex","maxLength","label","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth"],"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;IACnB,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAET,MAAM,CAAEa,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAME,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAER,UAAU,CAAE,GAAI,CAAC,GACzCE,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,OACCG,aAAA,CAACvB,YAAY;IACZwB,MAAM,EACLD,aAAA,CAACrB,MAAM;MACNuB,EAAE,EAAGxB,IAAM;MACXyB,UAAU,EAAGvB,KAAK,CAAE,CAAE,CAAG;MACzBG,KAAK,EAAGF,MAAM,CAACuB,KAAK,CAACC,MAAQ;MAC7BC,UAAU,EAAG;IAAG,GAChB,GAEO,CACR;IACDT,KAAK,EAAGd,KAAK,CAACwB,KAAK,CAAC,CAAC,CAACT,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDf,QAAQ,EAAGE,YAAc;IACzBsB,SAAS,EAAGvB,WAAW,GAAG,CAAC,GAAG,CAAG;IACjCwB,KAAK,EAAGjC,EAAE,CAAE,WAAY,CAAG;IAC3BkC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAGtB,YAAc;IACvCuB,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC"}

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

@@ -1,13 +1,12 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import { colord } from 'colord';
+
 /**
  * Internal dependencies
  */
-
 import { InputWithSlider } from './input-with-slider';
 export const HslInput = ({
   color,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"names":["colord","InputWithSlider","HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","nextH","nextS","nextL","Math","trunc","nextA"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,QAAvB;AAEA;AACA;AACA;;AACA,SAASC,eAAT,QAAgC,qBAAhC;AAGA,OAAO,MAAMC,QAAQ,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,QAAT;AAAmBC,EAAAA;AAAnB,CAAF,KAAuD;AAC9E,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBN,KAAK,CAACO,KAAN,EAAvB;AAEA,SACC,8BACC,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,KAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGJ,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BP,MAAAA,QAAQ,CAAEJ,MAAM,CAAE;AAAEM,QAAAA,CAAC,EAAEK,KAAL;AAAYJ,QAAAA,CAAZ;AAAeC,QAAAA,CAAf;AAAkBC,QAAAA;AAAlB,OAAF,CAAR,CAAR;AACA;AARF,IADD,EAWC,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,YAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGF,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BR,MAAAA,QAAQ,CACPJ,MAAM,CAAE;AACPM,QAAAA,CADO;AAEPC,QAAAA,CAAC,EAAEK,KAFI;AAGPJ,QAAAA,CAHO;AAIPC,QAAAA;AAJO,OAAF,CADC,CAAR;AAQA;AAfF,IAXD,EA4BC,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,WAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGD,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BT,MAAAA,QAAQ,CACPJ,MAAM,CAAE;AACPM,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAAC,EAAEK,KAHI;AAIPJ,QAAAA;AAJO,OAAF,CADC,CAAR;AAQA;AAfF,IA5BD,EA6CGJ,WAAW,IACZ,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGS,IAAI,CAACC,KAAL,CAAY,MAAMN,CAAlB,CALT;AAMC,IAAA,QAAQ,EAAKO,KAAF,IAAqB;AAC/BZ,MAAAA,QAAQ,CACPJ,MAAM,CAAE;AACPM,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAHO;AAIPC,QAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,OAAF,CADC,CAAR;AAQA;AAfF,IA9CF,CADD;AAmEA,CAtEM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tonChange( colord( { h: nextH, s, l, a } ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts: nextS,\n\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\ta,\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\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tl: nextL,\n\t\t\t\t\t\t\ta,\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\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\t\ta: nextA / 100,\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"]}
+{"version":3,"names":["colord","InputWithSlider","HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","createElement","Fragment","min","max","label","abbreviation","value","nextH","nextS","nextL","Math","trunc","nextA"],"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tonChange( colord( { h: nextH, s, l, a } ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts: nextS,\n\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\ta,\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\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tl: nextL,\n\t\t\t\t\t\t\ta,\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\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\t\ta: nextA / 100,\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,eAAe,QAAQ,qBAAqB;AAGrD,OAAO,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAM;IAAEC,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEC;EAAE,CAAC,GAAGN,KAAK,CAACO,KAAK,CAAC,CAAC;EAEpC,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACV,eAAe;IACfY,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,KAAK;IACXC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGX,CAAG;IACXF,QAAQ,EAAKc,KAAa,IAAM;MAC/Bd,QAAQ,CAAEJ,MAAM,CAAE;QAAEM,CAAC,EAAEY,KAAK;QAAEX,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAE,CAAE,CAAC;IAC5C;EAAG,CACH,CAAC,EACFE,aAAA,CAACV,eAAe;IACfY,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,YAAY;IAClBC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGV,CAAG;IACXH,QAAQ,EAAKe,KAAa,IAAM;MAC/Bf,QAAQ,CACPJ,MAAM,CAAE;QACPM,CAAC;QACDC,CAAC,EAAEY,KAAK;QACRX,CAAC;QACDC;MACD,CAAE,CACH,CAAC;IACF;EAAG,CACH,CAAC,EACFE,aAAA,CAACV,eAAe;IACfY,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,WAAW;IACjBC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGT,CAAG;IACXJ,QAAQ,EAAKgB,KAAa,IAAM;MAC/BhB,QAAQ,CACPJ,MAAM,CAAE;QACPM,CAAC;QACDC,CAAC;QACDC,CAAC,EAAEY,KAAK;QACRX;MACD,CAAE,CACH,CAAC;IACF;EAAG,CACH,CAAC,EACAJ,WAAW,IACZM,aAAA,CAACV,eAAe;IACfY,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,OAAO;IACbC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGI,IAAI,CAACC,KAAK,CAAE,GAAG,GAAGb,CAAE,CAAG;IAC/BL,QAAQ,EAAKmB,KAAa,IAAM;MAC/BnB,QAAQ,CACPJ,MAAM,CAAE;QACPM,CAAC;QACDC,CAAC;QACDC,CAAC;QACDC,CAAC,EAAEc,KAAK,GAAG;MACZ,CAAE,CACH,CAAC;IACF;EAAG,CACH,CAED,CAAC;AAEL,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/index.ts"],"names":["LegacyAdapter","ColorPicker"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,IAAIC,WAA1B,QAA6C,kBAA7C","sourcesContent":["/**\n * Internal dependencies\n */\nexport { LegacyAdapter as ColorPicker } from './legacy-adapter';\n"]}
+{"version":3,"names":["LegacyAdapter","ColorPicker"],"sources":["@wordpress/components/src/color-picker/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { LegacyAdapter as ColorPicker } from './legacy-adapter';\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,IAAIC,WAAW,QAAQ,kBAAkB"}