@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.2.1

package/CHANGELOG.md

@@ -2,36 +2,18 @@
 
 ## Unreleased
 
-## 19.2.0-next.0 (2021-12-20)
+## 19.2.0 (2022-01-04)
 
 ### Experimental
 
--   Reinstated the ability to pass additional props to the `ToolsPanel` ([#36428](https://github.com/WordPress/gutenberg/pull/36428)).
--   Added an `__unstable-large` size variant to `InputControl`, `SelectControl`, and `UnitControl` for selective migration to the larger 40px heights. ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
--   Fixed inconsistent padding in `UnitControl` ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
--   Added support for RTL behavior for the `ZStack`'s `offset` prop ([#36769](https://github.com/WordPress/gutenberg/pull/36769))
--   Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([#36588](https://github.com/WordPress/gutenberg/pull/36588)).
--   Added `__experimentalHideHeader` prop to `Modal` component ([#36831](https://github.com/WordPress/gutenberg/pull/36831)).
--   Added experimental `ConfirmDialog` component ([#34153](https://github.com/WordPress/gutenberg/pull/34153)).
--   Divider: improve support for vertical orientation and RTL styles, use start/end logical props instead of top/bottom, change border-color to `currentColor` ([#36579](https://github.com/WordPress/gutenberg/pull/36579)).
--   `ToggleGroupControl`: Avoid calling `onChange` if radio state changed from an incoming value ([#37224](https://github.com/WordPress/gutenberg/pull/37224/)).
--   `ToggleGroupControl`: fix the computation of the backdrop dimensions when rendered in a Popover ([#37067](https://github.com/WordPress/gutenberg/pull/37067)).
+-   Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([36588](https://github.com/WordPress/gutenberg/pull/36588)).
 
 ### Bug Fix
 
--   Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([#36334](https://github.com/WordPress/gutenberg/pull/36334))
--   Replaced hardcoded blue in `ColorPicker` with UI theme color ([#36153](https://github.com/WordPress/gutenberg/pull/36153)).
--   Fixed empty `ToolsPanel` height by correcting menu button line-height ([#36895](https://github.com/WordPress/gutenberg/pull/36895)).
--   Normalized label line-height and spacing within the `ToolsPanel` ([36387](https://github.com/WordPress/gutenberg/pull/36387))
--   Remove unused `reakit-utils` from peer dependencies ([#37369](https://github.com/WordPress/gutenberg/pull/37369)).
--   Update all Emotion dependencies to the latest version to ensure they work correctly with React types ([#37365](https://github.com/WordPress/gutenberg/pull/37365)).
+-   Allowed `ToolsPanel` to register items when `panelId` is `null` due to multiple block selection ([37216](https://github.com/WordPress/gutenberg/pull/37216)).
 
 ### Enhancements
 
--   Wrapped `Modal` in a `forwardRef` call ([#36831](https://github.com/WordPress/gutenberg/pull/36831)).
--   Refactor `DateTime` class component to functional component ([#36835](https://github.com/WordPress/gutenberg/pull/36835))
--   Unify styles for `ColorIndicator` with how they appear in Global Styles ([#37028](https://github.com/WordPress/gutenberg/pull/37028))
--   Add support for rendering the `ColorPalette` in a `Dropdown` when opened in the sidebar ([#37067](https://github.com/WordPress/gutenberg/pull/37067))
 -   Show an incremental sequence of numbers (1/2/3/4/5) as a label of the font size, when we have at most five font sizes, where at least one the them contains a complex css value(clamp, var, etc..). We do this because complex css values cannot be calculated properly and the incremental sequence of numbers as labels can help the user better mentally map the different available font sizes. ([#37038](https://github.com/WordPress/gutenberg/pull/37038))
 
 ## 19.1.4 (2021-12-13)
@@ -69,14 +51,9 @@
 
 ## 19.0.1 (2021-11-07)
 
-### Enhancements
-
--   Updated the `ColorPalette` and `GradientPicker` components to the latest designs ([#35970](https://github.com/WordPress/gutenberg/pull/35970)).
-
 ### Experimental
 
--   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([#35621](https://github.com/WordPress/gutenberg/pull/35621)).
--   Added experimental `__experimentalHasMultipleOrigins` prop to the `ColorPalette` and `GradientPicker` components ([#35970](https://github.com/WordPress/gutenberg/pull/35970)).
+-   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([35621](https://github.com/WordPress/gutenberg/pull/35621)).
 
 ## 19.0.0 (2021-10-22)
 
@@ -87,14 +64,14 @@
 ### Enhancements
 
 -   Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
--   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a string on ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+-   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a  string on  ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
 -   The property `disableAlpha`, was removed from the `ColorPicker` component. Use the new opposite property `enableAlpha` instead ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
 
 ### Experimental
 
 -   Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
 -   Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
--   Added support for showing an experimental hint in `CustomSelectControl` ([#35673](https://github.com/WordPress/gutenberg/pull/35673)).
+-   Added support for showing an experimental hint in `CustomSelectControl`  ([#35673](https://github.com/WordPress/gutenberg/pull/35673)).
 
 ### Breaking Changes
 

package/build/angle-picker-control/index.js

@@ -60,13 +60,11 @@ function AnglePickerControl(_ref) {
     max: 360,
     min: 0,
     onChange: handleOnNumberChange,
-    size: "__unstable-large",
     step: "1",
     value: value,
     hideHTMLArrows: true,
     suffix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
-      marginBottom: 0,
       marginRight: (0, _space.space)(3),
       style: {
         color: 'var( --wp-admin-theme-color )'

package/build/angle-picker-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginLeft","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,kBAAT,OAKX;AAAA,MALwC;AAC3CC,IAAAA,SAD2C;AAE3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAFmC;AAG3CC,IAAAA,QAH2C;AAI3CC,IAAAA;AAJ2C,GAKxC;;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CR,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,4BAAC,eAAD,QACC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGD,KART;AASC,IAAA,cAAc,MATf;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGM,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAJT;AAXF,IADD,CADD,EA0BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAE,kBAAO,CAAP,CADL;AAEPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CAFP;AAGPC,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGV,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CA1BD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../input-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root className={ classes }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginLeft: space( 4 ),\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginLeft","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,kBAAT,OAKX;AAAA,MALwC;AAC3CC,IAAAA,SAD2C;AAE3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAFmC;AAG3CC,IAAAA,QAH2C;AAI3CC,IAAAA;AAJ2C,GAKxC;;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CR,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,4BAAC,eAAD,QACC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,GANN;AAOC,IAAA,KAAK,EAAGD,KAPT;AAQC,IAAA,cAAc,MARf;AASC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGM,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAFf;AAGC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAHT;AAVF,IADD,CADD,EAwBC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAE,kBAAO,CAAP,CADL;AAEPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CAFP;AAGPC,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGV,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CAxBD,CADD;AAwCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../input-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root className={ classes }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginLeft: space( 4 ),\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}

package/build/button/index.native.js

@@ -100,24 +100,14 @@ function Button(props) {
     showTooltip,
     label,
     shortcut,
-    tooltipPosition,
-    isActiveStyle,
-    customContainerStyles
+    tooltipPosition
   } = props;
   const preferredColorScheme = (0, _compose.usePreferredColorScheme)();
   const isDisabled = ariaDisabled || disabled;
-  const containerStyle = [styles.container, customContainerStyles && { ...customContainerStyles
-  }];
   const buttonViewStyle = {
     opacity: isDisabled ? 0.3 : 1,
     ...(fixedRatio && styles.fixedRatio),
-    ...(isPressed ? styles.buttonActive : styles.buttonInactive),
-    ...(isPressed && (isActiveStyle === null || isActiveStyle === void 0 ? void 0 : isActiveStyle.borderRadius) && {
-      borderRadius: isActiveStyle.borderRadius
-    }),
-    ...((isActiveStyle === null || isActiveStyle === void 0 ? void 0 : isActiveStyle.backgroundColor) && {
-      backgroundColor: isActiveStyle.backgroundColor
-    })
+    ...(isPressed ? styles.buttonActive : styles.buttonInactive)
   };
   const states = [];
 
@@ -161,7 +151,7 @@ function Button(props) {
     accessibilityHint: hint,
     onPress: onClick,
     onLongPress: onLongPress,
-    style: containerStyle,
+    style: styles.container,
     disabled: isDisabled,
     testID: testID
   }, (0, _element.createElement)(_reactNative.View, {

package/build/button/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["isAndroid","Platform","OS","marginBottom","marginLeft","styles","StyleSheet","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","preferredColorScheme","isDisabled","containerStyle","buttonViewStyle","opacity","states","push","newChildren","Children","map","child","colorScheme","shouldShowTooltip","length","newIcon","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { isArray } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled || disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t  } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// an explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// there's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// there's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// the children are empty and...\n\t\t\t\t( ! children ||\n\t\t\t\t\t( isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// the tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t  } )\n\t\t: null;\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tonLongPress={ onLongPress }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t{ newIcon }\n\t\t\t\t\t{ newChildren }\n\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}
+{"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["isAndroid","Platform","OS","marginBottom","marginLeft","styles","StyleSheet","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","preferredColorScheme","isDisabled","buttonViewStyle","opacity","states","push","newChildren","Children","map","child","colorScheme","shouldShowTooltip","length","newIcon","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { isArray } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled || disabled;\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t  } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// an explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// there's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// there's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// the children are empty and...\n\t\t\t\t( ! children ||\n\t\t\t\t\t( isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// the tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t  } )\n\t\t: null;\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tonLongPress={ onLongPress }\n\t\t\tstyle={ styles.container }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t{ newIcon }\n\t\t\t\t\t{ newChildren }\n\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}

package/build/checkbox-control/index.js

@@ -46,7 +46,7 @@ function CheckboxControl(_ref) {
   if (heading) {
     (0, _deprecated.default)('`heading` prop in `CheckboxControl`', {
       alternative: 'a separate element to implement a heading',
-      since: '5.8'
+      plugin: 'Gutenberg'
     });
   }
 

package/build/checkbox-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["CheckboxControl","label","className","heading","checked","help","onChange","props","alternative","since","instanceId","id","onChangeValue","event","target","undefined","check"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGe,SAASA,eAAT,OAQX;AAAA,MARqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,IALwC;AAMxCC,IAAAA,QANwC;AAOxC,OAAGC;AAPqC,GAQrC;;AACH,MAAKJ,OAAL,EAAe;AACd,6BAAY,qCAAZ,EAAmD;AAClDK,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,KAAK,EAAE;AAF2C,KAAnD;AAIA;;AAED,QAAMC,UAAU,GAAG,4BAAeV,eAAf,CAAnB;AACA,QAAMW,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAaP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,OAAf,CAA3C;;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGQ,EAFN;AAGC,IAAA,IAAI,EAAGN,IAHR;AAIC,IAAA,SAAS,EAAG,yBAAY,6BAAZ,EAA2CH,SAA3C;AAJb,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,EAAE,EAAGS,EADN;AAEC,IAAA,SAAS,EAAC,oCAFX;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,KAAK,EAAC,GAJP;AAKC,IAAA,QAAQ,EAAGC,aALZ;AAMC,IAAA,OAAO,EAAGR,OANX;AAOC,wBAAmB,CAAC,CAAEC,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI;AAP9C,KAQMR,KARN,EADD,EAWGH,OAAO,GACR,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGY,YADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADQ,GAML,IAjBL,CAND,EAyBC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGL;AAFX,KAIGV,KAJH,CAzBD,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ checked ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["CheckboxControl","label","className","heading","checked","help","onChange","props","alternative","plugin","instanceId","id","onChangeValue","event","target","undefined","check"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGe,SAASA,eAAT,OAQX;AAAA,MARqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,IALwC;AAMxCC,IAAAA,QANwC;AAOxC,OAAGC;AAPqC,GAQrC;;AACH,MAAKJ,OAAL,EAAe;AACd,6BAAY,qCAAZ,EAAmD;AAClDK,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,MAAM,EAAE;AAF0C,KAAnD;AAIA;;AAED,QAAMC,UAAU,GAAG,4BAAeV,eAAf,CAAnB;AACA,QAAMW,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAaP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,OAAf,CAA3C;;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGQ,EAFN;AAGC,IAAA,IAAI,EAAGN,IAHR;AAIC,IAAA,SAAS,EAAG,yBAAY,6BAAZ,EAA2CH,SAA3C;AAJb,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,EAAE,EAAGS,EADN;AAEC,IAAA,SAAS,EAAC,oCAFX;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,KAAK,EAAC,GAJP;AAKC,IAAA,QAAQ,EAAGC,aALZ;AAMC,IAAA,OAAO,EAAGR,OANX;AAOC,wBAAmB,CAAC,CAAEC,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI;AAP9C,KAQMR,KARN,EADD,EAWGH,OAAO,GACR,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGY,YADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADQ,GAML,IAjBL,CAND,EAyBC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGL;AAFX,KAIGV,KAJH,CAzBD,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tplugin: 'Gutenberg',\n\t\t} );\n\t}\n\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ checked ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}

package/build/clipboard-button/index.js

@@ -42,7 +42,8 @@ function ClipboardButton(_ref) {
     ...buttonProps
   } = _ref;
   (0, _deprecated.default)('wp.components.ClipboardButton', {
-    since: '5.8',
+    since: '10.3',
+    plugin: 'Gutenberg',
     alternative: 'wp.compose.useCopyToClipboard'
   });
   const timeoutId = (0, _element.useRef)();

package/build/clipboard-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,IAAhB;;AAEe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACH,2BAAY,+BAAZ,EAA6C;AAC5CC,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAA7C;AAKA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,GAAG,GAAG,iCAAoBL,IAApB,EAA0B,MAAM;AAC3CF,IAAAA,MAAM;AACNQ,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKR,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAPW,CAAZ;AASA,0BAAW,MAAM;AAChBY,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFD,EAEG,EAFH;AAIA,QAAME,OAAO,GAAG,yBAAY,6BAAZ,EAA2Cb,SAA3C,CAAhB,CApBG,CAsBH;AACA;AACA;AACA;AACA;;AACA,QAAMc,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,4BAAC,eAAD,6BACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGb,QANH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tclearTimeout( timeoutId.current );\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget = ( event ) => {\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","plugin","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,IAAhB;;AAEe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACH,2BAAY,+BAAZ,EAA6C;AAC5CC,IAAAA,KAAK,EAAE,MADqC;AAE5CC,IAAAA,MAAM,EAAE,WAFoC;AAG5CC,IAAAA,WAAW,EAAE;AAH+B,GAA7C;AAMA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,GAAG,GAAG,iCAAoBN,IAApB,EAA0B,MAAM;AAC3CF,IAAAA,MAAM;AACNS,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKT,YAAL,EAAoB;AACnBM,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMV,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAPW,CAAZ;AASA,0BAAW,MAAM;AAChBa,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFD,EAEG,EAFH;AAIA,QAAME,OAAO,GAAG,yBAAY,6BAAZ,EAA2Cd,SAA3C,CAAhB,CArBG,CAuBH;AACA;AACA;AACA;AACA;;AACA,QAAMe,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,4BAAC,eAAD,6BACMb,WADN;AAEC,IAAA,SAAS,EAAGS,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGd,QANH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '10.3',\n\t\tplugin: 'Gutenberg',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tclearTimeout( timeoutId.current );\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget = ( event ) => {\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}

package/build/color-palette/index.js

@@ -144,7 +144,7 @@ function ColorPalette(_ref6) {
     __experimentalIsRenderedInSidebar = false
   } = _ref6;
   const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
-  const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
+  const Component = __experimentalHasMultipleOrigins && colors !== null && colors !== void 0 && colors.length ? MultiplePalettes : SinglePalette;
 
   const renderCustomColorPicker = () => (0, _element.createElement)(_colorPicker.ColorPicker, {
     color: value,
@@ -152,25 +152,13 @@ function ColorPalette(_ref6) {
     enableAlpha: enableAlpha
   });
 
-  let dropdownPosition;
-  let popoverProps;
-
-  if (__experimentalIsRenderedInSidebar) {
-    dropdownPosition = (0, _i18n.isRTL)() ? 'bottom right' : 'bottom left';
-    popoverProps = {
-      __unstableForcePosition: true
-    };
-  }
-
   const colordColor = (0, _colord.colord)(value);
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
   }, !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
-    position: dropdownPosition,
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
-    popoverProps: popoverProps,
     renderToggle: _ref7 => {
       let {
         isOpen,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","popoverProps","__unstableForcePosition","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = isRTL() ? 'bottom right' : 'bottom left';\n\t\tpopoverProps = { __unstableForcePosition: true };\n\t}\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && colors?.length\n\t\t\t? MultiplePalettes\n\t\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

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

@@ -19,8 +19,6 @@ var _tooltip = require("../ui/tooltip");
 
 var _space = require("../ui/utils/space");
 
-var _colorsValues = require("../utils/colors-values");
-
 /**
  * External dependencies
  */
@@ -43,7 +41,7 @@ const ValueDisplay = _ref => {
       isBlock: true,
       display: "flex"
     }, (0, _element.createElement)(_text.Text, {
-      color: _colorsValues.COLORS.ui.theme
+      color: "blue"
     }, abbreviation), (0, _element.createElement)(_text.Text, null, value));
   }));
 };
@@ -98,7 +96,7 @@ const HexDisplay = _ref5 => {
   } = _ref5;
   const colorWithoutHash = color.toHex().slice(1).toUpperCase();
   return (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_text.Text, {
-    color: _colorsValues.COLORS.ui.theme
+    color: "blue"
   }, "#"), (0, _element.createElement)(_text.Text, null, colorWithoutHash));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["ValueDisplay","values","map","value","abbreviation","COLORS","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\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\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>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["ValueDisplay","values","map","value","abbreviation","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":";;;;;;;AASA;;AADA;;AAEA;;AAKA;;AACA;;AACA;;AAEA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAwBA,MAAMA,YAAY,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACpB,qDACGA,MAAM,CAACC,GAAP,CAAY,SAA+B;AAAA,QAA7B,CAAEC,KAAF,EAASC,YAAT,CAA6B;AAC5C,WACC,4BAAC,cAAD;AAAU,MAAA,GAAG,EAAGA,YAAhB;AAA+B,MAAA,OAAO,MAAtC;AAAuC,MAAA,OAAO,EAAC;AAA/C,OACC,4BAAC,UAAD;AAAM,MAAA,KAAK,EAAC;AAAZ,OAAqBA,YAArB,CADD,EAEC,4BAAC,UAAD,QAAQD,KAAR,CAFD,CADD;AAMA,GAPC,CADH,CADoB;AAAA,CAArB;;AAaA,MAAME,UAAU,GAAG,SAA4C;AAAA,MAA1C;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAA0C;AAC9D,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBL,KAAK,CAACM,KAAN,EAAvB;AAEA,QAAMX,MAAc,GAAG,CACtB,CAAEY,IAAI,CAACC,KAAL,CAAYN,CAAZ,CAAF,EAAmB,GAAnB,CADsB,EAEtB,CAAEK,IAAI,CAACE,KAAL,CAAYN,CAAC,GAAG,GAAhB,CAAF,EAAyB,GAAzB,CAFsB,EAGtB,CAAEI,IAAI,CAACE,KAAL,CAAYL,CAAC,GAAG,GAAhB,CAAF,EAAyB,GAAzB,CAHsB,CAAvB;;AAKA,MAAKH,WAAL,EAAmB;AAClBN,IAAAA,MAAM,CAACe,IAAP,CAAa,CAAEH,IAAI,CAACE,KAAL,CAAYJ,CAAC,GAAG,GAAhB,CAAF,EAAyB,GAAzB,CAAb;AACA;;AAED,SAAO,4BAAC,YAAD;AAAc,IAAA,MAAM,EAAGV;AAAvB,IAAP;AACA,CAbD;;AAeA,MAAMgB,UAAU,GAAG,SAA4C;AAAA,MAA1C;AAAEX,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAA0C;AAC9D,QAAM;AAAEW,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWT,IAAAA;AAAX,MAAiBL,KAAK,CAACe,KAAN,EAAvB;AAEA,QAAMpB,MAAc,GAAG,CACtB,CAAEiB,CAAF,EAAK,GAAL,CADsB,EAEtB,CAAEC,CAAF,EAAK,GAAL,CAFsB,EAGtB,CAAEC,CAAF,EAAK,GAAL,CAHsB,CAAvB;;AAMA,MAAKb,WAAL,EAAmB;AAClBN,IAAAA,MAAM,CAACe,IAAP,CAAa,CAAEH,IAAI,CAACE,KAAL,CAAYJ,CAAC,GAAG,GAAhB,CAAF,EAAyB,GAAzB,CAAb;AACA;;AAED,SAAO,4BAAC,YAAD;AAAc,IAAA,MAAM,EAAGV;AAAvB,IAAP;AACA,CAdD;;AAgBA,MAAMqB,UAAU,GAAG,SAA+B;AAAA,MAA7B;AAAEhB,IAAAA;AAAF,GAA6B;AACjD,QAAMiB,gBAAgB,GAAGjB,KAAK,CAACkB,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAAzB;AACA,SACC,4BAAC,cAAD,QACC,4BAAC,UAAD;AAAM,IAAA,KAAK,EAAC;AAAZ,SADD,EAEC,4BAAC,UAAD,QAAQH,gBAAR,CAFD,CADD;AAMA,CARD;;AAUA,MAAMI,YAAY,GAAKC,SAAF,IAA4B;AAChD,UAASA,SAAT;AACC,SAAK,KAAL;AACC,aAAOvB,UAAP;;AACD,SAAK,KAAL;AACC,aAAOY,UAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAOK,UAAP;AAPF;AASA,CAVD;;AAYO,MAAMO,YAAY,GAAG,SAIF;AAAA,MAJI;AAC7BvB,IAAAA,KAD6B;AAE7BsB,IAAAA,SAF6B;AAG7BrB,IAAAA;AAH6B,GAIJ;AACzB,QAAM,CAAEuB,WAAF,EAAeC,cAAf,IAAkC,uBAA2B,IAA3B,CAAxC;AACA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,KAAK,GAAG;AAAE3B,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAd;AACA,QAAM2B,SAAS,GAAGP,YAAY,CAAEC,SAAF,CAA9B;AACA,QAAMO,OAAO,GAAG,iCACf,MAAM;AACL,YAASP,SAAT;AACC,WAAK,KAAL;AAAY;AACX,iBAAOtB,KAAK,CAAC8B,WAAN,EAAP;AACA;;AACD,WAAK,KAAL;AAAY;AACX,iBAAO9B,KAAK,CAAC+B,WAAN,EAAP;AACA;;AACD;AACA,WAAK,KAAL;AAAY;AACX,iBAAO/B,KAAK,CAACkB,KAAN,EAAP;AACA;AAVF;AAYA,GAdc,EAef,MAAM;AACL,QAAKQ,SAAS,CAACM,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEP,SAAS,CAACM,OAAZ,CAAZ;AACA;;AACDP,IAAAA,cAAc,CAAEzB,KAAK,CAACkB,KAAN,EAAF,CAAd;AACAQ,IAAAA,SAAS,CAACM,OAAV,GAAoBE,UAAU,CAAE,MAAM;AACrCT,MAAAA,cAAc,CAAE,IAAF,CAAd;AACAC,MAAAA,SAAS,CAACM,OAAV,GAAoBG,SAApB;AACA,KAH6B,EAG3B,IAH2B,CAA9B;AAIA,GAxBc,CAAhB;AA0BA,0BAAW,MAAM;AAChB;AACA,WAAO,MAAM;AACZ,UAAKT,SAAS,CAACM,OAAf,EAAyB;AACxBC,QAAAA,YAAY,CAAEP,SAAS,CAACM,OAAZ,CAAZ;AACA;AACD,KAJD;AAKA,GAPD,EAOG,EAPH;AAQA,SACC,4BAAC,gBAAD;AACC,IAAA,OAAO,EACN,4BAAC,UAAD;AAAM,MAAA,KAAK,EAAC;AAAZ,OACGR,WAAW,KAAKxB,KAAK,CAACkB,KAAN,EAAhB,GACC,cAAI,SAAJ,CADD,GAEC,cAAI,MAAJ,CAHJ;AAFF,KASC,4BAAC,UAAD;AACC,IAAA,OAAO,EAAC,YADT;AAEC,IAAA,GAAG,EAAG,kBAAO,CAAP,CAFP;AAGC,IAAA,GAAG,EAAGW,OAHP;AAIC,IAAA,KAAK,EAAG;AAAEO,MAAAA,MAAM,EAAE;AAAV;AAJT,KAMC,4BAAC,SAAD,EAAgBT,KAAhB,CAND,CATD,CADD;AAoBA,CA/DM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color=\"blue\">{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color=\"blue\">#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\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\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>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}

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

@@ -19,8 +19,6 @@ var _space = require("../ui/utils/space");
 
 var _styles = require("./styles");
 
-var _colorsValues = require("../utils/colors-values");
-
 /**
  * External dependencies
  */
@@ -49,7 +47,7 @@ const HexInput = _ref => {
     prefix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
       marginLeft: (0, _space.space)(3.5),
-      color: _colorsValues.COLORS.ui.theme,
+      color: "blue",
       lineHeight: 1
     }, "#"),
     value: color.toHex().slice(1).toUpperCase(),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","Text","COLORS","ui","theme","toHex","slice","toUpperCase","nextValue"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAaO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAE,oBAAQ,MAAMA,KAAd,EAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,4BAAC,4BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGC,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,GAAP,CAFd;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGV,KAAK,CAACW,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3Bb,MAAAA,QAAQ,CAAE,oBAAQ,MAAMa,SAAd,CAAF,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGX,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAjBT;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\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={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","Text","toHex","slice","toUpperCase","nextValue"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAYO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAE,oBAAQ,MAAMA,KAAd,EAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,4BAAC,4BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGC,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,GAAP,CAFd;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGP,KAAK,CAACQ,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BV,MAAAA,QAAQ,CAAE,oBAAQ,MAAMU,SAAd,CAAF,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGR,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAjBT;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor=\"blue\"\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={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}

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

@@ -17,8 +17,6 @@ var _space = require("../ui/utils/space");
 
 var _styles = require("./styles");
 
-var _colorsValues = require("../utils/colors-values");
-
 /**
  * Internal dependencies
  */
@@ -44,7 +42,7 @@ const InputWithSlider = _ref => {
     prefix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
       paddingLeft: (0, _space.space)(3.5),
-      color: _colorsValues.COLORS.ui.theme,
+      color: "blue",
       lineHeight: 1
     }, abbreviation),
     hideHTMLArrows: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","HStack","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAiBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,4BAAC,cAAD;AAAQ,IAAA,EAAE,EAAGC,cAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGN,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,GAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGP,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ 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={ onChange }\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( 3.5 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\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\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\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\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","HStack","Text"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AAPA;AACA;AACA;AAgBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,4BAAC,cAAD;AAAQ,IAAA,EAAE,EAAGC,cAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGN,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,GAAP,CAFf;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGJ,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ 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={ onChange }\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( 3.5 ) }\n\t\t\t\t\t\tcolor=\"blue\"\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\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\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\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}

package/build/custom-gradient-picker/index.js

@@ -105,7 +105,6 @@ const GradientTypePicker = _ref2 => {
     labelPosition: "top",
     onChange: handleOnChange,
     options: _constants.GRADIENT_OPTIONS,
-    size: "__unstable-large",
     value: hasGradient && type
   });
 };

package/build/custom-gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}