@wordpress/global-styles-ui 1.1.0

package/build/shadows-panel.js

@@ -0,0 +1,203 @@
+"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 shadows_panel_exports = {};
+__export(shadows_panel_exports, {
+  default: () => ShadowsPanel,
+  defaultShadow: () => defaultShadow
+});
+module.exports = __toCommonJS(shadows_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_element = require("@wordpress/element");
+var import_subtitle = require("./subtitle");
+var import_navigation_button = require("./navigation-button");
+var import_screen_header = require("./screen-header");
+var import_utils = require("./utils");
+var import_confirm_reset_shadow_dialog = __toESM(require("./confirm-reset-shadow-dialog"));
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+const defaultShadow = "6px 6px 9px rgba(0, 0, 0, 0.2)";
+function ShadowsPanel() {
+  const [defaultShadows] = (0, import_hooks.useSetting)("shadow.presets.default");
+  const [defaultShadowsEnabled] = (0, import_hooks.useSetting)("shadow.defaultPresets");
+  const [themeShadows] = (0, import_hooks.useSetting)("shadow.presets.theme");
+  const [customShadows, setCustomShadows] = (0, import_hooks.useSetting)(
+    "shadow.presets.custom"
+  );
+  const onCreateShadow = (shadow) => {
+    setCustomShadows([...customShadows || [], shadow]);
+  };
+  const handleResetShadows = () => {
+    setCustomShadows([]);
+  };
+  const [isResetDialogOpen, setIsResetDialogOpen] = (0, import_element.useState)(false);
+  const toggleResetDialog = () => setIsResetDialogOpen(!isResetDialogOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isResetDialogOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_confirm_reset_shadow_dialog.default,
+      {
+        text: (0, import_i18n.__)(
+          "Are you sure you want to remove all custom shadows?"
+        ),
+        confirmButtonText: (0, import_i18n.__)("Remove"),
+        isOpen: isResetDialogOpen,
+        toggleOpen: toggleResetDialog,
+        onConfirm: handleResetShadows
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: (0, import_i18n.__)("Shadows"),
+        description: (0, import_i18n.__)(
+          "Manage and create shadow styles for use across the site."
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-styles-ui-screen", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalVStack,
+      {
+        className: "global-styles-ui__shadows-panel",
+        spacing: 7,
+        children: [
+          defaultShadowsEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ShadowList,
+            {
+              label: (0, import_i18n.__)("Default"),
+              shadows: defaultShadows || [],
+              category: "default"
+            }
+          ),
+          themeShadows && themeShadows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ShadowList,
+            {
+              label: (0, import_i18n.__)("Theme"),
+              shadows: themeShadows || [],
+              category: "theme"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ShadowList,
+            {
+              label: (0, import_i18n.__)("Custom"),
+              shadows: customShadows || [],
+              category: "custom",
+              canCreate: true,
+              onCreate: onCreateShadow,
+              onReset: toggleResetDialog
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function ShadowList({
+  label,
+  shadows,
+  category,
+  canCreate,
+  onCreate,
+  onReset
+}) {
+  const handleAddShadow = () => {
+    const newIndex = (0, import_utils.getNewIndexFromPresets)(shadows, "shadow-");
+    onCreate?.({
+      name: (0, import_i18n.sprintf)(
+        /* translators: %d: is an index for a preset */
+        (0, import_i18n.__)("Shadow %d"),
+        newIndex
+      ),
+      shadow: defaultShadow,
+      slug: `shadow-${newIndex}`
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.FlexItem, { className: "global-styles-ui__shadows-panel__options-container", children: [
+        canCreate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            size: "small",
+            icon: import_icons.plus,
+            label: (0, import_i18n.__)("Add shadow"),
+            onClick: () => {
+              handleAddShadow();
+            }
+          }
+        ),
+        !!shadows?.length && category === "custom" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Menu.TriggerButton,
+            {
+              render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  size: "small",
+                  icon: import_icons.moreVertical,
+                  label: (0, import_i18n.__)("Shadow options")
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Item, { onClick: onReset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: (0, import_i18n.__)("Remove all custom shadows") }) }) })
+        ] })
+      ] })
+    ] }),
+    shadows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: shadows.map((shadow) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ShadowItem,
+      {
+        shadow,
+        category
+      },
+      shadow.slug
+    )) })
+  ] });
+}
+function ShadowItem({ shadow, category }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_navigation_button.NavigationButtonAsItem,
+    {
+      path: `/shadows/edit/${category}/${shadow.slug}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: shadow.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defaultShadow
+});
+//# sourceMappingURL=shadows-panel.js.map

package/build/shadows-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shadows-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalItemGroup as ItemGroup,\n\tButton,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tplus,\n\tIcon,\n\tchevronLeft,\n\tchevronRight,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { ScreenHeader } from './screen-header';\nimport { getNewIndexFromPresets } from './utils';\nimport ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nexport const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';\n\nexport default function ShadowsPanel() {\n\tconst [ defaultShadows ] = useSetting( 'shadow.presets.default' );\n\tconst [ defaultShadowsEnabled ] = useSetting( 'shadow.defaultPresets' );\n\tconst [ themeShadows ] = useSetting( 'shadow.presets.theme' );\n\tconst [ customShadows, setCustomShadows ] = useSetting(\n\t\t'shadow.presets.custom'\n\t);\n\n\tconst onCreateShadow = ( shadow: any ) => {\n\t\tsetCustomShadows( [ ...( customShadows || [] ), shadow ] );\n\t};\n\n\tconst handleResetShadows = () => {\n\t\tsetCustomShadows( [] );\n\t};\n\n\tconst [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );\n\n\tconst toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );\n\n\treturn (\n\t\t<>\n\t\t\t{ isResetDialogOpen && (\n\t\t\t\t<ConfirmResetShadowDialog\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Are you sure you want to remove all custom shadows?'\n\t\t\t\t\t) }\n\t\t\t\t\tconfirmButtonText={ __( 'Remove' ) }\n\t\t\t\t\tisOpen={ isResetDialogOpen }\n\t\t\t\t\ttoggleOpen={ toggleResetDialog }\n\t\t\t\t\tonConfirm={ handleResetShadows }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Shadows' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage and create shadow styles for use across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"global-styles-ui-screen\">\n\t\t\t\t<VStack\n\t\t\t\t\tclassName=\"global-styles-ui__shadows-panel\"\n\t\t\t\t\tspacing={ 7 }\n\t\t\t\t>\n\t\t\t\t\t{ defaultShadowsEnabled && (\n\t\t\t\t\t\t<ShadowList\n\t\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\t\tshadows={ defaultShadows || [] }\n\t\t\t\t\t\t\tcategory=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ themeShadows && themeShadows.length > 0 && (\n\t\t\t\t\t\t<ShadowList\n\t\t\t\t\t\t\tlabel={ __( 'Theme' ) }\n\t\t\t\t\t\t\tshadows={ themeShadows || [] }\n\t\t\t\t\t\t\tcategory=\"theme\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<ShadowList\n\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\tshadows={ customShadows || [] }\n\t\t\t\t\t\tcategory=\"custom\"\n\t\t\t\t\t\tcanCreate\n\t\t\t\t\t\tonCreate={ onCreateShadow }\n\t\t\t\t\t\tonReset={ toggleResetDialog }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\ninterface ShadowListProps {\n\tlabel: string;\n\tshadows: any[];\n\tcategory: string;\n\tcanCreate?: boolean;\n\tonCreate?: ( shadow: any ) => void;\n\tonReset?: () => void;\n}\n\nfunction ShadowList( {\n\tlabel,\n\tshadows,\n\tcategory,\n\tcanCreate,\n\tonCreate,\n\tonReset,\n}: ShadowListProps ) {\n\tconst handleAddShadow = () => {\n\t\tconst newIndex = getNewIndexFromPresets( shadows, 'shadow-' );\n\t\tonCreate?.( {\n\t\t\tname: sprintf(\n\t\t\t\t/* translators: %d: is an index for a preset */\n\t\t\t\t__( 'Shadow %d' ),\n\t\t\t\tnewIndex\n\t\t\t),\n\t\t\tshadow: defaultShadow,\n\t\t\tslug: `shadow-${ newIndex }`,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle level={ 3 }>{ label }</Subtitle>\n\t\t\t\t<FlexItem className=\"global-styles-ui__shadows-panel__options-container\">\n\t\t\t\t\t{ canCreate && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add shadow' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\thandleAddShadow();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! shadows?.length && category === 'custom' && (\n\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Shadow options' ) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t<Menu.Item onClick={ onReset }>\n\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all custom shadows' ) }\n\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t</Menu>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t\t{ shadows.length > 0 && (\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ shadows.map( ( shadow ) => (\n\t\t\t\t\t\t<ShadowItem\n\t\t\t\t\t\t\tkey={ shadow.slug }\n\t\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\ninterface ShadowItemProps {\n\tshadow: any;\n\tcategory: string;\n}\n\nfunction ShadowItem( { shadow, category }: ShadowItemProps ) {\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ `/shadows/edit/${ category }/${ shadow.slug }` }\n\t\t>\n\t\t\t<HStack>\n\t\t\t\t<FlexItem>{ shadow.name }</FlexItem>\n\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["componentsPrivateApis", "ConfirmResetShadowDialog", "VStack", "HStack", "ItemGroup"]
+}

package/build/size-control/index.js

@@ -0,0 +1,86 @@
+"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 size_control_exports = {};
+__export(size_control_exports, {
+  SizeControl: () => SizeControl
+});
+module.exports = __toCommonJS(size_control_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+const DEFAULT_UNITS = ["px", "em", "rem", "vw", "vh"];
+function SizeControl({
+  // Do not allow manipulation of margin bottom
+  __nextHasNoMarginBottom,
+  ...props
+}) {
+  const { baseControlProps } = (0, import_components.useBaseControlProps)(props);
+  const { value, onChange, fallbackValue, disabled, label } = props;
+  const units = (0, import_components.__experimentalUseCustomUnits)({
+    availableUnits: DEFAULT_UNITS
+  });
+  const [valueQuantity, valueUnit = "px"] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(value, units);
+  const isValueUnitRelative = !!valueUnit && ["em", "rem", "vw", "vh"].includes(valueUnit);
+  const handleUnitControlChange = (newValue) => {
+    onChange?.(newValue);
+  };
+  const handleRangeControlChange = (newValue) => {
+    if (newValue !== void 0) {
+      onChange?.(newValue + valueUnit);
+    } else {
+      onChange?.(void 0);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl, { ...baseControlProps, __nextHasNoMarginBottom: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalUnitControl,
+      {
+        __next40pxDefaultSize: true,
+        label,
+        hideLabelFromVision: true,
+        value,
+        onChange: handleUnitControlChange,
+        units,
+        min: 0,
+        disabled
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { marginX: 2, marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.RangeControl,
+      {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        label,
+        hideLabelFromVision: true,
+        value: valueQuantity,
+        initialPosition: fallbackValue,
+        withInputField: false,
+        onChange: handleRangeControlChange,
+        min: 0,
+        max: isValueUnitRelative ? 10 : 100,
+        step: isValueUnitRelative ? 0.1 : 1,
+        disabled
+      }
+    ) }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SizeControl
+});
+//# sourceMappingURL=index.js.map

package/build/size-control/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/size-control/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tRangeControl,\n\tFlex,\n\tFlexItem,\n\tuseBaseControlProps,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\ninterface SizeControlProps {\n\tvalue?: string;\n\tonChange?: ( value: string | undefined ) => void;\n\tfallbackValue?: number;\n\tdisabled?: boolean;\n\tlabel?: string;\n\t__nextHasNoMarginBottom?: boolean;\n}\n\nfunction SizeControl( {\n\t// Do not allow manipulation of margin bottom\n\t__nextHasNoMarginBottom,\n\t...props\n}: SizeControlProps ) {\n\tconst { baseControlProps } = useBaseControlProps( props );\n\tconst { value, onChange, fallbackValue, disabled, label } = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: DEFAULT_UNITS,\n\t} );\n\n\tconst [ valueQuantity, valueUnit = 'px' ] =\n\t\tparseQuantityAndUnitFromRawValue( value, units );\n\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\n\t// Receives the new value from the UnitControl component as a string containing the value and unit.\n\tconst handleUnitControlChange = ( newValue: string | undefined ) => {\n\t\tonChange?.( newValue );\n\t};\n\n\t// Receives the new value from the RangeControl component as a number.\n\tconst handleRangeControlChange = ( newValue: number | undefined ) => {\n\t\tif ( newValue !== undefined ) {\n\t\t\tonChange?.( newValue + valueUnit );\n\t\t} else {\n\t\t\tonChange?.( undefined );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleUnitControlChange }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\tinitialPosition={ fallbackValue }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleRangeControlChange }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport { SizeControl };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DG;AAzDH,wBAUO;AAEP,MAAM,gBAAgB,CAAE,MAAM,MAAM,OAAO,MAAM,IAAK;AAWtD,SAAS,YAAa;AAAA;AAAA,EAErB;AAAA,EACA,GAAG;AACJ,GAAsB;AACrB,QAAM,EAAE,iBAAiB,QAAI,uCAAqB,KAAM;AACxD,QAAM,EAAE,OAAO,UAAU,eAAe,UAAU,MAAM,IAAI;AAE5D,QAAM,YAAQ,kBAAAA,8BAAgB;AAAA,IAC7B,gBAAgB;AAAA,EACjB,CAAE;AAEF,QAAM,CAAE,eAAe,YAAY,IAAK,QACvC,kBAAAC,gDAAkC,OAAO,KAAM;AAEhD,QAAM,sBACL,CAAC,CAAE,aAAa,CAAE,MAAM,OAAO,MAAM,IAAK,EAAE,SAAU,SAAU;AAGjE,QAAM,0BAA0B,CAAE,aAAkC;AACnE,eAAY,QAAS;AAAA,EACtB;AAGA,QAAM,2BAA2B,CAAE,aAAkC;AACpE,QAAK,aAAa,QAAY;AAC7B,iBAAY,WAAW,SAAU;AAAA,IAClC,OAAO;AACN,iBAAY,MAAU;AAAA,IACvB;AAAA,EACD;AAEA,SACC,4CAAC,iCAAc,GAAG,kBAAmB,yBAAuB,MAC3D,uDAAC,0BACA;AAAA,gDAAC,8BAAS,SAAO,MAChB;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,uBAAqB;AAAA,QACrB;AAAA,QACA,qBAAmB;AAAA,QACnB;AAAA,QACA,UAAW;AAAA,QACX;AAAA,QACA,KAAM;AAAA,QACN;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,8BAAS,SAAO,MAChB,sDAAC,kBAAAC,sBAAA,EAAO,SAAU,GAAI,cAAe,GACpC;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB;AAAA,QACA,qBAAmB;AAAA,QACnB,OAAQ;AAAA,QACR,iBAAkB;AAAA,QAClB,gBAAiB;AAAA,QACjB,UAAW;AAAA,QACX,KAAM;AAAA,QACN,KAAM,sBAAsB,KAAK;AAAA,QACjC,MAAO,sBAAsB,MAAM;AAAA,QACnC;AAAA;AAAA,IACD,GACD,GACD;AAAA,KACD,GACD;AAEF;",
+  "names": ["useCustomUnits", "parseQuantityAndUnitFromRawValue", "UnitControl", "Spacer"]
+}

package/build/style-variations-container.js

@@ -0,0 +1,130 @@
+"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 style_variations_container_exports = {};
+__export(style_variations_container_exports, {
+  default: () => style_variations_container_default
+});
+module.exports = __toCommonJS(style_variations_container_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_preview_styles = __toESM(require("./preview-styles"));
+var import_variation = __toESM(require("./variations/variation"));
+var import_context = require("./context");
+var import_utils = require("./utils");
+function StyleVariationsContainer({
+  gap = 2
+}) {
+  const { user } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const userStyles = user?.styles;
+  const variations = (0, import_data.useSelect)((select) => {
+    const result = select(
+      import_core_data.store
+    ).__experimentalGetCurrentThemeGlobalStylesVariations();
+    return Array.isArray(result) ? result : void 0;
+  }, []);
+  const fullStyleVariations = variations?.filter(
+    (variation) => {
+      return !(0, import_utils.isVariationWithProperties)(variation, ["color"]) && !(0, import_utils.isVariationWithProperties)(variation, [
+        "typography",
+        "spacing"
+      ]);
+    }
+  );
+  const themeVariations = (0, import_element.useMemo)(() => {
+    const withEmptyVariation = [
+      {
+        title: (0, import_i18n.__)("Default"),
+        settings: {},
+        styles: {}
+      },
+      ...fullStyleVariations ?? []
+    ];
+    return [
+      ...withEmptyVariation.map((variation) => {
+        const blockStyles = variation?.styles?.blocks ? { ...variation.styles.blocks } : {};
+        if (userStyles?.blocks) {
+          Object.keys(userStyles.blocks).forEach((blockName) => {
+            if (userStyles.blocks?.[blockName]?.css) {
+              const variationBlockStyles = blockStyles[blockName] || {};
+              const customCSS = {
+                css: `${blockStyles[blockName]?.css || ""} ${userStyles.blocks?.[blockName]?.css?.trim() || ""}`
+              };
+              blockStyles[blockName] = {
+                ...variationBlockStyles,
+                ...customCSS
+              };
+            }
+          });
+        }
+        const css = userStyles?.css || variation.styles?.css ? {
+          css: `${variation.styles?.css || ""} ${userStyles?.css || ""}`
+        } : {};
+        const blocks = Object.keys(blockStyles).length > 0 ? { blocks: blockStyles } : {};
+        const styles = {
+          ...variation.styles,
+          ...css,
+          ...blocks
+        };
+        return {
+          ...variation,
+          settings: variation.settings ?? {},
+          styles
+        };
+      })
+    ];
+  }, [fullStyleVariations, userStyles?.blocks, userStyles?.css]);
+  if (!fullStyleVariations || fullStyleVariations.length < 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalGrid,
+    {
+      columns: 2,
+      className: "global-styles-ui-style-variations-container",
+      gap,
+      children: themeVariations.map(
+        (variation, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variation.default, { variation, children: (isFocused) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_preview_styles.default,
+          {
+            label: variation?.title,
+            withHoverView: true,
+            isFocused,
+            variation
+          }
+        ) }, index)
+      )
+    }
+  );
+}
+var style_variations_container_default = StyleVariationsContainer;
+//# sourceMappingURL=style-variations-container.js.map

package/build/style-variations-container.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/style-variations-container.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport type {\n\tGlobalStylesConfig,\n\tStyleVariation,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\nimport { GlobalStylesContext } from './context';\nimport { isVariationWithProperties } from './utils';\n\ninterface StyleVariationsContainerProps {\n\tgap?: number;\n}\n\nfunction StyleVariationsContainer( {\n\tgap = 2,\n}: StyleVariationsContainerProps ) {\n\tconst { user } = useContext( GlobalStylesContext );\n\tconst userStyles = user?.styles;\n\n\tconst variations = useSelect( ( select ) => {\n\t\tconst result =\n\t\t\tselect(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t\t// The API might return null or an array\n\t\treturn Array.isArray( result )\n\t\t\t? ( result as GlobalStylesConfig[] )\n\t\t\t: undefined;\n\t}, [] );\n\n\t// Filter out variations that are color or typography variations.\n\tconst fullStyleVariations = variations?.filter(\n\t\t( variation: GlobalStylesConfig ) => {\n\t\t\treturn (\n\t\t\t\t! isVariationWithProperties( variation, [ 'color' ] ) &&\n\t\t\t\t! isVariationWithProperties( variation, [\n\t\t\t\t\t'typography',\n\t\t\t\t\t'spacing',\n\t\t\t\t] )\n\t\t\t);\n\t\t}\n\t);\n\n\tconst themeVariations = useMemo( () => {\n\t\tconst withEmptyVariation: StyleVariation[] = [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( fullStyleVariations ?? [] ),\n\t\t];\n\t\treturn [\n\t\t\t...withEmptyVariation.map( ( variation: StyleVariation ) => {\n\t\t\t\tconst blockStyles = variation?.styles?.blocks\n\t\t\t\t\t? { ...variation.styles.blocks }\n\t\t\t\t\t: {};\n\n\t\t\t\t// We need to copy any user custom CSS to the variation to prevent it being lost\n\t\t\t\t// when switching variations.\n\t\t\t\tif ( userStyles?.blocks ) {\n\t\t\t\t\tObject.keys( userStyles.blocks ).forEach( ( blockName ) => {\n\t\t\t\t\t\t// First get any block specific custom CSS from the current user styles and merge with any custom CSS for\n\t\t\t\t\t\t// that block in the variation.\n\t\t\t\t\t\tif ( userStyles.blocks?.[ blockName ]?.css ) {\n\t\t\t\t\t\t\tconst variationBlockStyles =\n\t\t\t\t\t\t\t\tblockStyles[ blockName ] || {};\n\t\t\t\t\t\t\tconst customCSS = {\n\t\t\t\t\t\t\t\tcss: `${\n\t\t\t\t\t\t\t\t\tblockStyles[ blockName ]?.css || ''\n\t\t\t\t\t\t\t\t} ${\n\t\t\t\t\t\t\t\t\tuserStyles.blocks?.[\n\t\t\t\t\t\t\t\t\t\tblockName\n\t\t\t\t\t\t\t\t\t]?.css?.trim() || ''\n\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tblockStyles[ blockName ] = {\n\t\t\t\t\t\t\t\t...variationBlockStyles,\n\t\t\t\t\t\t\t\t...customCSS,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\t// Now merge any global custom CSS from current user styles with global custom CSS in the variation.\n\t\t\t\tconst css =\n\t\t\t\t\tuserStyles?.css || variation.styles?.css\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tcss: `${ variation.styles?.css || '' } ${\n\t\t\t\t\t\t\t\t\tuserStyles?.css || ''\n\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: {};\n\n\t\t\t\tconst blocks =\n\t\t\t\t\tObject.keys( blockStyles ).length > 0\n\t\t\t\t\t\t? { blocks: blockStyles }\n\t\t\t\t\t\t: {};\n\n\t\t\t\tconst styles = {\n\t\t\t\t\t...variation.styles,\n\t\t\t\t\t...css,\n\t\t\t\t\t...blocks,\n\t\t\t\t};\n\t\t\t\treturn {\n\t\t\t\t\t...variation,\n\t\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\t\tstyles,\n\t\t\t\t};\n\t\t\t} ),\n\t\t];\n\t}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );\n\n\tif ( ! fullStyleVariations || fullStyleVariations.length < 1 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"global-styles-ui-style-variations-container\"\n\t\t\tgap={ gap }\n\t\t>\n\t\t\t{ themeVariations.map(\n\t\t\t\t( variation: StyleVariation, index: number ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ ( isFocused: boolean ) => (\n\t\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Variation>\n\t\t\t\t)\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport default StyleVariationsContainer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0IO;AAvIP,uBAAmC;AACnC,kBAA0B;AAC1B,qBAAoC;AACpC,wBAA2C;AAC3C,kBAAmB;AASnB,4BAA0B;AAC1B,uBAAsB;AACtB,qBAAoC;AACpC,mBAA0C;AAM1C,SAAS,yBAA0B;AAAA,EAClC,MAAM;AACP,GAAmC;AAClC,QAAM,EAAE,KAAK,QAAI,2BAAY,kCAAoB;AACjD,QAAM,aAAa,MAAM;AAEzB,QAAM,iBAAa,uBAAW,CAAE,WAAY;AAC3C,UAAM,SACL;AAAA,MACC,iBAAAA;AAAA,IACD,EAAE,oDAAoD;AAEvD,WAAO,MAAM,QAAS,MAAO,IACxB,SACF;AAAA,EACJ,GAAG,CAAC,CAAE;AAGN,QAAM,sBAAsB,YAAY;AAAA,IACvC,CAAE,cAAmC;AACpC,aACC,KAAE,wCAA2B,WAAW,CAAE,OAAQ,CAAE,KACpD,KAAE,wCAA2B,WAAW;AAAA,QACvC;AAAA,QACA;AAAA,MACD,CAAE;AAAA,IAEJ;AAAA,EACD;AAEA,QAAM,sBAAkB,wBAAS,MAAM;AACtC,UAAM,qBAAuC;AAAA,MAC5C;AAAA,QACC,WAAO,gBAAI,SAAU;AAAA,QACrB,UAAU,CAAC;AAAA,QACX,QAAQ,CAAC;AAAA,MACV;AAAA,MACA,GAAK,uBAAuB,CAAC;AAAA,IAC9B;AACA,WAAO;AAAA,MACN,GAAG,mBAAmB,IAAK,CAAE,cAA+B;AAC3D,cAAM,cAAc,WAAW,QAAQ,SACpC,EAAE,GAAG,UAAU,OAAO,OAAO,IAC7B,CAAC;AAIJ,YAAK,YAAY,QAAS;AACzB,iBAAO,KAAM,WAAW,MAAO,EAAE,QAAS,CAAE,cAAe;AAG1D,gBAAK,WAAW,SAAU,SAAU,GAAG,KAAM;AAC5C,oBAAM,uBACL,YAAa,SAAU,KAAK,CAAC;AAC9B,oBAAM,YAAY;AAAA,gBACjB,KAAK,GACJ,YAAa,SAAU,GAAG,OAAO,EAClC,IACC,WAAW,SACV,SACD,GAAG,KAAK,KAAK,KAAK,EACnB;AAAA,cACD;AACA,0BAAa,SAAU,IAAI;AAAA,gBAC1B,GAAG;AAAA,gBACH,GAAG;AAAA,cACJ;AAAA,YACD;AAAA,UACD,CAAE;AAAA,QACH;AAEA,cAAM,MACL,YAAY,OAAO,UAAU,QAAQ,MAClC;AAAA,UACA,KAAK,GAAI,UAAU,QAAQ,OAAO,EAAG,IACpC,YAAY,OAAO,EACpB;AAAA,QACA,IACA,CAAC;AAEL,cAAM,SACL,OAAO,KAAM,WAAY,EAAE,SAAS,IACjC,EAAE,QAAQ,YAAY,IACtB,CAAC;AAEL,cAAM,SAAS;AAAA,UACd,GAAG,UAAU;AAAA,UACb,GAAG;AAAA,UACH,GAAG;AAAA,QACJ;AACA,eAAO;AAAA,UACN,GAAG;AAAA,UACH,UAAU,UAAU,YAAY,CAAC;AAAA,UACjC;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAE,qBAAqB,YAAY,QAAQ,YAAY,GAAI,CAAE;AAEhE,MAAK,CAAE,uBAAuB,oBAAoB,SAAS,GAAI;AAC9D,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,SAAU;AAAA,MACV,WAAU;AAAA,MACV;AAAA,MAEE,0BAAgB;AAAA,QACjB,CAAE,WAA2B,UAC5B,4CAAC,iBAAAC,SAAA,EAAwB,WACtB,WAAE,cACH;AAAA,UAAC,sBAAAC;AAAA,UAAA;AAAA,YACA,OAAQ,WAAW;AAAA,YACnB,eAAa;AAAA,YACb;AAAA,YACA;AAAA;AAAA,QACD,KAPe,KASjB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,qCAAQ;",
+  "names": ["coreStore", "Grid", "Variation", "PreviewStyles"]
+}

package/build/style-variations-content.js

@@ -0,0 +1,52 @@
+"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 style_variations_content_exports = {};
+__export(style_variations_content_exports, {
+  StyleVariationsContent: () => StyleVariationsContent
+});
+module.exports = __toCommonJS(style_variations_content_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_style_variations_container = __toESM(require("./style-variations-container"));
+var import_variations_typography = __toESM(require("./variations/variations-typography"));
+var import_variations_color = __toESM(require("./variations/variations-color"));
+function StyleVariationsContent() {
+  const gap = 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 10, className: "global-styles-ui-variation-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style_variations_container.default, { gap }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variations_color.default, { title: (0, import_i18n.__)("Color Variations"), gap }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variations_typography.default, { title: (0, import_i18n.__)("Typography"), gap })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleVariationsContent
+});
+//# sourceMappingURL=style-variations-content.js.map

package/build/style-variations-content.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/style-variations-content.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport StyleVariationsContainer from './style-variations-container';\nimport TypographyVariations from './variations/variations-typography';\nimport ColorVariations from './variations/variations-color';\n\nexport function StyleVariationsContent() {\n\tconst gap = 3;\n\n\treturn (\n\t\t<VStack spacing={ 10 } className=\"global-styles-ui-variation-container\">\n\t\t\t<StyleVariationsContainer gap={ gap } />\n\t\t\t<ColorVariations title={ __( 'Color Variations' ) } gap={ gap } />\n\t\t\t<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBE;AAdF,kBAAmB;AACnB,wBAA+C;AAK/C,wCAAqC;AACrC,mCAAiC;AACjC,8BAA4B;AAErB,SAAS,yBAAyB;AACxC,QAAM,MAAM;AAEZ,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,IAAK,WAAU,wCAChC;AAAA,gDAAC,kCAAAC,SAAA,EAAyB,KAAY;AAAA,IACtC,4CAAC,wBAAAC,SAAA,EAAgB,WAAQ,gBAAI,kBAAmB,GAAI,KAAY;AAAA,IAChE,4CAAC,6BAAAC,SAAA,EAAqB,WAAQ,gBAAI,YAAa,GAAI,KAAY;AAAA,KAChE;AAEF;",
+  "names": ["VStack", "StyleVariationsContainer", "ColorVariations", "TypographyVariations"]
+}

package/build/style-variations.js

@@ -0,0 +1,41 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_variations_exports = {};
+__export(style_variations_exports, {
+  StyleVariations: () => StyleVariations
+});
+module.exports = __toCommonJS(style_variations_exports);
+var import_style_variations_container = __toESM(require("./style-variations-container"));
+var import_with_global_styles_provider = require("./with-global-styles-provider");
+const StyleVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_style_variations_container.default);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleVariations
+});
+//# sourceMappingURL=style-variations.js.map

package/build/style-variations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/style-variations.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport StyleVariationsContainer from './style-variations-container';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface StyleVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\tgap?: number;\n}\n\n/**\n * Render Style Variations.\n *\n * @example\n * ```tsx\n * <StyleVariations\n *   value={userConfig}\n *   baseValue={baseConfig}\n *   onChange={setUserConfig}\n *   gap={3}\n * />\n * ```\n */\nexport const StyleVariations: React.ComponentType< StyleVariationsProps > =\n\twithGlobalStylesProvider( StyleVariationsContainer );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,wCAAqC;AACrC,yCAAyC;AAsBlC,MAAM,sBACZ,6DAA0B,kCAAAA,OAAyB;",
+  "names": ["StyleVariationsContainer"]
+}

package/build/subtitle.js

@@ -0,0 +1,33 @@
+"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 subtitle_exports = {};
+__export(subtitle_exports, {
+  Subtitle: () => Subtitle
+});
+module.exports = __toCommonJS(subtitle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+function Subtitle({ children, level = 2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { className: "global-styles-ui-subtitle", level, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Subtitle
+});
+//# sourceMappingURL=subtitle.js.map

package/build/subtitle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/subtitle.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHeading as Heading } from '@wordpress/components';\n\ninterface SubtitleProps {\n\tchildren: React.ReactNode;\n\tlevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport function Subtitle( { children, level = 2 }: SubtitleProps ) {\n\treturn (\n\t\t<Heading className=\"global-styles-ui-subtitle\" level={ level }>\n\t\t\t{ children }\n\t\t</Heading>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYE;AATF,wBAAiD;AAO1C,SAAS,SAAU,EAAE,UAAU,QAAQ,EAAE,GAAmB;AAClE,SACC,4CAAC,kBAAAA,uBAAA,EAAQ,WAAU,6BAA4B,OAC5C,UACH;AAEF;",
+  "names": ["Heading"]
+}