@wordpress/block-editor 12.2.0 → 12.3.1

package/build-module/components/global-styles/color-panel.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -30,54 +29,40 @@ export function useHasColorPanel(settings) {
   return hasTextPanel || hasBackgroundPanel || hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
 }
 export function useHasTextPanel(settings) {
-  var _settings$color, _settings$color2;
-
   const colors = useColorsPerOrigin(settings);
-  return (settings === null || settings === void 0 ? void 0 : (_settings$color = settings.color) === null || _settings$color === void 0 ? void 0 : _settings$color.text) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color2 = settings.color) === null || _settings$color2 === void 0 ? void 0 : _settings$color2.custom));
+  return settings?.color?.text && (colors?.length > 0 || settings?.color?.custom);
 }
 export function useHasLinkPanel(settings) {
-  var _settings$color3, _settings$color4;
-
   const colors = useColorsPerOrigin(settings);
-  return (settings === null || settings === void 0 ? void 0 : (_settings$color3 = settings.color) === null || _settings$color3 === void 0 ? void 0 : _settings$color3.link) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color4 = settings.color) === null || _settings$color4 === void 0 ? void 0 : _settings$color4.custom));
+  return settings?.color?.link && (colors?.length > 0 || settings?.color?.custom);
 }
 export function useHasCaptionPanel(settings) {
-  var _settings$color5, _settings$color6;
-
   const colors = useColorsPerOrigin(settings);
-  return (settings === null || settings === void 0 ? void 0 : (_settings$color5 = settings.color) === null || _settings$color5 === void 0 ? void 0 : _settings$color5.caption) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color6 = settings.color) === null || _settings$color6 === void 0 ? void 0 : _settings$color6.custom));
+  return settings?.color?.caption && (colors?.length > 0 || settings?.color?.custom);
 }
 export function useHasHeadingPanel(settings) {
-  var _settings$color7, _settings$color8, _settings$color9;
-
   const colors = useColorsPerOrigin(settings);
   const gradients = useGradientsPerOrigin(settings);
-  return (settings === null || settings === void 0 ? void 0 : (_settings$color7 = settings.color) === null || _settings$color7 === void 0 ? void 0 : _settings$color7.heading) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color8 = settings.color) === null || _settings$color8 === void 0 ? void 0 : _settings$color8.custom) || (gradients === null || gradients === void 0 ? void 0 : gradients.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color9 = settings.color) === null || _settings$color9 === void 0 ? void 0 : _settings$color9.customGradient));
+  return settings?.color?.heading && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
 }
 export function useHasButtonPanel(settings) {
-  var _settings$color10, _settings$color11, _settings$color12;
-
   const colors = useColorsPerOrigin(settings);
   const gradients = useGradientsPerOrigin(settings);
-  return (settings === null || settings === void 0 ? void 0 : (_settings$color10 = settings.color) === null || _settings$color10 === void 0 ? void 0 : _settings$color10.button) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color11 = settings.color) === null || _settings$color11 === void 0 ? void 0 : _settings$color11.custom) || (gradients === null || gradients === void 0 ? void 0 : gradients.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color12 = settings.color) === null || _settings$color12 === void 0 ? void 0 : _settings$color12.customGradient));
+  return settings?.color?.button && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
 }
 export function useHasBackgroundPanel(settings) {
-  var _settings$color13, _settings$color14, _settings$color15;
-
   const colors = useColorsPerOrigin(settings);
   const gradients = useGradientsPerOrigin(settings);
-  return (settings === null || settings === void 0 ? void 0 : (_settings$color13 = settings.color) === null || _settings$color13 === void 0 ? void 0 : _settings$color13.background) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color14 = settings.color) === null || _settings$color14 === void 0 ? void 0 : _settings$color14.custom) || (gradients === null || gradients === void 0 ? void 0 : gradients.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color15 = settings.color) === null || _settings$color15 === void 0 ? void 0 : _settings$color15.customGradient));
+  return settings?.color?.background && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
 }
 
-function ColorToolsPanel(_ref) {
-  let {
-    resetAllFilter,
-    onChange,
-    value,
-    panelId,
-    children
-  } = _ref;
-
+function ColorToolsPanel({
+  resetAllFilter,
+  onChange,
+  value,
+  panelId,
+  children
+}) {
   const resetAll = () => {
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
@@ -110,36 +95,32 @@ const popoverProps = {
   shift: true
 };
 
-const LabeledColorIndicators = _ref2 => {
-  let {
-    indicators,
-    label
-  } = _ref2;
-  return createElement(HStack, {
-    justify: "flex-start"
-  }, createElement(ZStack, {
-    isLayered: false,
-    offset: -8
-  }, indicators.map((indicator, index) => createElement(Flex, {
-    key: index,
-    expanded: false
-  }, createElement(ColorIndicator, {
-    colorValue: indicator
-  })))), createElement(FlexItem, {
-    className: "block-editor-panel-color-gradient-settings__color-name",
-    title: label
-  }, label));
-};
-
-function ColorPanelTab(_ref3) {
-  let {
-    isGradient,
-    inheritedValue,
-    userValue,
-    setValue,
-    colorGradientControlSettings
-  } = _ref3;
-  return createElement(ColorGradientControl, _extends({}, colorGradientControlSettings, {
+const LabeledColorIndicators = ({
+  indicators,
+  label
+}) => createElement(HStack, {
+  justify: "flex-start"
+}, createElement(ZStack, {
+  isLayered: false,
+  offset: -8
+}, indicators.map((indicator, index) => createElement(Flex, {
+  key: index,
+  expanded: false
+}, createElement(ColorIndicator, {
+  colorValue: indicator
+})))), createElement(FlexItem, {
+  className: "block-editor-panel-color-gradient-settings__color-name",
+  title: label
+}, label));
+
+function ColorPanelTab({
+  isGradient,
+  inheritedValue,
+  userValue,
+  setValue,
+  colorGradientControlSettings
+}) {
+  return createElement(ColorGradientControl, { ...colorGradientControlSettings,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,
@@ -149,25 +130,23 @@ function ColorPanelTab(_ref3) {
     onGradientChange: isGradient ? setValue : undefined,
     clearable: inheritedValue === userValue,
     headingLevel: 3
-  }));
+  });
 }
 
-function ColorPanelDropdown(_ref4) {
-  let {
-    label,
-    hasValue,
-    resetValue,
-    isShownByDefault,
-    indicators,
-    tabs,
-    colorGradientControlSettings,
-    panelId
-  } = _ref4;
-  const tabConfigs = tabs.map(_ref5 => {
-    let {
-      key,
-      label: tabLabel
-    } = _ref5;
+function ColorPanelDropdown({
+  label,
+  hasValue,
+  resetValue,
+  isShownByDefault,
+  indicators,
+  tabs,
+  colorGradientControlSettings,
+  panelId
+}) {
+  const tabConfigs = tabs.map(({
+    key,
+    label: tabLabel
+  }) => {
     return {
       name: key,
       title: tabLabel
@@ -183,11 +162,10 @@ function ColorPanelDropdown(_ref4) {
   }, createElement(Dropdown, {
     popoverProps: popoverProps,
     className: "block-editor-tools-panel-color-gradient-settings__dropdown",
-    renderToggle: _ref6 => {
-      let {
-        onToggle,
-        isOpen
-      } = _ref6;
+    renderToggle: ({
+      onToggle,
+      isOpen
+    }) => {
       const toggleProps = {
         onClick: onToggle,
         className: classnames('block-editor-panel-color-gradient-settings__dropdown', {
@@ -198,7 +176,8 @@ function ColorPanelDropdown(_ref4) {
         /* translators: %s is the type of color property, e.g., "background" */
         __('Color %s styles'), label)
       };
-      return createElement(Button, toggleProps, createElement(LabeledColorIndicators, {
+      return createElement(Button, { ...toggleProps
+      }, createElement(LabeledColorIndicators, {
         indicators: indicators,
         label: label
       }));
@@ -207,9 +186,9 @@ function ColorPanelDropdown(_ref4) {
       paddingSize: "none"
     }, createElement("div", {
       className: "block-editor-panel-color-gradient-settings__dropdown-content"
-    }, tabs.length === 1 && createElement(ColorPanelTab, _extends({}, tabs[0], {
+    }, tabs.length === 1 && createElement(ColorPanelTab, { ...tabs[0],
       colorGradientControlSettings: colorGradientControlSettings
-    })), tabs.length > 1 && createElement(TabPanel, {
+    }), tabs.length > 1 && createElement(TabPanel, {
       tabs: tabConfigs
     }, tab => {
       const selectedTab = tabs.find(t => t.key === tab.name);
@@ -218,30 +197,27 @@ function ColorPanelDropdown(_ref4) {
         return null;
       }
 
-      return createElement(ColorPanelTab, _extends({}, selectedTab, {
+      return createElement(ColorPanelTab, { ...selectedTab,
         colorGradientControlSettings: colorGradientControlSettings
-      }));
+      });
     })))
   }));
 }
 
-export default function ColorPanel(_ref7) {
-  var _settings$color16, _settings$color17, _inheritedValue$color, _value$color, _inheritedValue$color2, _value$color2, _inheritedValue$color3, _value$color3, _inheritedValue$eleme, _inheritedValue$eleme2, _inheritedValue$eleme3, _value$elements, _value$elements$link, _value$elements$link$, _inheritedValue$eleme4, _inheritedValue$eleme5, _inheritedValue$eleme6, _inheritedValue$eleme7, _value$elements2, _value$elements2$link, _value$elements2$link2, _value$elements2$link3;
-
-  let {
-    as: Wrapper = ColorToolsPanel,
-    value,
-    onChange,
-    inheritedValue = value,
-    settings,
-    panelId,
-    defaultControls = DEFAULT_CONTROLS,
-    children
-  } = _ref7;
+export default function ColorPanel({
+  as: Wrapper = ColorToolsPanel,
+  value,
+  onChange,
+  inheritedValue = value,
+  settings,
+  panelId,
+  defaultControls = DEFAULT_CONTROLS,
+  children
+}) {
   const colors = useColorsPerOrigin(settings);
   const gradients = useGradientsPerOrigin(settings);
-  const areCustomSolidsEnabled = settings === null || settings === void 0 ? void 0 : (_settings$color16 = settings.color) === null || _settings$color16 === void 0 ? void 0 : _settings$color16.custom;
-  const areCustomGradientsEnabled = settings === null || settings === void 0 ? void 0 : (_settings$color17 = settings.color) === null || _settings$color17 === void 0 ? void 0 : _settings$color17.customGradient;
+  const areCustomSolidsEnabled = settings?.color?.custom;
+  const areCustomGradientsEnabled = settings?.color?.customGradient;
   const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
   const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
 
@@ -250,41 +226,29 @@ export default function ColorPanel(_ref7) {
   }, '', rawValue);
 
   const encodeColorValue = colorValue => {
-    const allColors = colors.flatMap(_ref8 => {
-      let {
-        colors: originColors
-      } = _ref8;
-      return originColors;
-    });
-    const colorObject = allColors.find(_ref9 => {
-      let {
-        color
-      } = _ref9;
-      return color === colorValue;
-    });
+    const allColors = colors.flatMap(({
+      colors: originColors
+    }) => originColors);
+    const colorObject = allColors.find(({
+      color
+    }) => color === colorValue);
     return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
   };
 
   const encodeGradientValue = gradientValue => {
-    const allGradients = gradients.flatMap(_ref10 => {
-      let {
-        gradients: originGradients
-      } = _ref10;
-      return originGradients;
-    });
-    const gradientObject = allGradients.find(_ref11 => {
-      let {
-        gradient
-      } = _ref11;
-      return gradient === gradientValue;
-    });
+    const allGradients = gradients.flatMap(({
+      gradients: originGradients
+    }) => originGradients);
+    const gradientObject = allGradients.find(({
+      gradient
+    }) => gradient === gradientValue);
     return gradientObject ? 'var:preset|gradient|' + gradientObject.slug : gradientValue;
   }; // Text Color
 
 
   const showTextPanel = useHasTextPanel(settings);
-  const textColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color = inheritedValue.color) === null || _inheritedValue$color === void 0 ? void 0 : _inheritedValue$color.text);
-  const userTextColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$color = value.color) === null || _value$color === void 0 ? void 0 : _value$color.text);
+  const textColor = decodeValue(inheritedValue?.color?.text);
+  const userTextColor = decodeValue(value?.color?.text);
 
   const hasTextColor = () => !!userTextColor;
 
@@ -296,10 +260,10 @@ export default function ColorPanel(_ref7) {
 
 
   const showBackgroundPanel = useHasBackgroundPanel(settings);
-  const backgroundColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color2 = inheritedValue.color) === null || _inheritedValue$color2 === void 0 ? void 0 : _inheritedValue$color2.background);
-  const userBackgroundColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$color2 = value.color) === null || _value$color2 === void 0 ? void 0 : _value$color2.background);
-  const gradient = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color3 = inheritedValue.color) === null || _inheritedValue$color3 === void 0 ? void 0 : _inheritedValue$color3.gradient);
-  const userGradient = decodeValue(value === null || value === void 0 ? void 0 : (_value$color3 = value.color) === null || _value$color3 === void 0 ? void 0 : _value$color3.gradient);
+  const backgroundColor = decodeValue(inheritedValue?.color?.background);
+  const userBackgroundColor = decodeValue(value?.color?.background);
+  const gradient = decodeValue(inheritedValue?.color?.gradient);
+  const userGradient = decodeValue(value?.color?.gradient);
 
   const hasBackground = () => !!userBackgroundColor || !!userGradient;
 
@@ -323,15 +287,15 @@ export default function ColorPanel(_ref7) {
 
 
   const showLinkPanel = useHasLinkPanel(settings);
-  const linkColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme = inheritedValue.elements) === null || _inheritedValue$eleme === void 0 ? void 0 : (_inheritedValue$eleme2 = _inheritedValue$eleme.link) === null || _inheritedValue$eleme2 === void 0 ? void 0 : (_inheritedValue$eleme3 = _inheritedValue$eleme2.color) === null || _inheritedValue$eleme3 === void 0 ? void 0 : _inheritedValue$eleme3.text);
-  const userLinkColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements = value.elements) === null || _value$elements === void 0 ? void 0 : (_value$elements$link = _value$elements.link) === null || _value$elements$link === void 0 ? void 0 : (_value$elements$link$ = _value$elements$link.color) === null || _value$elements$link$ === void 0 ? void 0 : _value$elements$link$.text);
+  const linkColor = decodeValue(inheritedValue?.elements?.link?.color?.text);
+  const userLinkColor = decodeValue(value?.elements?.link?.color?.text);
 
   const setLinkColor = newColor => {
     onChange(setImmutably(value, ['elements', 'link', 'color', 'text'], encodeColorValue(newColor)));
   };
 
-  const hoverLinkColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme4 = inheritedValue.elements) === null || _inheritedValue$eleme4 === void 0 ? void 0 : (_inheritedValue$eleme5 = _inheritedValue$eleme4.link) === null || _inheritedValue$eleme5 === void 0 ? void 0 : (_inheritedValue$eleme6 = _inheritedValue$eleme5[':hover']) === null || _inheritedValue$eleme6 === void 0 ? void 0 : (_inheritedValue$eleme7 = _inheritedValue$eleme6.color) === null || _inheritedValue$eleme7 === void 0 ? void 0 : _inheritedValue$eleme7.text);
-  const userHoverLinkColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements2 = value.elements) === null || _value$elements2 === void 0 ? void 0 : (_value$elements2$link = _value$elements2.link) === null || _value$elements2$link === void 0 ? void 0 : (_value$elements2$link2 = _value$elements2$link[':hover']) === null || _value$elements2$link2 === void 0 ? void 0 : (_value$elements2$link3 = _value$elements2$link2.color) === null || _value$elements2$link3 === void 0 ? void 0 : _value$elements2$link3.text);
+  const hoverLinkColor = decodeValue(inheritedValue?.elements?.link?.[':hover']?.color?.text);
+  const userHoverLinkColor = decodeValue(value?.elements?.link?.[':hover']?.color?.text);
 
   const setHoverLinkColor = newColor => {
     onChange(setImmutably(value, ['elements', 'link', ':hover', 'color', 'text'], encodeColorValue(newColor)));
@@ -384,22 +348,18 @@ export default function ColorPanel(_ref7) {
     showPanel: useHasHeadingPanel(settings)
   }];
   const resetAllFilter = useCallback(previousValue => {
-    var _previousValue$elemen;
-
     return { ...previousValue,
       color: undefined,
-      elements: { ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.elements),
-        link: { ...(previousValue === null || previousValue === void 0 ? void 0 : (_previousValue$elemen = previousValue.elements) === null || _previousValue$elemen === void 0 ? void 0 : _previousValue$elemen.link),
+      elements: { ...previousValue?.elements,
+        link: { ...previousValue?.elements?.link,
           color: undefined,
           ':hover': {
             color: undefined
           }
         },
         ...elements.reduce((acc, element) => {
-          var _previousValue$elemen2;
-
           return { ...acc,
-            [element.name]: { ...(previousValue === null || previousValue === void 0 ? void 0 : (_previousValue$elemen2 = previousValue.elements) === null || _previousValue$elemen2 === void 0 ? void 0 : _previousValue$elemen2[element.name]),
+            [element.name]: { ...previousValue?.elements?.[element.name],
               color: undefined
             }
           };
@@ -428,20 +388,20 @@ export default function ColorPanel(_ref7) {
     resetValue: resetBackground,
     isShownByDefault: defaultControls.background,
     indicators: [gradient !== null && gradient !== void 0 ? gradient : backgroundColor],
-    tabs: [{
+    tabs: [hasSolidColors && {
       key: 'background',
       label: __('Solid'),
       inheritedValue: backgroundColor,
       setValue: setBackgroundColor,
       userValue: userBackgroundColor
-    }, {
+    }, hasGradientColors && {
       key: 'gradient',
       label: __('Gradient'),
       inheritedValue: gradient,
       setValue: setGradient,
       userValue: userGradient,
       isGradient: true
-    }]
+    }].filter(Boolean)
   }, showLinkPanel && {
     key: 'link',
     label: __('Link'),
@@ -463,21 +423,18 @@ export default function ColorPanel(_ref7) {
       userValue: userHoverLinkColor
     }]
   }].filter(Boolean);
-  elements.forEach(_ref12 => {
-    var _inheritedValue$eleme8, _inheritedValue$eleme9, _inheritedValue$eleme10, _inheritedValue$eleme11, _inheritedValue$eleme12, _inheritedValue$eleme13, _inheritedValue$eleme14, _inheritedValue$eleme15, _inheritedValue$eleme16, _value$elements3, _value$elements3$name, _value$elements3$name2, _value$elements4, _value$elements4$name, _value$elements4$name2, _value$elements5, _value$elements5$name, _value$elements5$name2;
-
-    let {
-      name,
-      label,
-      showPanel
-    } = _ref12;
+  elements.forEach(({
+    name,
+    label,
+    showPanel
+  }) => {
     if (!showPanel) return;
-    const elementBackgroundColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme8 = inheritedValue.elements) === null || _inheritedValue$eleme8 === void 0 ? void 0 : (_inheritedValue$eleme9 = _inheritedValue$eleme8[name]) === null || _inheritedValue$eleme9 === void 0 ? void 0 : (_inheritedValue$eleme10 = _inheritedValue$eleme9.color) === null || _inheritedValue$eleme10 === void 0 ? void 0 : _inheritedValue$eleme10.background);
-    const elementGradient = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme11 = inheritedValue.elements) === null || _inheritedValue$eleme11 === void 0 ? void 0 : (_inheritedValue$eleme12 = _inheritedValue$eleme11[name]) === null || _inheritedValue$eleme12 === void 0 ? void 0 : (_inheritedValue$eleme13 = _inheritedValue$eleme12.color) === null || _inheritedValue$eleme13 === void 0 ? void 0 : _inheritedValue$eleme13.gradient);
-    const elementTextColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme14 = inheritedValue.elements) === null || _inheritedValue$eleme14 === void 0 ? void 0 : (_inheritedValue$eleme15 = _inheritedValue$eleme14[name]) === null || _inheritedValue$eleme15 === void 0 ? void 0 : (_inheritedValue$eleme16 = _inheritedValue$eleme15.color) === null || _inheritedValue$eleme16 === void 0 ? void 0 : _inheritedValue$eleme16.text);
-    const elementBackgroundUserColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements3 = value.elements) === null || _value$elements3 === void 0 ? void 0 : (_value$elements3$name = _value$elements3[name]) === null || _value$elements3$name === void 0 ? void 0 : (_value$elements3$name2 = _value$elements3$name.color) === null || _value$elements3$name2 === void 0 ? void 0 : _value$elements3$name2.background);
-    const elementGradientUserColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements4 = value.elements) === null || _value$elements4 === void 0 ? void 0 : (_value$elements4$name = _value$elements4[name]) === null || _value$elements4$name === void 0 ? void 0 : (_value$elements4$name2 = _value$elements4$name.color) === null || _value$elements4$name2 === void 0 ? void 0 : _value$elements4$name2.gradient);
-    const elementTextUserColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements5 = value.elements) === null || _value$elements5 === void 0 ? void 0 : (_value$elements5$name = _value$elements5[name]) === null || _value$elements5$name === void 0 ? void 0 : (_value$elements5$name2 = _value$elements5$name.color) === null || _value$elements5$name2 === void 0 ? void 0 : _value$elements5$name2.text);
+    const elementBackgroundColor = decodeValue(inheritedValue?.elements?.[name]?.color?.background);
+    const elementGradient = decodeValue(inheritedValue?.elements?.[name]?.color?.gradient);
+    const elementTextColor = decodeValue(inheritedValue?.elements?.[name]?.color?.text);
+    const elementBackgroundUserColor = decodeValue(value?.elements?.[name]?.color?.background);
+    const elementGradientUserColor = decodeValue(value?.elements?.[name]?.color?.gradient);
+    const elementTextUserColor = decodeValue(value?.elements?.[name]?.color?.text);
 
     const hasElement = () => !!(elementTextUserColor || elementBackgroundUserColor || elementGradientUserColor);
 
@@ -542,9 +499,9 @@ export default function ColorPanel(_ref7) {
     value: value,
     onChange: onChange,
     panelId: panelId
-  }, items.map(item => createElement(ColorPanelDropdown, _extends({
-    key: item.key
-  }, item, {
+  }, items.map(item => createElement(ColorPanelDropdown, {
+    key: item.key,
+    ...item,
     colorGradientControlSettings: {
       colors,
       disableCustomColors: !areCustomSolidsEnabled,
@@ -552,6 +509,6 @@ export default function ColorPanel(_ref7) {
       disableCustomGradients: !areCustomGradientsEnabled
     },
     panelId: panelId
-  }))), children);
+  })), children);
 }
 //# sourceMappingURL=color-panel.js.map