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

package/build/form-token-field/token.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Token;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
@@ -53,22 +53,23 @@ function Token({
   const transformedValue = displayTransform(value);
   const termPositionAndCount = (0, _i18n.sprintf)( /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
   (0, _i18n.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount);
-  return (0, _element.createElement)("span", {
+  return (0, _react.createElement)("span", {
     className: tokenClasses,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     title: title
-  }, (0, _element.createElement)("span", {
+  }, (0, _react.createElement)("span", {
     className: "components-form-token-field__token-text",
     id: `components-form-token-field__token-text-${instanceId}`
-  }, (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+  }, (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
     as: "span"
-  }, termPositionAndCount), (0, _element.createElement)("span", {
+  }, termPositionAndCount), (0, _react.createElement)("span", {
     "aria-hidden": "true"
-  }, transformedValue)), (0, _element.createElement)(_button.default, {
+  }, transformedValue)), (0, _react.createElement)(_button.default, {
     className: "components-form-token-field__remove-token",
     icon: _icons.closeSmall,
     onClick: !disabled ? onClick : undefined,
+    disabled: disabled,
     label: messages.remove,
     "aria-describedby": `components-form-token-field__token-text-${instanceId}`
   }));

package/build/form-token-field/token.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_i18n","_icons","_button","_visuallyHidden","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","useInstanceId","tokenClasses","classnames","onClick","transformedValue","termPositionAndCount","sprintf","__","_element","createElement","className","id","VisuallyHidden","as","default","icon","closeSmall","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { TokenProps } from './types';\n\nconst noop = () => {};\n\nexport default function Token( {\n\tvalue,\n\tstatus,\n\ttitle,\n\tdisplayTransform,\n\tisBorderless = false,\n\tdisabled = false,\n\tonClickRemove = noop,\n\tonMouseEnter,\n\tonMouseLeave,\n\tmessages,\n\ttermPosition,\n\ttermsCount,\n}: TokenProps ) {\n\tconst instanceId = useInstanceId( Token );\n\tconst tokenClasses = classnames( 'components-form-token-field__token', {\n\t\t'is-error': 'error' === status,\n\t\t'is-success': 'success' === status,\n\t\t'is-validating': 'validating' === status,\n\t\t'is-borderless': isBorderless,\n\t\t'is-disabled': disabled,\n\t} );\n\n\tconst onClick = () => onClickRemove( { value } );\n\n\tconst transformedValue = displayTransform( value );\n\tconst termPositionAndCount = sprintf(\n\t\t/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n\t\t__( '%1$s (%2$s of %3$s)' ),\n\t\ttransformedValue,\n\t\ttermPosition,\n\t\ttermsCount\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ tokenClasses }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\ttitle={ title }\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"components-form-token-field__token-text\"\n\t\t\t\tid={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t>\n\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t{ termPositionAndCount }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<span aria-hidden=\"true\">{ transformedValue }</span>\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tclassName=\"components-form-token-field__remove-token\"\n\t\t\t\ticon={ closeSmall }\n\t\t\t\tonClick={ ! disabled ? onClick : undefined }\n\t\t\t\tlabel={ messages.remove }\n\t\t\t\taria-describedby={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t/>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMM,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,KAAKA,CAAE;EAC9BC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,YAAY,GAAG,KAAK;EACpBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGR,IAAI;EACpBS,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,YAAY;EACZC;AACW,CAAC,EAAG;EACf,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEd,KAAM,CAAC;EACzC,MAAMe,YAAY,GAAG,IAAAC,mBAAU,EAAE,oCAAoC,EAAE;IACtE,UAAU,EAAE,OAAO,KAAKd,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMW,OAAO,GAAGA,CAAA,KAAMV,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMiB,gBAAgB,GAAGd,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMkB,oBAAoB,GAAG,IAAAC,aAAO,GACnC;EACA,IAAAC,QAAE,EAAE,qBAAsB,CAAC,EAC3BH,gBAAgB,EAChBP,YAAY,EACZC,UACD,CAAC;EAED,OACC,IAAAU,QAAA,CAAAC,aAAA;IACCC,SAAS,EAAGT,YAAc;IAC1BP,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA;EAAO,GAEf,IAAAmB,QAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,yCAAyC;IACnDC,EAAE,EAAI,2CAA2CZ,UAAY;EAAG,GAEhE,IAAAS,QAAA,CAAAC,aAAA,EAACzB,eAAA,CAAA4B,cAAc;IAACC,EAAE,EAAC;EAAM,GACtBR,oBACa,CAAC,EACjB,IAAAG,QAAA,CAAAC,aAAA;IAAM,eAAY;EAAM,GAAGL,gBAAwB,CAC9C,CAAC,EAEP,IAAAI,QAAA,CAAAC,aAAA,EAAC1B,OAAA,CAAA+B,OAAM;IACNJ,SAAS,EAAC,2CAA2C;IACrDK,IAAI,EAAGC,iBAAY;IACnBb,OAAO,EAAG,CAAEX,QAAQ,GAAGW,OAAO,GAAGc,SAAW;IAC5CC,KAAK,EAAGtB,QAAQ,CAACuB,MAAQ;IACzB,oBAAoB,2CAA2CpB,UAAY;EAAG,CAC9E,CACI,CAAC;AAET"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_i18n","_icons","_button","_visuallyHidden","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","useInstanceId","tokenClasses","classnames","onClick","transformedValue","termPositionAndCount","sprintf","__","_react","createElement","className","id","VisuallyHidden","as","default","icon","closeSmall","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { TokenProps } from './types';\n\nconst noop = () => {};\n\nexport default function Token( {\n\tvalue,\n\tstatus,\n\ttitle,\n\tdisplayTransform,\n\tisBorderless = false,\n\tdisabled = false,\n\tonClickRemove = noop,\n\tonMouseEnter,\n\tonMouseLeave,\n\tmessages,\n\ttermPosition,\n\ttermsCount,\n}: TokenProps ) {\n\tconst instanceId = useInstanceId( Token );\n\tconst tokenClasses = classnames( 'components-form-token-field__token', {\n\t\t'is-error': 'error' === status,\n\t\t'is-success': 'success' === status,\n\t\t'is-validating': 'validating' === status,\n\t\t'is-borderless': isBorderless,\n\t\t'is-disabled': disabled,\n\t} );\n\n\tconst onClick = () => onClickRemove( { value } );\n\n\tconst transformedValue = displayTransform( value );\n\tconst termPositionAndCount = sprintf(\n\t\t/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n\t\t__( '%1$s (%2$s of %3$s)' ),\n\t\ttransformedValue,\n\t\ttermPosition,\n\t\ttermsCount\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ tokenClasses }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\ttitle={ title }\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"components-form-token-field__token-text\"\n\t\t\t\tid={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t>\n\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t{ termPositionAndCount }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<span aria-hidden=\"true\">{ transformedValue }</span>\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tclassName=\"components-form-token-field__remove-token\"\n\t\t\t\ticon={ closeSmall }\n\t\t\t\tonClick={ ! disabled ? onClick : undefined }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tlabel={ messages.remove }\n\t\t\t\taria-describedby={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t/>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMM,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,KAAKA,CAAE;EAC9BC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,YAAY,GAAG,KAAK;EACpBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGR,IAAI;EACpBS,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,YAAY;EACZC;AACW,CAAC,EAAG;EACf,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEd,KAAM,CAAC;EACzC,MAAMe,YAAY,GAAG,IAAAC,mBAAU,EAAE,oCAAoC,EAAE;IACtE,UAAU,EAAE,OAAO,KAAKd,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMW,OAAO,GAAGA,CAAA,KAAMV,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMiB,gBAAgB,GAAGd,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMkB,oBAAoB,GAAG,IAAAC,aAAO,GACnC;EACA,IAAAC,QAAE,EAAE,qBAAsB,CAAC,EAC3BH,gBAAgB,EAChBP,YAAY,EACZC,UACD,CAAC;EAED,OACC,IAAAU,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAGT,YAAc;IAC1BP,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA;EAAO,GAEf,IAAAmB,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,yCAAyC;IACnDC,EAAE,EAAI,2CAA2CZ,UAAY;EAAG,GAEhE,IAAAS,MAAA,CAAAC,aAAA,EAACzB,eAAA,CAAA4B,cAAc;IAACC,EAAE,EAAC;EAAM,GACtBR,oBACa,CAAC,EACjB,IAAAG,MAAA,CAAAC,aAAA;IAAM,eAAY;EAAM,GAAGL,gBAAwB,CAC9C,CAAC,EAEP,IAAAI,MAAA,CAAAC,aAAA,EAAC1B,OAAA,CAAA+B,OAAM;IACNJ,SAAS,EAAC,2CAA2C;IACrDK,IAAI,EAAGC,iBAAY;IACnBb,OAAO,EAAG,CAAEX,QAAQ,GAAGW,OAAO,GAAGc,SAAW;IAC5CzB,QAAQ,EAAGA,QAAU;IACrB0B,KAAK,EAAGtB,QAAQ,CAACuB,MAAQ;IACzB,oBAAoB,2CAA2CpB,UAAY;EAAG,CAC9E,CACI,CAAC;AAET"}

package/build/form-token-field/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/form-token-field/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tComponentPropsWithRef,\n\tMouseEventHandler,\n\tReactNode,\n} from 'react';\n\ntype Messages = {\n\t/**\n\t * The user added a new token.\n\t */\n\tadded: string;\n\t/**\n\t * The user removed an existing token.\n\t */\n\tremoved: string;\n\t/**\n\t * The user focused the button to remove the token.\n\t */\n\tremove: string;\n\t/**\n\t * The user tried to add a token that didn't pass the validation.\n\t */\n\t__experimentalInvalid: string;\n};\n\nexport interface TokenItem {\n\t/**\n\t *  The value of the token.\n\t */\n\tvalue: string;\n\t/**\n\t * One of 'error', 'validating', or 'success'. Applies styles to token.\n\t */\n\tstatus?: 'error' | 'success' | 'validating';\n\t/**\n\t * If not falsey, will add a title to the token.\n\t */\n\ttitle?: string;\n\t/**\n\t * When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * Function to call when onMouseEnter event triggered on token.\n\t */\n\tonMouseEnter?: MouseEventHandler< HTMLSpanElement >;\n\t/**\n\t *  Function to call when onMouseLeave is triggered on token.\n\t */\n\tonMouseLeave?: MouseEventHandler< HTMLSpanElement >;\n}\n\nexport interface FormTokenFieldProps\n\textends Pick<\n\t\tComponentPropsWithRef< 'input' >,\n\t\t'autoCapitalize' | 'autoComplete' | 'className'\n\t> {\n\tlabel?: string;\n\t/**\n\t * An array of strings to present to the user as suggested tokens.\n\t */\n\tsuggestions?: string[];\n\t/**\n\t * The maximum number of suggestions to display at a time.\n\t *\n\t * @default 100\n\t */\n\tmaxSuggestions?: number;\n\t/**\n\t * An array of strings or objects to display as tokens in the field.\n\t * If objects are present in the array, they **must** have a property of `value`.\n\t */\n\tvalue?: ( string | TokenItem )[];\n\t/**\n\t * Function to call to transform tokens for display.\n\t * (In the editor, this is needed to decode HTML entities embedded in tags\n\t * - otherwise entities like `&` in tag names are double-encoded like `&amp;`,\n\t * once by the REST API and once by React).\n\t */\n\tdisplayTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call to transform tokens for saving. The default is to trim the token value.\n\t * This function is also applied when matching suggestions against the current value\n\t * so that matching works correctly with leading or trailing spaces. (In the editor,\n\t * this is needed to remove leading and trailing spaces from tag names, like wp-admin does.\n\t * Otherwise the REST API won't save them.)\n\t *\n\t * @default ( token: string ) => token.trim()\n\t */\n\tsaveTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call when the tokens have changed. An array of new tokens is passed to the callback.\n\t *\n\t */\n\tonChange?: ( tokens: ( string | TokenItem )[] ) => void;\n\t/**\n\t * Function to call when the users types in the input field. It can be used to trigger autocomplete requests.\n\t *\n\t */\n\tonInputChange?: ( input: string ) => void;\n\t/**\n\t * Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.\n\t *\n\t */\n\tonFocus?: ( event: FocusEvent ) => void;\n\t/**\n\t *  When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`.\n\t */\n\tmaxLength?: number;\n\t/**\n\t * When true, tokens are not able to be added or removed.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * If passed, the `TokenField` input will show a placeholder string if no value tokens are present.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * If true, will add a token when `TokenField` is focused and `space` is pressed.\n\t */\n\ttokenizeOnSpace?: boolean;\n\t/**\n\t * Allows customizing the messages presented by screen readers in different occasions:\n\t *\n\t * -   `added`: The user added a new token.\n\t * -   `removed`: The user removed an existing token.\n\t * -   `remove` : The user focused the button to remove the token.\n\t * -   `__experimentalInvalid`: The user tried to add a token that didn't pass the validation.\n\t */\n\tmessages?: Messages;\n\t/**\n\t * If true, the suggestions list will be always expanded when the input field has the focus.\n\t */\n\t__experimentalExpandOnFocus?: boolean;\n\t/**\n\t * If passed, all introduced values will be validated before being added as tokens.\n\t *\n\t * @default () => true\n\t */\n\t__experimentalValidateInput?: ( token: string ) => boolean;\n\t/**\n\t * If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.\n\t *\n\t * @default true\n\t */\n\t__experimentalShowHowTo?: boolean;\n\t/**\n\t * Deprecated. Use `__next40pxDefaultSize` instead.\n\t *\n\t * @default false\n\t * @deprecated\n\t */\n\t__next36pxDefaultSize?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * If true, the select the first matching suggestion when the user presses\n\t * the Enter key (or space when tokenizeOnSpace is true).\n\t *\n\t * @default false\n\t */\n\t__experimentalAutoSelectFirstMatch?: boolean;\n\t/**\n\t * Custom renderer for suggestions.\n\t */\n\t__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n}\n\n/**\n * `T` can be either a `string` or an object which must have a `value` prop as a string.\n */\nexport interface SuggestionsListProps<\n\tT = string | ( Record< string, unknown > & { value: string } )\n> {\n\tselectedIndex: number;\n\tscrollIntoView: boolean;\n\tmatch: T;\n\tonHover: ( suggestion: T ) => void;\n\tonSelect: ( suggestion: T ) => void;\n\tsuggestions: T[];\n\tdisplayTransform: ( value: T ) => string;\n\tinstanceId: string | number;\n\t__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;\n}\n\nexport interface TokenProps extends TokenItem {\n\tdisplayTransform: ( value: string ) => string;\n\tdisabled: boolean;\n\tonClickRemove: ( { value }: { value: string } ) => void;\n\tmessages: Messages;\n\ttermPosition: number;\n\ttermsCount: number;\n}\n\nexport interface TokenInputProps {\n\tisExpanded: boolean;\n\tinstanceId: string | number;\n\tselectedSuggestionIndex: number;\n\tonChange?: ( { value }: { value: string } ) => void;\n\tvalue: string;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/form-token-field/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tComponentPropsWithRef,\n\tMouseEventHandler,\n\tReactNode,\n\tFocusEvent,\n} from 'react';\n\ntype Messages = {\n\t/**\n\t * The user added a new token.\n\t */\n\tadded: string;\n\t/**\n\t * The user removed an existing token.\n\t */\n\tremoved: string;\n\t/**\n\t * The user focused the button to remove the token.\n\t */\n\tremove: string;\n\t/**\n\t * The user tried to add a token that didn't pass the validation.\n\t */\n\t__experimentalInvalid: string;\n};\n\nexport interface TokenItem {\n\t/**\n\t *  The value of the token.\n\t */\n\tvalue: string;\n\t/**\n\t * One of 'error', 'validating', or 'success'. Applies styles to token.\n\t */\n\tstatus?: 'error' | 'success' | 'validating';\n\t/**\n\t * If not falsey, will add a title to the token.\n\t */\n\ttitle?: string;\n\t/**\n\t * When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * Function to call when onMouseEnter event triggered on token.\n\t */\n\tonMouseEnter?: MouseEventHandler< HTMLSpanElement >;\n\t/**\n\t *  Function to call when onMouseLeave is triggered on token.\n\t */\n\tonMouseLeave?: MouseEventHandler< HTMLSpanElement >;\n}\n\nexport interface FormTokenFieldProps\n\textends Pick<\n\t\tComponentPropsWithRef< 'input' >,\n\t\t'autoCapitalize' | 'autoComplete' | 'className'\n\t> {\n\tlabel?: string;\n\t/**\n\t * An array of strings to present to the user as suggested tokens.\n\t */\n\tsuggestions?: string[];\n\t/**\n\t * The maximum number of suggestions to display at a time.\n\t *\n\t * @default 100\n\t */\n\tmaxSuggestions?: number;\n\t/**\n\t * An array of strings or objects to display as tokens in the field.\n\t * If objects are present in the array, they **must** have a property of `value`.\n\t */\n\tvalue?: ( string | TokenItem )[];\n\t/**\n\t * Function to call to transform tokens for display.\n\t * (In the editor, this is needed to decode HTML entities embedded in tags\n\t * - otherwise entities like `&` in tag names are double-encoded like `&amp;`,\n\t * once by the REST API and once by React).\n\t */\n\tdisplayTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call to transform tokens for saving. The default is to trim the token value.\n\t * This function is also applied when matching suggestions against the current value\n\t * so that matching works correctly with leading or trailing spaces. (In the editor,\n\t * this is needed to remove leading and trailing spaces from tag names, like wp-admin does.\n\t * Otherwise the REST API won't save them.)\n\t *\n\t * @default ( token: string ) => token.trim()\n\t */\n\tsaveTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call when the tokens have changed. An array of new tokens is passed to the callback.\n\t *\n\t */\n\tonChange?: ( tokens: ( string | TokenItem )[] ) => void;\n\t/**\n\t * Function to call when the users types in the input field. It can be used to trigger autocomplete requests.\n\t *\n\t */\n\tonInputChange?: ( input: string ) => void;\n\t/**\n\t * Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.\n\t *\n\t */\n\tonFocus?: ( event: FocusEvent ) => void;\n\t/**\n\t *  When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`.\n\t */\n\tmaxLength?: number;\n\t/**\n\t * When true, tokens are not able to be added or removed.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * If passed, the `TokenField` input will show a placeholder string if no value tokens are present.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * If true, will add a token when `TokenField` is focused and `space` is pressed.\n\t */\n\ttokenizeOnSpace?: boolean;\n\t/**\n\t * Allows customizing the messages presented by screen readers in different occasions:\n\t *\n\t * -   `added`: The user added a new token.\n\t * -   `removed`: The user removed an existing token.\n\t * -   `remove` : The user focused the button to remove the token.\n\t * -   `__experimentalInvalid`: The user tried to add a token that didn't pass the validation.\n\t */\n\tmessages?: Messages;\n\t/**\n\t * If true, the suggestions list will be always expanded when the input field has the focus.\n\t */\n\t__experimentalExpandOnFocus?: boolean;\n\t/**\n\t * If passed, all introduced values will be validated before being added as tokens.\n\t *\n\t * @default () => true\n\t */\n\t__experimentalValidateInput?: ( token: string ) => boolean;\n\t/**\n\t * If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.\n\t *\n\t * @default true\n\t */\n\t__experimentalShowHowTo?: boolean;\n\t/**\n\t * Deprecated. Use `__next40pxDefaultSize` instead.\n\t *\n\t * @default false\n\t * @deprecated\n\t */\n\t__next36pxDefaultSize?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * If true, the select the first matching suggestion when the user presses\n\t * the Enter key (or space when tokenizeOnSpace is true).\n\t *\n\t * @default false\n\t */\n\t__experimentalAutoSelectFirstMatch?: boolean;\n\t/**\n\t * Custom renderer for suggestions.\n\t */\n\t__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * If true, add any incompleteTokenValue as a new token when the field loses focus.\n\t *\n\t * @default false\n\t */\n\ttokenizeOnBlur?: boolean;\n}\n\n/**\n * `T` can be either a `string` or an object which must have a `value` prop as a string.\n */\nexport interface SuggestionsListProps<\n\tT = string | ( Record< string, unknown > & { value: string } ),\n> {\n\tselectedIndex: number;\n\tscrollIntoView: boolean;\n\tmatch: T;\n\tonHover: ( suggestion: T ) => void;\n\tonSelect: ( suggestion: T ) => void;\n\tsuggestions: T[];\n\tdisplayTransform: ( value: T ) => string;\n\tinstanceId: string | number;\n\t__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;\n}\n\nexport interface TokenProps extends TokenItem {\n\tdisplayTransform: ( value: string ) => string;\n\tdisabled: boolean;\n\tonClickRemove: ( { value }: { value: string } ) => void;\n\tmessages: Messages;\n\ttermPosition: number;\n\ttermsCount: number;\n}\n\nexport interface TokenInputProps {\n\tisExpanded: boolean;\n\tinstanceId: string | number;\n\tselectedSuggestionIndex: number;\n\tonChange?: ( { value }: { value: string } ) => void;\n\tvalue: string;\n}\n"],"mappings":""}

package/build/gradient-picker/index.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GradientPicker = GradientPicker;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _i18n = require("@wordpress/i18n");
-var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));
 var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));
 var _vStack = require("../v-stack");
 var _styles = require("../color-palette/styles");
-var _spacer = require("../spacer");
 /**
  * WordPress dependencies
  */
@@ -34,14 +34,15 @@ function SingleOrigin({
   gradients,
   onChange,
   value,
-  actions
+  ...additionalProps
 }) {
   const gradientOptions = (0, _element.useMemo)(() => {
     return gradients.map(({
       gradient,
-      name
-    }, index) => (0, _element.createElement)(_circularOptionPicker.default.Option, {
-      key: gradient,
+      name,
+      slug
+    }, index) => (0, _react.createElement)(_circularOptionPicker.default.Option, {
+      key: slug,
       value: gradient,
       isSelected: value === gradient,
       tooltipText: name ||
@@ -59,10 +60,10 @@ function SingleOrigin({
       (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
     }));
   }, [gradients, value, onChange, clearGradient]);
-  return (0, _element.createElement)(_circularOptionPicker.default, {
+  return (0, _react.createElement)(_circularOptionPicker.default.OptionGroup, {
     className: className,
     options: gradientOptions,
-    actions: actions
+    ...additionalProps
   });
 }
 function MultipleOrigin({
@@ -71,40 +72,79 @@ function MultipleOrigin({
   gradients,
   onChange,
   value,
-  actions,
   headingLevel
 }) {
-  return (0, _element.createElement)(_vStack.VStack, {
+  const instanceId = (0, _compose.useInstanceId)(MultipleOrigin);
+  return (0, _react.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
   }, gradients.map(({
     name,
     gradients: gradientSet
   }, index) => {
-    return (0, _element.createElement)(_vStack.VStack, {
+    const id = `color-palette-${instanceId}-${index}`;
+    return (0, _react.createElement)(_vStack.VStack, {
       spacing: 2,
       key: index
-    }, (0, _element.createElement)(_styles.ColorHeading, {
-      level: headingLevel
-    }, name), (0, _element.createElement)(SingleOrigin, {
+    }, (0, _react.createElement)(_styles.ColorHeading, {
+      level: headingLevel,
+      id: id
+    }, name), (0, _react.createElement)(SingleOrigin, {
       clearGradient: clearGradient,
       gradients: gradientSet,
       onChange: gradient => onChange(gradient, index),
       value: value,
-      ...(gradients.length === index + 1 ? {
-        actions
-      } : {})
+      "aria-labelledby": id
     }));
   }));
 }
 function Component(props) {
-  if (isMultipleOriginArray(props.gradients)) {
-    return (0, _element.createElement)(MultipleOrigin, {
-      ...props
-    });
+  const {
+    asButtons,
+    loop,
+    actions,
+    headingLevel,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    ...additionalProps
+  } = props;
+  const options = isMultipleOriginArray(props.gradients) ? (0, _react.createElement)(MultipleOrigin, {
+    headingLevel: headingLevel,
+    ...additionalProps
+  }) : (0, _react.createElement)(SingleOrigin, {
+    ...additionalProps
+  });
+  let metaProps;
+  if (asButtons) {
+    metaProps = {
+      asButtons: true
+    };
+  } else {
+    const _metaProps = {
+      asButtons: false,
+      loop
+    };
+    if (ariaLabel) {
+      metaProps = {
+        ..._metaProps,
+        'aria-label': ariaLabel
+      };
+    } else if (ariaLabelledby) {
+      metaProps = {
+        ..._metaProps,
+        'aria-labelledby': ariaLabelledby
+      };
+    } else {
+      metaProps = {
+        ..._metaProps,
+        'aria-label': (0, _i18n.__)('Custom color picker.')
+      };
+    }
   }
-  return (0, _element.createElement)(SingleOrigin, {
-    ...props
+  return (0, _react.createElement)(_circularOptionPicker.default, {
+    ...metaProps,
+    actions: actions,
+    options: options
   });
 }
 
@@ -122,7 +162,6 @@ function Component(props) {
  *
  *	return (
  *		<GradientPicker
- *			__nextHasNoMargin
  *			value={ gradient }
  *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
  *			gradients={ [
@@ -152,8 +191,6 @@ function Component(props) {
  *
  */
 function GradientPicker({
-  /** Start opting into the new margin-free styles that will become the default in a future version. */
-  __nextHasNoMargin = false,
   className,
   gradients = [],
   onChange,
@@ -161,45 +198,28 @@ function GradientPicker({
   clearable = true,
   disableCustomGradients = false,
   __experimentalIsRenderedInSidebar,
-  headingLevel = 2
+  headingLevel = 2,
+  ...additionalProps
 }) {
   const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
-  if (!__nextHasNoMargin) {
-    (0, _deprecated.default)('Outer margin styles for wp.components.GradientPicker', {
-      since: '6.1',
-      version: '6.4',
-      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
-    });
-  }
-  const deprecatedMarginSpacerProps = !__nextHasNoMargin ? {
-    marginTop: !gradients.length ? 3 : undefined,
-    marginBottom: !clearable ? 6 : 0
-  } : {};
-  return (
-    // Outmost Spacer wrapper can be removed when deprecation period is over
-    (0, _element.createElement)(_spacer.Spacer, {
-      marginBottom: 0,
-      ...deprecatedMarginSpacerProps
-    }, (0, _element.createElement)(_vStack.VStack, {
-      spacing: gradients.length ? 4 : 0
-    }, !disableCustomGradients && (0, _element.createElement)(_customGradientPicker.default, {
-      __nextHasNoMargin: true,
-      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-      value: value,
-      onChange: onChange
-    }), (gradients.length || clearable) && (0, _element.createElement)(Component, {
-      className: className,
-      clearGradient: clearGradient,
-      gradients: gradients,
-      onChange: onChange,
-      value: value,
-      actions: clearable && !disableCustomGradients && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
-        onClick: clearGradient
-      }, (0, _i18n.__)('Clear')),
-      headingLevel: headingLevel
-    })))
-  );
+  return (0, _react.createElement)(_vStack.VStack, {
+    spacing: gradients.length ? 4 : 0
+  }, !disableCustomGradients && (0, _react.createElement)(_customGradientPicker.default, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    value: value,
+    onChange: onChange
+  }), (gradients.length > 0 || clearable) && (0, _react.createElement)(Component, {
+    ...additionalProps,
+    className: className,
+    clearGradient: clearGradient,
+    gradients: gradients,
+    onChange: onChange,
+    value: value,
+    actions: clearable && !disableCustomGradients && (0, _react.createElement)(_circularOptionPicker.default.ButtonAction, {
+      onClick: clearGradient
+    }, (0, _i18n.__)('Clear')),
+    headingLevel: headingLevel
+  }));
 }
-var _default = GradientPicker;
-exports.default = _default;
+var _default = exports.default = GradientPicker;
 //# sourceMappingURL=index.js.map

package/build/gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_deprecated","_interopRequireDefault","_circularOptionPicker","_customGradientPicker","_vStack","_styles","_spacer","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","actions","gradientOptions","useMemo","map","gradient","name","index","createElement","default","Option","key","isSelected","tooltipText","sprintf","__","style","color","background","onClick","options","MultipleOrigin","headingLevel","VStack","spacing","gradientSet","ColorHeading","level","Component","props","GradientPicker","__nextHasNoMargin","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","useCallback","undefined","deprecated","since","version","hint","deprecatedMarginSpacerProps","marginTop","marginBottom","Spacer","ButtonAction","_default","exports"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { Spacer } from '../spacer';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? { actions }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tif ( isMultipleOriginArray( props.gradients ) ) {\n\t\treturn <MultipleOrigin { ...props } />;\n\t}\n\treturn <SingleOrigin { ...props } />;\n}\n\n/**\n *  GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\t__nextHasNoMargin\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated( 'Outer margin styles for wp.components.GradientPicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t} );\n\t}\n\n\tconst deprecatedMarginSpacerProps = ! __nextHasNoMargin\n\t\t? {\n\t\t\t\tmarginTop: ! gradients.length ? 3 : undefined,\n\t\t\t\tmarginBottom: ! clearable ? 6 : 0,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t// Outmost Spacer wrapper can be removed when deprecation period is over\n\t\t<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>\n\t\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ( gradients.length || clearable ) && (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</Spacer>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":";;;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AADA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAKA,IAAAI,qBAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,qBAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AAdA;AACA;AACA;;AAKA;AACA;AACA;;AAaA;AACA;AACA,MAAMS,sBAAsB,GAC3BC,GAA0B,IAE1BC,KAAK,CAACC,OAAO,CAAEF,GAAG,CAACG,SAAU,CAAC,IAAI,EAAI,UAAU,IAAIH,GAAG,CAAE;AAE1D,MAAMI,qBAAqB,GAAKC,GAAU,IAA6B;EACtE,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,WAAW,IAAMT,sBAAsB,CAAES,WAAY,CAAE,CAAC;AAEvE,CAAC;AAED,SAASC,YAAYA,CAAE;EACtBC,SAAS;EACTC,aAAa;EACbR,SAAS;EACTS,QAAQ;EACRC,KAAK;EACLC;AAC8B,CAAC,EAAG;EAClC,MAAMC,eAAe,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACtC,OAAOb,SAAS,CAACc,GAAG,CAAE,CAAE;MAAEC,QAAQ;MAAEC;IAAK,CAAC,EAAEC,KAAK,KAChD,IAAA/B,QAAA,CAAAgC,aAAA,EAAC3B,qBAAA,CAAA4B,OAAoB,CAACC,MAAM;MAC3BC,GAAG,EAAGN,QAAU;MAChBL,KAAK,EAAGK,QAAU;MAClBO,UAAU,EAAGZ,KAAK,KAAKK,QAAU;MACjCQ,WAAW,EACVP,IAAI;MACJ;MACA,IAAAQ,aAAO,EAAE,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAEV,QAAS,CAC7C;MACDW,KAAK,EAAG;QAAEC,KAAK,EAAE,iBAAiB;QAAEC,UAAU,EAAEb;MAAS,CAAG;MAC5Dc,OAAO,EACNnB,KAAK,KAAKK,QAAQ,GACfP,aAAa,GACb,MAAMC,QAAQ,CAAEM,QAAQ,EAAEE,KAAM,CACnC;MACD,cACCD,IAAI;MACD;MACA,IAAAQ,aAAO,EAAE,IAAAC,QAAE,EAAE,cAAe,CAAC,EAAET,IAAK,CAAC;MACrC;MACA,IAAAQ,aAAO,EAAE,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAEV,QAAS;IAChD,CACD,CACA,CAAC;EACJ,CAAC,EAAE,CAAEf,SAAS,EAAEU,KAAK,EAAED,QAAQ,EAAED,aAAa,CAAG,CAAC;EAClD,OACC,IAAAtB,QAAA,CAAAgC,aAAA,EAAC3B,qBAAA,CAAA4B,OAAoB;IACpBZ,SAAS,EAAGA,SAAW;IACvBuB,OAAO,EAAGlB,eAAiB;IAC3BD,OAAO,EAAGA;EAAS,CACnB,CAAC;AAEJ;AAEA,SAASoB,cAAcA,CAAE;EACxBxB,SAAS;EACTC,aAAa;EACbR,SAAS;EACTS,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPqB;AAC4B,CAAC,EAAG;EAChC,OACC,IAAA9C,QAAA,CAAAgC,aAAA,EAACzB,OAAA,CAAAwC,MAAM;IAACC,OAAO,EAAG,CAAG;IAAC3B,SAAS,EAAGA;EAAW,GAC1CP,SAAS,CAACc,GAAG,CAAE,CAAE;IAAEE,IAAI;IAAEhB,SAAS,EAAEmC;EAAY,CAAC,EAAElB,KAAK,KAAM;IAC/D,OACC,IAAA/B,QAAA,CAAAgC,aAAA,EAACzB,OAAA,CAAAwC,MAAM;MAACC,OAAO,EAAG,CAAG;MAACb,GAAG,EAAGJ;IAAO,GAClC,IAAA/B,QAAA,CAAAgC,aAAA,EAACxB,OAAA,CAAA0C,YAAY;MAACC,KAAK,EAAGL;IAAc,GACjChB,IACW,CAAC,EACf,IAAA9B,QAAA,CAAAgC,aAAA,EAACZ,YAAY;MACZE,aAAa,EAAGA,aAAe;MAC/BR,SAAS,EAAGmC,WAAa;MACzB1B,QAAQ,EAAKM,QAAQ,IACpBN,QAAQ,CAAEM,QAAQ,EAAEE,KAAM,CAC1B;MACDP,KAAK,EAAGA,KAAO;MAAA,IACRV,SAAS,CAACG,MAAM,KAAKc,KAAK,GAAG,CAAC,GAClC;QAAEN;MAAQ,CAAC,GACX,CAAC,CAAC;IAAA,CACL,CACM,CAAC;EAEX,CAAE,CACK,CAAC;AAEX;AAEA,SAAS2B,SAASA,CAAEC,KAAyB,EAAG;EAC/C,IAAKtC,qBAAqB,CAAEsC,KAAK,CAACvC,SAAU,CAAC,EAAG;IAC/C,OAAO,IAAAd,QAAA,CAAAgC,aAAA,EAACa,cAAc;MAAA,GAAMQ;IAAK,CAAI,CAAC;EACvC;EACA,OAAO,IAAArD,QAAA,CAAAgC,aAAA,EAACZ,YAAY;IAAA,GAAMiC;EAAK,CAAI,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAAE;EAC/B;EACAC,iBAAiB,GAAG,KAAK;EACzBlC,SAAS;EACTP,SAAS,GAAG,EAAE;EACdS,QAAQ;EACRC,KAAK;EACLgC,SAAS,GAAG,IAAI;EAChBC,sBAAsB,GAAG,KAAK;EAC9BC,iCAAiC;EACjCZ,YAAY,GAAG;AACc,CAAC,EAAG;EACjC,MAAMxB,aAAa,GAAG,IAAAqC,oBAAW,EAChC,MAAMpC,QAAQ,CAAEqC,SAAU,CAAC,EAC3B,CAAErC,QAAQ,CACX,CAAC;EAED,IAAK,CAAEgC,iBAAiB,EAAG;IAC1B,IAAAM,mBAAU,EAAE,sDAAsD,EAAE;MACnEC,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CAAE,CAAC;EACJ;EAEA,MAAMC,2BAA2B,GAAG,CAAEV,iBAAiB,GACpD;IACAW,SAAS,EAAE,CAAEpD,SAAS,CAACG,MAAM,GAAG,CAAC,GAAG2C,SAAS;IAC7CO,YAAY,EAAE,CAAEX,SAAS,GAAG,CAAC,GAAG;EAChC,CAAC,GACD,CAAC,CAAC;EAEL;IACC;IACA,IAAAxD,QAAA,CAAAgC,aAAA,EAACvB,OAAA,CAAA2D,MAAM;MAACD,YAAY,EAAG,CAAG;MAAA,GAAMF;IAA2B,GAC1D,IAAAjE,QAAA,CAAAgC,aAAA,EAACzB,OAAA,CAAAwC,MAAM;MAACC,OAAO,EAAGlC,SAAS,CAACG,MAAM,GAAG,CAAC,GAAG;IAAG,GACzC,CAAEwC,sBAAsB,IACzB,IAAAzD,QAAA,CAAAgC,aAAA,EAAC1B,qBAAA,CAAA2B,OAAoB;MACpBsB,iBAAiB;MACjBG,iCAAiC,EAChCA,iCACA;MACDlC,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAET,SAAS,CAACG,MAAM,IAAIuC,SAAS,KAChC,IAAAxD,QAAA,CAAAgC,aAAA,EAACoB,SAAS;MACT/B,SAAS,EAAGA,SAAW;MACvBC,aAAa,EAAGA,aAAe;MAC/BR,SAAS,EAAGA,SAAW;MACvBS,QAAQ,EAAGA,QAAU;MACrBC,KAAK,EAAGA,KAAO;MACfC,OAAO,EACN+B,SAAS,IACT,CAAEC,sBAAsB,IACvB,IAAAzD,QAAA,CAAAgC,aAAA,EAAC3B,qBAAA,CAAA4B,OAAoB,CAACoC,YAAY;QACjC1B,OAAO,EAAGrB;MAAe,GAEvB,IAAAiB,QAAE,EAAE,OAAQ,CACoB,CAEpC;MACDO,YAAY,EAAGA;IAAc,CAC7B,CAEK,CACD;EAAC;AAEX;AAAC,IAAAwB,QAAA,GAEchB,cAAc;AAAAiB,OAAA,CAAAtC,OAAA,GAAAqC,QAAA"}
+{"version":3,"names":["_i18n","require","_compose","_element","_circularOptionPicker","_interopRequireDefault","_customGradientPicker","_vStack","_styles","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","useMemo","map","gradient","name","slug","index","_react","createElement","default","Option","key","isSelected","tooltipText","sprintf","__","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","useInstanceId","VStack","spacing","gradientSet","id","ColorHeading","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","useCallback","undefined","ButtonAction","_default","exports"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\n}\n\n/**\n *  GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 || clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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"}

package/build/gradient-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] | OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/**\n\t * The class name added to the wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string | undefined ) => void;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: GradientObject[ 'gradient' ] | null;\n\t/**\n\t * Whether the palette should have a clearing button or not.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (ie. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n};\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/**\n\t * An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t *\n\t * @default []\n\t */\n\tgradients?: GradientsProp;\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t *\n\t * @default false\n\t */\n\tdisableCustomGradients?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject | OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string | undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] | OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/**\n\t * The class name added to the wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string | undefined ) => void;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: GradientObject[ 'gradient' ] | null;\n\t/**\n\t * Whether the palette should have a clearing button or not.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (ie. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * A label to identify the purpose of the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t */\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t */\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t  }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/**\n\t * An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t *\n\t * @default []\n\t */\n\tgradients?: GradientsProp;\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t *\n\t * @default false\n\t */\n\tdisableCustomGradients?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject | OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string | undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":""}

package/build/grid/component.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Grid = void 0;
-var _element = require("@wordpress/element");
-var _context = require("../ui/context");
+var _react = require("react");
+var _context = require("../context");
 var _view = require("../view");
 var _hook = _interopRequireDefault(require("./hook"));
 /**
@@ -19,7 +19,7 @@ var _hook = _interopRequireDefault(require("./hook"));
 
 function UnconnectedGrid(props, forwardedRef) {
   const gridProps = (0, _hook.default)(props);
-  return (0, _element.createElement)(_view.View, {
+  return (0, _react.createElement)(_view.View, {
     ...gridProps,
     ref: forwardedRef
   });
@@ -45,8 +45,6 @@ function UnconnectedGrid(props, forwardedRef) {
  * }
  * ```
  */
-const Grid = (0, _context.contextConnect)(UnconnectedGrid, 'Grid');
-exports.Grid = Grid;
-var _default = Grid;
-exports.default = _default;
+const Grid = exports.Grid = (0, _context.contextConnect)(UnconnectedGrid, 'Grid');
+var _default = exports.default = Grid;
 //# sourceMappingURL=component.js.map

package/build/grid/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","_interopRequireDefault","UnconnectedGrid","props","forwardedRef","gridProps","useGrid","_element","createElement","View","ref","Grid","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/grid/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport type { GridProps } from './types';\n\nfunction UnconnectedGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst gridProps = useGrid( props );\n\n\treturn <View { ...gridProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect( UnconnectedGrid, 'Grid' );\n\nexport default Grid;\n"],"mappings":";;;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAMC,SAAS,GAAG,IAAAC,aAAO,EAAEH,KAAM,CAAC;EAElC,OAAO,IAAAI,QAAA,CAAAC,aAAA,EAACT,KAAA,CAAAU,IAAI;IAAA,GAAMJ,SAAS;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AACtD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,IAAI,GAAG,IAAAC,uBAAc,EAAEV,eAAe,EAAE,MAAO,CAAC;AAACW,OAAA,CAAAF,IAAA,GAAAA,IAAA;AAAA,IAAAG,QAAA,GAE/CH,IAAI;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_context","require","_view","_hook","_interopRequireDefault","UnconnectedGrid","props","forwardedRef","gridProps","useGrid","_react","createElement","View","ref","Grid","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/grid/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport type { GridProps } from './types';\n\nfunction UnconnectedGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst gridProps = useGrid( props );\n\n\treturn <View { ...gridProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect( UnconnectedGrid, 'Grid' );\n\nexport default Grid;\n"],"mappings":";;;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAMC,SAAS,GAAG,IAAAC,aAAO,EAAEH,KAAM,CAAC;EAElC,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACT,KAAA,CAAAU,IAAI;IAAA,GAAMJ,SAAS;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AACtD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,uBAAc,EAAEX,eAAe,EAAE,MAAO,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE/CJ,IAAI"}

package/build/grid/hook.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = useGrid;
 var _react = require("@emotion/react");
 var _element = require("@wordpress/element");
-var _context = require("../ui/context");
+var _context = require("../context");
 var _utils = require("./utils");
-var _useResponsiveValue = require("../ui/utils/use-responsive-value");
+var _useResponsiveValue = require("../utils/use-responsive-value");
 var _configValues = _interopRequireDefault(require("../utils/config-values"));
 var _useCx = require("../utils/hooks/use-cx");
 /**
@@ -56,7 +56,7 @@ function useGrid(props) {
       justifyContent: justify,
       verticalAlign: isInline ? 'middle' : undefined,
       ...alignmentProps
-    }, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZ3JpZC9ob29rLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEc0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ncmlkL2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgdXNlQ29udGV4dFN5c3RlbSB9IGZyb20gJy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgZ2V0QWxpZ25tZW50UHJvcHMgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVWYWx1ZSB9IGZyb20gJy4uL3VpL3V0aWxzL3VzZS1yZXNwb25zaXZlLXZhbHVlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5pbXBvcnQgdHlwZSB7IEdyaWRQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB1c2VHcmlkKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEdyaWRQcm9wcywgJ2RpdicgPlxuKSB7XG5cdGNvbnN0IHtcblx0XHRhbGlnbixcblx0XHRhbGlnbm1lbnQsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGNvbHVtbkdhcCxcblx0XHRjb2x1bW5zID0gMixcblx0XHRnYXAgPSAzLFxuXHRcdGlzSW5saW5lID0gZmFsc2UsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdFx0cm93cyxcblx0XHR0ZW1wbGF0ZUNvbHVtbnMsXG5cdFx0dGVtcGxhdGVSb3dzLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnR3JpZCcgKTtcblxuXHRjb25zdCBjb2x1bW5zQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIGNvbHVtbnMgKSA/IGNvbHVtbnMgOiBbIGNvbHVtbnMgXTtcblx0Y29uc3QgY29sdW1uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBjb2x1bW5zQXNBcnJheSApO1xuXHRjb25zdCByb3dzQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIHJvd3MgKSA/IHJvd3MgOiBbIHJvd3MgXTtcblx0Y29uc3Qgcm93ID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCByb3dzQXNBcnJheSApO1xuXG5cdGNvbnN0IGdyaWRUZW1wbGF0ZUNvbHVtbnMgPVxuXHRcdHRlbXBsYXRlQ29sdW1ucyB8fCAoICEhIGNvbHVtbnMgJiYgYHJlcGVhdCggJHsgY29sdW1uIH0sIDFmciApYCApO1xuXHRjb25zdCBncmlkVGVtcGxhdGVSb3dzID1cblx0XHR0ZW1wbGF0ZVJvd3MgfHwgKCAhISByb3dzICYmIGByZXBlYXQoICR7IHJvdyB9LCAxZnIgKWAgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBhbGlnbm1lbnRQcm9wcyA9IGdldEFsaWdubWVudFByb3BzKCBhbGlnbm1lbnQgKTtcblxuXHRcdGNvbnN0IGdyaWRDbGFzc2VzID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBhbGlnbixcblx0XHRcdGRpc3BsYXk6IGlzSW5saW5lID8gJ2lubGluZS1ncmlkJyA6ICdncmlkJyxcblx0XHRcdGdhcDogYGNhbGMoICR7IENPTkZJRy5ncmlkQmFzZSB9ICogJHsgZ2FwIH0gKWAsXG5cdFx0XHRncmlkVGVtcGxhdGVDb2x1bW5zOiBncmlkVGVtcGxhdGVDb2x1bW5zIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGdyaWRUZW1wbGF0ZVJvd3MgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFJvd0dhcDogcm93R2FwLFxuXHRcdFx0Z3JpZENvbHVtbkdhcDogY29sdW1uR2FwLFxuXHRcdFx0anVzdGlmeUNvbnRlbnQ6IGp1c3RpZnksXG5cdFx0XHR2ZXJ0aWNhbEFsaWduOiBpc0lubGluZSA/ICdtaWRkbGUnIDogdW5kZWZpbmVkLFxuXHRcdFx0Li4uYWxpZ25tZW50UHJvcHMsXG5cdFx0fSApO1xuXG5cdFx0cmV0dXJuIGN4KCBncmlkQ2xhc3NlcywgY2xhc3NOYW1lICk7XG5cdH0sIFtcblx0XHRhbGlnbixcblx0XHRhbGlnbm1lbnQsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGNvbHVtbkdhcCxcblx0XHRjeCxcblx0XHRnYXAsXG5cdFx0Z3JpZFRlbXBsYXRlQ29sdW1ucyxcblx0XHRncmlkVGVtcGxhdGVSb3dzLFxuXHRcdGlzSW5saW5lLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRdICk7XG5cblx0cmV0dXJuIHsgLi4ub3RoZXJQcm9wcywgY2xhc3NOYW1lOiBjbGFzc2VzIH07XG59XG4iXX0= */");
+    }, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZ3JpZC9ob29rLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEc0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ncmlkL2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHsgdXNlQ29udGV4dFN5c3RlbSB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHsgZ2V0QWxpZ25tZW50UHJvcHMgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVWYWx1ZSB9IGZyb20gJy4uL3V0aWxzL3VzZS1yZXNwb25zaXZlLXZhbHVlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5pbXBvcnQgdHlwZSB7IEdyaWRQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB1c2VHcmlkKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEdyaWRQcm9wcywgJ2RpdicgPlxuKSB7XG5cdGNvbnN0IHtcblx0XHRhbGlnbixcblx0XHRhbGlnbm1lbnQsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGNvbHVtbkdhcCxcblx0XHRjb2x1bW5zID0gMixcblx0XHRnYXAgPSAzLFxuXHRcdGlzSW5saW5lID0gZmFsc2UsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdFx0cm93cyxcblx0XHR0ZW1wbGF0ZUNvbHVtbnMsXG5cdFx0dGVtcGxhdGVSb3dzLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnR3JpZCcgKTtcblxuXHRjb25zdCBjb2x1bW5zQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIGNvbHVtbnMgKSA/IGNvbHVtbnMgOiBbIGNvbHVtbnMgXTtcblx0Y29uc3QgY29sdW1uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBjb2x1bW5zQXNBcnJheSApO1xuXHRjb25zdCByb3dzQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIHJvd3MgKSA/IHJvd3MgOiBbIHJvd3MgXTtcblx0Y29uc3Qgcm93ID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCByb3dzQXNBcnJheSApO1xuXG5cdGNvbnN0IGdyaWRUZW1wbGF0ZUNvbHVtbnMgPVxuXHRcdHRlbXBsYXRlQ29sdW1ucyB8fCAoICEhIGNvbHVtbnMgJiYgYHJlcGVhdCggJHsgY29sdW1uIH0sIDFmciApYCApO1xuXHRjb25zdCBncmlkVGVtcGxhdGVSb3dzID1cblx0XHR0ZW1wbGF0ZVJvd3MgfHwgKCAhISByb3dzICYmIGByZXBlYXQoICR7IHJvdyB9LCAxZnIgKWAgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBhbGlnbm1lbnRQcm9wcyA9IGdldEFsaWdubWVudFByb3BzKCBhbGlnbm1lbnQgKTtcblxuXHRcdGNvbnN0IGdyaWRDbGFzc2VzID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBhbGlnbixcblx0XHRcdGRpc3BsYXk6IGlzSW5saW5lID8gJ2lubGluZS1ncmlkJyA6ICdncmlkJyxcblx0XHRcdGdhcDogYGNhbGMoICR7IENPTkZJRy5ncmlkQmFzZSB9ICogJHsgZ2FwIH0gKWAsXG5cdFx0XHRncmlkVGVtcGxhdGVDb2x1bW5zOiBncmlkVGVtcGxhdGVDb2x1bW5zIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRUZW1wbGF0ZVJvd3M6IGdyaWRUZW1wbGF0ZVJvd3MgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFJvd0dhcDogcm93R2FwLFxuXHRcdFx0Z3JpZENvbHVtbkdhcDogY29sdW1uR2FwLFxuXHRcdFx0anVzdGlmeUNvbnRlbnQ6IGp1c3RpZnksXG5cdFx0XHR2ZXJ0aWNhbEFsaWduOiBpc0lubGluZSA/ICdtaWRkbGUnIDogdW5kZWZpbmVkLFxuXHRcdFx0Li4uYWxpZ25tZW50UHJvcHMsXG5cdFx0fSApO1xuXG5cdFx0cmV0dXJuIGN4KCBncmlkQ2xhc3NlcywgY2xhc3NOYW1lICk7XG5cdH0sIFtcblx0XHRhbGlnbixcblx0XHRhbGlnbm1lbnQsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGNvbHVtbkdhcCxcblx0XHRjeCxcblx0XHRnYXAsXG5cdFx0Z3JpZFRlbXBsYXRlQ29sdW1ucyxcblx0XHRncmlkVGVtcGxhdGVSb3dzLFxuXHRcdGlzSW5saW5lLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRdICk7XG5cblx0cmV0dXJuIHsgLi4ub3RoZXJQcm9wcywgY2xhc3NOYW1lOiBjbGFzc2VzIH07XG59XG4iXX0= */");
     return cx(gridClasses, className);
   }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);
   return {

package/build/grid/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_element","_context","_utils","_useResponsiveValue","_configValues","_interopRequireDefault","_useCx","useGrid","props","align","alignment","className","columnGap","columns","gap","isInline","justify","rowGap","rows","templateColumns","templateRows","otherProps","useContextSystem","columnsAsArray","Array","isArray","column","useResponsiveValue","rowsAsArray","row","gridTemplateColumns","gridTemplateRows","cx","useCx","classes","useMemo","alignmentProps","getAlignmentProps","gridClasses","css","alignItems","display","CONFIG","gridBase","undefined","gridRowGap","gridColumnGap","justifyContent","verticalAlign","process","env","NODE_ENV"],"sources":["@wordpress/components/src/grid/hook.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useContextSystem } from '../ui/context';\nimport { getAlignmentProps } from './utils';\nimport { useResponsiveValue } from '../ui/utils/use-responsive-value';\nimport CONFIG from '../utils/config-values';\nimport { useCx } from '../utils/hooks/use-cx';\nimport type { GridProps } from './types';\n\nexport default function useGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >\n) {\n\tconst {\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcolumns = 2,\n\t\tgap = 3,\n\t\tisInline = false,\n\t\tjustify,\n\t\trowGap,\n\t\trows,\n\t\ttemplateColumns,\n\t\ttemplateRows,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Grid' );\n\n\tconst columnsAsArray = Array.isArray( columns ) ? columns : [ columns ];\n\tconst column = useResponsiveValue( columnsAsArray );\n\tconst rowsAsArray = Array.isArray( rows ) ? rows : [ rows ];\n\tconst row = useResponsiveValue( rowsAsArray );\n\n\tconst gridTemplateColumns =\n\t\ttemplateColumns || ( !! columns && `repeat( ${ column }, 1fr )` );\n\tconst gridTemplateRows =\n\t\ttemplateRows || ( !! rows && `repeat( ${ row }, 1fr )` );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst alignmentProps = getAlignmentProps( alignment );\n\n\t\tconst gridClasses = css( {\n\t\t\talignItems: align,\n\t\t\tdisplay: isInline ? 'inline-grid' : 'grid',\n\t\t\tgap: `calc( ${ CONFIG.gridBase } * ${ gap } )`,\n\t\t\tgridTemplateColumns: gridTemplateColumns || undefined,\n\t\t\tgridTemplateRows: gridTemplateRows || undefined,\n\t\t\tgridRowGap: rowGap,\n\t\t\tgridColumnGap: columnGap,\n\t\t\tjustifyContent: justify,\n\t\t\tverticalAlign: isInline ? 'middle' : undefined,\n\t\t\t...alignmentProps,\n\t\t} );\n\n\t\treturn cx( gridClasses, className );\n\t}, [\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcx,\n\t\tgap,\n\t\tgridTemplateColumns,\n\t\tgridTemplateRows,\n\t\tisInline,\n\t\tjustify,\n\t\trowGap,\n\t] );\n\n\treturn { ...otherProps, className: classes };\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAce,SAASQ,OAAOA,CAC9BC,KAAkD,EACjD;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,OAAO,GAAG,CAAC;IACXC,GAAG,GAAG,CAAC;IACPC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACPC,MAAM;IACNC,IAAI;IACJC,eAAe;IACfC,YAAY;IACZ,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEd,KAAK,EAAE,MAAO,CAAC;EAErC,MAAMe,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEZ,OAAQ,CAAC,GAAGA,OAAO,GAAG,CAAEA,OAAO,CAAE;EACvE,MAAMa,MAAM,GAAG,IAAAC,sCAAkB,EAAEJ,cAAe,CAAC;EACnD,MAAMK,WAAW,GAAGJ,KAAK,CAACC,OAAO,CAAEP,IAAK,CAAC,GAAGA,IAAI,GAAG,CAAEA,IAAI,CAAE;EAC3D,MAAMW,GAAG,GAAG,IAAAF,sCAAkB,EAAEC,WAAY,CAAC;EAE7C,MAAME,mBAAmB,GACxBX,eAAe,IAAM,CAAC,CAAEN,OAAO,IAAK,WAAWa,MAAQ,SAAU;EAClE,MAAMK,gBAAgB,GACrBX,YAAY,IAAM,CAAC,CAAEF,IAAI,IAAK,WAAWW,GAAK,SAAU;EAEzD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,MAAMC,cAAc,GAAG,IAAAC,wBAAiB,EAAE3B,SAAU,CAAC;IAErD,MAAM4B,WAAW,gBAAG,IAAAC,UAAG,EAAE;MACxBC,UAAU,EAAE/B,KAAK;MACjBgC,OAAO,EAAE1B,QAAQ,GAAG,aAAa,GAAG,MAAM;MAC1CD,GAAG,EAAG,SAAS4B,qBAAM,CAACC,QAAU,MAAM7B,GAAK,IAAG;MAC9CgB,mBAAmB,EAAEA,mBAAmB,IAAIc,SAAS;MACrDb,gBAAgB,EAAEA,gBAAgB,IAAIa,SAAS;MAC/CC,UAAU,EAAE5B,MAAM;MAClB6B,aAAa,EAAElC,SAAS;MACxBmC,cAAc,EAAE/B,OAAO;MACvBgC,aAAa,EAAEjC,QAAQ,GAAG,QAAQ,GAAG6B,SAAS;MAC9C,GAAGR;IACJ,CAAC,EAAAa,OAAA,CAAAC,GAAA,CAAAC,QAAA,gDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,kvGAAC,CAAC;IAEH,OAAOnB,EAAE,CAAEM,WAAW,EAAE3B,SAAU,CAAC;EACpC,CAAC,EAAE,CACFF,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACToB,EAAE,EACFlB,GAAG,EACHgB,mBAAmB,EACnBC,gBAAgB,EAChBhB,QAAQ,EACRC,OAAO,EACPC,MAAM,CACL,CAAC;EAEH,OAAO;IAAE,GAAGI,UAAU;IAAEV,SAAS,EAAEuB;EAAQ,CAAC;AAC7C"}
+{"version":3,"names":["_react","require","_element","_context","_utils","_useResponsiveValue","_configValues","_interopRequireDefault","_useCx","useGrid","props","align","alignment","className","columnGap","columns","gap","isInline","justify","rowGap","rows","templateColumns","templateRows","otherProps","useContextSystem","columnsAsArray","Array","isArray","column","useResponsiveValue","rowsAsArray","row","gridTemplateColumns","gridTemplateRows","cx","useCx","classes","useMemo","alignmentProps","getAlignmentProps","gridClasses","css","alignItems","display","CONFIG","gridBase","undefined","gridRowGap","gridColumnGap","justifyContent","verticalAlign","process","env","NODE_ENV"],"sources":["@wordpress/components/src/grid/hook.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport { getAlignmentProps } from './utils';\nimport { useResponsiveValue } from '../utils/use-responsive-value';\nimport CONFIG from '../utils/config-values';\nimport { useCx } from '../utils/hooks/use-cx';\nimport type { GridProps } from './types';\n\nexport default function useGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >\n) {\n\tconst {\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcolumns = 2,\n\t\tgap = 3,\n\t\tisInline = false,\n\t\tjustify,\n\t\trowGap,\n\t\trows,\n\t\ttemplateColumns,\n\t\ttemplateRows,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Grid' );\n\n\tconst columnsAsArray = Array.isArray( columns ) ? columns : [ columns ];\n\tconst column = useResponsiveValue( columnsAsArray );\n\tconst rowsAsArray = Array.isArray( rows ) ? rows : [ rows ];\n\tconst row = useResponsiveValue( rowsAsArray );\n\n\tconst gridTemplateColumns =\n\t\ttemplateColumns || ( !! columns && `repeat( ${ column }, 1fr )` );\n\tconst gridTemplateRows =\n\t\ttemplateRows || ( !! rows && `repeat( ${ row }, 1fr )` );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst alignmentProps = getAlignmentProps( alignment );\n\n\t\tconst gridClasses = css( {\n\t\t\talignItems: align,\n\t\t\tdisplay: isInline ? 'inline-grid' : 'grid',\n\t\t\tgap: `calc( ${ CONFIG.gridBase } * ${ gap } )`,\n\t\t\tgridTemplateColumns: gridTemplateColumns || undefined,\n\t\t\tgridTemplateRows: gridTemplateRows || undefined,\n\t\t\tgridRowGap: rowGap,\n\t\t\tgridColumnGap: columnGap,\n\t\t\tjustifyContent: justify,\n\t\t\tverticalAlign: isInline ? 'middle' : undefined,\n\t\t\t...alignmentProps,\n\t\t} );\n\n\t\treturn cx( gridClasses, className );\n\t}, [\n\t\talign,\n\t\talignment,\n\t\tclassName,\n\t\tcolumnGap,\n\t\tcx,\n\t\tgap,\n\t\tgridTemplateColumns,\n\t\tgridTemplateRows,\n\t\tisInline,\n\t\tjustify,\n\t\trowGap,\n\t] );\n\n\treturn { ...otherProps, className: classes };\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAce,SAASQ,OAAOA,CAC9BC,KAAkD,EACjD;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,OAAO,GAAG,CAAC;IACXC,GAAG,GAAG,CAAC;IACPC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACPC,MAAM;IACNC,IAAI;IACJC,eAAe;IACfC,YAAY;IACZ,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEd,KAAK,EAAE,MAAO,CAAC;EAErC,MAAMe,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEZ,OAAQ,CAAC,GAAGA,OAAO,GAAG,CAAEA,OAAO,CAAE;EACvE,MAAMa,MAAM,GAAG,IAAAC,sCAAkB,EAAEJ,cAAe,CAAC;EACnD,MAAMK,WAAW,GAAGJ,KAAK,CAACC,OAAO,CAAEP,IAAK,CAAC,GAAGA,IAAI,GAAG,CAAEA,IAAI,CAAE;EAC3D,MAAMW,GAAG,GAAG,IAAAF,sCAAkB,EAAEC,WAAY,CAAC;EAE7C,MAAME,mBAAmB,GACxBX,eAAe,IAAM,CAAC,CAAEN,OAAO,IAAK,WAAWa,MAAQ,SAAU;EAClE,MAAMK,gBAAgB,GACrBX,YAAY,IAAM,CAAC,CAAEF,IAAI,IAAK,WAAWW,GAAK,SAAU;EAEzD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,MAAMC,cAAc,GAAG,IAAAC,wBAAiB,EAAE3B,SAAU,CAAC;IAErD,MAAM4B,WAAW,gBAAG,IAAAC,UAAG,EAAE;MACxBC,UAAU,EAAE/B,KAAK;MACjBgC,OAAO,EAAE1B,QAAQ,GAAG,aAAa,GAAG,MAAM;MAC1CD,GAAG,EAAG,SAAS4B,qBAAM,CAACC,QAAU,MAAM7B,GAAK,IAAG;MAC9CgB,mBAAmB,EAAEA,mBAAmB,IAAIc,SAAS;MACrDb,gBAAgB,EAAEA,gBAAgB,IAAIa,SAAS;MAC/CC,UAAU,EAAE5B,MAAM;MAClB6B,aAAa,EAAElC,SAAS;MACxBmC,cAAc,EAAE/B,OAAO;MACvBgC,aAAa,EAAEjC,QAAQ,GAAG,QAAQ,GAAG6B,SAAS;MAC9C,GAAGR;IACJ,CAAC,EAAAa,OAAA,CAAAC,GAAA,CAAAC,QAAA,gDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,suGAAC,CAAC;IAEH,OAAOnB,EAAE,CAAEM,WAAW,EAAE3B,SAAU,CAAC;EACpC,CAAC,EAAE,CACFF,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACToB,EAAE,EACFlB,GAAG,EACHgB,mBAAmB,EACnBC,gBAAgB,EAChBhB,QAAQ,EACRC,OAAO,EACPC,MAAM,CACL,CAAC;EAEH,OAAO;IAAE,GAAGI,UAAU;IAAEV,SAAS,EAAEuB;EAAQ,CAAC;AAC7C"}

package/build/grid/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/grid/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveCSSValue } from '../ui/utils/types';\n\ntype GridAlignment =\n\t| 'bottom'\n\t| 'bottomLeft'\n\t| 'bottomRight'\n\t| 'center'\n\t| 'spaced'\n\t| 'left'\n\t| 'right'\n\t| 'stretch'\n\t| 'top'\n\t| 'topLeft'\n\t| 'topRight';\n\nexport type GridProps = {\n\t/**\n\t * Adjusts the block alignment of children.\n\t */\n\talign?: CSSProperties[ 'alignItems' ];\n\t/**\n\t * Adjusts the horizontal and vertical alignment of children.\n\t */\n\talignment?: GridAlignment;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Adjusts the number of columns of the `Grid`.\n\t *\n\t * @default 2\n\t */\n\tcolumns?: ResponsiveCSSValue< number >;\n\t/**\n\t * Adjusts the `grid-column-gap`.\n\t */\n\tcolumnGap?: CSSProperties[ 'gridColumnGap' ];\n\t/**\n\t * Gap between each child.\n\t *\n\t * @default 3\n\t */\n\tgap?: number;\n\t/**\n\t * Changes the CSS display from `grid` to `inline-grid`.\n\t */\n\tisInline?: boolean;\n\t/**\n\t * Adjusts the inline alignment of children.\n\t */\n\tjustify?: CSSProperties[ 'justifyContent' ];\n\t/**\n\t * Adjusts the `grid-row-gap`.\n\t */\n\trowGap?: CSSProperties[ 'gridRowGap' ];\n\t/**\n\t * Adjusts the number of rows of the `Grid`.\n\t */\n\trows?: ResponsiveCSSValue< number >;\n\t/**\n\t * Adjusts the CSS grid `template-columns`.\n\t */\n\ttemplateColumns?: CSSProperties[ 'gridTemplateColumns' ];\n\t/**\n\t * Adjusts the CSS grid `template-rows`.\n\t */\n\ttemplateRows?: CSSProperties[ 'gridTemplateRows' ];\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/grid/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveCSSValue } from '../utils/types';\n\ntype GridAlignment =\n\t| 'bottom'\n\t| 'bottomLeft'\n\t| 'bottomRight'\n\t| 'center'\n\t| 'spaced'\n\t| 'left'\n\t| 'right'\n\t| 'stretch'\n\t| 'top'\n\t| 'topLeft'\n\t| 'topRight';\n\nexport type GridProps = {\n\t/**\n\t * Adjusts the block alignment of children.\n\t */\n\talign?: CSSProperties[ 'alignItems' ];\n\t/**\n\t * Adjusts the horizontal and vertical alignment of children.\n\t */\n\talignment?: GridAlignment;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Adjusts the number of columns of the `Grid`.\n\t *\n\t * @default 2\n\t */\n\tcolumns?: ResponsiveCSSValue< number >;\n\t/**\n\t * Adjusts the `grid-column-gap`.\n\t */\n\tcolumnGap?: CSSProperties[ 'gridColumnGap' ];\n\t/**\n\t * Gap between each child.\n\t *\n\t * @default 3\n\t */\n\tgap?: number;\n\t/**\n\t * Changes the CSS display from `grid` to `inline-grid`.\n\t */\n\tisInline?: boolean;\n\t/**\n\t * Adjusts the inline alignment of children.\n\t */\n\tjustify?: CSSProperties[ 'justifyContent' ];\n\t/**\n\t * Adjusts the `grid-row-gap`.\n\t */\n\trowGap?: CSSProperties[ 'gridRowGap' ];\n\t/**\n\t * Adjusts the number of rows of the `Grid`.\n\t */\n\trows?: ResponsiveCSSValue< number >;\n\t/**\n\t * Adjusts the CSS grid `template-columns`.\n\t */\n\ttemplateColumns?: CSSProperties[ 'gridTemplateColumns' ];\n\t/**\n\t * Adjusts the CSS grid `template-rows`.\n\t */\n\ttemplateRows?: CSSProperties[ 'gridTemplateRows' ];\n};\n"],"mappings":""}

package/build/guide/icons.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageControlIcon = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _primitives = require("@wordpress/primitives");
 /**
  * WordPress dependencies
  */
 
-const PageControlIcon = () => (0, _element.createElement)(_primitives.SVG, {
+const PageControlIcon = () => (0, _react.createElement)(_primitives.SVG, {
   width: "8",
   height: "8",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, (0, _element.createElement)(_primitives.Circle, {
+}, (0, _react.createElement)(_primitives.Circle, {
   cx: "4",
   cy: "4",
   r: "4"

package/build/guide/icons.js.map

@@ -1 +1 @@
-{"version":3,"names":["_primitives","require","PageControlIcon","_element","createElement","SVG","width","height","fill","xmlns","Circle","cx","cy","r","exports"],"sources":["@wordpress/components/src/guide/icons.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = () => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx=\"4\" cy=\"4\" r=\"4\" />\n\t</SVG>\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,eAAe,GAAGA,CAAA,KAC9B,IAAAC,QAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAK,GAAG;EAACC,KAAK,EAAC,GAAG;EAACC,MAAM,EAAC,GAAG;EAACC,IAAI,EAAC,MAAM;EAACC,KAAK,EAAC;AAA4B,GACvE,IAAAN,QAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAU,MAAM;EAACC,EAAE,EAAC,GAAG;EAACC,EAAE,EAAC,GAAG;EAACC,CAAC,EAAC;AAAG,CAAE,CACzB,CACL;AAACC,OAAA,CAAAZ,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_primitives","require","PageControlIcon","_react","createElement","SVG","width","height","fill","xmlns","Circle","cx","cy","r","exports"],"sources":["@wordpress/components/src/guide/icons.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = () => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx=\"4\" cy=\"4\" r=\"4\" />\n\t</SVG>\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,eAAe,GAAGA,CAAA,KAC9B,IAAAC,MAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAK,GAAG;EAACC,KAAK,EAAC,GAAG;EAACC,MAAM,EAAC,GAAG;EAACC,IAAI,EAAC,MAAM;EAACC,KAAK,EAAC;AAA4B,GACvE,IAAAN,MAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAU,MAAM;EAACC,EAAE,EAAC,GAAG;EAACC,EAAE,EAAC,GAAG;EAACC,CAAC,EAAC;AAAG,CAAE,CACzB,CACL;AAACC,OAAA,CAAAZ,eAAA,GAAAA,eAAA"}