@wordpress/components 25.15.0 → 25.16.0

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

@@ -6,11 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.HslInput = void 0;
 var _react = require("react");
 var _colord = require("colord");
+var _element = require("@wordpress/element");
 var _inputWithSlider = require("./input-with-slider");
 /**
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
@@ -20,67 +25,84 @@ const HslInput = ({
   onChange,
   enableAlpha
 }) => {
-  const {
-    h,
-    s,
-    l,
-    a
-  } = color.toHsl();
+  const colorPropHSLA = (0, _element.useMemo)(() => color.toHsl(), [color]);
+  const [internalHSLA, setInternalHSLA] = (0, _element.useState)({
+    ...colorPropHSLA
+  });
+  const isInternalColorSameAsReceivedColor = color.isEqual((0, _colord.colord)(internalHSLA));
+  (0, _element.useEffect)(() => {
+    if (!isInternalColorSameAsReceivedColor) {
+      // Keep internal HSLA color up to date with the received color prop
+      setInternalHSLA(colorPropHSLA);
+    }
+  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
+
+  // If the internal color is equal to the received color prop, we can use the
+  // HSLA values from the local state which, compared to the received color prop,
+  // retain more details about the actual H and S values that the user selected,
+  // and thus allow for better UX when interacting with the H and S sliders.
+  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
+  const updateHSLAValue = partialNewValue => {
+    const nextOnChangeValue = (0, _colord.colord)({
+      ...colorValue,
+      ...partialNewValue
+    });
+
+    // Fire `onChange` only if the resulting color is different from the
+    // current one.
+    // Otherwise, update the internal HSLA color to cause a re-render.
+    if (!color.isEqual(nextOnChangeValue)) {
+      onChange(nextOnChangeValue);
+    } else {
+      setInternalHSLA(prevHSLA => ({
+        ...prevHSLA,
+        ...partialNewValue
+      }));
+    }
+  };
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
     min: 0,
     max: 359,
     label: "Hue",
     abbreviation: "H",
-    value: h,
+    value: colorValue.h,
     onChange: nextH => {
-      onChange((0, _colord.colord)({
-        h: nextH,
-        s,
-        l,
-        a
-      }));
+      updateHSLAValue({
+        h: nextH
+      });
     }
   }), (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
     min: 0,
     max: 100,
     label: "Saturation",
     abbreviation: "S",
-    value: s,
+    value: colorValue.s,
     onChange: nextS => {
-      onChange((0, _colord.colord)({
-        h,
-        s: nextS,
-        l,
-        a
-      }));
+      updateHSLAValue({
+        s: nextS
+      });
     }
   }), (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
     min: 0,
     max: 100,
     label: "Lightness",
     abbreviation: "L",
-    value: l,
+    value: colorValue.l,
     onChange: nextL => {
-      onChange((0, _colord.colord)({
-        h,
-        s,
-        l: nextL,
-        a
-      }));
+      updateHSLAValue({
+        l: nextL
+      });
     }
   }), enableAlpha && (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
     min: 0,
     max: 100,
     label: "Alpha",
     abbreviation: "A",
-    value: Math.trunc(100 * a),
+    value: Math.trunc(100 * colorValue.a),
     onChange: nextA => {
-      onChange((0, _colord.colord)({
-        h,
-        s,
-        l,
+      updateHSLAValue({
         a: nextA / 100
-      }));
+      });
     }
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_inputWithSlider","HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","_react","createElement","Fragment","InputWithSlider","min","max","label","abbreviation","value","nextH","colord","nextS","nextL","Math","trunc","nextA","exports"],"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tonChange( colord( { h: nextH, s, l, a } ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts: nextS,\n\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tl: nextL,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\t\ta: nextA / 100,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,gBAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAME,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAM;IAAEC,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEC;EAAE,CAAC,GAAGN,KAAK,CAACO,KAAK,CAAC,CAAC;EAEpC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,KAAK;IACXC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGb,CAAG;IACXF,QAAQ,EAAKgB,KAAa,IAAM;MAC/BhB,QAAQ,CAAE,IAAAiB,cAAM,EAAE;QAAEf,CAAC,EAAEc,KAAK;QAAEb,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAE,CAAE,CAAC;IAC5C;EAAG,CACH,CAAC,EACF,IAAAE,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,YAAY;IAClBC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGZ,CAAG;IACXH,QAAQ,EAAKkB,KAAa,IAAM;MAC/BlB,QAAQ,CACP,IAAAiB,cAAM,EAAE;QACPf,CAAC;QACDC,CAAC,EAAEe,KAAK;QACRd,CAAC;QACDC;MACD,CAAE,CACH,CAAC;IACF;EAAG,CACH,CAAC,EACF,IAAAE,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,WAAW;IACjBC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGX,CAAG;IACXJ,QAAQ,EAAKmB,KAAa,IAAM;MAC/BnB,QAAQ,CACP,IAAAiB,cAAM,EAAE;QACPf,CAAC;QACDC,CAAC;QACDC,CAAC,EAAEe,KAAK;QACRd;MACD,CAAE,CACH,CAAC;IACF;EAAG,CACH,CAAC,EACAJ,WAAW,IACZ,IAAAM,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,OAAO;IACbC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGK,IAAI,CAACC,KAAK,CAAE,GAAG,GAAGhB,CAAE,CAAG;IAC/BL,QAAQ,EAAKsB,KAAa,IAAM;MAC/BtB,QAAQ,CACP,IAAAiB,cAAM,EAAE;QACPf,CAAC;QACDC,CAAC;QACDC,CAAC;QACDC,CAAC,EAAEiB,KAAK,GAAG;MACZ,CAAE,CACH,CAAC;IACF;EAAG,CACH,CAED,CAAC;AAEL,CAAC;AAACC,OAAA,CAAAzB,QAAA,GAAAA,QAAA"}
+{"version":3,"names":["_colord","require","_element","_inputWithSlider","HslInput","color","onChange","enableAlpha","colorPropHSLA","useMemo","toHsl","internalHSLA","setInternalHSLA","useState","isInternalColorSameAsReceivedColor","isEqual","colord","useEffect","colorValue","updateHSLAValue","partialNewValue","nextOnChangeValue","prevHSLA","_react","createElement","Fragment","InputWithSlider","min","max","label","abbreviation","value","h","nextH","s","nextS","l","nextL","Math","trunc","a","nextA","exports"],"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );\n\n\tconst [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );\n\n\tconst isInternalColorSameAsReceivedColor = color.isEqual(\n\t\tcolord( internalHSLA )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( ! isInternalColorSameAsReceivedColor ) {\n\t\t\t// Keep internal HSLA color up to date with the received color prop\n\t\t\tsetInternalHSLA( colorPropHSLA );\n\t\t}\n\t}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );\n\n\t// If the internal color is equal to the received color prop, we can use the\n\t// HSLA values from the local state which, compared to the received color prop,\n\t// retain more details about the actual H and S values that the user selected,\n\t// and thus allow for better UX when interacting with the H and S sliders.\n\tconst colorValue = isInternalColorSameAsReceivedColor\n\t\t? internalHSLA\n\t\t: colorPropHSLA;\n\n\tconst updateHSLAValue = (\n\t\tpartialNewValue: Partial< typeof colorPropHSLA >\n\t) => {\n\t\tconst nextOnChangeValue = colord( {\n\t\t\t...colorValue,\n\t\t\t...partialNewValue,\n\t\t} );\n\n\t\t// Fire `onChange` only if the resulting color is different from the\n\t\t// current one.\n\t\t// Otherwise, update the internal HSLA color to cause a re-render.\n\t\tif ( ! color.isEqual( nextOnChangeValue ) ) {\n\t\t\tonChange( nextOnChangeValue );\n\t\t} else {\n\t\t\tsetInternalHSLA( ( prevHSLA ) => ( {\n\t\t\t\t...prevHSLA,\n\t\t\t\t...partialNewValue,\n\t\t\t} ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ colorValue.h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tupdateHSLAValue( { h: nextH } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ colorValue.s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tupdateHSLAValue( { s: nextS } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ colorValue.l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tupdateHSLAValue( { l: nextL } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * colorValue.a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tupdateHSLAValue( { a: nextA / 100 } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":"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"}

package/build/custom-select-control-v2/index.js

@@ -47,7 +47,7 @@ function CustomSelect({
   onChange,
   size = 'default',
   value,
-  renderSelectedValue = defaultRenderSelectedValue,
+  renderSelectedValue,
   ...props
 }) {
   const store = Ariakit.useSelectStore({
@@ -58,6 +58,7 @@ function CustomSelect({
   const {
     value: currentValue
   } = store.useState();
+  const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(Styled.CustomSelectLabel, {
     store: store
   }, label), (0, _react.createElement)(Styled.CustomSelectButton, {
@@ -65,7 +66,7 @@ function CustomSelect({
     size: size,
     hasCustomRenderProp: !!renderSelectedValue,
     store: store
-  }, renderSelectedValue(currentValue), (0, _react.createElement)(Ariakit.SelectArrow, null)), (0, _react.createElement)(Styled.CustomSelectPopover, {
+  }, computedRenderSelectedValue(currentValue), (0, _react.createElement)(Ariakit.SelectArrow, null)), (0, _react.createElement)(Styled.CustomSelectPopover, {
     gutter: 12,
     store: store,
     sameWidth: true

package/build/custom-select-control-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_element","_i18n","Styled","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CustomSelectContext","createContext","undefined","exports","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","__","sprintf","CustomSelect","children","defaultValue","label","onChange","size","renderSelectedValue","props","store","useSelectStore","setValue","nextValue","currentValue","useState","_react","createElement","Fragment","CustomSelectLabel","CustomSelectButton","hasCustomRenderProp","SelectArrow","CustomSelectPopover","gutter","sameWidth","Provider","CustomSelectItem","customSelectContext","useContext","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectProps,\n\tCustomSelectItemProps,\n\tCustomSelectContext as CustomSelectContextType,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nexport function CustomSelect( {\n\tchildren,\n\tdefaultValue,\n\tlabel,\n\tonChange,\n\tsize = 'default',\n\tvalue,\n\trenderSelectedValue = defaultRenderSelectedValue,\n\t...props\n}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\tconst { value: currentValue } = store.useState();\n\n\treturn (\n\t\t<>\n\t\t\t<Styled.CustomSelectLabel store={ store }>\n\t\t\t\t{ label }\n\t\t\t</Styled.CustomSelectLabel>\n\t\t\t<Styled.CustomSelectButton\n\t\t\t\t{ ...props }\n\t\t\t\tsize={ size }\n\t\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\t\tstore={ store }\n\t\t\t>\n\t\t\t\t{ renderSelectedValue( currentValue ) }\n\t\t\t\t<Ariakit.SelectArrow />\n\t\t\t</Styled.CustomSelectButton>\n\t\t\t<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.CustomSelectPopover>\n\t\t</>\n\t);\n}\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.CustomSelectItem\n\t\t\tstore={ customSelectContext?.store }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? props.value }\n\t\t\t<Ariakit.SelectItemCheck />\n\t\t</Styled.CustomSelectItem>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_element","_i18n","Styled","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CustomSelectContext","createContext","undefined","exports","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","__","sprintf","CustomSelect","children","defaultValue","label","onChange","size","renderSelectedValue","props","store","useSelectStore","setValue","nextValue","currentValue","useState","computedRenderSelectedValue","_react","createElement","Fragment","CustomSelectLabel","CustomSelectButton","hasCustomRenderProp","SelectArrow","CustomSelectPopover","gutter","sameWidth","Provider","CustomSelectItem","customSelectContext","useContext","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectProps,\n\tCustomSelectItemProps,\n\tCustomSelectContext as CustomSelectContextType,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nexport function CustomSelect( {\n\tchildren,\n\tdefaultValue,\n\tlabel,\n\tonChange,\n\tsize = 'default',\n\tvalue,\n\trenderSelectedValue,\n\t...props\n}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue =\n\t\trenderSelectedValue ?? defaultRenderSelectedValue;\n\n\treturn (\n\t\t<>\n\t\t\t<Styled.CustomSelectLabel store={ store }>\n\t\t\t\t{ label }\n\t\t\t</Styled.CustomSelectLabel>\n\t\t\t<Styled.CustomSelectButton\n\t\t\t\t{ ...props }\n\t\t\t\tsize={ size }\n\t\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\t\tstore={ store }\n\t\t\t>\n\t\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t\t\t<Ariakit.SelectArrow />\n\t\t\t</Styled.CustomSelectButton>\n\t\t\t<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.CustomSelectPopover>\n\t\t</>\n\t);\n}\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.CustomSelectItem\n\t\t\tstore={ customSelectContext?.store }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? props.value }\n\t\t\t<Ariakit.SelectItemCheck />\n\t\t</Styled.CustomSelectItem>\n\t);\n}\n"],"mappings":"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"}

package/build/mobile/color-settings/palette.screen.native.js

@@ -36,7 +36,6 @@ const HIT_SLOP = {
   left: 8,
   right: 8
 };
-const THEME_PALETTE_NAME = 'Theme';
 const PaletteScreen = () => {
   const route = (0, _native.useRoute)();
   const navigation = (0, _native.useNavigation)();
@@ -59,10 +58,13 @@ const PaletteScreen = () => {
   const [currentValue, setCurrentValue] = (0, _element.useState)(colorValue);
   const isGradientColor = isGradient(currentValue);
   const selectedSegmentIndex = isGradientColor ? 1 : 0;
-  const allAvailableColors = (0, _components.useMobileGlobalStylesColors)();
   const [currentSegment, setCurrentSegment] = (0, _element.useState)(segments[selectedSegmentIndex]);
   const isGradientSegment = currentSegment === _utils.colorsUtils.segments[1];
   const currentSegmentColors = !isGradientSegment ? defaultSettings.colors : defaultSettings.gradients;
+  const allAvailableColors = (0, _components.useMobileGlobalStylesColors)();
+  const allAvailableGradients = currentSegmentColors.flatMap(({
+    gradients
+  }) => gradients).filter(Boolean);
   const horizontalSeparatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.horizontalSeparator, _style.default.horizontalSeparatorDark);
   const clearButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.clearButton, _style.default.clearButtonDark);
   const selectedColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
@@ -147,9 +149,11 @@ const PaletteScreen = () => {
     const paletteSettings = {
       colors: palette.colors,
       gradients: palette.gradients,
-      allColors: allAvailableColors
+      allColors: allAvailableColors,
+      allGradients: allAvailableGradients
     };
-    const enableCustomColor = !isGradientSegment && palette.name === THEME_PALETTE_NAME;
+    // Limit to show the custom indicator to the first available palette
+    const enableCustomColor = paletteKey === 0;
     return (0, _react.createElement)(_colorPalette.default, {
       enableCustomColor: enableCustomColor,
       label: palette.name,

package/build/mobile/color-settings/palette.screen.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_i18n","_element","_compose","_components","_native","_colorPalette","_interopRequireDefault","_colorIndicator","_navBar","_segmentedControl","_utils","_style","HIT_SLOP","top","bottom","left","right","THEME_PALETTE_NAME","PaletteScreen","route","useRoute","navigation","useNavigation","shouldEnableBottomSheetScroll","useContext","BottomSheetContext","label","onColorChange","onGradientChange","onColorCleared","colorValue","defaultSettings","hideNavigation","params","segments","isGradient","colorsUtils","currentValue","setCurrentValue","useState","isGradientColor","selectedSegmentIndex","allAvailableColors","useMobileGlobalStylesColors","currentSegment","setCurrentSegment","isGradientSegment","currentSegmentColors","colors","gradients","horizontalSeparatorStyle","usePreferredColorSchemeStyle","styles","horizontalSeparator","horizontalSeparatorDark","clearButtonStyle","clearButton","clearButtonDark","selectedColorTextStyle","colorText","colorTextDark","isSolidSegment","isCustomGadientShown","setColor","color","onClear","undefined","onCustomPress","navigate","screens","picker","gradientPicker","getClearButton","_react","createElement","TouchableWithoutFeedback","onPress","hitSlop","View","style","clearButtonContainer","Text","__","getFooter","default","segmentHandler","selectedIndex","indexOf","addonLeft","colorIndicator","addonRight","footer","flex","maxFontSizeMultiplier","selectable","toUpperCase","selectColorText","BackButton","goBack","Heading","colorPalettes","map","palette","paletteKey","paletteSettings","allColors","enableCustomColor","name","key","activeColor","Fragment","PanelBody","ColorControl","withColorIndicator","_default","exports"],"sources":["@wordpress/components/src/mobile/color-settings/palette.screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useContext } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tColorControl,\n\tPanelBody,\n\tBottomSheetContext,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/**\n * Internal dependencies\n */\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport NavBar from '../bottom-sheet/nav-bar';\nimport SegmentedControls from '../segmented-control';\nimport { colorsUtils } from './utils';\n\nimport styles from './style.scss';\n\nconst HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };\nconst THEME_PALETTE_NAME = 'Theme';\n\nconst PaletteScreen = () => {\n\tconst route = useRoute();\n\tconst navigation = useNavigation();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\tconst {\n\t\tlabel,\n\t\tonColorChange,\n\t\tonGradientChange,\n\t\tonColorCleared,\n\t\tcolorValue,\n\t\tdefaultSettings,\n\t\thideNavigation = false,\n\t} = route.params || {};\n\tconst { segments, isGradient } = colorsUtils;\n\tconst [ currentValue, setCurrentValue ] = useState( colorValue );\n\tconst isGradientColor = isGradient( currentValue );\n\tconst selectedSegmentIndex = isGradientColor ? 1 : 0;\n\tconst allAvailableColors = useMobileGlobalStylesColors();\n\n\tconst [ currentSegment, setCurrentSegment ] = useState(\n\t\tsegments[ selectedSegmentIndex ]\n\t);\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\tconst currentSegmentColors = ! isGradientSegment\n\t\t? defaultSettings.colors\n\t\t: defaultSettings.gradients;\n\n\tconst horizontalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.horizontalSeparator,\n\t\tstyles.horizontalSeparatorDark\n\t);\n\tconst clearButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.clearButton,\n\t\tstyles.clearButtonDark\n\t);\n\tconst selectedColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\n\tconst isSolidSegment = currentSegment === segments[ 0 ];\n\tconst isCustomGadientShown = ! isSolidSegment && isGradientColor;\n\n\tconst setColor = ( color ) => {\n\t\tsetCurrentValue( color );\n\t\tif ( isSolidSegment && onColorChange && onGradientChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( isSolidSegment && onColorChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( ! isSolidSegment && onGradientChange ) {\n\t\t\tonGradientChange( color );\n\t\t}\n\t};\n\n\tfunction onClear() {\n\t\tsetCurrentValue( undefined );\n\n\t\tif ( onColorCleared ) {\n\t\t\tonColorCleared();\n\t\t}\n\t}\n\n\tfunction onCustomPress() {\n\t\tif ( isSolidSegment ) {\n\t\t\tnavigation.navigate( colorsUtils.screens.picker, {\n\t\t\t\tcurrentValue,\n\t\t\t\tsetColor,\n\t\t\t} );\n\t\t} else {\n\t\t\tnavigation.navigate( colorsUtils.screens.gradientPicker, {\n\t\t\t\tsetColor,\n\t\t\t\tisGradientColor,\n\t\t\t\tcurrentValue,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfunction getClearButton() {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>\n\t\t\t\t<View style={ styles.clearButtonContainer }>\n\t\t\t\t\t<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t}\n\n\tfunction getFooter() {\n\t\tif ( onGradientChange ) {\n\t\t\treturn (\n\t\t\t\t<SegmentedControls\n\t\t\t\t\tsegments={ segments }\n\t\t\t\t\tsegmentHandler={ setCurrentSegment }\n\t\t\t\t\tselectedIndex={ segments.indexOf( currentSegment ) }\n\t\t\t\t\taddonLeft={\n\t\t\t\t\t\tcurrentValue && (\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\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\taddonRight={ currentValue && getClearButton() }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.footer }>\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t\t{ currentValue ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ selectedColorTextStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t\tselectable\n\t\t\t\t\t>\n\t\t\t\t\t\t{ currentValue.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ styles.selectColorText }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Select a color above' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && getClearButton() }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View>\n\t\t\t{ ! hideNavigation && (\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.BackButton onPress={ navigation.goBack } />\n\t\t\t\t\t<NavBar.Heading>{ label } </NavBar.Heading>\n\t\t\t\t</NavBar>\n\t\t\t) }\n\n\t\t\t<View style={ styles.colorPalettes }>\n\t\t\t\t{ currentSegmentColors.map( ( palette, paletteKey ) => {\n\t\t\t\t\tconst paletteSettings = {\n\t\t\t\t\t\tcolors: palette.colors,\n\t\t\t\t\t\tgradients: palette.gradients,\n\t\t\t\t\t\tallColors: allAvailableColors,\n\t\t\t\t\t};\n\t\t\t\t\tconst enableCustomColor =\n\t\t\t\t\t\t! isGradientSegment &&\n\t\t\t\t\t\tpalette.name === THEME_PALETTE_NAME;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tenableCustomColor={ enableCustomColor }\n\t\t\t\t\t\t\tlabel={ palette.name }\n\t\t\t\t\t\t\tkey={ paletteKey }\n\t\t\t\t\t\t\tsetColor={ setColor }\n\t\t\t\t\t\t\tactiveColor={ currentValue }\n\t\t\t\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t\t\t\t\tcurrentSegment={ currentSegment }\n\t\t\t\t\t\t\tonCustomPress={ onCustomPress }\n\t\t\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdefaultSettings={ paletteSettings }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</View>\n\n\t\t\t{ isCustomGadientShown && (\n\t\t\t\t<>\n\t\t\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t<ColorControl\n\t\t\t\t\t\t\tlabel={ __( 'Customize Gradient' ) }\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\twithColorIndicator={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t{ getFooter() }\n\t\t</View>\n\t);\n};\n\nexport default PaletteScreen;\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_i18n","_element","_compose","_components","_native","_colorPalette","_interopRequireDefault","_colorIndicator","_navBar","_segmentedControl","_utils","_style","HIT_SLOP","top","bottom","left","right","PaletteScreen","route","useRoute","navigation","useNavigation","shouldEnableBottomSheetScroll","useContext","BottomSheetContext","label","onColorChange","onGradientChange","onColorCleared","colorValue","defaultSettings","hideNavigation","params","segments","isGradient","colorsUtils","currentValue","setCurrentValue","useState","isGradientColor","selectedSegmentIndex","currentSegment","setCurrentSegment","isGradientSegment","currentSegmentColors","colors","gradients","allAvailableColors","useMobileGlobalStylesColors","allAvailableGradients","flatMap","filter","Boolean","horizontalSeparatorStyle","usePreferredColorSchemeStyle","styles","horizontalSeparator","horizontalSeparatorDark","clearButtonStyle","clearButton","clearButtonDark","selectedColorTextStyle","colorText","colorTextDark","isSolidSegment","isCustomGadientShown","setColor","color","onClear","undefined","onCustomPress","navigate","screens","picker","gradientPicker","getClearButton","_react","createElement","TouchableWithoutFeedback","onPress","hitSlop","View","style","clearButtonContainer","Text","__","getFooter","default","segmentHandler","selectedIndex","indexOf","addonLeft","colorIndicator","addonRight","footer","flex","maxFontSizeMultiplier","selectable","toUpperCase","selectColorText","BackButton","goBack","Heading","colorPalettes","map","palette","paletteKey","paletteSettings","allColors","allGradients","enableCustomColor","name","key","activeColor","Fragment","PanelBody","ColorControl","withColorIndicator","_default","exports"],"sources":["@wordpress/components/src/mobile/color-settings/palette.screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useContext } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tColorControl,\n\tPanelBody,\n\tBottomSheetContext,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/**\n * Internal dependencies\n */\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport NavBar from '../bottom-sheet/nav-bar';\nimport SegmentedControls from '../segmented-control';\nimport { colorsUtils } from './utils';\n\nimport styles from './style.scss';\n\nconst HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };\n\nconst PaletteScreen = () => {\n\tconst route = useRoute();\n\tconst navigation = useNavigation();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\tconst {\n\t\tlabel,\n\t\tonColorChange,\n\t\tonGradientChange,\n\t\tonColorCleared,\n\t\tcolorValue,\n\t\tdefaultSettings,\n\t\thideNavigation = false,\n\t} = route.params || {};\n\tconst { segments, isGradient } = colorsUtils;\n\tconst [ currentValue, setCurrentValue ] = useState( colorValue );\n\tconst isGradientColor = isGradient( currentValue );\n\tconst selectedSegmentIndex = isGradientColor ? 1 : 0;\n\n\tconst [ currentSegment, setCurrentSegment ] = useState(\n\t\tsegments[ selectedSegmentIndex ]\n\t);\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\tconst currentSegmentColors = ! isGradientSegment\n\t\t? defaultSettings.colors\n\t\t: defaultSettings.gradients;\n\tconst allAvailableColors = useMobileGlobalStylesColors();\n\tconst allAvailableGradients = currentSegmentColors\n\t\t.flatMap( ( { gradients } ) => gradients )\n\t\t.filter( Boolean );\n\n\tconst horizontalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.horizontalSeparator,\n\t\tstyles.horizontalSeparatorDark\n\t);\n\tconst clearButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.clearButton,\n\t\tstyles.clearButtonDark\n\t);\n\tconst selectedColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\n\tconst isSolidSegment = currentSegment === segments[ 0 ];\n\tconst isCustomGadientShown = ! isSolidSegment && isGradientColor;\n\n\tconst setColor = ( color ) => {\n\t\tsetCurrentValue( color );\n\t\tif ( isSolidSegment && onColorChange && onGradientChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( isSolidSegment && onColorChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( ! isSolidSegment && onGradientChange ) {\n\t\t\tonGradientChange( color );\n\t\t}\n\t};\n\n\tfunction onClear() {\n\t\tsetCurrentValue( undefined );\n\n\t\tif ( onColorCleared ) {\n\t\t\tonColorCleared();\n\t\t}\n\t}\n\n\tfunction onCustomPress() {\n\t\tif ( isSolidSegment ) {\n\t\t\tnavigation.navigate( colorsUtils.screens.picker, {\n\t\t\t\tcurrentValue,\n\t\t\t\tsetColor,\n\t\t\t} );\n\t\t} else {\n\t\t\tnavigation.navigate( colorsUtils.screens.gradientPicker, {\n\t\t\t\tsetColor,\n\t\t\t\tisGradientColor,\n\t\t\t\tcurrentValue,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfunction getClearButton() {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>\n\t\t\t\t<View style={ styles.clearButtonContainer }>\n\t\t\t\t\t<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t}\n\n\tfunction getFooter() {\n\t\tif ( onGradientChange ) {\n\t\t\treturn (\n\t\t\t\t<SegmentedControls\n\t\t\t\t\tsegments={ segments }\n\t\t\t\t\tsegmentHandler={ setCurrentSegment }\n\t\t\t\t\tselectedIndex={ segments.indexOf( currentSegment ) }\n\t\t\t\t\taddonLeft={\n\t\t\t\t\t\tcurrentValue && (\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\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\taddonRight={ currentValue && getClearButton() }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.footer }>\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t\t{ currentValue ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ selectedColorTextStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t\tselectable\n\t\t\t\t\t>\n\t\t\t\t\t\t{ currentValue.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ styles.selectColorText }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Select a color above' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && getClearButton() }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View>\n\t\t\t{ ! hideNavigation && (\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.BackButton onPress={ navigation.goBack } />\n\t\t\t\t\t<NavBar.Heading>{ label } </NavBar.Heading>\n\t\t\t\t</NavBar>\n\t\t\t) }\n\n\t\t\t<View style={ styles.colorPalettes }>\n\t\t\t\t{ currentSegmentColors.map( ( palette, paletteKey ) => {\n\t\t\t\t\tconst paletteSettings = {\n\t\t\t\t\t\tcolors: palette.colors,\n\t\t\t\t\t\tgradients: palette.gradients,\n\t\t\t\t\t\tallColors: allAvailableColors,\n\t\t\t\t\t\tallGradients: allAvailableGradients,\n\t\t\t\t\t};\n\t\t\t\t\t// Limit to show the custom indicator to the first available palette\n\t\t\t\t\tconst enableCustomColor = paletteKey === 0;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tenableCustomColor={ enableCustomColor }\n\t\t\t\t\t\t\tlabel={ palette.name }\n\t\t\t\t\t\t\tkey={ paletteKey }\n\t\t\t\t\t\t\tsetColor={ setColor }\n\t\t\t\t\t\t\tactiveColor={ currentValue }\n\t\t\t\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t\t\t\t\tcurrentSegment={ currentSegment }\n\t\t\t\t\t\t\tonCustomPress={ onCustomPress }\n\t\t\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdefaultSettings={ paletteSettings }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</View>\n\n\t\t\t{ isCustomGadientShown && (\n\t\t\t\t<>\n\t\t\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t<ColorControl\n\t\t\t\t\t\t\tlabel={ __( 'Customize Gradient' ) }\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\twithColorIndicator={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t{ getFooter() }\n\t\t</View>\n\t);\n};\n\nexport default PaletteScreen;\n"],"mappings":"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"}

package/build/slot-fill/bubbles-virtually/use-slot-fills.js

@@ -27,7 +27,7 @@ function useSlotFills(name) {
   });
   // The important bit here is that this call ensures that the hook
   // only causes a re-render if the "fills" of a given slot name
-  // change change, not any fills.
+  // change, not any fills.
   return fills.get(name);
 }
 //# sourceMappingURL=use-slot-fills.js.map

package/build/slot-fill/bubbles-virtually/use-slot-fills.js.map

@@ -1 +1 @@
-{"version":3,"names":["_valtio","require","_element","_slotFillContext","_interopRequireDefault","useSlotFills","name","registry","useContext","SlotFillContext","fills","useSnapshot","sync","get"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\nimport type { SlotKey } from '../types';\n\nexport default function useSlotFills( name: SlotKey ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst fills = useSnapshot( registry.fills, { sync: true } );\n\t// The important bit here is that this call ensures that the hook\n\t// only causes a re-render if the \"fills\" of a given slot name\n\t// change change, not any fills.\n\treturn fills.get( name );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIe,SAASI,YAAYA,CAAEC,IAAa,EAAG;EACrD,MAAMC,QAAQ,GAAG,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAC9C,MAAMC,KAAK,GAAG,IAAAC,mBAAW,EAAEJ,QAAQ,CAACG,KAAK,EAAE;IAAEE,IAAI,EAAE;EAAK,CAAE,CAAC;EAC3D;EACA;EACA;EACA,OAAOF,KAAK,CAACG,GAAG,CAAEP,IAAK,CAAC;AACzB"}
+{"version":3,"names":["_valtio","require","_element","_slotFillContext","_interopRequireDefault","useSlotFills","name","registry","useContext","SlotFillContext","fills","useSnapshot","sync","get"],"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\nimport type { SlotKey } from '../types';\n\nexport default function useSlotFills( name: SlotKey ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst fills = useSnapshot( registry.fills, { sync: true } );\n\t// The important bit here is that this call ensures that the hook\n\t// only causes a re-render if the \"fills\" of a given slot name\n\t// change, not any fills.\n\treturn fills.get( name );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIe,SAASI,YAAYA,CAAEC,IAAa,EAAG;EACrD,MAAMC,QAAQ,GAAG,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAC9C,MAAMC,KAAK,GAAG,IAAAC,mBAAW,EAAEJ,QAAQ,CAACG,KAAK,EAAE;IAAEE,IAAI,EAAE;EAAK,CAAE,CAAC;EAC3D;EACA;EACA;EACA,OAAOF,KAAK,CAACG,GAAG,CAAEP,IAAK,CAAC;AACzB"}

package/build/theme/styles.js

@@ -7,15 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.colorVariables = exports.Wrapper = void 0;
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("@emotion/react");
-/**
- * External dependencies
- */
-
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const colorVariables = ({
   colors
 }) => {
   const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-${k}: ${v};`).join('');
-  return [/*#__PURE__*/(0, _react.css)("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:colorVariables;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCSyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RoZW1lL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBUaGVtZU91dHB1dFZhbHVlcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgY29sb3JWYXJpYWJsZXMgPSAoIHsgY29sb3JzIH06IFRoZW1lT3V0cHV0VmFsdWVzICkgPT4ge1xuXHRjb25zdCBzaGFkZXMgPSBPYmplY3QuZW50cmllcyggY29sb3JzLmdyYXkgfHwge30gKVxuXHRcdC5tYXAoICggWyBrLCB2IF0gKSA9PiBgLS13cC1jb21wb25lbnRzLWNvbG9yLWdyYXktJHsgayB9OiAkeyB2IH07YCApXG5cdFx0LmpvaW4oICcnICk7XG5cblx0cmV0dXJuIFtcblx0XHRjc3NgXG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50OiAkeyBjb2xvcnMuYWNjZW50IH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0xMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjEwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0yMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjIwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWludmVydGVkOiAkeyBjb2xvcnMuYWNjZW50SW52ZXJ0ZWQgfTtcblxuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWJhY2tncm91bmQ6ICR7IGNvbG9ycy5iYWNrZ3JvdW5kIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZDogJHsgY29sb3JzLmZvcmVncm91bmQgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1mb3JlZ3JvdW5kLWludmVydGVkOiAkeyBjb2xvcnMuZm9yZWdyb3VuZEludmVydGVkIH07XG5cblx0XHRcdCR7IHNoYWRlcyB9XG5cdFx0YCxcblx0XTtcbn07XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBgO1xuIl19 */")];
+  return [/*#__PURE__*/(0, _react.css)("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:colorVariables;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCSyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RoZW1lL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBUaGVtZU91dHB1dFZhbHVlcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgY29sb3JWYXJpYWJsZXMgPSAoIHsgY29sb3JzIH06IFRoZW1lT3V0cHV0VmFsdWVzICkgPT4ge1xuXHRjb25zdCBzaGFkZXMgPSBPYmplY3QuZW50cmllcyggY29sb3JzLmdyYXkgfHwge30gKVxuXHRcdC5tYXAoICggWyBrLCB2IF0gKSA9PiBgLS13cC1jb21wb25lbnRzLWNvbG9yLWdyYXktJHsgayB9OiAkeyB2IH07YCApXG5cdFx0LmpvaW4oICcnICk7XG5cblx0cmV0dXJuIFtcblx0XHRjc3NgXG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50OiAkeyBjb2xvcnMuYWNjZW50IH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0xMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjEwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0yMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjIwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWludmVydGVkOiAkeyBjb2xvcnMuYWNjZW50SW52ZXJ0ZWQgfTtcblxuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWJhY2tncm91bmQ6ICR7IGNvbG9ycy5iYWNrZ3JvdW5kIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZDogJHsgY29sb3JzLmZvcmVncm91bmQgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1mb3JlZ3JvdW5kLWludmVydGVkOiAkeyBjb2xvcnMuZm9yZWdyb3VuZEludmVydGVkIH07XG5cblx0XHRcdCR7IHNoYWRlcyB9XG5cdFx0YCxcblx0XTtcbn07XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Y29sb3I6IHZhciggLS13cC1jb21wb25lbnRzLWNvbG9yLWZvcmVncm91bmQsIGN1cnJlbnRDb2xvciApO1xuYDtcbiJdfQ== */")];
 };
 exports.colorVariables = colorVariables;
 const Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
@@ -23,6 +20,14 @@ const Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production"
 } : {
   target: "e1krjpvb0",
   label: "Wrapper"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90aGVtZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgVGhlbWVPdXRwdXRWYWx1ZXMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGNvbG9yVmFyaWFibGVzID0gKCB7IGNvbG9ycyB9OiBUaGVtZU91dHB1dFZhbHVlcyApID0+IHtcblx0Y29uc3Qgc2hhZGVzID0gT2JqZWN0LmVudHJpZXMoIGNvbG9ycy5ncmF5IHx8IHt9IClcblx0XHQubWFwKCAoIFsgaywgdiBdICkgPT4gYC0td3AtY29tcG9uZW50cy1jb2xvci1ncmF5LSR7IGsgfTogJHsgdiB9O2AgKVxuXHRcdC5qb2luKCAnJyApO1xuXG5cdHJldHVybiBbXG5cdFx0Y3NzYFxuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudDogJHsgY29sb3JzLmFjY2VudCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1kYXJrZXItMTA6ICR7IGNvbG9ycy5hY2NlbnREYXJrZXIxMCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1kYXJrZXItMjA6ICR7IGNvbG9ycy5hY2NlbnREYXJrZXIyMCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1pbnZlcnRlZDogJHsgY29sb3JzLmFjY2VudEludmVydGVkIH07XG5cblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1iYWNrZ3JvdW5kOiAkeyBjb2xvcnMuYmFja2dyb3VuZCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWZvcmVncm91bmQ6ICR7IGNvbG9ycy5mb3JlZ3JvdW5kIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZC1pbnZlcnRlZDogJHsgY29sb3JzLmZvcmVncm91bmRJbnZlcnRlZCB9O1xuXG5cdFx0XHQkeyBzaGFkZXMgfVxuXHRcdGAsXG5cdF07XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgYDtcbiJdfQ== */");
+})(process.env.NODE_ENV === "production" ? {
+  name: "1a3idx0",
+  styles: "color:var( --wp-components-color-foreground, currentColor )"
+} : {
+  name: "1a3idx0",
+  styles: "color:var( --wp-components-color-foreground, currentColor )",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90aGVtZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgVGhlbWVPdXRwdXRWYWx1ZXMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGNvbG9yVmFyaWFibGVzID0gKCB7IGNvbG9ycyB9OiBUaGVtZU91dHB1dFZhbHVlcyApID0+IHtcblx0Y29uc3Qgc2hhZGVzID0gT2JqZWN0LmVudHJpZXMoIGNvbG9ycy5ncmF5IHx8IHt9IClcblx0XHQubWFwKCAoIFsgaywgdiBdICkgPT4gYC0td3AtY29tcG9uZW50cy1jb2xvci1ncmF5LSR7IGsgfTogJHsgdiB9O2AgKVxuXHRcdC5qb2luKCAnJyApO1xuXG5cdHJldHVybiBbXG5cdFx0Y3NzYFxuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudDogJHsgY29sb3JzLmFjY2VudCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1kYXJrZXItMTA6ICR7IGNvbG9ycy5hY2NlbnREYXJrZXIxMCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1kYXJrZXItMjA6ICR7IGNvbG9ycy5hY2NlbnREYXJrZXIyMCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1pbnZlcnRlZDogJHsgY29sb3JzLmFjY2VudEludmVydGVkIH07XG5cblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1iYWNrZ3JvdW5kOiAkeyBjb2xvcnMuYmFja2dyb3VuZCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWZvcmVncm91bmQ6ICR7IGNvbG9ycy5mb3JlZ3JvdW5kIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZC1pbnZlcnRlZDogJHsgY29sb3JzLmZvcmVncm91bmRJbnZlcnRlZCB9O1xuXG5cdFx0XHQkeyBzaGFkZXMgfVxuXHRcdGAsXG5cdF07XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGNvbG9yOiB2YXIoIC0td3AtY29tcG9uZW50cy1jb2xvci1mb3JlZ3JvdW5kLCBjdXJyZW50Q29sb3IgKTtcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=styles.js.map

package/build/theme/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","colorVariables","colors","shades","Object","entries","gray","map","k","v","join","css","accent","accentDarker10","accentDarker20","accentInverted","background","foreground","foregroundInverted","process","env","NODE_ENV","exports","Wrapper","_base","default","target","label"],"sources":["@wordpress/components/src/theme/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeOutputValues } from './types';\n\nexport const colorVariables = ( { colors }: ThemeOutputValues ) => {\n\tconst shades = Object.entries( colors.gray || {} )\n\t\t.map( ( [ k, v ] ) => `--wp-components-color-gray-${ k }: ${ v };` )\n\t\t.join( '' );\n\n\treturn [\n\t\tcss`\n\t\t\t--wp-components-color-accent: ${ colors.accent };\n\t\t\t--wp-components-color-accent-darker-10: ${ colors.accentDarker10 };\n\t\t\t--wp-components-color-accent-darker-20: ${ colors.accentDarker20 };\n\t\t\t--wp-components-color-accent-inverted: ${ colors.accentInverted };\n\n\t\t\t--wp-components-color-background: ${ colors.background };\n\t\t\t--wp-components-color-foreground: ${ colors.foreground };\n\t\t\t--wp-components-color-foreground-inverted: ${ colors.foregroundInverted };\n\n\t\t\t${ shades }\n\t\t`,\n\t];\n};\n\nexport const Wrapper = styled.div``;\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAJA;AACA;AACA;;AASO,MAAMC,cAAc,GAAGA,CAAE;EAAEC;AAA0B,CAAC,KAAM;EAClE,MAAMC,MAAM,GAAGC,MAAM,CAACC,OAAO,CAAEH,MAAM,CAACI,IAAI,IAAI,CAAC,CAAE,CAAC,CAChDC,GAAG,CAAE,CAAE,CAAEC,CAAC,EAAEC,CAAC,CAAE,KAAO,8BAA8BD,CAAG,KAAKC,CAAG,GAAG,CAAC,CACnEC,IAAI,CAAE,EAAG,CAAC;EAEZ,OAAO,kBACNC,UAAG,mCAC+BT,MAAM,CAACU,MAAM,8CACHV,MAAM,CAACW,cAAc,8CACrBX,MAAM,CAACY,cAAc,6CACtBZ,MAAM,CAACa,cAAc,wCAE1Bb,MAAM,CAACc,UAAU,wCACjBd,MAAM,CAACe,UAAU,iDACRf,MAAM,CAACgB,kBAAkB,OAEpEf,MAAM,SAAAgB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,opDAEV;AACF,CAAC;AAACC,OAAA,CAAArB,cAAA,GAAAA,cAAA;AAEK,MAAMsB,OAAO,OAAAC,KAAA,CAAAC,OAAA,SAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAK,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,upDAAe;AAACC,OAAA,CAAAC,OAAA,GAAAA,OAAA"}
+{"version":3,"names":["_react","require","_EMOTION_STRINGIFIED_CSS_ERROR__","colorVariables","colors","shades","Object","entries","gray","map","k","v","join","css","accent","accentDarker10","accentDarker20","accentInverted","background","foreground","foregroundInverted","process","env","NODE_ENV","exports","Wrapper","_base","default","target","label","name","styles","toString"],"sources":["@wordpress/components/src/theme/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeOutputValues } from './types';\n\nexport const colorVariables = ( { colors }: ThemeOutputValues ) => {\n\tconst shades = Object.entries( colors.gray || {} )\n\t\t.map( ( [ k, v ] ) => `--wp-components-color-gray-${ k }: ${ v };` )\n\t\t.join( '' );\n\n\treturn [\n\t\tcss`\n\t\t\t--wp-components-color-accent: ${ colors.accent };\n\t\t\t--wp-components-color-accent-darker-10: ${ colors.accentDarker10 };\n\t\t\t--wp-components-color-accent-darker-20: ${ colors.accentDarker20 };\n\t\t\t--wp-components-color-accent-inverted: ${ colors.accentInverted };\n\n\t\t\t--wp-components-color-background: ${ colors.background };\n\t\t\t--wp-components-color-foreground: ${ colors.foreground };\n\t\t\t--wp-components-color-foreground-inverted: ${ colors.foregroundInverted };\n\n\t\t\t${ shades }\n\t\t`,\n\t];\n};\n\nexport const Wrapper = styled.div`\n\tcolor: var( --wp-components-color-foreground, currentColor );\n`;\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,SAAAC,iCAAA;AAO9B,MAAMC,cAAc,GAAGA,CAAE;EAAEC;AAA0B,CAAC,KAAM;EAClE,MAAMC,MAAM,GAAGC,MAAM,CAACC,OAAO,CAAEH,MAAM,CAACI,IAAI,IAAI,CAAC,CAAE,CAAC,CAChDC,GAAG,CAAE,CAAE,CAAEC,CAAC,EAAEC,CAAC,CAAE,KAAO,8BAA8BD,CAAG,KAAKC,CAAG,GAAG,CAAC,CACnEC,IAAI,CAAE,EAAG,CAAC;EAEZ,OAAO,kBACNC,UAAG,mCAC+BT,MAAM,CAACU,MAAM,8CACHV,MAAM,CAACW,cAAc,8CACrBX,MAAM,CAACY,cAAc,6CACtBZ,MAAM,CAACa,cAAc,wCAE1Bb,MAAM,CAACc,UAAU,wCACjBd,MAAM,CAACe,UAAU,iDACRf,MAAM,CAACgB,kBAAkB,OAEpEf,MAAM,SAAAgB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,gvDAEV;AACF,CAAC;AAACC,OAAA,CAAArB,cAAA,GAAAA,cAAA;AAEK,MAAMsB,OAAO,OAAAC,KAAA,CAAAC,OAAA,SAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAK,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAO,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAtB,GAAA;EAAAuB,QAAA,EAAA9B;AAAA,EAEnB;AAACsB,OAAA,CAAAC,OAAA,GAAAA,OAAA"}

package/build/toggle-group-control/toggle-group-control/utils.js

@@ -18,12 +18,18 @@ var _element = require("@wordpress/element");
  * @param valueProp The received `value`
  */
 function useComputeControlledOrUncontrolledValue(valueProp) {
+  const isInitialRender = (0, _element.useRef)(true);
   const prevValueProp = (0, _compose.usePrevious)(valueProp);
   const prevIsControlled = (0, _element.useRef)(false);
+  (0, _element.useEffect)(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+    }
+  }, []);
 
   // Assume the component is being used in controlled mode on the first re-render
   // that has a different `valueProp` from the previous render.
-  const isControlled = prevIsControlled.current || prevValueProp !== undefined && valueProp !== undefined && prevValueProp !== valueProp;
+  const isControlled = prevIsControlled.current || !isInitialRender.current && prevValueProp !== valueProp;
   (0, _element.useEffect)(() => {
     prevIsControlled.current = isControlled;
   }, [isControlled]);

package/build/toggle-group-control/toggle-group-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","useComputeControlledOrUncontrolledValue","valueProp","prevValueProp","usePrevious","prevIsControlled","useRef","isControlled","current","undefined","useEffect","value","defaultValue"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst prevValueProp = usePrevious( valueProp );\n\tconst prevIsControlled = useRef( false );\n\n\t// Assume the component is being used in controlled mode on the first re-render\n\t// that has a different `valueProp` from the previous render.\n\tconst isControlled =\n\t\tprevIsControlled.current ||\n\t\t( prevValueProp !== undefined &&\n\t\t\tvalueProp !== undefined &&\n\t\t\tprevValueProp !== valueProp );\n\tuseEffect( () => {\n\t\tprevIsControlled.current = isControlled;\n\t}, [ isControlled ] );\n\n\tif ( isControlled ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\treturn { value: valueProp ?? '', defaultValue: undefined };\n\t}\n\n\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\treturn { value: undefined, defaultValue: valueProp };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC,aAAa,GAAG,IAAAC,oBAAW,EAAEF,SAAU,CAAC;EAC9C,MAAMG,gBAAgB,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;;EAExC;EACA;EACA,MAAMC,YAAY,GACjBF,gBAAgB,CAACG,OAAO,IACtBL,aAAa,KAAKM,SAAS,IAC5BP,SAAS,KAAKO,SAAS,IACvBN,aAAa,KAAKD,SAAW;EAC/B,IAAAQ,kBAAS,EAAE,MAAM;IAChBL,gBAAgB,CAACG,OAAO,GAAGD,YAAY;EACxC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,IAAKA,YAAY,EAAG;IACnB;IACA,OAAO;MAAEI,KAAK,EAAET,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;MAAEU,YAAY,EAAEH;IAAU,CAAC;EAC3D;;EAEA;EACA,OAAO;IAAEE,KAAK,EAAEF,SAAS;IAAEG,YAAY,EAAEV;EAAU,CAAC;AACrD"}
+{"version":3,"names":["_compose","require","_element","useComputeControlledOrUncontrolledValue","valueProp","isInitialRender","useRef","prevValueProp","usePrevious","prevIsControlled","useEffect","current","isControlled","value","defaultValue","undefined"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst isInitialRender = useRef( true );\n\tconst prevValueProp = usePrevious( valueProp );\n\tconst prevIsControlled = useRef( false );\n\n\tuseEffect( () => {\n\t\tif ( isInitialRender.current ) {\n\t\t\tisInitialRender.current = false;\n\t\t}\n\t}, [] );\n\n\t// Assume the component is being used in controlled mode on the first re-render\n\t// that has a different `valueProp` from the previous render.\n\tconst isControlled =\n\t\tprevIsControlled.current ||\n\t\t( ! isInitialRender.current && prevValueProp !== valueProp );\n\tuseEffect( () => {\n\t\tprevIsControlled.current = isControlled;\n\t}, [ isControlled ] );\n\n\tif ( isControlled ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\treturn { value: valueProp ?? '', defaultValue: undefined };\n\t}\n\n\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\treturn { value: undefined, defaultValue: valueProp };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EACtC,MAAMC,aAAa,GAAG,IAAAC,oBAAW,EAAEJ,SAAU,CAAC;EAC9C,MAAMK,gBAAgB,GAAG,IAAAH,eAAM,EAAE,KAAM,CAAC;EAExC,IAAAI,kBAAS,EAAE,MAAM;IAChB,IAAKL,eAAe,CAACM,OAAO,EAAG;MAC9BN,eAAe,CAACM,OAAO,GAAG,KAAK;IAChC;EACD,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA;EACA,MAAMC,YAAY,GACjBH,gBAAgB,CAACE,OAAO,IACtB,CAAEN,eAAe,CAACM,OAAO,IAAIJ,aAAa,KAAKH,SAAW;EAC7D,IAAAM,kBAAS,EAAE,MAAM;IAChBD,gBAAgB,CAACE,OAAO,GAAGC,YAAY;EACxC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,IAAKA,YAAY,EAAG;IACnB;IACA,OAAO;MAAEC,KAAK,EAAET,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;MAAEU,YAAY,EAAEC;IAAU,CAAC;EAC3D;;EAEA;EACA,OAAO;IAAEF,KAAK,EAAEE,SAAS;IAAED,YAAY,EAAEV;EAAU,CAAC;AACrD"}

package/build/tooltip/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TOOLTIP_DELAY = void 0;
+exports.default = exports.Tooltip = exports.TOOLTIP_DELAY = void 0;
 var _react = require("react");
 var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _compose = require("@wordpress/compose");
@@ -23,12 +23,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * WordPress dependencies
  */
 
+const TooltipInternalContext = (0, _element.createContext)({
+  isNestedInTooltip: false
+});
+
 /**
  * Time over anchor to wait before showing tooltip
  */
 const TOOLTIP_DELAY = 700;
 exports.TOOLTIP_DELAY = TOOLTIP_DELAY;
-function Tooltip(props) {
+const CONTEXT_VALUE = {
+  isNestedInTooltip: true
+};
+function UnforwardedTooltip(props, ref) {
   const {
     children,
     delay = TOOLTIP_DELAY,
@@ -36,8 +43,12 @@ function Tooltip(props) {
     placement,
     position,
     shortcut,
-    text
+    text,
+    ...restProps
   } = props;
+  const {
+    isNestedInTooltip
+  } = (0, _element.useContext)(TooltipInternalContext);
   const baseId = (0, _compose.useInstanceId)(Tooltip, 'tooltip');
   const describedById = text || shortcut ? baseId : undefined;
   const isOnlyChild = _element.Children.count(children) === 1;
@@ -45,7 +56,7 @@ function Tooltip(props) {
   if (!isOnlyChild) {
     if ('development' === process.env.NODE_ENV) {
       // eslint-disable-next-line no-console
-      console.error('Tooltip should be called with only a single child element.');
+      console.error('wp-components.Tooltip should be called with only a single child element.');
     }
   }
 
@@ -64,17 +75,31 @@ function Tooltip(props) {
     });
   }
   computedPlacement = computedPlacement || 'bottom';
-  const tooltipStore = Ariakit.useTooltipStore({
+
+  // Removing the `Ariakit` namespace from the hook name allows ESLint to
+  // properly identify the hook, and apply the correct linting rules.
+  const useAriakitTooltipStore = Ariakit.useTooltipStore;
+  const tooltipStore = useAriakitTooltipStore({
     placement: computedPlacement,
     showTimeout: delay
   });
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(Ariakit.TooltipAnchor, {
+  if (isNestedInTooltip) {
+    return isOnlyChild ? (0, _react.createElement)(Ariakit.Role, {
+      ...restProps,
+      render: children
+    }) : children;
+  }
+  return (0, _react.createElement)(TooltipInternalContext.Provider, {
+    value: CONTEXT_VALUE
+  }, (0, _react.createElement)(Ariakit.TooltipAnchor, {
     onClick: hideOnClick ? tooltipStore.hide : undefined,
     store: tooltipStore,
-    render: isOnlyChild ? children : undefined
+    render: isOnlyChild ? children : undefined,
+    ref: ref
   }, isOnlyChild ? undefined : children), isOnlyChild && (text || shortcut) && (0, _react.createElement)(Ariakit.Tooltip, {
-    unmountOnHide: true,
+    ...restProps,
     className: "components-tooltip",
+    unmountOnHide: true,
     gutter: 4,
     id: describedById,
     overflowPadding: 0.5,
@@ -84,6 +109,8 @@ function Tooltip(props) {
     shortcut: shortcut
   })));
 }
+const Tooltip = (0, _element.forwardRef)(UnforwardedTooltip);
+exports.Tooltip = Tooltip;
 var _default = Tooltip;
 exports.default = _default;
 //# sourceMappingURL=index.js.map