@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

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

@@ -1,57 +1,13 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ColorListPicker from './color-list-picker';
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';
-import { VStack } from '../v-stack';
-import CustomDuotoneBar from './custom-duotone-bar';
-import { getDefaultColors, getGradientFromCSSColors } from './utils';
-import { Spacer } from '../spacer';
+import fastDeepEqual from "fast-deep-equal/es6";
+import { useMemo } from "@wordpress/element";
+import { __, sprintf } from "@wordpress/i18n";
+import ColorListPicker from "./color-list-picker";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker";
+import { VStack } from "../v-stack";
+import CustomDuotoneBar from "./custom-duotone-bar";
+import { getDefaultColors, getGradientFromCSSColors } from "./utils";
+import { Spacer } from "../spacer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * ```jsx
- * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const DUOTONE_PALETTE = [
- * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
- * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
- * ];
- *
- * const COLOR_PALETTE = [
- * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
- * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
- * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
- * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
- * ];
- *
- * const Example = () => {
- * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
- * 	return (
- * 		<>
- * 			<DuotonePicker
- * 				duotonePalette={ DUOTONE_PALETTE }
- * 				colorPalette={ COLOR_PALETTE }
- * 				value={ duotone }
- * 				onChange={ setDuotone }
- * 			/>
- * 			<DuotoneSwatch values={ duotone } />
- * 		</>
- * 	);
- * };
- * ```
- */
 function DuotonePicker({
   asButtons,
   loop,
@@ -63,21 +19,21 @@ function DuotonePicker({
   disableCustomDuotone,
   value,
   onChange,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledby,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...otherProps
 }) {
   const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);
-  const isUnset = value === 'unset';
-  const unsetOptionLabel = __('Unset');
-  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {
+  const isUnset = value === "unset";
+  const unsetOptionLabel = __("Unset");
+  const unsetOption = /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
     value: "unset",
     isSelected: isUnset,
     tooltipText: unsetOptionLabel,
     "aria-label": unsetOptionLabel,
     className: "components-duotone-picker__color-indicator",
     onClick: () => {
-      onChange(isUnset ? undefined : 'unset');
+      onChange(isUnset ? void 0 : "unset");
     }
   }, "unset");
   const duotoneOptions = duotonePalette.map(({
@@ -86,24 +42,28 @@ function DuotonePicker({
     name
   }) => {
     const style = {
-      background: getGradientFromCSSColors(colors, '135deg'),
-      color: 'transparent'
+      background: getGradientFromCSSColors(colors, "135deg"),
+      color: "transparent"
     };
     const tooltipText = name !== null && name !== void 0 ? name : sprintf(
-    // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
-    __('Duotone code: %s'), slug);
+      // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+      __("Duotone code: %s"),
+      slug
+    );
     const label = name ? sprintf(
-    // translators: %s: The name of the option e.g: "Dark grayscale".
-    __('Duotone: %s'), name) : tooltipText;
+      // translators: %s: The name of the option e.g: "Dark grayscale".
+      __("Duotone: %s"),
+      name
+    ) : tooltipText;
     const isSelected = fastDeepEqual(colors, value);
-    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {
+    return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
       value: colors,
-      isSelected: isSelected,
+      isSelected,
       "aria-label": label,
-      tooltipText: tooltipText,
-      style: style,
+      tooltipText,
+      style,
       onClick: () => {
-        onChange(isSelected ? undefined : colors);
+        onChange(isSelected ? void 0 : colors);
       }
     }, slug);
   });
@@ -112,41 +72,38 @@ function DuotonePicker({
     labelProps
   } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
-  return /*#__PURE__*/_jsx(CircularOptionPicker, {
+  return /* @__PURE__ */ _jsx(CircularOptionPicker, {
     ...otherProps,
     ...metaProps,
     ...labelProps,
-    options: options,
-    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
-      onClick: () => onChange(undefined),
+    options,
+    actions: !!clearable && /* @__PURE__ */ _jsx(CircularOptionPicker.ButtonAction, {
+      onClick: () => onChange(void 0),
       accessibleWhenDisabled: true,
       disabled: !value,
-      children: __('Clear')
+      children: __("Clear")
     }),
-    children: /*#__PURE__*/_jsx(Spacer, {
+    children: /* @__PURE__ */ _jsx(Spacer, {
       paddingTop: options.length === 0 ? 0 : 4,
-      children: /*#__PURE__*/_jsxs(VStack, {
+      children: /* @__PURE__ */ _jsxs(VStack, {
         spacing: 3,
-        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {
-          value: isUnset ? undefined : value,
-          onChange: onChange
-        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {
-          labels: [__('Shadows'), __('Highlights')],
+        children: [!disableCustomColors && !disableCustomDuotone && /* @__PURE__ */ _jsx(CustomDuotoneBar, {
+          value: isUnset ? void 0 : value,
+          onChange
+        }), !disableCustomDuotone && /* @__PURE__ */ _jsx(ColorListPicker, {
+          labels: [__("Shadows"), __("Highlights")],
           colors: colorPalette,
-          value: isUnset ? undefined : value,
-          disableCustomColors: disableCustomColors,
+          value: isUnset ? void 0 : value,
+          disableCustomColors,
           enableAlpha: true,
-          onChange: newColors => {
+          onChange: (newColors) => {
             if (!newColors[0]) {
               newColors[0] = defaultDark;
             }
             if (!newColors[1]) {
               newColors[1] = defaultLight;
             }
-            const newValue = newColors.length >= 2 ? newColors : undefined;
-            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
-            // but it's currently typed as a string[].
-            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
+            const newValue = newColors.length >= 2 ? newColors : void 0;
             onChange(newValue);
           }
         })]
@@ -154,5 +111,8 @@ function DuotonePicker({
     })
   });
 }
-export default DuotonePicker;
-//# sourceMappingURL=duotone-picker.js.map
+var duotone_picker_default = DuotonePicker;
+export {
+  duotone_picker_default as default
+};
+//# sourceMappingURL=duotone-picker.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","getComputeCircularOptionPickerCommonProps","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","labelProps","options","actions","ButtonAction","accessibleWhenDisabled","disabled","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, {\n\tgetComputeCircularOptionPickerCommonProps,\n} from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tconst { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(\n\t\tasButtons,\n\t\tloop,\n\t\tariaLabel,\n\t\tariaLabelledby\n\t);\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\t{ ...labelProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/duotone-picker/duotone-picker.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnset,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnset ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name !== null && name !== void 0 ? name : sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    const isSelected = fastDeepEqual(colors, value);\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick: () => {\n        onChange(isSelected ? undefined : colors);\n      }\n    }, slug);\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/duotone-picker/duotone-swatch.js

@@ -1,23 +1,19 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { getGradientFromCSSColors } from './utils';
+import { swatch } from "@wordpress/icons";
+import ColorIndicator from "../color-indicator";
+import Icon from "../icon";
+import { getGradientFromCSSColors } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 function DuotoneSwatch({
   values
 }) {
-  return values ? /*#__PURE__*/_jsx(ColorIndicator, {
-    colorValue: getGradientFromCSSColors(values, '135deg')
-  }) : /*#__PURE__*/_jsx(Icon, {
+  return values ? /* @__PURE__ */ _jsx(ColorIndicator, {
+    colorValue: getGradientFromCSSColors(values, "135deg")
+  }) : /* @__PURE__ */ _jsx(Icon, {
     icon: swatch
   });
 }
-export default DuotoneSwatch;
-//# sourceMappingURL=duotone-swatch.js.map
+var duotone_swatch_default = DuotoneSwatch;
+export {
+  duotone_swatch_default as default
+};
+//# sourceMappingURL=duotone-swatch.js.map

package/build-module/duotone-picker/duotone-swatch.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["swatch","ColorIndicator","Icon","getGradientFromCSSColors","jsx","_jsx","DuotoneSwatch","values","colorValue","icon"],"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport type { DuotoneSwatchProps } from './types';\n\nfunction DuotoneSwatch( { values }: DuotoneSwatchProps ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,kBAAkB;;AAEzC;AACA;AACA;AACA,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,IAAI,MAAM,SAAS;AAC1B,SAASC,wBAAwB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnD,SAASC,aAAaA,CAAE;EAAEC;AAA2B,CAAC,EAAG;EACxD,OAAOA,MAAM,gBACZF,IAAA,CAACJ,cAAc;IACdO,UAAU,EAAGL,wBAAwB,CAAEI,MAAM,EAAE,QAAS;EAAG,CAC3D,CAAC,gBAEFF,IAAA,CAACH,IAAI;IAACO,IAAI,EAAGT;EAAQ,CAAE,CACvB;AACF;AAEA,eAAeM,aAAa","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/duotone-picker/duotone-swatch.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction DuotoneSwatch({\n  values\n}) {\n  return values ? /*#__PURE__*/_jsx(ColorIndicator, {\n    colorValue: getGradientFromCSSColors(values, '135deg')\n  }) : /*#__PURE__*/_jsx(Icon, {\n    icon: swatch\n  });\n}\nexport default DuotoneSwatch;"],
+  "mappings": "AAGA,SAAS,cAAc;AAKvB,OAAO,oBAAoB;AAC3B,OAAO,UAAU;AACjB,SAAS,gCAAgC;AACzC,SAAS,OAAO,YAAY;AAC5B,SAAS,cAAc;AAAA,EACrB;AACF,GAAG;AACD,SAAO,SAAsB,qBAAK,gBAAgB;AAAA,IAChD,YAAY,yBAAyB,QAAQ,QAAQ;AAAA,EACvD,CAAC,IAAiB,qBAAK,MAAM;AAAA,IAC3B,MAAM;AAAA,EACR,CAAC;AACH;AACA,IAAO,yBAAQ;",
+  "names": []
+}

package/build-module/duotone-picker/index.js

@@ -1,3 +1,7 @@
-export { default as DuotonePicker } from './duotone-picker';
-export { default as DuotoneSwatch } from './duotone-swatch';
-//# sourceMappingURL=index.js.map
+import { default as default2 } from "./duotone-picker";
+import { default as default3 } from "./duotone-swatch";
+export {
+  default2 as DuotonePicker,
+  default3 as DuotoneSwatch
+};
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["default","DuotonePicker","DuotoneSwatch"],"sources":["@wordpress/components/src/duotone-picker/index.ts"],"sourcesContent":["export { default as DuotonePicker } from './duotone-picker';\nexport { default as DuotoneSwatch } from './duotone-swatch';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,kBAAkB;AAC3D,SAASD,OAAO,IAAIE,aAAa,QAAQ,kBAAkB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/duotone-picker/index.ts"],
+  "sourcesContent": ["export { default as DuotonePicker } from './duotone-picker';\nexport { default as DuotoneSwatch } from './duotone-swatch';"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,gBAAgC;",
+  "names": ["default"]
+}

package/build-module/duotone-picker/types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/build-module/duotone-picker/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/duotone-picker/types.ts"],"sourcesContent":["export type DuotonePickerProps = {\n\t/**\n\t * Whether there should be a button to clear the duotone value.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Whether there should be an `unset` option.\n\t *\n\t * @default true\n\t */\n\tunsetable?: boolean;\n\t/**\n\t * Array of color presets of the form `{ color: '#000000', name: 'Black', slug: 'black' }`.\n\t */\n\tcolorPalette: Color[];\n\t/**\n\t * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.\n\t */\n\tduotonePalette: DuotoneColor[];\n\t/**\n\t * Whether custom colors should be disabled.\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * Whether custom duotone values should be disabled.\n\t *\n\t * @default false\n\t */\n\tdisableCustomDuotone?: boolean;\n\t/**\n\t * An array of colors for the duotone effect.\n\t */\n\tvalue?: string[] | 'unset';\n\t/**\n\t * Callback which is called when the duotone colors change.\n\t */\n\tonChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * A label to identify the purpose of the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t */\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t */\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t  }\n);\n\ntype Color = {\n\tcolor: string;\n\tname: string;\n\tslug: string;\n};\n\ntype DuotoneColor = {\n\tcolors: string[];\n\tname: string;\n\tslug: string;\n};\n\nexport type DuotoneSwatchProps = {\n\t/**\n\t * An array of colors to show or `null` to show the placeholder swatch icon.\n\t */\n\tvalues?: string[] | null;\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/duotone-picker/utils.js

@@ -1,35 +1,9 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-
-/**
- * Internal dependencies
- */
-
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
 extend([namesPlugin]);
-
-/**
- * Object representation for a color.
- *
- * @typedef {Object} RGBColor
- * @property {number} r Red component of the color in the range [0,1].
- * @property {number} g Green component of the color in the range [0,1].
- * @property {number} b Blue component of the color in the range [0,1].
- */
-
-/**
- * Calculate the brightest and darkest values from a color palette.
- *
- * @param palette Color palette for the theme.
- *
- * @return Tuple of the darkest color and brightest color.
- */
-export function getDefaultColors(palette) {
-  // A default dark and light color are required.
+function getDefaultColors(palette) {
   if (!palette || palette.length < 2) {
-    return ['#000', '#fff'];
+    return ["#000", "#fff"];
   }
   return palette.map(({
     color
@@ -40,53 +14,34 @@ export function getDefaultColors(palette) {
     return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
   }, [{
     brightness: 1,
-    color: ''
+    color: ""
   }, {
     brightness: 0,
-    color: ''
+    color: ""
   }]).map(({
     color
   }) => color);
 }
-
-/**
- * Generate a duotone gradient from a list of colors.
- *
- * @param colors CSS color strings.
- * @param angle  CSS gradient angle.
- *
- * @return  CSS gradient string for the duotone swatch.
- */
-export function getGradientFromCSSColors(colors = [], angle = '90deg') {
+function getGradientFromCSSColors(colors = [], angle = "90deg") {
   const l = 100 / colors.length;
-  const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(', ');
+  const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(", ");
   return `linear-gradient( ${angle}, ${stops} )`;
 }
-
-/**
- * Convert a color array to an array of color stops.
- *
- * @param colors CSS colors array
- *
- * @return Color stop information.
- */
-export function getColorStopsFromColors(colors) {
+function getColorStopsFromColors(colors) {
   return colors.map((color, i) => ({
     position: i * 100 / (colors.length - 1),
     color
   }));
 }
-
-/**
- * Convert a color stop array to an array colors.
- *
- * @param colorStops Color stop information.
- *
- * @return CSS colors array.
- */
-export function getColorsFromColorStops(colorStops = []) {
+function getColorsFromColorStops(colorStops = []) {
   return colorStops.map(({
     color
   }) => color);
 }
-//# sourceMappingURL=utils.js.map
+export {
+  getColorStopsFromColors,
+  getColorsFromColorStops,
+  getDefaultColors,
+  getGradientFromCSSColors
+};
+//# sourceMappingURL=utils.js.map

package/build-module/duotone-picker/utils.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["colord","extend","namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","min","max","current","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) {\n\t\treturn [ '#000', '#fff' ];\n\t}\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA;AACA;;AAGAD,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,OAA6C,EAC5C;EACD;EACA,IAAK,CAAEA,OAAO,IAAIA,OAAO,CAACC,MAAM,GAAG,CAAC,EAAG;IACtC,OAAO,CAAE,MAAM,EAAE,MAAM,CAAE;EAC1B;EAEA,OAAOD,OAAO,CACZE,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,MAAQ;IACxBA,KAAK;IACLC,UAAU,EAAER,MAAM,CAAEO,KAAM,CAAC,CAACC,UAAU,CAAC;EACxC,CAAC,CAAG,CAAC,CACJC,MAAM,CACN,CAAE,CAAEC,GAAG,EAAEC,GAAG,CAAE,EAAEC,OAAO,KAAM;IAC5B,OAAO,CACNA,OAAO,CAACJ,UAAU,IAAIE,GAAG,CAACF,UAAU,GAAGI,OAAO,GAAGF,GAAG,EACpDE,OAAO,CAACJ,UAAU,IAAIG,GAAG,CAACH,UAAU,GAAGI,OAAO,GAAGD,GAAG,CACpD;EACF,CAAC,EACD,CACC;IAAEH,UAAU,EAAE,CAAC;IAAED,KAAK,EAAE;EAAG,CAAC,EAC5B;IAAEC,UAAU,EAAE,CAAC;IAAED,KAAK,EAAE;EAAG,CAAC,CAE9B,CAAC,CACAD,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAAC;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,wBAAwBA,CACvCC,MAAgB,GAAG,EAAE,EACrBC,KAAK,GAAG,OAAO,EACd;EACD,MAAMC,CAAC,GAAG,GAAG,GAAGF,MAAM,CAACT,MAAM;EAE7B,MAAMY,KAAK,GAAGH,MAAM,CAClBR,GAAG,CAAE,CAAEY,CAAC,EAAEC,CAAC,KAAM,GAAID,CAAC,IAAMC,CAAC,GAAGH,CAAC,MAAQE,CAAC,IAAM,CAAEC,CAAC,GAAG,CAAC,IAAKH,CAAC,GAAK,CAAC,CACnEI,IAAI,CAAE,IAAK,CAAC;EAEd,OAAO,oBAAqBL,KAAK,KAAOE,KAAK,IAAK;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,uBAAuBA,CAAEP,MAAgB,EAAG;EAC3D,OAAOA,MAAM,CAACR,GAAG,CAAE,CAAEC,KAAK,EAAEY,CAAC,MAAQ;IACpCG,QAAQ,EAAIH,CAAC,GAAG,GAAG,IAAOL,MAAM,CAACT,MAAM,GAAG,CAAC,CAAE;IAC7CE;EACD,CAAC,CAAG,CAAC;AACN;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASgB,uBAAuBA,CACtCC,UAAiD,GAAG,EAAE,EACrD;EACD,OAAOA,UAAU,CAAClB,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAAC;AAChD","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/duotone-picker/utils.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin]);\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(palette) {\n  // A default dark and light color are required.\n  if (!palette || palette.length < 2) {\n    return ['#000', '#fff'];\n  }\n  return palette.map(({\n    color\n  }) => ({\n    color,\n    brightness: colord(color).brightness()\n  })).reduce(([min, max], current) => {\n    return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];\n  }, [{\n    brightness: 1,\n    color: ''\n  }, {\n    brightness: 0,\n    color: ''\n  }]).map(({\n    color\n  }) => color);\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(colors = [], angle = '90deg') {\n  const l = 100 / colors.length;\n  const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(', ');\n  return `linear-gradient( ${angle}, ${stops} )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors(colors) {\n  return colors.map((color, i) => ({\n    position: i * 100 / (colors.length - 1),\n    color\n  }));\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(colorStops = []) {\n  return colorStops.map(({\n    color\n  }) => color);\n}"],
+  "mappings": "AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AAMxB,OAAO,CAAC,WAAW,CAAC;AAkBb,SAAS,iBAAiB,SAAS;AAExC,MAAI,CAAC,WAAW,QAAQ,SAAS,GAAG;AAClC,WAAO,CAAC,QAAQ,MAAM;AAAA,EACxB;AACA,SAAO,QAAQ,IAAI,CAAC;AAAA,IAClB;AAAA,EACF,OAAO;AAAA,IACL;AAAA,IACA,YAAY,OAAO,KAAK,EAAE,WAAW;AAAA,EACvC,EAAE,EAAE,OAAO,CAAC,CAAC,KAAK,GAAG,GAAG,YAAY;AAClC,WAAO,CAAC,QAAQ,cAAc,IAAI,aAAa,UAAU,KAAK,QAAQ,cAAc,IAAI,aAAa,UAAU,GAAG;AAAA,EACpH,GAAG,CAAC;AAAA,IACF,YAAY;AAAA,IACZ,OAAO;AAAA,EACT,GAAG;AAAA,IACD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT,CAAC,CAAC,EAAE,IAAI,CAAC;AAAA,IACP;AAAA,EACF,MAAM,KAAK;AACb;AAUO,SAAS,yBAAyB,SAAS,CAAC,GAAG,QAAQ,SAAS;AACrE,QAAM,IAAI,MAAM,OAAO;AACvB,QAAM,QAAQ,OAAO,IAAI,CAAC,GAAG,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,EAAE,KAAK,IAAI;AACpF,SAAO,oBAAoB,KAAK,KAAK,KAAK;AAC5C;AASO,SAAS,wBAAwB,QAAQ;AAC9C,SAAO,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,IAC/B,UAAU,IAAI,OAAO,OAAO,SAAS;AAAA,IACrC;AAAA,EACF,EAAE;AACJ;AASO,SAAS,wBAAwB,aAAa,CAAC,GAAG;AACvD,SAAO,WAAW,IAAI,CAAC;AAAA,IACrB;AAAA,EACF,MAAM,KAAK;AACb;",
+  "names": []
+}

package/build-module/elevation/component.js

@@ -1,46 +1,18 @@
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-import { contextConnect } from '../context';
-import { View } from '../view';
-import { useElevation } from './hook';
+import { contextConnect } from "../context";
+import { View } from "../view";
+import { useElevation } from "./hook";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedElevation(props, forwardedRef) {
   const elevationProps = useElevation(props);
-  return /*#__PURE__*/_jsx(View, {
+  return /* @__PURE__ */ _jsx(View, {
     ...elevationProps,
     ref: forwardedRef
   });
 }
-
-/**
- * `Elevation` is a core component that renders shadow, using the component
- * system's shadow system.
- *
- * The shadow effect is generated using the `value` prop.
- *
- * ```jsx
- * import {
- *	__experimentalElevation as Elevation,
- *	__experimentalSurface as Surface,
- *	__experimentalText as Text,
- * } from '@wordpress/components';
- *
- * function Example() {
- *   return (
- *     <Surface>
- *       <Text>Code is Poetry</Text>
- *       <Elevation value={ 5 } />
- *     </Surface>
- *   );
- * }
- * ```
- */
-export const Elevation = contextConnect(UnconnectedElevation, 'Elevation');
-export default Elevation;
-//# sourceMappingURL=component.js.map
+const Elevation = contextConnect(UnconnectedElevation, "Elevation");
+var component_default = Elevation;
+export {
+  Elevation,
+  component_default as default
+};
+//# sourceMappingURL=component.js.map

package/build-module/elevation/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["contextConnect","View","useElevation","jsx","_jsx","UnconnectedElevation","props","forwardedRef","elevationProps","ref","Elevation"],"sources":["@wordpress/components/src/elevation/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,YAAY,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtC,SAASC,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGN,YAAY,CAAEI,KAAM,CAAC;EAE5C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,cAAc;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,SAAS,GAAGV,cAAc,CAAEK,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeK,SAAS","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/elevation/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedElevation(props, forwardedRef) {\n  const elevationProps = useElevation(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...elevationProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect(UnconnectedElevation, 'Elevation');\nexport default Elevation;"],
+  "mappings": "AAQA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,OAAO,YAAY;AAC5B,SAAS,qBAAqB,OAAO,cAAc;AACjD,QAAM,iBAAiB,aAAa,KAAK;AACzC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAyBO,MAAM,YAAY,eAAe,sBAAsB,WAAW;AACzE,IAAO,oBAAQ;",
+  "names": []
+}