@wordpress/global-styles-ui 1.1.0

package/build-module/shadows-panel.js

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

package/build-module/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": []
+}

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  BaseControl,
+  RangeControl,
+  Flex,
+  FlexItem,
+  useBaseControlProps,
+  __experimentalUseCustomUnits as useCustomUnits,
+  __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+  __experimentalUnitControl as UnitControl,
+  __experimentalSpacer as Spacer
+} from "@wordpress/components";
+const DEFAULT_UNITS = ["px", "em", "rem", "vw", "vh"];
+function SizeControl({
+  // Do not allow manipulation of margin bottom
+  __nextHasNoMarginBottom,
+  ...props
+}) {
+  const { baseControlProps } = useBaseControlProps(props);
+  const { value, onChange, fallbackValue, disabled, label } = props;
+  const units = useCustomUnits({
+    availableUnits: DEFAULT_UNITS
+  });
+  const [valueQuantity, valueUnit = "px"] = parseQuantityAndUnitFromRawValue(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__ */ jsx(BaseControl, { ...baseControlProps, __nextHasNoMarginBottom: true, children: /* @__PURE__ */ jsxs(Flex, { children: [
+    /* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: /* @__PURE__ */ jsx(
+      UnitControl,
+      {
+        __next40pxDefaultSize: true,
+        label,
+        hideLabelFromVision: true,
+        value,
+        onChange: handleUnitControlChange,
+        units,
+        min: 0,
+        disabled
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: /* @__PURE__ */ jsx(Spacer, { marginX: 2, marginBottom: 0, children: /* @__PURE__ */ jsx(
+      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
+      }
+    ) }) })
+  ] }) });
+}
+export {
+  SizeControl
+};
+//# sourceMappingURL=index.js.map

package/build-module/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": "AA4DG,SAEE,KAFF;AAzDH;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,kDAAkD;AAAA,EAClD,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,OAClB;AAEP,MAAM,gBAAgB,CAAE,MAAM,MAAM,OAAO,MAAM,IAAK;AAWtD,SAAS,YAAa;AAAA;AAAA,EAErB;AAAA,EACA,GAAG;AACJ,GAAsB;AACrB,QAAM,EAAE,iBAAiB,IAAI,oBAAqB,KAAM;AACxD,QAAM,EAAE,OAAO,UAAU,eAAe,UAAU,MAAM,IAAI;AAE5D,QAAM,QAAQ,eAAgB;AAAA,IAC7B,gBAAgB;AAAA,EACjB,CAAE;AAEF,QAAM,CAAE,eAAe,YAAY,IAAK,IACvC,iCAAkC,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,oBAAC,eAAc,GAAG,kBAAmB,yBAAuB,MAC3D,+BAAC,QACA;AAAA,wBAAC,YAAS,SAAO,MAChB;AAAA,MAAC;AAAA;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,oBAAC,YAAS,SAAO,MAChB,8BAAC,UAAO,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": []
+}

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

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useContext, useMemo } from "@wordpress/element";
+import { __experimentalGrid as Grid } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import PreviewStyles from "./preview-styles";
+import Variation from "./variations/variation";
+import { GlobalStylesContext } from "./context";
+import { isVariationWithProperties } from "./utils";
+function StyleVariationsContainer({
+  gap = 2
+}) {
+  const { user } = useContext(GlobalStylesContext);
+  const userStyles = user?.styles;
+  const variations = useSelect((select) => {
+    const result = select(
+      coreStore
+    ).__experimentalGetCurrentThemeGlobalStylesVariations();
+    return Array.isArray(result) ? result : void 0;
+  }, []);
+  const fullStyleVariations = variations?.filter(
+    (variation) => {
+      return !isVariationWithProperties(variation, ["color"]) && !isVariationWithProperties(variation, [
+        "typography",
+        "spacing"
+      ]);
+    }
+  );
+  const themeVariations = useMemo(() => {
+    const withEmptyVariation = [
+      {
+        title: __("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__ */ jsx(
+    Grid,
+    {
+      columns: 2,
+      className: "global-styles-ui-style-variations-container",
+      gap,
+      children: themeVariations.map(
+        (variation, index) => /* @__PURE__ */ jsx(Variation, { variation, children: (isFocused) => /* @__PURE__ */ jsx(
+          PreviewStyles,
+          {
+            label: variation?.title,
+            withHoverView: true,
+            isFocused,
+            variation
+          }
+        ) }, index)
+      )
+    }
+  );
+}
+var style_variations_container_default = StyleVariationsContainer;
+export {
+  style_variations_container_default as default
+};
+//# sourceMappingURL=style-variations-container.js.map

package/build-module/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": "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",
+  "names": []
+}

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

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { __experimentalVStack as VStack } from "@wordpress/components";
+import StyleVariationsContainer from "./style-variations-container";
+import TypographyVariations from "./variations/variations-typography";
+import ColorVariations from "./variations/variations-color";
+function StyleVariationsContent() {
+  const gap = 3;
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 10, className: "global-styles-ui-variation-container", children: [
+    /* @__PURE__ */ jsx(StyleVariationsContainer, { gap }),
+    /* @__PURE__ */ jsx(ColorVariations, { title: __("Color Variations"), gap }),
+    /* @__PURE__ */ jsx(TypographyVariations, { title: __("Typography"), gap })
+  ] });
+}
+export {
+  StyleVariationsContent
+};
+//# sourceMappingURL=style-variations-content.js.map

package/build-module/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": "AAiBE,SACC,KADD;AAdF,SAAS,UAAU;AACnB,SAAS,wBAAwB,cAAc;AAK/C,OAAO,8BAA8B;AACrC,OAAO,0BAA0B;AACjC,OAAO,qBAAqB;AAErB,SAAS,yBAAyB;AACxC,QAAM,MAAM;AAEZ,SACC,qBAAC,UAAO,SAAU,IAAK,WAAU,wCAChC;AAAA,wBAAC,4BAAyB,KAAY;AAAA,IACtC,oBAAC,mBAAgB,OAAQ,GAAI,kBAAmB,GAAI,KAAY;AAAA,IAChE,oBAAC,wBAAqB,OAAQ,GAAI,YAAa,GAAI,KAAY;AAAA,KAChE;AAEF;",
+  "names": []
+}

package/build-module/style-variations.js

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

package/build-module/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": "AAQA,OAAO,8BAA8B;AACrC,SAAS,gCAAgC;AAsBlC,MAAM,kBACZ,yBAA0B,wBAAyB;",
+  "names": []
+}

package/build-module/subtitle.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { __experimentalHeading as Heading } from "@wordpress/components";
+function Subtitle({ children, level = 2 }) {
+  return /* @__PURE__ */ jsx(Heading, { className: "global-styles-ui-subtitle", level, children });
+}
+export {
+  Subtitle
+};
+//# sourceMappingURL=subtitle.js.map

package/build-module/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": "AAYE;AATF,SAAS,yBAAyB,eAAe;AAO1C,SAAS,SAAU,EAAE,UAAU,QAAQ,EAAE,GAAmB;AAClE,SACC,oBAAC,WAAQ,WAAU,6BAA4B,OAC5C,UACH;AAEF;",
+  "names": []
+}

package/build-module/typography-elements.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import {
+  __experimentalItemGroup as ItemGroup,
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  FlexItem
+} from "@wordpress/components";
+import { NavigationButtonAsItem } from "./navigation-button";
+import { Subtitle } from "./subtitle";
+import { useStyle } from "./hooks";
+function ElementItem({ parentMenu, element, label }) {
+  const prefix = element === "text" || !element ? "" : `elements.${element}.`;
+  const extraStyles = element === "link" ? {
+    textDecoration: "underline"
+  } : {};
+  const [fontFamily] = useStyle(
+    prefix + "typography.fontFamily"
+  );
+  const [fontStyle] = useStyle(prefix + "typography.fontStyle");
+  const [fontWeight] = useStyle(
+    prefix + "typography.fontWeight"
+  );
+  const [backgroundColor] = useStyle(
+    prefix + "color.background"
+  );
+  const [fallbackBackgroundColor] = useStyle("color.background");
+  const [gradientValue] = useStyle(prefix + "color.gradient");
+  const [color] = useStyle(prefix + "color.text");
+  return /* @__PURE__ */ jsx(NavigationButtonAsItem, { path: parentMenu + "/typography/" + element, children: /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
+    /* @__PURE__ */ jsx(
+      FlexItem,
+      {
+        className: "global-styles-ui-screen-typography__indicator",
+        "aria-hidden": "true",
+        style: {
+          fontFamily: fontFamily ?? "serif",
+          background: gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
+          color,
+          fontStyle,
+          fontWeight,
+          ...extraStyles
+        },
+        children: __("Aa")
+      }
+    ),
+    /* @__PURE__ */ jsx(FlexItem, { children: label })
+  ] }) });
+}
+function TypographyElements() {
+  const parentMenu = "";
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
+    /* @__PURE__ */ jsx(Subtitle, { level: 3, children: __("Elements") }),
+    /* @__PURE__ */ jsxs(ItemGroup, { isBordered: true, isSeparated: true, children: [
+      /* @__PURE__ */ jsx(
+        ElementItem,
+        {
+          parentMenu,
+          element: "text",
+          label: __("Text")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ElementItem,
+        {
+          parentMenu,
+          element: "link",
+          label: __("Links")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ElementItem,
+        {
+          parentMenu,
+          element: "heading",
+          label: __("Headings")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ElementItem,
+        {
+          parentMenu,
+          element: "caption",
+          label: __("Captions")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ElementItem,
+        {
+          parentMenu,
+          element: "button",
+          label: __("Buttons")
+        }
+      )
+    ] })
+  ] });
+}
+var typography_elements_default = TypographyElements;
+export {
+  typography_elements_default as default
+};
+//# sourceMappingURL=typography-elements.js.map

package/build-module/typography-elements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-elements.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { Subtitle } from './subtitle';\nimport { useStyle } from './hooks';\n\ninterface ElementItemProps {\n\tparentMenu: string;\n\telement: string;\n\tlabel: string;\n}\n\nfunction ElementItem( { parentMenu, element, label }: ElementItemProps ) {\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\n\tconst [ fontFamily ] = useStyle< string >(\n\t\tprefix + 'typography.fontFamily'\n\t);\n\tconst [ fontStyle ] = useStyle< string >( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useStyle< string >(\n\t\tprefix + 'typography.fontWeight'\n\t);\n\tconst [ backgroundColor ] = useStyle< string >(\n\t\tprefix + 'color.background'\n\t);\n\tconst [ fallbackBackgroundColor ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( prefix + 'color.gradient' );\n\tconst [ color ] = useStyle< string >( prefix + 'color.text' );\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"global-styles-ui-screen-typography__indicator\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\tbackgroundColor ??\n\t\t\t\t\t\t\tfallbackBackgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],
+  "mappings": "AAmDG,SACC,KADD;AAhDH,SAAS,UAAU;AACnB;AAAA,EACC,2BAA2B;AAAA,EAC3B,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AAKP,SAAS,8BAA8B;AACvC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAQzB,SAAS,YAAa,EAAE,YAAY,SAAS,MAAM,GAAsB;AACxE,QAAM,SACL,YAAY,UAAU,CAAE,UAAU,KAAK,YAAa,OAAQ;AAC7D,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,QAAM,CAAE,UAAW,IAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,SAAU,IAAI,SAAoB,SAAS,sBAAuB;AAC1E,QAAM,CAAE,UAAW,IAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,eAAgB,IAAI;AAAA,IAC3B,SAAS;AAAA,EACV;AACA,QAAM,CAAE,uBAAwB,IAC/B,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,SAAS,gBAAiB;AACxE,QAAM,CAAE,KAAM,IAAI,SAAoB,SAAS,YAAa;AAE5D,SACC,oBAAC,0BAAuB,MAAO,aAAa,iBAAiB,SAC5D,+BAAC,UAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAQ;AAAA,UACP,YAAY,cAAc;AAAA,UAC1B,YACC,iBACA,mBACA;AAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ;AAAA,QAEE,aAAI,IAAK;AAAA;AAAA,IACZ;AAAA,IACA,oBAAC,YAAW,iBAAO;AAAA,KACpB,GACD;AAEF;AAEA,SAAS,qBAAqB;AAC7B,QAAM,aAAa;AAEnB,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,UAAW,GAAG;AAAA,IAC1C,qBAAC,aAAU,YAAU,MAAC,aAAW,MAChC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,MAAO;AAAA;AAAA,MACpB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,OAAQ;AAAA;AAAA,MACrB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,SAAU;AAAA;AAAA,MACvB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "names": []
+}