@wordpress/block-editor 15.9.0 → 15.9.1-next.738bb1424.0

package/build/components/global-styles/color-panel.cjs

@@ -0,0 +1,687 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/global-styles/color-panel.js
+var color_panel_exports = {};
+__export(color_panel_exports, {
+  ColorToolsPanel: () => ColorToolsPanel,
+  default: () => ColorPanel,
+  useHasBackgroundColorPanel: () => useHasBackgroundColorPanel,
+  useHasButtonPanel: () => useHasButtonPanel,
+  useHasCaptionPanel: () => useHasCaptionPanel,
+  useHasColorPanel: () => useHasColorPanel,
+  useHasHeadingPanel: () => useHasHeadingPanel,
+  useHasLinkPanel: () => useHasLinkPanel,
+  useHasTextPanel: () => useHasTextPanel
+});
+module.exports = __toCommonJS(color_panel_exports);
+var import_clsx = __toESM(require("clsx"), 1);
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_control = __toESM(require("../colors-gradients/control.cjs"), 1);
+var import_hooks = require("./hooks.cjs");
+var import_utils = require("./utils.cjs");
+var import_object = require("../../utils/object.cjs");
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_icons = require("@wordpress/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
+function useHasColorPanel(settings) {
+  const hasTextPanel = useHasTextPanel(settings);
+  const hasBackgroundPanel = useHasBackgroundColorPanel(settings);
+  const hasLinkPanel = useHasLinkPanel(settings);
+  const hasHeadingPanel = useHasHeadingPanel(settings);
+  const hasButtonPanel = useHasButtonPanel(settings);
+  const hasCaptionPanel = useHasCaptionPanel(settings);
+  return hasTextPanel || hasBackgroundPanel || hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
+}
+function useHasTextPanel(settings) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  return settings?.color?.text && (colors?.length > 0 || settings?.color?.custom);
+}
+function useHasLinkPanel(settings) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  return settings?.color?.link && (colors?.length > 0 || settings?.color?.custom);
+}
+function useHasCaptionPanel(settings) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  return settings?.color?.caption && (colors?.length > 0 || settings?.color?.custom);
+}
+function useHasHeadingPanel(settings) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
+  return settings?.color?.heading && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
+}
+function useHasButtonPanel(settings) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
+  return settings?.color?.button && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
+}
+function useHasBackgroundColorPanel(settings) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
+  return settings?.color?.background && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
+}
+function ColorToolsPanel({
+  resetAllFilter,
+  onChange,
+  value,
+  panelId,
+  children,
+  label
+}) {
+  const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanel,
+    {
+      label: label || (0, import_i18n.__)("Elements"),
+      resetAll,
+      panelId,
+      hasInnerWrapper: true,
+      headingLevel: 3,
+      className: "color-block-support-panel",
+      __experimentalFirstVisibleItemClass: "first",
+      __experimentalLastVisibleItemClass: "last",
+      dropdownMenuProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "color-block-support-panel__inner-wrapper", children })
+    }
+  );
+}
+var DEFAULT_CONTROLS = {
+  text: true,
+  background: true,
+  link: true,
+  heading: true,
+  button: true,
+  caption: true
+};
+var popoverProps = {
+  placement: "left-start",
+  offset: 36,
+  shift: true
+};
+var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+var LabeledColorIndicators = ({ indicators, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalZStack, { isLayered: false, offset: -8, children: indicators.map((indicator, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Flex, { expanded: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ColorIndicator, { colorValue: indicator }) }, index)) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { className: "block-editor-panel-color-gradient-settings__color-name", children: label })
+] });
+function ColorPanelTab({
+  isGradient,
+  inheritedValue,
+  userValue,
+  setValue,
+  colorGradientControlSettings
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_control.default,
+    {
+      ...colorGradientControlSettings,
+      showTitle: false,
+      enableAlpha: true,
+      __experimentalIsRenderedInSidebar: true,
+      colorValue: isGradient ? void 0 : inheritedValue,
+      gradientValue: isGradient ? inheritedValue : void 0,
+      onColorChange: isGradient ? void 0 : setValue,
+      onGradientChange: isGradient ? setValue : void 0,
+      clearable: inheritedValue === userValue,
+      headingLevel: 3
+    }
+  );
+}
+function ColorPanelDropdown({
+  label,
+  hasValue,
+  resetValue,
+  isShownByDefault,
+  indicators,
+  tabs,
+  colorGradientControlSettings,
+  panelId
+}) {
+  const currentTab = tabs.find((tab) => tab.userValue !== void 0);
+  const { key: firstTabKey, ...firstTab } = tabs[0] ?? {};
+  const colorGradientDropdownButtonRef = (0, import_element.useRef)(void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanelItem,
+    {
+      className: "block-editor-tools-panel-color-gradient-settings__item",
+      hasValue,
+      label,
+      onDeselect: resetValue,
+      isShownByDefault,
+      panelId,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Dropdown,
+        {
+          popoverProps,
+          className: "block-editor-tools-panel-color-gradient-settings__dropdown",
+          renderToggle: ({ onToggle, isOpen }) => {
+            const toggleProps = {
+              onClick: onToggle,
+              className: (0, import_clsx.default)(
+                "block-editor-panel-color-gradient-settings__dropdown",
+                { "is-open": isOpen }
+              ),
+              "aria-expanded": isOpen,
+              ref: colorGradientDropdownButtonRef
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { ...toggleProps, __next40pxDefaultSize: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                LabeledColorIndicators,
+                {
+                  indicators,
+                  label
+                }
+              ) }),
+              hasValue() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  label: (0, import_i18n.__)("Reset"),
+                  className: "block-editor-panel-color-gradient-settings__reset",
+                  size: "small",
+                  icon: import_icons.reset,
+                  onClick: () => {
+                    resetValue();
+                    if (isOpen) {
+                      onToggle();
+                    }
+                    colorGradientDropdownButtonRef.current?.focus();
+                  }
+                }
+              )
+            ] });
+          },
+          renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalDropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-panel-color-gradient-settings__dropdown-content", children: [
+            tabs.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ColorPanelTab,
+              {
+                ...firstTab,
+                colorGradientControlSettings
+              },
+              firstTabKey
+            ),
+            tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { defaultTabId: currentTab?.key, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                Tabs.Tab,
+                {
+                  tabId: tab.key,
+                  children: tab.label
+                },
+                tab.key
+              )) }),
+              tabs.map((tab) => {
+                const { key: tabKey, ...restTabProps } = tab;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
+                  {
+                    tabId: tabKey,
+                    focusable: false,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ColorPanelTab,
+                      {
+                        ...restTabProps,
+                        colorGradientControlSettings
+                      },
+                      tabKey
+                    )
+                  },
+                  tabKey
+                );
+              })
+            ] })
+          ] }) })
+        }
+      )
+    }
+  );
+}
+function ColorPanel({
+  as: Wrapper = ColorToolsPanel,
+  value,
+  onChange,
+  inheritedValue = value,
+  settings,
+  panelId,
+  defaultControls = DEFAULT_CONTROLS,
+  label,
+  children
+}) {
+  const colors = (0, import_hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
+  const areCustomSolidsEnabled = settings?.color?.custom;
+  const areCustomGradientsEnabled = settings?.color?.customGradient;
+  const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+  const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+  const decodeValue = (rawValue) => (0, import_global_styles_engine.getValueFromVariable)({ settings }, "", rawValue);
+  const encodeColorValue = (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(
+      ({ gradients: originGradients }) => originGradients
+    );
+    const gradientObject = allGradients.find(
+      ({ gradient: gradient2 }) => gradient2 === gradientValue
+    );
+    return gradientObject ? "var:preset|gradient|" + gradientObject.slug : gradientValue;
+  };
+  const showBackgroundPanel = useHasBackgroundColorPanel(settings);
+  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;
+  const setBackgroundColor = (newColor) => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "background"],
+      encodeColorValue(newColor)
+    );
+    newValue.color.gradient = void 0;
+    onChange(newValue);
+  };
+  const setGradient = (newGradient) => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "gradient"],
+      encodeGradientValue(newGradient)
+    );
+    newValue.color.background = void 0;
+    onChange(newValue);
+  };
+  const resetBackground = () => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "background"],
+      void 0
+    );
+    newValue.color.gradient = void 0;
+    onChange(newValue);
+  };
+  const showLinkPanel = useHasLinkPanel(settings);
+  const linkColor = decodeValue(
+    inheritedValue?.elements?.link?.color?.text
+  );
+  const userLinkColor = decodeValue(value?.elements?.link?.color?.text);
+  const setLinkColor = (newColor) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["elements", "link", "color", "text"],
+        encodeColorValue(newColor)
+      )
+    );
+  };
+  const hoverLinkColor = decodeValue(
+    inheritedValue?.elements?.link?.[":hover"]?.color?.text
+  );
+  const userHoverLinkColor = decodeValue(
+    value?.elements?.link?.[":hover"]?.color?.text
+  );
+  const setHoverLinkColor = (newColor) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["elements", "link", ":hover", "color", "text"],
+        encodeColorValue(newColor)
+      )
+    );
+  };
+  const hasLink = () => !!userLinkColor || !!userHoverLinkColor;
+  const resetLink = () => {
+    let newValue = (0, import_object.setImmutably)(
+      value,
+      ["elements", "link", ":hover", "color", "text"],
+      void 0
+    );
+    newValue = (0, import_object.setImmutably)(
+      newValue,
+      ["elements", "link", "color", "text"],
+      void 0
+    );
+    onChange(newValue);
+  };
+  const showTextPanel = useHasTextPanel(settings);
+  const textColor = decodeValue(inheritedValue?.color?.text);
+  const userTextColor = decodeValue(value?.color?.text);
+  const hasTextColor = () => !!userTextColor;
+  const setTextColor = (newColor) => {
+    let changedObject = (0, import_object.setImmutably)(
+      value,
+      ["color", "text"],
+      encodeColorValue(newColor)
+    );
+    if (textColor === linkColor) {
+      changedObject = (0, import_object.setImmutably)(
+        changedObject,
+        ["elements", "link", "color", "text"],
+        encodeColorValue(newColor)
+      );
+    }
+    onChange(changedObject);
+  };
+  const resetTextColor = () => setTextColor(void 0);
+  const elements = [
+    {
+      name: "caption",
+      label: (0, import_i18n.__)("Captions"),
+      showPanel: useHasCaptionPanel(settings)
+    },
+    {
+      name: "button",
+      label: (0, import_i18n.__)("Button"),
+      showPanel: useHasButtonPanel(settings)
+    },
+    {
+      name: "heading",
+      label: (0, import_i18n.__)("Heading"),
+      showPanel: useHasHeadingPanel(settings)
+    },
+    {
+      name: "h1",
+      label: (0, import_i18n.__)("H1"),
+      showPanel: useHasHeadingPanel(settings)
+    },
+    {
+      name: "h2",
+      label: (0, import_i18n.__)("H2"),
+      showPanel: useHasHeadingPanel(settings)
+    },
+    {
+      name: "h3",
+      label: (0, import_i18n.__)("H3"),
+      showPanel: useHasHeadingPanel(settings)
+    },
+    {
+      name: "h4",
+      label: (0, import_i18n.__)("H4"),
+      showPanel: useHasHeadingPanel(settings)
+    },
+    {
+      name: "h5",
+      label: (0, import_i18n.__)("H5"),
+      showPanel: useHasHeadingPanel(settings)
+    },
+    {
+      name: "h6",
+      label: (0, import_i18n.__)("H6"),
+      showPanel: useHasHeadingPanel(settings)
+    }
+  ];
+  const resetAllFilter = (0, import_element.useCallback)(
+    (previousValue) => {
+      return {
+        ...previousValue,
+        color: void 0,
+        elements: {
+          ...previousValue?.elements,
+          link: {
+            ...previousValue?.elements?.link,
+            color: void 0,
+            ":hover": {
+              color: void 0
+            }
+          },
+          ...elements.reduce((acc, element) => {
+            return {
+              ...acc,
+              [element.name]: {
+                ...previousValue?.elements?.[element.name],
+                color: void 0
+              }
+            };
+          }, {})
+        }
+      };
+    },
+    [elements]
+  );
+  const items = [
+    showTextPanel && {
+      key: "text",
+      label: (0, import_i18n.__)("Text"),
+      hasValue: hasTextColor,
+      resetValue: resetTextColor,
+      isShownByDefault: defaultControls.text,
+      indicators: [textColor],
+      tabs: [
+        {
+          key: "text",
+          label: (0, import_i18n.__)("Text"),
+          inheritedValue: textColor,
+          setValue: setTextColor,
+          userValue: userTextColor
+        }
+      ]
+    },
+    showBackgroundPanel && {
+      key: "background",
+      label: (0, import_i18n.__)("Background"),
+      hasValue: hasBackground,
+      resetValue: resetBackground,
+      isShownByDefault: defaultControls.background,
+      indicators: [gradient ?? backgroundColor],
+      tabs: [
+        hasSolidColors && {
+          key: "background",
+          label: (0, import_i18n.__)("Color"),
+          inheritedValue: backgroundColor,
+          setValue: setBackgroundColor,
+          userValue: userBackgroundColor
+        },
+        hasGradientColors && {
+          key: "gradient",
+          label: (0, import_i18n.__)("Gradient"),
+          inheritedValue: gradient,
+          setValue: setGradient,
+          userValue: userGradient,
+          isGradient: true
+        }
+      ].filter(Boolean)
+    },
+    showLinkPanel && {
+      key: "link",
+      label: (0, import_i18n.__)("Link"),
+      hasValue: hasLink,
+      resetValue: resetLink,
+      isShownByDefault: defaultControls.link,
+      indicators: [linkColor, hoverLinkColor],
+      tabs: [
+        {
+          key: "link",
+          label: (0, import_i18n.__)("Default"),
+          inheritedValue: linkColor,
+          setValue: setLinkColor,
+          userValue: userLinkColor
+        },
+        {
+          key: "hover",
+          label: (0, import_i18n.__)("Hover"),
+          inheritedValue: hoverLinkColor,
+          setValue: setHoverLinkColor,
+          userValue: userHoverLinkColor
+        }
+      ]
+    }
+  ].filter(Boolean);
+  elements.forEach(({ name, label: elementLabel, showPanel }) => {
+    if (!showPanel) {
+      return;
+    }
+    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);
+    const resetElement = () => {
+      const newValue = (0, import_object.setImmutably)(
+        value,
+        ["elements", name, "color", "background"],
+        void 0
+      );
+      newValue.elements[name].color.gradient = void 0;
+      newValue.elements[name].color.text = void 0;
+      onChange(newValue);
+    };
+    const setElementTextColor = (newTextColor) => {
+      onChange(
+        (0, import_object.setImmutably)(
+          value,
+          ["elements", name, "color", "text"],
+          encodeColorValue(newTextColor)
+        )
+      );
+    };
+    const setElementBackgroundColor = (newBackgroundColor) => {
+      const newValue = (0, import_object.setImmutably)(
+        value,
+        ["elements", name, "color", "background"],
+        encodeColorValue(newBackgroundColor)
+      );
+      newValue.elements[name].color.gradient = void 0;
+      onChange(newValue);
+    };
+    const setElementGradient = (newGradient) => {
+      const newValue = (0, import_object.setImmutably)(
+        value,
+        ["elements", name, "color", "gradient"],
+        encodeGradientValue(newGradient)
+      );
+      newValue.elements[name].color.background = void 0;
+      onChange(newValue);
+    };
+    const supportsTextColor = true;
+    const supportsBackground = name !== "caption";
+    items.push({
+      key: name,
+      label: elementLabel,
+      hasValue: hasElement,
+      resetValue: resetElement,
+      isShownByDefault: defaultControls[name],
+      indicators: supportsTextColor && supportsBackground ? [
+        elementTextColor,
+        elementGradient ?? elementBackgroundColor
+      ] : [
+        supportsTextColor ? elementTextColor : elementGradient ?? elementBackgroundColor
+      ],
+      tabs: [
+        hasSolidColors && supportsTextColor && {
+          key: "text",
+          label: (0, import_i18n.__)("Text"),
+          inheritedValue: elementTextColor,
+          setValue: setElementTextColor,
+          userValue: elementTextUserColor
+        },
+        hasSolidColors && supportsBackground && {
+          key: "background",
+          label: (0, import_i18n.__)("Background"),
+          inheritedValue: elementBackgroundColor,
+          setValue: setElementBackgroundColor,
+          userValue: elementBackgroundUserColor
+        },
+        hasGradientColors && supportsBackground && {
+          key: "gradient",
+          label: (0, import_i18n.__)("Gradient"),
+          inheritedValue: elementGradient,
+          setValue: setElementGradient,
+          userValue: elementGradientUserColor,
+          isGradient: true
+        }
+      ].filter(Boolean)
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Wrapper,
+    {
+      resetAllFilter,
+      value,
+      onChange,
+      panelId,
+      label,
+      children: [
+        items.map((item) => {
+          const { key, ...restItem } = item;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ColorPanelDropdown,
+            {
+              ...restItem,
+              colorGradientControlSettings: {
+                colors,
+                disableCustomColors: !areCustomSolidsEnabled,
+                gradients,
+                disableCustomGradients: !areCustomGradientsEnabled
+              },
+              panelId
+            },
+            key
+          );
+        }),
+        children
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorToolsPanel,
+  useHasBackgroundColorPanel,
+  useHasButtonPanel,
+  useHasCaptionPanel,
+  useHasColorPanel,
+  useHasHeadingPanel,
+  useHasLinkPanel,
+  useHasTextPanel
+});
+//# sourceMappingURL=color-panel.cjs.map