@wordpress/components 27.5.0 → 27.6.0

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -51,7 +51,7 @@ export function UnForwardedTokenInput(props, ref) {
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
     size: size,
-    className: classnames(className, 'components-form-token-field__input'),
+    className: clsx(className, 'components-form-token-field__input'),
     autoComplete: "off",
     role: "combobox",
     "aria-expanded": isExpanded,

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","forwardRef","useState","UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","onFocus","onBlur","restProps","hasFocus","setHasFocus","size","length","onChangeHandler","event","target","onFocusHandler","e","onBlurHandler","createElement","id","type","autoComplete","role","undefined","TokenInput"],"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\tonFocus,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [ hasFocus, setHasFocus ] = useState( false );\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( true );\n\t\tonFocus?.( e );\n\t};\n\n\tconst onBlurHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( false );\n\t\tonBlur?.( e );\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tonFocus={ onFocusHandler }\n\t\t\tonBlur={ onBlurHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\t// Only add the `aria-activedescendant` attribute when:\n\t\t\t\t// - the user is actively interacting with the input (`hasFocus`)\n\t\t\t\t// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n\t\t\t\t// - the list of suggestions are rendered in the DOM (`isExpanded`)\n\t\t\t\thasFocus && selectedSuggestionIndex !== -1 && isExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AAGnC;AACA;AACA;AACA,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAIA,OAAO,SAASC,qBAAqBA,CACpCC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,KAAK;IACLC,UAAU;IACVC,UAAU;IACVC,uBAAuB;IACvBC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGV,KAAK;EAET,MAAM,CAAEW,QAAQ,EAAEC,WAAW,CAAE,GAAGd,QAAQ,CAAE,KAAM,CAAC;EAEnD,MAAMe,IAAI,GAAGX,KAAK,GAAGA,KAAK,CAACY,MAAM,GAAG,CAAC,GAAG,CAAC;EAEzC,MAAMC,eAAe,GAAKC,KAAsC,IAAM;IACrE,IAAKT,QAAQ,EAAG;MACfA,QAAQ,CAAE;QACTL,KAAK,EAAEc,KAAK,CAACC,MAAM,CAACf;MACrB,CAAE,CAAC;IACJ;EACD,CAAC;EAED,MAAMgB,cAAqD,GAAKC,CAAC,IAAM;IACtEP,WAAW,CAAE,IAAK,CAAC;IACnBJ,OAAO,GAAIW,CAAE,CAAC;EACf,CAAC;EAED,MAAMC,aAAoD,GAAKD,CAAC,IAAM;IACrEP,WAAW,CAAE,KAAM,CAAC;IACpBH,MAAM,GAAIU,CAAE,CAAC;EACd,CAAC;EAED,OACCE,aAAA;IACCpB,GAAG,EAAGA,GAAK;IACXqB,EAAE,EAAI,+BAA+BlB,UAAY,EAAG;IACpDmB,IAAI,EAAC,MAAM;IAAA,GACNb,SAAS;IACdR,KAAK,EAAGA,KAAK,IAAI,EAAI;IACrBK,QAAQ,EAAGQ,eAAiB;IAC5BP,OAAO,EAAGU,cAAgB;IAC1BT,MAAM,EAAGW,aAAe;IACxBP,IAAI,EAAGA,IAAM;IACbP,SAAS,EAAGV,UAAU,CACrBU,SAAS,EACT,oCACD,CAAG;IACHkB,YAAY,EAAC,KAAK;IAClBC,IAAI,EAAC,UAAU;IACf,iBAAgBtB,UAAY;IAC5B,qBAAkB,MAAM;IACxB,aACCA,UAAU,GACN,qCAAqCC,UAAY,EAAC,GACnDsB,SACH;IACD;IACC;IACA;IACA;IACA;IACAf,QAAQ,IAAIN,uBAAuB,KAAK,CAAC,CAAC,IAAIF,UAAU,GACpD,qCAAqCC,UAAY,IAAIC,uBAAyB,EAAC,GAChFqB,SACH;IACD,oBAAoB,2CAA2CtB,UAAY;EAAG,CAC9E,CAAC;AAEJ;AAEA,OAAO,MAAMuB,UAAU,GAAG9B,UAAU,CAAEE,qBAAsB,CAAC;AAE7D,eAAe4B,UAAU","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","useState","UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","onFocus","onBlur","restProps","hasFocus","setHasFocus","size","length","onChangeHandler","event","target","onFocusHandler","e","onBlurHandler","createElement","id","type","autoComplete","role","undefined","TokenInput"],"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\tonFocus,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [ hasFocus, setHasFocus ] = useState( false );\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( true );\n\t\tonFocus?.( e );\n\t};\n\n\tconst onBlurHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( false );\n\t\tonBlur?.( e );\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tonFocus={ onFocusHandler }\n\t\t\tonBlur={ onBlurHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\t// Only add the `aria-activedescendant` attribute when:\n\t\t\t\t// - the user is actively interacting with the input (`hasFocus`)\n\t\t\t\t// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n\t\t\t\t// - the list of suggestions are rendered in the DOM (`isExpanded`)\n\t\t\t\thasFocus && selectedSuggestionIndex !== -1 && isExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAIA,OAAO,SAASC,qBAAqBA,CACpCC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,KAAK;IACLC,UAAU;IACVC,UAAU;IACVC,uBAAuB;IACvBC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGV,KAAK;EAET,MAAM,CAAEW,QAAQ,EAAEC,WAAW,CAAE,GAAGd,QAAQ,CAAE,KAAM,CAAC;EAEnD,MAAMe,IAAI,GAAGX,KAAK,GAAGA,KAAK,CAACY,MAAM,GAAG,CAAC,GAAG,CAAC;EAEzC,MAAMC,eAAe,GAAKC,KAAsC,IAAM;IACrE,IAAKT,QAAQ,EAAG;MACfA,QAAQ,CAAE;QACTL,KAAK,EAAEc,KAAK,CAACC,MAAM,CAACf;MACrB,CAAE,CAAC;IACJ;EACD,CAAC;EAED,MAAMgB,cAAqD,GAAKC,CAAC,IAAM;IACtEP,WAAW,CAAE,IAAK,CAAC;IACnBJ,OAAO,GAAIW,CAAE,CAAC;EACf,CAAC;EAED,MAAMC,aAAoD,GAAKD,CAAC,IAAM;IACrEP,WAAW,CAAE,KAAM,CAAC;IACpBH,MAAM,GAAIU,CAAE,CAAC;EACd,CAAC;EAED,OACCE,aAAA;IACCpB,GAAG,EAAGA,GAAK;IACXqB,EAAE,EAAI,+BAA+BlB,UAAY,EAAG;IACpDmB,IAAI,EAAC,MAAM;IAAA,GACNb,SAAS;IACdR,KAAK,EAAGA,KAAK,IAAI,EAAI;IACrBK,QAAQ,EAAGQ,eAAiB;IAC5BP,OAAO,EAAGU,cAAgB;IAC1BT,MAAM,EAAGW,aAAe;IACxBP,IAAI,EAAGA,IAAM;IACbP,SAAS,EAAGV,IAAI,CACfU,SAAS,EACT,oCACD,CAAG;IACHkB,YAAY,EAAC,KAAK;IAClBC,IAAI,EAAC,UAAU;IACf,iBAAgBtB,UAAY;IAC5B,qBAAkB,MAAM;IACxB,aACCA,UAAU,GACN,qCAAqCC,UAAY,EAAC,GACnDsB,SACH;IACD;IACC;IACA;IACA;IACA;IACAf,QAAQ,IAAIN,uBAAuB,KAAK,CAAC,CAAC,IAAIF,UAAU,GACpD,qCAAqCC,UAAY,IAAIC,uBAAyB,EAAC,GAChFqB,SACH;IACD,oBAAoB,2CAA2CtB,UAAY;EAAG,CAC9E,CAAC;AAEJ;AAEA,OAAO,MAAMuB,UAAU,GAAG9B,UAAU,CAAEE,qBAAsB,CAAC;AAE7D,eAAe4B,UAAU","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function Token({
   termsCount
 }) {
   const instanceId = useInstanceId(Token);
-  const tokenClasses = classnames('components-form-token-field__token', {
+  const tokenClasses = clsx('components-form-token-field__token', {
     'is-error': 'error' === status,
     'is-success': 'success' === status,
     'is-validating': 'validating' === status,

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useInstanceId","__","sprintf","closeSmall","Button","VisuallyHidden","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","tokenClasses","onClick","transformedValue","termPositionAndCount","createElement","className","id","as","icon","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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,cAAc,QAAQ,oBAAoB;AAGnD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,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,GAAGpB,aAAa,CAAEO,KAAM,CAAC;EACzC,MAAMc,YAAY,GAAGtB,UAAU,CAAE,oCAAoC,EAAE;IACtE,UAAU,EAAE,OAAO,KAAKU,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMS,OAAO,GAAGA,CAAA,KAAMR,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMe,gBAAgB,GAAGZ,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMgB,oBAAoB,GAAGtB,OAAO,EACnC;EACAD,EAAE,CAAE,qBAAsB,CAAC,EAC3BsB,gBAAgB,EAChBL,YAAY,EACZC,UACD,CAAC;EAED,OACCM,aAAA;IACCC,SAAS,EAAGL,YAAc;IAC1BN,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA;EAAO,GAEfe,aAAA;IACCC,SAAS,EAAC,yCAAyC;IACnDC,EAAE,EAAI,2CAA2CP,UAAY;EAAG,GAEhEK,aAAA,CAACpB,cAAc;IAACuB,EAAE,EAAC;EAAM,GACtBJ,oBACa,CAAC,EACjBC,aAAA;IAAM,eAAY;EAAM,GAAGF,gBAAwB,CAC9C,CAAC,EAEPE,aAAA,CAACrB,MAAM;IACNsB,SAAS,EAAC,2CAA2C;IACrDG,IAAI,EAAG1B,UAAY;IACnBmB,OAAO,EAAG,CAAET,QAAQ,GAAGS,OAAO,GAAGQ,SAAW;IAC5CjB,QAAQ,EAAGA,QAAU;IACrBkB,KAAK,EAAGd,QAAQ,CAACe,MAAQ;IACzB,oBAAoB,2CAA2CZ,UAAY;EAAG,CAC9E,CACI,CAAC;AAET","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","__","sprintf","closeSmall","Button","VisuallyHidden","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","tokenClasses","onClick","transformedValue","termPositionAndCount","createElement","className","id","as","icon","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 = clsx( '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":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,cAAc,QAAQ,oBAAoB;AAGnD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,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,GAAGpB,aAAa,CAAEO,KAAM,CAAC;EACzC,MAAMc,YAAY,GAAGtB,IAAI,CAAE,oCAAoC,EAAE;IAChE,UAAU,EAAE,OAAO,KAAKU,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMS,OAAO,GAAGA,CAAA,KAAMR,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMe,gBAAgB,GAAGZ,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMgB,oBAAoB,GAAGtB,OAAO,EACnC;EACAD,EAAE,CAAE,qBAAsB,CAAC,EAC3BsB,gBAAgB,EAChBL,YAAY,EACZC,UACD,CAAC;EAED,OACCM,aAAA;IACCC,SAAS,EAAGL,YAAc;IAC1BN,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA;EAAO,GAEfe,aAAA;IACCC,SAAS,EAAC,yCAAyC;IACnDC,EAAE,EAAI,2CAA2CP,UAAY;EAAG,GAEhEK,aAAA,CAACpB,cAAc;IAACuB,EAAE,EAAC;EAAM,GACtBJ,oBACa,CAAC,EACjBC,aAAA;IAAM,eAAY;EAAM,GAAGF,gBAAwB,CAC9C,CAAC,EAEPE,aAAA,CAACrB,MAAM;IACNsB,SAAS,EAAC,2CAA2C;IACrDG,IAAI,EAAG1B,UAAY;IACnBmB,OAAO,EAAG,CAAET,QAAQ,GAAGS,OAAO,GAAGQ,SAAW;IAC5CjB,QAAQ,EAAGA,QAAU;IACrBkB,KAAK,EAAGd,QAAQ,CAACe,MAAQ;IACzB,oBAAoB,2CAA2CZ,UAAY;EAAG,CAC9E,CACI,CAAC;AAET","ignoreList":[]}

package/build-module/guide/index.js

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -96,7 +96,7 @@ function Guide({
     return null;
   }
   return createElement(Modal, {
-    className: classnames('components-guide', className),
+    className: clsx('components-guide', className),
     contentLabel: contentLabel,
     isDismissible: pages.length > 1,
     onRequestClose: onFinish,

package/build-module/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","ref","currentPage","setCurrentPage","frame","current","querySelector","HTMLElement","focus","count","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","createElement","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","image","numberOfPages","variant","onClick"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","useEffect","Children","useRef","deprecated","__","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","ref","currentPage","setCurrentPage","frame","current","querySelector","HTMLElement","focus","count","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","createElement","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","image","numberOfPages","variant","onClick"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -48,17 +48,14 @@ export function UnforwardedInputControl(props, ref) {
     ...restProps
   } = useDeprecated36pxDefaultSizeProp(props);
   const id = useUniqueId(idProp);
-  const classes = classNames('components-input-control', className);
+  const classes = clsx('components-input-control', className);
   const draftHookProps = useDraft({
     value,
     onBlur: restProps.onBlur,
     onChange
   });
-
-  // ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-  const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
   const helpProp = !!help ? {
-    [helpPropName]: `${id}__help`
+    'aria-describedby': `${id}__help`
   } : {};
   return createElement(BaseControl, {
     className: classes,

package/build-module/input-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classNames","useInstanceId","forwardRef","InputBase","InputField","space","useDraft","BaseControl","useDeprecated36pxDefaultSizeProp","noop","useUniqueId","idProp","instanceId","InputControl","id","UnforwardedInputControl","props","ref","__next40pxDefaultSize","__unstableStateReducer","stateReducer","state","__unstableInputWidth","className","disabled","help","hideLabelFromVision","isPressEnterToChange","label","labelPosition","onChange","onValidate","onKeyDown","prefix","size","style","suffix","value","restProps","classes","draftHookProps","onBlur","helpPropName","helpProp","createElement","__nextHasNoMarginBottom","gap","justify","paddingInlineStart","undefined","paddingInlineEnd"],"sources":["@wordpress/components/src/input-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport type { InputControlProps } from './types';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputControl );\n\tconst id = `inspector-input-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nexport function UnforwardedInputControl(\n\tprops: InputControlProps,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\t__unstableInputWidth,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision = false,\n\t\tid: idProp,\n\t\tisPressEnterToChange = false,\n\t\tlabel,\n\t\tlabelPosition = 'top',\n\t\tonChange = noop,\n\t\tonValidate = noop,\n\t\tonKeyDown = noop,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tsuffix,\n\t\tvalue,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );\n\n\tconst id = useUniqueId( idProp );\n\tconst classes = classNames( 'components-input-control', className );\n\n\tconst draftHookProps = useDraft( {\n\t\tvalue,\n\t\tonBlur: restProps.onBlur,\n\t\tonChange,\n\t} );\n\n\t// ARIA descriptions can only contain plain text, so fall back to aria-details if not.\n\tconst helpPropName =\n\t\ttypeof help === 'string' ? 'aria-describedby' : 'aria-details';\n\tconst helpProp = !! help ? { [ helpPropName ]: `${ id }__help` } : {};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classes }\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tgap={ 3 }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tjustify=\"left\"\n\t\t\t\tlabel={ label }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tprefix={ prefix }\n\t\t\t\tsize={ size }\n\t\t\t\tstyle={ style }\n\t\t\t\tsuffix={ suffix }\n\t\t\t>\n\t\t\t\t<InputField\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t{ ...helpProp }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\tclassName=\"components-input-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tonValidate={ onValidate }\n\t\t\t\t\tpaddingInlineStart={ prefix ? space( 2 ) : undefined }\n\t\t\t\t\tpaddingInlineEnd={ suffix ? space( 2 ) : undefined }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstateReducer={ stateReducer }\n\t\t\t\t\t{ ...draftHookProps }\n\t\t\t\t/>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef( UnforwardedInputControl );\n\nexport default InputControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","forwardRef","InputBase","InputField","space","useDraft","BaseControl","useDeprecated36pxDefaultSizeProp","noop","useUniqueId","idProp","instanceId","InputControl","id","UnforwardedInputControl","props","ref","__next40pxDefaultSize","__unstableStateReducer","stateReducer","state","__unstableInputWidth","className","disabled","help","hideLabelFromVision","isPressEnterToChange","label","labelPosition","onChange","onValidate","onKeyDown","prefix","size","style","suffix","value","restProps","classes","draftHookProps","onBlur","helpProp","createElement","__nextHasNoMarginBottom","gap","justify","paddingInlineStart","undefined","paddingInlineEnd"],"sources":["@wordpress/components/src/input-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport type { InputControlProps } from './types';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputControl );\n\tconst id = `inspector-input-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nexport function UnforwardedInputControl(\n\tprops: InputControlProps,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\t__unstableInputWidth,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision = false,\n\t\tid: idProp,\n\t\tisPressEnterToChange = false,\n\t\tlabel,\n\t\tlabelPosition = 'top',\n\t\tonChange = noop,\n\t\tonValidate = noop,\n\t\tonKeyDown = noop,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tsuffix,\n\t\tvalue,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );\n\n\tconst id = useUniqueId( idProp );\n\tconst classes = clsx( 'components-input-control', className );\n\n\tconst draftHookProps = useDraft( {\n\t\tvalue,\n\t\tonBlur: restProps.onBlur,\n\t\tonChange,\n\t} );\n\n\tconst helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classes }\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tgap={ 3 }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tjustify=\"left\"\n\t\t\t\tlabel={ label }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tprefix={ prefix }\n\t\t\t\tsize={ size }\n\t\t\t\tstyle={ style }\n\t\t\t\tsuffix={ suffix }\n\t\t\t>\n\t\t\t\t<InputField\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t{ ...helpProp }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\tclassName=\"components-input-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tonValidate={ onValidate }\n\t\t\t\t\tpaddingInlineStart={ prefix ? space( 2 ) : undefined }\n\t\t\t\t\tpaddingInlineEnd={ suffix ? space( 2 ) : undefined }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstateReducer={ stateReducer }\n\t\t\t\t\t{ ...draftHookProps }\n\t\t\t\t/>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef( UnforwardedInputControl );\n\nexport default InputControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/menu-group/index.js

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -41,7 +41,7 @@ export function MenuGroup(props) {
     return null;
   }
   const labelId = `components-menu-group-label-${instanceId}`;
-  const classNames = classnames(className, 'components-menu-group', {
+  const classNames = clsx(className, 'components-menu-group', {
     'has-hidden-separator': hideSeparator
   });
   return createElement("div", {

package/build-module/menu-group/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","Children","useInstanceId","MenuGroup","props","children","className","label","hideSeparator","instanceId","count","labelId","classNames","createElement","id","role","undefined"],"sources":["@wordpress/components/src/menu-group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Children } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { MenuGroupProps } from './types';\n\n/**\n * `MenuGroup` wraps a series of related `MenuItem` components into a common\n * section.\n *\n * ```jsx\n * import { MenuGroup, MenuItem } from '@wordpress/components';\n *\n * const MyMenuGroup = () => (\n *   <MenuGroup label=\"Settings\">\n *     <MenuItem>Setting 1</MenuItem>\n *     <MenuItem>Setting 2</MenuItem>\n *   </MenuGroup>\n * );\n * ```\n */\nexport function MenuGroup( props: MenuGroupProps ) {\n\tconst { children, className = '', label, hideSeparator } = props;\n\tconst instanceId = useInstanceId( MenuGroup );\n\n\tif ( ! Children.count( children ) ) {\n\t\treturn null;\n\t}\n\n\tconst labelId = `components-menu-group-label-${ instanceId }`;\n\tconst classNames = classnames( className, 'components-menu-group', {\n\t\t'has-hidden-separator': hideSeparator,\n\t} );\n\n\treturn (\n\t\t<div className={ classNames }>\n\t\t\t{ label && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-menu-group__label\"\n\t\t\t\t\tid={ labelId }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div role=\"group\" aria-labelledby={ label ? labelId : undefined }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default MenuGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAEC,KAAqB,EAAG;EAClD,MAAM;IAAEC,QAAQ;IAAEC,SAAS,GAAG,EAAE;IAAEC,KAAK;IAAEC;EAAc,CAAC,GAAGJ,KAAK;EAChE,MAAMK,UAAU,GAAGP,aAAa,CAAEC,SAAU,CAAC;EAE7C,IAAK,CAAEF,QAAQ,CAACS,KAAK,CAAEL,QAAS,CAAC,EAAG;IACnC,OAAO,IAAI;EACZ;EAEA,MAAMM,OAAO,GAAI,+BAA+BF,UAAY,EAAC;EAC7D,MAAMG,UAAU,GAAGZ,UAAU,CAAEM,SAAS,EAAE,uBAAuB,EAAE;IAClE,sBAAsB,EAAEE;EACzB,CAAE,CAAC;EAEH,OACCK,aAAA;IAAKP,SAAS,EAAGM;EAAY,GAC1BL,KAAK,IACNM,aAAA;IACCP,SAAS,EAAC,8BAA8B;IACxCQ,EAAE,EAAGH,OAAS;IACd,eAAY;EAAM,GAEhBJ,KACE,CACL,EACDM,aAAA;IAAKE,IAAI,EAAC,OAAO;IAAC,mBAAkBR,KAAK,GAAGI,OAAO,GAAGK;EAAW,GAC9DX,QACE,CACD,CAAC;AAER;AAEA,eAAeF,SAAS","ignoreList":[]}
+{"version":3,"names":["clsx","Children","useInstanceId","MenuGroup","props","children","className","label","hideSeparator","instanceId","count","labelId","classNames","createElement","id","role","undefined"],"sources":["@wordpress/components/src/menu-group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Children } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { MenuGroupProps } from './types';\n\n/**\n * `MenuGroup` wraps a series of related `MenuItem` components into a common\n * section.\n *\n * ```jsx\n * import { MenuGroup, MenuItem } from '@wordpress/components';\n *\n * const MyMenuGroup = () => (\n *   <MenuGroup label=\"Settings\">\n *     <MenuItem>Setting 1</MenuItem>\n *     <MenuItem>Setting 2</MenuItem>\n *   </MenuGroup>\n * );\n * ```\n */\nexport function MenuGroup( props: MenuGroupProps ) {\n\tconst { children, className = '', label, hideSeparator } = props;\n\tconst instanceId = useInstanceId( MenuGroup );\n\n\tif ( ! Children.count( children ) ) {\n\t\treturn null;\n\t}\n\n\tconst labelId = `components-menu-group-label-${ instanceId }`;\n\tconst classNames = clsx( className, 'components-menu-group', {\n\t\t'has-hidden-separator': hideSeparator,\n\t} );\n\n\treturn (\n\t\t<div className={ classNames }>\n\t\t\t{ label && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-menu-group__label\"\n\t\t\t\t\tid={ labelId }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div role=\"group\" aria-labelledby={ label ? labelId : undefined }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default MenuGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAEC,KAAqB,EAAG;EAClD,MAAM;IAAEC,QAAQ;IAAEC,SAAS,GAAG,EAAE;IAAEC,KAAK;IAAEC;EAAc,CAAC,GAAGJ,KAAK;EAChE,MAAMK,UAAU,GAAGP,aAAa,CAAEC,SAAU,CAAC;EAE7C,IAAK,CAAEF,QAAQ,CAACS,KAAK,CAAEL,QAAS,CAAC,EAAG;IACnC,OAAO,IAAI;EACZ;EAEA,MAAMM,OAAO,GAAI,+BAA+BF,UAAY,EAAC;EAC7D,MAAMG,UAAU,GAAGZ,IAAI,CAAEM,SAAS,EAAE,uBAAuB,EAAE;IAC5D,sBAAsB,EAAEE;EACzB,CAAE,CAAC;EAEH,OACCK,aAAA;IAAKP,SAAS,EAAGM;EAAY,GAC1BL,KAAK,IACNM,aAAA;IACCP,SAAS,EAAC,8BAA8B;IACxCQ,EAAE,EAAGH,OAAS;IACd,eAAY;EAAM,GAEhBJ,KACE,CACL,EACDM,aAAA;IAAKE,IAAI,EAAC,OAAO;IAAC,mBAAkBR,KAAK,GAAGI,OAAO,GAAGK;EAAW,GAC9DX,QACE,CACD,CAAC;AAER;AAEA,eAAeF,SAAS","ignoreList":[]}

package/build-module/menu-item/index.js

@@ -3,7 +3,7 @@ import { createElement } from "react";
  * External dependencies
  */
 
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -29,7 +29,7 @@ function UnforwardedMenuItem(props, ref) {
     suffix,
     ...buttonProps
   } = props;
-  className = classnames('components-menu-item__button', className);
+  className = clsx('components-menu-item__button', className);
   if (info) {
     children = createElement("span", {
       className: "components-menu-item__info-wrapper"
@@ -41,7 +41,7 @@ function UnforwardedMenuItem(props, ref) {
   }
   if (icon && typeof icon !== 'string') {
     icon = cloneElement(icon, {
-      className: classnames('components-menu-items__item-icon', {
+      className: clsx('components-menu-items__item-icon', {
         'has-icon-right': iconPosition === 'right'
       })
     });

package/build-module/menu-item/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","cloneElement","forwardRef","Shortcut","Button","Icon","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","createElement","undefined","MenuItem"],"sources":["@wordpress/components/src/menu-item/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport type { WordPressComponentProps } from '../context';\nimport type { MenuItemProps } from './types';\n\nfunction UnforwardedMenuItem(\n\tprops: WordPressComponentProps< MenuItemProps, 'button', false >,\n\tref: ForwardedRef< HTMLButtonElement >\n) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\tsuffix,\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = classnames( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: classnames( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' || role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t{ ! suffix && (\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! suffix && icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t) }\n\t\t\t{ suffix }\n\t\t</Button>\n\t);\n}\n\n/**\n * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n *\n * ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n *\n * \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef( UnforwardedMenuItem );\n\nexport default MenuItem;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAI1B,SAASC,mBAAmBA,CAC3BC,KAAgE,EAChEC,GAAsC,EACrC;EACD,IAAI;IACHC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,QAAQ;IACRC,UAAU;IACVC,IAAI,GAAG,UAAU;IACjBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAETI,SAAS,GAAGX,UAAU,CAAE,8BAA8B,EAAEW,SAAU,CAAC;EAEnE,IAAKD,IAAI,EAAG;IACXD,QAAQ,GACPU,aAAA;MAAMR,SAAS,EAAC;IAAoC,GACnDQ,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGF,QAAgB,CAAC,EAChEU,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGD,IAAY,CACtD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAGX,YAAY,CAAEW,IAAI,EAAE;MAC1BD,SAAS,EAAEX,UAAU,CAAE,kCAAkC,EAAE;QAC1D,gBAAgB,EAAEa,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,OACCM,aAAA,CAACf,MAAM;IACNI,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVK,SACH;IACDJ,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGQ,SAAW;IACnDT,SAAS,EAAGA,SAAW;IAAA,GAClBO;EAAW,GAEhBC,aAAA;IAAMR,SAAS,EAAC;EAA4B,GAAGF,QAAgB,CAAC,EAC9D,CAAEQ,MAAM,IACTE,aAAA,CAAChB,QAAQ;IACRQ,SAAS,EAAC,gCAAgC;IAC1CG,QAAQ,EAAGA;EAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,IAC7CM,aAAA,CAACd,IAAI;IAACO,IAAI,EAAGA;EAAM,CAAE,CACrB,EACCK,MACK,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGnB,UAAU,CAAEI,mBAAoB,CAAC;AAEzD,eAAee,QAAQ","ignoreList":[]}
+{"version":3,"names":["clsx","cloneElement","forwardRef","Shortcut","Button","Icon","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","createElement","undefined","MenuItem"],"sources":["@wordpress/components/src/menu-item/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport type { WordPressComponentProps } from '../context';\nimport type { MenuItemProps } from './types';\n\nfunction UnforwardedMenuItem(\n\tprops: WordPressComponentProps< MenuItemProps, 'button', false >,\n\tref: ForwardedRef< HTMLButtonElement >\n) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\tsuffix,\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = clsx( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: clsx( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' || role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t{ ! suffix && (\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! suffix && icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t) }\n\t\t\t{ suffix }\n\t\t</Button>\n\t);\n}\n\n/**\n * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n *\n * ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n *\n * \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef( UnforwardedMenuItem );\n\nexport default MenuItem;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAI1B,SAASC,mBAAmBA,CAC3BC,KAAgE,EAChEC,GAAsC,EACrC;EACD,IAAI;IACHC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,QAAQ;IACRC,UAAU;IACVC,IAAI,GAAG,UAAU;IACjBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAETI,SAAS,GAAGX,IAAI,CAAE,8BAA8B,EAAEW,SAAU,CAAC;EAE7D,IAAKD,IAAI,EAAG;IACXD,QAAQ,GACPU,aAAA;MAAMR,SAAS,EAAC;IAAoC,GACnDQ,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGF,QAAgB,CAAC,EAChEU,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGD,IAAY,CACtD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAGX,YAAY,CAAEW,IAAI,EAAE;MAC1BD,SAAS,EAAEX,IAAI,CAAE,kCAAkC,EAAE;QACpD,gBAAgB,EAAEa,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,OACCM,aAAA,CAACf,MAAM;IACNI,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVK,SACH;IACDJ,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGQ,SAAW;IACnDT,SAAS,EAAGA,SAAW;IAAA,GAClBO;EAAW,GAEhBC,aAAA;IAAMR,SAAS,EAAC;EAA4B,GAAGF,QAAgB,CAAC,EAC9D,CAAEQ,MAAM,IACTE,aAAA,CAAChB,QAAQ;IACRQ,SAAS,EAAC,gCAAgC;IAC1CG,QAAQ,EAAGA;EAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,IAC7CM,aAAA,CAACd,IAAI;IAACO,IAAI,EAAGA;EAAM,CAAE,CACrB,EACCK,MACK,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGnB,UAAU,CAAEI,mBAAoB,CAAC;AAEzD,eAAee,QAAQ","ignoreList":[]}

package/build-module/mobile/color-settings/utils.native.js

@@ -27,7 +27,7 @@ export const colorsUtils = {
     picker: 'Picker',
     palette: 'Palette'
   },
-  segments: [__('Solid'), __('Gradient')],
+  segments: [__('Color'), __('Gradient')],
   gradients,
   gradientOptions,
   getGradientType,

package/build-module/mobile/color-settings/utils.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","gradients","linear","radial","gradientOptions","label","value","getGradientType","color","includes","colorsUtils","screens","gradientPicker","picker","palette","segments","isGradient"],"sources":["@wordpress/components/src/mobile/color-settings/utils.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst gradients = {\n\tlinear: 'linear-gradient',\n\tradial: 'radial-gradient',\n};\n\nconst gradientOptions = [\n\t{ label: __( 'Linear' ), value: gradients.linear },\n\t{ label: __( 'Radial' ), value: gradients.radial },\n];\n\nconst getGradientType = ( color ) => {\n\tif ( color?.includes( gradients.radial ) ) {\n\t\treturn gradients.radial;\n\t} else if ( color?.includes( gradients.linear ) ) {\n\t\treturn gradients.linear;\n\t}\n\treturn false;\n};\n\nexport const colorsUtils = {\n\tscreens: {\n\t\tgradientPicker: 'GradientPicker',\n\t\tpicker: 'Picker',\n\t\tpalette: 'Palette',\n\t},\n\tsegments: [ __( 'Solid' ), __( 'Gradient' ) ],\n\tgradients,\n\tgradientOptions,\n\tgetGradientType,\n\tisGradient: ( color ) => !! getGradientType( color ),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,MAAMC,SAAS,GAAG;EACjBC,MAAM,EAAE,iBAAiB;EACzBC,MAAM,EAAE;AACT,CAAC;AAED,MAAMC,eAAe,GAAG,CACvB;EAAEC,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACC;AAAO,CAAC,EAClD;EAAEG,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACE;AAAO,CAAC,CAClD;AAED,MAAMI,eAAe,GAAKC,KAAK,IAAM;EACpC,IAAKA,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACE,MAAO,CAAC,EAAG;IAC1C,OAAOF,SAAS,CAACE,MAAM;EACxB,CAAC,MAAM,IAAKK,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACC,MAAO,CAAC,EAAG;IACjD,OAAOD,SAAS,CAACC,MAAM;EACxB;EACA,OAAO,KAAK;AACb,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAG;EAC1BC,OAAO,EAAE;IACRC,cAAc,EAAE,gBAAgB;IAChCC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE,CAAEf,EAAE,CAAE,OAAQ,CAAC,EAAEA,EAAE,CAAE,UAAW,CAAC,CAAE;EAC7CC,SAAS;EACTG,eAAe;EACfG,eAAe;EACfS,UAAU,EAAIR,KAAK,IAAM,CAAC,CAAED,eAAe,CAAEC,KAAM;AACpD,CAAC","ignoreList":[]}
+{"version":3,"names":["__","gradients","linear","radial","gradientOptions","label","value","getGradientType","color","includes","colorsUtils","screens","gradientPicker","picker","palette","segments","isGradient"],"sources":["@wordpress/components/src/mobile/color-settings/utils.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst gradients = {\n\tlinear: 'linear-gradient',\n\tradial: 'radial-gradient',\n};\n\nconst gradientOptions = [\n\t{ label: __( 'Linear' ), value: gradients.linear },\n\t{ label: __( 'Radial' ), value: gradients.radial },\n];\n\nconst getGradientType = ( color ) => {\n\tif ( color?.includes( gradients.radial ) ) {\n\t\treturn gradients.radial;\n\t} else if ( color?.includes( gradients.linear ) ) {\n\t\treturn gradients.linear;\n\t}\n\treturn false;\n};\n\nexport const colorsUtils = {\n\tscreens: {\n\t\tgradientPicker: 'GradientPicker',\n\t\tpicker: 'Picker',\n\t\tpalette: 'Palette',\n\t},\n\tsegments: [ __( 'Color' ), __( 'Gradient' ) ],\n\tgradients,\n\tgradientOptions,\n\tgetGradientType,\n\tisGradient: ( color ) => !! getGradientType( color ),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,MAAMC,SAAS,GAAG;EACjBC,MAAM,EAAE,iBAAiB;EACzBC,MAAM,EAAE;AACT,CAAC;AAED,MAAMC,eAAe,GAAG,CACvB;EAAEC,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACC;AAAO,CAAC,EAClD;EAAEG,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACE;AAAO,CAAC,CAClD;AAED,MAAMI,eAAe,GAAKC,KAAK,IAAM;EACpC,IAAKA,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACE,MAAO,CAAC,EAAG;IAC1C,OAAOF,SAAS,CAACE,MAAM;EACxB,CAAC,MAAM,IAAKK,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACC,MAAO,CAAC,EAAG;IACjD,OAAOD,SAAS,CAACC,MAAM;EACxB;EACA,OAAO,KAAK;AACb,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAG;EAC1BC,OAAO,EAAE;IACRC,cAAc,EAAE,gBAAgB;IAChCC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE,CAAEf,EAAE,CAAE,OAAQ,CAAC,EAAEA,EAAE,CAAE,UAAW,CAAC,CAAE;EAC7CC,SAAS;EACTG,eAAe;EACfG,eAAe;EACfS,UAAU,EAAIR,KAAK,IAAM,CAAC,CAAED,eAAe,CAAEC,KAAM;AACpD,CAAC","ignoreList":[]}

package/build-module/modal/index.js

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -202,13 +202,13 @@ function UnforwardedModal(props, forwardedRef) {
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
   createElement("div", {
     ref: useMergeRefs([ref, forwardedRef]),
-    className: classnames('components-modal__screen-overlay', overlayClassName),
+    className: clsx('components-modal__screen-overlay', overlayClassName),
     onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),
     ...(shouldCloseOnClickOutside ? overlayPressHandlers : {})
   }, createElement(StyleProvider, {
     document: document
   }, createElement("div", {
-    className: classnames('components-modal__frame', sizeClass, className),
+    className: clsx('components-modal__frame', sizeClass, className),
     style: style,
     ref: useMergeRefs([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
     role: role,
@@ -218,7 +218,7 @@ function UnforwardedModal(props, forwardedRef) {
     tabIndex: -1,
     onKeyDown: onKeyDown
   }, createElement("div", {
-    className: classnames('components-modal__content', {
+    className: clsx('components-modal__content', {
       'hide-header': __experimentalHideHeader,
       'is-scrollable': hasScrollableContent,
       'has-scrolled-content': hasScrolledContent

package/build-module/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","createPortal","useCallback","useEffect","useRef","useState","forwardRef","useLayoutEffect","createContext","useContext","useInstanceId","useFocusReturn","useFocusOnMount","useConstrainedTabbing","useMergeRefs","__","close","getScrollContainer","ariaHelper","Button","StyleProvider","withIgnoreIMEEvents","ModalContext","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","instanceId","Modal","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","current","closestScrollContainer","modalize","unmodalize","refOnRequestClose","dismissers","nestedDismissers","push","first","second","nested","shift","_bodyOpenClasses$get","theClass","oneMore","get","set","document","body","classList","add","oneLess","remove","delete","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","code","key","defaultPrevented","preventDefault","onContentContainerScroll","e","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","createElement","tabIndex","onScroll","id","onClick","label","Provider","value"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tForwardedRef,\n\tKeyboardEvent,\n\tMutableRefObject,\n\tUIEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nconst ModalContext = createContext<\n\tMutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]\n>( [] );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's **content** when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen || size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst nestedDismissers = useRef< typeof dismissers >( [] );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\tdismissers.push( refOnRequestClose );\n\t\tconst [ first, second ] = dismissers;\n\t\tif ( second ) {\n\t\t\tfirst?.current?.();\n\t\t}\n\n\t\tconst nested = nestedDismissers.current;\n\t\treturn () => {\n\t\t\tnested[ 0 ]?.current?.();\n\t\t\tdismissers.shift();\n\t\t};\n\t}, [ dismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver || ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' || event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget | null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) {\n\t\t\t\tonRequestClose();\n\t\t\t}\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel || __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers.current }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","createPortal","useCallback","useEffect","useRef","useState","forwardRef","useLayoutEffect","createContext","useContext","useInstanceId","useFocusReturn","useFocusOnMount","useConstrainedTabbing","useMergeRefs","__","close","getScrollContainer","ariaHelper","Button","StyleProvider","withIgnoreIMEEvents","ModalContext","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","instanceId","Modal","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","current","closestScrollContainer","modalize","unmodalize","refOnRequestClose","dismissers","nestedDismissers","push","first","second","nested","shift","_bodyOpenClasses$get","theClass","oneMore","get","set","document","body","classList","add","oneLess","remove","delete","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","code","key","defaultPrevented","preventDefault","onContentContainerScroll","e","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","createElement","tabIndex","onScroll","id","onClick","label","Provider","value"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type {\n\tForwardedRef,\n\tKeyboardEvent,\n\tMutableRefObject,\n\tUIEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nconst ModalContext = createContext<\n\tMutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]\n>( [] );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's **content** when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen || size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst nestedDismissers = useRef< typeof dismissers >( [] );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\tdismissers.push( refOnRequestClose );\n\t\tconst [ first, second ] = dismissers;\n\t\tif ( second ) {\n\t\t\tfirst?.current?.();\n\t\t}\n\n\t\tconst nested = nestedDismissers.current;\n\t\treturn () => {\n\t\t\tnested[ 0 ]?.current?.();\n\t\t\tdismissers.shift();\n\t\t};\n\t}, [ dismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver || ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' || event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget | null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) {\n\t\t\t\tonRequestClose();\n\t\t\t}\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel || __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers.current }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}

package/build-module/navigation/back-button/index.js

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -26,7 +26,7 @@ function UnforwardedNavigationBackButton({
     setActiveMenu,
     navigationTree
   } = useNavigationContext();
-  const classes = classnames('components-navigation__back-button', className);
+  const classes = clsx('components-navigation__back-button', className);
   const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined;
   const handleOnClick = event => {
     if (typeof onClick === 'function') {

package/build-module/navigation/back-button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","forwardRef","__","isRTL","Icon","chevronLeft","chevronRight","useNavigationContext","MenuBackButtonUI","UnforwardedNavigationBackButton","backButtonLabel","className","href","onClick","parentMenu","ref","setActiveMenu","navigationTree","classes","parentMenuTitle","undefined","getMenu","title","handleOnClick","event","animationDirection","defaultPrevented","icon","createElement","variant","NavigationBackButton"],"sources":["@wordpress/components/src/navigation/back-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { MenuBackButtonUI } from '../styles/navigation-styles';\n\nimport type { NavigationBackButtonProps } from '../types';\n\nfunction UnforwardedNavigationBackButton(\n\t{\n\t\tbackButtonLabel,\n\t\tclassName,\n\t\thref,\n\t\tonClick,\n\t\tparentMenu,\n\t}: NavigationBackButtonProps,\n\tref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >\n) {\n\tconst { setActiveMenu, navigationTree } = useNavigationContext();\n\n\tconst classes = classnames(\n\t\t'components-navigation__back-button',\n\t\tclassName\n\t);\n\n\tconst parentMenuTitle =\n\t\tparentMenu !== undefined\n\t\t\t? navigationTree.getMenu( parentMenu )?.title\n\t\t\t: undefined;\n\n\tconst handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {\n\t\tif ( typeof onClick === 'function' ) {\n\t\t\tonClick( event );\n\t\t}\n\n\t\tconst animationDirection = isRTL() ? 'left' : 'right';\n\t\tif ( parentMenu && ! event.defaultPrevented ) {\n\t\t\tsetActiveMenu( parentMenu, animationDirection );\n\t\t}\n\t};\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\treturn (\n\t\t<MenuBackButtonUI\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tvariant=\"tertiary\"\n\t\t\tref={ ref }\n\t\t\tonClick={ handleOnClick }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t\t{ backButtonLabel || parentMenuTitle || __( 'Back' ) }\n\t\t</MenuBackButtonUI>\n\t);\n}\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport const NavigationBackButton = forwardRef(\n\tUnforwardedNavigationBackButton\n);\n\nexport default NavigationBackButton;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AACnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,IAAI,EAAEC,WAAW,EAAEC,YAAY,QAAQ,kBAAkB;;AAElE;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,YAAY;AACjD,SAASC,gBAAgB,QAAQ,6BAA6B;AAI9D,SAASC,+BAA+BA,CACvC;EACCC,eAAe;EACfC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC;AAC0B,CAAC,EAC5BC,GAAgE,EAC/D;EACD,MAAM;IAAEC,aAAa;IAAEC;EAAe,CAAC,GAAGV,oBAAoB,CAAC,CAAC;EAEhE,MAAMW,OAAO,GAAGlB,UAAU,CACzB,oCAAoC,EACpCW,SACD,CAAC;EAED,MAAMQ,eAAe,GACpBL,UAAU,KAAKM,SAAS,GACrBH,cAAc,CAACI,OAAO,CAAEP,UAAW,CAAC,EAAEQ,KAAK,GAC3CF,SAAS;EAEb,MAAMG,aAAqD,GAAKC,KAAK,IAAM;IAC1E,IAAK,OAAOX,OAAO,KAAK,UAAU,EAAG;MACpCA,OAAO,CAAEW,KAAM,CAAC;IACjB;IAEA,MAAMC,kBAAkB,GAAGtB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO;IACrD,IAAKW,UAAU,IAAI,CAAEU,KAAK,CAACE,gBAAgB,EAAG;MAC7CV,aAAa,CAAEF,UAAU,EAAEW,kBAAmB,CAAC;IAChD;EACD,CAAC;EACD,MAAME,IAAI,GAAGxB,KAAK,CAAC,CAAC,GAAGG,YAAY,GAAGD,WAAW;EACjD,OACCuB,aAAA,CAACpB,gBAAgB;IAChBG,SAAS,EAAGO,OAAS;IACrBN,IAAI,EAAGA,IAAM;IACbiB,OAAO,EAAC,UAAU;IAClBd,GAAG,EAAGA,GAAK;IACXF,OAAO,EAAGU;EAAe,GAEzBK,aAAA,CAACxB,IAAI;IAACuB,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBjB,eAAe,IAAIS,eAAe,IAAIjB,EAAE,CAAE,MAAO,CAClC,CAAC;AAErB;;AAEA;AACA;AACA;AACA,OAAO,MAAM4B,oBAAoB,GAAG7B,UAAU,CAC7CQ,+BACD,CAAC;AAED,eAAeqB,oBAAoB","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","__","isRTL","Icon","chevronLeft","chevronRight","useNavigationContext","MenuBackButtonUI","UnforwardedNavigationBackButton","backButtonLabel","className","href","onClick","parentMenu","ref","setActiveMenu","navigationTree","classes","parentMenuTitle","undefined","getMenu","title","handleOnClick","event","animationDirection","defaultPrevented","icon","createElement","variant","NavigationBackButton"],"sources":["@wordpress/components/src/navigation/back-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { MenuBackButtonUI } from '../styles/navigation-styles';\n\nimport type { NavigationBackButtonProps } from '../types';\n\nfunction UnforwardedNavigationBackButton(\n\t{\n\t\tbackButtonLabel,\n\t\tclassName,\n\t\thref,\n\t\tonClick,\n\t\tparentMenu,\n\t}: NavigationBackButtonProps,\n\tref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >\n) {\n\tconst { setActiveMenu, navigationTree } = useNavigationContext();\n\n\tconst classes = clsx( 'components-navigation__back-button', className );\n\n\tconst parentMenuTitle =\n\t\tparentMenu !== undefined\n\t\t\t? navigationTree.getMenu( parentMenu )?.title\n\t\t\t: undefined;\n\n\tconst handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {\n\t\tif ( typeof onClick === 'function' ) {\n\t\t\tonClick( event );\n\t\t}\n\n\t\tconst animationDirection = isRTL() ? 'left' : 'right';\n\t\tif ( parentMenu && ! event.defaultPrevented ) {\n\t\t\tsetActiveMenu( parentMenu, animationDirection );\n\t\t}\n\t};\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\treturn (\n\t\t<MenuBackButtonUI\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tvariant=\"tertiary\"\n\t\t\tref={ ref }\n\t\t\tonClick={ handleOnClick }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t\t{ backButtonLabel || parentMenuTitle || __( 'Back' ) }\n\t\t</MenuBackButtonUI>\n\t);\n}\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport const NavigationBackButton = forwardRef(\n\tUnforwardedNavigationBackButton\n);\n\nexport default NavigationBackButton;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AACvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,IAAI,EAAEC,WAAW,EAAEC,YAAY,QAAQ,kBAAkB;;AAElE;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,YAAY;AACjD,SAASC,gBAAgB,QAAQ,6BAA6B;AAI9D,SAASC,+BAA+BA,CACvC;EACCC,eAAe;EACfC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC;AAC0B,CAAC,EAC5BC,GAAgE,EAC/D;EACD,MAAM;IAAEC,aAAa;IAAEC;EAAe,CAAC,GAAGV,oBAAoB,CAAC,CAAC;EAEhE,MAAMW,OAAO,GAAGlB,IAAI,CAAE,oCAAoC,EAAEW,SAAU,CAAC;EAEvE,MAAMQ,eAAe,GACpBL,UAAU,KAAKM,SAAS,GACrBH,cAAc,CAACI,OAAO,CAAEP,UAAW,CAAC,EAAEQ,KAAK,GAC3CF,SAAS;EAEb,MAAMG,aAAqD,GAAKC,KAAK,IAAM;IAC1E,IAAK,OAAOX,OAAO,KAAK,UAAU,EAAG;MACpCA,OAAO,CAAEW,KAAM,CAAC;IACjB;IAEA,MAAMC,kBAAkB,GAAGtB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO;IACrD,IAAKW,UAAU,IAAI,CAAEU,KAAK,CAACE,gBAAgB,EAAG;MAC7CV,aAAa,CAAEF,UAAU,EAAEW,kBAAmB,CAAC;IAChD;EACD,CAAC;EACD,MAAME,IAAI,GAAGxB,KAAK,CAAC,CAAC,GAAGG,YAAY,GAAGD,WAAW;EACjD,OACCuB,aAAA,CAACpB,gBAAgB;IAChBG,SAAS,EAAGO,OAAS;IACrBN,IAAI,EAAGA,IAAM;IACbiB,OAAO,EAAC,UAAU;IAClBd,GAAG,EAAGA,GAAK;IACXF,OAAO,EAAGU;EAAe,GAEzBK,aAAA,CAACxB,IAAI;IAACuB,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBjB,eAAe,IAAIS,eAAe,IAAIjB,EAAE,CAAE,MAAO,CAClC,CAAC;AAErB;;AAEA;AACA;AACA;AACA,OAAO,MAAM4B,oBAAoB,GAAG7B,UAAU,CAC7CQ,+BACD,CAAC;AAED,eAAeqB,oBAAoB","ignoreList":[]}

package/build-module/navigation/group/index.js

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export function NavigationGroup({
     }, children);
   }
   const groupTitleId = `components-navigation__group-title-${groupId}`;
-  const classes = classnames('components-navigation__group', className);
+  const classes = clsx('components-navigation__group', className);
   return createElement(NavigationGroupContext.Provider, {
     value: context
   }, createElement("li", {

package/build-module/navigation/group/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","NavigationGroupContext","GroupTitleUI","useNavigationContext","uniqueId","NavigationGroup","children","className","title","groupId","navigationTree","items","context","group","Object","values","some","item","_isVisible","createElement","Provider","value","groupTitleId","classes","id","level","role"],"sources":["@wordpress/components/src/navigation/group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigationGroupContext } from './context';\nimport { GroupTitleUI } from '../styles/navigation-styles';\nimport { useNavigationContext } from '../context';\n\nimport type { NavigationGroupProps } from '../types';\n\nlet uniqueId = 0;\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport function NavigationGroup( {\n\tchildren,\n\tclassName,\n\ttitle,\n}: NavigationGroupProps ) {\n\tconst [ groupId ] = useState( `group-${ ++uniqueId }` );\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst context = { group: groupId };\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif (\n\t\t! Object.values( items ).some(\n\t\t\t( item ) => item.group === groupId && item._isVisible\n\t\t)\n\t) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = classnames( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n\nexport default NavigationGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;;AAE7C;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,WAAW;AAClD,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,oBAAoB,QAAQ,YAAY;AAIjD,IAAIC,QAAQ,GAAG,CAAC;;AAEhB;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAE;EAChCC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAG;EACzB,MAAM,CAAEC,OAAO,CAAE,GAAGT,QAAQ,CAAG,SAAS,EAAEI,QAAU,EAAE,CAAC;EACvD,MAAM;IACLM,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAGR,oBAAoB,CAAC,CAAC;EAE1B,MAAMS,OAAO,GAAG;IAAEC,KAAK,EAAEJ;EAAQ,CAAC;;EAElC;EACA,IACC,CAAEK,MAAM,CAACC,MAAM,CAAEJ,KAAM,CAAC,CAACK,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACJ,KAAK,KAAKJ,OAAO,IAAIQ,IAAI,CAACC,UAC5C,CAAC,EACA;IACD,OACCC,aAAA,CAAClB,sBAAsB,CAACmB,QAAQ;MAACC,KAAK,EAAGT;IAAS,GAC/CN,QAC8B,CAAC;EAEpC;EAEA,MAAMgB,YAAY,GAAI,sCAAsCb,OAAS,EAAC;EACtE,MAAMc,OAAO,GAAGxB,UAAU,CAAE,8BAA8B,EAAEQ,SAAU,CAAC;EAEvE,OACCY,aAAA,CAAClB,sBAAsB,CAACmB,QAAQ;IAACC,KAAK,EAAGT;EAAS,GACjDO,aAAA;IAAIZ,SAAS,EAAGgB;EAAS,GACtBf,KAAK,IACNW,aAAA,CAACjB,YAAY;IACZK,SAAS,EAAC,oCAAoC;IAC9CiB,EAAE,EAAGF,YAAc;IACnBG,KAAK,EAAG;EAAG,GAETjB,KACW,CACd,EACDW,aAAA;IAAI,mBAAkBG,YAAc;IAACI,IAAI,EAAC;EAAO,GAC9CpB,QACC,CACD,CAC4B,CAAC;AAEpC;AAEA,eAAeD,eAAe","ignoreList":[]}
+{"version":3,"names":["clsx","useState","NavigationGroupContext","GroupTitleUI","useNavigationContext","uniqueId","NavigationGroup","children","className","title","groupId","navigationTree","items","context","group","Object","values","some","item","_isVisible","createElement","Provider","value","groupTitleId","classes","id","level","role"],"sources":["@wordpress/components/src/navigation/group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigationGroupContext } from './context';\nimport { GroupTitleUI } from '../styles/navigation-styles';\nimport { useNavigationContext } from '../context';\n\nimport type { NavigationGroupProps } from '../types';\n\nlet uniqueId = 0;\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport function NavigationGroup( {\n\tchildren,\n\tclassName,\n\ttitle,\n}: NavigationGroupProps ) {\n\tconst [ groupId ] = useState( `group-${ ++uniqueId }` );\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst context = { group: groupId };\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif (\n\t\t! Object.values( items ).some(\n\t\t\t( item ) => item.group === groupId && item._isVisible\n\t\t)\n\t) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = clsx( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n\nexport default NavigationGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;;AAE7C;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,WAAW;AAClD,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,oBAAoB,QAAQ,YAAY;AAIjD,IAAIC,QAAQ,GAAG,CAAC;;AAEhB;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAE;EAChCC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAG;EACzB,MAAM,CAAEC,OAAO,CAAE,GAAGT,QAAQ,CAAG,SAAS,EAAEI,QAAU,EAAE,CAAC;EACvD,MAAM;IACLM,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAGR,oBAAoB,CAAC,CAAC;EAE1B,MAAMS,OAAO,GAAG;IAAEC,KAAK,EAAEJ;EAAQ,CAAC;;EAElC;EACA,IACC,CAAEK,MAAM,CAACC,MAAM,CAAEJ,KAAM,CAAC,CAACK,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACJ,KAAK,KAAKJ,OAAO,IAAIQ,IAAI,CAACC,UAC5C,CAAC,EACA;IACD,OACCC,aAAA,CAAClB,sBAAsB,CAACmB,QAAQ;MAACC,KAAK,EAAGT;IAAS,GAC/CN,QAC8B,CAAC;EAEpC;EAEA,MAAMgB,YAAY,GAAI,sCAAsCb,OAAS,EAAC;EACtE,MAAMc,OAAO,GAAGxB,IAAI,CAAE,8BAA8B,EAAEQ,SAAU,CAAC;EAEjE,OACCY,aAAA,CAAClB,sBAAsB,CAACmB,QAAQ;IAACC,KAAK,EAAGT;EAAS,GACjDO,aAAA;IAAIZ,SAAS,EAAGgB;EAAS,GACtBf,KAAK,IACNW,aAAA,CAACjB,YAAY;IACZK,SAAS,EAAC,oCAAoC;IAC9CiB,EAAE,EAAGF,YAAc;IACnBG,KAAK,EAAG;EAAG,GAETjB,KACW,CACd,EACDW,aAAA;IAAI,mBAAkBG,YAAc;IAACI,IAAI,EAAC;EAAO,GAC9CpB,QACC,CACD,CAC4B,CAAC;AAEpC;AAEA,eAAeD,eAAe","ignoreList":[]}

package/build-module/navigation/index.js

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -103,7 +103,7 @@ export function Navigation({
     setActiveMenu,
     navigationTree
   };
-  const classes = classnames('components-navigation', className);
+  const classes = clsx('components-navigation', className);
   const animateClassName = getAnimateClassName({
     type: 'slide-in',
     origin: slideOrigin
@@ -112,7 +112,7 @@ export function Navigation({
     className: classes
   }, createElement("div", {
     key: menu,
-    className: animateClassName ? classnames({
+    className: animateClassName ? clsx({
       [animateClassName]: isMounted.current && slideOrigin
     }) : undefined
   }, createElement(NavigationContext.Provider, {