@wordpress/global-styles-ui 1.1.0

package/build/preview-colors.js

@@ -0,0 +1,86 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_colors_exports = {};
+__export(preview_colors_exports, {
+  default: () => preview_colors_default
+});
+module.exports = __toCommonJS(preview_colors_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_preset_colors = __toESM(require("./preset-colors"));
+var import_preview_wrapper = __toESM(require("./preview-wrapper"));
+const firstFrameVariants = {
+  start: {
+    scale: 1,
+    opacity: 1
+  },
+  hover: {
+    scale: 0,
+    opacity: 0
+  }
+};
+const StylesPreviewColors = ({
+  label,
+  isFocused,
+  withHoverView
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_preview_wrapper.default,
+    {
+      label,
+      isFocused,
+      withHoverView,
+      children: ({ key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__unstableMotion.div,
+        {
+          variants: firstFrameVariants,
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalHStack,
+            {
+              spacing: 0,
+              justify: "center",
+              style: {
+                height: "100%",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preset_colors.default, {})
+            }
+          )
+        },
+        key
+      )
+    }
+  );
+};
+var preview_colors_default = StylesPreviewColors;
+//# sourceMappingURL=preview-colors.js.map

package/build/preview-colors.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-colors.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport PresetColors from './preset-colors';\nimport PreviewWrapper from './preview-wrapper';\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\ninterface StylesPreviewColorsProps {\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nconst StylesPreviewColors = ( {\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: StylesPreviewColorsProps ) => {\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{ ( { 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={ 0 }\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<PresetColors />\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DM;AAxDN,wBAGO;AAKP,2BAAyB;AACzB,6BAA2B;AAE3B,MAAM,qBAAqB;AAAA,EAC1B,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AACD;AAQA,MAAM,sBAAsB,CAAE;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,MAAiC;AAChC,SACC;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,IAAI,MACT;AAAA,QAAC,kBAAAC,iBAAO;AAAA,QAAP;AAAA,UAEA,UAAW;AAAA,UACX,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAQ;AAAA,gBACP,QAAQ;AAAA,gBACR,UAAU;AAAA,cACX;AAAA,cAEA,sDAAC,qBAAAC,SAAA,EAAa;AAAA;AAAA,UACf;AAAA;AAAA,QAhBM;AAAA,MAiBP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,yBAAQ;",
+  "names": ["PreviewWrapper", "motion", "HStack", "PresetColors"]
+}

package/build/preview-hooks.js

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_hooks_exports = {};
+__export(preview_hooks_exports, {
+  useStylesPreviewColors: () => useStylesPreviewColors
+});
+module.exports = __toCommonJS(preview_hooks_exports);
+var import_hooks = require("./hooks");
+function useStylesPreviewColors() {
+  const [textColor = "black"] = (0, import_hooks.useStyle)("color.text");
+  const [backgroundColor = "white"] = (0, import_hooks.useStyle)("color.background");
+  const [headingColor = textColor] = (0, import_hooks.useStyle)(
+    "elements.h1.color.text"
+  );
+  const [linkColor = headingColor] = (0, import_hooks.useStyle)(
+    "elements.link.color.text"
+  );
+  const [buttonBackgroundColor = linkColor] = (0, import_hooks.useStyle)(
+    "elements.button.color.background"
+  );
+  const [coreColors] = (0, import_hooks.useSetting)("color.palette.core") || [];
+  const [themeColors] = (0, import_hooks.useSetting)("color.palette.theme") || [];
+  const [customColors] = (0, import_hooks.useSetting)("color.palette.custom") || [];
+  const paletteColors = (themeColors ?? []).concat(customColors ?? []).concat(coreColors ?? []);
+  const textColorObject = paletteColors.filter(
+    ({ color }) => color === textColor
+  );
+  const buttonBackgroundColorObject = paletteColors.filter(
+    ({ color }) => color === buttonBackgroundColor
+  );
+  const highlightedColors = textColorObject.concat(buttonBackgroundColorObject).concat(paletteColors).filter(
+    // we exclude these background color because it is already visible in the preview.
+    ({ color }) => color !== backgroundColor
+  ).slice(0, 2);
+  return {
+    paletteColors,
+    highlightedColors
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStylesPreviewColors
+});
+//# sourceMappingURL=preview-hooks.js.map

package/build/preview-hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-hooks.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\n\nexport function useStylesPreviewColors(): {\n\tpaletteColors: Color[];\n\thighlightedColors: Color[];\n} {\n\tconst [ textColor = 'black' ] = useStyle< string >( 'color.text' );\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ headingColor = textColor ] = useStyle< string >(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useStyle< string >(\n\t\t'elements.link.color.text'\n\t);\n\tconst [ buttonBackgroundColor = linkColor ] = useStyle< string >(\n\t\t'elements.button.color.background'\n\t);\n\n\tconst [ coreColors ] = useSetting< Color[] >( 'color.palette.core' ) || [];\n\tconst [ themeColors ] =\n\t\tuseSetting< Color[] >( 'color.palette.theme' ) || [];\n\tconst [ customColors ] =\n\t\tuseSetting< Color[] >( 'color.palette.custom' ) || [];\n\n\tconst paletteColors: Color[] = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,mBAAqC;AAE9B,SAAS,yBAGd;AACD,QAAM,CAAE,YAAY,OAAQ,QAAI,uBAAoB,YAAa;AACjE,QAAM,CAAE,kBAAkB,OAAQ,QACjC,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,eAAe,SAAU,QAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,YAAY,YAAa,QAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,wBAAwB,SAAU,QAAI;AAAA,IAC7C;AAAA,EACD;AAEA,QAAM,CAAE,UAAW,QAAI,yBAAuB,oBAAqB,KAAK,CAAC;AACzE,QAAM,CAAE,WAAY,QACnB,yBAAuB,qBAAsB,KAAK,CAAC;AACpD,QAAM,CAAE,YAAa,QACpB,yBAAuB,sBAAuB,KAAK,CAAC;AAErD,QAAM,iBAA2B,eAAe,CAAC,GAC/C,OAAQ,gBAAgB,CAAC,CAAE,EAC3B,OAAQ,cAAc,CAAC,CAAE;AAE3B,QAAM,kBAAkB,cAAc;AAAA,IACrC,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AACA,QAAM,8BAA8B,cAAc;AAAA,IACjD,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AAEA,QAAM,oBAAoB,gBACxB,OAAQ,2BAA4B,EACpC,OAAQ,aAAc,EACtB;AAAA;AAAA,IAEA,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B,EACC,MAAO,GAAG,CAAE;AAEd,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
+  "names": []
+}

package/build/preview-styles.js

@@ -0,0 +1,219 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_styles_exports = {};
+__export(preview_styles_exports, {
+  default: () => preview_styles_default
+});
+module.exports = __toCommonJS(preview_styles_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_hooks = require("./hooks");
+var import_preview_hooks = require("./preview-hooks");
+var import_typography_example = __toESM(require("./typography-example"));
+var import_highlighted_colors = __toESM(require("./highlighted-colors"));
+var import_preview_wrapper = __toESM(require("./preview-wrapper"));
+const firstFrameVariants = {
+  start: {
+    scale: 1,
+    opacity: 1
+  },
+  hover: {
+    scale: 0,
+    opacity: 0
+  }
+};
+const midFrameVariants = {
+  hover: {
+    opacity: 1
+  },
+  start: {
+    opacity: 0.5
+  }
+};
+const secondFrameVariants = {
+  hover: {
+    scale: 1,
+    opacity: 1
+  },
+  start: {
+    scale: 0,
+    opacity: 0
+  }
+};
+function PreviewStyles({
+  label,
+  isFocused,
+  withHoverView,
+  variation
+}) {
+  const [fontWeight] = (0, import_hooks.useStyle)("typography.fontWeight");
+  const [fontFamily = "serif"] = (0, import_hooks.useStyle)(
+    "typography.fontFamily"
+  );
+  const [headingFontFamily = fontFamily] = (0, import_hooks.useStyle)(
+    "elements.h1.typography.fontFamily"
+  );
+  const [headingFontWeight = fontWeight] = (0, import_hooks.useStyle)(
+    "elements.h1.typography.fontWeight"
+  );
+  const [textColor = "black"] = (0, import_hooks.useStyle)("color.text");
+  const [headingColor = textColor] = (0, import_hooks.useStyle)(
+    "elements.h1.color.text"
+  );
+  const { paletteColors } = (0, import_preview_hooks.useStylesPreviewColors)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_preview_wrapper.default,
+    {
+      label,
+      isFocused,
+      withHoverView,
+      children: [
+        ({ ratio, key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__unstableMotion.div,
+          {
+            variants: firstFrameVariants,
+            style: {
+              height: "100%",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_components.__experimentalHStack,
+              {
+                spacing: 10 * ratio,
+                justify: "center",
+                style: {
+                  height: "100%",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_typography_example.default,
+                    {
+                      fontSize: 65 * ratio,
+                      variation
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: 4 * ratio, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_highlighted_colors.default,
+                    {
+                      normalizedColorSwatchSize: 32,
+                      ratio
+                    }
+                  ) })
+                ]
+              }
+            )
+          },
+          key
+        ),
+        ({ key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__unstableMotion.div,
+          {
+            variants: withHoverView ? midFrameVariants : void 0,
+            style: {
+              height: "100%",
+              width: "100%",
+              position: "absolute",
+              top: 0,
+              overflow: "hidden",
+              filter: "blur(60px)",
+              opacity: 0.1
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalHStack,
+              {
+                spacing: 0,
+                justify: "flex-start",
+                style: {
+                  height: "100%",
+                  overflow: "hidden"
+                },
+                children: paletteColors.slice(0, 4).map(({ color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      height: "100%",
+                      background: color,
+                      flexGrow: 1
+                    }
+                  },
+                  index
+                ))
+              }
+            )
+          },
+          key
+        ),
+        ({ ratio, key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__unstableMotion.div,
+          {
+            variants: secondFrameVariants,
+            style: {
+              height: "100%",
+              width: "100%",
+              overflow: "hidden",
+              position: "absolute",
+              top: 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalVStack,
+              {
+                spacing: 3 * ratio,
+                justify: "center",
+                style: {
+                  height: "100%",
+                  overflow: "hidden",
+                  padding: 10 * ratio,
+                  boxSizing: "border-box"
+                },
+                children: label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 40 * ratio,
+                      fontFamily: headingFontFamily,
+                      color: headingColor,
+                      fontWeight: headingFontWeight,
+                      lineHeight: "1em",
+                      textAlign: "center"
+                    },
+                    children: label
+                  }
+                )
+              }
+            )
+          },
+          key
+        )
+      ]
+    }
+  );
+}
+var preview_styles_default = PreviewStyles;
+//# sourceMappingURL=preview-styles.js.map

package/build/preview-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-styles.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\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 { useStyle } from './hooks';\nimport { useStylesPreviewColors } from './preview-hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewWrapper from './preview-wrapper';\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\ninterface PreviewStylesProps {\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n\tvariation?: any;\n}\n\nfunction PreviewStyles( {\n\tlabel,\n\tisFocused,\n\twithHoverView,\n\tvariation,\n}: PreviewStylesProps ) {\n\tconst [ fontWeight ] = useStyle< string >( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle< string >(\n\t\t'typography.fontFamily'\n\t);\n\tconst [ headingFontFamily = fontFamily ] = useStyle< string >(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle< string >(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle< string >( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle< string >(\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 : undefined }\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": ["PreviewWrapper", "motion", "HStack", "TypographyExample", "VStack", "HighlightedColors"]
+}

package/build/preview-typography.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_typography_exports = {};
+__export(preview_typography_exports, {
+  default: () => preview_typography_default
+});
+module.exports = __toCommonJS(preview_typography_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_typography_example = __toESM(require("./typography-example"));
+var import_preview_wrapper = __toESM(require("./preview-wrapper"));
+const StylesPreviewTypography = ({
+  variation,
+  isFocused,
+  withHoverView
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_preview_wrapper.default,
+    {
+      label: variation.title,
+      isFocused,
+      withHoverView,
+      children: ({ ratio, key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalHStack,
+        {
+          spacing: 10 * ratio,
+          justify: "center",
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_typography_example.default,
+            {
+              variation,
+              fontSize: 85 * ratio
+            }
+          )
+        },
+        key
+      )
+    }
+  );
+};
+var preview_typography_default = StylesPreviewTypography;
+//# sourceMappingURL=preview-typography.js.map

package/build/preview-typography.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-typography.tsx"],
+  "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\ninterface StylesPreviewTypographyProps {\n\tvariation: any;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nconst StylesPreviewTypography = ( {\n\tvariation,\n\tisFocused,\n\twithHoverView,\n}: StylesPreviewTypographyProps ) => {\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;AAAA;AAAA;AAAA;AAAA;AAsCK;AAnCL,wBAA+C;AAK/C,gCAA8B;AAC9B,6BAA2B;AAQ3B,MAAM,0BAA0B,CAAE;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,MAAqC;AACpC,SACC;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MACA,OAAQ,UAAU;AAAA,MAClB;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,OAAO,IAAI,MAChB;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UAEA,SAAU,KAAK;AAAA,UACf,SAAQ;AAAA,UACR,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC,0BAAAC;AAAA,YAAA;AAAA,cACA;AAAA,cACA,UAAW,KAAK;AAAA;AAAA,UACjB;AAAA;AAAA,QAXM;AAAA,MAYP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": ["PreviewWrapper", "HStack", "TypographyExample"]
+}

package/build/preview-wrapper.js

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_wrapper_exports = {};
+__export(preview_wrapper_exports, {
+  default: () => preview_wrapper_default
+});
+module.exports = __toCommonJS(preview_wrapper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_hooks = require("./hooks");
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+const THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: true
+};
+function PreviewWrapper({
+  children,
+  label,
+  isFocused,
+  withHoverView
+}) {
+  const [backgroundColor = "white"] = (0, import_hooks.useStyle)("color.background");
+  const [gradientValue] = (0, import_hooks.useStyle)("color.gradient");
+  const disableMotion = (0, import_compose.useReducedMotion)();
+  const [isHovered, setIsHovered] = (0, import_element.useState)(false);
+  const [containerResizeListener, { width }] = (0, import_compose.useResizeObserver)();
+  const [throttledWidth, setThrottledWidthState] = (0, import_element.useState)(width);
+  const [ratioState, setRatioState] = (0, import_element.useState)();
+  const setThrottledWidth = (0, import_compose.useThrottle)(
+    setThrottledWidthState,
+    250,
+    THROTTLE_OPTIONS
+  );
+  (0, import_element.useLayoutEffect)(() => {
+    if (width) {
+      setThrottledWidth(width);
+    }
+  }, [width, setThrottledWidth]);
+  (0, import_element.useLayoutEffect)(() => {
+    const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+    const ratioDiff = newRatio - (ratioState || 0);
+    const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
+    if (isRatioDiffBigEnough || !ratioState) {
+      setRatioState(newRatio);
+    }
+  }, [throttledWidth, ratioState]);
+  const fallbackRatio = width ? width / normalizedWidth : 1;
+  const ratio = ratioState ? ratioState : fallbackRatio;
+  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 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "global-styles-ui-preview__wrapper",
+        style: {
+          height: normalizedHeight * ratio
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        tabIndex: -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__unstableMotion.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 })
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+var preview_wrapper_default = PreviewWrapper;
+//# sourceMappingURL=preview-wrapper.js.map

package/build/preview-wrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-wrapper.tsx"],
+  "sourcesContent": ["/**\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=\"global-styles-ui-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 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;AA8FE;AA3FF,wBAA2C;AAC3C,qBAIO;AACP,qBAA0C;AAK1C,mBAAyB;AAEzB,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAIzB,MAAM,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,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,kBAAAA,iBAAO;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,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": ["motion"]
+}