@wordpress/components 18.0.0 → 19.0.3

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 ## Unreleased
 
+## 19.0.2 (2021-11-15)
+
+-   Remove erroneous use of `??=` syntax from `build-module`.
+
+## 19.0.1 (2021-11-07)
+
+### Experimental
+
+-   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([35621](https://github.com/WordPress/gutenberg/pull/35621)).
+
+## 19.0.0 (2021-10-22)
+
+### New Features
+
+-   Added support for `step="any"` in `NumberControl` and `RangeControl` ([#34542](https://github.com/WordPress/gutenberg/pull/34542)).
+
+### Enhancements
+
+-   Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
+-   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a  string on  ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+-   The property `disableAlpha`, was removed from the `ColorPicker` component. Use the new opposite property `enableAlpha` instead ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+
+### Experimental
+
+-   Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
+-   Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
+-   Added support for showing an experimental hint in `CustomSelectControl`  ([#35673](https://github.com/WordPress/gutenberg/pull/35673)).
+
+### Breaking Changes
+
+-   The `color` property a `tinycolor2` color object passed on `onChangeComplete` property of the `ColorPicker` component was removed. Please use the new `onChange` property that accepts a string color representation ([#35562](https://github.com/WordPress/gutenberg/pull/35562)).
+
 ## 18.0.0 (2021-10-12)
 
 ### Breaking Changes
@@ -11,9 +43,10 @@
 -   Changed `RangeControl` component to not apply `shiftStep` to inputs from its `<input type="range"/>` ([35020](https://github.com/WordPress/gutenberg/pull/35020)).
 -   Removed `isAction` prop from `Item`. The component will now rely on `onClick` to render as a `button` ([35152](https://github.com/WordPress/gutenberg/pull/35152)).
 
-### New Feature
+### New Features
 
 -   Add an experimental `Navigator` components ([#34904](https://github.com/WordPress/gutenberg/pull/34904)) as a replacement for the previous `Navigation` related components.
+-   Update the `ColorPicker` component to the latest design ([#35220](https://github.com/WordPress/gutenberg/pull/35220))
 
 ### Bug Fix
 
@@ -22,6 +55,7 @@
 ### Internal
 
 -   Deleted the `createComponent` utility function ([#34929](https://github.com/WordPress/gutenberg/pull/34929)).
+-   Deleted the `useJumpStep` utility function ([#35561](https://github.com/WordPress/gutenberg/pull/35561)).
 
 ## 17.0.0 (2021-09-09)
 

package/CONTRIBUTING.md

@@ -59,6 +59,7 @@ When creating components that render a list of subcomponents, prefer to expose t
 	] }
 />
 ```
+
 ```jsx
 // ✅ Do:
 <List>
@@ -81,6 +82,7 @@ function List ( props ) {
 	);
 }
 ```
+
 ```jsx
 // ✅ Do:
 const ListContext = createContext();
@@ -275,14 +277,24 @@ import Button from '../';
 
 export default { title: 'Components/Button', component: Button };
 
-export const _default = () => <Button>Default Button</Button>;
-
-export const primary = () => <Button variant="primary">Primary Button</Button>;
-
-export const secondary = () => <Button variant="secondary">Secondary Button</Button>;
+const Template = ( args ) => <Button { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'Default Button',
+	isBusy: false,
+	isSmall: false,
+};
+
+export const Primary = Template.bind( {} );
+Primary.args = {
+	...Default.args,
+	text: 'Primary Button',
+	variant: 'primary',
+};
 ```
 
-A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code.
+A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
 
 The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.js)).
 
@@ -296,7 +308,7 @@ Each component that is exported from the `@wordpress/components` package should
 
 ## README example
 
-```md
+````markdown
 # `ComponentName`
 
 <!-- If component is experimental, add the following section: -->
@@ -306,7 +318,7 @@ This feature is still experimental. “Experimental” means this is an early im
 
 <!-- If component is deprecated, add the following section: -->
 <div class="callout callout-alert">
-This component is deprecated. Please use  `{other component}` from the `{other package}` package instead.
+This component is deprecated. Please use `{other component}` from the `{other package}` package instead.
 </div>
 
 Description of the component.
@@ -325,6 +337,7 @@ function Example() {
 		</ExampleComponent>
 	);
 }
+```
 
 ## Props
 
@@ -335,6 +348,8 @@ The component accepts the following props:
 Prop description. With a new line before and after the description and before and after type/required blocks.
 
 -   Required: Either `Yes` or `No`
+<!-- If the prop has a default value, add the following line: -->
+-   Default: [default value]
 
 ### Inherited props
 
@@ -344,14 +359,18 @@ Add this section when there are props that are drilled down into an internal com
 ## Context
 
 See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
-```
+````
 
 ## Folder structure
 
 As a result of the above guidelines, all new components (except for shared utilities) should _generally_ follow this folder structure:
 
-```
+```text
 component-name/
+├── stories
+│   └── index.js
+├── test
+│   └── index.js
 ├── component.tsx
 ├── context.ts
 ├── hook.ts
@@ -361,28 +380,28 @@ component-name/
 └── types.ts
 ```
 
-In case of a family of components (e.g. `Card` and `CardBody`, `CardFooter`, `CardHeader` ...), each component's implementation should live in a separate subfolder:
+In case of a family of components (e.g. `Card` and `CardBody`, `CardFooter`, `CardHeader` ...), each component's implementation should live in a separate subfolder, while code common to the whole family of components (e.g types, utils, context...) should live in the family of components root folder:
 
-```
+```text
 component-family-name/
 ├── sub-component-name/
 │   ├── index.ts
 │   ├── component.tsx
 │   ├── hook.ts
 │   ├── README.md
-│   ├── styles.ts
-│   └── types.ts
+│   └── styles.ts
 ├── sub-component-name/
 │   ├── index.ts
 │   ├── component.tsx
 │   ├── hook.ts
 │   ├── README.md
-│   ├── styles.ts
-│   └── types.ts
+│   └── styles.ts
 ├── stories
 │   └── index.js
 ├── test
 │   └── index.js
 ├── context.ts
-└── index.ts
+├── index.ts
+├── types.ts
+└── utils.ts
 ```

package/README.md

@@ -33,6 +33,11 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
 
+## Docs & examples
+
+You can browse the components docs and examples at https://wordpress.github.io/gutenberg/
+
 ## Contributing
 
 See [CONTRIBUTING.md](/packages/components/CONTRIBUTING.md) for the contributing guidelines for the `@wordpress/components` package.
+

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

@@ -28,11 +28,12 @@ var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-s
 /**
  * Internal dependencies
  */
-function Cell({
-  isActive = false,
-  value,
-  ...props
-}) {
+function Cell(_ref) {
+  let {
+    isActive = false,
+    value,
+    ...props
+  } = _ref;
   const tooltipText = _utils.ALIGNMENT_LABEL[value];
   return (0, _element.createElement)(_tooltip.default, {
     text: tooltipText

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/cell.js"],"names":["Cell","isActive","value","props","tooltipText","ALIGNMENT_LABEL","CellView"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAOe,SAASA,IAAT,CAAe;AAAEC,EAAAA,QAAQ,GAAG,KAAb;AAAoBC,EAAAA,KAApB;AAA2B,KAAGC;AAA9B,CAAf,EAAuD;AACrE,QAAMC,WAAW,GAAGC,uBAAiBH,KAAjB,CAApB;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,wBAAD;AAAe,IAAA,EAAE,EAAGE,kCAApB;AAA+B,IAAA,IAAI,EAAC;AAApC,KAAoDH,KAApD,GAIC,4BAAC,8BAAD,QAAkBD,KAAlB,CAJD,EAKC,4BAAC,mCAAD;AAAO,IAAA,QAAQ,EAAGD,QAAlB;AAA6B,IAAA,IAAI,EAAC;AAAlC,IALD,CADD,CADD;AAWA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\n\nexport default function Cell( { isActive = false, value, ...props } ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem as={ CellView } role=\"gridcell\" { ...props }>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/cell.js"],"names":["Cell","isActive","value","props","tooltipText","ALIGNMENT_LABEL","CellView"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAOe,SAASA,IAAT,OAAuD;AAAA,MAAxC;AAAEC,IAAAA,QAAQ,GAAG,KAAb;AAAoBC,IAAAA,KAApB;AAA2B,OAAGC;AAA9B,GAAwC;AACrE,QAAMC,WAAW,GAAGC,uBAAiBH,KAAjB,CAApB;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,wBAAD;AAAe,IAAA,EAAE,EAAGE,kCAApB;AAA+B,IAAA,IAAI,EAAC;AAApC,KAAoDH,KAApD,GAIC,4BAAC,8BAAD,QAAkBD,KAAlB,CAJD,EAKC,4BAAC,mCAAD;AAAO,IAAA,QAAQ,EAAGD,QAAlB;AAA6B,IAAA,IAAI,EAAC;AAAlC,IALD,CADD,CADD;AAWA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\n\nexport default function Cell( { isActive = false, value, ...props } ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem as={ CellView } role=\"gridcell\" { ...props }>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"]}

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

@@ -26,14 +26,15 @@ var _alignmentMatrixControlIconStyles = require("./styles/alignment-matrix-contr
  */
 const BASE_SIZE = 24;
 
-function AlignmentMatrixControlIcon({
-  className,
-  disablePointerEvents = true,
-  size = BASE_SIZE,
-  style = {},
-  value = 'center',
-  ...props
-}) {
+function AlignmentMatrixControlIcon(_ref) {
+  let {
+    className,
+    disablePointerEvents = true,
+    size = BASE_SIZE,
+    style = {},
+    value = 'center',
+    ...props
+  } = _ref;
   const alignIndex = (0, _utils.getAlignmentIndex)(value);
   const scale = (size / BASE_SIZE).toFixed(2);
   const classes = (0, _classnames.default)('component-alignment-matrix-control-icon', className);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/icon.js"],"names":["BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","ALIGNMENTS","map","align","index","isActive"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,SAAS,GAAG,EAAlB;;AAEe,SAASC,0BAAT,CAAqC;AACnDC,EAAAA,SADmD;AAEnDC,EAAAA,oBAAoB,GAAG,IAF4B;AAGnDC,EAAAA,IAAI,GAAGJ,SAH4C;AAInDK,EAAAA,KAAK,GAAG,EAJ2C;AAKnDC,EAAAA,KAAK,GAAG,QAL2C;AAMnD,KAAGC;AANgD,CAArC,EAOX;AACH,QAAMC,UAAU,GAAG,8BAAmBF,KAAnB,CAAnB;AACA,QAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAT,EAAqBU,OAArB,CAA8B,CAA9B,CAAd;AAEA,QAAMC,OAAO,GAAG,yBACf,yCADe,EAEfT,SAFe,CAAhB;AAKA,QAAMU,MAAM,GAAG,EACd,GAAGP,KADW;AAEdQ,IAAAA,SAAS,EAAG,SAASJ,KAAO;AAFd,GAAf;AAKA,SACC,4BAAC,sCAAD,6BACMF,KADN;AAEC,IAAA,SAAS,EAAGI,OAFb;AAGC,IAAA,oBAAoB,EAAGR,oBAHxB;AAIC,IAAA,IAAI,EAAC,cAJN;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,KAAK,EAAGQ;AANT,MAQGE,kBAAWC,GAAX,CAAgB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AACrC,UAAMC,QAAQ,GAAGV,UAAU,KAAKS,KAAhC;AAEA,WACC,4BAAC,sCAAD;AAAM,MAAA,GAAG,EAAGD;AAAZ,OACC,4BAAC,uCAAD;AAAO,MAAA,QAAQ,EAAGE;AAAlB,MADD,CADD;AAKA,GARC,CARH,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\n\nconst BASE_SIZE = 24;\n\nexport default function AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n} ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tsize={ size }\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"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/icon.js"],"names":["BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","ALIGNMENTS","map","align","index","isActive"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,SAAS,GAAG,EAAlB;;AAEe,SAASC,0BAAT,OAOX;AAAA,MAPgD;AACnDC,IAAAA,SADmD;AAEnDC,IAAAA,oBAAoB,GAAG,IAF4B;AAGnDC,IAAAA,IAAI,GAAGJ,SAH4C;AAInDK,IAAAA,KAAK,GAAG,EAJ2C;AAKnDC,IAAAA,KAAK,GAAG,QAL2C;AAMnD,OAAGC;AANgD,GAOhD;AACH,QAAMC,UAAU,GAAG,8BAAmBF,KAAnB,CAAnB;AACA,QAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAT,EAAqBU,OAArB,CAA8B,CAA9B,CAAd;AAEA,QAAMC,OAAO,GAAG,yBACf,yCADe,EAEfT,SAFe,CAAhB;AAKA,QAAMU,MAAM,GAAG,EACd,GAAGP,KADW;AAEdQ,IAAAA,SAAS,EAAG,SAASJ,KAAO;AAFd,GAAf;AAKA,SACC,4BAAC,sCAAD,6BACMF,KADN;AAEC,IAAA,SAAS,EAAGI,OAFb;AAGC,IAAA,oBAAoB,EAAGR,oBAHxB;AAIC,IAAA,IAAI,EAAC,cAJN;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,KAAK,EAAGQ;AANT,MAQGE,kBAAWC,GAAX,CAAgB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AACrC,UAAMC,QAAQ,GAAGV,UAAU,KAAKS,KAAhC;AAEA,WACC,4BAAC,sCAAD;AAAM,MAAA,GAAG,EAAGD;AAAZ,OACC,4BAAC,uCAAD;AAAO,MAAA,QAAQ,EAAGE;AAAlB,MADD,CADD;AAKA,GARC,CARH,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\n\nconst BASE_SIZE = 24;\n\nexport default function AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n} ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tsize={ size }\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"]}

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

@@ -45,16 +45,17 @@ function useBaseId(id) {
   return id || instanceId;
 }
 
-function AlignmentMatrixControl({
-  className,
-  id,
-  label = (0, _i18n.__)('Alignment Matrix Control'),
-  defaultValue = 'center center',
-  value,
-  onChange = _lodash.noop,
-  width = 92,
-  ...props
-}) {
+function AlignmentMatrixControl(_ref) {
+  let {
+    className,
+    id,
+    label = (0, _i18n.__)('Alignment Matrix Control'),
+    defaultValue = 'center center',
+    value,
+    onChange = _lodash.noop,
+    width = 92,
+    ...props
+  } = _ref;
   const [immutableDefaultValue] = (0, _element.useState)(value !== null && value !== void 0 ? value : defaultValue);
   const baseId = useBaseId(id);
   const initialCurrentId = (0, _utils.getItemId)(baseId, immutableDefaultValue);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","noop","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,SAAT,CAAoBC,EAApB,EAAyB;AACxB,QAAMC,UAAU,GAAG,4BAClBC,sBADkB,EAElB,0BAFkB,CAAnB;AAKA,SAAOF,EAAE,IAAIC,UAAb;AACA;;AAEc,SAASC,sBAAT,CAAiC;AAC/CC,EAAAA,SAD+C;AAE/CH,EAAAA,EAF+C;AAG/CI,EAAAA,KAAK,GAAG,cAAI,0BAAJ,CAHuC;AAI/CC,EAAAA,YAAY,GAAG,eAJgC;AAK/CC,EAAAA,KAL+C;AAM/CC,EAAAA,QAAQ,GAAGC,YANoC;AAO/CC,EAAAA,KAAK,GAAG,EAPuC;AAQ/C,KAAGC;AAR4C,CAAjC,EASX;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUL,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMO,MAAM,GAAGb,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMa,gBAAgB,GAAG,sBAAWD,MAAX,EAAmBD,qBAAnB,CAAzB;AAEA,QAAMG,SAAS,GAAG,kCAAmB;AACpCF,IAAAA,MADoC;AAEpCG,IAAAA,SAAS,EAAEF,gBAFyB;AAGpCG,IAAAA,GAAG,EAAE;AAH+B,GAAnB,CAAlB;;AAMA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AACvCX,IAAAA,QAAQ,CAAEW,SAAF,CAAR;AACA,GAFD;;AAIA,0BAAW,MAAM;AAChB,QAAK,OAAOZ,KAAP,KAAiB,WAAtB,EAAoC;AACnCQ,MAAAA,SAAS,CAACK,YAAV,CAAwB,sBAAWP,MAAX,EAAmBN,KAAnB,CAAxB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASQ,SAAS,CAACK,YAAnB,CAJH;AAMA,QAAMC,OAAO,GAAG,yBACf,oCADe,EAEfjB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMO,KADN,EAEMI,SAFN;AAGC,kBAAaV,KAHd;AAIC,IAAA,EAAE,EAAGiB,kCAJN;AAKC,IAAA,SAAS,EAAGD,OALb;AAMC,IAAA,IAAI,EAAC,MANN;AAOC,IAAA,KAAK,EAAGX;AAPT,MASGa,YAAKC,GAAL,CAAU,CAAEC,KAAF,EAASC,KAAT,KACX,4BAAC,yBAAD,6BACMX,SADN;AAEC,IAAA,EAAE,EAAGY,iCAFN;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,IAAA,GAAG,EAAGD;AAJP,MAMGD,KAAK,CAACD,GAAN,CAAaI,IAAF,IAAY;AACxB,UAAMC,MAAM,GAAG,sBAAWhB,MAAX,EAAmBe,IAAnB,CAAf;AACA,UAAME,QAAQ,GAAGf,SAAS,CAACC,SAAV,KAAwBa,MAAzC;AAEA,WACC,4BAAC,aAAD,6BACMd,SADN;AAEC,MAAA,EAAE,EAAGc,MAFN;AAGC,MAAA,QAAQ,EAAGC,QAHZ;AAIC,MAAA,GAAG,EAAGF,IAJP;AAKC,MAAA,KAAK,EAAGA,IALT;AAMC,MAAA,OAAO,EAAG,MAAMV,cAAc,CAAEU,IAAF,CAN/B;AAOC,MAAA,QAAQ,EAAGE,QAAQ,GAAG,CAAH,GAAO,CAAC;AAP5B,OADD;AAWA,GAfC,CANH,CADC,CATH,CADD;AAqCA;;AAED3B,sBAAsB,CAAC4B,IAAvB,GAA8BC,aAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\n\nfunction useBaseId( id ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\nexport default function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n} ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tcomposite.setCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, composite.setCurrentId ] );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\twidth={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = composite.currentId === cellId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","noop","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,SAAT,CAAoBC,EAApB,EAAyB;AACxB,QAAMC,UAAU,GAAG,4BAClBC,sBADkB,EAElB,0BAFkB,CAAnB;AAKA,SAAOF,EAAE,IAAIC,UAAb;AACA;;AAEc,SAASC,sBAAT,OASX;AAAA,MAT4C;AAC/CC,IAAAA,SAD+C;AAE/CH,IAAAA,EAF+C;AAG/CI,IAAAA,KAAK,GAAG,cAAI,0BAAJ,CAHuC;AAI/CC,IAAAA,YAAY,GAAG,eAJgC;AAK/CC,IAAAA,KAL+C;AAM/CC,IAAAA,QAAQ,GAAGC,YANoC;AAO/CC,IAAAA,KAAK,GAAG,EAPuC;AAQ/C,OAAGC;AAR4C,GAS5C;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUL,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMO,MAAM,GAAGb,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMa,gBAAgB,GAAG,sBAAWD,MAAX,EAAmBD,qBAAnB,CAAzB;AAEA,QAAMG,SAAS,GAAG,kCAAmB;AACpCF,IAAAA,MADoC;AAEpCG,IAAAA,SAAS,EAAEF,gBAFyB;AAGpCG,IAAAA,GAAG,EAAE;AAH+B,GAAnB,CAAlB;;AAMA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AACvCX,IAAAA,QAAQ,CAAEW,SAAF,CAAR;AACA,GAFD;;AAIA,0BAAW,MAAM;AAChB,QAAK,OAAOZ,KAAP,KAAiB,WAAtB,EAAoC;AACnCQ,MAAAA,SAAS,CAACK,YAAV,CAAwB,sBAAWP,MAAX,EAAmBN,KAAnB,CAAxB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASQ,SAAS,CAACK,YAAnB,CAJH;AAMA,QAAMC,OAAO,GAAG,yBACf,oCADe,EAEfjB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMO,KADN,EAEMI,SAFN;AAGC,kBAAaV,KAHd;AAIC,IAAA,EAAE,EAAGiB,kCAJN;AAKC,IAAA,SAAS,EAAGD,OALb;AAMC,IAAA,IAAI,EAAC,MANN;AAOC,IAAA,KAAK,EAAGX;AAPT,MASGa,YAAKC,GAAL,CAAU,CAAEC,KAAF,EAASC,KAAT,KACX,4BAAC,yBAAD,6BACMX,SADN;AAEC,IAAA,EAAE,EAAGY,iCAFN;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,IAAA,GAAG,EAAGD;AAJP,MAMGD,KAAK,CAACD,GAAN,CAAaI,IAAF,IAAY;AACxB,UAAMC,MAAM,GAAG,sBAAWhB,MAAX,EAAmBe,IAAnB,CAAf;AACA,UAAME,QAAQ,GAAGf,SAAS,CAACC,SAAV,KAAwBa,MAAzC;AAEA,WACC,4BAAC,aAAD,6BACMd,SADN;AAEC,MAAA,EAAE,EAAGc,MAFN;AAGC,MAAA,QAAQ,EAAGC,QAHZ;AAIC,MAAA,GAAG,EAAGF,IAJP;AAKC,MAAA,KAAK,EAAGA,IALT;AAMC,MAAA,OAAO,EAAG,MAAMV,cAAc,CAAEU,IAAF,CAN/B;AAOC,MAAA,QAAQ,EAAGE,QAAQ,GAAG,CAAH,GAAO,CAAC;AAP5B,OADD;AAWA,GAfC,CANH,CADC,CATH,CADD;AAqCA;;AAED3B,sBAAsB,CAAC4B,IAAvB,GAA8BC,aAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\n\nfunction useBaseId( id ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\nexport default function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n} ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tcomposite.setCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, composite.setCurrentId ] );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\twidth={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = composite.currentId === cellId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n"]}

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Cell = exports.Point = exports.Root = exports.Wrapper = void 0;
+exports.Wrapper = exports.Root = exports.Point = exports.Cell = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -26,9 +26,10 @@ const rootSize = () => {
   }, process.env.NODE_ENV === "production" ? "" : ";label:rootSize;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdHJvb3RCYXNlLFxuXHRwb2ludEJhc2UsXG5cdENlbGwgYXMgQ2VsbEJhc2UsXG59IGZyb20gJy4vYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcyc7XG5cbmNvbnN0IHJvb3RTaXplID0gKCkgPT4ge1xuXHRjb25zdCBwYWRkaW5nID0gMS41O1xuXHRjb25zdCBzaXplID0gMjQ7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgLSBwYWRkaW5nICogMiB9cHggLyAzKSlgLFxuXHRcdHBhZGRpbmcsXG5cdFx0bWF4SGVpZ2h0OiBzaXplLFxuXHRcdG1heFdpZHRoOiBzaXplLFxuXHR9ICk7XG59O1xuXG5jb25zdCByb290UG9pbnRlckV2ZW50cyA9ICggeyBkaXNhYmxlUG9pbnRlckV2ZW50cyB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0cG9pbnRlckV2ZW50czogZGlzYWJsZVBvaW50ZXJFdmVudHMgPyAnbm9uZScgOiBudWxsLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBhZGRpbmc6IDJweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdmBcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cblx0JHsgcm9vdEJhc2UgfTtcblx0JHsgcm9vdFNpemUgfTtcblx0JHsgcm9vdFBvaW50ZXJFdmVudHMgfTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7IGlzQWN0aXZlIH0gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDFweCBjdXJyZW50Q29sb3JgIDogbnVsbDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiBjdXJyZW50Q29sb3I7XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDJweDtcblx0d2lkdGg6IDJweDtcblx0JHsgcG9pbnRCYXNlIH07XG5cdCR7IHBvaW50QWN0aXZlIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VsbCA9IENlbGxCYXNlO1xuIl19 */");
 };
 
-const rootPointerEvents = ({
-  disablePointerEvents
-}) => {
+const rootPointerEvents = _ref => {
+  let {
+    disablePointerEvents
+  } = _ref;
   return /*#__PURE__*/(0, _react.css)({
     pointerEvents: disablePointerEvents ? 'none' : null
   }, process.env.NODE_ENV === "production" ? "" : ";label:rootPointerEvents;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdHJvb3RCYXNlLFxuXHRwb2ludEJhc2UsXG5cdENlbGwgYXMgQ2VsbEJhc2UsXG59IGZyb20gJy4vYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcyc7XG5cbmNvbnN0IHJvb3RTaXplID0gKCkgPT4ge1xuXHRjb25zdCBwYWRkaW5nID0gMS41O1xuXHRjb25zdCBzaXplID0gMjQ7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgLSBwYWRkaW5nICogMiB9cHggLyAzKSlgLFxuXHRcdHBhZGRpbmcsXG5cdFx0bWF4SGVpZ2h0OiBzaXplLFxuXHRcdG1heFdpZHRoOiBzaXplLFxuXHR9ICk7XG59O1xuXG5jb25zdCByb290UG9pbnRlckV2ZW50cyA9ICggeyBkaXNhYmxlUG9pbnRlckV2ZW50cyB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0cG9pbnRlckV2ZW50czogZGlzYWJsZVBvaW50ZXJFdmVudHMgPyAnbm9uZScgOiBudWxsLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBhZGRpbmc6IDJweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdmBcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cblx0JHsgcm9vdEJhc2UgfTtcblx0JHsgcm9vdFNpemUgfTtcblx0JHsgcm9vdFBvaW50ZXJFdmVudHMgfTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7IGlzQWN0aXZlIH0gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDFweCBjdXJyZW50Q29sb3JgIDogbnVsbDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiBjdXJyZW50Q29sb3I7XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDJweDtcblx0d2lkdGg6IDJweDtcblx0JHsgcG9pbnRCYXNlIH07XG5cdCR7IHBvaW50QWN0aXZlIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VsbCA9IENlbGxCYXNlO1xuIl19 */");
@@ -57,9 +58,10 @@ const Root = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
 })("transform-origin:top left;height:100%;width:100%;", _alignmentMatrixControlStyles.rootBase, ";", rootSize, ";", rootPointerEvents, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0M4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLWljb24tc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRyb290QmFzZSxcblx0cG9pbnRCYXNlLFxuXHRDZWxsIGFzIENlbGxCYXNlLFxufSBmcm9tICcuL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC1zdHlsZXMnO1xuXG5jb25zdCByb290U2l6ZSA9ICgpID0+IHtcblx0Y29uc3QgcGFkZGluZyA9IDEuNTtcblx0Y29uc3Qgc2l6ZSA9IDI0O1xuXG5cdHJldHVybiBjc3MoIHtcblx0XHRncmlkVGVtcGxhdGVSb3dzOiBgcmVwZWF0KCAzLCBjYWxjKCAkeyBzaXplIC0gcGFkZGluZyAqIDIgfXB4IC8gMykpYCxcblx0XHRwYWRkaW5nLFxuXHRcdG1heEhlaWdodDogc2l6ZSxcblx0XHRtYXhXaWR0aDogc2l6ZSxcblx0fSApO1xufTtcblxuY29uc3Qgcm9vdFBvaW50ZXJFdmVudHMgPSAoIHsgZGlzYWJsZVBvaW50ZXJFdmVudHMgfSApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdHBvaW50ZXJFdmVudHM6IGRpc2FibGVQb2ludGVyRXZlbnRzID8gJ25vbmUnIDogbnVsbCxcblx0fSApO1xufTtcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwYWRkaW5nOiAycHg7XG5gO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdHRyYW5zZm9ybS1vcmlnaW46IHRvcCBsZWZ0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXG5cdCR7IHJvb3RCYXNlIH07XG5cdCR7IHJvb3RTaXplIH07XG5cdCR7IHJvb3RQb2ludGVyRXZlbnRzIH07XG5gO1xuXG5jb25zdCBwb2ludEFjdGl2ZSA9ICggeyBpc0FjdGl2ZSB9ICkgPT4ge1xuXHRjb25zdCBib3hTaGFkb3cgPSBpc0FjdGl2ZSA/IGAwIDAgMCAxcHggY3VycmVudENvbG9yYCA6IG51bGw7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3gtc2hhZG93OiAkeyBib3hTaGFkb3cgfTtcblx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXG5cdFx0Kjpob3ZlciA+ICYge1xuXHRcdFx0Y29sb3I6IGN1cnJlbnRDb2xvcjtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0aGVpZ2h0OiAycHg7XG5cdHdpZHRoOiAycHg7XG5cdCR7IHBvaW50QmFzZSB9O1xuXHQkeyBwb2ludEFjdGl2ZSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENlbGwgPSBDZWxsQmFzZTtcbiJdfQ== */"));
 exports.Root = Root;
 
-const pointActive = ({
-  isActive
-}) => {
+const pointActive = _ref2 => {
+  let {
+    isActive
+  } = _ref2;
   const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
   return /*#__PURE__*/(0, _react.css)("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + (process.env.NODE_ENV === "production" ? "" : ";label:pointActive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURXIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtaWNvbi1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdHJvb3RCYXNlLFxuXHRwb2ludEJhc2UsXG5cdENlbGwgYXMgQ2VsbEJhc2UsXG59IGZyb20gJy4vYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcyc7XG5cbmNvbnN0IHJvb3RTaXplID0gKCkgPT4ge1xuXHRjb25zdCBwYWRkaW5nID0gMS41O1xuXHRjb25zdCBzaXplID0gMjQ7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgLSBwYWRkaW5nICogMiB9cHggLyAzKSlgLFxuXHRcdHBhZGRpbmcsXG5cdFx0bWF4SGVpZ2h0OiBzaXplLFxuXHRcdG1heFdpZHRoOiBzaXplLFxuXHR9ICk7XG59O1xuXG5jb25zdCByb290UG9pbnRlckV2ZW50cyA9ICggeyBkaXNhYmxlUG9pbnRlckV2ZW50cyB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0cG9pbnRlckV2ZW50czogZGlzYWJsZVBvaW50ZXJFdmVudHMgPyAnbm9uZScgOiBudWxsLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBhZGRpbmc6IDJweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLmRpdmBcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cblx0JHsgcm9vdEJhc2UgfTtcblx0JHsgcm9vdFNpemUgfTtcblx0JHsgcm9vdFBvaW50ZXJFdmVudHMgfTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7IGlzQWN0aXZlIH0gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDFweCBjdXJyZW50Q29sb3JgIDogbnVsbDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJveC1zaGFkb3c6ICR7IGJveFNoYWRvdyB9O1xuXHRcdGNvbG9yOiBjdXJyZW50Q29sb3I7XG5cblx0XHQqOmhvdmVyID4gJiB7XG5cdFx0XHRjb2xvcjogY3VycmVudENvbG9yO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRoZWlnaHQ6IDJweDtcblx0d2lkdGg6IDJweDtcblx0JHsgcG9pbnRCYXNlIH07XG5cdCR7IHBvaW50QWN0aXZlIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VsbCA9IENlbGxCYXNlO1xuIl19 */");
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js"],"names":["rootSize","padding","size","gridTemplateRows","maxHeight","maxWidth","rootPointerEvents","disablePointerEvents","pointerEvents","Wrapper","Root","rootBase","pointActive","isActive","boxShadow","css","Point","pointBase","Cell","CellBase"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;AAMA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAMC,OAAO,GAAG,GAAhB;AACA,QAAMC,IAAI,GAAG,EAAb;AAEA,sBAAO,gBAAK;AACXC,IAAAA,gBAAgB,EAAG,oBAAoBD,IAAI,GAAGD,OAAO,GAAG,CAAG,UADhD;AAEXA,IAAAA,OAFW;AAGXG,IAAAA,SAAS,EAAEF,IAHA;AAIXG,IAAAA,QAAQ,EAAEH;AAJC,GAAL,0uEAAP;AAMA,CAVD;;AAYA,MAAMI,iBAAiB,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAgC;AACzD,sBAAO,gBAAK;AACXC,IAAAA,aAAa,EAAED,oBAAoB,GAAG,MAAH,GAAY;AADpC,GAAL,mvEAAP;AAGA,CAJD;;AAMO,MAAME,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAKA,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wDAKbC,sCALa,OAMbX,QANa,OAObM,iBAPa,qrEAAV;;;AAUP,MAAMM,WAAW,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAoB;AACvC,QAAMC,SAAS,GAAGD,QAAQ,GAAI,wBAAJ,GAA8B,IAAxD;AAEA,0BAAOE,UAAP,iBACgBD,SADhB;AAQA,CAXD;;AAaO,MAAME,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4BAGdC,uCAHc,OAIdL,WAJc,qrEAAX;;AAOA,MAAMM,IAAI,GAAGC,kCAAb","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\trootBase,\n\tpointBase,\n\tCell as CellBase,\n} from './alignment-matrix-control-styles';\n\nconst rootSize = () => {\n\tconst padding = 1.5;\n\tconst size = 24;\n\n\treturn css( {\n\t\tgridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`,\n\t\tpadding,\n\t\tmaxHeight: size,\n\t\tmaxWidth: size,\n\t} );\n};\n\nconst rootPointerEvents = ( { disablePointerEvents } ) => {\n\treturn css( {\n\t\tpointerEvents: disablePointerEvents ? 'none' : null,\n\t} );\n};\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tpadding: 2px;\n`;\n\nexport const Root = styled.div`\n\ttransform-origin: top left;\n\theight: 100%;\n\twidth: 100%;\n\n\t${ rootBase };\n\t${ rootSize };\n\t${ rootPointerEvents };\n`;\n\nconst pointActive = ( { isActive } ) => {\n\tconst boxShadow = isActive ? `0 0 0 1px currentColor` : null;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: currentColor;\n\n\t\t*:hover > & {\n\t\t\tcolor: currentColor;\n\t\t}\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 2px;\n\twidth: 2px;\n\t${ pointBase };\n\t${ pointActive };\n`;\n\nexport const Cell = CellBase;\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js"],"names":["rootSize","padding","size","gridTemplateRows","maxHeight","maxWidth","rootPointerEvents","disablePointerEvents","pointerEvents","Wrapper","Root","rootBase","pointActive","isActive","boxShadow","css","Point","pointBase","Cell","CellBase"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;AAMA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAMC,OAAO,GAAG,GAAhB;AACA,QAAMC,IAAI,GAAG,EAAb;AAEA,sBAAO,gBAAK;AACXC,IAAAA,gBAAgB,EAAG,oBAAoBD,IAAI,GAAGD,OAAO,GAAG,CAAG,UADhD;AAEXA,IAAAA,OAFW;AAGXG,IAAAA,SAAS,EAAEF,IAHA;AAIXG,IAAAA,QAAQ,EAAEH;AAJC,GAAL,0uEAAP;AAMA,CAVD;;AAYA,MAAMI,iBAAiB,GAAG,QAAgC;AAAA,MAA9B;AAAEC,IAAAA;AAAF,GAA8B;AACzD,sBAAO,gBAAK;AACXC,IAAAA,aAAa,EAAED,oBAAoB,GAAG,MAAH,GAAY;AADpC,GAAL,mvEAAP;AAGA,CAJD;;AAMO,MAAME,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAKA,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wDAKbC,sCALa,OAMbX,QANa,OAObM,iBAPa,qrEAAV;;;AAUP,MAAMM,WAAW,GAAG,SAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AACvC,QAAMC,SAAS,GAAGD,QAAQ,GAAI,wBAAJ,GAA8B,IAAxD;AAEA,0BAAOE,UAAP,iBACgBD,SADhB;AAQA,CAXD;;AAaO,MAAME,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4BAGdC,uCAHc,OAIdL,WAJc,qrEAAX;;AAOA,MAAMM,IAAI,GAAGC,kCAAb","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\trootBase,\n\tpointBase,\n\tCell as CellBase,\n} from './alignment-matrix-control-styles';\n\nconst rootSize = () => {\n\tconst padding = 1.5;\n\tconst size = 24;\n\n\treturn css( {\n\t\tgridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`,\n\t\tpadding,\n\t\tmaxHeight: size,\n\t\tmaxWidth: size,\n\t} );\n};\n\nconst rootPointerEvents = ( { disablePointerEvents } ) => {\n\treturn css( {\n\t\tpointerEvents: disablePointerEvents ? 'none' : null,\n\t} );\n};\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tpadding: 2px;\n`;\n\nexport const Root = styled.div`\n\ttransform-origin: top left;\n\theight: 100%;\n\twidth: 100%;\n\n\t${ rootBase };\n\t${ rootSize };\n\t${ rootPointerEvents };\n`;\n\nconst pointActive = ( { isActive } ) => {\n\tconst boxShadow = isActive ? `0 0 0 1px currentColor` : null;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: currentColor;\n\n\t\t*:hover > & {\n\t\t\tcolor: currentColor;\n\t\t}\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 2px;\n\twidth: 2px;\n\t${ pointBase };\n\t${ pointActive };\n`;\n\nexport const Cell = CellBase;\n"]}

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Cell = exports.Point = exports.pointBase = exports.Row = exports.Root = exports.rootBase = void 0;
+exports.rootBase = exports.pointBase = exports.Row = exports.Root = exports.Point = exports.Cell = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -31,9 +31,10 @@ const rootBase = () => {
 
 exports.rootBase = rootBase;
 
-const rootSize = ({
-  size = 92
-}) => {
+const rootSize = _ref2 => {
+  let {
+    size = 92
+  } = _ref2;
   return /*#__PURE__*/(0, _react.css)("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:rootSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wtc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FsaWdubWVudC1tYXRyaXgtY29udHJvbC9zdHlsZXMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCByb290QmFzZSA9ICgpID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRkaXNwbGF5OiBncmlkO1xuXHRcdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0XHRvdXRsaW5lOiBub25lO1xuXHRgO1xufTtcblxuY29uc3Qgcm9vdFNpemUgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIGNhbGMoICR7IHNpemUgfXB4IC8gMyApICk7XG5cdFx0d2lkdGg6ICR7IHNpemUgfXB4O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHQkeyByb290QmFzZSB9O1xuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0bztcblxuXHQkeyByb290U2l6ZSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJvdyA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbmNvbnN0IHBvaW50QWN0aXZlID0gKCB7IGlzQWN0aXZlIH0gKSA9PiB7XG5cdGNvbnN0IGJveFNoYWRvdyA9IGlzQWN0aXZlID8gYDAgMCAwIDJweCAkeyBDT0xPUlMuYmxhY2sgfWAgOiBudWxsO1xuXHRjb25zdCBwb2ludENvbG9yID0gaXNBY3RpdmUgPyBDT0xPUlMuYmxhY2sgOiBDT0xPUlMubGlnaHRHcmF5WyA4MDAgXTtcblx0Y29uc3QgcG9pbnRDb2xvckhvdmVyID0gaXNBY3RpdmUgPyBDT0xPUlMuYmxhY2sgOiBDT0xPUlMuYmx1ZS5tZWRpdW0uZm9jdXM7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3gtc2hhZG93OiAkeyBib3hTaGFkb3cgfTtcblx0XHRjb2xvcjogJHsgcG9pbnRDb2xvciB9O1xuXG5cdFx0Kjpob3ZlciA+ICYge1xuXHRcdFx0Y29sb3I6ICR7IHBvaW50Q29sb3JIb3ZlciB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBwb2ludEJhc2UgPSAoIHByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGJhY2tncm91bmQ6IGN1cnJlbnRDb2xvcjtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGRpc3BsYXk6IGdyaWQ7XG5cdFx0bWFyZ2luOiBhdXRvO1xuXHRcdHRyYW5zaXRpb246IGFsbCAxMjBtcyBsaW5lYXI7XG5cblx0XHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0XHQkeyBwb2ludEFjdGl2ZSggcHJvcHMgKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0aGVpZ2h0OiA2cHg7XG5cdHdpZHRoOiA2cHg7XG5cdCR7IHBvaW50QmFzZSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VsbCA9IHN0eWxlZC5zcGFuYFxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0ZGlzcGxheTogZmxleDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRvdXRsaW5lOiBub25lO1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZzogMDtcbmA7XG4iXX0= */");
 };
 
@@ -60,9 +61,10 @@ const Row = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
 });
 exports.Row = Row;
 
-const pointActive = ({
-  isActive
-}) => {
+const pointActive = _ref3 => {
+  let {
+    isActive
+  } = _ref3;
   const boxShadow = isActive ? `0 0 0 2px ${_utils.COLORS.black}` : null;
   const pointColor = isActive ? _utils.COLORS.black : _utils.COLORS.lightGray[800];
   const pointColorHover = isActive ? _utils.COLORS.black : _utils.COLORS.blue.medium.focus;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js"],"names":["rootBase","rootSize","size","css","Root","Row","pointActive","isActive","boxShadow","COLORS","black","pointColor","lightGray","pointColorHover","blue","medium","focus","pointBase","props","Point","Cell"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;;;;;;;;;;;AAEO,MAAMA,QAAQ,GAAG,MAAM;AAC7B;AAOA,CARM;;;;AAUP,MAAMC,QAAQ,GAAG,CAAE;AAAEC,EAAAA,IAAI,GAAG;AAAT,CAAF,KAAqB;AACrC,0BAAOC,UAAP,0CACyCD,IADzC,uBAEWA,IAFX;AAIA,CALD;;AAOO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GACbJ,QADa,8EAObC,QAPa,y7FAAV;;AAUA,MAAMI,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAT;;;AAMP,MAAMC,WAAW,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAoB;AACvC,QAAMC,SAAS,GAAGD,QAAQ,GAAI,aAAaE,cAAOC,KAAO,EAA/B,GAAmC,IAA7D;AACA,QAAMC,UAAU,GAAGJ,QAAQ,GAAGE,cAAOC,KAAV,GAAkBD,cAAOG,SAAP,CAAkB,GAAlB,CAA7C;AACA,QAAMC,eAAe,GAAGN,QAAQ,GAAGE,cAAOC,KAAV,GAAkBD,cAAOK,IAAP,CAAYC,MAAZ,CAAmBC,KAArE;AAEA,0BAAOb,UAAP,iBACgBK,SADhB,aAEWG,UAFX,uBAKYE,eALZ;AAQA,CAbD;;AAeO,MAAMI,SAAS,GAAKC,KAAF,IAAa;AACrC,0BAAOf,UAAP,yGAOI,yBAAc,YAAd,CAPJ,OAQIG,WAAW,CAAEY,KAAF,CARf;AAUA,CAXM;;;AAaA,MAAMC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4BAGdF,SAHc,y7FAAX;;AAMA,MAAMG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, reduceMotion } from '../../utils';\n\nexport const rootBase = () => {\n\treturn css`\n\t\tborder-radius: 2px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat( 3, 1fr );\n\t\toutline: none;\n\t`;\n};\n\nconst rootSize = ( { size = 92 } ) => {\n\treturn css`\n\t\tgrid-template-rows: repeat( 3, calc( ${ size }px / 3 ) );\n\t\twidth: ${ size }px;\n\t`;\n};\n\nexport const Root = styled.div`\n\t${ rootBase };\n\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n\tgrid-template-columns: auto;\n\n\t${ rootSize };\n`;\n\nexport const Row = styled.div`\n\tbox-sizing: border-box;\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n`;\n\nconst pointActive = ( { isActive } ) => {\n\tconst boxShadow = isActive ? `0 0 0 2px ${ COLORS.black }` : null;\n\tconst pointColor = isActive ? COLORS.black : COLORS.lightGray[ 800 ];\n\tconst pointColorHover = isActive ? COLORS.black : COLORS.blue.medium.focus;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: ${ pointColor };\n\n\t\t*:hover > & {\n\t\t\tcolor: ${ pointColorHover };\n\t\t}\n\t`;\n};\n\nexport const pointBase = ( props ) => {\n\treturn css`\n\t\tbackground: currentColor;\n\t\tbox-sizing: border-box;\n\t\tdisplay: grid;\n\t\tmargin: auto;\n\t\ttransition: all 120ms linear;\n\n\t\t${ reduceMotion( 'transition' ) }\n\t\t${ pointActive( props ) }\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 6px;\n\twidth: 6px;\n\t${ pointBase }\n`;\n\nexport const Cell = styled.span`\n\tappearance: none;\n\tborder: none;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tdisplay: flex;\n\tposition: relative;\n\toutline: none;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js"],"names":["rootBase","rootSize","size","css","Root","Row","pointActive","isActive","boxShadow","COLORS","black","pointColor","lightGray","pointColorHover","blue","medium","focus","pointBase","props","Point","Cell"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;;;;;;;;;;;AAEO,MAAMA,QAAQ,GAAG,MAAM;AAC7B;AAOA,CARM;;;;AAUP,MAAMC,QAAQ,GAAG,SAAqB;AAAA,MAAnB;AAAEC,IAAAA,IAAI,GAAG;AAAT,GAAmB;AACrC,0BAAOC,UAAP,0CACyCD,IADzC,uBAEWA,IAFX;AAIA,CALD;;AAOO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GACbJ,QADa,8EAObC,QAPa,y7FAAV;;AAUA,MAAMI,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAT;;;AAMP,MAAMC,WAAW,GAAG,SAAoB;AAAA,MAAlB;AAAEC,IAAAA;AAAF,GAAkB;AACvC,QAAMC,SAAS,GAAGD,QAAQ,GAAI,aAAaE,cAAOC,KAAO,EAA/B,GAAmC,IAA7D;AACA,QAAMC,UAAU,GAAGJ,QAAQ,GAAGE,cAAOC,KAAV,GAAkBD,cAAOG,SAAP,CAAkB,GAAlB,CAA7C;AACA,QAAMC,eAAe,GAAGN,QAAQ,GAAGE,cAAOC,KAAV,GAAkBD,cAAOK,IAAP,CAAYC,MAAZ,CAAmBC,KAArE;AAEA,0BAAOb,UAAP,iBACgBK,SADhB,aAEWG,UAFX,uBAKYE,eALZ;AAQA,CAbD;;AAeO,MAAMI,SAAS,GAAKC,KAAF,IAAa;AACrC,0BAAOf,UAAP,yGAOI,yBAAc,YAAd,CAPJ,OAQIG,WAAW,CAAEY,KAAF,CARf;AAUA,CAXM;;;AAaA,MAAMC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4BAGdF,SAHc,y7FAAX;;AAMA,MAAMG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, reduceMotion } from '../../utils';\n\nexport const rootBase = () => {\n\treturn css`\n\t\tborder-radius: 2px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat( 3, 1fr );\n\t\toutline: none;\n\t`;\n};\n\nconst rootSize = ( { size = 92 } ) => {\n\treturn css`\n\t\tgrid-template-rows: repeat( 3, calc( ${ size }px / 3 ) );\n\t\twidth: ${ size }px;\n\t`;\n};\n\nexport const Root = styled.div`\n\t${ rootBase };\n\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n\tgrid-template-columns: auto;\n\n\t${ rootSize };\n`;\n\nexport const Row = styled.div`\n\tbox-sizing: border-box;\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n`;\n\nconst pointActive = ( { isActive } ) => {\n\tconst boxShadow = isActive ? `0 0 0 2px ${ COLORS.black }` : null;\n\tconst pointColor = isActive ? COLORS.black : COLORS.lightGray[ 800 ];\n\tconst pointColorHover = isActive ? COLORS.black : COLORS.blue.medium.focus;\n\n\treturn css`\n\t\tbox-shadow: ${ boxShadow };\n\t\tcolor: ${ pointColor };\n\n\t\t*:hover > & {\n\t\t\tcolor: ${ pointColorHover };\n\t\t}\n\t`;\n};\n\nexport const pointBase = ( props ) => {\n\treturn css`\n\t\tbackground: currentColor;\n\t\tbox-sizing: border-box;\n\t\tdisplay: grid;\n\t\tmargin: auto;\n\t\ttransition: all 120ms linear;\n\n\t\t${ reduceMotion( 'transition' ) }\n\t\t${ pointActive( props ) }\n\t`;\n};\n\nexport const Point = styled.span`\n\theight: 6px;\n\twidth: 6px;\n\t${ pointBase }\n`;\n\nexport const Cell = styled.span`\n\tappearance: none;\n\tborder: none;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tdisplay: flex;\n\tposition: relative;\n\toutline: none;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n`;\n"]}

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformValue = transformValue;
-exports.getItemId = getItemId;
+exports.GRID = exports.ALIGNMENT_LABEL = exports.ALIGNMENTS = void 0;
 exports.getAlignmentIndex = getAlignmentIndex;
-exports.ALIGNMENTS = exports.ALIGNMENT_LABEL = exports.GRID = void 0;
+exports.getItemId = getItemId;
+exports.transformValue = transformValue;
 
 var _lodash = require("lodash");
 
@@ -73,7 +73,8 @@ function getItemId(prefixId, value) {
  */
 
 
-function getAlignmentIndex(alignment = 'center') {
+function getAlignmentIndex() {
+  let alignment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'center';
   const item = transformValue(alignment).replace('-', ' ');
   const index = ALIGNMENTS.indexOf(item);
   return index > -1 ? index : undefined;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/utils.js"],"names":["GRID","ALIGNMENT_LABEL","ALIGNMENTS","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,IAAI,GAAG,CACnB,CAAE,UAAF,EAAc,YAAd,EAA4B,WAA5B,CADmB,EAEnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAFmB,EAGnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAHmB,CAAb,C,CAMP;;;AACO,MAAMC,eAAe,GAAG;AAC9B,cAAY,cAAI,UAAJ,CADkB;AAE9B,gBAAc,cAAI,YAAJ,CAFgB;AAG9B,eAAa,cAAI,WAAJ,CAHiB;AAI9B,iBAAe,cAAI,aAAJ,CAJe;AAK9B,mBAAiB,cAAI,eAAJ,CALa;AAM9B,kBAAgB,cAAI,cAAJ,CANc;AAO9B,iBAAe,cAAI,aAAJ,CAPe;AAQ9B,mBAAiB,cAAI,eAAJ,CARa;AAS9B,kBAAgB,cAAI,cAAJ;AATc,CAAxB,C,CAYP;;;AACO,MAAMC,UAAU,GAAG,yBAAaF,IAAb,CAAnB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACO,SAASG,cAAT,CAAyBC,KAAzB,EAAiC;AACvC,QAAMC,SAAS,GAAGD,KAAK,KAAK,QAAV,GAAqB,eAArB,GAAuCA,KAAzD;AAEA,SAAOC,SAAS,CAACC,OAAV,CAAmB,GAAnB,EAAwB,GAAxB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,SAAT,CAAoBC,QAApB,EAA8BJ,KAA9B,EAAsC;AAC5C,QAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAF,CAAd,CAAwBE,OAAxB,CAAiC,GAAjC,EAAsC,GAAtC,CAAhB;AAEA,SAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAlC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,iBAAT,CAA4BC,SAAS,GAAG,QAAxC,EAAmD;AACzD,QAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAF,CAAd,CAA4BL,OAA5B,CAAqC,GAArC,EAA0C,GAA1C,CAAb;AACA,QAAMO,KAAK,GAAGX,UAAU,CAACY,OAAX,CAAoBF,IAApB,CAAd;AAEA,SAAOC,KAAK,GAAG,CAAC,CAAT,GAAaA,KAAb,GAAqBE,SAA5B;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { flattenDeep } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const GRID = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values\nexport const ALIGNMENTS = flattenDeep( GRID );\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param {string} value An alignment value to parse.\n *\n * @return {string} The parsed value.\n */\nexport function transformValue( value ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' );\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param {string} prefixId An ID to prefix.\n * @param {string} value    An alignment value.\n *\n * @return {string} The item id.\n */\nexport function getItemId( prefixId, value ) {\n\tconst valueId = transformValue( value ).replace( ' ', '-' );\n\n\treturn `${ prefixId }-${ valueId }`;\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param {string} alignment Value to check.\n *\n * @return {number} The index of a matching alignment.\n */\nexport function getAlignmentIndex( alignment = 'center' ) {\n\tconst item = transformValue( alignment ).replace( '-', ' ' );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/utils.js"],"names":["GRID","ALIGNMENT_LABEL","ALIGNMENTS","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,IAAI,GAAG,CACnB,CAAE,UAAF,EAAc,YAAd,EAA4B,WAA5B,CADmB,EAEnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAFmB,EAGnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAHmB,CAAb,C,CAMP;;;AACO,MAAMC,eAAe,GAAG;AAC9B,cAAY,cAAI,UAAJ,CADkB;AAE9B,gBAAc,cAAI,YAAJ,CAFgB;AAG9B,eAAa,cAAI,WAAJ,CAHiB;AAI9B,iBAAe,cAAI,aAAJ,CAJe;AAK9B,mBAAiB,cAAI,eAAJ,CALa;AAM9B,kBAAgB,cAAI,cAAJ,CANc;AAO9B,iBAAe,cAAI,aAAJ,CAPe;AAQ9B,mBAAiB,cAAI,eAAJ,CARa;AAS9B,kBAAgB,cAAI,cAAJ;AATc,CAAxB,C,CAYP;;;AACO,MAAMC,UAAU,GAAG,yBAAaF,IAAb,CAAnB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACO,SAASG,cAAT,CAAyBC,KAAzB,EAAiC;AACvC,QAAMC,SAAS,GAAGD,KAAK,KAAK,QAAV,GAAqB,eAArB,GAAuCA,KAAzD;AAEA,SAAOC,SAAS,CAACC,OAAV,CAAmB,GAAnB,EAAwB,GAAxB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,SAAT,CAAoBC,QAApB,EAA8BJ,KAA9B,EAAsC;AAC5C,QAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAF,CAAd,CAAwBE,OAAxB,CAAiC,GAAjC,EAAsC,GAAtC,CAAhB;AAEA,SAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAlC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,iBAAT,GAAmD;AAAA,MAAvBC,SAAuB,uEAAX,QAAW;AACzD,QAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAF,CAAd,CAA4BL,OAA5B,CAAqC,GAArC,EAA0C,GAA1C,CAAb;AACA,QAAMO,KAAK,GAAGX,UAAU,CAACY,OAAX,CAAoBF,IAApB,CAAd;AAEA,SAAOC,KAAK,GAAG,CAAC,CAAT,GAAaA,KAAb,GAAqBE,SAA5B;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { flattenDeep } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const GRID = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values\nexport const ALIGNMENTS = flattenDeep( GRID );\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param {string} value An alignment value to parse.\n *\n * @return {string} The parsed value.\n */\nexport function transformValue( value ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' );\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param {string} prefixId An ID to prefix.\n * @param {string} value    An alignment value.\n *\n * @return {string} The item id.\n */\nexport function getItemId( prefixId, value ) {\n\tconst valueId = transformValue( value ).replace( ' ', '-' );\n\n\treturn `${ prefixId }-${ valueId }`;\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param {string} alignment Value to check.\n *\n * @return {number} The index of a matching alignment.\n */\nexport function getAlignmentIndex( alignment = 'center' ) {\n\tconst item = transformValue( alignment ).replace( '-', ' ' );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"]}

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

@@ -22,11 +22,12 @@ var _anglePickerControlStyles = require("./styles/angle-picker-control-styles");
 /**
  * Internal dependencies
  */
-function AngleCircle({
-  value,
-  onChange,
-  ...props
-}) {
+function AngleCircle(_ref) {
+  let {
+    value,
+    onChange,
+    ...props
+  } = _ref;
   const angleCircleRef = (0, _element.useRef)();
   const angleCircleCenter = (0, _element.useRef)();
   const previousCursorValue = (0, _element.useRef)();

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","ownerDocument","preventDefault","activeElement","blur","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","undefined","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":"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","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\nfunction AngleCircle( { value, onChange, ...props } ) {\n\tconst angleCircleRef = useRef();\n\tconst angleCircleCenter = useRef();\n\tconst previousCursorValue = useRef();\n\n\tconst setAngleCircleCenter = () => {\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 ) => {\n\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\tconst { ownerDocument } = angleCircleRef.current;\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// Ensure the input isn't focused as preventDefault would leave it\n\t\townerDocument.activeElement.blur();\n\t\tonChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );\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 || null;\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t/* eslint-disable jsx-a11y/no-static-element-interactions */\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\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\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>\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\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n\t);\n}\n\nfunction getAngle( centerX, centerY, pointX, pointY ) {\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"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","ownerDocument","preventDefault","activeElement","blur","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","undefined","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":"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","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\nfunction AngleCircle( { value, onChange, ...props } ) {\n\tconst angleCircleRef = useRef();\n\tconst angleCircleCenter = useRef();\n\tconst previousCursorValue = useRef();\n\n\tconst setAngleCircleCenter = () => {\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 ) => {\n\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\tconst { ownerDocument } = angleCircleRef.current;\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// Ensure the input isn't focused as preventDefault would leave it\n\t\townerDocument.activeElement.blur();\n\t\tonChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );\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 || null;\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t/* eslint-disable jsx-a11y/no-static-element-interactions */\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\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\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>\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\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n\t);\n}\n\nfunction getAngle( centerX, centerY, pointX, pointY ) {\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"]}

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

@@ -38,12 +38,14 @@ var _spacer = require("../spacer");
 /**
  * Internal dependencies
  */
-function AnglePickerControl({
-  className,
-  label = (0, _i18n.__)('Angle'),
-  onChange,
-  value
-}) {
+function AnglePickerControl(_ref) {
+  let {
+    className,
+    label = (0, _i18n.__)('Angle'),
+    onChange,
+    value
+  } = _ref;
+
   const handleOnNumberChange = unprocessedValue => {
     const inputValue = unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
     onChange(inputValue);
@@ -64,7 +66,9 @@ function AnglePickerControl({
     suffix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
       marginRight: (0, _space.space)(3),
-      color: "blue"
+      style: {
+        color: 'var( --wp-admin-theme-color )'
+      }
     }, "\xB0")
   })), (0, _element.createElement)(_flex.FlexItem, {
     style: {