@wordpress/components 28.5.0 → 28.7.0

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

@@ -6,45 +6,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
+var _primitives = require("@wordpress/primitives");
 var _utils = require("./utils");
-var _alignmentMatrixControlIconStyles = require("./styles/alignment-matrix-control-icon-styles");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
 const BASE_SIZE = 24;
+const GRID_CELL_SIZE = 7;
+const GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;
+const DOT_SIZE = 2;
+const DOT_SIZE_SELECTED = 4;
 function AlignmentMatrixControlIcon({
   className,
   disablePointerEvents = true,
-  size = BASE_SIZE,
+  size,
+  width,
+  height,
   style = {},
   value = 'center',
   ...props
 }) {
-  const alignIndex = (0, _utils.getAlignmentIndex)(value);
-  const scale = (size / BASE_SIZE).toFixed(2);
-  const classes = (0, _clsx.default)('component-alignment-matrix-control-icon', className);
-  const styles = {
-    ...style,
-    transform: `scale(${scale})`
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Root, {
-    ...props,
-    className: classes,
-    disablePointerEvents: disablePointerEvents,
+  var _ref, _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SVG, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,
+    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,
+    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,
     role: "presentation",
-    style: styles,
+    className: (0, _clsx.default)('component-alignment-matrix-control-icon', className),
+    style: {
+      pointerEvents: disablePointerEvents ? 'none' : undefined,
+      ...style
+    },
+    ...props,
     children: _utils.ALIGNMENTS.map((align, index) => {
-      const isActive = alignIndex === index;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Cell, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Point, {
-          isActive: isActive
-        })
+      const dotSize = (0, _utils.getAlignmentIndex)(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Rect, {
+        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
+        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
+        width: dotSize,
+        height: dotSize,
+        fill: "currentColor"
       }, align);
     })
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","_jsxRuntime","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","clsx","styles","transform","jsx","Root","role","children","ALIGNMENTS","map","align","index","isActive","Cell","Point","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 = clsx(\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,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iCAAA,GAAAF,OAAA;AAIuD,IAAAG,WAAA,GAAAH,OAAA;AAbvD;AACA;AACA;;AAGA;AACA;AACA;;AAUA,MAAMI,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,aAAI,EACnB,yCAAyC,EACzCX,SACD,CAAC;EAED,MAAMY,MAAM,GAAG;IACd,GAAGT,KAAK;IACRU,SAAS,EAAG,SAASL,KAAO;EAC7B,CAAC;EAED,oBACC,IAAAX,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAAmB,IAAI;IAAA,GACCV,KAAK;IACVL,SAAS,EAAGU,OAAS;IACrBT,oBAAoB,EAAGA,oBAAsB;IAC7Ce,IAAI,EAAC,cAAc;IACnBb,KAAK,EAAGS,MAAQ;IAAAK,QAAA,EAEdC,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,QAAQ,GAAGhB,UAAU,KAAKe,KAAK;MAErC,oBACC,IAAAxB,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAA2B,IAAI;QAAAN,QAAA,eACJ,IAAApB,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAA4B,KAAK;UAACF,QAAQ,EAAGA;QAAU,CAAE;MAAC,GADpBF,KAEN,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc5B,0BAA0B","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_primitives","_utils","_jsxRuntime","BASE_SIZE","GRID_CELL_SIZE","GRID_PADDING","DOT_SIZE","DOT_SIZE_SELECTED","AlignmentMatrixControlIcon","className","disablePointerEvents","size","width","height","style","value","props","_ref","_ref2","jsx","SVG","xmlns","viewBox","role","clsx","pointerEvents","undefined","children","ALIGNMENTS","map","align","index","dotSize","getAlignmentIndex","Rect","x","y","Math","floor","fill","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Rect, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\nconst GRID_CELL_SIZE = 7;\nconst GRID_PADDING = ( BASE_SIZE - 3 * GRID_CELL_SIZE ) / 2;\nconst DOT_SIZE = 2;\nconst DOT_SIZE_SELECTED = 4;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize,\n\twidth,\n\theight,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) {\n\treturn (\n\t\t<SVG\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox={ `0 0 ${ BASE_SIZE } ${ BASE_SIZE }` }\n\t\t\twidth={ size ?? width ?? BASE_SIZE }\n\t\t\theight={ size ?? height ?? BASE_SIZE }\n\t\t\trole=\"presentation\"\n\t\t\tclassName={ clsx(\n\t\t\t\t'component-alignment-matrix-control-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tpointerEvents: disablePointerEvents ? 'none' : undefined,\n\t\t\t\t...style,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst dotSize =\n\t\t\t\t\tgetAlignmentIndex( value ) === index\n\t\t\t\t\t\t? DOT_SIZE_SELECTED\n\t\t\t\t\t\t: DOT_SIZE;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Rect\n\t\t\t\t\t\tkey={ align }\n\t\t\t\t\t\tx={\n\t\t\t\t\t\t\tGRID_PADDING +\n\t\t\t\t\t\t\t( index % 3 ) * GRID_CELL_SIZE +\n\t\t\t\t\t\t\t( GRID_CELL_SIZE - dotSize ) / 2\n\t\t\t\t\t\t}\n\t\t\t\t\t\ty={\n\t\t\t\t\t\t\tGRID_PADDING +\n\t\t\t\t\t\t\tMath.floor( index / 3 ) * GRID_CELL_SIZE +\n\t\t\t\t\t\t\t( GRID_CELL_SIZE - dotSize ) / 2\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={ dotSize }\n\t\t\t\t\t\theight={ dotSize }\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</SVG>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AAbxD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAMI,SAAS,GAAG,EAAE;AACpB,MAAMC,cAAc,GAAG,CAAC;AACxB,MAAMC,YAAY,GAAG,CAAEF,SAAS,GAAG,CAAC,GAAGC,cAAc,IAAK,CAAC;AAC3D,MAAME,QAAQ,GAAG,CAAC;AAClB,MAAMC,iBAAiB,GAAG,CAAC;AAE3B,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAAA,IAAAC,IAAA,EAAAC,KAAA;EAC7E,oBACC,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAoB,GAAG;IACHC,KAAK,EAAC,4BAA4B;IAClCC,OAAO,EAAI,OAAOnB,SAAW,IAAIA,SAAW,EAAG;IAC/CS,KAAK,GAAAK,IAAA,GAAGN,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIC,KAAK,cAAAK,IAAA,cAAAA,IAAA,GAAId,SAAW;IACpCU,MAAM,GAAAK,KAAA,GAAGP,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,MAAM,cAAAK,KAAA,cAAAA,KAAA,GAAIf,SAAW;IACtCoB,IAAI,EAAC,cAAc;IACnBd,SAAS,EAAG,IAAAe,aAAI,EACf,yCAAyC,EACzCf,SACD,CAAG;IACHK,KAAK,EAAG;MACPW,aAAa,EAAEf,oBAAoB,GAAG,MAAM,GAAGgB,SAAS;MACxD,GAAGZ;IACJ,CAAG;IAAA,GACEE,KAAK;IAAAW,QAAA,EAERC,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,OAAO,GACZ,IAAAC,wBAAiB,EAAElB,KAAM,CAAC,KAAKgB,KAAK,GACjCxB,iBAAiB,GACjBD,QAAQ;MAEZ,oBACC,IAAAJ,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAkC,IAAI;QAEJC,CAAC,EACA9B,YAAY,GACV0B,KAAK,GAAG,CAAC,GAAK3B,cAAc,GAC9B,CAAEA,cAAc,GAAG4B,OAAO,IAAK,CAC/B;QACDI,CAAC,EACA/B,YAAY,GACZgC,IAAI,CAACC,KAAK,CAAEP,KAAK,GAAG,CAAE,CAAC,GAAG3B,cAAc,GACxC,CAAEA,cAAc,GAAG4B,OAAO,IAAK,CAC/B;QACDpB,KAAK,EAAGoB,OAAS;QACjBnB,MAAM,EAAGmB,OAAS;QAClBO,IAAI,EAAC;MAAc,GAbbT,KAcN,CAAC;IAEJ,CAAE;EAAC,CACC,CAAC;AAER;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEclC,0BAA0B","ignoreList":[]}

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

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AlignmentMatrixControl = AlignmentMatrixControl;
-exports.default = void 0;
+exports.default = exports.AlignmentMatrixControl = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _cell = _interopRequireDefault(require("./cell"));
-var _v = require("../composite/v2");
-var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
+var _composite = require("../composite");
+var _styles = require("./styles");
 var _icon = _interopRequireDefault(require("./icon"));
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,27 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-/**
- *
- * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
- *
- * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ alignment, setAlignment ] = useState( 'center center' );
- *
- * 	return (
- * 		<AlignmentMatrixControl
- * 			value={ alignment }
- * 			onChange={ setAlignment }
- * 		/>
- * 	);
- * };
- * ```
- */
-function AlignmentMatrixControl({
+function UnforwardedAlignmentMatrixControl({
   className,
   id,
   label = (0, _i18n.__)('Alignment Matrix Control'),
@@ -57,23 +37,20 @@ function AlignmentMatrixControl({
   width = 92,
   ...props
 }) {
-  const baseId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
-  const compositeStore = (0, _v.useCompositeStore)({
+  const baseId = (0, _compose.useInstanceId)(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);
+  const setActiveId = (0, _element.useCallback)(nextActiveId => {
+    const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
+    if (nextValue) {
+      onChange?.(nextValue);
+    }
+  }, [baseId, onChange]);
+  const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite, {
     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 activeId = compositeStore.useState('activeId');
-  const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_v.Composite, {
-    store: compositeStore,
-    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Root, {
+    setActiveId: setActiveId,
+    rtl: (0, _i18n.isRTL)(),
+    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridContainer, {
       ...props,
       "aria-label": label,
       className: classes,
@@ -81,22 +58,50 @@ function AlignmentMatrixControl({
       role: "grid",
       size: width
     }),
-    children: _utils.GRID.map((cells, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_v.CompositeRow, {
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Row, {
+    children: _utils.GRID.map((cells, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Row, {
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridRow, {
         role: "row"
       }),
-      children: cells.map(cell => {
-        const cellId = (0, _utils.getItemId)(baseId, cell);
-        const isActive = cellId === activeId;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
-          id: cellId,
-          isActive: isActive,
-          value: cell
-        }, cell);
-      })
+      children: cells.map(cell => /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
+        id: (0, _utils.getItemId)(baseId, cell),
+        value: cell
+      }, cell))
     }, index))
   });
 }
-AlignmentMatrixControl.Icon = _icon.default;
+
+/**
+ * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+ *
+ * ```jsx
+ * import { AlignmentMatrixControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ alignment, setAlignment ] = useState( 'center center' );
+ *
+ * 	return (
+ * 		<AlignmentMatrixControl
+ * 			value={ alignment }
+ * 			onChange={ setAlignment }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+const AlignmentMatrixControl = exports.AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
+  /**
+   * Render an alignment matrix as an icon.
+   *
+   * ```jsx
+   * import { AlignmentMatrixControl } from '@wordpress/components';
+   *
+   * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
+   * ```
+   */
+  Icon: Object.assign(_icon.default, {
+    displayName: 'AlignmentMatrixControl.Icon'
+  })
+});
 var _default = exports.default = AlignmentMatrixControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_compose","_cell","_v","_alignmentMatrixControlStyles","_icon","_utils","_jsxRuntime","AlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","compositeStore","useCompositeStore","defaultActiveId","getItemId","activeId","setActiveId","nextActiveId","nextValue","getItemValue","rtl","isRTL","useState","classes","clsx","jsx","Composite","store","render","Root","role","size","children","GRID","map","cells","index","CompositeRow","Row","cell","cellId","isActive","default","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\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":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_compose","_element","_cell","_composite","_styles","_icon","_utils","_jsxRuntime","UnforwardedAlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","setActiveId","useCallback","nextActiveId","nextValue","getItemValue","classes","clsx","jsx","Composite","defaultActiveId","getItemId","activeId","rtl","isRTL","render","GridContainer","role","size","children","GRID","map","cells","index","Row","GridRow","cell","default","AlignmentMatrixControl","exports","Object","assign","Icon","AlignmentMatrixControlIcon","displayName","_default"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport { GridContainer, GridRow } from './styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\nfunction UnforwardedAlignmentMatrixControl( {\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\tUnforwardedAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst setActiveId = useCallback<\n\t\tNonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >\n\t>(\n\t\t( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\t[ baseId, onChange ]\n\t);\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\n\n\treturn (\n\t\t<Composite\n\t\t\tdefaultActiveId={ getItemId( baseId, defaultValue ) }\n\t\t\tactiveId={ getItemId( baseId, value ) }\n\t\t\tsetActiveId={ setActiveId }\n\t\t\trtl={ isRTL() }\n\t\t\trender={\n\t\t\t\t<GridContainer\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<Composite.Row render={ <GridRow role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => (\n\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\tid={ getItemId( baseId, cell ) }\n\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { 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 const AlignmentMatrixControl = Object.assign(\n\tUnforwardedAlignmentMatrixControl,\n\t{\n\t\t/**\n\t\t * Render an alignment matrix as an icon.\n\t\t *\n\t\t * ```jsx\n\t\t * import { AlignmentMatrixControl } from '@wordpress/components';\n\t\t *\n\t\t * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n\t\t * ```\n\t\t */\n\t\tIcon: Object.assign( AlignmentMatrixControlIcon, {\n\t\t\tdisplayName: 'AlignmentMatrixControl.Icon',\n\t\t} ),\n\t}\n);\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Point = exports.GridRow = exports.GridContainer = exports.Cell = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = require("@emotion/react");
+var _utils = require("../utils");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
+ * External dependencies
+ */ /**
+ * Internal dependencies
+ */
+// Grid structure
+
+const rootBase = ({
+  size = 92
+}) => /*#__PURE__*/(0, _react.css)("direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );grid-template-rows:repeat( 3, 1fr );box-sizing:border-box;width:", size, "px;aspect-ratio:1;border-radius:", _utils.CONFIG.radiusMedium, ";outline:none;" + (process.env.NODE_ENV === "production" ? "" : ";label:rootBase;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnlDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */");
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : {
+  name: "1h7pcau-GridContainer",
+  styles: "cursor:pointer;label:GridContainer;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQ1EiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHtcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxufSBmcm9tICcuL3R5cGVzJztcblxuLy8gR3JpZCBzdHJ1Y3R1cmVcblxuY29uc3Qgcm9vdEJhc2UgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiBjc3NgXG5cdGRpcmVjdGlvbjogbHRyO1xuXG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIDFmciApO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNNZWRpdW0gfTtcblx0b3V0bGluZTogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjwge1xuXHRzaXplPzogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzPzogQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wc1sgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyBdO1xufSA+YFxuXHQkeyByb290QmFzZSB9XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0JHsgKCBwcm9wcyApID0+XG5cdFx0cHJvcHMuZGlzYWJsZVBvaW50ZXJFdmVudHNcblx0XHRcdD8gY3NzYGBcblx0XHRcdDogY3NzYFxuXHRcdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdCAgYCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFJvdyA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtY29sdW1uOiAxIC8gLTE7XG5cblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuLy8gQ2VsbFxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5jb25zdCBQT0lOVF9TSVpFID0gNjtcbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Y29udGFpbjogc3RyaWN0O1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBQT0lOVF9TSVpFIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdG1hcmdpbjogYXV0bztcblxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmdyYXlbIDQwMCBdIH07XG5cblx0LyogVXNlIGJvcmRlciBpbnN0ZWFkIG9mIGJhY2tncm91bmQgY29sb3Igc28gdGhhdCB0aGUgcG9pbnQgc2hvd3Ncblx0aW4gV2luZG93cyBIaWdoIENvbnRyYXN0IE1vZGUgKi9cblx0Ym9yZGVyOiAkeyBQT0lOVF9TSVpFIC8gMiB9cHggc29saWQgY3VycmVudENvbG9yO1xuXG5cdC8qIEhpZ2hsaWdodCBhY3RpdmUgaXRlbSAqL1xuXHQkeyBDZWxsIH1bZGF0YS1hY3RpdmUtaXRlbV0gJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRcdHRyYW5zZm9ybTogc2NhbGUoIGNhbGMoIDUgLyAzICkgKTtcblx0fVxuXG5cdC8qIEhvdmVyIHN0eWxlcyBmb3Igbm9uLWFjdGl2ZSBpdGVtcyAqL1xuXHQkeyBDZWxsIH06bm90KFtkYXRhLWFjdGl2ZS1pdGVtXSk6aG92ZXIgJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0fVxuXG5cdC8qIFNob3cgYW4gb3V0bGluZSBvbmx5IHdoZW4gaW50ZXJhY3Rpbmcgd2l0aCBrZXlib2FyZCAqL1xuXHQkeyBDZWxsIH1bZGF0YS1mb2N1cy12aXNpYmxlXSAmIHtcblx0XHRvdXRsaW5lOiAxcHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRcdG91dGxpbmUtb2Zmc2V0OiAxcHg7XG5cdH1cblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvciwgdHJhbnNmb3JtO1xuXHRcdHRyYW5zaXRpb24tZHVyYXRpb246IDEyMG1zO1xuXHRcdHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const GridContainer = exports.GridContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn3"
+} : {
+  target: "e1r95csn3",
+  label: "GridContainer"
+})(rootBase, " border:1px solid transparent;", props => props.disablePointerEvents ? /*#__PURE__*/(0, _react.css)(process.env.NODE_ENV === "production" ? "" : ";label:GridContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ1EiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHtcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxufSBmcm9tICcuL3R5cGVzJztcblxuLy8gR3JpZCBzdHJ1Y3R1cmVcblxuY29uc3Qgcm9vdEJhc2UgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiBjc3NgXG5cdGRpcmVjdGlvbjogbHRyO1xuXG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIDFmciApO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNNZWRpdW0gfTtcblx0b3V0bGluZTogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjwge1xuXHRzaXplPzogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzPzogQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wc1sgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyBdO1xufSA+YFxuXHQkeyByb290QmFzZSB9XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0JHsgKCBwcm9wcyApID0+XG5cdFx0cHJvcHMuZGlzYWJsZVBvaW50ZXJFdmVudHNcblx0XHRcdD8gY3NzYGBcblx0XHRcdDogY3NzYFxuXHRcdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdCAgYCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFJvdyA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtY29sdW1uOiAxIC8gLTE7XG5cblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuLy8gQ2VsbFxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5jb25zdCBQT0lOVF9TSVpFID0gNjtcbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Y29udGFpbjogc3RyaWN0O1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBQT0lOVF9TSVpFIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdG1hcmdpbjogYXV0bztcblxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmdyYXlbIDQwMCBdIH07XG5cblx0LyogVXNlIGJvcmRlciBpbnN0ZWFkIG9mIGJhY2tncm91bmQgY29sb3Igc28gdGhhdCB0aGUgcG9pbnQgc2hvd3Ncblx0aW4gV2luZG93cyBIaWdoIENvbnRyYXN0IE1vZGUgKi9cblx0Ym9yZGVyOiAkeyBQT0lOVF9TSVpFIC8gMiB9cHggc29saWQgY3VycmVudENvbG9yO1xuXG5cdC8qIEhpZ2hsaWdodCBhY3RpdmUgaXRlbSAqL1xuXHQkeyBDZWxsIH1bZGF0YS1hY3RpdmUtaXRlbV0gJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRcdHRyYW5zZm9ybTogc2NhbGUoIGNhbGMoIDUgLyAzICkgKTtcblx0fVxuXG5cdC8qIEhvdmVyIHN0eWxlcyBmb3Igbm9uLWFjdGl2ZSBpdGVtcyAqL1xuXHQkeyBDZWxsIH06bm90KFtkYXRhLWFjdGl2ZS1pdGVtXSk6aG92ZXIgJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0fVxuXG5cdC8qIFNob3cgYW4gb3V0bGluZSBvbmx5IHdoZW4gaW50ZXJhY3Rpbmcgd2l0aCBrZXlib2FyZCAqL1xuXHQkeyBDZWxsIH1bZGF0YS1mb2N1cy12aXNpYmxlXSAmIHtcblx0XHRvdXRsaW5lOiAxcHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRcdG91dGxpbmUtb2Zmc2V0OiAxcHg7XG5cdH1cblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvciwgdHJhbnNmb3JtO1xuXHRcdHRyYW5zaXRpb24tZHVyYXRpb246IDEyMG1zO1xuXHRcdHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XG4iXX0= */") : _ref, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQ0ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHtcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxufSBmcm9tICcuL3R5cGVzJztcblxuLy8gR3JpZCBzdHJ1Y3R1cmVcblxuY29uc3Qgcm9vdEJhc2UgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiBjc3NgXG5cdGRpcmVjdGlvbjogbHRyO1xuXG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIDFmciApO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNNZWRpdW0gfTtcblx0b3V0bGluZTogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjwge1xuXHRzaXplPzogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzPzogQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wc1sgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyBdO1xufSA+YFxuXHQkeyByb290QmFzZSB9XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0JHsgKCBwcm9wcyApID0+XG5cdFx0cHJvcHMuZGlzYWJsZVBvaW50ZXJFdmVudHNcblx0XHRcdD8gY3NzYGBcblx0XHRcdDogY3NzYFxuXHRcdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdCAgYCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFJvdyA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtY29sdW1uOiAxIC8gLTE7XG5cblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuLy8gQ2VsbFxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5jb25zdCBQT0lOVF9TSVpFID0gNjtcbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Y29udGFpbjogc3RyaWN0O1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBQT0lOVF9TSVpFIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdG1hcmdpbjogYXV0bztcblxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmdyYXlbIDQwMCBdIH07XG5cblx0LyogVXNlIGJvcmRlciBpbnN0ZWFkIG9mIGJhY2tncm91bmQgY29sb3Igc28gdGhhdCB0aGUgcG9pbnQgc2hvd3Ncblx0aW4gV2luZG93cyBIaWdoIENvbnRyYXN0IE1vZGUgKi9cblx0Ym9yZGVyOiAkeyBQT0lOVF9TSVpFIC8gMiB9cHggc29saWQgY3VycmVudENvbG9yO1xuXG5cdC8qIEhpZ2hsaWdodCBhY3RpdmUgaXRlbSAqL1xuXHQkeyBDZWxsIH1bZGF0YS1hY3RpdmUtaXRlbV0gJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRcdHRyYW5zZm9ybTogc2NhbGUoIGNhbGMoIDUgLyAzICkgKTtcblx0fVxuXG5cdC8qIEhvdmVyIHN0eWxlcyBmb3Igbm9uLWFjdGl2ZSBpdGVtcyAqL1xuXHQkeyBDZWxsIH06bm90KFtkYXRhLWFjdGl2ZS1pdGVtXSk6aG92ZXIgJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0fVxuXG5cdC8qIFNob3cgYW4gb3V0bGluZSBvbmx5IHdoZW4gaW50ZXJhY3Rpbmcgd2l0aCBrZXlib2FyZCAqL1xuXHQkeyBDZWxsIH1bZGF0YS1mb2N1cy12aXNpYmxlXSAmIHtcblx0XHRvdXRsaW5lOiAxcHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRcdG91dGxpbmUtb2Zmc2V0OiAxcHg7XG5cdH1cblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvciwgdHJhbnNmb3JtO1xuXHRcdHRyYW5zaXRpb24tZHVyYXRpb246IDEyMG1zO1xuXHRcdHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XG4iXX0= */"));
+const GridRow = exports.GridRow = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn2"
+} : {
+  target: "e1r95csn2",
+  label: "GridRow"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1fbxn64",
+  styles: "grid-column:1/-1;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )"
+} : {
+  name: "1fbxn64",
+  styles: "grid-column:1/-1;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRGlDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+// Cell
+const Cell = exports.Cell = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn1"
+} : {
+  target: "e1r95csn1",
+  label: "Cell"
+})(process.env.NODE_ENV === "production" ? {
+  name: "e2kws5",
+  styles: "position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;appearance:none;border:none;outline:none"
+} : {
+  name: "e2kws5",
+  styles: "position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;appearance:none;border:none;outline:none",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RCtCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const POINT_SIZE = 6;
+const Point = exports.Point = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn0"
+} : {
+  target: "e1r95csn0",
+  label: "Point"
+})("display:block;contain:strict;box-sizing:border-box;width:", POINT_SIZE, "px;aspect-ratio:1;margin:auto;color:", _utils.COLORS.theme.gray[400], ";border:", POINT_SIZE / 2, "px solid currentColor;", Cell, "[data-active-item] &{color:", _utils.COLORS.gray[900], ";transform:scale( calc( 5 / 3 ) );}", Cell, ":not([data-active-item]):hover &{color:", _utils.COLORS.theme.accent, ";}", Cell, "[data-focus-visible] &{outline:1px solid ", _utils.COLORS.theme.accent, ";outline-offset:1px;}@media not ( prefers-reduced-motion ){transition-property:color,transform;transition-duration:120ms;transition-timing-function:linear;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRWdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */"));
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","rootBase","size","css","CONFIG","radiusMedium","process","env","NODE_ENV","_ref","name","styles","map","toString","GridContainer","exports","_base","default","target","label","props","disablePointerEvents","GridRow","Cell","POINT_SIZE","Point","COLORS","theme","gray","accent"],"sources":["@wordpress/components/src/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, CONFIG } from '../utils';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlIconProps,\n} from './types';\n\n// Grid structure\n\nconst rootBase = ( { size = 92 } ) => css`\n\tdirection: ltr;\n\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n\tgrid-template-rows: repeat( 3, 1fr );\n\n\tbox-sizing: border-box;\n\twidth: ${ size }px;\n\taspect-ratio: 1;\n\n\tborder-radius: ${ CONFIG.radiusMedium };\n\toutline: none;\n`;\n\nexport const GridContainer = styled.div< {\n\tsize?: AlignmentMatrixControlProps[ 'width' ];\n\tdisablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ];\n} >`\n\t${ rootBase }\n\n\tborder: 1px solid transparent;\n\n\t${ ( props ) =>\n\t\tprops.disablePointerEvents\n\t\t\t? css``\n\t\t\t: css`\n\t\t\t\t\tcursor: pointer;\n\t\t\t  ` }\n`;\n\nexport const GridRow = styled.div`\n\tgrid-column: 1 / -1;\n\n\tbox-sizing: border-box;\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n`;\n\n// Cell\nexport const Cell = styled.span`\n\tposition: relative;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n\n\tappearance: none;\n\tborder: none;\n\toutline: none;\n`;\n\nconst POINT_SIZE = 6;\nexport const Point = styled.span`\n\tdisplay: block;\n\tcontain: strict;\n\n\tbox-sizing: border-box;\n\twidth: ${ POINT_SIZE }px;\n\taspect-ratio: 1;\n\n\tmargin: auto;\n\n\tcolor: ${ COLORS.theme.gray[ 400 ] };\n\n\t/* Use border instead of background color so that the point shows\n\tin Windows High Contrast Mode */\n\tborder: ${ POINT_SIZE / 2 }px solid currentColor;\n\n\t/* Highlight active item */\n\t${ Cell }[data-active-item] & {\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t\ttransform: scale( calc( 5 / 3 ) );\n\t}\n\n\t/* Hover styles for non-active items */\n\t${ Cell }:not([data-active-item]):hover & {\n\t\tcolor: ${ COLORS.theme.accent };\n\t}\n\n\t/* Show an outline only when interacting with keyboard */\n\t${ Cell }[data-focus-visible] & {\n\t\toutline: 1px solid ${ COLORS.theme.accent };\n\t\toutline-offset: 1px;\n\t}\n\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition-property: color, transform;\n\t\ttransition-duration: 120ms;\n\t\ttransition-timing-function: linear;\n\t}\n`;\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAA0C,SAAAE,iCAAA,gPAT1C;AACA;AACA,GAFA,CAMA;AACA;AACA;AAOA;;AAEA,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,IAAI,GAAG;AAAG,CAAC,sBAAMC,UAAG,wIAQ9BD,IAAI,sCAGIE,aAAM,CAACC,YAAY,sBAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,8CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2jHAErC;AAAC,IAAAC,IAAA,GAAAH,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAE,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAb;AAAA;AAEK,MAAMc,aAAa,GAAAC,OAAA,CAAAD,aAAA,oBAAAE,KAAA,CAAAC,OAAA,SAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAItBlB,QAAQ,oCAINmB,KAAK,IACTA,KAAK,CAACC,oBAAoB,oBACvBlB,UAAG,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,kDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,8jHAAAC,IAGF,SAAAH,OAAA,CAAAC,GAAA,CAAAC,QAAA,4jHACL;AAEM,MAAMc,OAAO,GAAAP,OAAA,CAAAO,OAAA,oBAAAN,KAAA,CAAAC,OAAA,SAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAE,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAb;AAAA,EAMnB;;AAED;AACO,MAAMuB,IAAI,GAAAR,OAAA,CAAAQ,IAAA,oBAAAP,KAAA,CAAAC,OAAA,UAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAE,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAb;AAAA,EAchB;AAED,MAAMwB,UAAU,GAAG,CAAC;AACb,MAAMC,KAAK,GAAAV,OAAA,CAAAU,KAAA,oBAAAT,KAAA,CAAAC,OAAA,UAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,gEAKPK,UAAU,0CAKVE,aAAM,CAACC,KAAK,CAACC,IAAI,CAAE,GAAG,CAAE,cAIvBJ,UAAU,GAAG,CAAC,4BAGtBD,IAAI,iCACIG,aAAM,CAACE,IAAI,CAAE,GAAG,CAAE,yCAK1BL,IAAI,6CACIG,aAAM,CAACC,KAAK,CAACE,MAAM,QAI3BN,IAAI,+CACgBG,aAAM,CAACC,KAAK,CAACE,MAAM,oKAAAvB,OAAA,CAAAC,GAAA,CAAAC,QAAA,4jHAS1C","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/alignment-matrix-control/types.ts"],"sourcesContent":["export type AlignmentMatrixControlValue =\n\t| 'top left'\n\t| 'top center'\n\t| 'top right'\n\t| 'center left'\n\t| 'center'\n\t| 'center center'\n\t| 'center right'\n\t| 'bottom left'\n\t| 'bottom center'\n\t| 'bottom right';\n\nexport type AlignmentMatrixControlProps = {\n\t/**\n\t * Accessible label. If provided, sets the `aria-label` attribute of the\n\t * underlying `grid` widget.\n\t *\n\t * @default 'Alignment Matrix Control'\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided, sets the default alignment value.\n\t *\n\t * @default 'center center'\n\t */\n\tdefaultValue?: AlignmentMatrixControlValue;\n\t/**\n\t * The current alignment value.\n\t */\n\tvalue?: AlignmentMatrixControlValue;\n\t/**\n\t * A function that receives the updated alignment value.\n\t */\n\tonChange?: ( newValue: AlignmentMatrixControlValue ) => void;\n\t/**\n\t * If provided, sets the width of the control.\n\t *\n\t * @default 92\n\t */\n\twidth?: number;\n};\n\nexport type AlignmentMatrixControlIconProps = Pick<\n\tAlignmentMatrixControlProps,\n\t'value'\n> & {\n\tdisablePointerEvents?: boolean;\n\tsize?: number;\n};\n\nexport type AlignmentMatrixControlCellProps = {\n\tisActive?: boolean;\n\tvalue: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/alignment-matrix-control/types.ts"],"sourcesContent":["export type AlignmentMatrixControlValue =\n\t| 'top left'\n\t| 'top center'\n\t| 'top right'\n\t| 'center left'\n\t| 'center'\n\t| 'center center'\n\t| 'center right'\n\t| 'bottom left'\n\t| 'bottom center'\n\t| 'bottom right';\n\nexport type AlignmentMatrixControlProps = {\n\t/**\n\t * Accessible label. If provided, sets the `aria-label` attribute of the\n\t * underlying `grid` widget.\n\t *\n\t * @default 'Alignment Matrix Control'\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided, sets the default alignment value.\n\t *\n\t * @default 'center center'\n\t */\n\tdefaultValue?: AlignmentMatrixControlValue;\n\t/**\n\t * The current alignment value.\n\t */\n\tvalue?: AlignmentMatrixControlValue;\n\t/**\n\t * A function that receives the updated alignment value.\n\t */\n\tonChange?: ( newValue: AlignmentMatrixControlValue ) => void;\n\t/**\n\t * If provided, sets the width of the control.\n\t *\n\t * @default 92\n\t */\n\twidth?: number;\n};\n\nexport type AlignmentMatrixControlIconProps = Pick<\n\tAlignmentMatrixControlProps,\n\t'value'\n> & {\n\t/**\n\t * If `true`, disables pointer events on the icon.\n\t * @default true\n\t */\n\tdisablePointerEvents?: boolean;\n\t/**\n\t * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon`\n\t * component instead_\n\t *\n\t * The size of the icon.\n\t * @ignore\n\t * @default 24\n\t */\n\tsize?: number;\n};\n\nexport type AlignmentMatrixControlCellProps = {\n\tvalue: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;\n};\n"],"mappings":"","ignoreList":[]}

package/build/angle-picker-control/angle-circle.js

@@ -22,14 +22,14 @@ function AngleCircle({
   ...props
 }) {
   const angleCircleRef = (0, _element.useRef)(null);
-  const angleCircleCenter = (0, _element.useRef)();
-  const previousCursorValue = (0, _element.useRef)();
+  const angleCircleCenterRef = (0, _element.useRef)();
+  const previousCursorValueRef = (0, _element.useRef)();
   const setAngleCircleCenter = () => {
     if (angleCircleRef.current === null) {
       return;
     }
     const rect = angleCircleRef.current.getBoundingClientRect();
-    angleCircleCenter.current = {
+    angleCircleCenterRef.current = {
       x: rect.x + rect.width / 2,
       y: rect.y + rect.height / 2
     };
@@ -44,11 +44,11 @@ function AngleCircle({
     event.preventDefault();
     // Input control needs to lose focus and by preventDefault above, it doesn't.
     event.target?.focus();
-    if (angleCircleCenter.current !== undefined && onChange !== undefined) {
+    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {
       const {
         x: centerX,
         y: centerY
-      } = angleCircleCenter.current;
+      } = angleCircleCenterRef.current;
       onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
     }
   };
@@ -65,13 +65,13 @@ function AngleCircle({
   });
   (0, _element.useEffect)(() => {
     if (isDragging) {
-      if (previousCursorValue.current === undefined) {
-        previousCursorValue.current = document.body.style.cursor;
+      if (previousCursorValueRef.current === undefined) {
+        previousCursorValueRef.current = document.body.style.cursor;
       }
       document.body.style.cursor = 'grabbing';
     } else {
-      document.body.style.cursor = previousCursorValue.current || '';
-      previousCursorValue.current = undefined;
+      document.body.style.cursor = previousCursorValueRef.current || '';
+      previousCursorValueRef.current = undefined;
     }
   }, [isDragging]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.CircleRoot, {

package/build/angle-picker-control/angle-circle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_anglePickerControlStyles","_jsxRuntime","AngleCircle","value","onChange","props","angleCircleRef","useRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","useDragging","onDragStart","onDragMove","onDragEnd","useEffect","document","body","style","cursor","jsx","CircleRoot","ref","onMouseDown","className","children","CircleIndicatorWrapper","transform","tabIndex","CircleIndicator","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI","_default","exports","default"],"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_anglePickerControlStyles","_jsxRuntime","AngleCircle","value","onChange","props","angleCircleRef","useRef","angleCircleCenterRef","previousCursorValueRef","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","useDragging","onDragStart","onDragMove","onDragEnd","useEffect","document","body","style","cursor","jsx","CircleRoot","ref","onMouseDown","className","children","CircleIndicatorWrapper","transform","tabIndex","CircleIndicator","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI","_default","exports","default"],"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenterRef = useRef<\n\t\t{ x: number; y: number } | undefined\n\t>();\n\tconst previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenterRef.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenterRef.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenterRef.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValueRef.current === undefined ) {\n\t\t\t\tpreviousCursorValueRef.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValueRef.current || '';\n\t\t\tpreviousCursorValueRef.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"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","ignoreList":[]}

package/build/angle-picker-control/styles/angle-picker-control-styles.js

@@ -22,7 +22,7 @@ const CircleRoot = exports.CircleRoot = /*#__PURE__*/(0, _base.default)("div", p
 } : {
   target: "eln3bjz3",
   label: "CircleRoot"
-})("border-radius:50%;border:", _configValues.default.borderWidth, " solid ", _utils.COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JvQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IHNvbGlkICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6ICR7IENJUkNMRV9TSVpFIH1weDtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0d2lkdGg6ICR7IENJUkNMRV9TSVpFIH1weDtcblxuXHQ6YWN0aXZlIHtcblx0XHRjdXJzb3I6IGdyYWJiaW5nO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0bGVmdDogNTAlO1xuXHR0b3A6IDRweDtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKCAtNTAlICk7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0d2lkdGg6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weDtcblx0aGVpZ2h0OiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0bWFyZ2luLXJpZ2h0OiAkeyBzcGFjZSggMyApIH07XG5gO1xuIl19 */"));
+})("border-radius:", _configValues.default.radiusRound, ";border:", _configValues.default.borderWidth, " solid ", _utils.COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JvQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c1JvdW5kIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXG5cdDphY3RpdmUge1xuXHRcdGN1cnNvcjogZ3JhYmJpbmc7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAxMDAlO1xuXG5cdDpmb2N1cy12aXNpYmxlIHtcblx0XHRvdXRsaW5lOiBub25lO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzUm91bmQgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGxlZnQ6IDUwJTtcblx0dG9wOiA0cHg7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWCggLTUwJSApO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5cdGhlaWdodDogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFVuaXRUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdG1hcmdpbi1yaWdodDogJHsgc3BhY2UoIDMgKSB9O1xuYDtcbiJdfQ== */"));
 const CircleIndicatorWrapper = exports.CircleIndicatorWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "eln3bjz2"
 } : {
@@ -34,7 +34,7 @@ const CircleIndicatorWrapper = exports.CircleIndicatorWrapper = /*#__PURE__*/(0,
 } : {
   name: "1r307gh",
   styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJnRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IHNvbGlkICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6ICR7IENJUkNMRV9TSVpFIH1weDtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0d2lkdGg6ICR7IENJUkNMRV9TSVpFIH1weDtcblxuXHQ6YWN0aXZlIHtcblx0XHRjdXJzb3I6IGdyYWJiaW5nO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0bGVmdDogNTAlO1xuXHR0b3A6IDRweDtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKCAtNTAlICk7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0d2lkdGg6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weDtcblx0aGVpZ2h0OiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0bWFyZ2luLXJpZ2h0OiAkeyBzcGFjZSggMyApIH07XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJnRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c1JvdW5kIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXG5cdDphY3RpdmUge1xuXHRcdGN1cnNvcjogZ3JhYmJpbmc7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAxMDAlO1xuXG5cdDpmb2N1cy12aXNpYmxlIHtcblx0XHRvdXRsaW5lOiBub25lO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzUm91bmQgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGxlZnQ6IDUwJTtcblx0dG9wOiA0cHg7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWCggLTUwJSApO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5cdGhlaWdodDogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFVuaXRUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdG1hcmdpbi1yaWdodDogJHsgc3BhY2UoIDMgKSB9O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const CircleIndicator = exports.CircleIndicator = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
@@ -42,11 +42,11 @@ const CircleIndicator = exports.CircleIndicator = /*#__PURE__*/(0, _base.default
 } : {
   target: "eln3bjz1",
   label: "CircleIndicator"
-})("background:", _utils.COLORS.theme.accent, ";border-radius:50%;box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IHNvbGlkICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6ICR7IENJUkNMRV9TSVpFIH1weDtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0d2lkdGg6ICR7IENJUkNMRV9TSVpFIH1weDtcblxuXHQ6YWN0aXZlIHtcblx0XHRjdXJzb3I6IGdyYWJiaW5nO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0bGVmdDogNTAlO1xuXHR0b3A6IDRweDtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKCAtNTAlICk7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0d2lkdGg6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weDtcblx0aGVpZ2h0OiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0bWFyZ2luLXJpZ2h0OiAkeyBzcGFjZSggMyApIH07XG5gO1xuIl19 */"));
+})("background:", _utils.COLORS.theme.accent, ";border-radius:", _configValues.default.radiusRound, ";box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c1JvdW5kIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXG5cdDphY3RpdmUge1xuXHRcdGN1cnNvcjogZ3JhYmJpbmc7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAxMDAlO1xuXG5cdDpmb2N1cy12aXNpYmxlIHtcblx0XHRvdXRsaW5lOiBub25lO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzUm91bmQgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGxlZnQ6IDUwJTtcblx0dG9wOiA0cHg7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWCggLTUwJSApO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5cdGhlaWdodDogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFVuaXRUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdG1hcmdpbi1yaWdodDogJHsgc3BhY2UoIDMgKSB9O1xuYDtcbiJdfQ== */"));
 const UnitText = exports.UnitText = /*#__PURE__*/(0, _base.default)(_text.Text, process.env.NODE_ENV === "production" ? {
   target: "eln3bjz0"
 } : {
   target: "eln3bjz0",
   label: "UnitText"
-})("color:", _utils.COLORS.theme.accent, ";margin-right:", (0, _space.space)(3), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0RzQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IHNvbGlkICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6ICR7IENJUkNMRV9TSVpFIH1weDtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0d2lkdGg6ICR7IENJUkNMRV9TSVpFIH1weDtcblxuXHQ6YWN0aXZlIHtcblx0XHRjdXJzb3I6IGdyYWJiaW5nO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0bGVmdDogNTAlO1xuXHR0b3A6IDRweDtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKCAtNTAlICk7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0d2lkdGg6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weDtcblx0aGVpZ2h0OiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0bWFyZ2luLXJpZ2h0OiAkeyBzcGFjZSggMyApIH07XG5gO1xuIl19 */"));
+})("color:", _utils.COLORS.theme.accent, ";margin-right:", (0, _space.space)(3), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0RzQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi90ZXh0JztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDY7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c1JvdW5kIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXG5cdDphY3RpdmUge1xuXHRcdGN1cnNvcjogZ3JhYmJpbmc7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAxMDAlO1xuXG5cdDpmb2N1cy12aXNpYmxlIHtcblx0XHRvdXRsaW5lOiBub25lO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzUm91bmQgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGxlZnQ6IDUwJTtcblx0dG9wOiA0cHg7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWCggLTUwJSApO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHg7XG5cdGhlaWdodDogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFVuaXRUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdG1hcmdpbi1yaWdodDogJHsgc3BhY2UoIDMgKSB9O1xuYDtcbiJdfQ== */"));
 //# sourceMappingURL=angle-picker-control-styles.js.map