@wordpress/edit-site 6.31.1-next.f56bd8138.0 → 6.32.1-next.47f435fc9.0

package/build-module/components/global-styles/preview-styles.js

@@ -1,21 +1,16 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, __unstableMotion as motion } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { useStylesPreviewColors } from './hooks';
-import TypographyExample from './typography-example';
-import HighlightedColors from './highlighted-colors';
-import PreviewWrapper from './preview-wrapper';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  useGlobalStyle
-} = unlock(blockEditorPrivateApis);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import {
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  __unstableMotion as motion
+} from "@wordpress/components";
+import { unlock } from "../../lock-unlock";
+import { useStylesPreviewColors } from "./hooks";
+import TypographyExample from "./typography-example";
+import HighlightedColors from "./highlighted-colors";
+import PreviewWrapper from "./preview-wrapper";
+const { useGlobalStyle } = unlock(blockEditorPrivateApis);
 const firstFrameVariants = {
   start: {
     scale: 1,
@@ -44,117 +39,150 @@ const secondFrameVariants = {
     opacity: 0
   }
 };
-const PreviewStyles = ({
-  label,
-  isFocused,
-  withHoverView,
-  variation
-}) => {
-  const [fontWeight] = useGlobalStyle('typography.fontWeight');
-  const [fontFamily = 'serif'] = useGlobalStyle('typography.fontFamily');
-  const [headingFontFamily = fontFamily] = useGlobalStyle('elements.h1.typography.fontFamily');
-  const [headingFontWeight = fontWeight] = useGlobalStyle('elements.h1.typography.fontWeight');
-  const [textColor = 'black'] = useGlobalStyle('color.text');
-  const [headingColor = textColor] = useGlobalStyle('elements.h1.color.text');
-  const {
-    paletteColors
-  } = useStylesPreviewColors();
-  return /*#__PURE__*/_jsxs(PreviewWrapper, {
-    label: label,
-    isFocused: isFocused,
-    withHoverView: withHoverView,
-    children: [({
-      ratio,
-      key
-    }) => /*#__PURE__*/_jsx(motion.div, {
-      variants: firstFrameVariants,
-      style: {
-        height: '100%',
-        overflow: 'hidden'
-      },
-      children: /*#__PURE__*/_jsxs(HStack, {
-        spacing: 10 * ratio,
-        justify: "center",
-        style: {
-          height: '100%',
-          overflow: 'hidden'
-        },
-        children: [/*#__PURE__*/_jsx(TypographyExample, {
-          fontSize: 65 * ratio,
-          variation: variation
-        }), /*#__PURE__*/_jsx(VStack, {
-          spacing: 4 * ratio,
-          children: /*#__PURE__*/_jsx(HighlightedColors, {
-            normalizedColorSwatchSize: 32,
-            ratio: ratio
-          })
-        })]
-      })
-    }, key), ({
-      key
-    }) => /*#__PURE__*/_jsx(motion.div, {
-      variants: withHoverView && midFrameVariants,
-      style: {
-        height: '100%',
-        width: '100%',
-        position: 'absolute',
-        top: 0,
-        overflow: 'hidden',
-        filter: 'blur(60px)',
-        opacity: 0.1
-      },
-      children: /*#__PURE__*/_jsx(HStack, {
-        spacing: 0,
-        justify: "flex-start",
-        style: {
-          height: '100%',
-          overflow: 'hidden'
-        },
-        children: paletteColors.slice(0, 4).map(({
-          color
-        }, index) => /*#__PURE__*/_jsx("div", {
-          style: {
-            height: '100%',
-            background: color,
-            flexGrow: 1
-          }
-        }, index))
-      })
-    }, key), ({
-      ratio,
-      key
-    }) => /*#__PURE__*/_jsx(motion.div, {
-      variants: secondFrameVariants,
-      style: {
-        height: '100%',
-        width: '100%',
-        overflow: 'hidden',
-        position: 'absolute',
-        top: 0
-      },
-      children: /*#__PURE__*/_jsx(VStack, {
-        spacing: 3 * ratio,
-        justify: "center",
-        style: {
-          height: '100%',
-          overflow: 'hidden',
-          padding: 10 * ratio,
-          boxSizing: 'border-box'
-        },
-        children: label && /*#__PURE__*/_jsx("div", {
-          style: {
-            fontSize: 40 * ratio,
-            fontFamily: headingFontFamily,
-            color: headingColor,
-            fontWeight: headingFontWeight,
-            lineHeight: '1em',
-            textAlign: 'center'
+const PreviewStyles = ({ label, isFocused, withHoverView, variation }) => {
+  const [fontWeight] = useGlobalStyle("typography.fontWeight");
+  const [fontFamily = "serif"] = useGlobalStyle("typography.fontFamily");
+  const [headingFontFamily = fontFamily] = useGlobalStyle(
+    "elements.h1.typography.fontFamily"
+  );
+  const [headingFontWeight = fontWeight] = useGlobalStyle(
+    "elements.h1.typography.fontWeight"
+  );
+  const [textColor = "black"] = useGlobalStyle("color.text");
+  const [headingColor = textColor] = useGlobalStyle(
+    "elements.h1.color.text"
+  );
+  const { paletteColors } = useStylesPreviewColors();
+  return /* @__PURE__ */ jsxs(
+    PreviewWrapper,
+    {
+      label,
+      isFocused,
+      withHoverView,
+      children: [
+        ({ ratio, key }) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: firstFrameVariants,
+            style: {
+              height: "100%",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsxs(
+              HStack,
+              {
+                spacing: 10 * ratio,
+                justify: "center",
+                style: {
+                  height: "100%",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    TypographyExample,
+                    {
+                      fontSize: 65 * ratio,
+                      variation
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(VStack, { spacing: 4 * ratio, children: /* @__PURE__ */ jsx(
+                    HighlightedColors,
+                    {
+                      normalizedColorSwatchSize: 32,
+                      ratio
+                    }
+                  ) })
+                ]
+              }
+            )
           },
-          children: label
-        })
-      })
-    }, key)]
-  });
+          key
+        ),
+        ({ key }) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: withHoverView && midFrameVariants,
+            style: {
+              height: "100%",
+              width: "100%",
+              position: "absolute",
+              top: 0,
+              overflow: "hidden",
+              filter: "blur(60px)",
+              opacity: 0.1
+            },
+            children: /* @__PURE__ */ jsx(
+              HStack,
+              {
+                spacing: 0,
+                justify: "flex-start",
+                style: {
+                  height: "100%",
+                  overflow: "hidden"
+                },
+                children: paletteColors.slice(0, 4).map(({ color }, index) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      height: "100%",
+                      background: color,
+                      flexGrow: 1
+                    }
+                  },
+                  index
+                ))
+              }
+            )
+          },
+          key
+        ),
+        ({ ratio, key }) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: secondFrameVariants,
+            style: {
+              height: "100%",
+              width: "100%",
+              overflow: "hidden",
+              position: "absolute",
+              top: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              VStack,
+              {
+                spacing: 3 * ratio,
+                justify: "center",
+                style: {
+                  height: "100%",
+                  overflow: "hidden",
+                  padding: 10 * ratio,
+                  boxSizing: "border-box"
+                },
+                children: label && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 40 * ratio,
+                      fontFamily: headingFontFamily,
+                      color: headingColor,
+                      fontWeight: headingFontWeight,
+                      lineHeight: "1em",
+                      textAlign: "center"
+                    },
+                    children: label
+                  }
+                )
+              }
+            )
+          },
+          key
+        )
+      ]
+    }
+  );
+};
+var preview_styles_default = PreviewStyles;
+export {
+  preview_styles_default as default
 };
-export default PreviewStyles;
-//# sourceMappingURL=preview-styles.js.map
+//# sourceMappingURL=preview-styles.js.map

package/build-module/components/global-styles/preview-styles.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewWrapper","jsx","_jsx","jsxs","_jsxs","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","children","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewWrapper from './preview-wrapper';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/preview-styles.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewWrapper from './preview-wrapper';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default PreviewStyles;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/components/global-styles/preview-typography.js

@@ -1,39 +1,38 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TypographyExample from './typography-example';
-import PreviewWrapper from './preview-wrapper';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StylesPreviewTypography = ({
-  variation,
-  isFocused,
-  withHoverView
-}) => {
-  return /*#__PURE__*/_jsx(PreviewWrapper, {
-    label: variation.title,
-    isFocused: isFocused,
-    withHoverView: withHoverView,
-    children: ({
-      ratio,
-      key
-    }) => /*#__PURE__*/_jsx(HStack, {
-      spacing: 10 * ratio,
-      justify: "center",
-      style: {
-        height: '100%',
-        overflow: 'hidden'
-      },
-      children: /*#__PURE__*/_jsx(TypographyExample, {
-        variation: variation,
-        fontSize: 85 * ratio
-      })
-    }, key)
-  });
+import { jsx } from "react/jsx-runtime";
+import { __experimentalHStack as HStack } from "@wordpress/components";
+import TypographyExample from "./typography-example";
+import PreviewWrapper from "./preview-wrapper";
+const StylesPreviewTypography = ({ variation, isFocused, withHoverView }) => {
+  return /* @__PURE__ */ jsx(
+    PreviewWrapper,
+    {
+      label: variation.title,
+      isFocused,
+      withHoverView,
+      children: ({ ratio, key }) => /* @__PURE__ */ jsx(
+        HStack,
+        {
+          spacing: 10 * ratio,
+          justify: "center",
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            TypographyExample,
+            {
+              variation,
+              fontSize: 85 * ratio
+            }
+          )
+        },
+        key
+      )
+    }
+  );
 };
-export default StylesPreviewTypography;
-//# sourceMappingURL=preview-typography.js.map
+var preview_typography_default = StylesPreviewTypography;
+export {
+  preview_typography_default as default
+};
+//# sourceMappingURL=preview-typography.js.map

package/build-module/components/global-styles/preview-typography.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["__experimentalHStack","HStack","TypographyExample","PreviewWrapper","jsx","_jsx","StylesPreviewTypography","variation","isFocused","withHoverView","label","title","children","ratio","key","spacing","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyExample from './typography-example';\nimport PreviewWrapper from './preview-wrapper';\n\nconst StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ variation.title }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewTypography;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;;AAEtE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,cAAc,MAAM,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,MAAMC,uBAAuB,GAAGA,CAAE;EAAEC,SAAS;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EAC9E,oBACCJ,IAAA,CAACF,cAAc;IACdO,KAAK,EAAGH,SAAS,CAACI,KAAO;IACzBH,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA,aAAe;IAAAG,QAAA,EAE7BA,CAAE;MAAEC,KAAK;MAAEC;IAAI,CAAC,kBACjBT,IAAA,CAACJ,MAAM;MAENc,OAAO,EAAG,EAAE,GAAGF,KAAO;MACtBG,OAAO,EAAC,QAAQ;MAChBC,KAAK,EAAG;QACPC,MAAM,EAAE,MAAM;QACdC,QAAQ,EAAE;MACX,CAAG;MAAAP,QAAA,eAEHP,IAAA,CAACH,iBAAiB;QACjBK,SAAS,EAAGA,SAAW;QACvBa,QAAQ,EAAG,EAAE,GAAGP;MAAO,CACvB;IAAC,GAXIC,GAYC;EACR,CACc,CAAC;AAEnB,CAAC;AAED,eAAeR,uBAAuB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/preview-typography.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyExample from './typography-example';\nimport PreviewWrapper from './preview-wrapper';\n\nconst StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ variation.title }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewTypography;\n"],
+  "mappings": "AA4BK;AAzBL,SAAS,wBAAwB,cAAc;AAK/C,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AAE3B,MAAM,0BAA0B,CAAE,EAAE,WAAW,WAAW,cAAc,MAAO;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,UAAU;AAAA,MAClB;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,OAAO,IAAI,MAChB;AAAA,QAAC;AAAA;AAAA,UAEA,SAAU,KAAK;AAAA,UACf,SAAQ;AAAA,UACR,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,UAAW,KAAK;AAAA;AAAA,UACjB;AAAA;AAAA,QAXM;AAAA,MAYP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": []
+}

package/build-module/components/global-styles/preview-wrapper.js

@@ -1,109 +1,85 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { useThrottle, useReducedMotion, useResizeObserver } from '@wordpress/compose';
-import { useLayoutEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  useGlobalStyle
-} = unlock(blockEditorPrivateApis);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { __unstableMotion as motion } from "@wordpress/components";
+import {
+  useThrottle,
+  useReducedMotion,
+  useResizeObserver
+} from "@wordpress/compose";
+import { useLayoutEffect, useState } from "@wordpress/element";
+import { unlock } from "../../lock-unlock";
+const { useGlobalStyle } = unlock(blockEditorPrivateApis);
 const normalizedWidth = 248;
 const normalizedHeight = 152;
-
-// Throttle options for useThrottle. Must be defined outside of the component,
-// so that the object reference is the same on each render.
 const THROTTLE_OPTIONS = {
   leading: true,
   trailing: true
 };
-export default function PreviewWrapper({
+function PreviewWrapper({
   children,
   label,
   isFocused,
   withHoverView
 }) {
-  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
-  const [gradientValue] = useGlobalStyle('color.gradient');
+  const [backgroundColor = "white"] = useGlobalStyle("color.background");
+  const [gradientValue] = useGlobalStyle("color.gradient");
   const disableMotion = useReducedMotion();
   const [isHovered, setIsHovered] = useState(false);
-  const [containerResizeListener, {
-    width
-  }] = useResizeObserver();
+  const [containerResizeListener, { width }] = useResizeObserver();
   const [throttledWidth, setThrottledWidthState] = useState(width);
   const [ratioState, setRatioState] = useState();
-  const setThrottledWidth = useThrottle(setThrottledWidthState, 250, THROTTLE_OPTIONS);
-
-  // Must use useLayoutEffect to avoid a flash of the container  at the wrong
-  // size before the width is set.
+  const setThrottledWidth = useThrottle(
+    setThrottledWidthState,
+    250,
+    THROTTLE_OPTIONS
+  );
   useLayoutEffect(() => {
     if (width) {
       setThrottledWidth(width);
     }
   }, [width, setThrottledWidth]);
-
-  // Must use useLayoutEffect to avoid a flash of the container at the wrong
-  // size before the width is set.
   useLayoutEffect(() => {
     const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
     const ratioDiff = newRatio - (ratioState || 0);
-
-    // Only update the ratio state if the difference is big enough
-    // or if the ratio state is not yet set. This is to avoid an
-    // endless loop of updates at particular viewport heights when the
-    // presence of a scrollbar causes the width to change slightly.
     const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
     if (isRatioDiffBigEnough || !ratioState) {
       setRatioState(newRatio);
     }
   }, [throttledWidth, ratioState]);
-
-  // Set a fallbackRatio to use before the throttled ratio has been set.
   const fallbackRatio = width ? width / normalizedWidth : 1;
-  /*
-   * Use the throttled ratio if it has been calculated, otherwise
-   * use the fallback ratio. The throttled ratio is used to avoid
-   * an endless loop of updates at particular viewport heights.
-   * See: https://github.com/WordPress/gutenberg/issues/55112
-   */
   const ratio = ratioState ? ratioState : fallbackRatio;
   const isReady = !!width;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'relative'
-      },
-      children: containerResizeListener
-    }), isReady && /*#__PURE__*/_jsx("div", {
-      className: "edit-site-global-styles-preview__wrapper",
-      style: {
-        height: normalizedHeight * ratio
-      },
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      tabIndex: -1,
-      children: /*#__PURE__*/_jsx(motion.div, {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: containerResizeListener }),
+    isReady && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "edit-site-global-styles-preview__wrapper",
         style: {
-          height: normalizedHeight * ratio,
-          width: '100%',
-          background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
-          cursor: withHoverView ? 'pointer' : undefined
+          height: normalizedHeight * ratio
         },
-        initial: "start",
-        animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start',
-        children: [].concat(children) // This makes sure children is always an array.
-        .map((child, key) => child({
-          ratio,
-          key
-        }))
-      })
-    })]
-  });
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: {
+              height: normalizedHeight * ratio,
+              width: "100%",
+              background: gradientValue ?? backgroundColor,
+              cursor: withHoverView ? "pointer" : void 0
+            },
+            initial: "start",
+            animate: (isHovered || isFocused) && !disableMotion && label ? "hover" : "start",
+            children: [].concat(children).map((child, key) => child({ ratio, key }))
+          }
+        )
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=preview-wrapper.js.map
+export {
+  PreviewWrapper as default
+};
+//# sourceMappingURL=preview-wrapper.js.map

package/build-module/components/global-styles/preview-wrapper.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","unlock","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useGlobalStyle","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewWrapper","children","label","isFocused","withHoverView","backgroundColor","gradientValue","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","isReady","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-wrapper.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\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 { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\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\nexport default function PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( '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();\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=\"edit-site-global-styles-preview__wrapper\"\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\tcursor: withHoverView ? 'pointer' : undefined,\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 ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\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"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/preview-wrapper.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\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 { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\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\nexport default function PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( '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();\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=\"edit-site-global-styles-preview__wrapper\"\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\tcursor: withHoverView ? 'pointer' : undefined,\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 ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\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"],
+  "mappings": "AAuFE,mBACC,KADD;AApFF,SAAS,eAAe,8BAA8B;AACtD,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,cAAc;AAEvB,MAAM,EAAE,eAAe,IAAI,OAAQ,sBAAuB;AAE1D,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAIzB,MAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAEe,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,kBAAkB,OAAQ,IAAI,eAAgB,kBAAmB;AACzE,QAAM,CAAE,aAAc,IAAI,eAAgB,gBAAiB;AAC3D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAAS;AAE/C,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,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,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,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,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,cAC7B,QAAQ,gBAAgB,YAAY;AAAA,YACrC;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAS,EACjB,IAAK,CAAE,OAAO,QAAS,MAAO,EAAE,OAAO,IAAI,CAAE,CAAE;AAAA;AAAA,QAClD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
+  "names": []
+}