@wordpress/components 25.5.0 → 25.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","current","clearTimeout","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAIA,MAAMC,OAAO,GAAG,IAAhB;AAEA,eAAe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,SADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA,MAHwC;AAIxCC,EAAAA,YAJwC;AAKxCC,EAAAA,IALwC;AAMxC,KAAGC;AANqC,CAA1B,EAOuD;AACrET,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAAnC,CAAV;AAKA,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACA,QAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM;;AACN,QAAKM,SAAS,CAACE,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEH,SAAS,CAACE,OAAZ,CAAZ;AACA;;AAED,QAAKP,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACE,OAAV,GAAoBE,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAT6B,CAA9B;AAWAJ,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKc,SAAS,CAACE,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEH,SAAS,CAACE,OAAZ,CAAZ;AACA;AACD,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAMG,OAAO,GAAGrB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,CAxBqE,CA0BrE;AACA;AACA;AACA;AACA;;AACA,QAAMc,sBAAmD,GAAKC,KAAF,IAAa;AACxE;AACAA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAHD;;AAKA,SACC,cAAC,MAAD,OACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,KAMGb,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';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\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: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\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,"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","current","clearTimeout","setTimeout","classes","focusOnCopyEventTarget","event","target","focus","createElement"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"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';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\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: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\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"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAI9B,MAAMC,OAAO,GAAG,IAAI;AAEpB,eAAe,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrET,UAAU,CAAE,+BAA+B,EAAE;IAC5CU,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAGf,MAAM,CAAmB,CAAC;EAC5C,MAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKM,SAAS,CAACE,OAAO,EAAG;MACxBC,YAAY,CAAEH,SAAS,CAACE,OAAQ,CAAC;IAClC;IAEA,IAAKP,YAAY,EAAG;MACnBK,SAAS,CAACE,OAAO,GAAGE,UAAU,CAAE,MAAMT,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEHJ,SAAS,CAAE,MAAM;IAChB,IAAKc,SAAS,CAACE,OAAO,EAAG;MACxBC,YAAY,CAAEH,SAAS,CAACE,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,OAAO,GAAGrB,UAAU,CAAE,6BAA6B,EAAEQ,SAAU,CAAC;;EAEtE;EACA;EACA;EACA;EACA;EACA,MAAMc,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,OACCC,aAAA,CAACrB,MAAM;IAAA,GACDQ,WAAW;IAChBL,SAAS,EAAGa,OAAS;IACrBJ,GAAG,EAAGA,GAAK;IACXP,MAAM,EAAGY;EAAwB,GAE/Bb,QACK,CAAC;AAEX"}

package/build-module/clipboard-button/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/clipboard-button/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\nexport interface ClipboardButtonProps {\n\tchildren: ReactNode;\n\tonCopy: () => void;\n\tonFinishCopy?: () => void;\n\ttext: string;\n}\n"],"mappings":""}

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

@@ -1,10 +1,8 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * Internal dependencies
  */
 import ColorCell from '../mobile/bottom-sheet/color-cell';
-
 function ColorControl({
   label,
   onPress,
@@ -20,6 +18,5 @@ function ColorControl({
     ...props
   });
 }
-
 export default ColorControl;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorCell","ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,mCAAtB;;AAEA,SAASC,YAAT,CAAuB;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,OAFsB;AAGtBC,EAAAA,KAHsB;AAItBC,EAAAA,kBAJsB;AAKtB,KAAGC;AALmB,CAAvB,EAMI;AACH,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC,kBAJtB;AAAA,OAKMC;AALN,IADD;AASA;;AAED,eAAeL,YAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"]}
+{"version":3,"names":["ColorCell","ColorControl","label","onPress","color","withColorIndicator","props","createElement"],"sources":["@wordpress/components/src/color-control/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,mCAAmC;AAEzD,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,OACCC,aAAA,CAACP,SAAS;IACTE,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeL,YAAY"}

package/build-module/color-indicator/index.js

@@ -1,14 +1,13 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -28,6 +27,7 @@ function UnforwardedColorIndicator(props, forwardedRef) {
     ...additionalProps
   });
 }
+
 /**
  * ColorIndicator is a React component that renders a specific color in a
  * circle. It's often used to summarize a collection of used colors in a child
@@ -39,8 +39,6 @@ function UnforwardedColorIndicator(props, forwardedRef) {
  * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
  * ```
  */
-
-
 export const ColorIndicator = forwardRef(UnforwardedColorIndicator);
 export default ColorIndicator;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.tsx"],"names":["classnames","forwardRef","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","background","ColorIndicator"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AAIA,SAASC,yBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,MAAgDJ,KAAtD;AAEA,SACC;AACC,IAAA,SAAS,EAAGH,UAAU,CAAE,2BAAF,EAA+BK,SAA/B,CADvB;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd,KAFT;AAGC,IAAA,GAAG,EAAGF,YAHP;AAAA,OAIMG;AAJN,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,cAAc,GAAGR,UAAU,CAAEC,yBAAF,CAAjC;AAEP,eAAeO,cAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"]}
+{"version":3,"names":["classnames","forwardRef","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","createElement","style","background","ref","ColorIndicator"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AAGnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAIA,SAASC,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,OACCK,aAAA;IACCH,SAAS,EAAGL,UAAU,CAAE,2BAA2B,EAAEK,SAAU,CAAG;IAClEI,KAAK,EAAG;MAAEC,UAAU,EAAEJ;IAAW,CAAG;IACpCK,GAAG,EAAGP,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,cAAc,GAAGX,UAAU,CAAEC,yBAA0B,CAAC;AAErE,eAAeU,cAAc"}

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
@@ -7,17 +6,14 @@ import { View, Animated } from 'react-native';
 /**
  * WordPress dependencies
  */
-
 import { Icon, check } from '@wordpress/icons';
 import { Gradient } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-
 import styles from './style.scss';
 import { colorsUtils } from '../mobile/color-settings/utils';
-
 function SelectedIcon({
   opacity
 }) {
@@ -33,7 +29,6 @@ function SelectedIcon({
     size: 24
   }));
 }
-
 function ColorIndicator({
   color,
   isSelected,
@@ -45,7 +40,6 @@ function ColorIndicator({
     isGradient
   } = colorsUtils;
   const outlineStyle = usePreferredColorSchemeStyle(styles.outline, styles.outlineDark);
-
   if (isGradient(color)) {
     return createElement(Gradient, {
       style: [styles.circleOption, style],
@@ -68,7 +62,6 @@ function ColorIndicator({
       });
     }), isSelected && createElement(SelectedIcon, null));
   }
-
   return createElement(View, {
     style: [styles.circleOption, style, {
       backgroundColor: color
@@ -79,6 +72,5 @@ function ColorIndicator({
     opacity: opacity
   }));
 }
-
 export default ColorIndicator;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["View","Animated","Icon","check","Gradient","usePreferredColorSchemeStyle","styles","colorsUtils","SelectedIcon","opacity","selected","outline","selectedOutline","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,QAAf,QAA+B,cAA/B;AACA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AACA,SAASC,QAAT,QAAyB,uBAAzB;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,SAASC,YAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAAqC;AACpC,SACC,cAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEH,MAAM,CAACI,QAAT,EAAmB;AAAED,MAAAA;AAAF,KAAnB;AAAvB,KACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG,CAAEH,MAAM,CAACK,OAAT,EAAkBL,MAAM,CAACM,eAAzB;AAAd,IADD,EAEC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGT,KAAb;AAAqB,IAAA,KAAK,EAAGG,MAAM,CAACO,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,CAAyB;AACxBC,EAAAA,KADwB;AAExBC,EAAAA,UAFwB;AAGxBC,EAAAA,gBAHwB;AAIxBC,EAAAA,KAJwB;AAKxBT,EAAAA;AALwB,CAAzB,EAMI;AACH,QAAM;AAAEU,IAAAA;AAAF,MAAiBZ,WAAvB;AAEA,QAAMa,YAAY,GAAGf,4BAA4B,CAChDC,MAAM,CAACK,OADyC,EAEhDL,MAAM,CAACe,WAFyC,CAAjD;;AAKA,MAAKF,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,cAAC,QAAD;AACC,MAAA,KAAK,EAAG,CAAET,MAAM,CAACgB,YAAT,EAAuBJ,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,cAAC,IAAD;AAAM,MAAA,KAAK,EAAGK;AAAd,MAJD,EAKGJ,UAAU,IAAI,cAAC,YAAD;AAAc,MAAA,OAAO,EAAGP;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKQ,gBAAL,EAAwB;AAC9B,WACC,cAAC,IAAD;AAAM,MAAA,KAAK,EAAG,CAAEX,MAAM,CAACgB,YAAT,EAAuBJ,KAAvB;AAAd,OACC,cAAC,IAAD;AAAM,MAAA,KAAK,EAAGE;AAAd,MADD,EAEGL,KAAK,CAACQ,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,cAAC,QAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPlB,MAAM,CAACgB,YADA,EAEPhB,MAAM,CAACmB,QAFA,EAGPP,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGM;AAPP,QADD;AAWA,KAZC,CAFH,EAeGR,UAAU,IAAI,cAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAG,CAAEV,MAAM,CAACgB,YAAT,EAAuBJ,KAAvB,EAA8B;AAAEQ,MAAAA,eAAe,EAAEX;AAAnB,KAA9B;AADT,KAGC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGK;AAAd,IAHD,EAIGJ,UAAU,IAAI,cAAC,YAAD;AAAc,IAAA,OAAO,EAAGP;AAAxB,IAJjB,CADD;AAQA;;AACD,eAAeK,cAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Animated } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"]}
+{"version":3,"names":["View","Animated","Icon","check","Gradient","usePreferredColorSchemeStyle","styles","colorsUtils","SelectedIcon","opacity","createElement","style","selected","outline","selectedOutline","icon","size","ColorIndicator","color","isSelected","withCustomPicker","isGradient","outlineStyle","outlineDark","circleOption","gradientValue","map","absolute","key","backgroundColor"],"sources":["@wordpress/components/src/color-indicator/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Animated } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAC7C;AACA;AACA;AACA,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,WAAW,QAAQ,gCAAgC;AAE5D,SAASC,YAAYA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACpC,OACCC,aAAA,CAACT,QAAQ,CAACD,IAAI;IAACW,KAAK,EAAG,CAAEL,MAAM,CAACM,QAAQ,EAAE;MAAEH;IAAQ,CAAC;EAAI,GACxDC,aAAA,CAACV,IAAI;IAACW,KAAK,EAAG,CAAEL,MAAM,CAACO,OAAO,EAAEP,MAAM,CAACQ,eAAe;EAAI,CAAE,CAAC,EAC7DJ,aAAA,CAACR,IAAI;IAACa,IAAI,EAAGZ,KAAO;IAACQ,KAAK,EAAGL,MAAM,CAACS,IAAM;IAACC,IAAI,EAAG;EAAI,CAAE,CAC1C,CAAC;AAElB;AAEA,SAASC,cAAcA,CAAE;EACxBC,KAAK;EACLC,UAAU;EACVC,gBAAgB;EAChBT,KAAK;EACLF;AACD,CAAC,EAAG;EACH,MAAM;IAAEY;EAAW,CAAC,GAAGd,WAAW;EAElC,MAAMe,YAAY,GAAGjB,4BAA4B,CAChDC,MAAM,CAACO,OAAO,EACdP,MAAM,CAACiB,WACR,CAAC;EAED,IAAKF,UAAU,CAAEH,KAAM,CAAC,EAAG;IAC1B,OACCR,aAAA,CAACN,QAAQ;MACRO,KAAK,EAAG,CAAEL,MAAM,CAACkB,YAAY,EAAEb,KAAK,CAAI;MACxCc,aAAa,EAAGP;IAAO,GAEvBR,aAAA,CAACV,IAAI;MAACW,KAAK,EAAGW;IAAc,CAAE,CAAC,EAC7BH,UAAU,IAAIT,aAAA,CAACF,YAAY;MAACC,OAAO,EAAGA;IAAS,CAAE,CAC1C,CAAC;EAEb,CAAC,MAAM,IAAKW,gBAAgB,EAAG;IAC9B,OACCV,aAAA,CAACV,IAAI;MAACW,KAAK,EAAG,CAAEL,MAAM,CAACkB,YAAY,EAAEb,KAAK;IAAI,GAC7CD,aAAA,CAACV,IAAI;MAACW,KAAK,EAAGW;IAAc,CAAE,CAAC,EAC7BJ,KAAK,CAACQ,GAAG,CAAID,aAAa,IAAM;MACjC,OACCf,aAAA,CAACN,QAAQ;QACRqB,aAAa,EAAGA,aAAe;QAC/Bd,KAAK,EAAG,CACPL,MAAM,CAACkB,YAAY,EACnBlB,MAAM,CAACqB,QAAQ,EACfhB,KAAK,CACH;QACHiB,GAAG,EAAGH;MAAe,CACrB,CAAC;IAEJ,CAAE,CAAC,EACDN,UAAU,IAAIT,aAAA,CAACF,YAAY,MAAE,CAC1B,CAAC;EAET;EACA,OACCE,aAAA,CAACV,IAAI;IACJW,KAAK,EAAG,CAAEL,MAAM,CAACkB,YAAY,EAAEb,KAAK,EAAE;MAAEkB,eAAe,EAAEX;IAAM,CAAC;EAAI,GAEpER,aAAA,CAACV,IAAI;IAACW,KAAK,EAAGW;EAAc,CAAE,CAAC,EAC7BH,UAAU,IAAIT,aAAA,CAACF,YAAY;IAACC,OAAO,EAAGA;EAAS,CAAE,CAC9C,CAAC;AAET;AACA,eAAeQ,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/color-indicator/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\nexport type ColorIndicatorProps = {\n\t/**\n\t * The color of the indicator. Any value from the CSS `background` property\n\t * is supported.\n\t */\n\tcolorValue: CSSProperties[ 'background' ];\n};\n"],"mappings":""}

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

@@ -1,22 +1,22 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
+
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
@@ -26,7 +26,6 @@ import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
 import { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';
 extend([namesPlugin, a11yPlugin]);
-
 function SinglePalette({
   className,
   clearColor,
@@ -48,15 +47,18 @@ function SinglePalette({
         selectedIconProps: isSelected ? {
           fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         } : {},
-        tooltipText: name || // translators: %s: color hex code e.g: "#f00".
+        tooltipText: name ||
+        // translators: %s: color hex code e.g: "#f00".
         sprintf(__('Color code: %s'), color),
         style: {
           backgroundColor: color,
           color
         },
         onClick: isSelected ? clearColor : () => onChange(color, index),
-        "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
-        sprintf(__('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".
+        "aria-label": name ?
+        // translators: %s: The name of the color e.g: "vivid red".
+        sprintf(__('Color: %s'), name) :
+        // translators: %s: color hex code e.g: "#f00".
         sprintf(__('Color code: %s'), color)
       });
     });
@@ -67,7 +69,6 @@ function SinglePalette({
     actions: actions
   });
 }
-
 function MultiplePalettes({
   className,
   clearColor,
@@ -80,7 +81,6 @@ function MultiplePalettes({
   if (colors.length === 0) {
     return null;
   }
-
   return createElement(VStack, {
     spacing: 3,
     className: className
@@ -102,7 +102,6 @@ function MultiplePalettes({
     }));
   }));
 }
-
 export function CustomColorPickerDropdown({
   isRenderedInSidebar,
   popoverProps: receivedPopoverProps,
@@ -128,7 +127,6 @@ export function CustomColorPickerDropdown({
     ...props
   });
 }
-
 function UnforwardedColorPalette(props, forwardedRef) {
   const {
     clearable = true,
@@ -148,7 +146,6 @@ function UnforwardedColorPalette(props, forwardedRef) {
   }, [value]);
   const hasMultipleColorOrigins = isMultiplePaletteArray(colors);
   const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
-
   const renderCustomColorPicker = () => createElement(DropdownContentWrapper, {
     paddingSize: "none"
   }, createElement(ColorPicker, {
@@ -156,11 +153,12 @@ function UnforwardedColorPalette(props, forwardedRef) {
     onChange: color => onChange(color),
     enableAlpha: enableAlpha
   }));
+  const isHex = value?.startsWith('#');
 
-  const isHex = value?.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-
+  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
   const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
-  const customColorAccessibleLabel = !!displayValue ? sprintf( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+  const customColorAccessibleLabel = !!displayValue ? sprintf(
+  // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
   __('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : __('Custom color picker.');
   const paletteCommonProps = {
     clearable,
@@ -205,12 +203,15 @@ function UnforwardedColorPalette(props, forwardedRef) {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))
-  }), hasMultipleColorOrigins ? createElement(MultiplePalettes, { ...paletteCommonProps,
+  }), hasMultipleColorOrigins ? createElement(MultiplePalettes, {
+    ...paletteCommonProps,
     colors: colors
-  }) : createElement(SinglePalette, { ...paletteCommonProps,
+  }) : createElement(SinglePalette, {
+    ...paletteCommonProps,
     colors: colors
   }));
 }
+
 /**
  * Allows the user to pick a color from a list of pre-defined color entries.
  *
@@ -235,8 +236,6 @@ function UnforwardedColorPalette(props, forwardedRef) {
  * } );
  * ```
  */
-
-
 export const ColorPalette = forwardRef(UnforwardedColorPalette);
 export default ColorPalette;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\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, useState, forwardRef } 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 { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\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\tisSelected ? clearColor : () => onChange( color, index )\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\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\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\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 level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</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={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\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( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\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<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}
+{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","options","MultiplePalettes","headingLevel","length","spacing","colorPalette","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","ButtonAction","ref","renderContent","renderToggle","isOpen","onToggle","background","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\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, useState, forwardRef } 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 { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\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\tisSelected ? clearColor : () => onChange( color, index )\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\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\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\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 level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</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={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\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( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\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<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}

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

@@ -1,20 +1,19 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import { ScrollView, TouchableWithoutFeedback, View, Animated, Easing, Dimensions, Platform, Text } from 'react-native';
+
 /**
  * WordPress dependencies
  */
-
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
-
 import styles from './style.scss';
 import ColorIndicator from '../color-indicator';
 import { colorsUtils } from '../mobile/color-settings/utils';
@@ -22,7 +21,6 @@ const ANIMATION_DURATION = 200;
 let contentWidth = 0;
 let scrollPosition = 0;
 let customIndicatorWidth = 0;
-
 function ColorPalette({
   enableCustomColor = true,
   setColor,
@@ -40,7 +38,6 @@ function ColorPalette({
   label
 }) {
   var _defaultSettings$colo, _defaultSettings$allC, _defaultSettings$grad;
-
   const customSwatchGradients = ['linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)', 'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)'];
   const scrollViewRef = useRef();
   const isIOS = Platform.OS === 'ios';
@@ -61,9 +58,7 @@ function ColorPalette({
   const isCustomGradientColor = isGradientColor && isSelectedCustom();
   const shouldShowCustomIndicator = enableCustomColor && shouldShowCustomIndicatorOption && (!isGradientSegment || isCustomGradientColor);
   const accessibilityHint = isGradientSegment ? __('Navigates to customize the gradient') : __('Navigates to custom color picker');
-
   const customText = __('Custom');
-
   useEffect(() => {
     if (scrollViewRef.current) {
       if (isSelectedCustom()) {
@@ -74,30 +69,24 @@ function ColorPalette({
           y: 0
         });
       }
-    } // Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+    }
+    // Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
     // Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-
   }, [currentSegment]);
-
   function isSelectedCustom() {
     const isWithinColors = activeColor && mergedColors && mergedColors.includes(activeColor);
-
     if (enableCustomColor && activeColor) {
       if (isGradientSegment) {
         return isGradientColor && !isWithinColors;
       }
-
       return !isGradientColor && !isWithinColors;
     }
-
     return false;
   }
-
   function isSelected(color) {
     return !isSelectedCustom() && activeColor === color;
   }
-
   function timingAnimation(property, toValue) {
     return Animated.timing(property, {
       toValue,
@@ -106,29 +95,24 @@ function ColorPalette({
       useNativeDriver: true
     });
   }
-
   function performAnimation(color) {
     if (!isSelected(color)) {
       opacity.setValue(0);
     }
-
     Animated.parallel([timingAnimation(scale, 2), timingAnimation(opacity, 1)]).start(() => {
       opacity.setValue(1);
       scale.setValue(1);
     });
   }
-
   const scaleInterpolation = scale.interpolate({
     inputRange: [1, 1.5, 2],
     outputRange: [1, 0.7, 1]
   });
-
   function deselectCustomGradient() {
     const {
       width
     } = Dimensions.get('window');
     const isVisible = contentWidth - scrollPosition - customIndicatorWidth < width;
-
     if (isCustomGradientColor) {
       if (!isIOS) {
         // Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.
@@ -142,29 +126,23 @@ function ColorPalette({
       }
     }
   }
-
   function getColorGradientName(value) {
-    const fallbackName = sprintf(
-    /* translators: %s: the hex color value */
+    const fallbackName = sprintf( /* translators: %s: the hex color value */
     __('Unlabeled color. %s'), value);
     const foundColorName = isGradientSegment ? defaultSettings.gradients?.find(gradient => gradient.gradient === value) : defaultSettings.allColors?.find(color => color.color === value);
     return foundColorName ? foundColorName?.name : fallbackName;
   }
-
   function onColorPress(color) {
     deselectCustomGradient();
     performAnimation(color);
     setColor(color);
   }
-
   function onContentSizeChange(width) {
     contentWidth = width;
-
     if (isSelectedCustom() && scrollViewRef.current) {
       scrollToEndWithDelay();
     }
   }
-
   function scrollToEndWithDelay() {
     const delayedScroll = setTimeout(() => {
       scrollViewRef.current.scrollToEnd();
@@ -173,25 +151,21 @@ function ColorPalette({
       clearTimeout(delayedScroll);
     };
   }
-
   function onCustomIndicatorLayout({
     nativeEvent
   }) {
     const {
       width
     } = nativeEvent.layout;
-
     if (width !== customIndicatorWidth) {
       customIndicatorWidth = width;
     }
   }
-
   function onScroll({
     nativeEvent
   }) {
     scrollPosition = nativeEvent.contentOffset.x;
   }
-
   const verticalSeparatorStyle = usePreferredColorSchemeStyle(styles.verticalSeparator, styles.verticalSeparatorDark);
   const customTextStyle = usePreferredColorSchemeStyle([styles.customText, !isIOS && styles.customTextAndroid], styles.customTextDark);
   const customIndicatorWrapperStyle = [styles.customIndicatorWrapper, customIndicatorWrapperStyles];
@@ -260,6 +234,5 @@ function ColorPalette({
     style: customTextStyle
   }, isIOS ? customText : customText.toUpperCase()))))));
 }
-
 export default ColorPalette;
 //# sourceMappingURL=index.native.js.map