@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/README.md

@@ -29,17 +29,12 @@ Many components include CSS to add styles, which you will need to load in order
 
 In non-WordPress projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@wordpress/components/build-style/style.css`.
 
-### Popovers and Tooltips
-
-_If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._
+### Popovers
 
 By default, the `Popover` component will render within an extra element appended to the body of the document.
 
 If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
 
-A `Popover` is also used as the underlying mechanism to display `Tooltip` components.
-So the same considerations should be applied to them.
-
 The following example illustrates how you can wrap a component using a
 `Popover` and have those popovers render to a single location in the DOM.
 
@@ -58,7 +53,7 @@ const Example = () => {
 	<SlotFillProvider>
 		<MyComponentWithPopover />
 		<Popover.Slot />
-	</SlotFillProvider>
+	</SlotFillProvider>;
 };
 ```
 

package/build/alignment-matrix-control/cell.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Cell;
-var _element = require("@wordpress/element");
-var _composite = require("../composite");
+var _react = require("react");
+var _v = require("../composite/v2");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _visuallyHidden = require("../visually-hidden");
 var _utils = require("./utils");
@@ -20,18 +20,21 @@ var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-s
  */
 
 function Cell({
+  id,
   isActive = false,
   value,
   ...props
 }) {
   const tooltipText = _utils.ALIGNMENT_LABEL[value];
-  return (0, _element.createElement)(_tooltip.default, {
+  return (0, _react.createElement)(_tooltip.default, {
     text: tooltipText
-  }, (0, _element.createElement)(_composite.CompositeItem, {
-    as: _alignmentMatrixControlStyles.Cell,
-    role: "gridcell",
-    ...props
-  }, (0, _element.createElement)(_visuallyHidden.VisuallyHidden, null, value), (0, _element.createElement)(_alignmentMatrixControlStyles.Point, {
+  }, (0, _react.createElement)(_v.CompositeItem, {
+    id: id,
+    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Cell, {
+      ...props,
+      role: "gridcell"
+    })
+  }, (0, _react.createElement)(_visuallyHidden.VisuallyHidden, null, value), (0, _react.createElement)(_alignmentMatrixControlStyles.Point, {
     isActive: isActive,
     role: "presentation"
   })));

package/build/alignment-matrix-control/cell.js.map

@@ -1 +1 @@
-{"version":3,"names":["_composite","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","Cell","isActive","value","props","tooltipText","ALIGNMENT_LABEL","_element","createElement","default","text","CompositeItem","as","CellView","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function Cell( {\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem as={ CellView } role=\"gridcell\" { ...props }>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASM,IAAIA,CAAE;EAC7BC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,OACC,IAAAI,QAAA,CAAAC,aAAA,EAACZ,QAAA,CAAAa,OAAO;IAACC,IAAI,EAAGL;EAAa,GAC5B,IAAAE,QAAA,CAAAC,aAAA,EAACd,UAAA,CAAAiB,aAAa;IAACC,EAAE,EAAGC,kCAAU;IAACC,IAAI,EAAC,UAAU;IAAA,GAAMV;EAAK,GAIxD,IAAAG,QAAA,CAAAC,aAAA,EAACV,eAAA,CAAAiB,cAAc,QAAGZ,KAAuB,CAAC,EAC1C,IAAAI,QAAA,CAAAC,aAAA,EAACR,6BAAA,CAAAgB,KAAK;IAACd,QAAQ,EAAGA,QAAU;IAACY,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ"}
+{"version":3,"names":["_v","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","Cell","id","isActive","value","props","tooltipText","ALIGNMENT_LABEL","_react","createElement","default","text","CompositeItem","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,EAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASM,IAAIA,CAAE;EAC7BC,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACb,QAAA,CAAAc,OAAO;IAACC,IAAI,EAAGL;EAAa,GAC5B,IAAAE,MAAA,CAAAC,aAAA,EAACf,EAAA,CAAAkB,aAAa;IACbV,EAAE,EAAGA,EAAI;IACTW,MAAM,EAAG,IAAAL,MAAA,CAAAC,aAAA,EAACT,6BAAA,CAAAC,IAAQ;MAAA,GAAMI,KAAK;MAAGS,IAAI,EAAC;IAAU,CAAE;EAAG,GAKpD,IAAAN,MAAA,CAAAC,aAAA,EAACX,eAAA,CAAAiB,cAAc,QAAGX,KAAuB,CAAC,EAC1C,IAAAI,MAAA,CAAAC,aAAA,EAACT,6BAAA,CAAAgB,KAAK;IAACb,QAAQ,EAAGA,QAAU;IAACW,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ"}

package/build/alignment-matrix-control/icon.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("./utils");
 var _alignmentMatrixControlIconStyles = require("./styles/alignment-matrix-control-icon-styles");
@@ -33,7 +33,7 @@ function AlignmentMatrixControlIcon({
     ...style,
     transform: `scale(${scale})`
   };
-  return (0, _element.createElement)(_alignmentMatrixControlIconStyles.Root, {
+  return (0, _react.createElement)(_alignmentMatrixControlIconStyles.Root, {
     ...props,
     className: classes,
     disablePointerEvents: disablePointerEvents,
@@ -41,13 +41,12 @@ function AlignmentMatrixControlIcon({
     style: styles
   }, _utils.ALIGNMENTS.map((align, index) => {
     const isActive = alignIndex === index;
-    return (0, _element.createElement)(_alignmentMatrixControlIconStyles.Cell, {
+    return (0, _react.createElement)(_alignmentMatrixControlIconStyles.Cell, {
       key: align
-    }, (0, _element.createElement)(_alignmentMatrixControlIconStyles.Point, {
+    }, (0, _react.createElement)(_alignmentMatrixControlIconStyles.Point, {
       isActive: isActive
     }));
   }));
 }
-var _default = AlignmentMatrixControlIcon;
-exports.default = _default;
+var _default = exports.default = AlignmentMatrixControlIcon;
 //# sourceMappingURL=icon.js.map

package/build/alignment-matrix-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","classnames","styles","transform","_element","createElement","Root","role","ALIGNMENTS","map","align","index","isActive","Cell","key","Point","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iCAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAUA,MAAMG,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAAEH,KAAM,CAAC;EAC7C,MAAMI,KAAK,GAAG,CAAEN,IAAI,GAAGJ,SAAS,EAAGW,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,yCAAyC,EACzCX,SACD,CAAC;EAED,MAAMY,MAAM,GAAG;IACd,GAAGT,KAAK;IACRU,SAAS,EAAG,SAASL,KAAO;EAC7B,CAAC;EAED,OACC,IAAAM,QAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAAmB,IAAI;IAAA,GACCX,KAAK;IACVL,SAAS,EAAGU,OAAS;IACrBT,oBAAoB,EAAGA,oBAAsB;IAC7CgB,IAAI,EAAC,cAAc;IACnBd,KAAK,EAAGS;EAAQ,GAEdM,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IACrC,MAAMC,QAAQ,GAAGhB,UAAU,KAAKe,KAAK;IAErC,OACC,IAAAP,QAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAA0B,IAAI;MAACC,GAAG,EAAGJ;IAAO,GAClB,IAAAN,QAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAA4B,KAAK;MAACH,QAAQ,EAAGA;IAAU,CAAE,CACzB,CAAC;EAET,CAAE,CACG,CAAC;AAET;AAAC,IAAAI,QAAA,GAEc3B,0BAA0B;AAAA4B,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","classnames","styles","transform","_react","createElement","Root","role","ALIGNMENTS","map","align","index","isActive","Cell","key","Point","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iCAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAUA,MAAMG,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAAEH,KAAM,CAAC;EAC7C,MAAMI,KAAK,GAAG,CAAEN,IAAI,GAAGJ,SAAS,EAAGW,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,yCAAyC,EACzCX,SACD,CAAC;EAED,MAAMY,MAAM,GAAG;IACd,GAAGT,KAAK;IACRU,SAAS,EAAG,SAASL,KAAO;EAC7B,CAAC;EAED,OACC,IAAAM,MAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAAmB,IAAI;IAAA,GACCX,KAAK;IACVL,SAAS,EAAGU,OAAS;IACrBT,oBAAoB,EAAGA,oBAAsB;IAC7CgB,IAAI,EAAC,cAAc;IACnBd,KAAK,EAAGS;EAAQ,GAEdM,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IACrC,MAAMC,QAAQ,GAAGhB,UAAU,KAAKe,KAAK;IAErC,OACC,IAAAP,MAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAA0B,IAAI;MAACC,GAAG,EAAGJ;IAAO,GAClB,IAAAN,MAAA,CAAAC,aAAA,EAAClB,iCAAA,CAAA4B,KAAK;MAACH,QAAQ,EAAGA;IAAU,CAAE,CACzB,CAAC;EAET,CAAE,CACG,CAAC;AAET;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc7B,0BAA0B"}

package/build/alignment-matrix-control/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AlignmentMatrixControl = AlignmentMatrixControl;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
 var _cell = _interopRequireDefault(require("./cell"));
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
 var _icon = _interopRequireDefault(require("./icon"));
 var _utils = require("./utils");
@@ -27,12 +27,6 @@ var _utils = require("./utils");
  * Internal dependencies
  */
 
-const noop = () => {};
-function useBaseId(id) {
-  const instanceId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control');
-  return id || instanceId;
-}
-
 /**
  *
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
@@ -59,58 +53,48 @@ function AlignmentMatrixControl({
   label = (0, _i18n.__)('Alignment Matrix Control'),
   defaultValue = 'center center',
   value,
-  onChange = noop,
+  onChange,
   width = 92,
   ...props
 }) {
-  const [immutableDefaultValue] = (0, _element.useState)(value !== null && value !== void 0 ? value : defaultValue);
-  const baseId = useBaseId(id);
-  const initialCurrentId = (0, _utils.getItemId)(baseId, immutableDefaultValue);
-  const composite = (0, _composite.useCompositeState)({
-    baseId,
-    currentId: initialCurrentId,
+  const baseId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
+  const compositeStore = (0, _v.useCompositeStore)({
+    defaultActiveId: (0, _utils.getItemId)(baseId, defaultValue),
+    activeId: (0, _utils.getItemId)(baseId, value),
+    setActiveId: nextActiveId => {
+      const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
+      if (nextValue) onChange?.(nextValue);
+    },
     rtl: (0, _i18n.isRTL)()
   });
-  const handleOnChange = nextValue => {
-    onChange(nextValue);
-  };
-  const {
-    setCurrentId
-  } = composite;
-  (0, _element.useEffect)(() => {
-    if (typeof value !== 'undefined') {
-      setCurrentId((0, _utils.getItemId)(baseId, value));
-    }
-  }, [value, setCurrentId, baseId]);
+  const activeId = compositeStore.useState('activeId');
   const classes = (0, _classnames.default)('component-alignment-matrix-control', className);
-  return (0, _element.createElement)(_composite.Composite, {
-    ...props,
-    ...composite,
-    "aria-label": label,
-    as: _alignmentMatrixControlStyles.Root,
-    className: classes,
-    role: "grid",
-    size: width
-  }, _utils.GRID.map((cells, index) => (0, _element.createElement)(_composite.CompositeGroup, {
-    ...composite,
-    as: _alignmentMatrixControlStyles.Row,
-    role: "row",
+  return (0, _react.createElement)(_v.Composite, {
+    store: compositeStore,
+    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Root, {
+      ...props,
+      "aria-label": label,
+      className: classes,
+      id: baseId,
+      role: "grid",
+      size: width
+    })
+  }, _utils.GRID.map((cells, index) => (0, _react.createElement)(_v.CompositeRow, {
+    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Row, {
+      role: "row"
+    }),
     key: index
   }, cells.map(cell => {
     const cellId = (0, _utils.getItemId)(baseId, cell);
-    const isActive = composite.currentId === cellId;
-    return (0, _element.createElement)(_cell.default, {
-      ...composite,
+    const isActive = cellId === activeId;
+    return (0, _react.createElement)(_cell.default, {
       id: cellId,
       isActive: isActive,
       key: cell,
-      value: cell,
-      onFocus: () => handleOnChange(cell),
-      tabIndex: isActive ? 0 : -1
+      value: cell
     });
   }))));
 }
 AlignmentMatrixControl.Icon = _icon.default;
-var _default = AlignmentMatrixControl;
-exports.default = _default;
+var _default = exports.default = AlignmentMatrixControl;
 //# sourceMappingURL=index.js.map

package/build/alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_i18n","_compose","_cell","_composite","_alignmentMatrixControlStyles","_icon","_utils","noop","useBaseId","id","instanceId","useInstanceId","AlignmentMatrixControl","className","label","__","defaultValue","value","onChange","width","props","immutableDefaultValue","useState","baseId","initialCurrentId","getItemId","composite","useCompositeState","currentId","rtl","isRTL","handleOnChange","nextValue","setCurrentId","useEffect","classes","classnames","createElement","Composite","as","Root","role","size","GRID","map","cells","index","CompositeGroup","Row","key","cell","cellId","isActive","default","onFocus","tabIndex","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlValue,\n} from './types';\n\nconst noop = () => {};\n\nfunction useBaseId( id?: string ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tconst { setCurrentId } = composite;\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tsetCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, setCurrentId, baseId ] );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\tsize={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = composite.currentId === cellId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\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</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_compose","_cell","_v","_alignmentMatrixControlStyles","_icon","_utils","AlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","compositeStore","useCompositeStore","defaultActiveId","getItemId","activeId","setActiveId","nextActiveId","nextValue","getItemValue","rtl","isRTL","useState","classes","classnames","_react","createElement","Composite","store","render","Root","role","size","GRID","map","cells","index","CompositeRow","Row","key","cell","cellId","isActive","default","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) onChange?.( nextValue );\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\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</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,EAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;EACxCC,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BX,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMU,cAAc,GAAG,IAAAC,oBAAiB,EAAE;IACzCC,eAAe,EAAE,IAAAC,gBAAS,EAAEL,MAAM,EAAEL,YAAa,CAAC;IAClDW,QAAQ,EAAE,IAAAD,gBAAS,EAAEL,MAAM,EAAEJ,KAAM,CAAC;IACpCW,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAG,IAAAC,mBAAY,EAAEV,MAAM,EAAEQ,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAGZ,QAAQ,GAAIY,SAAU,CAAC;IACzC,CAAC;IACDE,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMN,QAAQ,GAAGJ,cAAc,CAACW,QAAQ,CAAE,UAAW,CAAC;EAEtD,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,oCAAoC,EACpCxB,SACD,CAAC;EAED,OACC,IAAAyB,MAAA,CAAAC,aAAA,EAAC/B,EAAA,CAAAgC,SAAS;IACTC,KAAK,EAAGjB,cAAgB;IACxBkB,MAAM,EACL,IAAAJ,MAAA,CAAAC,aAAA,EAAC9B,6BAAA,CAAAkC,IAAI;MAAA,GACCtB,KAAK;MACV,cAAaN,KAAO;MACpBF,SAAS,EAAGuB,OAAS;MACrBtB,EAAE,EAAGQ,MAAQ;MACbsB,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGzB;IAAO,CACd;EACD,GAEC0B,WAAI,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KACzB,IAAAX,MAAA,CAAAC,aAAA,EAAC/B,EAAA,CAAA0C,YAAY;IAACR,MAAM,EAAG,IAAAJ,MAAA,CAAAC,aAAA,EAAC9B,6BAAA,CAAA0C,GAAG;MAACP,IAAI,EAAC;IAAK,CAAE,CAAG;IAACQ,GAAG,EAAGH;EAAO,GACtDD,KAAK,CAACD,GAAG,CAAIM,IAAI,IAAM;IACxB,MAAMC,MAAM,GAAG,IAAA3B,gBAAS,EAAEL,MAAM,EAAE+B,IAAK,CAAC;IACxC,MAAME,QAAQ,GAAGD,MAAM,KAAK1B,QAAQ;IAEpC,OACC,IAAAU,MAAA,CAAAC,aAAA,EAAChC,KAAA,CAAAiD,OAAI;MACJ1C,EAAE,EAAGwC,MAAQ;MACbC,QAAQ,EAAGA,QAAU;MACrBH,GAAG,EAAGC,IAAM;MACZnC,KAAK,EAAGmC;IAAM,CACd,CAAC;EAEJ,CAAE,CACW,CACb,CACQ,CAAC;AAEd;AAEAzC,sBAAsB,CAAC6C,IAAI,GAAGC,aAA0B;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAE1C5C,sBAAsB"}

package/build/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js

@@ -26,7 +26,7 @@ const rootPointerEvents = ({
     pointerEvents: disablePointerEvents ? 'none' : undefined
   }, process.env.NODE_ENV === "production" ? "" : ";label:rootPointerEvents;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdHJvb3RCYXNlLFxuXHRwb2ludEJhc2UsXG5cdENlbGwgYXMgQ2VsbEJhc2UsXG59IGZyb20gJy4vYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHMsXG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsXG59IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3Qgcm9vdFNpemUgPSAoKSA9PiB7XG5cdGNvbnN0IHBhZGRpbmcgPSAxLjU7XG5cdGNvbnN0IHNpemUgPSAyNDtcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Z3JpZFRlbXBsYXRlUm93czogYHJlcGVhdCggMywgY2FsYyggJHsgc2l6ZSAtIHBhZGRpbmcgKiAyIH1weCAvIDMpKWAsXG5cdFx0cGFkZGluZyxcblx0XHRtYXhIZWlnaHQ6IHNpemUsXG5cdFx0bWF4V2lkdGg6IHNpemUsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHJvb3RQb2ludGVyRXZlbnRzID0gKCB7XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzLFxufTogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcywgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyA+ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0cG9pbnRlckV2ZW50czogZGlzYWJsZVBvaW50ZXJFdmVudHMgPyAnbm9uZScgOiB1bmRlZmluZWQsXG5cdH0gKTtcbn07XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cGFkZGluZzogMnB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHR0cmFuc2Zvcm0tb3JpZ2luOiB0b3AgbGVmdDtcblx0aGVpZ2h0OiAxMDAlO1xuXHR3aWR0aDogMTAwJTtcblxuXHQkeyByb290QmFzZSB9O1xuXHQkeyByb290U2l6ZSB9O1xuXHQkeyByb290UG9pbnRlckV2ZW50cyB9O1xuYDtcblxuY29uc3QgcG9pbnRBY3RpdmUgPSAoIHtcblx0aXNBY3RpdmUsXG59OiBQaWNrPCBBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLCAnaXNBY3RpdmUnID4gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDFweCBjdXJyZW50Q29sb3JgIDogbnVsbDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiBjdXJyZW50Q29sb3I7XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDJweDtcblx0d2lkdGg6IDJweDtcblx0JHsgcG9pbnRCYXNlIH07XG5cdCR7IHBvaW50QWN0aXZlIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VsbCA9IENlbGxCYXNlO1xuIl19 */");
 };
-const Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const Wrapper = exports.Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "erowt52"
 } : {
   target: "erowt52",
@@ -40,27 +40,23 @@ const Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production"
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNpQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLWljb24tc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRyb290QmFzZSxcblx0cG9pbnRCYXNlLFxuXHRDZWxsIGFzIENlbGxCYXNlLFxufSBmcm9tICcuL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMnO1xuaW1wb3J0IHR5cGUge1xuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLFxufSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IHJvb3RTaXplID0gKCkgPT4ge1xuXHRjb25zdCBwYWRkaW5nID0gMS41O1xuXHRjb25zdCBzaXplID0gMjQ7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgLSBwYWRkaW5nICogMiB9cHggLyAzKSlgLFxuXHRcdHBhZGRpbmcsXG5cdFx0bWF4SGVpZ2h0OiBzaXplLFxuXHRcdG1heFdpZHRoOiBzaXplLFxuXHR9ICk7XG59O1xuXG5jb25zdCByb290UG9pbnRlckV2ZW50cyA9ICgge1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cyxcbn06IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHMsICdkaXNhYmxlUG9pbnRlckV2ZW50cycgPiApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdHBvaW50ZXJFdmVudHM6IGRpc2FibGVQb2ludGVyRXZlbnRzID8gJ25vbmUnIDogdW5kZWZpbmVkLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBhZGRpbmc6IDJweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdmBcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cblx0JHsgcm9vdEJhc2UgfTtcblx0JHsgcm9vdFNpemUgfTtcblx0JHsgcm9vdFBvaW50ZXJFdmVudHMgfTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7XG5cdGlzQWN0aXZlLFxufTogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcywgJ2lzQWN0aXZlJyA+ICkgPT4ge1xuXHRjb25zdCBib3hTaGFkb3cgPSBpc0FjdGl2ZSA/IGAwIDAgMCAxcHggY3VycmVudENvbG9yYCA6IG51bGw7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3gtc2hhZG93OiAkeyBib3hTaGFkb3cgfTtcblx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXG5cdFx0Kjpob3ZlciA+ICYge1xuXHRcdFx0Y29sb3I6IGN1cnJlbnRDb2xvcjtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0aGVpZ2h0OiAycHg7XG5cdHdpZHRoOiAycHg7XG5cdCR7IHBvaW50QmFzZSB9O1xuXHQkeyBwb2ludEFjdGl2ZSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBDZWxsQmFzZTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.Wrapper = Wrapper;
-const Root = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const Root = exports.Root = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "erowt51"
 } : {
   target: "erowt51",
   label: "Root"
 })("transform-origin:top left;height:100%;width:100%;", _alignmentMatrixControlStyles.rootBase, ";", rootSize, ";", rootPointerEvents, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEM4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLWljb24tc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRyb290QmFzZSxcblx0cG9pbnRCYXNlLFxuXHRDZWxsIGFzIENlbGxCYXNlLFxufSBmcm9tICcuL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMnO1xuaW1wb3J0IHR5cGUge1xuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLFxufSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IHJvb3RTaXplID0gKCkgPT4ge1xuXHRjb25zdCBwYWRkaW5nID0gMS41O1xuXHRjb25zdCBzaXplID0gMjQ7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgLSBwYWRkaW5nICogMiB9cHggLyAzKSlgLFxuXHRcdHBhZGRpbmcsXG5cdFx0bWF4SGVpZ2h0OiBzaXplLFxuXHRcdG1heFdpZHRoOiBzaXplLFxuXHR9ICk7XG59O1xuXG5jb25zdCByb290UG9pbnRlckV2ZW50cyA9ICgge1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cyxcbn06IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHMsICdkaXNhYmxlUG9pbnRlckV2ZW50cycgPiApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdHBvaW50ZXJFdmVudHM6IGRpc2FibGVQb2ludGVyRXZlbnRzID8gJ25vbmUnIDogdW5kZWZpbmVkLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBhZGRpbmc6IDJweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdmBcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cblx0JHsgcm9vdEJhc2UgfTtcblx0JHsgcm9vdFNpemUgfTtcblx0JHsgcm9vdFBvaW50ZXJFdmVudHMgfTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7XG5cdGlzQWN0aXZlLFxufTogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcywgJ2lzQWN0aXZlJyA+ICkgPT4ge1xuXHRjb25zdCBib3hTaGFkb3cgPSBpc0FjdGl2ZSA/IGAwIDAgMCAxcHggY3VycmVudENvbG9yYCA6IG51bGw7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3gtc2hhZG93OiAkeyBib3hTaGFkb3cgfTtcblx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXG5cdFx0Kjpob3ZlciA+ICYge1xuXHRcdFx0Y29sb3I6IGN1cnJlbnRDb2xvcjtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0aGVpZ2h0OiAycHg7XG5cdHdpZHRoOiAycHg7XG5cdCR7IHBvaW50QmFzZSB9O1xuXHQkeyBwb2ludEFjdGl2ZSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBDZWxsQmFzZTtcbiJdfQ== */"));
-exports.Root = Root;
 const pointActive = ({
   isActive
 }) => {
   const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
   return /*#__PURE__*/(0, _react.css)("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + (process.env.NODE_ENV === "production" ? "" : ";label:pointActive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkRXIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdHJvb3RCYXNlLFxuXHRwb2ludEJhc2UsXG5cdENlbGwgYXMgQ2VsbEJhc2UsXG59IGZyb20gJy4vYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHMsXG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsXG59IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3Qgcm9vdFNpemUgPSAoKSA9PiB7XG5cdGNvbnN0IHBhZGRpbmcgPSAxLjU7XG5cdGNvbnN0IHNpemUgPSAyNDtcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Z3JpZFRlbXBsYXRlUm93czogYHJlcGVhdCggMywgY2FsYyggJHsgc2l6ZSAtIHBhZGRpbmcgKiAyIH1weCAvIDMpKWAsXG5cdFx0cGFkZGluZyxcblx0XHRtYXhIZWlnaHQ6IHNpemUsXG5cdFx0bWF4V2lkdGg6IHNpemUsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHJvb3RQb2ludGVyRXZlbnRzID0gKCB7XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzLFxufTogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcywgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyA+ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0cG9pbnRlckV2ZW50czogZGlzYWJsZVBvaW50ZXJFdmVudHMgPyAnbm9uZScgOiB1bmRlZmluZWQsXG5cdH0gKTtcbn07XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cGFkZGluZzogMnB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHR0cmFuc2Zvcm0tb3JpZ2luOiB0b3AgbGVmdDtcblx0aGVpZ2h0OiAxMDAlO1xuXHR3aWR0aDogMTAwJTtcblxuXHQkeyByb290QmFzZSB9O1xuXHQkeyByb290U2l6ZSB9O1xuXHQkeyByb290UG9pbnRlckV2ZW50cyB9O1xuYDtcblxuY29uc3QgcG9pbnRBY3RpdmUgPSAoIHtcblx0aXNBY3RpdmUsXG59OiBQaWNrPCBBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLCAnaXNBY3RpdmUnID4gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDFweCBjdXJyZW50Q29sb3JgIDogbnVsbDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiBjdXJyZW50Q29sb3I7XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDJweDtcblx0d2lkdGg6IDJweDtcblx0JHsgcG9pbnRCYXNlIH07XG5cdCR7IHBvaW50QWN0aXZlIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VsbCA9IENlbGxCYXNlO1xuIl19 */");
 };
-const Point = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+const Point = exports.Point = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
   target: "erowt50"
 } : {
   target: "erowt50",
   label: "Point"
 })("height:2px;width:2px;", _alignmentMatrixControlStyles.pointBase, ";", pointActive, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUVnQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLWljb24tc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRyb290QmFzZSxcblx0cG9pbnRCYXNlLFxuXHRDZWxsIGFzIENlbGxCYXNlLFxufSBmcm9tICcuL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMnO1xuaW1wb3J0IHR5cGUge1xuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLFxufSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IHJvb3RTaXplID0gKCkgPT4ge1xuXHRjb25zdCBwYWRkaW5nID0gMS41O1xuXHRjb25zdCBzaXplID0gMjQ7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgLSBwYWRkaW5nICogMiB9cHggLyAzKSlgLFxuXHRcdHBhZGRpbmcsXG5cdFx0bWF4SGVpZ2h0OiBzaXplLFxuXHRcdG1heFdpZHRoOiBzaXplLFxuXHR9ICk7XG59O1xuXG5jb25zdCByb290UG9pbnRlckV2ZW50cyA9ICgge1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cyxcbn06IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHMsICdkaXNhYmxlUG9pbnRlckV2ZW50cycgPiApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdHBvaW50ZXJFdmVudHM6IGRpc2FibGVQb2ludGVyRXZlbnRzID8gJ25vbmUnIDogdW5kZWZpbmVkLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBhZGRpbmc6IDJweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdmBcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cblx0JHsgcm9vdEJhc2UgfTtcblx0JHsgcm9vdFNpemUgfTtcblx0JHsgcm9vdFBvaW50ZXJFdmVudHMgfTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7XG5cdGlzQWN0aXZlLFxufTogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcywgJ2lzQWN0aXZlJyA+ICkgPT4ge1xuXHRjb25zdCBib3hTaGFkb3cgPSBpc0FjdGl2ZSA/IGAwIDAgMCAxcHggY3VycmVudENvbG9yYCA6IG51bGw7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3gtc2hhZG93OiAkeyBib3hTaGFkb3cgfTtcblx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXG5cdFx0Kjpob3ZlciA+ICYge1xuXHRcdFx0Y29sb3I6IGN1cnJlbnRDb2xvcjtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0aGVpZ2h0OiAycHg7XG5cdHdpZHRoOiAycHg7XG5cdCR7IHBvaW50QmFzZSB9O1xuXHQkeyBwb2ludEFjdGl2ZSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBDZWxsQmFzZTtcbiJdfQ== */"));
-exports.Point = Point;
-const Cell = _alignmentMatrixControlStyles.Cell;
-exports.Cell = Cell;
+const Cell = exports.Cell = _alignmentMatrixControlStyles.Cell;
 //# sourceMappingURL=alignment-matrix-control-icon-styles.js.map

package/build/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_alignmentMatrixControlStyles","_EMOTION_STRINGIFIED_CSS_ERROR__","rootSize","padding","size","css","gridTemplateRows","maxHeight","maxWidth","process","env","NODE_ENV","rootPointerEvents","disablePointerEvents","pointerEvents","undefined","Wrapper","_base","default","target","label","name","styles","map","toString","exports","Root","rootBase","pointActive","isActive","boxShadow","Point","pointBase","Cell","CellBase"],"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\trootBase,\n\tpointBase,\n\tCell as CellBase,\n} from './alignment-matrix-control-styles';\nimport type {\n\tAlignmentMatrixControlIconProps,\n\tAlignmentMatrixControlCellProps,\n} from '../types';\n\nconst rootSize = () => {\n\tconst padding = 1.5;\n\tconst size = 24;\n\n\treturn css( {\n\t\tgridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`,\n\t\tpadding,\n\t\tmaxHeight: size,\n\t\tmaxWidth: size,\n\t} );\n};\n\nconst rootPointerEvents = ( {\n\tdisablePointerEvents,\n}: Pick< AlignmentMatrixControlIconProps, 'disablePointerEvents' > ) => {\n\treturn css( {\n\t\tpointerEvents: disablePointerEvents ? 'none' : undefined,\n\t} );\n};\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tpadding: 2px;\n`;\n\nexport const Root = styled.div`\n\ttransform-origin: top left;\n\theight: 100%;\n\twidth: 100%;\n\n\t${ rootBase };\n\t${ rootSize };\n\t${ rootPointerEvents };\n`;\n\nconst pointActive = ( {\n\tisActive,\n}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {\n\tconst boxShadow = isActive ? `0 0 0 1px currentColor` : null;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: currentColor;\n\n\t\t*:hover > & {\n\t\t\tcolor: currentColor;\n\t\t}\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 2px;\n\twidth: 2px;\n\t${ pointBase };\n\t${ pointActive };\n`;\n\nexport const Cell = CellBase;\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,6BAAA,GAAAD,OAAA;AAI2C,SAAAE,iCAAA;AAM3C,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAMC,OAAO,GAAG,GAAG;EACnB,MAAMC,IAAI,GAAG,EAAE;EAEf,oBAAO,IAAAC,UAAG,EAAE;IACXC,gBAAgB,EAAG,oBAAoBF,IAAI,GAAGD,OAAO,GAAG,CAAG,UAAS;IACpEA,OAAO;IACPI,SAAS,EAAEH,IAAI;IACfI,QAAQ,EAAEJ;EACX,CAAC,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA,6CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,k9EAAC,CAAC;AACJ,CAAC;AAED,MAAMC,iBAAiB,GAAGA,CAAE;EAC3BC;AACgE,CAAC,KAAM;EACvE,oBAAO,IAAAR,UAAG,EAAE;IACXS,aAAa,EAAED,oBAAoB,GAAG,MAAM,GAAGE;EAChD,CAAC,EAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA,sDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,k9EAAC,CAAC;AACJ,CAAC;AAEM,MAAMK,OAAO,OAAAC,KAAA,CAAAC,OAAA,SAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAQ,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAvB;AAAA,EAGnB;AAACwB,OAAA,CAAAT,OAAA,GAAAA,OAAA;AAEK,MAAMU,IAAI,OAAAT,KAAA,CAAAC,OAAA,SAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAQ,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,wDAKbO,sCAAQ,OACRzB,QAAQ,OACRU,iBAAiB,SAAAH,OAAA,CAAAC,GAAA,CAAAC,QAAA,w9EACpB;AAACc,OAAA,CAAAC,IAAA,GAAAA,IAAA;AAEF,MAAME,WAAW,GAAGA,CAAE;EACrBC;AACoD,CAAC,KAAM;EAC3D,MAAMC,SAAS,GAAGD,QAAQ,GAAI,wBAAuB,GAAG,IAAI;EAE5D,wBAAOxB,UAAG,iBACMyB,SAAS,0DAAArB,OAAA,CAAAC,GAAA,CAAAC,QAAA,iDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAO1B,CAAC;AAEM,MAAMoB,KAAK,OAAAd,KAAA,CAAAC,OAAA,UAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAQ,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,4BAGdY,uCAAS,OACTJ,WAAW,SAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA,w9EACd;AAACc,OAAA,CAAAM,KAAA,GAAAA,KAAA;AAEK,MAAME,IAAI,GAAGC,kCAAQ;AAACT,OAAA,CAAAQ,IAAA,GAAAA,IAAA"}
+{"version":3,"names":["_react","require","_alignmentMatrixControlStyles","_EMOTION_STRINGIFIED_CSS_ERROR__","rootSize","padding","size","css","gridTemplateRows","maxHeight","maxWidth","process","env","NODE_ENV","rootPointerEvents","disablePointerEvents","pointerEvents","undefined","Wrapper","exports","_base","default","target","label","name","styles","map","toString","Root","rootBase","pointActive","isActive","boxShadow","Point","pointBase","Cell","CellBase"],"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\trootBase,\n\tpointBase,\n\tCell as CellBase,\n} from './alignment-matrix-control-styles';\nimport type {\n\tAlignmentMatrixControlIconProps,\n\tAlignmentMatrixControlCellProps,\n} from '../types';\n\nconst rootSize = () => {\n\tconst padding = 1.5;\n\tconst size = 24;\n\n\treturn css( {\n\t\tgridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`,\n\t\tpadding,\n\t\tmaxHeight: size,\n\t\tmaxWidth: size,\n\t} );\n};\n\nconst rootPointerEvents = ( {\n\tdisablePointerEvents,\n}: Pick< AlignmentMatrixControlIconProps, 'disablePointerEvents' > ) => {\n\treturn css( {\n\t\tpointerEvents: disablePointerEvents ? 'none' : undefined,\n\t} );\n};\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tpadding: 2px;\n`;\n\nexport const Root = styled.div`\n\ttransform-origin: top left;\n\theight: 100%;\n\twidth: 100%;\n\n\t${ rootBase };\n\t${ rootSize };\n\t${ rootPointerEvents };\n`;\n\nconst pointActive = ( {\n\tisActive,\n}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {\n\tconst boxShadow = isActive ? `0 0 0 1px currentColor` : null;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: currentColor;\n\n\t\t*:hover > & {\n\t\t\tcolor: currentColor;\n\t\t}\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 2px;\n\twidth: 2px;\n\t${ pointBase };\n\t${ pointActive };\n`;\n\nexport const Cell = CellBase;\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,6BAAA,GAAAD,OAAA;AAI2C,SAAAE,iCAAA;AAM3C,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAMC,OAAO,GAAG,GAAG;EACnB,MAAMC,IAAI,GAAG,EAAE;EAEf,oBAAO,IAAAC,UAAG,EAAE;IACXC,gBAAgB,EAAG,oBAAoBF,IAAI,GAAGD,OAAO,GAAG,CAAG,UAAS;IACpEA,OAAO;IACPI,SAAS,EAAEH,IAAI;IACfI,QAAQ,EAAEJ;EACX,CAAC,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA,6CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,k9EAAC,CAAC;AACJ,CAAC;AAED,MAAMC,iBAAiB,GAAGA,CAAE;EAC3BC;AACgE,CAAC,KAAM;EACvE,oBAAO,IAAAR,UAAG,EAAE;IACXS,aAAa,EAAED,oBAAoB,GAAG,MAAM,GAAGE;EAChD,CAAC,EAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA,sDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,k9EAAC,CAAC;AACJ,CAAC;AAEM,MAAMK,OAAO,GAAAC,OAAA,CAAAD,OAAA,OAAAE,KAAA,CAAAC,OAAA,SAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAW,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAxB;AAAA,EAGnB;AAEM,MAAMyB,IAAI,GAAAT,OAAA,CAAAS,IAAA,OAAAR,KAAA,CAAAC,OAAA,SAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,wDAKbM,sCAAQ,OACRzB,QAAQ,OACRU,iBAAiB,SAAAH,OAAA,CAAAC,GAAA,CAAAC,QAAA,w9EACpB;AAED,MAAMiB,WAAW,GAAGA,CAAE;EACrBC;AACoD,CAAC,KAAM;EAC3D,MAAMC,SAAS,GAAGD,QAAQ,GAAI,wBAAuB,GAAG,IAAI;EAE5D,wBAAOxB,UAAG,iBACMyB,SAAS,0DAAArB,OAAA,CAAAC,GAAA,CAAAC,QAAA,iDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAO1B,CAAC;AAEM,MAAMoB,KAAK,GAAAd,OAAA,CAAAc,KAAA,OAAAb,KAAA,CAAAC,OAAA,UAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,4BAGdW,uCAAS,OACTJ,WAAW,SAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA,w9EACd;AAEM,MAAMsB,IAAI,GAAAhB,OAAA,CAAAgB,IAAA,GAAGC,kCAAQ"}

package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -27,14 +27,13 @@ const rootSize = ({
 }) => {
   return /*#__PURE__*/(0, _react.css)("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:rootSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcyxcbn0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3Qgcm9vdEJhc2UgPSAoKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0ZGlyZWN0aW9uOiBsdHI7XG5cdFx0ZGlzcGxheTogZ3JpZDtcblx0XHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0YDtcbn07XG5cbmNvbnN0IHJvb3RTaXplID0gKCB7IHNpemUgPSA5MiB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCBjYWxjKCAkeyBzaXplIH1weCAvIDMgKSApO1xuXHRcdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdjwge1xuXHRzaXplOiBBbGlnbm1lbnRNYXRyaXhDb250cm9sUHJvcHNbICd3aWR0aCcgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfTtcblxuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG87XG5cblx0JHsgcm9vdFNpemUgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb3cgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5gO1xuXG5jb25zdCBwb2ludEFjdGl2ZSA9ICgge1xuXHRpc0FjdGl2ZSxcbn06IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsICdpc0FjdGl2ZScgPiApID0+IHtcblx0Y29uc3QgYm94U2hhZG93ID0gaXNBY3RpdmUgPyBgMCAwIDAgMnB4ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9YCA6IG51bGw7XG5cdGNvbnN0IHBvaW50Q29sb3IgPSBpc0FjdGl2ZSA/IENPTE9SUy5ncmF5WyA5MDAgXSA6IENPTE9SUy5ncmF5WyA0MDAgXTtcblx0Y29uc3QgcG9pbnRDb2xvckhvdmVyID0gaXNBY3RpdmUgPyBDT0xPUlMuZ3JheVsgOTAwIF0gOiBDT0xPUlMudGhlbWUuYWNjZW50O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Ym94LXNoYWRvdzogJHsgYm94U2hhZG93IH07XG5cdFx0Y29sb3I6ICR7IHBvaW50Q29sb3IgfTtcblxuXHRcdCo6aG92ZXIgPiAmIHtcblx0XHRcdGNvbG9yOiAkeyBwb2ludENvbG9ySG92ZXIgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgcG9pbnRCYXNlID0gKFxuXHRwcm9wczogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcywgJ2lzQWN0aXZlJyA+XG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRiYWNrZ3JvdW5kOiBjdXJyZW50Q29sb3I7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRkaXNwbGF5OiBncmlkO1xuXHRcdG1hcmdpbjogYXV0bztcblx0XHR0cmFuc2l0aW9uOiBhbGwgMTIwbXMgbGluZWFyO1xuXG5cdFx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdFx0JHsgcG9pbnRBY3RpdmUoIHByb3BzICkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IFBvaW50ID0gc3R5bGVkLnNwYW5gXG5cdGhlaWdodDogNnB4O1xuXHR3aWR0aDogNnB4O1xuXHQkeyBwb2ludEJhc2UgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0b3V0bGluZTogbm9uZTtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdHBhZGRpbmc6IDA7XG5gO1xuIl19 */");
 };
-const Root = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const Root = exports.Root = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "ecapk1j3"
 } : {
   target: "ecapk1j3",
   label: "Root"
 })(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DRyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcyxcbn0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3Qgcm9vdEJhc2UgPSAoKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0ZGlyZWN0aW9uOiBsdHI7XG5cdFx0ZGlzcGxheTogZ3JpZDtcblx0XHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0YDtcbn07XG5cbmNvbnN0IHJvb3RTaXplID0gKCB7IHNpemUgPSA5MiB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCBjYWxjKCAkeyBzaXplIH1weCAvIDMgKSApO1xuXHRcdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdjwge1xuXHRzaXplOiBBbGlnbm1lbnRNYXRyaXhDb250cm9sUHJvcHNbICd3aWR0aCcgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfTtcblxuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG87XG5cblx0JHsgcm9vdFNpemUgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb3cgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5gO1xuXG5jb25zdCBwb2ludEFjdGl2ZSA9ICgge1xuXHRpc0FjdGl2ZSxcbn06IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsICdpc0FjdGl2ZScgPiApID0+IHtcblx0Y29uc3QgYm94U2hhZG93ID0gaXNBY3RpdmUgPyBgMCAwIDAgMnB4ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9YCA6IG51bGw7XG5cdGNvbnN0IHBvaW50Q29sb3IgPSBpc0FjdGl2ZSA/IENPTE9SUy5ncmF5WyA5MDAgXSA6IENPTE9SUy5ncmF5WyA0MDAgXTtcblx0Y29uc3QgcG9pbnRDb2xvckhvdmVyID0gaXNBY3RpdmUgPyBDT0xPUlMuZ3JheVsgOTAwIF0gOiBDT0xPUlMudGhlbWUuYWNjZW50O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Ym94LXNoYWRvdzogJHsgYm94U2hhZG93IH07XG5cdFx0Y29sb3I6ICR7IHBvaW50Q29sb3IgfTtcblxuXHRcdCo6aG92ZXIgPiAmIHtcblx0XHRcdGNvbG9yOiAkeyBwb2ludENvbG9ySG92ZXIgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgcG9pbnRCYXNlID0gKFxuXHRwcm9wczogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcywgJ2lzQWN0aXZlJyA+XG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRiYWNrZ3JvdW5kOiBjdXJyZW50Q29sb3I7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRkaXNwbGF5OiBncmlkO1xuXHRcdG1hcmdpbjogYXV0bztcblx0XHR0cmFuc2l0aW9uOiBhbGwgMTIwbXMgbGluZWFyO1xuXG5cdFx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdFx0JHsgcG9pbnRBY3RpdmUoIHByb3BzICkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IFBvaW50ID0gc3R5bGVkLnNwYW5gXG5cdGhlaWdodDogNnB4O1xuXHR3aWR0aDogNnB4O1xuXHQkeyBwb2ludEJhc2UgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0b3V0bGluZTogbm9uZTtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdHBhZGRpbmc6IDA7XG5gO1xuIl19 */"));
-exports.Root = Root;
-const Row = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const Row = exports.Row = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "ecapk1j2"
 } : {
   target: "ecapk1j2",
@@ -48,7 +47,6 @@ const Row = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDNkIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUge1xuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sUHJvcHMsXG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IHJvb3RCYXNlID0gKCkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGRpcmVjdGlvbjogbHRyO1xuXHRcdGRpc3BsYXk6IGdyaWQ7XG5cdFx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdGA7XG59O1xuXG5jb25zdCByb290U2l6ZSA9ICggeyBzaXplID0gOTIgfSApID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRncmlkLXRlbXBsYXRlLXJvd3M6IHJlcGVhdCggMywgY2FsYyggJHsgc2l6ZSB9cHggLyAzICkgKTtcblx0XHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZTogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG59ID5gXG5cdCR7IHJvb3RCYXNlIH07XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuXG5cdCR7IHJvb3RTaXplIH07XG5gO1xuXG5leHBvcnQgY29uc3QgUm93ID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuY29uc3QgcG9pbnRBY3RpdmUgPSAoIHtcblx0aXNBY3RpdmUsXG59OiBQaWNrPCBBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLCAnaXNBY3RpdmUnID4gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDJweCAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfWAgOiBudWxsO1xuXHRjb25zdCBwb2ludENvbG9yID0gaXNBY3RpdmUgPyBDT0xPUlMuZ3JheVsgOTAwIF0gOiBDT0xPUlMuZ3JheVsgNDAwIF07XG5cdGNvbnN0IHBvaW50Q29sb3JIb3ZlciA9IGlzQWN0aXZlID8gQ09MT1JTLmdyYXlbIDkwMCBdIDogQ09MT1JTLnRoZW1lLmFjY2VudDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiAkeyBwb2ludENvbG9yIH07XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogJHsgcG9pbnRDb2xvckhvdmVyIH07XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IHBvaW50QmFzZSA9IChcblx0cHJvcHM6IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsICdpc0FjdGl2ZScgPlxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0YmFja2dyb3VuZDogY3VycmVudENvbG9yO1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0ZGlzcGxheTogZ3JpZDtcblx0XHRtYXJnaW46IGF1dG87XG5cdFx0dHJhbnNpdGlvbjogYWxsIDEyMG1zIGxpbmVhcjtcblxuXHRcdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHRcdCR7IHBvaW50QWN0aXZlKCBwcm9wcyApIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDZweDtcblx0d2lkdGg6IDZweDtcblx0JHsgcG9pbnRCYXNlIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJvcmRlcjogbm9uZTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWFyZ2luOiAwO1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdG91dGxpbmU6IG5vbmU7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRwYWRkaW5nOiAwO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.Row = Row;
 const pointActive = ({
   isActive
 }) => {
@@ -61,14 +59,13 @@ const pointBase = props => {
   return /*#__PURE__*/(0, _react.css)("background:currentColor;box-sizing:border-box;display:grid;margin:auto;transition:all 120ms linear;", (0, _utils.reduceMotion)('transition'), " ", pointActive(props), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:pointBase;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVFVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcyxcbn0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3Qgcm9vdEJhc2UgPSAoKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0ZGlyZWN0aW9uOiBsdHI7XG5cdFx0ZGlzcGxheTogZ3JpZDtcblx0XHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0YDtcbn07XG5cbmNvbnN0IHJvb3RTaXplID0gKCB7IHNpemUgPSA5MiB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCBjYWxjKCAkeyBzaXplIH1weCAvIDMgKSApO1xuXHRcdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdjwge1xuXHRzaXplOiBBbGlnbm1lbnRNYXRyaXhDb250cm9sUHJvcHNbICd3aWR0aCcgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfTtcblxuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG87XG5cblx0JHsgcm9vdFNpemUgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb3cgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5gO1xuXG5jb25zdCBwb2ludEFjdGl2ZSA9ICgge1xuXHRpc0FjdGl2ZSxcbn06IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsICdpc0FjdGl2ZScgPiApID0+IHtcblx0Y29uc3QgYm94U2hhZG93ID0gaXNBY3RpdmUgPyBgMCAwIDAgMnB4ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9YCA6IG51bGw7XG5cdGNvbnN0IHBvaW50Q29sb3IgPSBpc0FjdGl2ZSA/IENPTE9SUy5ncmF5WyA5MDAgXSA6IENPTE9SUy5ncmF5WyA0MDAgXTtcblx0Y29uc3QgcG9pbnRDb2xvckhvdmVyID0gaXNBY3RpdmUgPyBDT0xPUlMuZ3JheVsgOTAwIF0gOiBDT0xPUlMudGhlbWUuYWNjZW50O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Ym94LXNoYWRvdzogJHsgYm94U2hhZG93IH07XG5cdFx0Y29sb3I6ICR7IHBvaW50Q29sb3IgfTtcblxuXHRcdCo6aG92ZXIgPiAmIHtcblx0XHRcdGNvbG9yOiAkeyBwb2ludENvbG9ySG92ZXIgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgcG9pbnRCYXNlID0gKFxuXHRwcm9wczogUGljazwgQWxpZ25tZW50TWF0cml4Q29udHJvbENlbGxQcm9wcywgJ2lzQWN0aXZlJyA+XG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRiYWNrZ3JvdW5kOiBjdXJyZW50Q29sb3I7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRkaXNwbGF5OiBncmlkO1xuXHRcdG1hcmdpbjogYXV0bztcblx0XHR0cmFuc2l0aW9uOiBhbGwgMTIwbXMgbGluZWFyO1xuXG5cdFx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdFx0JHsgcG9pbnRBY3RpdmUoIHByb3BzICkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IFBvaW50ID0gc3R5bGVkLnNwYW5gXG5cdGhlaWdodDogNnB4O1xuXHR3aWR0aDogNnB4O1xuXHQkeyBwb2ludEJhc2UgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0b3V0bGluZTogbm9uZTtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdHBhZGRpbmc6IDA7XG5gO1xuIl19 */");
 };
 exports.pointBase = pointBase;
-const Point = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+const Point = exports.Point = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
   target: "ecapk1j1"
 } : {
   target: "ecapk1j1",
   label: "Point"
 })("height:6px;width:6px;", pointBase, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1GZ0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUge1xuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sUHJvcHMsXG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IHJvb3RCYXNlID0gKCkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGRpcmVjdGlvbjogbHRyO1xuXHRcdGRpc3BsYXk6IGdyaWQ7XG5cdFx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdGA7XG59O1xuXG5jb25zdCByb290U2l6ZSA9ICggeyBzaXplID0gOTIgfSApID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRncmlkLXRlbXBsYXRlLXJvd3M6IHJlcGVhdCggMywgY2FsYyggJHsgc2l6ZSB9cHggLyAzICkgKTtcblx0XHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZTogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG59ID5gXG5cdCR7IHJvb3RCYXNlIH07XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuXG5cdCR7IHJvb3RTaXplIH07XG5gO1xuXG5leHBvcnQgY29uc3QgUm93ID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuY29uc3QgcG9pbnRBY3RpdmUgPSAoIHtcblx0aXNBY3RpdmUsXG59OiBQaWNrPCBBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLCAnaXNBY3RpdmUnID4gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDJweCAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfWAgOiBudWxsO1xuXHRjb25zdCBwb2ludENvbG9yID0gaXNBY3RpdmUgPyBDT0xPUlMuZ3JheVsgOTAwIF0gOiBDT0xPUlMuZ3JheVsgNDAwIF07XG5cdGNvbnN0IHBvaW50Q29sb3JIb3ZlciA9IGlzQWN0aXZlID8gQ09MT1JTLmdyYXlbIDkwMCBdIDogQ09MT1JTLnRoZW1lLmFjY2VudDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiAkeyBwb2ludENvbG9yIH07XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogJHsgcG9pbnRDb2xvckhvdmVyIH07XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IHBvaW50QmFzZSA9IChcblx0cHJvcHM6IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsICdpc0FjdGl2ZScgPlxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0YmFja2dyb3VuZDogY3VycmVudENvbG9yO1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0ZGlzcGxheTogZ3JpZDtcblx0XHRtYXJnaW46IGF1dG87XG5cdFx0dHJhbnNpdGlvbjogYWxsIDEyMG1zIGxpbmVhcjtcblxuXHRcdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHRcdCR7IHBvaW50QWN0aXZlKCBwcm9wcyApIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDZweDtcblx0d2lkdGg6IDZweDtcblx0JHsgcG9pbnRCYXNlIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJvcmRlcjogbm9uZTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWFyZ2luOiAwO1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdG91dGxpbmU6IG5vbmU7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRwYWRkaW5nOiAwO1xuYDtcbiJdfQ== */"));
-exports.Point = Point;
-const Cell = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+const Cell = exports.Cell = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
   target: "ecapk1j0"
 } : {
   target: "ecapk1j0",
@@ -82,5 +79,4 @@ const Cell = (0, _base.default)("span", process.env.NODE_ENV === "production" ?
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlGK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUge1xuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sUHJvcHMsXG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IHJvb3RCYXNlID0gKCkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGRpcmVjdGlvbjogbHRyO1xuXHRcdGRpc3BsYXk6IGdyaWQ7XG5cdFx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdGA7XG59O1xuXG5jb25zdCByb290U2l6ZSA9ICggeyBzaXplID0gOTIgfSApID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRncmlkLXRlbXBsYXRlLXJvd3M6IHJlcGVhdCggMywgY2FsYyggJHsgc2l6ZSB9cHggLyAzICkgKTtcblx0XHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZTogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG59ID5gXG5cdCR7IHJvb3RCYXNlIH07XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuXG5cdCR7IHJvb3RTaXplIH07XG5gO1xuXG5leHBvcnQgY29uc3QgUm93ID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuY29uc3QgcG9pbnRBY3RpdmUgPSAoIHtcblx0aXNBY3RpdmUsXG59OiBQaWNrPCBBbGlnbm1lbnRNYXRyaXhDb250cm9sQ2VsbFByb3BzLCAnaXNBY3RpdmUnID4gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDJweCAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfWAgOiBudWxsO1xuXHRjb25zdCBwb2ludENvbG9yID0gaXNBY3RpdmUgPyBDT0xPUlMuZ3JheVsgOTAwIF0gOiBDT0xPUlMuZ3JheVsgNDAwIF07XG5cdGNvbnN0IHBvaW50Q29sb3JIb3ZlciA9IGlzQWN0aXZlID8gQ09MT1JTLmdyYXlbIDkwMCBdIDogQ09MT1JTLnRoZW1lLmFjY2VudDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiAkeyBwb2ludENvbG9yIH07XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogJHsgcG9pbnRDb2xvckhvdmVyIH07XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IHBvaW50QmFzZSA9IChcblx0cHJvcHM6IFBpY2s8IEFsaWdubWVudE1hdHJpeENvbnRyb2xDZWxsUHJvcHMsICdpc0FjdGl2ZScgPlxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0YmFja2dyb3VuZDogY3VycmVudENvbG9yO1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0ZGlzcGxheTogZ3JpZDtcblx0XHRtYXJnaW46IGF1dG87XG5cdFx0dHJhbnNpdGlvbjogYWxsIDEyMG1zIGxpbmVhcjtcblxuXHRcdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHRcdCR7IHBvaW50QWN0aXZlKCBwcm9wcyApIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDZweDtcblx0d2lkdGg6IDZweDtcblx0JHsgcG9pbnRCYXNlIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJvcmRlcjogbm9uZTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWFyZ2luOiAwO1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdG91dGxpbmU6IG5vbmU7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRwYWRkaW5nOiAwO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.Cell = Cell;
 //# sourceMappingURL=alignment-matrix-control-styles.js.map

package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","_ref","process","env","NODE_ENV","name","styles","map","toString","rootBase","exports","rootSize","size","css","Root","_base","default","target","label","Row","pointActive","isActive","boxShadow","COLORS","gray","pointColor","pointColorHover","theme","accent","pointBase","props","reduceMotion","Point","Cell"],"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, reduceMotion } from '../../utils';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlCellProps,\n} from '../types';\n\nexport const rootBase = () => {\n\treturn css`\n\t\tborder-radius: 2px;\n\t\tbox-sizing: border-box;\n\t\tdirection: ltr;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat( 3, 1fr );\n\t\toutline: none;\n\t`;\n};\n\nconst rootSize = ( { size = 92 } ) => {\n\treturn css`\n\t\tgrid-template-rows: repeat( 3, calc( ${ size }px / 3 ) );\n\t\twidth: ${ size }px;\n\t`;\n};\n\nexport const Root = styled.div< {\n\tsize: AlignmentMatrixControlProps[ 'width' ];\n} >`\n\t${ rootBase };\n\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n\tgrid-template-columns: auto;\n\n\t${ rootSize };\n`;\n\nexport const Row = styled.div`\n\tbox-sizing: border-box;\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n`;\n\nconst pointActive = ( {\n\tisActive,\n}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {\n\tconst boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;\n\tconst pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];\n\tconst pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.theme.accent;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: ${ pointColor };\n\n\t\t*:hover > & {\n\t\t\tcolor: ${ pointColorHover };\n\t\t}\n\t`;\n};\n\nexport const pointBase = (\n\tprops: Pick< AlignmentMatrixControlCellProps, 'isActive' >\n) => {\n\treturn css`\n\t\tbackground: currentColor;\n\t\tbox-sizing: border-box;\n\t\tdisplay: grid;\n\t\tmargin: auto;\n\t\ttransition: all 120ms linear;\n\n\t\t${ reduceMotion( 'transition' ) }\n\t\t${ pointActive( props ) }\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 6px;\n\twidth: 6px;\n\t${ pointBase }\n`;\n\nexport const Cell = styled.span`\n\tappearance: none;\n\tborder: none;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tdisplay: flex;\n\tposition: relative;\n\toutline: none;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n`;\n"],"mappings":"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"}
+{"version":3,"names":["_react","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","_ref","process","env","NODE_ENV","name","styles","map","toString","rootBase","exports","rootSize","size","css","Root","_base","default","target","label","Row","pointActive","isActive","boxShadow","COLORS","gray","pointColor","pointColorHover","theme","accent","pointBase","props","reduceMotion","Point","Cell"],"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, reduceMotion } from '../../utils';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlCellProps,\n} from '../types';\n\nexport const rootBase = () => {\n\treturn css`\n\t\tborder-radius: 2px;\n\t\tbox-sizing: border-box;\n\t\tdirection: ltr;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat( 3, 1fr );\n\t\toutline: none;\n\t`;\n};\n\nconst rootSize = ( { size = 92 } ) => {\n\treturn css`\n\t\tgrid-template-rows: repeat( 3, calc( ${ size }px / 3 ) );\n\t\twidth: ${ size }px;\n\t`;\n};\n\nexport const Root = styled.div< {\n\tsize: AlignmentMatrixControlProps[ 'width' ];\n} >`\n\t${ rootBase };\n\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n\tgrid-template-columns: auto;\n\n\t${ rootSize };\n`;\n\nexport const Row = styled.div`\n\tbox-sizing: border-box;\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n`;\n\nconst pointActive = ( {\n\tisActive,\n}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {\n\tconst boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;\n\tconst pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];\n\tconst pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.theme.accent;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: ${ pointColor };\n\n\t\t*:hover > & {\n\t\t\tcolor: ${ pointColorHover };\n\t\t}\n\t`;\n};\n\nexport const pointBase = (\n\tprops: Pick< AlignmentMatrixControlCellProps, 'isActive' >\n) => {\n\treturn css`\n\t\tbackground: currentColor;\n\t\tbox-sizing: border-box;\n\t\tdisplay: grid;\n\t\tmargin: auto;\n\t\ttransition: all 120ms linear;\n\n\t\t${ reduceMotion( 'transition' ) }\n\t\t${ pointActive( props ) }\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 6px;\n\twidth: 6px;\n\t${ pointBase }\n`;\n\nexport const Cell = styled.span`\n\tappearance: none;\n\tborder: none;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tdisplay: flex;\n\tposition: relative;\n\toutline: none;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n`;\n"],"mappings":"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"}

package/build/alignment-matrix-control/utils.js

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.GRID = exports.ALIGNMENT_LABEL = exports.ALIGNMENTS = void 0;
 exports.getAlignmentIndex = getAlignmentIndex;
 exports.getItemId = getItemId;
-exports.transformValue = transformValue;
+exports.getItemValue = getItemValue;
 var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
  */
 
-const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']];
+const GRID = exports.GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']];
 
 // Stored as map as i18n __() only accepts strings (not variables)
-exports.GRID = GRID;
-const ALIGNMENT_LABEL = {
+const ALIGNMENT_LABEL = exports.ALIGNMENT_LABEL = {
   'top left': (0, _i18n.__)('Top Left'),
   'top center': (0, _i18n.__)('Top Center'),
   'top right': (0, _i18n.__)('Top Right'),
@@ -30,20 +29,23 @@ const ALIGNMENT_LABEL = {
 };
 
 // Transforms GRID into a flat Array of values.
-exports.ALIGNMENT_LABEL = ALIGNMENT_LABEL;
-const ALIGNMENTS = GRID.flat();
+const ALIGNMENTS = exports.ALIGNMENTS = GRID.flat();
 
 /**
- * Parses and transforms an incoming value to better match the alignment values
+ * Normalizes and transforms an incoming value to better match the alignment values
  *
  * @param value An alignment value to parse.
  *
  * @return The parsed value.
  */
-exports.ALIGNMENTS = ALIGNMENTS;
-function transformValue(value) {
-  const nextValue = value === 'center' ? 'center center' : value;
-  return nextValue.replace('-', ' ');
+function normalize(value) {
+  const normalized = value === 'center' ? 'center center' : value;
+
+  // Strictly speaking, this could be `string | null | undefined`,
+  // but will be validated shortly, so we're typecasting to an
+  // `AlignmentMatrixControlValue` to keep TypeScript happy.
+  const transformed = normalized?.replace('-', ' ');
+  return ALIGNMENTS.includes(transformed) ? transformed : undefined;
 }
 
 /**
@@ -55,8 +57,22 @@ function transformValue(value) {
  * @return The item id.
  */
 function getItemId(prefixId, value) {
-  const valueId = transformValue(value).replace(' ', '-');
-  return `${prefixId}-${valueId}`;
+  const normalized = normalize(value);
+  if (!normalized) return;
+  const id = normalized.replace(' ', '-');
+  return `${prefixId}-${id}`;
+}
+
+/**
+ * Extracts an item value from its ID
+ *
+ * @param prefixId An ID prefix to remove
+ * @param id       An item ID
+ * @return         The item value
+ */
+function getItemValue(prefixId, id) {
+  const value = id?.replace(prefixId + '-', '');
+  return normalize(value);
 }
 
 /**
@@ -67,8 +83,9 @@ function getItemId(prefixId, value) {
  * @return The index of a matching alignment.
  */
 function getAlignmentIndex(alignment = 'center') {
-  const item = transformValue(alignment);
-  const index = ALIGNMENTS.indexOf(item);
+  const normalized = normalize(alignment);
+  if (!normalized) return undefined;
+  const index = ALIGNMENTS.indexOf(normalized);
   return index > -1 ? index : undefined;
 }
 //# sourceMappingURL=utils.js.map