@wordpress/global-styles-ui 1.17.1-next.v.202607070741.0 → 1.18.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 1.18.0 (2026-07-14)
+
+### Enhancements
+
+-   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
+-   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
+
 ## 1.17.0 (2026-07-01)
 
 ## 1.16.0 (2026-06-24)

package/build/block-preview-panel.cjs

@@ -29,18 +29,51 @@ var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_utils = require("./utils.cjs");
+var import_lock_unlock = require("./lock-unlock.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var PREVIEW_WIDTH_BY_VIEWPORT = {
+var { getViewportBreakpoints, getViewportBreakpointValueInPixels } = (0, import_lock_unlock.unlock)(
+  import_global_styles_engine.privateApis
+);
+var DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT = {
   default: 783,
   "@tablet": 600,
   "@mobile": 480
 };
+function getPreviewWidthByViewport(selectedViewport, viewportSettings) {
+  const breakpoints = getViewportBreakpoints(viewportSettings);
+  const mobileWidth = getViewportBreakpointValueInPixels(
+    breakpoints.mobile
+  );
+  if (selectedViewport === "@mobile" && mobileWidth) {
+    return mobileWidth;
+  }
+  const tabletWidth = getViewportBreakpointValueInPixels(
+    breakpoints.tablet
+  );
+  if (selectedViewport === "@tablet" && tabletWidth) {
+    if (!mobileWidth) {
+      return tabletWidth;
+    }
+    if (breakpoints.mobile === "480px" && breakpoints.tablet === "782px") {
+      return DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT["@tablet"];
+    }
+    return Math.round((mobileWidth + tabletWidth) / 2);
+  }
+  if (selectedViewport === "default") {
+    const desktopBreakpoint = tabletWidth ?? mobileWidth;
+    if (desktopBreakpoint) {
+      return desktopBreakpoint + 1;
+    }
+  }
+  return DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT[selectedViewport];
+}
 var BlockPreviewPanel = ({
   name,
   variation = "",
   selectedViewport = "default",
   selectedState = "default",
-  stateStyles
+  stateStyles,
+  viewportSettings
 }) => {
   const blockExample = (0, import_blocks.getBlockType)(name)?.example;
   const blocks = (0, import_element.useMemo)(() => {
@@ -66,7 +99,7 @@ var BlockPreviewPanel = ({
   if (!blockExample) {
     return null;
   }
-  const viewportWidth = PREVIEW_WIDTH_BY_VIEWPORT[selectedViewport] ?? blockExample.viewportWidth ?? 500;
+  const viewportWidth = getPreviewWidthByViewport(selectedViewport, viewportSettings) ?? blockExample.viewportWidth ?? 500;
   const normalizedViewportWidth = blockExample.viewportWidth ?? 500;
   const previewScale = Math.max(viewportWidth / normalizedViewportWidth, 1);
   const previewPadding = 24 * previewScale;

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

@@ -1,7 +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';\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __unstableGeneratePreviewStateStyles as generatePreviewStateStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { getVariationClassName } from './utils';\n\ninterface BlockPreviewPanelProps {\n\tname: string;\n\tvariation?: string;\n\tselectedViewport?: string;\n\tselectedState?: string;\n\tstateStyles?: any;\n}\n\n// Keep in sync with responsive breakpoint media queries in the global styles engine.\nconst PREVIEW_WIDTH_BY_VIEWPORT: Record< string, number > = {\n\tdefault: 783,\n\t'@tablet': 600,\n\t'@mobile': 480,\n};\n\nconst BlockPreviewPanel = ( {\n\tname,\n\tvariation = '',\n\tselectedViewport = 'default',\n\tselectedState = 'default',\n\tstateStyles,\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\t// Generate CSS for the selected state.\n\tconst stateCSS = useMemo( () => {\n\t\tif ( selectedState === 'default' || ! stateStyles ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn generatePreviewStateStyles( stateStyles, name );\n\t}, [ selectedState, stateStyles, name ] );\n\n\tif ( ! blockExample ) {\n\t\treturn null;\n\t}\n\n\tconst viewportWidth =\n\t\tPREVIEW_WIDTH_BY_VIEWPORT[ selectedViewport ] ??\n\t\tblockExample.viewportWidth ??\n\t\t500;\n\tconst normalizedViewportWidth = blockExample.viewportWidth ?? 500;\n\tconst previewScale = Math.max( viewportWidth / normalizedViewportWidth, 1 );\n\tconst previewPadding = 24 * previewScale;\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\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: ${ previewPadding }px;\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}\n\t\t\t\t\t\t\t\t.is-root-container {\n\t\t\t\t\t\t\t\t\twidth: ${ 100 / previewScale }%;\n\t\t\t\t\t\t\t\t\ttransform: scale(${ previewScale });\n\t\t\t\t\t\t\t\t\ttransform-origin: top left;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t${ stateCSS }\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;AAIA,0BAA6B;AAC7B,oBAAkD;AAClD,wBAA+C;AAC/C,qBAAwB;AACxB,kCAAmF;AAKnF,mBAAsC;AA+ElC;AApEJ,IAAM,4BAAsD;AAAA,EAC3D,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACZ;AAEA,IAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AACD,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;AAGrC,QAAM,eAAW,wBAAS,MAAM;AAC/B,QAAK,kBAAkB,aAAa,CAAE,aAAc;AACnD,aAAO;AAAA,IACR;AAEA,eAAO,4BAAAA,sCAA4B,aAAa,IAAK;AAAA,EACtD,GAAG,CAAE,eAAe,aAAa,IAAK,CAAE;AAExC,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,QAAM,gBACL,0BAA2B,gBAAiB,KAC5C,aAAa,iBACb;AACD,QAAM,0BAA0B,aAAa,iBAAiB;AAC9D,QAAM,eAAe,KAAK,IAAK,gBAAgB,yBAAyB,CAAE;AAC1E,QAAM,iBAAiB,KAAK;AAE5B,QAAM,gBAAgB;AACtB,QAAM,eAAe;AACrB,QAAM,QAAQ,eAAe;AAC7B,QAAM,YACL,UAAU,KAAK,QAAQ,KAAK,gBACzB,gBAAgB,QAChB;AAEJ,SACC,4CAAC,kBAAAC,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,oBAEQ,cAAe;AAAA,sBACb,KAAK,MAAO,SAAU,CAAE;AAAA;AAAA;AAAA;AAAA,kBAI5B,MAAM,YAAa;AAAA,4BACT,YAAa;AAAA;AAAA;AAAA,UAG/B,QAAS;AAAA;AAAA,cAEb;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,8BAAQ;",
-  "names": ["generatePreviewStateStyles", "Spacer"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { BlockPreview } from '@wordpress/block-editor';\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport {\n\tprivateApis as globalStylesEnginePrivateApis,\n\t__unstableGeneratePreviewStateStyles as generatePreviewStateStyles,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { getVariationClassName } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { getViewportBreakpoints, getViewportBreakpointValueInPixels } = unlock(\n\tglobalStylesEnginePrivateApis\n);\n\ninterface BlockPreviewPanelProps {\n\tname: string;\n\tvariation?: string;\n\tselectedViewport?: string;\n\tselectedState?: string;\n\tstateStyles?: any;\n\tviewportSettings?: {\n\t\tmobile?: string;\n\t\ttablet?: string;\n\t};\n}\n\nconst DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT: Record< string, number > = {\n\tdefault: 783,\n\t'@tablet': 600,\n\t'@mobile': 480,\n};\n\nfunction getPreviewWidthByViewport(\n\tselectedViewport: string,\n\tviewportSettings: BlockPreviewPanelProps[ 'viewportSettings' ]\n) {\n\tconst breakpoints = getViewportBreakpoints( viewportSettings );\n\tconst mobileWidth = getViewportBreakpointValueInPixels(\n\t\tbreakpoints.mobile\n\t);\n\n\tif ( selectedViewport === '@mobile' && mobileWidth ) {\n\t\treturn mobileWidth;\n\t}\n\n\tconst tabletWidth = getViewportBreakpointValueInPixels(\n\t\tbreakpoints.tablet\n\t);\n\n\tif ( selectedViewport === '@tablet' && tabletWidth ) {\n\t\tif ( ! mobileWidth ) {\n\t\t\treturn tabletWidth;\n\t\t}\n\t\tif (\n\t\t\tbreakpoints.mobile === '480px' &&\n\t\t\tbreakpoints.tablet === '782px'\n\t\t) {\n\t\t\treturn DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT[ '@tablet' ];\n\t\t}\n\t\treturn Math.round( ( mobileWidth + tabletWidth ) / 2 );\n\t}\n\n\tif ( selectedViewport === 'default' ) {\n\t\tconst desktopBreakpoint = tabletWidth ?? mobileWidth;\n\t\tif ( desktopBreakpoint ) {\n\t\t\treturn desktopBreakpoint + 1;\n\t\t}\n\t}\n\n\treturn DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT[ selectedViewport ];\n}\n\nconst BlockPreviewPanel = ( {\n\tname,\n\tvariation = '',\n\tselectedViewport = 'default',\n\tselectedState = 'default',\n\tstateStyles,\n\tviewportSettings,\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\t// Generate CSS for the selected state.\n\tconst stateCSS = useMemo( () => {\n\t\tif ( selectedState === 'default' || ! stateStyles ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn generatePreviewStateStyles( stateStyles, name );\n\t}, [ selectedState, stateStyles, name ] );\n\n\tif ( ! blockExample ) {\n\t\treturn null;\n\t}\n\n\tconst viewportWidth =\n\t\tgetPreviewWidthByViewport( selectedViewport, viewportSettings ) ??\n\t\tblockExample.viewportWidth ??\n\t\t500;\n\tconst normalizedViewportWidth = blockExample.viewportWidth ?? 500;\n\tconst previewScale = Math.max( viewportWidth / normalizedViewportWidth, 1 );\n\tconst previewPadding = 24 * previewScale;\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\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: ${ previewPadding }px;\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}\n\t\t\t\t\t\t\t\t.is-root-container {\n\t\t\t\t\t\t\t\t\twidth: ${ 100 / previewScale }%;\n\t\t\t\t\t\t\t\t\ttransform: scale(${ previewScale });\n\t\t\t\t\t\t\t\t\ttransform-origin: top left;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t${ stateCSS }\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": "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",
+  "names": ["globalStylesEnginePrivateApis", "generatePreviewStateStyles", "Spacer"]
 }

package/build/font-sizes/rename-font-size-dialog.cjs

@@ -60,7 +60,6 @@ function RenameFontSizeDialog({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_components.__experimentalInputControl,
               {
-                __next40pxDefaultSize: true,
                 autoComplete: "off",
                 value: newName,
                 onChange: setNewName,

package/build/font-sizes/rename-font-size-dialog.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-sizes/rename-font-size-dialog.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport type { FontSize } from '@wordpress/global-styles-engine';\n\ninterface RenameFontSizeDialogProps {\n\tfontSize: FontSize;\n\ttoggleOpen: () => void;\n\thandleRename: ( newName: string ) => void;\n}\n\nfunction RenameFontSizeDialog( {\n\tfontSize,\n\ttoggleOpen,\n\thandleRename,\n}: RenameFontSizeDialogProps ) {\n\tconst [ newName, setNewName ] = useState< string | undefined >(\n\t\tfontSize.name\n\t);\n\n\tconst handleConfirm = () => {\n\t\t// If the new name is not empty, call the handleRename function\n\t\tif ( newName && newName.trim() ) {\n\t\t\thandleRename( newName );\n\t\t}\n\t\ttoggleOpen();\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\tonRequestClose={ toggleOpen }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\ttitle={ __( 'Rename' ) }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleConfirm();\n\t\t\t\t\ttoggleOpen();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing=\"3\">\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tvalue={ newName }\n\t\t\t\t\t\tonChange={ setNewName }\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Font size preset name' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\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=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ toggleOpen }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\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=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n\nexport default RenameFontSizeDialog;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAMO;AACP,kBAAmB;AACnB,qBAAyB;AAyCpB;AAhCL,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAC9B,QAAM,CAAE,SAAS,UAAW,QAAI;AAAA,IAC/B,SAAS;AAAA,EACV;AAEA,QAAM,gBAAgB,MAAM;AAE3B,QAAK,WAAW,QAAQ,KAAK,GAAI;AAChC,mBAAc,OAAQ;AAAA,IACvB;AACA,eAAW;AAAA,EACZ;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAa;AAAA,MACb,WAAQ,gBAAI,QAAS;AAAA,MACrB,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,CAAE,UAAW;AACvB,kBAAM,eAAe;AACrB,0BAAc;AACd,uBAAW;AAAA,UACZ;AAAA,UAEA,uDAAC,kBAAAA,sBAAA,EAAO,SAAQ,KACf;AAAA;AAAA,cAAC,kBAAAC;AAAA,cAAA;AAAA,gBACA,uBAAqB;AAAA,gBACrB,cAAa;AAAA,gBACb,OAAQ;AAAA,gBACR,UAAW;AAAA,gBACX,WAAQ,gBAAI,MAAO;AAAA,gBACnB,iBAAc,gBAAI,uBAAwB;AAAA;AAAA,YAC3C;AAAA,YACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,SACf;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,SAAU;AAAA,kBAER,8BAAI,QAAS;AAAA;AAAA,cAChB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,MAAK;AAAA,kBAEH,8BAAI,MAAO;AAAA;AAAA,cACd;AAAA,eACD;AAAA,aACD;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,kCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport type { FontSize } from '@wordpress/global-styles-engine';\n\ninterface RenameFontSizeDialogProps {\n\tfontSize: FontSize;\n\ttoggleOpen: () => void;\n\thandleRename: ( newName: string ) => void;\n}\n\nfunction RenameFontSizeDialog( {\n\tfontSize,\n\ttoggleOpen,\n\thandleRename,\n}: RenameFontSizeDialogProps ) {\n\tconst [ newName, setNewName ] = useState< string | undefined >(\n\t\tfontSize.name\n\t);\n\n\tconst handleConfirm = () => {\n\t\t// If the new name is not empty, call the handleRename function\n\t\tif ( newName && newName.trim() ) {\n\t\t\thandleRename( newName );\n\t\t}\n\t\ttoggleOpen();\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\tonRequestClose={ toggleOpen }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\ttitle={ __( 'Rename' ) }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleConfirm();\n\t\t\t\t\ttoggleOpen();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing=\"3\">\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tvalue={ newName }\n\t\t\t\t\t\tonChange={ setNewName }\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Font size preset name' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\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=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ toggleOpen }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\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=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n\nexport default RenameFontSizeDialog;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAMO;AACP,kBAAmB;AACnB,qBAAyB;AAyCpB;AAhCL,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAC9B,QAAM,CAAE,SAAS,UAAW,QAAI;AAAA,IAC/B,SAAS;AAAA,EACV;AAEA,QAAM,gBAAgB,MAAM;AAE3B,QAAK,WAAW,QAAQ,KAAK,GAAI;AAChC,mBAAc,OAAQ;AAAA,IACvB;AACA,eAAW;AAAA,EACZ;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAa;AAAA,MACb,WAAQ,gBAAI,QAAS;AAAA,MACrB,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,CAAE,UAAW;AACvB,kBAAM,eAAe;AACrB,0BAAc;AACd,uBAAW;AAAA,UACZ;AAAA,UAEA,uDAAC,kBAAAA,sBAAA,EAAO,SAAQ,KACf;AAAA;AAAA,cAAC,kBAAAC;AAAA,cAAA;AAAA,gBACA,cAAa;AAAA,gBACb,OAAQ;AAAA,gBACR,UAAW;AAAA,gBACX,WAAQ,gBAAI,MAAO;AAAA,gBACnB,iBAAc,gBAAI,uBAAwB;AAAA;AAAA,YAC3C;AAAA,YACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,SACf;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,SAAU;AAAA,kBAER,8BAAI,QAAS;AAAA;AAAA,cAChB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,MAAK;AAAA,kBAEH,8BAAI,MAAO;AAAA;AAAA,cACd;AAAA,eACD;AAAA,aACD;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,kCAAQ;",
   "names": ["VStack", "InputControl", "HStack"]
 }

package/build/preview-wrapper.cjs

@@ -37,6 +37,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_components = require("@wordpress/components");
 var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
+var import_ui = require("@wordpress/ui");
 var import_hooks = require("./hooks.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var normalizedWidth = 248;
@@ -81,6 +82,16 @@ function PreviewWrapper({
   const isReady = !!width;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "relative" }, children: containerResizeListener }),
+    !isReady && // Match the preview aspect ratio so layout doesn't jump once width is measured.
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Skeleton,
+      {
+        className: "global-styles-ui-preview__wrapper",
+        style: {
+          aspectRatio: normalizedWidth / normalizedHeight
+        }
+      }
+    ),
     isReady && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/build/preview-wrapper.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/preview-wrapper.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container  at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'global-styles-ui-preview__wrapper', {\n\t\t\t\t\t\t'is-hoverable': withHoverView,\n\t\t\t\t\t} ) }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA2C;AAC3C,qBAIO;AACP,qBAA0C;AAK1C,mBAAyB;AAgFvB;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,QACjC,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,QAAI,uBAAoB,gBAAiB;AAC/D,QAAM,oBAAgB,iCAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,QAAI,kCAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,QAAI,yBAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,QAAI,yBAA+B;AAErE,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,sCAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,sCAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,4EACC;AAAA,gDAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,eAAY,YAAAA,SAAM,qCAAqC;AAAA,UACtD,gBAAgB;AAAA,QACjB,CAAE;AAAA,QACF,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,kBAAAC,iBAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,YAC9B;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\nimport { Skeleton } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container  at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ ! isReady && (\n\t\t\t\t// Match the preview aspect ratio so layout doesn't jump once width is measured.\n\t\t\t\t<Skeleton\n\t\t\t\t\tclassName=\"global-styles-ui-preview__wrapper\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\taspectRatio: normalizedWidth / normalizedHeight,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'global-styles-ui-preview__wrapper', {\n\t\t\t\t\t\t'is-hoverable': withHoverView,\n\t\t\t\t\t} ) }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA2C;AAC3C,qBAIO;AACP,qBAA0C;AAC1C,gBAAyB;AAKzB,mBAAyB;AAgFvB;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,QACjC,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,QAAI,uBAAoB,gBAAiB;AAC/D,QAAM,oBAAgB,iCAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,QAAI,kCAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,QAAI,yBAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,QAAI,yBAA+B;AAErE,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,sCAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,sCAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,4EACC;AAAA,gDAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,CAAE;AAAA,IAEH;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,aAAa,kBAAkB;AAAA,QAChC;AAAA;AAAA,IACD;AAAA,IAEC,WACD;AAAA,MAAC;AAAA;AAAA,QACA,eAAY,YAAAA,SAAM,qCAAqC;AAAA,UACtD,gBAAgB;AAAA,QACjB,CAAE;AAAA,QACF,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,kBAAAC,iBAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,YAC9B;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
   "names": ["clsx", "motion"]
 }

package/build/screen-block.cjs

@@ -101,7 +101,11 @@ var {
   AdvancedPanel: StylesAdvancedPanel
 } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
 function ScreenBlock({ name, variation }) {
-  const { user: userConfig, onChange: onChangeGlobalStyles } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const {
+    user: userConfig,
+    merged: mergedConfig,
+    onChange: onChangeGlobalStyles
+  } = (0, import_element.useContext)(import_context.GlobalStylesContext);
   let prefixParts = [];
   if (variation) {
     prefixParts = ["variations", variation].concat(prefixParts);
@@ -109,12 +113,19 @@ function ScreenBlock({ name, variation }) {
   const prefix = prefixParts.join(".");
   const [selectedViewport, setSelectedViewport] = (0, import_element.useState)("default");
   const [selectedPseudoState, setSelectedPseudoState] = (0, import_element.useState)("default");
-  const validViewportStates = (0, import_element.useMemo)(() => (0, import_utils.getValidViewportStates)(), []);
+  const viewportSettings = mergedConfig.settings?.viewport;
+  const validViewportStates = (0, import_element.useMemo)(
+    () => (0, import_utils.getValidViewportStates)(viewportSettings),
+    [viewportSettings]
+  );
+  const effectiveSelectedViewport = selectedViewport === "default" || validViewportStates.some(
+    (state) => state.value === selectedViewport
+  ) ? selectedViewport : "default";
   const validPseudoStates = (0, import_element.useMemo)(
     () => (0, import_utils.getValidPseudoStates)(name),
     [name]
   );
-  const stateParam = [selectedViewport, selectedPseudoState].filter((value) => value !== "default").join(".");
+  const stateParam = [effectiveSelectedViewport, selectedPseudoState].filter((value) => value !== "default").join(".");
   const hasSelectedState = stateParam.length > 0;
   const [style, setStyle] = (0, import_hooks.useStyle)(
     prefix,
@@ -164,7 +175,7 @@ function ScreenBlock({ name, variation }) {
   const hasBorderPanel = useHasBorderPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasFiltersPanel = useHasFiltersPanel(settings);
-  const shouldShowFiltersPanel = hasFiltersPanel && selectedViewport === "default";
+  const shouldShowFiltersPanel = hasFiltersPanel && effectiveSelectedViewport === "default";
   const hasImageSettingsPanel = useHasImageSettingsPanel(
     name,
     userSettings,
@@ -270,7 +281,7 @@ function ScreenBlock({ name, variation }) {
         title: variation ? currentBlockStyle?.label : blockType?.title,
         viewportStates: validViewportStates,
         pseudoStates: validPseudoStates,
-        selectedViewport,
+        selectedViewport: effectiveSelectedViewport,
         selectedPseudoState,
         onChangeViewport: setSelectedViewport,
         onChangePseudoState: setSelectedPseudoState
@@ -281,9 +292,10 @@ function ScreenBlock({ name, variation }) {
       {
         name,
         variation,
-        selectedViewport,
+        selectedViewport: effectiveSelectedViewport,
         selectedState: hasSelectedState ? stateParam : "default",
-        stateStyles: hasSelectedState ? inheritedStyle : void 0
+        stateStyles: hasSelectedState ? inheritedStyle : void 0,
+        viewportSettings
       }
     ),
     hasVariationsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-styles-ui-screen-variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [

package/build/screen-block.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-block.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tsetStyle as setStyleHelper,\n\tsetSetting as setSettingHelper,\n} from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { Subtitle } from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\nimport { useStyle, useSetting } from './hooks';\nimport { GlobalStylesContext } from './context';\nimport { unlock } from './lock-unlock';\nimport { getValidPseudoStates, getValidViewportStates } from './utils';\n\n// Initial control values.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\nfunction applyFallbackStyle( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\ninterface ScreenBlockProps {\n\tname: string;\n\tvariation?: string;\n}\n\nfunction ScreenBlock( { name, variation }: ScreenBlockProps ) {\n\tconst { user: userConfig, onChange: onChangeGlobalStyles } =\n\t\tuseContext( GlobalStylesContext );\n\n\tlet prefixParts: string[] = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\t// State selector state\n\tconst [ selectedViewport, setSelectedViewport ] =\n\t\tuseState< string >( 'default' );\n\tconst [ selectedPseudoState, setSelectedPseudoState ] =\n\t\tuseState< string >( 'default' );\n\tconst validViewportStates = useMemo( () => getValidViewportStates(), [] );\n\tconst validPseudoStates = useMemo(\n\t\t() => getValidPseudoStates( name ),\n\t\t[ name ]\n\t);\n\n\tconst stateParam = [ selectedViewport, selectedPseudoState ]\n\t\t.filter( ( value ) => value !== 'default' )\n\t\t.join( '.' );\n\tconst hasSelectedState = stateParam.length > 0;\n\tconst [ style, setStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'user',\n\t\tfalse,\n\t\thasSelectedState ? stateParam : undefined\n\t);\n\tconst [ inheritedStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'merged',\n\t\tfalse,\n\t\thasSelectedState ? stateParam : undefined\n\t);\n\n\tconst [ userSettings ] = useSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '', name );\n\tconst settingsForBlockElement = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname\n\t);\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tlet disableBlockGap = false;\n\tif (\n\t\tsettingsForBlockElement?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType: string ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tdisableBlockGap = true;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tlet disableAspectRatio = false;\n\tif (\n\t\tsettingsForBlockElement?.dimensions?.aspectRatio &&\n\t\tname === 'core/group'\n\t) {\n\t\tdisableAspectRatio = true;\n\t}\n\n\tconst settings = useMemo( () => {\n\t\tconst updatedSettings = structuredClone( settingsForBlockElement );\n\t\tif ( disableBlockGap ) {\n\t\t\tupdatedSettings.spacing.blockGap = false;\n\t\t}\n\t\tif ( disableAspectRatio ) {\n\t\t\tupdatedSettings.dimensions.aspectRatio = false;\n\t\t}\n\t\treturn updatedSettings;\n\t}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst shouldShowFiltersPanel =\n\t\thasFiltersPanel && selectedViewport === 'default';\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s: any ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting: any ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeTypography = ( newStyle: any ) => {\n\t\t// Extract settings if present (e.g., from textIndent toggle)\n\t\tconst { settings: newSettings, ...styleWithoutSettings } = newStyle;\n\n\t\t// If there are settings changes, we need to update both styles and\n\t\t// settings atomically to avoid race conditions.\n\t\tif ( newSettings?.typography ) {\n\t\t\t// Build the state-aware path so that viewport styles (e.g. @mobile)\n\t\t\t// are written to the correct sub-path and do not overwrite the default.\n\t\t\tconst stylePathForState = [ prefix, stateParam ]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( '.' );\n\t\t\tlet updatedConfig = setStyleHelper(\n\t\t\t\tuserConfig,\n\t\t\t\tstylePathForState,\n\t\t\t\tstyleWithoutSettings,\n\t\t\t\tname\n\t\t\t);\n\t\t\tupdatedConfig = setSettingHelper(\n\t\t\t\tupdatedConfig,\n\t\t\t\t'typography',\n\t\t\t\t{\n\t\t\t\t\t...userSettings.typography,\n\t\t\t\t\t...newSettings.typography,\n\t\t\t\t},\n\t\t\t\tname\n\t\t\t);\n\t\t\tonChangeGlobalStyles( updatedConfig );\n\t\t} else {\n\t\t\tsetStyle( styleWithoutSettings );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle: any ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\tvariation ? currentBlockStyle?.label! : blockType?.title!\n\t\t\t\t}\n\t\t\t\tviewportStates={ validViewportStates }\n\t\t\t\tpseudoStates={ validPseudoStates }\n\t\t\t\tselectedViewport={ selectedViewport }\n\t\t\t\tselectedPseudoState={ selectedPseudoState }\n\t\t\t\tonChangeViewport={ setSelectedViewport }\n\t\t\t\tonChangePseudoState={ setSelectedPseudoState }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel\n\t\t\t\tname={ name }\n\t\t\t\tvariation={ variation }\n\t\t\t\tselectedViewport={ selectedViewport }\n\t\t\t\tselectedState={ hasSelectedState ? stateParam : 'default' }\n\t\t\t\tstateStyles={ hasSelectedState ? inheritedStyle : undefined }\n\t\t\t/>\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"global-styles-ui-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeTypography }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t// Only expose global-settings controls (e.g. \"Indent all\n\t\t\t\t\t// paragraphs\") when not editing a state-specific variation,\n\t\t\t\t\t// because those settings are global and cannot be per-breakpoint.\n\t\t\t\t\tisGlobalStyles={ ! hasSelectedState }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ shouldShowFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && ! hasSelectedState && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\thelp={ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title!\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tsetStyle as setStyleHelper,\n\tsetSetting as setSettingHelper,\n} from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { Subtitle } from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\nimport { useStyle, useSetting } from './hooks';\nimport { GlobalStylesContext } from './context';\nimport { unlock } from './lock-unlock';\nimport { getValidPseudoStates, getValidViewportStates } from './utils';\n\n// Initial control values.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\nfunction applyFallbackStyle( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\ninterface ScreenBlockProps {\n\tname: string;\n\tvariation?: string;\n}\n\nfunction ScreenBlock( { name, variation }: ScreenBlockProps ) {\n\tconst {\n\t\tuser: userConfig,\n\t\tmerged: mergedConfig,\n\t\tonChange: onChangeGlobalStyles,\n\t} = useContext( GlobalStylesContext );\n\n\tlet prefixParts: string[] = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\t// State selector state\n\tconst [ selectedViewport, setSelectedViewport ] =\n\t\tuseState< string >( 'default' );\n\tconst [ selectedPseudoState, setSelectedPseudoState ] =\n\t\tuseState< string >( 'default' );\n\tconst viewportSettings = mergedConfig.settings?.viewport;\n\tconst validViewportStates = useMemo(\n\t\t() => getValidViewportStates( viewportSettings ),\n\t\t[ viewportSettings ]\n\t);\n\tconst effectiveSelectedViewport =\n\t\tselectedViewport === 'default' ||\n\t\tvalidViewportStates.some(\n\t\t\t( state ) => state.value === selectedViewport\n\t\t)\n\t\t\t? selectedViewport\n\t\t\t: 'default';\n\tconst validPseudoStates = useMemo(\n\t\t() => getValidPseudoStates( name ),\n\t\t[ name ]\n\t);\n\n\tconst stateParam = [ effectiveSelectedViewport, selectedPseudoState ]\n\t\t.filter( ( value ) => value !== 'default' )\n\t\t.join( '.' );\n\tconst hasSelectedState = stateParam.length > 0;\n\tconst [ style, setStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'user',\n\t\tfalse,\n\t\thasSelectedState ? stateParam : undefined\n\t);\n\tconst [ inheritedStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'merged',\n\t\tfalse,\n\t\thasSelectedState ? stateParam : undefined\n\t);\n\n\tconst [ userSettings ] = useSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '', name );\n\tconst settingsForBlockElement = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname\n\t);\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tlet disableBlockGap = false;\n\tif (\n\t\tsettingsForBlockElement?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType: string ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tdisableBlockGap = true;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tlet disableAspectRatio = false;\n\tif (\n\t\tsettingsForBlockElement?.dimensions?.aspectRatio &&\n\t\tname === 'core/group'\n\t) {\n\t\tdisableAspectRatio = true;\n\t}\n\n\tconst settings = useMemo( () => {\n\t\tconst updatedSettings = structuredClone( settingsForBlockElement );\n\t\tif ( disableBlockGap ) {\n\t\t\tupdatedSettings.spacing.blockGap = false;\n\t\t}\n\t\tif ( disableAspectRatio ) {\n\t\t\tupdatedSettings.dimensions.aspectRatio = false;\n\t\t}\n\t\treturn updatedSettings;\n\t}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst shouldShowFiltersPanel =\n\t\thasFiltersPanel && effectiveSelectedViewport === 'default';\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s: any ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting: any ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeTypography = ( newStyle: any ) => {\n\t\t// Extract settings if present (e.g., from textIndent toggle)\n\t\tconst { settings: newSettings, ...styleWithoutSettings } = newStyle;\n\n\t\t// If there are settings changes, we need to update both styles and\n\t\t// settings atomically to avoid race conditions.\n\t\tif ( newSettings?.typography ) {\n\t\t\t// Build the state-aware path so that viewport styles (e.g. @mobile)\n\t\t\t// are written to the correct sub-path and do not overwrite the default.\n\t\t\tconst stylePathForState = [ prefix, stateParam ]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( '.' );\n\t\t\tlet updatedConfig = setStyleHelper(\n\t\t\t\tuserConfig,\n\t\t\t\tstylePathForState,\n\t\t\t\tstyleWithoutSettings,\n\t\t\t\tname\n\t\t\t);\n\t\t\tupdatedConfig = setSettingHelper(\n\t\t\t\tupdatedConfig,\n\t\t\t\t'typography',\n\t\t\t\t{\n\t\t\t\t\t...userSettings.typography,\n\t\t\t\t\t...newSettings.typography,\n\t\t\t\t},\n\t\t\t\tname\n\t\t\t);\n\t\t\tonChangeGlobalStyles( updatedConfig );\n\t\t} else {\n\t\t\tsetStyle( styleWithoutSettings );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle: any ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\tvariation ? currentBlockStyle?.label! : blockType?.title!\n\t\t\t\t}\n\t\t\t\tviewportStates={ validViewportStates }\n\t\t\t\tpseudoStates={ validPseudoStates }\n\t\t\t\tselectedViewport={ effectiveSelectedViewport }\n\t\t\t\tselectedPseudoState={ selectedPseudoState }\n\t\t\t\tonChangeViewport={ setSelectedViewport }\n\t\t\t\tonChangePseudoState={ setSelectedPseudoState }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel\n\t\t\t\tname={ name }\n\t\t\t\tvariation={ variation }\n\t\t\t\tselectedViewport={ effectiveSelectedViewport }\n\t\t\t\tselectedState={ hasSelectedState ? stateParam : 'default' }\n\t\t\t\tstateStyles={ hasSelectedState ? inheritedStyle : undefined }\n\t\t\t\tviewportSettings={ viewportSettings }\n\t\t\t/>\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"global-styles-ui-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeTypography }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t// Only expose global-settings controls (e.g. \"Indent all\n\t\t\t\t\t// paragraphs\") when not editing a state-specific variation,\n\t\t\t\t\t// because those settings are global and cannot be per-breakpoint.\n\t\t\t\t\tisGlobalStyles={ ! hasSelectedState }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ shouldShowFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && ! hasSelectedState && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\thelp={ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title!\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],
+  "mappings": "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",
   "names": ["hasSplitBorders", "blockEditorPrivateApis", "coreStore", "setStyleHelper", "setSettingHelper", "BlockPreviewPanel", "VStack"]
 }

package/build/shadows-edit-panel.cjs

@@ -208,7 +208,6 @@ function ShadowsEditPanel() {
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.__experimentalInputControl,
                 {
-                  __next40pxDefaultSize: true,
                   autoComplete: "off",
                   label: (0, import_i18n.__)("Name"),
                   placeholder: (0, import_i18n.__)("Shadow name"),

package/build/shadows-edit-panel.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shadows-edit-panel.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalInputControl as InputControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalGrid as Grid,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tuseNavigator,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tDropdown,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tColorPalette,\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tplus,\n\tshadow as shadowIcon,\n\treset,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { ScreenHeader } from './screen-header';\nimport { ScreenBody } from './screen-body';\nimport { defaultShadow } from './shadows-panel';\nimport {\n\tgetShadowParts,\n\tshadowStringToObject,\n\tshadowObjectToString,\n} from './shadow-utils';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst customShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Rename' ),\n\t\taction: 'rename',\n\t},\n\t{\n\t\tlabel: __( 'Delete' ),\n\t\taction: 'delete',\n\t},\n];\n\nconst presetShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Reset' ),\n\t\taction: 'reset',\n\t},\n];\n\nexport default function ShadowsEditPanel() {\n\tconst { goBack, params } = useNavigator();\n\tconst { category, slug } = params;\n\n\tconst [ shadows, setShadows ] = useSetting(\n\t\t`shadow.presets.${ category }`\n\t);\n\n\tuseEffect( () => {\n\t\tconst hasCurrentShadow = shadows?.some(\n\t\t\t( shadow: any ) => shadow.slug === slug\n\t\t);\n\t\t// If the shadow being edited doesn't exist anymore in the global styles setting, navigate back\n\t\t// to prevent the user from editing a non-existent shadow entry.\n\t\t// This can happen, for example:\n\t\t// - when the user deletes the shadow\n\t\t// - when the user resets the styles while editing a custom shadow\n\t\t//\n\t\t// The check on the slug is necessary to prevent a double back navigation when the user triggers\n\t\t// a backward navigation by interacting with the screen's UI.\n\t\tif ( !! slug && ! hasCurrentShadow ) {\n\t\t\tgoBack();\n\t\t}\n\t}, [ shadows, slug, goBack ] );\n\n\tconst [ baseShadows ] = useSetting(\n\t\t`shadow.presets.${ category }`,\n\t\tundefined,\n\t\t'base'\n\t);\n\tconst [ selectedShadow, setSelectedShadow ] = useState( () =>\n\t\t( shadows || [] ).find( ( shadow: any ) => shadow.slug === slug )\n\t);\n\tconst baseSelectedShadow = useMemo(\n\t\t() => ( baseShadows || [] ).find( ( b: any ) => b.slug === slug ),\n\t\t[ baseShadows, slug ]\n\t);\n\tconst [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =\n\t\tuseState( false );\n\tconst [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );\n\tconst [ shadowName, setShadowName ] = useState< string | undefined >(\n\t\tselectedShadow?.name\n\t);\n\n\tif ( ! category || ! slug ) {\n\t\treturn null;\n\t}\n\n\tconst onShadowChange = ( shadow: string ) => {\n\t\tsetSelectedShadow( { ...selectedShadow, shadow } );\n\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, shadow } : s\n\t\t);\n\t\tsetShadows( updatedShadows );\n\t};\n\n\tconst onMenuClick = ( action: string ) => {\n\t\tif ( action === 'reset' ) {\n\t\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\t\ts.slug === slug ? baseSelectedShadow : s\n\t\t\t);\n\t\t\tsetSelectedShadow( baseSelectedShadow );\n\t\t\tsetShadows( updatedShadows );\n\t\t} else if ( action === 'delete' ) {\n\t\t\tsetIsConfirmDialogVisible( true );\n\t\t} else if ( action === 'rename' ) {\n\t\t\tsetIsRenameModalVisible( true );\n\t\t}\n\t};\n\n\tconst handleShadowDelete = () => {\n\t\tsetShadows( shadows.filter( ( s: any ) => s.slug !== slug ) );\n\t};\n\n\tconst handleShadowRename = ( newName: string | undefined ) => {\n\t\tif ( ! newName ) {\n\t\t\treturn;\n\t\t}\n\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, name: newName } : s\n\t\t);\n\t\tsetSelectedShadow( { ...selectedShadow, name: newName } );\n\t\tsetShadows( updatedShadows );\n\t};\n\n\treturn ! selectedShadow ? (\n\t\t<ScreenHeader title=\"\" />\n\t) : (\n\t\t<>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<ScreenHeader title={ selectedShadow.name } />\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>\n\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Menu' ) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t{ ( category === 'custom'\n\t\t\t\t\t\t\t\t\t? customShadowMenuItems\n\t\t\t\t\t\t\t\t\t: presetShadowMenuItems\n\t\t\t\t\t\t\t\t).map( ( item ) => (\n\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\tkey={ item.action }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tonMenuClick( item.action )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\titem.action === 'reset' &&\n\t\t\t\t\t\t\t\t\t\t\tselectedShadow.shadow ===\n\t\t\t\t\t\t\t\t\t\t\t\tbaseSelectedShadow?.shadow\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t</Menu>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t\t<ScreenBody>\n\t\t\t\t<ShadowsPreview shadow={ selectedShadow.shadow } />\n\t\t\t\t<ShadowEditor\n\t\t\t\t\tshadow={ selectedShadow.shadow }\n\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</ScreenBody>\n\t\t\t{ isConfirmDialogVisible && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen\n\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\thandleShadowDelete();\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCancel={ () => {\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: Name of the shadow preset. */\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Are you sure you want to delete \"%s\" shadow preset?'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tselectedShadow.name\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t\t{ isRenameModalVisible && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Rename' ) }\n\t\t\t\t\tonRequestClose={ () => setIsRenameModalVisible( false ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\thandleShadowRename( shadowName );\n\t\t\t\t\t\t\tsetIsRenameModalVisible( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\t\tplaceholder={ __( 'Shadow name' ) }\n\t\t\t\t\t\t\tvalue={ shadowName ?? '' }\n\t\t\t\t\t\t\tonChange={ setShadowName }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer marginBottom={ 6 } />\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName=\"block-editor-shadow-edit-modal__actions\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsRenameModalVisible( false )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface ShadowsPreviewProps {\n\tshadow: string;\n}\n\nfunction ShadowsPreview( { shadow }: ShadowsPreviewProps ) {\n\tconst shadowStyle = {\n\t\tboxShadow: shadow,\n\t};\n\n\treturn (\n\t\t<Spacer marginBottom={ 4 } marginTop={ -2 }>\n\t\t\t<HStack\n\t\t\t\talignment=\"center\"\n\t\t\t\tjustify=\"center\"\n\t\t\t\tclassName=\"global-styles-ui__shadow-preview-panel\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"global-styles-ui__shadow-preview-block\"\n\t\t\t\t\tstyle={ shadowStyle }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</Spacer>\n\t);\n}\n\ninterface ShadowEditorProps {\n\tshadow: string;\n\tonChange: ( shadow: string ) => void;\n}\n\nfunction ShadowEditor( { shadow, onChange }: ShadowEditorProps ) {\n\tconst addShadowButtonRef = useRef< HTMLButtonElement >( null );\n\tconst shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );\n\n\tconst onChangeShadowPart = ( index: number, part: string ) => {\n\t\tconst newShadowParts = [ ...shadowParts ];\n\t\tnewShadowParts[ index ] = part;\n\t\tonChange( newShadowParts.join( ', ' ) );\n\t};\n\n\tconst onAddShadowPart = () => {\n\t\tonChange( [ ...shadowParts, defaultShadow ].join( ', ' ) );\n\t};\n\n\tconst onRemoveShadowPart = ( index: number ) => {\n\t\tonChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );\n\t\taddShadowButtonRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>\n\t\t\t\t\t<FlexItem className=\"global-styles-ui__shadows-panel__options-container\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add shadow' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonAddShadowPart();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tref={ addShadowButtonRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t\t<Spacer />\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ shadowParts.map( ( part, index ) => (\n\t\t\t\t\t<ShadowItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tshadow={ part }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonChangeShadowPart( index, value )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcanRemove={ shadowParts.length > 1 }\n\t\t\t\t\t\tonRemove={ () => onRemoveShadowPart( index ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\ninterface ShadowItemProps {\n\tshadow: string;\n\tonChange: ( shadow: string ) => void;\n\tcanRemove: boolean;\n\tonRemove: () => void;\n}\n\nfunction ShadowItem( {\n\tshadow,\n\tonChange,\n\tcanRemove,\n\tonRemove,\n}: ShadowItemProps ) {\n\tconst popoverProps = {\n\t\tplacement: 'left-start' as const,\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\tconst shadowObj = useMemo(\n\t\t() => shadowStringToObject( shadow ),\n\t\t[ shadow ]\n\t);\n\tconst onShadowChange = ( newShadow: any ) => {\n\t\tonChange( shadowObjectToString( newShadow ) );\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"global-styles-ui__shadow-editor__dropdown\"\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'global-styles-ui__shadow-editor__dropdown-toggle',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t};\n\t\t\t\tconst removeButtonProps = {\n\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonRemove();\n\t\t\t\t\t},\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'global-styles-ui__shadow-editor__remove-button',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\tlabel: __( 'Remove shadow' ),\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ shadowIcon }\n\t\t\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ shadowObj.inset\n\t\t\t\t\t\t\t\t? __( 'Inner shadow' )\n\t\t\t\t\t\t\t\t: __( 'Drop shadow' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{ canRemove && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\t\t{ ...removeButtonProps }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"global-styles-ui__shadow-editor__dropdown-content\"\n\t\t\t\t>\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadowObj={ shadowObj }\n\t\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\ninterface ShadowPopoverProps {\n\tshadowObj: any;\n\tonChange: ( shadow: any ) => void;\n}\n\nfunction ShadowPopover( { shadowObj, onChange }: ShadowPopoverProps ) {\n\tconst __experimentalIsRenderedInSidebar = true;\n\tconst enableAlpha = true;\n\n\tconst onShadowChange = ( key: string, value: any ) => {\n\t\tconst newShadow = {\n\t\t\t...shadowObj,\n\t\t\t[ key ]: value,\n\t\t};\n\t\tonChange( newShadow );\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"global-styles-ui__shadow-editor-panel\">\n\t\t\t<ColorPalette\n\t\t\t\tclearable={ false }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tvalue={ shadowObj.color }\n\t\t\t\tonChange={ ( value ) => onShadowChange( 'color', value ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Shadow Type' ) }\n\t\t\t\tvalue={ shadowObj.inset ? 'inset' : 'outset' }\n\t\t\t\tisBlock\n\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\tonShadowChange( 'inset', value === 'inset' )\n\t\t\t\t}\n\t\t\t\thideLabelFromVision\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"outset\"\n\t\t\t\t\tlabel={ __( 'Outset' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"inset\"\n\t\t\t\t\tlabel={ __( 'Inset' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<Grid columns={ 2 } gap={ 4 }>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'X Position' ) }\n\t\t\t\t\tvalue={ shadowObj.x }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'x', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Y Position' ) }\n\t\t\t\t\tvalue={ shadowObj.y }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'y', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Blur' ) }\n\t\t\t\t\tvalue={ shadowObj.blur }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'blur', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Spread' ) }\n\t\t\t\t\tvalue={ shadowObj.spread }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'spread', value ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n\ninterface ShadowInputControlProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: ( value: string ) => void;\n}\n\nfunction ShadowInputControl( {\n\tlabel,\n\tvalue,\n\tonChange,\n}: ShadowInputControlProps ) {\n\tconst onValueChange = ( next: string | undefined ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : '0px';\n\t\tonChange( nextValue );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onValueChange }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalInputControl as InputControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalGrid as Grid,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tuseNavigator,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tDropdown,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tColorPalette,\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tplus,\n\tshadow as shadowIcon,\n\treset,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { ScreenHeader } from './screen-header';\nimport { ScreenBody } from './screen-body';\nimport { defaultShadow } from './shadows-panel';\nimport {\n\tgetShadowParts,\n\tshadowStringToObject,\n\tshadowObjectToString,\n} from './shadow-utils';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst customShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Rename' ),\n\t\taction: 'rename',\n\t},\n\t{\n\t\tlabel: __( 'Delete' ),\n\t\taction: 'delete',\n\t},\n];\n\nconst presetShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Reset' ),\n\t\taction: 'reset',\n\t},\n];\n\nexport default function ShadowsEditPanel() {\n\tconst { goBack, params } = useNavigator();\n\tconst { category, slug } = params;\n\n\tconst [ shadows, setShadows ] = useSetting(\n\t\t`shadow.presets.${ category }`\n\t);\n\n\tuseEffect( () => {\n\t\tconst hasCurrentShadow = shadows?.some(\n\t\t\t( shadow: any ) => shadow.slug === slug\n\t\t);\n\t\t// If the shadow being edited doesn't exist anymore in the global styles setting, navigate back\n\t\t// to prevent the user from editing a non-existent shadow entry.\n\t\t// This can happen, for example:\n\t\t// - when the user deletes the shadow\n\t\t// - when the user resets the styles while editing a custom shadow\n\t\t//\n\t\t// The check on the slug is necessary to prevent a double back navigation when the user triggers\n\t\t// a backward navigation by interacting with the screen's UI.\n\t\tif ( !! slug && ! hasCurrentShadow ) {\n\t\t\tgoBack();\n\t\t}\n\t}, [ shadows, slug, goBack ] );\n\n\tconst [ baseShadows ] = useSetting(\n\t\t`shadow.presets.${ category }`,\n\t\tundefined,\n\t\t'base'\n\t);\n\tconst [ selectedShadow, setSelectedShadow ] = useState( () =>\n\t\t( shadows || [] ).find( ( shadow: any ) => shadow.slug === slug )\n\t);\n\tconst baseSelectedShadow = useMemo(\n\t\t() => ( baseShadows || [] ).find( ( b: any ) => b.slug === slug ),\n\t\t[ baseShadows, slug ]\n\t);\n\tconst [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =\n\t\tuseState( false );\n\tconst [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );\n\tconst [ shadowName, setShadowName ] = useState< string | undefined >(\n\t\tselectedShadow?.name\n\t);\n\n\tif ( ! category || ! slug ) {\n\t\treturn null;\n\t}\n\n\tconst onShadowChange = ( shadow: string ) => {\n\t\tsetSelectedShadow( { ...selectedShadow, shadow } );\n\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, shadow } : s\n\t\t);\n\t\tsetShadows( updatedShadows );\n\t};\n\n\tconst onMenuClick = ( action: string ) => {\n\t\tif ( action === 'reset' ) {\n\t\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\t\ts.slug === slug ? baseSelectedShadow : s\n\t\t\t);\n\t\t\tsetSelectedShadow( baseSelectedShadow );\n\t\t\tsetShadows( updatedShadows );\n\t\t} else if ( action === 'delete' ) {\n\t\t\tsetIsConfirmDialogVisible( true );\n\t\t} else if ( action === 'rename' ) {\n\t\t\tsetIsRenameModalVisible( true );\n\t\t}\n\t};\n\n\tconst handleShadowDelete = () => {\n\t\tsetShadows( shadows.filter( ( s: any ) => s.slug !== slug ) );\n\t};\n\n\tconst handleShadowRename = ( newName: string | undefined ) => {\n\t\tif ( ! newName ) {\n\t\t\treturn;\n\t\t}\n\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, name: newName } : s\n\t\t);\n\t\tsetSelectedShadow( { ...selectedShadow, name: newName } );\n\t\tsetShadows( updatedShadows );\n\t};\n\n\treturn ! selectedShadow ? (\n\t\t<ScreenHeader title=\"\" />\n\t) : (\n\t\t<>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<ScreenHeader title={ selectedShadow.name } />\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>\n\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Menu' ) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t{ ( category === 'custom'\n\t\t\t\t\t\t\t\t\t? customShadowMenuItems\n\t\t\t\t\t\t\t\t\t: presetShadowMenuItems\n\t\t\t\t\t\t\t\t).map( ( item ) => (\n\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\tkey={ item.action }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tonMenuClick( item.action )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\titem.action === 'reset' &&\n\t\t\t\t\t\t\t\t\t\t\tselectedShadow.shadow ===\n\t\t\t\t\t\t\t\t\t\t\t\tbaseSelectedShadow?.shadow\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t</Menu>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t\t<ScreenBody>\n\t\t\t\t<ShadowsPreview shadow={ selectedShadow.shadow } />\n\t\t\t\t<ShadowEditor\n\t\t\t\t\tshadow={ selectedShadow.shadow }\n\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</ScreenBody>\n\t\t\t{ isConfirmDialogVisible && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen\n\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\thandleShadowDelete();\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCancel={ () => {\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: Name of the shadow preset. */\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Are you sure you want to delete \"%s\" shadow preset?'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tselectedShadow.name\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t\t{ isRenameModalVisible && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Rename' ) }\n\t\t\t\t\tonRequestClose={ () => setIsRenameModalVisible( false ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\thandleShadowRename( shadowName );\n\t\t\t\t\t\t\tsetIsRenameModalVisible( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\t\tplaceholder={ __( 'Shadow name' ) }\n\t\t\t\t\t\t\tvalue={ shadowName ?? '' }\n\t\t\t\t\t\t\tonChange={ setShadowName }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer marginBottom={ 6 } />\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName=\"block-editor-shadow-edit-modal__actions\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsRenameModalVisible( false )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface ShadowsPreviewProps {\n\tshadow: string;\n}\n\nfunction ShadowsPreview( { shadow }: ShadowsPreviewProps ) {\n\tconst shadowStyle = {\n\t\tboxShadow: shadow,\n\t};\n\n\treturn (\n\t\t<Spacer marginBottom={ 4 } marginTop={ -2 }>\n\t\t\t<HStack\n\t\t\t\talignment=\"center\"\n\t\t\t\tjustify=\"center\"\n\t\t\t\tclassName=\"global-styles-ui__shadow-preview-panel\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"global-styles-ui__shadow-preview-block\"\n\t\t\t\t\tstyle={ shadowStyle }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</Spacer>\n\t);\n}\n\ninterface ShadowEditorProps {\n\tshadow: string;\n\tonChange: ( shadow: string ) => void;\n}\n\nfunction ShadowEditor( { shadow, onChange }: ShadowEditorProps ) {\n\tconst addShadowButtonRef = useRef< HTMLButtonElement >( null );\n\tconst shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );\n\n\tconst onChangeShadowPart = ( index: number, part: string ) => {\n\t\tconst newShadowParts = [ ...shadowParts ];\n\t\tnewShadowParts[ index ] = part;\n\t\tonChange( newShadowParts.join( ', ' ) );\n\t};\n\n\tconst onAddShadowPart = () => {\n\t\tonChange( [ ...shadowParts, defaultShadow ].join( ', ' ) );\n\t};\n\n\tconst onRemoveShadowPart = ( index: number ) => {\n\t\tonChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );\n\t\taddShadowButtonRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>\n\t\t\t\t\t<FlexItem className=\"global-styles-ui__shadows-panel__options-container\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add shadow' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonAddShadowPart();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tref={ addShadowButtonRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t\t<Spacer />\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ shadowParts.map( ( part, index ) => (\n\t\t\t\t\t<ShadowItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tshadow={ part }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonChangeShadowPart( index, value )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcanRemove={ shadowParts.length > 1 }\n\t\t\t\t\t\tonRemove={ () => onRemoveShadowPart( index ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\ninterface ShadowItemProps {\n\tshadow: string;\n\tonChange: ( shadow: string ) => void;\n\tcanRemove: boolean;\n\tonRemove: () => void;\n}\n\nfunction ShadowItem( {\n\tshadow,\n\tonChange,\n\tcanRemove,\n\tonRemove,\n}: ShadowItemProps ) {\n\tconst popoverProps = {\n\t\tplacement: 'left-start' as const,\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\tconst shadowObj = useMemo(\n\t\t() => shadowStringToObject( shadow ),\n\t\t[ shadow ]\n\t);\n\tconst onShadowChange = ( newShadow: any ) => {\n\t\tonChange( shadowObjectToString( newShadow ) );\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"global-styles-ui__shadow-editor__dropdown\"\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'global-styles-ui__shadow-editor__dropdown-toggle',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t};\n\t\t\t\tconst removeButtonProps = {\n\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonRemove();\n\t\t\t\t\t},\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'global-styles-ui__shadow-editor__remove-button',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\tlabel: __( 'Remove shadow' ),\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ shadowIcon }\n\t\t\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ shadowObj.inset\n\t\t\t\t\t\t\t\t? __( 'Inner shadow' )\n\t\t\t\t\t\t\t\t: __( 'Drop shadow' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{ canRemove && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\t\t{ ...removeButtonProps }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"global-styles-ui__shadow-editor__dropdown-content\"\n\t\t\t\t>\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadowObj={ shadowObj }\n\t\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\ninterface ShadowPopoverProps {\n\tshadowObj: any;\n\tonChange: ( shadow: any ) => void;\n}\n\nfunction ShadowPopover( { shadowObj, onChange }: ShadowPopoverProps ) {\n\tconst __experimentalIsRenderedInSidebar = true;\n\tconst enableAlpha = true;\n\n\tconst onShadowChange = ( key: string, value: any ) => {\n\t\tconst newShadow = {\n\t\t\t...shadowObj,\n\t\t\t[ key ]: value,\n\t\t};\n\t\tonChange( newShadow );\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"global-styles-ui__shadow-editor-panel\">\n\t\t\t<ColorPalette\n\t\t\t\tclearable={ false }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tvalue={ shadowObj.color }\n\t\t\t\tonChange={ ( value ) => onShadowChange( 'color', value ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Shadow Type' ) }\n\t\t\t\tvalue={ shadowObj.inset ? 'inset' : 'outset' }\n\t\t\t\tisBlock\n\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\tonShadowChange( 'inset', value === 'inset' )\n\t\t\t\t}\n\t\t\t\thideLabelFromVision\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"outset\"\n\t\t\t\t\tlabel={ __( 'Outset' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"inset\"\n\t\t\t\t\tlabel={ __( 'Inset' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<Grid columns={ 2 } gap={ 4 }>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'X Position' ) }\n\t\t\t\t\tvalue={ shadowObj.x }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'x', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Y Position' ) }\n\t\t\t\t\tvalue={ shadowObj.y }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'y', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Blur' ) }\n\t\t\t\t\tvalue={ shadowObj.blur }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'blur', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Spread' ) }\n\t\t\t\t\tvalue={ shadowObj.spread }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'spread', value ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n\ninterface ShadowInputControlProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: ( value: string ) => void;\n}\n\nfunction ShadowInputControl( {\n\tlabel,\n\tvalue,\n\tonChange,\n}: ShadowInputControlProps ) {\n\tconst onValueChange = ( next: string | undefined ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : '0px';\n\t\tonChange( nextValue );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onValueChange }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["componentsPrivateApis", "HStack", "Spacer", "ConfirmDialog", "InputControl", "VStack", "ItemGroup", "clsx", "shadowIcon", "DropdownContentWrapper", "ToggleGroupControl", "ToggleGroupControlOption", "Grid", "UnitControl"]
 }

package/build/utils.cjs

@@ -37,6 +37,8 @@ __export(utils_exports, {
 module.exports = __toCommonJS(utils_exports);
 var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_i18n = require("@wordpress/i18n");
+var import_lock_unlock = require("./lock-unlock.cjs");
+var { getViewportBreakpoints } = (0, import_lock_unlock.unlock)(import_global_styles_engine.privateApis);
 var VALID_ELEMENT_STATES = {
   link: [
     { value: ":link", label: (0, import_i18n.__)("Link") },
@@ -78,8 +80,11 @@ function getValidPseudoStates(name) {
   }
   return [];
 }
-function getValidViewportStates() {
-  return RESPONSIVE_STATES;
+function getValidViewportStates(viewportSettings) {
+  const breakpoints = getViewportBreakpoints(viewportSettings);
+  return RESPONSIVE_STATES.filter(
+    (state) => (state.value !== "@tablet" || breakpoints.tablet !== void 0) && (state.value !== "@mobile" || breakpoints.mobile !== void 0)
+  );
 }
 function removePropertiesFromObject(object, properties) {
   if (!properties?.length) {