@wordpress/global-styles-ui 1.1.0

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

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

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

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useViewportMatch } from "@wordpress/compose";
+import {
+  __experimentalPaletteEdit as PaletteEdit,
+  __experimentalVStack as VStack,
+  Button
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { shuffle } from "@wordpress/icons";
+import { useSetting, useColorRandomizer } from "./hooks";
+import ColorVariations from "./variations/variations-color";
+const mobilePopoverProps = { placement: "bottom-start", offset: 8 };
+function ColorPalettePanel({ name }) {
+  const [themeColors, setThemeColors] = useSetting(
+    "color.palette.theme",
+    name
+  );
+  const [baseThemeColors] = useSetting(
+    "color.palette.theme",
+    name,
+    "base"
+  );
+  const [defaultColors, setDefaultColors] = useSetting(
+    "color.palette.default",
+    name
+  );
+  const [baseDefaultColors] = useSetting(
+    "color.palette.default",
+    name,
+    "base"
+  );
+  const [customColors, setCustomColors] = useSetting(
+    "color.palette.custom",
+    name
+  );
+  const [defaultPaletteEnabled] = useSetting(
+    "color.defaultPalette",
+    name
+  );
+  const isMobileViewport = useViewportMatch("small", "<");
+  const popoverProps = isMobileViewport ? mobilePopoverProps : void 0;
+  const [randomizeThemeColors] = useColorRandomizer(name);
+  return /* @__PURE__ */ jsxs(VStack, { className: "global-styles-ui-color-palette-panel", spacing: 8, children: [
+    /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+      !!themeColors && !!themeColors.length && /* @__PURE__ */ jsx(
+        PaletteEdit,
+        {
+          canReset: themeColors !== baseThemeColors,
+          canOnlyChangeValues: true,
+          colors: themeColors,
+          onChange: setThemeColors,
+          paletteLabel: __("Theme"),
+          paletteLabelHeadingLevel: 3,
+          popoverProps
+        }
+      ),
+      window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && randomizeThemeColors && /* @__PURE__ */ jsx(
+        Button,
+        {
+          __next40pxDefaultSize: true,
+          variant: "secondary",
+          icon: shuffle,
+          onClick: randomizeThemeColors,
+          children: __("Randomize colors")
+        }
+      )
+    ] }),
+    !!defaultColors && !!defaultColors.length && !!defaultPaletteEnabled && /* @__PURE__ */ jsx(
+      PaletteEdit,
+      {
+        canReset: defaultColors !== baseDefaultColors,
+        canOnlyChangeValues: true,
+        colors: defaultColors,
+        onChange: setDefaultColors,
+        paletteLabel: __("Default"),
+        paletteLabelHeadingLevel: 3,
+        popoverProps
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PaletteEdit,
+      {
+        colors: customColors,
+        onChange: setCustomColors,
+        paletteLabel: __("Custom"),
+        paletteLabelHeadingLevel: 3,
+        slugPrefix: "custom-",
+        popoverProps
+      }
+    ),
+    /* @__PURE__ */ jsx(ColorVariations, { title: __("Palettes") })
+  ] });
+}
+export {
+  ColorPalettePanel as default
+};
+//# sourceMappingURL=color-palette-panel.js.map

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

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

package/build-module/color-preview.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __experimentalHStack as HStack } from "@wordpress/components";
+import { useContext } from "@wordpress/element";
+import { getStyle } from "@wordpress/global-styles-engine";
+import { GlobalStylesContext } from "./context";
+function ColorPreview() {
+  const { merged } = useContext(GlobalStylesContext);
+  const backgroundColor = getStyle(merged, "color.background") || "#ffffff";
+  const textColor = getStyle(merged, "color.text") || "#000000";
+  const palette = merged?.settings?.color?.palette;
+  let paletteColors = [];
+  if (Array.isArray(palette)) {
+    paletteColors = palette;
+  } else if (palette && typeof palette === "object") {
+    paletteColors = palette.theme || palette.custom || [];
+  }
+  const previewColors = paletteColors.slice(0, 4);
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      spacing: 0,
+      justify: "center",
+      style: {
+        height: "100%",
+        overflow: "hidden",
+        minHeight: "40px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              backgroundColor,
+              width: "25%",
+              height: "100%",
+              minHeight: "40px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: textColor,
+              width: "25%",
+              height: "100%",
+              minHeight: "40px"
+            }
+          }
+        ),
+        previewColors.slice(0, 2).map((color, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: color.color,
+              width: "25%",
+              height: "100%",
+              minHeight: "40px"
+            }
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+export {
+  ColorPreview
+};
+//# sourceMappingURL=color-preview.js.map

package/build-module/color-preview.js.map

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

package/build-module/color-variations.js

@@ -0,0 +1,7 @@
+import ColorVariationsInternal from "./variations/variations-color";
+import { withGlobalStylesProvider } from "./with-global-styles-provider";
+const ColorVariations = withGlobalStylesProvider(ColorVariationsInternal);
+export {
+  ColorVariations
+};
+//# sourceMappingURL=color-variations.js.map

package/build-module/color-variations.js.map

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

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

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { __experimentalConfirmDialog as ConfirmDialog } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+function ConfirmResetShadowDialog({
+  text,
+  confirmButtonText,
+  isOpen,
+  toggleOpen,
+  onConfirm
+}) {
+  const handleConfirm = async () => {
+    toggleOpen();
+    onConfirm();
+  };
+  const handleCancel = () => {
+    toggleOpen();
+  };
+  return /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      isOpen,
+      cancelButtonText: __("Cancel"),
+      confirmButtonText,
+      onCancel: handleCancel,
+      onConfirm: handleConfirm,
+      size: "medium",
+      children: text
+    }
+  );
+}
+var confirm_reset_shadow_dialog_default = ConfirmResetShadowDialog;
+export {
+  confirm_reset_shadow_dialog_default as default
+};
+//# sourceMappingURL=confirm-reset-shadow-dialog.js.map

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

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

package/build-module/context.js

@@ -0,0 +1,13 @@
+import { createContext } from "@wordpress/element";
+const GlobalStylesContext = createContext({
+  user: { styles: {}, settings: {} },
+  base: { styles: {}, settings: {} },
+  merged: { styles: {}, settings: {} },
+  onChange: () => {
+  },
+  fontLibraryEnabled: false
+});
+export {
+  GlobalStylesContext
+};
+//# sourceMappingURL=context.js.map

package/build-module/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/context.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\nexport interface GlobalStylesContextType {\n\tuser: GlobalStylesConfig;\n\tbase: GlobalStylesConfig;\n\tmerged: GlobalStylesConfig;\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\tfontLibraryEnabled?: boolean;\n}\n\nexport const GlobalStylesContext = createContext< GlobalStylesContextType >( {\n\tuser: { styles: {}, settings: {} },\n\tbase: { styles: {}, settings: {} },\n\tmerged: { styles: {}, settings: {} },\n\tonChange: () => {},\n\tfontLibraryEnabled: false,\n} );\n"],
+  "mappings": "AAGA,SAAS,qBAAqB;AAWvB,MAAM,sBAAsB,cAA0C;AAAA,EAC5E,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EACjC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EACjC,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EACnC,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,oBAAoB;AACrB,CAAE;",
+  "names": []
+}

package/build-module/dimensions-panel.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { useMemo } from "@wordpress/element";
+import { useStyle, useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } = unlock(blockEditorPrivateApis);
+const DEFAULT_CONTROLS = {
+  contentSize: true,
+  wideSize: true,
+  padding: true,
+  margin: true,
+  blockGap: true,
+  minHeight: true,
+  childLayout: false
+};
+function DimensionsPanel() {
+  const [style] = useStyle("", void 0, "user", false);
+  const [inheritedStyle, setStyle] = useStyle(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  const [userSettings] = useSetting("", void 0, "user");
+  const [rawSettings, setSettings] = useSetting("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  const inheritedStyleWithLayout = useMemo(() => {
+    return {
+      ...inheritedStyle,
+      layout: settings.layout
+    };
+  }, [inheritedStyle, settings.layout]);
+  const styleWithLayout = useMemo(() => {
+    return {
+      ...style,
+      layout: userSettings.layout
+    };
+  }, [style, userSettings.layout]);
+  const onChange = (newStyle) => {
+    const updatedStyle = { ...newStyle };
+    delete updatedStyle.layout;
+    setStyle(updatedStyle);
+    if (newStyle.layout !== userSettings.layout) {
+      const updatedSettings = {
+        ...userSettings,
+        layout: newStyle.layout
+      };
+      if (updatedSettings.layout?.definitions) {
+        delete updatedSettings.layout.definitions;
+      }
+      setSettings(updatedSettings);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    StylesDimensionsPanel,
+    {
+      inheritedValue: inheritedStyleWithLayout,
+      value: styleWithLayout,
+      onChange,
+      settings,
+      includeLayoutControls: true,
+      defaultControls: DEFAULT_CONTROLS
+    }
+  );
+}
+export {
+  DimensionsPanel as default
+};
+//# sourceMappingURL=dimensions-panel.js.map

package/build-module/dimensions-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/dimensions-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', undefined, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\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\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\n\tconst onChange = ( 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\tconst updatedSettings = {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t};\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AA2EE;AAvEF,SAAS,eAAe,8BAA8B;AACtD,SAAS,eAAe;AAKxB,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AAEvB,MAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,IAC1E,OAAQ,sBAAuB;AAEhC,MAAM,mBAAmB;AAAA,EACxB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AACd;AAEe,SAAR,kBAAmC;AACzC,QAAM,CAAE,KAAM,IAAI,SAAU,IAAI,QAAW,QAAQ,KAAM;AACzD,QAAM,CAAE,gBAAgB,QAAS,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,YAAa,IAAI,WAAY,IAAI,QAAW,MAAO;AAC3D,QAAM,CAAE,aAAa,WAAY,IAAI,WAAY,EAAG;AACpD,QAAM,WAAW,2BAA4B,WAAY;AAIzD,QAAM,2BAA2B,QAAS,MAAM;AAC/C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,SAAS;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,gBAAgB,SAAS,MAAO,CAAE;AAEvC,QAAM,kBAAkB,QAAS,MAAM;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,aAAa;AAAA,IACtB;AAAA,EACD,GAAG,CAAE,OAAO,aAAa,MAAO,CAAE;AAElC,QAAM,WAAW,CAAE,aAAmB;AACrC,UAAM,eAAe,EAAE,GAAG,SAAS;AACnC,WAAO,aAAa;AACpB,aAAU,YAAa;AAEvB,QAAK,SAAS,WAAW,aAAa,QAAS;AAC9C,YAAM,kBAAkB;AAAA,QACvB,GAAG;AAAA,QACH,QAAQ,SAAS;AAAA,MAClB;AAGA,UAAK,gBAAgB,QAAQ,aAAc;AAC1C,eAAO,gBAAgB,OAAO;AAAA,MAC/B;AAEA,kBAAa,eAAgB;AAAA,IAC9B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,uBAAqB;AAAA,MACrB,iBAAkB;AAAA;AAAA,EACnB;AAEF;",
+  "names": []
+}

package/build-module/font-families.js

@@ -0,0 +1,92 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import {
+  __experimentalText as Text,
+  __experimentalItemGroup as ItemGroup,
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  Button
+} from "@wordpress/components";
+import { settings } from "@wordpress/icons";
+import { useContext } from "@wordpress/element";
+import { Subtitle } from "./subtitle";
+import { useSetting } from "./hooks";
+import FontLibraryProvider, {
+  FontLibraryContext
+} from "./font-library-modal/context";
+import FontLibraryModal from "./font-library-modal";
+import FontFamilyItem from "./font-family-item";
+import { setUIValuesNeeded } from "./font-library-modal/utils";
+function mapFontsWithSource(fonts, source) {
+  return fonts ? fonts.map((f) => setUIValuesNeeded(f, { source })) : [];
+}
+function FontFamiliesInner() {
+  const { baseCustomFonts, modalTabOpen, setModalTabOpen } = useContext(FontLibraryContext);
+  const [fontFamilies] = useSetting("typography.fontFamilies");
+  const [baseFontFamilies] = useSetting(
+    "typography.fontFamilies",
+    void 0,
+    "base"
+  );
+  const themeFonts = mapFontsWithSource(fontFamilies?.theme, "theme");
+  const customFonts = mapFontsWithSource(fontFamilies?.custom, "custom");
+  const activeFonts = [...themeFonts, ...customFonts].sort(
+    (a, b) => a.name.localeCompare(b.name)
+  );
+  const hasFonts = 0 < activeFonts.length;
+  const hasInstalledFonts = hasFonts || baseFontFamilies?.theme?.length > 0 || (baseCustomFonts?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !!modalTabOpen && /* @__PURE__ */ jsx(
+      FontLibraryModal,
+      {
+        onRequestClose: () => setModalTabOpen?.(""),
+        defaultTabId: modalTabOpen
+      }
+    ),
+    /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
+      /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Subtitle, { level: 3, children: __("Fonts") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setModalTabOpen?.("installed-fonts"),
+            label: __("Manage fonts"),
+            icon: settings,
+            size: "small"
+          }
+        )
+      ] }),
+      activeFonts.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ItemGroup, { size: "large", isBordered: true, isSeparated: true, children: activeFonts.map((font) => /* @__PURE__ */ jsx(
+        FontFamilyItem,
+        {
+          font
+        },
+        font.slug
+      )) }) }),
+      !hasFonts && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { as: "p", children: hasInstalledFonts ? __("No fonts activated.") : __("No fonts installed.") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "global-styles-ui-font-families__manage-fonts",
+            variant: "secondary",
+            __next40pxDefaultSize: true,
+            onClick: () => {
+              setModalTabOpen?.(
+                hasInstalledFonts ? "installed-fonts" : "upload-fonts"
+              );
+            },
+            children: hasInstalledFonts ? __("Manage fonts") : __("Add fonts")
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function FontFamilies({ ...props }) {
+  return /* @__PURE__ */ jsx(FontLibraryProvider, { children: /* @__PURE__ */ jsx(FontFamiliesInner, { ...props }) });
+}
+export {
+  FontFamilies as default
+};
+//# sourceMappingURL=font-families.js.map

package/build-module/font-families.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/font-families.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalText as Text,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n} from '@wordpress/components';\nimport { settings } from '@wordpress/icons';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { useSetting } from './hooks';\nimport FontLibraryProvider, {\n\tFontLibraryContext,\n} from './font-library-modal/context';\nimport FontLibraryModal from './font-library-modal';\nimport FontFamilyItem from './font-family-item';\nimport { setUIValuesNeeded } from './font-library-modal/utils';\n\n/**\n * Maps the fonts with the source, if available.\n *\n * @param {Array}  fonts  The fonts to map.\n * @param {string} source The source of the fonts.\n * @return {Array} The mapped fonts.\n */\nfunction mapFontsWithSource( fonts: any[], source: string ) {\n\treturn fonts\n\t\t? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )\n\t\t: [];\n}\n\nfunction FontFamiliesInner() {\n\tconst { baseCustomFonts, modalTabOpen, setModalTabOpen } =\n\t\tuseContext( FontLibraryContext );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies' );\n\tconst [ baseFontFamilies ] = useSetting(\n\t\t'typography.fontFamilies',\n\t\tundefined,\n\t\t'base'\n\t);\n\tconst themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );\n\tconst customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );\n\tconst activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>\n\t\ta.name.localeCompare( b.name )\n\t);\n\tconst hasFonts = 0 < activeFonts.length;\n\tconst hasInstalledFonts =\n\t\thasFonts ||\n\t\tbaseFontFamilies?.theme?.length > 0 ||\n\t\t( baseCustomFonts?.length ?? 0 ) > 0;\n\n\treturn (\n\t\t<>\n\t\t\t{ !! modalTabOpen && (\n\t\t\t\t<FontLibraryModal\n\t\t\t\t\tonRequestClose={ () => setModalTabOpen?.( '' ) }\n\t\t\t\t\tdefaultTabId={ modalTabOpen }\n\t\t\t\t/>\n\t\t\t) }\n\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 }>{ __( 'Fonts' ) }</Subtitle>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () => setModalTabOpen?.( 'installed-fonts' ) }\n\t\t\t\t\t\tlabel={ __( 'Manage fonts' ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ activeFonts.length > 0 && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ItemGroup size=\"large\" isBordered isSeparated>\n\t\t\t\t\t\t\t{ activeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<FontFamilyItem\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ ! hasFonts && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t\t{ hasInstalledFonts\n\t\t\t\t\t\t\t\t? __( 'No fonts activated.' )\n\t\t\t\t\t\t\t\t: __( 'No fonts installed.' ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"global-styles-ui-font-families__manage-fonts\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetModalTabOpen?.(\n\t\t\t\t\t\t\t\t\thasInstalledFonts\n\t\t\t\t\t\t\t\t\t\t? 'installed-fonts'\n\t\t\t\t\t\t\t\t\t\t: 'upload-fonts'\n\t\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\t\t{ hasInstalledFonts\n\t\t\t\t\t\t\t\t? __( 'Manage fonts' )\n\t\t\t\t\t\t\t\t: __( 'Add fonts' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default function FontFamilies( { ...props } ) {\n\treturn (\n\t\t<FontLibraryProvider>\n\t\t\t<FontFamiliesInner { ...props } />\n\t\t</FontLibraryProvider>\n\t);\n}\n"],
+  "mappings": "AA8DI,SAiBC,UAjBD,KAOA,YAPA;AA3DJ,SAAS,UAAU;AACnB;AAAA,EACC,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAK3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,OAAO;AAAA,EACN;AAAA,OACM;AACP,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,SAAS,yBAAyB;AASlC,SAAS,mBAAoB,OAAc,QAAiB;AAC3D,SAAO,QACJ,MAAM,IAAK,CAAE,MAAO,kBAAmB,GAAG,EAAE,OAAO,CAAE,CAAE,IACvD,CAAC;AACL;AAEA,SAAS,oBAAoB;AAC5B,QAAM,EAAE,iBAAiB,cAAc,gBAAgB,IACtD,WAAY,kBAAmB;AAChC,QAAM,CAAE,YAAa,IAAI,WAAY,yBAA0B;AAC/D,QAAM,CAAE,gBAAiB,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,aAAa,mBAAoB,cAAc,OAAO,OAAQ;AACpE,QAAM,cAAc,mBAAoB,cAAc,QAAQ,QAAS;AACvE,QAAM,cAAc,CAAE,GAAG,YAAY,GAAG,WAAY,EAAE;AAAA,IAAM,CAAE,GAAG,MAChE,EAAE,KAAK,cAAe,EAAE,IAAK;AAAA,EAC9B;AACA,QAAM,WAAW,IAAI,YAAY;AACjC,QAAM,oBACL,YACA,kBAAkB,OAAO,SAAS,MAChC,iBAAiB,UAAU,KAAM;AAEpC,SACC,iCACG;AAAA,KAAC,CAAE,gBACJ;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB,MAAM,kBAAmB,EAAG;AAAA,QAC7C,cAAe;AAAA;AAAA,IAChB;AAAA,IAGD,qBAAC,UAAO,SAAU,GACjB;AAAA,2BAAC,UAAO,SAAQ,iBACf;AAAA,4BAAC,YAAS,OAAQ,GAAM,aAAI,OAAQ,GAAG;AAAA,QACvC;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,MAAM,kBAAmB,iBAAkB;AAAA,YACrD,OAAQ,GAAI,cAAe;AAAA,YAC3B,MAAO;AAAA,YACP,MAAK;AAAA;AAAA,QACN;AAAA,SACD;AAAA,MACE,YAAY,SAAS,KACtB,gCACC,8BAAC,aAAU,MAAK,SAAQ,YAAU,MAAC,aAAW,MAC3C,sBAAY,IAAK,CAAE,SACpB;AAAA,QAAC;AAAA;AAAA,UAEA;AAAA;AAAA,QADM,KAAK;AAAA,MAEZ,CACC,GACH,GACD;AAAA,MAEC,CAAE,YACH,iCACC;AAAA,4BAAC,QAAK,IAAG,KACN,8BACC,GAAI,qBAAsB,IAC1B,GAAI,qBAAsB,GAC9B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,uBAAqB;AAAA,YACrB,SAAU,MAAM;AACf;AAAA,gBACC,oBACG,oBACA;AAAA,cACJ;AAAA,YACD;AAAA,YAEE,8BACC,GAAI,cAAe,IACnB,GAAI,WAAY;AAAA;AAAA,QACpB;AAAA,SACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEe,SAAR,aAA+B,EAAE,GAAG,MAAM,GAAI;AACpD,SACC,oBAAC,uBACA,8BAAC,qBAAoB,GAAG,OAAQ,GACjC;AAEF;",
+  "names": []
+}

package/build-module/font-family-item.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _n, sprintf } from "@wordpress/i18n";
+import {
+  __experimentalHStack as HStack,
+  __experimentalItem as Item,
+  FlexItem
+} from "@wordpress/components";
+import { useContext } from "@wordpress/element";
+import { FontLibraryContext } from "./font-library-modal/context";
+import { getFamilyPreviewStyle } from "./font-library-modal/utils/preview-styles";
+function FontFamilyItem({ font }) {
+  const { handleSetLibraryFontSelected, setModalTabOpen } = useContext(FontLibraryContext);
+  const variantsCount = font?.fontFace?.length || 1;
+  const handleClick = () => {
+    handleSetLibraryFontSelected?.(font);
+    setModalTabOpen?.("installed-fonts");
+  };
+  const previewStyle = getFamilyPreviewStyle(font);
+  return /* @__PURE__ */ jsx(Item, { onClick: handleClick, children: /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
+    /* @__PURE__ */ jsx(FlexItem, { style: previewStyle, children: font.name }),
+    /* @__PURE__ */ jsx(FlexItem, { className: "global-styles-ui-screen-typography__font-variants-count", children: sprintf(
+      /* translators: %d: Number of font variants. */
+      _n("%d variant", "%d variants", variantsCount),
+      variantsCount
+    ) })
+  ] }) });
+}
+var font_family_item_default = FontFamilyItem;
+export {
+  font_family_item_default as default
+};
+//# sourceMappingURL=font-family-item.js.map

package/build-module/font-family-item.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/font-family-item.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _n, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalItem as Item,\n\tFlexItem,\n} from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './font-library-modal/context';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport type { FontFamily } from './font-library-modal/types';\n\ninterface FontFamilyItemProps {\n\tfont: FontFamily;\n}\n\nfunction FontFamilyItem( { font }: FontFamilyItemProps ) {\n\tconst { handleSetLibraryFontSelected, setModalTabOpen } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst variantsCount = font?.fontFace?.length || 1;\n\n\tconst handleClick = () => {\n\t\thandleSetLibraryFontSelected?.( font );\n\t\tsetModalTabOpen?.( 'installed-fonts' );\n\t};\n\n\tconst previewStyle = getFamilyPreviewStyle( font );\n\n\treturn (\n\t\t<Item onClick={ handleClick }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<FlexItem style={ previewStyle }>{ font.name }</FlexItem>\n\t\t\t\t<FlexItem className=\"global-styles-ui-screen-typography__font-variants-count\">\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %d: Number of font variants. */\n\t\t\t\t\t\t_n( '%d variant', '%d variants', variantsCount ),\n\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n\nexport default FontFamilyItem;\n"],
+  "mappings": "AAqCG,SACC,KADD;AAlCH,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,kBAAkB;AAK3B,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAOtC,SAAS,eAAgB,EAAE,KAAK,GAAyB;AACxD,QAAM,EAAE,8BAA8B,gBAAgB,IACrD,WAAY,kBAAmB;AAEhC,QAAM,gBAAgB,MAAM,UAAU,UAAU;AAEhD,QAAM,cAAc,MAAM;AACzB,mCAAgC,IAAK;AACrC,sBAAmB,iBAAkB;AAAA,EACtC;AAEA,QAAM,eAAe,sBAAuB,IAAK;AAEjD,SACC,oBAAC,QAAK,SAAU,aACf,+BAAC,UAAO,SAAQ,iBACf;AAAA,wBAAC,YAAS,OAAQ,cAAiB,eAAK,MAAM;AAAA,IAC9C,oBAAC,YAAS,WAAU,2DACjB;AAAA;AAAA,MAED,GAAI,cAAc,eAAe,aAAc;AAAA,MAC/C;AAAA,IACD,GACD;AAAA,KACD,GACD;AAEF;AAEA,IAAO,2BAAQ;",
+  "names": []
+}

package/build-module/font-library-modal/collection-font-variant.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "@wordpress/element";
+import { CheckboxControl, Flex } from "@wordpress/components";
+import { getFontFaceVariantName } from "./utils";
+import FontDemo from "./font-demo";
+function CollectionFontVariant({
+  face,
+  font,
+  handleToggleVariant,
+  selected
+}) {
+  const handleToggleActivation = () => {
+    if (font?.fontFace) {
+      handleToggleVariant(font, face);
+      return;
+    }
+    handleToggleVariant(font);
+  };
+  const displayName = font.name + " " + getFontFaceVariantName(face);
+  const checkboxId = useId();
+  return /* @__PURE__ */ jsx("div", { className: "font-library-modal__font-card", children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-start", align: "center", gap: "1rem", children: [
+    /* @__PURE__ */ jsx(
+      CheckboxControl,
+      {
+        checked: selected,
+        onChange: handleToggleActivation,
+        __nextHasNoMarginBottom: true,
+        id: checkboxId
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, children: /* @__PURE__ */ jsx(
+      FontDemo,
+      {
+        font: face,
+        text: displayName,
+        onClick: handleToggleActivation
+      }
+    ) })
+  ] }) });
+}
+var collection_font_variant_default = CollectionFontVariant;
+export {
+  collection_font_variant_default as default
+};
+//# sourceMappingURL=collection-font-variant.js.map

package/build-module/font-library-modal/collection-font-variant.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/collection-font-variant.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useId } from '@wordpress/element';\nimport { CheckboxControl, Flex } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport FontDemo from './font-demo';\nimport type { CollectionFontVariantProps } from './types';\n\nfunction CollectionFontVariant( {\n\tface,\n\tfont,\n\thandleToggleVariant,\n\tselected,\n}: CollectionFontVariantProps ) {\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\thandleToggleVariant( font, face );\n\t\t\treturn;\n\t\t}\n\t\thandleToggleVariant( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst checkboxId = useId();\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-card\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ selected }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontDemo\n\t\t\t\t\t\tfont={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default CollectionFontVariant;\n"],
+  "mappings": "AAgCG,SACC,KADD;AA7BH,SAAS,aAAa;AACtB,SAAS,iBAAiB,YAAY;AAKtC,SAAS,8BAA8B;AACvC,OAAO,cAAc;AAGrB,SAAS,sBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,yBAAyB,MAAM;AACpC,QAAK,MAAM,UAAW;AACrB,0BAAqB,MAAM,IAAK;AAChC;AAAA,IACD;AACA,wBAAqB,IAAK;AAAA,EAC3B;AAEA,QAAM,cAAc,KAAK,OAAO,MAAM,uBAAwB,IAAK;AACnE,QAAM,aAAa,MAAM;AAEzB,SACC,oBAAC,SAAI,WAAU,iCACd,+BAAC,QAAK,SAAQ,cAAa,OAAM,UAAS,KAAI,QAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,UAAW;AAAA,QACX,yBAAuB;AAAA,QACvB,IAAK;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,WAAM,SAAU,YAChB;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAO;AAAA,QACP,SAAU;AAAA;AAAA,IACX,GACD;AAAA,KACD,GACD;AAEF;AAEA,IAAO,kCAAQ;",
+  "names": []
+}