@wordpress/global-styles-ui 1.1.0

package/README.md

@@ -0,0 +1,48 @@
+# Global Styles UI
+
+UI components for managing WordPress Global Styles.
+
+## Installation
+
+Install the module:
+
+```bash
+npm install @wordpress/global-styles-ui --save
+```
+
+## Usage
+
+```js
+import { GlobalStylesUI } from '@wordpress/global-styles-ui';
+
+function MyComponent() {
+	return (
+		<GlobalStylesUI
+			value={ userStyles }
+			baseValue={ themeStyles }
+			onChange={ handleChange }
+		/>
+	);
+}
+```
+
+## API
+
+### GlobalStylesUI
+
+Main component for the Global Styles editor interface.
+
+**Props:**
+
+-   `value` (GlobalStylesConfig): User's custom global styles
+-   `baseValue` (GlobalStylesConfig): Theme's default global styles
+-   `onChange` (Function): Callback when styles change
+-   `path` (string, optional): Current navigation path
+-   `onPathChange` (Function, optional): Callback when path changes
+-   `fontLibraryEnabled` (boolean, optional): Enable font library features
+-   `serverCSS` (array, optional): Server CSS styles
+-   `serverSettings` (object, optional): Server settings
+
+## Contributing
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for details.

package/build/background-panel.js

@@ -0,0 +1,62 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var background_panel_exports = {};
+__export(background_panel_exports, {
+  default: () => BackgroundPanel,
+  hasBackgroundImageValue: () => hasBackgroundImageValue
+});
+module.exports = __toCommonJS(background_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_block_editor = require("@wordpress/block-editor");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const BACKGROUND_DEFAULT_VALUES = {
+  backgroundSize: "auto"
+};
+const { BackgroundPanel: StylesBackgroundPanel } = (0, import_lock_unlock.unlock)(
+  import_block_editor.privateApis
+);
+function hasBackgroundImageValue(style) {
+  return !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url || typeof style?.background?.backgroundImage === "string";
+}
+function BackgroundPanel() {
+  const [style] = (0, import_hooks.useStyle)("", void 0, "user", false);
+  const [inheritedStyle, setStyle] = (0, import_hooks.useStyle)(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  const [settings] = (0, import_hooks.useSetting)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StylesBackgroundPanel,
+    {
+      inheritedValue: inheritedStyle,
+      value: style,
+      onChange: setStyle,
+      settings,
+      defaultValues: BACKGROUND_DEFAULT_VALUES
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  hasBackgroundImageValue
+});
+//# sourceMappingURL=background-panel.js.map

package/build/background-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/background-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\n// Initial control values where no block style is set.\nconst BACKGROUND_DEFAULT_VALUES = {\n\tbackgroundSize: 'auto',\n};\n\nconst { BackgroundPanel: StylesBackgroundPanel } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param style Style attribute.\n * @return Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style: any ): boolean {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t!! style?.background?.backgroundImage?.url ||\n\t\ttypeof style?.background?.backgroundImage === 'string'\n\t);\n}\n\nexport default function BackgroundPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ settings ] = useSetting( '' );\n\n\treturn (\n\t\t<StylesBackgroundPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t\tdefaultValues={ BACKGROUND_DEFAULT_VALUES }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CE;AA3CF,0BAAsD;AAKtD,mBAAqC;AACrC,yBAAuB;AAGvB,MAAM,4BAA4B;AAAA,EACjC,gBAAgB;AACjB;AAEA,MAAM,EAAE,iBAAiB,sBAAsB,QAAI;AAAA,EAClD,oBAAAA;AACD;AASO,SAAS,wBAAyB,OAAsB;AAC9D,SACC,CAAC,CAAE,OAAO,YAAY,iBAAiB,MACvC,CAAC,CAAE,OAAO,YAAY,iBAAiB,OACvC,OAAO,OAAO,YAAY,oBAAoB;AAEhD;AAEe,SAAR,kBAAmC;AACzC,QAAM,CAAE,KAAM,QAAI,uBAAU,IAAI,QAAW,QAAQ,KAAM;AACzD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,QAAS,QAAI,yBAAY,EAAG;AAEpC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA,MACA,eAAgB;AAAA;AAAA,EACjB;AAEF;",
+  "names": ["blockEditorPrivateApis"]
+}

package/build/block-preview-panel.js

@@ -0,0 +1,90 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var block_preview_panel_exports = {};
+__export(block_preview_panel_exports, {
+  default: () => block_preview_panel_default
+});
+module.exports = __toCommonJS(block_preview_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_block_editor = require("@wordpress/block-editor");
+var import_blocks = require("@wordpress/blocks");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_utils = require("./utils");
+const BlockPreviewPanel = ({
+  name,
+  variation = ""
+}) => {
+  const blockExample = (0, import_blocks.getBlockType)(name)?.example;
+  const blocks = (0, import_element.useMemo)(() => {
+    if (!blockExample) {
+      return null;
+    }
+    const example = {
+      ...blockExample,
+      attributes: {
+        ...blockExample.attributes,
+        style: void 0,
+        className: variation ? (0, import_utils.getVariationClassName)(variation) : blockExample.attributes?.className
+      }
+    };
+    return (0, import_blocks.getBlockFromExample)(name, example);
+  }, [name, blockExample, variation]);
+  const viewportWidth = blockExample?.viewportWidth ?? 500;
+  const previewHeight = 144;
+  const sidebarWidth = 235;
+  const scale = sidebarWidth / viewportWidth;
+  const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
+  if (!blockExample) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { marginX: 4, marginBottom: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "global-styles-ui__block-preview-panel",
+      style: { maxHeight: previewHeight, boxSizing: "initial" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.BlockPreview,
+        {
+          blocks,
+          viewportWidth,
+          minHeight: previewHeight,
+          additionalStyles: (
+            //We want this CSS to be in sync with the one in InserterPreviewPanel.
+            [
+              {
+                css: `
+								body{
+									padding: 24px;
+									min-height:${Math.round(minHeight)}px;
+									display:flex;
+									align-items:center;
+								}
+								.is-root-container { width: 100%; }
+							`
+              }
+            ]
+          )
+        }
+      )
+    }
+  ) });
+};
+var block_preview_panel_default = BlockPreviewPanel;
+//# sourceMappingURL=block-preview-panel.js.map

package/build/block-preview-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/block-preview-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { BlockPreview } from '@wordpress/block-editor';\n// @ts-expect-error: Not typed yet.\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getVariationClassName } from './utils';\n\ninterface BlockPreviewPanelProps {\n\tname: string;\n\tvariation?: string;\n}\n\nconst BlockPreviewPanel = ( {\n\tname,\n\tvariation = '',\n}: BlockPreviewPanelProps ) => {\n\tconst blockExample = getBlockType( name )?.example;\n\tconst blocks = useMemo( () => {\n\t\tif ( ! blockExample ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst example = {\n\t\t\t...blockExample,\n\t\t\tattributes: {\n\t\t\t\t...blockExample.attributes,\n\t\t\t\tstyle: undefined,\n\t\t\t\tclassName: variation\n\t\t\t\t\t? getVariationClassName( variation )\n\t\t\t\t\t: blockExample.attributes?.className,\n\t\t\t},\n\t\t};\n\n\t\treturn getBlockFromExample( name, example );\n\t}, [ name, blockExample, variation ] );\n\n\tconst viewportWidth = blockExample?.viewportWidth ?? 500;\n\t// Same as height of InserterPreviewPanel.\n\tconst previewHeight = 144;\n\tconst sidebarWidth = 235;\n\tconst scale = sidebarWidth / viewportWidth;\n\tconst minHeight =\n\t\tscale !== 0 && scale < 1 && previewHeight\n\t\t\t? previewHeight / scale\n\t\t\t: previewHeight;\n\n\tif ( ! blockExample ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Spacer marginX={ 4 } marginBottom={ 4 }>\n\t\t\t<div\n\t\t\t\tclassName=\"global-styles-ui__block-preview-panel\"\n\t\t\t\tstyle={ { maxHeight: previewHeight, boxSizing: 'initial' } }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tminHeight={ previewHeight }\n\t\t\t\t\tadditionalStyles={\n\t\t\t\t\t\t//We want this CSS to be in sync with the one in InserterPreviewPanel.\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tcss: `\n\t\t\t\t\t\t\t\tbody{\n\t\t\t\t\t\t\t\t\tpadding: 24px;\n\t\t\t\t\t\t\t\t\tmin-height:${ Math.round( minHeight ) }px;\n\t\t\t\t\t\t\t\t\tdisplay:flex;\n\t\t\t\t\t\t\t\t\talign-items:center;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t.is-root-container { width: 100%; }\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Spacer>\n\t);\n};\n\nexport default BlockPreviewPanel;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEI;AA5DJ,0BAA6B;AAE7B,oBAAkD;AAClD,wBAA+C;AAC/C,qBAAwB;AAKxB,mBAAsC;AAOtC,MAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA,YAAY;AACb,MAA+B;AAC9B,QAAM,mBAAe,4BAAc,IAAK,GAAG;AAC3C,QAAM,aAAS,wBAAS,MAAM;AAC7B,QAAK,CAAE,cAAe;AACrB,aAAO;AAAA,IACR;AAEA,UAAM,UAAU;AAAA,MACf,GAAG;AAAA,MACH,YAAY;AAAA,QACX,GAAG,aAAa;AAAA,QAChB,OAAO;AAAA,QACP,WAAW,gBACR,oCAAuB,SAAU,IACjC,aAAa,YAAY;AAAA,MAC7B;AAAA,IACD;AAEA,eAAO,mCAAqB,MAAM,OAAQ;AAAA,EAC3C,GAAG,CAAE,MAAM,cAAc,SAAU,CAAE;AAErC,QAAM,gBAAgB,cAAc,iBAAiB;AAErD,QAAM,gBAAgB;AACtB,QAAM,eAAe;AACrB,QAAM,QAAQ,eAAe;AAC7B,QAAM,YACL,UAAU,KAAK,QAAQ,KAAK,gBACzB,gBAAgB,QAChB;AAEJ,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,kBAAAA,sBAAA,EAAO,SAAU,GAAI,cAAe,GACpC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,EAAE,WAAW,eAAe,WAAW,UAAU;AAAA,MAEzD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAY;AAAA,UACZ;AAAA;AAAA,YAEC;AAAA,cACC;AAAA,gBACC,KAAK;AAAA;AAAA;AAAA,sBAGU,KAAK,MAAO,SAAU,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxC;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "names": ["Spacer"]
+}

package/build/color-indicator-wrapper.js

@@ -0,0 +1,55 @@
+"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);
+var color_indicator_wrapper_exports = {};
+__export(color_indicator_wrapper_exports, {
+  default: () => color_indicator_wrapper_default
+});
+module.exports = __toCommonJS(color_indicator_wrapper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+function ColorIndicatorWrapper({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Flex,
+    {
+      className: (0, import_clsx.default)(
+        "global-styles-ui__color-indicator-wrapper",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var color_indicator_wrapper_default = ColorIndicatorWrapper;
+//# sourceMappingURL=color-indicator-wrapper.js.map

package/build/color-indicator-wrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/color-indicator-wrapper.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Flex } from '@wordpress/components';\n\ninterface ColorIndicatorWrapperProps {\n\tclassName?: string;\n\t[ key: string ]: any;\n}\n\nfunction ColorIndicatorWrapper( {\n\tclassName,\n\tchildren,\n\t...props\n}: ColorIndicatorWrapperProps ) {\n\treturn (\n\t\t<Flex\n\t\t\tclassName={ clsx(\n\t\t\t\t'global-styles-ui__color-indicator-wrapper',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Flex>\n\t);\n}\n\nexport default ColorIndicatorWrapper;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBE;AAlBF,kBAAiB;AAKjB,wBAAqB;AAOrB,SAAS,sBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAgC;AAC/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAA;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,kCAAQ;",
+  "names": ["clsx"]
+}

package/build/color-palette-panel.js

@@ -0,0 +1,123 @@
+"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);
+var color_palette_panel_exports = {};
+__export(color_palette_panel_exports, {
+  default: () => ColorPalettePanel
+});
+module.exports = __toCommonJS(color_palette_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose = require("@wordpress/compose");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_hooks = require("./hooks");
+var import_variations_color = __toESM(require("./variations/variations-color"));
+const mobilePopoverProps = { placement: "bottom-start", offset: 8 };
+function ColorPalettePanel({ name }) {
+  const [themeColors, setThemeColors] = (0, import_hooks.useSetting)(
+    "color.palette.theme",
+    name
+  );
+  const [baseThemeColors] = (0, import_hooks.useSetting)(
+    "color.palette.theme",
+    name,
+    "base"
+  );
+  const [defaultColors, setDefaultColors] = (0, import_hooks.useSetting)(
+    "color.palette.default",
+    name
+  );
+  const [baseDefaultColors] = (0, import_hooks.useSetting)(
+    "color.palette.default",
+    name,
+    "base"
+  );
+  const [customColors, setCustomColors] = (0, import_hooks.useSetting)(
+    "color.palette.custom",
+    name
+  );
+  const [defaultPaletteEnabled] = (0, import_hooks.useSetting)(
+    "color.defaultPalette",
+    name
+  );
+  const isMobileViewport = (0, import_compose.useViewportMatch)("small", "<");
+  const popoverProps = isMobileViewport ? mobilePopoverProps : void 0;
+  const [randomizeThemeColors] = (0, import_hooks.useColorRandomizer)(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { className: "global-styles-ui-color-palette-panel", spacing: 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+      !!themeColors && !!themeColors.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalPaletteEdit,
+        {
+          canReset: themeColors !== baseThemeColors,
+          canOnlyChangeValues: true,
+          colors: themeColors,
+          onChange: setThemeColors,
+          paletteLabel: (0, import_i18n.__)("Theme"),
+          paletteLabelHeadingLevel: 3,
+          popoverProps
+        }
+      ),
+      window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && randomizeThemeColors && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          __next40pxDefaultSize: true,
+          variant: "secondary",
+          icon: import_icons.shuffle,
+          onClick: randomizeThemeColors,
+          children: (0, import_i18n.__)("Randomize colors")
+        }
+      )
+    ] }),
+    !!defaultColors && !!defaultColors.length && !!defaultPaletteEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalPaletteEdit,
+      {
+        canReset: defaultColors !== baseDefaultColors,
+        canOnlyChangeValues: true,
+        colors: defaultColors,
+        onChange: setDefaultColors,
+        paletteLabel: (0, import_i18n.__)("Default"),
+        paletteLabelHeadingLevel: 3,
+        popoverProps
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalPaletteEdit,
+      {
+        colors: customColors,
+        onChange: setCustomColors,
+        paletteLabel: (0, import_i18n.__)("Custom"),
+        paletteLabelHeadingLevel: 3,
+        slugPrefix: "custom-",
+        popoverProps
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variations_color.default, { title: (0, import_i18n.__)("Palettes") })
+  ] });
+}
+//# sourceMappingURL=color-palette-panel.js.map

package/build/color-palette-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/color-palette-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Color } from '@wordpress/global-styles-engine';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalVStack as VStack,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useColorRandomizer } from './hooks';\nimport ColorVariations from './variations/variations-color';\n\nconst mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 };\n\ninterface ColorPalettePanelProps {\n\tname?: string;\n}\n\nexport default function ColorPalettePanel( { name }: ColorPalettePanelProps ) {\n\tconst [ themeColors, setThemeColors ] = useSetting< Color[] >(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\tconst [ baseThemeColors ] = useSetting< Color[] >(\n\t\t'color.palette.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultColors, setDefaultColors ] = useSetting< Color[] >(\n\t\t'color.palette.default',\n\t\tname\n\t);\n\tconst [ baseDefaultColors ] = useSetting< Color[] >(\n\t\t'color.palette.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customColors, setCustomColors ] = useSetting< Color[] >(\n\t\t'color.palette.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer( name );\n\n\treturn (\n\t\t<VStack className=\"global-styles-ui-color-palette-panel\" spacing={ 8 }>\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t{ !! themeColors && !! themeColors.length && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ themeColors !== baseThemeColors }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tcolors={ themeColors }\n\t\t\t\t\t\tonChange={ setThemeColors }\n\t\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ( window as any ).__experimentalEnableColorRandomizer &&\n\t\t\t\t\tthemeColors?.length > 0 &&\n\t\t\t\t\trandomizeThemeColors && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t</VStack>\n\t\t\t{ !! defaultColors &&\n\t\t\t\t!! defaultColors.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultColors !== baseDefaultColors }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tcolors={ defaultColors }\n\t\t\t\t\t\tonChange={ setDefaultColors }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tcolors={ customColors }\n\t\t\t\tonChange={ setCustomColors }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t<ColorVariations title={ __( 'Palettes' ) } />\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DG;AAzDH,qBAAiC;AACjC,wBAIO;AACP,kBAAmB;AACnB,mBAAwB;AAKxB,mBAA+C;AAC/C,8BAA4B;AAE5B,MAAM,qBAAqB,EAAE,WAAW,gBAAyB,QAAQ,EAAE;AAM5D,SAAR,kBAAoC,EAAE,KAAK,GAA4B;AAC7E,QAAM,CAAE,aAAa,cAAe,QAAI;AAAA,IACvC;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,eAAgB,QAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,eAAe,gBAAiB,QAAI;AAAA,IAC3C;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,iBAAkB,QAAI;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,cAAc,eAAgB,QAAI;AAAA,IACzC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,qBAAsB,QAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,uBAAmB,iCAAkB,SAAS,GAAI;AACxD,QAAM,eAAe,mBAAmB,qBAAqB;AAE7D,QAAM,CAAE,oBAAqB,QAAI,iCAAoB,IAAK;AAE1D,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,wCAAuC,SAAU,GAClE;AAAA,iDAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA,OAAC,CAAE,eAAe,CAAC,CAAE,YAAY,UAClC;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,UAAW,gBAAgB;AAAA,UAC3B,qBAAmB;AAAA,UACnB,QAAS;AAAA,UACT,UAAW;AAAA,UACX,kBAAe,gBAAI,OAAQ;AAAA,UAC3B,0BAA2B;AAAA,UAC3B;AAAA;AAAA,MACD;AAAA,MAEG,OAAgB,uCACnB,aAAa,SAAS,KACtB,wBACC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,SAAQ;AAAA,UACR,MAAO;AAAA,UACP,SAAU;AAAA,UAER,8BAAI,kBAAmB;AAAA;AAAA,MAC1B;AAAA,OAEH;AAAA,IACE,CAAC,CAAE,iBACJ,CAAC,CAAE,cAAc,UACjB,CAAC,CAAE,yBACF;AAAA,MAAC,kBAAAA;AAAA,MAAA;AAAA,QACA,UAAW,kBAAkB;AAAA,QAC7B,qBAAmB;AAAA,QACnB,QAAS;AAAA,QACT,UAAW;AAAA,QACX,kBAAe,gBAAI,SAAU;AAAA,QAC7B,0BAA2B;AAAA,QAC3B;AAAA;AAAA,IACD;AAAA,IAEF;AAAA,MAAC,kBAAAA;AAAA,MAAA;AAAA,QACA,QAAS;AAAA,QACT,UAAW;AAAA,QACX,kBAAe,gBAAI,QAAS;AAAA,QAC5B,0BAA2B;AAAA,QAC3B,YAAW;AAAA,QACX;AAAA;AAAA,IACD;AAAA,IACA,4CAAC,wBAAAC,SAAA,EAAgB,WAAQ,gBAAI,UAAW,GAAI;AAAA,KAC7C;AAEF;",
+  "names": ["VStack", "PaletteEdit", "ColorVariations"]
+}

package/build/color-preview.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_preview_exports = {};
+__export(color_preview_exports, {
+  ColorPreview: () => ColorPreview
+});
+module.exports = __toCommonJS(color_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_context = require("./context");
+function ColorPreview() {
+  const { merged } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const backgroundColor = (0, import_global_styles_engine.getStyle)(merged, "color.background") || "#ffffff";
+  const textColor = (0, import_global_styles_engine.getStyle)(merged, "color.text") || "#000000";
+  const palette = merged?.settings?.color?.palette;
+  let paletteColors = [];
+  if (Array.isArray(palette)) {
+    paletteColors = palette;
+  } else if (palette && typeof palette === "object") {
+    paletteColors = palette.theme || palette.custom || [];
+  }
+  const previewColors = paletteColors.slice(0, 4);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalHStack,
+    {
+      spacing: 0,
+      justify: "center",
+      style: {
+        height: "100%",
+        overflow: "hidden",
+        minHeight: "40px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              backgroundColor,
+              width: "25%",
+              height: "100%",
+              minHeight: "40px"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              backgroundColor: textColor,
+              width: "25%",
+              height: "100%",
+              minHeight: "40px"
+            }
+          }
+        ),
+        previewColors.slice(0, 2).map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              backgroundColor: color.color,
+              width: "25%",
+              height: "100%",
+              minHeight: "40px"
+            }
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPreview
+});
+//# sourceMappingURL=color-preview.js.map

package/build/color-preview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/color-preview.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\nimport { getStyle } from '@wordpress/global-styles-engine';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\n\nexport function ColorPreview() {\n\tconst { merged } = useContext( GlobalStylesContext );\n\n\t// Extract main colors from the global styles\n\tconst backgroundColor = getStyle( merged, 'color.background' ) || '#ffffff';\n\tconst textColor = getStyle( merged, 'color.text' ) || '#000000';\n\n\t// Get color palette - handle both array and object formats\n\tconst palette = merged?.settings?.color?.palette;\n\tlet paletteColors: Color[] = [];\n\n\tif ( Array.isArray( palette ) ) {\n\t\tpaletteColors = palette;\n\t} else if ( palette && typeof palette === 'object' ) {\n\t\tpaletteColors = palette.theme || palette.custom || [];\n\t}\n\n\t// Get first few colors from palette for preview\n\tconst previewColors = paletteColors.slice( 0, 4 );\n\n\treturn (\n\t\t<HStack\n\t\t\tspacing={ 0 }\n\t\t\tjustify=\"center\"\n\t\t\tstyle={ {\n\t\t\t\theight: '100%',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tminHeight: '40px',\n\t\t\t} }\n\t\t>\n\t\t\t{ /* Background color swatch */ }\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackgroundColor,\n\t\t\t\t\twidth: '25%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tminHeight: '40px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ /* Text color swatch */ }\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackgroundColor: textColor,\n\t\t\t\t\twidth: '25%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tminHeight: '40px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ /* Palette colors */ }\n\t\t\t{ previewColors\n\t\t\t\t.slice( 0, 2 )\n\t\t\t\t.map( ( color: Color, index: number ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tbackgroundColor: color.color,\n\t\t\t\t\t\t\twidth: '25%',\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\tminHeight: '40px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCE;AA/BF,wBAA+C;AAC/C,qBAA2B;AAC3B,kCAAyB;AAMzB,qBAAoC;AAE7B,SAAS,eAAe;AAC9B,QAAM,EAAE,OAAO,QAAI,2BAAY,kCAAoB;AAGnD,QAAM,sBAAkB,sCAAU,QAAQ,kBAAmB,KAAK;AAClE,QAAM,gBAAY,sCAAU,QAAQ,YAAa,KAAK;AAGtD,QAAM,UAAU,QAAQ,UAAU,OAAO;AACzC,MAAI,gBAAyB,CAAC;AAE9B,MAAK,MAAM,QAAS,OAAQ,GAAI;AAC/B,oBAAgB;AAAA,EACjB,WAAY,WAAW,OAAO,YAAY,UAAW;AACpD,oBAAgB,QAAQ,SAAS,QAAQ,UAAU,CAAC;AAAA,EACrD;AAGA,QAAM,gBAAgB,cAAc,MAAO,GAAG,CAAE;AAEhD,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,OAAQ;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,WAAW;AAAA,MACZ;AAAA,MAGA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ;AAAA,cACP;AAAA,cACA,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,YACZ;AAAA;AAAA,QACD;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ;AAAA,cACP,iBAAiB;AAAA,cACjB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,YACZ;AAAA;AAAA,QACD;AAAA,QAEE,cACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,OAAc,UACrB;AAAA,UAAC;AAAA;AAAA,YAEA,OAAQ;AAAA,cACP,iBAAiB,MAAM;AAAA,cACvB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,YACZ;AAAA;AAAA,UANM;AAAA,QAOP,CACC;AAAA;AAAA;AAAA,EACJ;AAEF;",
+  "names": ["HStack"]
+}

package/build/color-variations.js

@@ -0,0 +1,41 @@
+"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);
+var color_variations_exports = {};
+__export(color_variations_exports, {
+  ColorVariations: () => ColorVariations
+});
+module.exports = __toCommonJS(color_variations_exports);
+var import_variations_color = __toESM(require("./variations/variations-color"));
+var import_with_global_styles_provider = require("./with-global-styles-provider");
+const ColorVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_variations_color.default);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorVariations
+});
+//# sourceMappingURL=color-variations.js.map

package/build/color-variations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/color-variations.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport ColorVariationsInternal from './variations/variations-color';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface ColorVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\ttitle?: string;\n\tgap?: number;\n}\n\n/**\n * Render Global Styles Color Variations.\n *\n * @example\n * ```tsx\n * <ColorVariations\n *   value={userConfig}\n *   baseValue={baseConfig}\n *   onChange={setUserConfig}\n *   title=\"Palettes\"\n *   gap={3}\n * />\n * ```\n */\nexport const ColorVariations: React.ComponentType< ColorVariationsProps > =\n\twithGlobalStylesProvider( ColorVariationsInternal );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,8BAAoC;AACpC,yCAAyC;AAwBlC,MAAM,sBACZ,6DAA0B,wBAAAA,OAAwB;",
+  "names": ["ColorVariationsInternal"]
+}

package/build/confirm-reset-shadow-dialog.js

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var confirm_reset_shadow_dialog_exports = {};
+__export(confirm_reset_shadow_dialog_exports, {
+  default: () => confirm_reset_shadow_dialog_default
+});
+module.exports = __toCommonJS(confirm_reset_shadow_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+function ConfirmResetShadowDialog({
+  text,
+  confirmButtonText,
+  isOpen,
+  toggleOpen,
+  onConfirm
+}) {
+  const handleConfirm = async () => {
+    toggleOpen();
+    onConfirm();
+  };
+  const handleCancel = () => {
+    toggleOpen();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalConfirmDialog,
+    {
+      isOpen,
+      cancelButtonText: (0, import_i18n.__)("Cancel"),
+      confirmButtonText,
+      onCancel: handleCancel,
+      onConfirm: handleConfirm,
+      size: "medium",
+      children: text
+    }
+  );
+}
+var confirm_reset_shadow_dialog_default = ConfirmResetShadowDialog;
+//# sourceMappingURL=confirm-reset-shadow-dialog.js.map

package/build/confirm-reset-shadow-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/confirm-reset-shadow-dialog.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\ninterface ConfirmResetShadowDialogProps {\n\ttext: string;\n\tconfirmButtonText: string;\n\tisOpen: boolean;\n\ttoggleOpen: () => void;\n\tonConfirm: () => void;\n}\n\nfunction ConfirmResetShadowDialog( {\n\ttext,\n\tconfirmButtonText,\n\tisOpen,\n\ttoggleOpen,\n\tonConfirm,\n}: ConfirmResetShadowDialogProps ) {\n\tconst handleConfirm = async () => {\n\t\ttoggleOpen();\n\t\tonConfirm();\n\t};\n\n\tconst handleCancel = () => {\n\t\ttoggleOpen();\n\t};\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ confirmButtonText }\n\t\t\tonCancel={ handleCancel }\n\t\t\tonConfirm={ handleConfirm }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t{ text }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default ConfirmResetShadowDialog;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BE;AA5BF,wBAA6D;AAC7D,kBAAmB;AAUnB,SAAS,yBAA0B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,gBAAgB,YAAY;AACjC,eAAW;AACX,cAAU;AAAA,EACX;AAEA,QAAM,eAAe,MAAM;AAC1B,eAAW;AAAA,EACZ;AAEA,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA;AAAA,MACA,sBAAmB,gBAAI,QAAS;AAAA,MAChC;AAAA,MACA,UAAW;AAAA,MACX,WAAY;AAAA,MACZ,MAAK;AAAA,MAEH;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,sCAAQ;",
+  "names": ["ConfirmDialog"]
+}