@wordpress/components 25.5.0 → 25.6.1

package/build-module/ui/shortcut/component.js

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
@@ -7,9 +6,9 @@ import { createElement } from "@wordpress/element";
 /**
  * Internal dependencies
  */
+
 import { useContextSystem, contextConnect } from '../context';
 import { View } from '../../view';
-
 function Shortcut(props, forwardedRef) {
   const {
     as: asProp = 'span',
@@ -17,21 +16,17 @@ function Shortcut(props, forwardedRef) {
     className,
     ...otherProps
   } = useContextSystem(props, 'Shortcut');
-
   if (!shortcut) {
     return null;
   }
-
   let displayText;
   let ariaLabel;
-
   if (typeof shortcut === 'string') {
     displayText = shortcut;
   } else {
     displayText = shortcut.display;
     ariaLabel = shortcut.ariaLabel;
   }
-
   return createElement(View, {
     as: asProp,
     className: className,
@@ -40,7 +35,6 @@ function Shortcut(props, forwardedRef) {
     ...otherProps
   }, displayText);
 }
-
 const ConnectedShortcut = contextConnect(Shortcut, 'Shortcut');
 export default ConnectedShortcut;
 //# sourceMappingURL=component.js.map

package/build-module/ui/shortcut/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/shortcut/component.tsx"],"names":["useContextSystem","contextConnect","View","Shortcut","props","forwardedRef","as","asProp","shortcut","className","otherProps","displayText","ariaLabel","display","ConnectedShortcut"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,gBADD,EAECC,cAFD,QAIO,YAJP;AAKA,SAASC,IAAT,QAAqB,YAArB;;AAYA,SAASC,QAAT,CACCC,KADD,EAECC,YAFD,EAGsB;AACrB,QAAM;AACLC,IAAAA,EAAE,EAAEC,MAAM,GAAG,MADR;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAIL,OAAGC;AAJE,MAKFV,gBAAgB,CAAEI,KAAF,EAAS,UAAT,CALpB;;AAMA,MAAK,CAAEI,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,MAAIG,WAAJ;AACA,MAAIC,SAAJ;;AAEA,MAAK,OAAOJ,QAAP,KAAoB,QAAzB,EAAoC;AACnCG,IAAAA,WAAW,GAAGH,QAAd;AACA,GAFD,MAEO;AACNG,IAAAA,WAAW,GAAGH,QAAQ,CAACK,OAAvB;AACAD,IAAAA,SAAS,GAAGJ,QAAQ,CAACI,SAArB;AACA;;AAED,SACC,cAAC,IAAD;AACC,IAAA,EAAE,EAAGL,MADN;AAEC,IAAA,SAAS,EAAGE,SAFb;AAGC,kBAAaG,SAHd;AAIC,IAAA,GAAG,EAAGP,YAJP;AAAA,OAKMK;AALN,KAOGC,WAPH,CADD;AAWA;;AAED,MAAMG,iBAAiB,GAAGb,cAAc,CAAEE,QAAF,EAAY,UAAZ,CAAxC;AAEA,eAAeW,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../context';\nimport { View } from '../../view';\n\nexport interface ShortcutDescription {\n\tdisplay: string;\n\tariaLabel: string;\n}\n\nexport interface Props {\n\tshortcut?: ShortcutDescription | string;\n\tclassName?: string;\n}\n\nfunction Shortcut(\n\tprops: WordPressComponentProps< Props, 'span' >,\n\tforwardedRef: ForwardedRef< any >\n): JSX.Element | null {\n\tconst {\n\t\tas: asProp = 'span',\n\t\tshortcut,\n\t\tclassName,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Shortcut' );\n\tif ( ! shortcut ) {\n\t\treturn null;\n\t}\n\n\tlet displayText: string;\n\tlet ariaLabel: string | undefined;\n\n\tif ( typeof shortcut === 'string' ) {\n\t\tdisplayText = shortcut;\n\t} else {\n\t\tdisplayText = shortcut.display;\n\t\tariaLabel = shortcut.ariaLabel;\n\t}\n\n\treturn (\n\t\t<View\n\t\t\tas={ asProp }\n\t\t\tclassName={ className }\n\t\t\taria-label={ ariaLabel }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ displayText }\n\t\t</View>\n\t);\n}\n\nconst ConnectedShortcut = contextConnect( Shortcut, 'Shortcut' );\n\nexport default ConnectedShortcut;\n"]}
+{"version":3,"names":["useContextSystem","contextConnect","View","Shortcut","props","forwardedRef","as","asProp","shortcut","className","otherProps","displayText","ariaLabel","display","createElement","ref","ConnectedShortcut"],"sources":["@wordpress/components/src/ui/shortcut/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { View } from '../../view';\n\nexport interface ShortcutDescription {\n\tdisplay: string;\n\tariaLabel: string;\n}\n\nexport interface Props {\n\tshortcut?: ShortcutDescription | string;\n\tclassName?: string;\n}\n\nfunction Shortcut(\n\tprops: WordPressComponentProps< Props, 'span' >,\n\tforwardedRef: ForwardedRef< any >\n): JSX.Element | null {\n\tconst {\n\t\tas: asProp = 'span',\n\t\tshortcut,\n\t\tclassName,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Shortcut' );\n\tif ( ! shortcut ) {\n\t\treturn null;\n\t}\n\n\tlet displayText: string;\n\tlet ariaLabel: string | undefined;\n\n\tif ( typeof shortcut === 'string' ) {\n\t\tdisplayText = shortcut;\n\t} else {\n\t\tdisplayText = shortcut.display;\n\t\tariaLabel = shortcut.ariaLabel;\n\t}\n\n\treturn (\n\t\t<View\n\t\t\tas={ asProp }\n\t\t\tclassName={ className }\n\t\t\taria-label={ ariaLabel }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ displayText }\n\t\t</View>\n\t);\n}\n\nconst ConnectedShortcut = contextConnect( Shortcut, 'Shortcut' );\n\nexport default ConnectedShortcut;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,YAAY;AAC7D,SAASC,IAAI,QAAQ,YAAY;AAYjC,SAASC,QAAQA,CAChBC,KAA+C,EAC/CC,YAAiC,EACZ;EACrB,MAAM;IACLC,EAAE,EAAEC,MAAM,GAAG,MAAM;IACnBC,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,gBAAgB,CAAEI,KAAK,EAAE,UAAW,CAAC;EACzC,IAAK,CAAEI,QAAQ,EAAG;IACjB,OAAO,IAAI;EACZ;EAEA,IAAIG,WAAmB;EACvB,IAAIC,SAA6B;EAEjC,IAAK,OAAOJ,QAAQ,KAAK,QAAQ,EAAG;IACnCG,WAAW,GAAGH,QAAQ;EACvB,CAAC,MAAM;IACNG,WAAW,GAAGH,QAAQ,CAACK,OAAO;IAC9BD,SAAS,GAAGJ,QAAQ,CAACI,SAAS;EAC/B;EAEA,OACCE,aAAA,CAACZ,IAAI;IACJI,EAAE,EAAGC,MAAQ;IACbE,SAAS,EAAGA,SAAW;IACvB,cAAaG,SAAW;IACxBG,GAAG,EAAGV,YAAc;IAAA,GACfK;EAAU,GAEbC,WACG,CAAC;AAET;AAEA,MAAMK,iBAAiB,GAAGf,cAAc,CAAEE,QAAQ,EAAE,UAAW,CAAC;AAEhE,eAAea,iBAAiB"}

package/build-module/ui/shortcut/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/shortcut/index.ts"],"names":["default","Shortcut"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,aAApC","sourcesContent":["export { default as Shortcut } from './component';\nexport type { Props as ShortcutProps, ShortcutDescription } from './component';\n"]}
+{"version":3,"names":["default","Shortcut"],"sources":["@wordpress/components/src/ui/shortcut/index.ts"],"sourcesContent":["export { default as Shortcut } from './component';\nexport type { Props as ShortcutProps, ShortcutDescription } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAAQ,QAAQ,aAAa"}

package/build-module/ui/tooltip/component.js

@@ -1,28 +1,27 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
 import { TooltipReference, useTooltipState } from 'reakit';
+
 /**
  * WordPress dependencies
  */
-
 import { useMemo, cloneElement } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import { contextConnect, useContextSystem } from '../context';
 import { TooltipContext } from './context';
 import TooltipContent from './content';
 import { TooltipShortcut } from './styles';
+
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
  * @param {import('react').ForwardedRef<any>}                                            forwardedRef
  */
-
 function Tooltip(props, forwardedRef) {
   const {
     animated = true,
@@ -57,7 +56,8 @@ function Tooltip(props, forwardedRef) {
     ref: forwardedRef
   }, content, shortcut && createElement(TooltipShortcut, {
     shortcut: shortcut
-  })), children && createElement(TooltipReference, { ...tooltip,
+  })), children && createElement(TooltipReference, {
+    ...tooltip,
     ...children.props,
     // @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)
     ref: children?.ref
@@ -65,10 +65,10 @@ function Tooltip(props, forwardedRef) {
     if (!focusable) {
       referenceProps.tabIndex = undefined;
     }
-
     return cloneElement(children, referenceProps);
   }));
 }
+
 /**
  * `Tooltip` is a component that provides context for a user interface element.
  *
@@ -85,8 +85,6 @@ function Tooltip(props, forwardedRef) {
  * }
  * ```
  */
-
-
 const ConnectedTooltip = contextConnect(Tooltip, 'Tooltip');
 export default ConnectedTooltip;
 //# sourceMappingURL=component.js.map

package/build-module/ui/tooltip/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/component.js"],"names":["TooltipReference","useTooltipState","useMemo","cloneElement","contextConnect","useContextSystem","TooltipContext","TooltipContent","TooltipShortcut","Tooltip","props","forwardedRef","animated","animationDuration","baseId","children","content","focusable","gutter","id","modal","placement","visible","shortcut","otherProps","tooltip","undefined","contextProps","ref","referenceProps","tabIndex","ConnectedTooltip"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,SAASA,gBAAT,EAA2BC,eAA3B,QAAkD,QAAlD;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,cAAT,QAA+B,WAA/B;AACA,OAAOC,cAAP,MAA2B,WAA3B;AACA,SAASC,eAAT,QAAgC,UAAhC;AAEA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,QAAQ,GAAG,IADN;AAELC,IAAAA,iBAAiB,GAAG,GAFf;AAGLC,IAAAA,MAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,OALK;AAMLC,IAAAA,SAAS,GAAG,IANP;AAOLC,IAAAA,MAAM,GAAG,CAPJ;AAQLC,IAAAA,EARK;AASLC,IAAAA,KAAK,GAAG,IATH;AAULC,IAAAA,SAVK;AAWLC,IAAAA,OAAO,GAAG,KAXL;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcFnB,gBAAgB,CAAEK,KAAF,EAAS,SAAT,CAdpB;AAgBA,QAAMe,OAAO,GAAGxB,eAAe,CAAE;AAChCW,IAAAA,QAAQ,EAAEA,QAAQ,GAAGC,iBAAH,GAAuBa,SADT;AAEhCZ,IAAAA,MAAM,EAAEA,MAAM,IAAIK,EAFc;AAGhCD,IAAAA,MAHgC;AAIhCG,IAAAA,SAJgC;AAKhCC,IAAAA,OALgC;AAMhC,OAAGE;AAN6B,GAAF,CAA/B;AASA,QAAMG,YAAY,GAAGzB,OAAO,CAC3B,OAAQ;AACPuB,IAAAA;AADO,GAAR,CAD2B,EAI3B,CAAEA,OAAF,CAJ2B,CAA5B;AAOA,SACC,cAAC,cAAD,CAAgB,QAAhB;AAAyB,IAAA,KAAK,EAAGE;AAAjC,KACGX,OAAO,IACR,cAAC,cAAD;AAAgB,IAAA,eAAe,EAAGI,KAAlC;AAA0C,IAAA,GAAG,EAAGT;AAAhD,KACGK,OADH,EAEGO,QAAQ,IAAI,cAAC,eAAD;AAAiB,IAAA,QAAQ,EAAGA;AAA5B,IAFf,CAFF,EAOGR,QAAQ,IACT,cAAC,gBAAD,OACMU,OADN;AAAA,OAEMV,QAAQ,CAACL,KAFf;AAGC;AACA,IAAA,GAAG,EAAGK,QAAQ,EAAEa;AAJjB,KAMKC,cAAF,IAAsB;AACvB,QAAK,CAAEZ,SAAP,EAAmB;AAClBY,MAAAA,cAAc,CAACC,QAAf,GAA0BJ,SAA1B;AACA;;AACD,WAAOvB,YAAY,CAAEY,QAAF,EAAYc,cAAZ,CAAnB;AACA,GAXF,CARF,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,gBAAgB,GAAG3B,cAAc,CAAEK,OAAF,EAAW,SAAX,CAAvC;AAEA,eAAesB,gBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { TooltipReference, useTooltipState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, cloneElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { TooltipContext } from './context';\nimport TooltipContent from './content';\nimport { TooltipShortcut } from './styles';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                            forwardedRef\n */\nfunction Tooltip( props, forwardedRef ) {\n\tconst {\n\t\tanimated = true,\n\t\tanimationDuration = 160,\n\t\tbaseId,\n\t\tchildren,\n\t\tcontent,\n\t\tfocusable = true,\n\t\tgutter = 4,\n\t\tid,\n\t\tmodal = true,\n\t\tplacement,\n\t\tvisible = false,\n\t\tshortcut,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Tooltip' );\n\n\tconst tooltip = useTooltipState( {\n\t\tanimated: animated ? animationDuration : undefined,\n\t\tbaseId: baseId || id,\n\t\tgutter,\n\t\tplacement,\n\t\tvisible,\n\t\t...otherProps,\n\t} );\n\n\tconst contextProps = useMemo(\n\t\t() => ( {\n\t\t\ttooltip,\n\t\t} ),\n\t\t[ tooltip ]\n\t);\n\n\treturn (\n\t\t<TooltipContext.Provider value={ contextProps }>\n\t\t\t{ content && (\n\t\t\t\t<TooltipContent unstable_portal={ modal } ref={ forwardedRef }>\n\t\t\t\t\t{ content }\n\t\t\t\t\t{ shortcut && <TooltipShortcut shortcut={ shortcut } /> }\n\t\t\t\t</TooltipContent>\n\t\t\t) }\n\t\t\t{ children && (\n\t\t\t\t<TooltipReference\n\t\t\t\t\t{ ...tooltip }\n\t\t\t\t\t{ ...children.props }\n\t\t\t\t\t// @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)\n\t\t\t\t\tref={ children?.ref }\n\t\t\t\t>\n\t\t\t\t\t{ ( referenceProps ) => {\n\t\t\t\t\t\tif ( ! focusable ) {\n\t\t\t\t\t\t\treferenceProps.tabIndex = undefined;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn cloneElement( children, referenceProps );\n\t\t\t\t\t} }\n\t\t\t\t</TooltipReference>\n\t\t\t) }\n\t\t</TooltipContext.Provider>\n\t);\n}\n\n/**\n * `Tooltip` is a component that provides context for a user interface element.\n *\n * @example\n * ```jsx\n * import { Tooltip, Text } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Tooltip content=\"Code is Poetry\">\n * \t\t\t<Text>WordPress.org</Text>\n * \t\t</Tooltip>\n * \t)\n * }\n * ```\n */\nconst ConnectedTooltip = contextConnect( Tooltip, 'Tooltip' );\n\nexport default ConnectedTooltip;\n"]}
+{"version":3,"names":["TooltipReference","useTooltipState","useMemo","cloneElement","contextConnect","useContextSystem","TooltipContext","TooltipContent","TooltipShortcut","Tooltip","props","forwardedRef","animated","animationDuration","baseId","children","content","focusable","gutter","id","modal","placement","visible","shortcut","otherProps","tooltip","undefined","contextProps","createElement","Provider","value","unstable_portal","ref","referenceProps","tabIndex","ConnectedTooltip"],"sources":["@wordpress/components/src/ui/tooltip/component.js"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { TooltipReference, useTooltipState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, cloneElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { TooltipContext } from './context';\nimport TooltipContent from './content';\nimport { TooltipShortcut } from './styles';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                            forwardedRef\n */\nfunction Tooltip( props, forwardedRef ) {\n\tconst {\n\t\tanimated = true,\n\t\tanimationDuration = 160,\n\t\tbaseId,\n\t\tchildren,\n\t\tcontent,\n\t\tfocusable = true,\n\t\tgutter = 4,\n\t\tid,\n\t\tmodal = true,\n\t\tplacement,\n\t\tvisible = false,\n\t\tshortcut,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Tooltip' );\n\n\tconst tooltip = useTooltipState( {\n\t\tanimated: animated ? animationDuration : undefined,\n\t\tbaseId: baseId || id,\n\t\tgutter,\n\t\tplacement,\n\t\tvisible,\n\t\t...otherProps,\n\t} );\n\n\tconst contextProps = useMemo(\n\t\t() => ( {\n\t\t\ttooltip,\n\t\t} ),\n\t\t[ tooltip ]\n\t);\n\n\treturn (\n\t\t<TooltipContext.Provider value={ contextProps }>\n\t\t\t{ content && (\n\t\t\t\t<TooltipContent unstable_portal={ modal } ref={ forwardedRef }>\n\t\t\t\t\t{ content }\n\t\t\t\t\t{ shortcut && <TooltipShortcut shortcut={ shortcut } /> }\n\t\t\t\t</TooltipContent>\n\t\t\t) }\n\t\t\t{ children && (\n\t\t\t\t<TooltipReference\n\t\t\t\t\t{ ...tooltip }\n\t\t\t\t\t{ ...children.props }\n\t\t\t\t\t// @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)\n\t\t\t\t\tref={ children?.ref }\n\t\t\t\t>\n\t\t\t\t\t{ ( referenceProps ) => {\n\t\t\t\t\t\tif ( ! focusable ) {\n\t\t\t\t\t\t\treferenceProps.tabIndex = undefined;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn cloneElement( children, referenceProps );\n\t\t\t\t\t} }\n\t\t\t\t</TooltipReference>\n\t\t\t) }\n\t\t</TooltipContext.Provider>\n\t);\n}\n\n/**\n * `Tooltip` is a component that provides context for a user interface element.\n *\n * @example\n * ```jsx\n * import { Tooltip, Text } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Tooltip content=\"Code is Poetry\">\n * \t\t\t<Text>WordPress.org</Text>\n * \t\t</Tooltip>\n * \t)\n * }\n * ```\n */\nconst ConnectedTooltip = contextConnect( Tooltip, 'Tooltip' );\n\nexport default ConnectedTooltip;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,eAAe,QAAQ,QAAQ;;AAE1D;AACA;AACA;AACA,SAASC,OAAO,EAAEC,YAAY,QAAQ,oBAAoB;;AAE1D;AACA;AACA;AACA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,cAAc,QAAQ,WAAW;AAC1C,OAAOC,cAAc,MAAM,WAAW;AACtC,SAASC,eAAe,QAAQ,UAAU;;AAE1C;AACA;AACA;AACA;AACA,SAASC,OAAOA,CAAEC,KAAK,EAAEC,YAAY,EAAG;EACvC,MAAM;IACLC,QAAQ,GAAG,IAAI;IACfC,iBAAiB,GAAG,GAAG;IACvBC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,SAAS,GAAG,IAAI;IAChBC,MAAM,GAAG,CAAC;IACVC,EAAE;IACFC,KAAK,GAAG,IAAI;IACZC,SAAS;IACTC,OAAO,GAAG,KAAK;IACfC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGnB,gBAAgB,CAAEK,KAAK,EAAE,SAAU,CAAC;EAExC,MAAMe,OAAO,GAAGxB,eAAe,CAAE;IAChCW,QAAQ,EAAEA,QAAQ,GAAGC,iBAAiB,GAAGa,SAAS;IAClDZ,MAAM,EAAEA,MAAM,IAAIK,EAAE;IACpBD,MAAM;IACNG,SAAS;IACTC,OAAO;IACP,GAAGE;EACJ,CAAE,CAAC;EAEH,MAAMG,YAAY,GAAGzB,OAAO,CAC3B,OAAQ;IACPuB;EACD,CAAC,CAAE,EACH,CAAEA,OAAO,CACV,CAAC;EAED,OACCG,aAAA,CAACtB,cAAc,CAACuB,QAAQ;IAACC,KAAK,EAAGH;EAAc,GAC5CX,OAAO,IACRY,aAAA,CAACrB,cAAc;IAACwB,eAAe,EAAGX,KAAO;IAACY,GAAG,EAAGrB;EAAc,GAC3DK,OAAO,EACPO,QAAQ,IAAIK,aAAA,CAACpB,eAAe;IAACe,QAAQ,EAAGA;EAAU,CAAE,CACvC,CAChB,EACCR,QAAQ,IACTa,aAAA,CAAC5B,gBAAgB;IAAA,GACXyB,OAAO;IAAA,GACPV,QAAQ,CAACL,KAAK;IACnB;IACAsB,GAAG,EAAGjB,QAAQ,EAAEiB;EAAK,GAEjBC,cAAc,IAAM;IACvB,IAAK,CAAEhB,SAAS,EAAG;MAClBgB,cAAc,CAACC,QAAQ,GAAGR,SAAS;IACpC;IACA,OAAOvB,YAAY,CAAEY,QAAQ,EAAEkB,cAAe,CAAC;EAChD,CACiB,CAEK,CAAC;AAE5B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,gBAAgB,GAAG/B,cAAc,CAAEK,OAAO,EAAE,SAAU,CAAC;AAE7D,eAAe0B,gBAAgB"}

package/build-module/ui/tooltip/content.js

@@ -1,14 +1,13 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
 import { Tooltip as ReakitTooltip } from 'reakit';
+
 /**
  * Internal dependencies
  */
-
 import { contextConnect, useContextSystem } from '../context';
 import { View } from '../../view';
 import { useTooltipContext } from './context';
@@ -17,12 +16,12 @@ import { useCx } from '../../utils/hooks/use-cx';
 const {
   TooltipPopoverView
 } = styles;
+
 /**
  *
  * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props
  * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
  */
-
 function TooltipContent(props, forwardedRef) {
   const {
     children,
@@ -42,6 +41,5 @@ function TooltipContent(props, forwardedRef) {
     ref: forwardedRef
   }, createElement(TooltipPopoverView, null, children));
 }
-
 export default contextConnect(TooltipContent, 'TooltipContent');
 //# sourceMappingURL=content.js.map

package/build-module/ui/tooltip/content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/content.js"],"names":["Tooltip","ReakitTooltip","contextConnect","useContextSystem","View","useTooltipContext","styles","useCx","TooltipPopoverView","TooltipContent","props","forwardedRef","children","className","otherProps","tooltip","cx","classes"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,QAAzC;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAyBF,MAA/B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASG,cAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuB,OAAGC;AAA1B,MAAyCX,gBAAgB,CAC9DO,KAD8D,EAE9D,gBAF8D,CAA/D;AAIA,QAAM;AAAEK,IAAAA;AAAF,MAAcV,iBAAiB,EAArC;AACA,QAAMW,EAAE,GAAGT,KAAK,EAAhB;AACA,QAAMU,OAAO,GAAGD,EAAE,CAAEV,MAAM,CAACG,cAAT,EAAyBI,SAAzB,CAAlB;AAEA,SACC,cAAC,aAAD;AACC,IAAA,EAAE,EAAGT,IADN;AAAA,OAEMU,UAFN;AAAA,OAGMC,OAHN;AAIC,IAAA,SAAS,EAAGE,OAJb;AAKC,IAAA,GAAG,EAAGN;AALP,KAOC,cAAC,kBAAD,QAAsBC,QAAtB,CAPD,CADD;AAWA;;AAED,eAAeV,cAAc,CAAEO,cAAF,EAAkB,gBAAlB,CAA7B","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Tooltip as ReakitTooltip } from 'reakit';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { View } from '../../view';\nimport { useTooltipContext } from './context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nconst { TooltipPopoverView } = styles;\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                   forwardedRef\n */\nfunction TooltipContent( props, forwardedRef ) {\n\tconst { children, className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'TooltipContent'\n\t);\n\tconst { tooltip } = useTooltipContext();\n\tconst cx = useCx();\n\tconst classes = cx( styles.TooltipContent, className );\n\n\treturn (\n\t\t<ReakitTooltip\n\t\t\tas={ View }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...tooltip }\n\t\t\tclassName={ classes }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t<TooltipPopoverView>{ children }</TooltipPopoverView>\n\t\t</ReakitTooltip>\n\t);\n}\n\nexport default contextConnect( TooltipContent, 'TooltipContent' );\n"]}
+{"version":3,"names":["Tooltip","ReakitTooltip","contextConnect","useContextSystem","View","useTooltipContext","styles","useCx","TooltipPopoverView","TooltipContent","props","forwardedRef","children","className","otherProps","tooltip","cx","classes","createElement","as","ref"],"sources":["@wordpress/components/src/ui/tooltip/content.js"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Tooltip as ReakitTooltip } from 'reakit';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { View } from '../../view';\nimport { useTooltipContext } from './context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nconst { TooltipPopoverView } = styles;\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                   forwardedRef\n */\nfunction TooltipContent( props, forwardedRef ) {\n\tconst { children, className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'TooltipContent'\n\t);\n\tconst { tooltip } = useTooltipContext();\n\tconst cx = useCx();\n\tconst classes = cx( styles.TooltipContent, className );\n\n\treturn (\n\t\t<ReakitTooltip\n\t\t\tas={ View }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...tooltip }\n\t\t\tclassName={ classes }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t<TooltipPopoverView>{ children }</TooltipPopoverView>\n\t\t</ReakitTooltip>\n\t);\n}\n\nexport default contextConnect( TooltipContent, 'TooltipContent' );\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,aAAa,QAAQ,QAAQ;;AAEjD;AACA;AACA;AACA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,iBAAiB,QAAQ,WAAW;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,MAAM;EAAEC;AAAmB,CAAC,GAAGF,MAAM;;AAErC;AACA;AACA;AACA;AACA;AACA,SAASG,cAAcA,CAAEC,KAAK,EAAEC,YAAY,EAAG;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;EAAW,CAAC,GAAGX,gBAAgB,CAC9DO,KAAK,EACL,gBACD,CAAC;EACD,MAAM;IAAEK;EAAQ,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACvC,MAAMW,EAAE,GAAGT,KAAK,CAAC,CAAC;EAClB,MAAMU,OAAO,GAAGD,EAAE,CAAEV,MAAM,CAACG,cAAc,EAAEI,SAAU,CAAC;EAEtD,OACCK,aAAA,CAACjB,aAAa;IACbkB,EAAE,EAAGf,IAAM;IAAA,GACNU,UAAU;IAAA,GACVC,OAAO;IACZF,SAAS,EAAGI,OAAS;IACrBG,GAAG,EAAGT;EAAc,GAEpBO,aAAA,CAACV,kBAAkB,QAAGI,QAA8B,CACtC,CAAC;AAElB;AAEA,eAAeV,cAAc,CAAEO,cAAc,EAAE,gBAAiB,CAAC"}

package/build-module/ui/tooltip/context.js

@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { createContext, useContext } from '@wordpress/element';
+
 /**
  * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>}
  */
-
 export const TooltipContext = createContext({});
 export const useTooltipContext = () => useContext(TooltipContext);
 //# sourceMappingURL=context.js.map

package/build-module/ui/tooltip/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/context.js"],"names":["createContext","useContext","TooltipContext","useTooltipContext"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,oBAA1C;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,cAAc,GAAGF,aAAa,CAAE,EAAF,CAApC;AACP,OAAO,MAAMG,iBAAiB,GAAG,MAAMF,UAAU,CAAEC,cAAF,CAA1C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>}\n */\nexport const TooltipContext = createContext( {} );\nexport const useTooltipContext = () => useContext( TooltipContext );\n"]}
+{"version":3,"names":["createContext","useContext","TooltipContext","useTooltipContext"],"sources":["@wordpress/components/src/ui/tooltip/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>}\n */\nexport const TooltipContext = createContext( {} );\nexport const useTooltipContext = () => useContext( TooltipContext );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGF,aAAa,CAAE,CAAC,CAAE,CAAC;AACjD,OAAO,MAAMG,iBAAiB,GAAGA,CAAA,KAAMF,UAAU,CAAEC,cAAe,CAAC"}

package/build-module/ui/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/index.js"],"names":["default","Tooltip"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,aAAnC;AACA,cAAc,WAAd","sourcesContent":["export { default as Tooltip } from './component';\nexport * from './context';\n"]}
+{"version":3,"names":["default","Tooltip"],"sources":["@wordpress/components/src/ui/tooltip/index.js"],"sourcesContent":["export { default as Tooltip } from './component';\nexport * from './context';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,aAAa;AAChD,cAAc,WAAW"}

package/build-module/ui/tooltip/styles.js

@@ -1,12 +1,9 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 /**
  * External dependencies
  */
 import { css } from '@emotion/react';
-
 /**
  * Internal dependencies
  */

package/build-module/ui/tooltip/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/styles.js"],"names":["css","Shortcut","ZIndex","CONFIG","space","COLORS","TooltipContent","Tooltip","transitionDurationFastest","fontSize","TooltipPopoverView","white","noOutline","TooltipShortcut"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,OAAO,KAAKC,MAAZ,MAAwB,qBAAxB;AACA,OAAOC,MAAP,MAAmB,2BAAnB;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA,OAAO,MAAMC,cAAc,gBAAGN,GAAH,aACdE,MAAM,CAACK,OADO,mGAMHJ,MAAM,CAACK,yBANJ,sBAOZL,MAAM,CAACM,QAPK,y3DAApB;AAcP,OAAO,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,gHAIpBL,MAAM,CAACM,KAJa,6yDAAxB;AAQP,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf;AAIP,OAAO,MAAMC,eAAe,GAAG,qBAAQZ,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,sCAEXG,KAAK,CAAE,CAAF,CAFM,6xDAArB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Shortcut } from '../shortcut';\nimport * as ZIndex from '../../utils/z-index';\nimport CONFIG from '../../utils/config-values';\nimport { space } from '../utils/space';\nimport { COLORS } from '../../utils/colors-values';\n\nexport const TooltipContent = css`\n\tz-index: ${ ZIndex.Tooltip };\n\tbox-sizing: border-box;\n\topacity: 0;\n\toutline: none;\n\ttransform-origin: top center;\n\ttransition: opacity ${ CONFIG.transitionDurationFastest } ease;\n\tfont-size: ${ CONFIG.fontSize };\n\n\t&[data-enter] {\n\t\topacity: 1;\n\t}\n`;\n\nexport const TooltipPopoverView = styled.div`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );\n\tcolor: ${ COLORS.white };\n\tpadding: 4px 8px;\n`;\n\nexport const noOutline = css`\n\toutline: none;\n`;\n\nexport const TooltipShortcut = styled( Shortcut )`\n\tdisplay: inline-block;\n\tmargin-left: ${ space( 1 ) };\n`;\n"]}
+{"version":3,"names":["css","Shortcut","ZIndex","CONFIG","space","COLORS","TooltipContent","Tooltip","transitionDurationFastest","fontSize","process","env","NODE_ENV","TooltipPopoverView","_styled","target","label","white","noOutline","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","TooltipShortcut"],"sources":["@wordpress/components/src/ui/tooltip/styles.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Shortcut } from '../shortcut';\nimport * as ZIndex from '../../utils/z-index';\nimport CONFIG from '../../utils/config-values';\nimport { space } from '../utils/space';\nimport { COLORS } from '../../utils/colors-values';\n\nexport const TooltipContent = css`\n\tz-index: ${ ZIndex.Tooltip };\n\tbox-sizing: border-box;\n\topacity: 0;\n\toutline: none;\n\ttransform-origin: top center;\n\ttransition: opacity ${ CONFIG.transitionDurationFastest } ease;\n\tfont-size: ${ CONFIG.fontSize };\n\n\t&[data-enter] {\n\t\topacity: 1;\n\t}\n`;\n\nexport const TooltipPopoverView = styled.div`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );\n\tcolor: ${ COLORS.white };\n\tpadding: 4px 8px;\n`;\n\nexport const noOutline = css`\n\toutline: none;\n`;\n\nexport const TooltipShortcut = styled( Shortcut )`\n\tdisplay: inline-block;\n\tmargin-left: ${ space( 1 ) };\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,aAAa;AACtC,OAAO,KAAKC,MAAM,MAAM,qBAAqB;AAC7C,OAAOC,MAAM,MAAM,2BAA2B;AAC9C,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,cAAc,gBAAGN,GAAG,aACpBE,MAAM,CAACK,OAAO,mGAKHJ,MAAM,CAACK,yBAAyB,sBACzCL,MAAM,CAACM,QAAQ,kCAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2vDAK7B;AAED,OAAO,MAAMC,kBAAkB,GAAAC,OAAA,QAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,gHAIpBX,MAAM,CAACY,KAAK,yBAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,gwDAEtB;AAED,OAAO,MAAMM,SAAS,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAO,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAErB;AAED,OAAO,MAAMC,eAAe,GAAG,aAAAV,OAAA,CAAQb,QAAQ,EAAAS,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,sCAEhCZ,KAAK,CAAE,CAAE,CAAC,SAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA,gwDAC1B"}

package/build-module/ui/tooltip/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/ui/tooltip/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { TooltipInitialState, TooltipProps } from 'reakit';\nimport type { ReactElement, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { PopperProps } from '../utils/types';\nimport type { ShortcutProps } from '../shortcut';\n\nexport type Props = TooltipInitialState &\n\tPopperProps &\n\tPick< ShortcutProps, 'shortcut' > & {\n\t\t/**\n\t\t * Determines if `Tooltip` has animations.\n\t\t */\n\t\tanimated?: boolean;\n\t\t/**\n\t\t * The duration of `Tooltip` animations.\n\t\t *\n\t\t * @default 160\n\t\t */\n\t\tanimationDuration?: boolean;\n\t\t/**\n\t\t * ID that will serve as a base for all the items IDs.\n\t\t *\n\t\t * @see https://reakit.io/docs/tooltip/#usetooltipstate\n\t\t */\n\t\tbaseId?: string;\n\t\t/**\n\t\t * Content to render within the `Tooltip` floating label.\n\t\t */\n\t\tcontent?: ReactElement;\n\t\t/**\n\t\t * Spacing between the `Tooltip` reference and the floating label.\n\t\t *\n\t\t * @default 4\n\t\t *\n\t\t * @see https://reakit.io/docs/tooltip/#usetooltipstate\n\t\t */\n\t\tgutter?: number;\n\t\t/**\n\t\t * Whether or not the dialog should be rendered within `Portal`. It's true by default if modal is true.\n\t\t *\n\t\t * @default true\n\t\t *\n\t\t * @see https://reakit.io/docs/tooltip/#tooltip\n\t\t */\n\t\tmodal?: boolean;\n\t\t/**\n\t\t * Whether `Tooltip` is visible.\n\t\t *\n\t\t * @default false\n\t\t *\n\t\t * @see https://reakit.io/docs/tooltip/#usetooltipstate\n\t\t */\n\t\tvisible?: boolean;\n\t\tchildren: ReactElement;\n\t\tfocusable?: boolean;\n\t};\n\nexport type ContentProps = TooltipProps & {\n\tchildren: ReactNode;\n};\n"],"mappings":""}

package/build-module/ui/utils/colors.js

@@ -4,40 +4,38 @@
 import memoize from 'memize';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-/** @type {HTMLDivElement} */
 
+/** @type {HTMLDivElement} */
 let colorComputationNode;
 extend([namesPlugin]);
+
 /**
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
-
 function getColorComputationNode() {
   if (typeof document === 'undefined') return;
-
   if (!colorComputationNode) {
     // Create a temporary element for style computation.
     const el = document.createElement('div');
-    el.setAttribute('data-g2-color-computation-node', ''); // Inject for window computed style.
-
+    el.setAttribute('data-g2-color-computation-node', '');
+    // Inject for window computed style.
     document.body.appendChild(el);
     colorComputationNode = el;
   }
-
   return colorComputationNode;
 }
+
 /**
  * @param {string | unknown} value
  *
  * @return {boolean} Whether the value is a valid color.
  */
-
-
 function isColor(value) {
   if (typeof value !== 'string') return false;
   const test = colord(value);
   return test.isValid();
 }
+
 /**
  * Retrieves the computed background color. This is useful for getting the
  * value of a CSS variable color.
@@ -46,25 +44,24 @@ function isColor(value) {
  *
  * @return {string} The computed background color.
  */
-
-
 function _getComputedBackgroundColor(backgroundColor) {
   if (typeof backgroundColor !== 'string') return '';
   if (isColor(backgroundColor)) return backgroundColor;
   if (!backgroundColor.includes('var(')) return '';
-  if (typeof document === 'undefined') return ''; // Attempts to gracefully handle CSS variables color values.
+  if (typeof document === 'undefined') return '';
 
+  // Attempts to gracefully handle CSS variables color values.
   const el = getColorComputationNode();
   if (!el) return '';
-  el.style.background = backgroundColor; // Grab the style.
-
-  const computedColor = window?.getComputedStyle(el).background; // Reset.
-
+  el.style.background = backgroundColor;
+  // Grab the style.
+  const computedColor = window?.getComputedStyle(el).background;
+  // Reset.
   el.style.background = '';
   return computedColor || '';
 }
-
 const getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
+
 /**
  * Get the text shade optimized for readability, based on a background color.
  *
@@ -72,11 +69,11 @@ const getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
  *
  * @return {string} The optimized text color (black or white).
  */
-
 export function getOptimalTextColor(backgroundColor) {
   const background = getComputedBackgroundColor(backgroundColor);
   return colord(background).isLight() ? '#000000' : '#ffffff';
 }
+
 /**
  * Get the text shade optimized for readability, based on a background color.
  *
@@ -84,7 +81,6 @@ export function getOptimalTextColor(backgroundColor) {
  *
  * @return {string} The optimized text shade (dark or light).
  */
-
 export function getOptimalTextShade(backgroundColor) {
   const result = getOptimalTextColor(backgroundColor);
   return result === '#000000' ? 'dark' : 'light';

package/build-module/ui/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/colors.js"],"names":["memoize","colord","extend","namesPlugin","colorComputationNode","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isLight","getOptimalTextShade","result"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,QAApB;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;;AACA,IAAIC,oBAAJ;AAEAF,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA;AACA;AACA;;AACA,SAASE,uBAAT,GAAmC;AAClC,MAAK,OAAOC,QAAP,KAAoB,WAAzB,EAAuC;;AAEvC,MAAK,CAAEF,oBAAP,EAA8B;AAC7B;AACA,UAAMG,EAAE,GAAGD,QAAQ,CAACE,aAAT,CAAwB,KAAxB,CAAX;AACAD,IAAAA,EAAE,CAACE,YAAH,CAAiB,gCAAjB,EAAmD,EAAnD,EAH6B,CAI7B;;AACAH,IAAAA,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA2BJ,EAA3B;AACAH,IAAAA,oBAAoB,GAAGG,EAAvB;AACA;;AAED,SAAOH,oBAAP;AACA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASQ,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,MAAK,OAAOA,KAAP,KAAiB,QAAtB,EAAiC,OAAO,KAAP;AACjC,QAAMC,IAAI,GAAGb,MAAM,CAAEY,KAAF,CAAnB;AAEA,SAAOC,IAAI,CAACC,OAAL,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,2BAAT,CAAsCC,eAAtC,EAAwD;AACvD,MAAK,OAAOA,eAAP,KAA2B,QAAhC,EAA2C,OAAO,EAAP;AAE3C,MAAKL,OAAO,CAAEK,eAAF,CAAZ,EAAkC,OAAOA,eAAP;AAElC,MAAK,CAAEA,eAAe,CAACC,QAAhB,CAA0B,MAA1B,CAAP,EAA4C,OAAO,EAAP;AAC5C,MAAK,OAAOZ,QAAP,KAAoB,WAAzB,EAAuC,OAAO,EAAP,CANgB,CAQvD;;AACA,QAAMC,EAAE,GAAGF,uBAAuB,EAAlC;AACA,MAAK,CAAEE,EAAP,EAAY,OAAO,EAAP;AAEZA,EAAAA,EAAE,CAACY,KAAH,CAASC,UAAT,GAAsBH,eAAtB,CAZuD,CAavD;;AACA,QAAMI,aAAa,GAAGC,MAAM,EAAEC,gBAAR,CAA0BhB,EAA1B,EAA+Ba,UAArD,CAduD,CAevD;;AACAb,EAAAA,EAAE,CAACY,KAAH,CAASC,UAAT,GAAsB,EAAtB;AAEA,SAAOC,aAAa,IAAI,EAAxB;AACA;;AAED,MAAMG,0BAA0B,GAAGxB,OAAO,CAAEgB,2BAAF,CAA1C;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASS,mBAAT,CAA8BR,eAA9B,EAAgD;AACtD,QAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAF,CAA7C;AAEA,SAAOhB,MAAM,CAAEmB,UAAF,CAAN,CAAqBM,OAArB,KAAiC,SAAjC,GAA6C,SAApD;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,mBAAT,CAA8BV,eAA9B,EAAgD;AACtD,QAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAF,CAAlC;AAEA,SAAOW,MAAM,KAAK,SAAX,GAAuB,MAAvB,GAAgC,OAAvC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) return;\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) return false;\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) return '';\n\n\tif ( isColor( backgroundColor ) ) return backgroundColor;\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) return '';\n\tif ( typeof document === 'undefined' ) return '';\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) return '';\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"]}
+{"version":3,"names":["memoize","colord","extend","namesPlugin","colorComputationNode","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isLight","getOptimalTextShade","result"],"sources":["@wordpress/components/src/ui/utils/colors.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) return;\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) return false;\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) return '';\n\n\tif ( isColor( backgroundColor ) ) return backgroundColor;\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) return '';\n\tif ( typeof document === 'undefined' ) return '';\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) return '';\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,MAAM,QAAQ;AAC5B,SAASC,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA,IAAIC,oBAAoB;AAExBF,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA,SAASE,uBAAuBA,CAAA,EAAG;EAClC,IAAK,OAAOC,QAAQ,KAAK,WAAW,EAAG;EAEvC,IAAK,CAAEF,oBAAoB,EAAG;IAC7B;IACA,MAAMG,EAAE,GAAGD,QAAQ,CAACE,aAAa,CAAE,KAAM,CAAC;IAC1CD,EAAE,CAACE,YAAY,CAAE,gCAAgC,EAAE,EAAG,CAAC;IACvD;IACAH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAAEJ,EAAG,CAAC;IAC/BH,oBAAoB,GAAGG,EAAE;EAC1B;EAEA,OAAOH,oBAAoB;AAC5B;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASQ,OAAOA,CAAEC,KAAK,EAAG;EACzB,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG,OAAO,KAAK;EAC7C,MAAMC,IAAI,GAAGb,MAAM,CAAEY,KAAM,CAAC;EAE5B,OAAOC,IAAI,CAACC,OAAO,CAAC,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,2BAA2BA,CAAEC,eAAe,EAAG;EACvD,IAAK,OAAOA,eAAe,KAAK,QAAQ,EAAG,OAAO,EAAE;EAEpD,IAAKL,OAAO,CAAEK,eAAgB,CAAC,EAAG,OAAOA,eAAe;EAExD,IAAK,CAAEA,eAAe,CAACC,QAAQ,CAAE,MAAO,CAAC,EAAG,OAAO,EAAE;EACrD,IAAK,OAAOZ,QAAQ,KAAK,WAAW,EAAG,OAAO,EAAE;;EAEhD;EACA,MAAMC,EAAE,GAAGF,uBAAuB,CAAC,CAAC;EACpC,IAAK,CAAEE,EAAE,EAAG,OAAO,EAAE;EAErBA,EAAE,CAACY,KAAK,CAACC,UAAU,GAAGH,eAAe;EACrC;EACA,MAAMI,aAAa,GAAGC,MAAM,EAAEC,gBAAgB,CAAEhB,EAAG,CAAC,CAACa,UAAU;EAC/D;EACAb,EAAE,CAACY,KAAK,CAACC,UAAU,GAAG,EAAE;EAExB,OAAOC,aAAa,IAAI,EAAE;AAC3B;AAEA,MAAMG,0BAA0B,GAAGxB,OAAO,CAAEgB,2BAA4B,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,mBAAmBA,CAAER,eAAe,EAAG;EACtD,MAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAgB,CAAC;EAEhE,OAAOhB,MAAM,CAAEmB,UAAW,CAAC,CAACM,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS;AAC9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAAEV,eAAe,EAAG;EACtD,MAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAgB,CAAC;EAErD,OAAOW,MAAM,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AAC/C"}

package/build-module/ui/utils/font-size.js

@@ -20,13 +20,11 @@ export function getFontSize(size = BASE_FONT_SIZE) {
   if (size in PRESET_FONT_SIZES) {
     return getFontSize(PRESET_FONT_SIZES[size]);
   }
-
   if (typeof size !== 'number') {
     const parsed = parseFloat(size);
     if (Number.isNaN(parsed)) return size;
     size = parsed;
   }
-
   const ratio = `(${size} / ${BASE_FONT_SIZE})`;
   return `calc(${ratio} * ${CONFIG.fontSize})`;
 }
@@ -34,7 +32,6 @@ export function getHeadingFontSize(size = 3) {
   if (!HEADING_FONT_SIZES.includes(size)) {
     return getFontSize(size);
   }
-
   const headingSize = `fontSizeH${size}`;
   return CONFIG[headingSize];
 }

package/build-module/ui/utils/font-size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/font-size.ts"],"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,2BAAnB;AAgBA,OAAO,MAAMC,cAAc,GAAG,EAAvB;AAEP,OAAO,MAAMC,iBAAiB,GAAG;AAChCC,EAAAA,IAAI,EAAEF,cAD0B;AAEhCG,EAAAA,OAAO,EAAE,EAFuB;AAGhCC,EAAAA,QAAQ,EAAE,EAHsB;AAIhCC,EAAAA,UAAU,EAAE,EAJoB;AAKhCC,EAAAA,WAAW,EAAE,EALmB;AAMhCC,EAAAA,KAAK,EAAE;AANyB,CAA1B;AASP,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAF,EAAK,CAAL,EAAQ,CAAR,EAAW,CAAX,EAAc,CAAd,EAAiB,CAAjB,EAAqBC,OAArB,CAAgCC,CAAF,IAAS,CACxEA,CADwE,EAExEA,CAAC,CAACC,QAAF,EAFwE,CAAvC,CAA3B;AAKP,OAAO,SAASC,WAAT,CACNC,IAEiC,GAAGb,cAH9B,EAIG;AACT,MAAKa,IAAI,IAAIZ,iBAAb,EAAiC;AAChC,WAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAF,CADA,CAAlB;AAGA;;AAED,MAAK,OAAOA,IAAP,KAAgB,QAArB,EAAgC;AAC/B,UAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAF,CAAzB;AACA,QAAKG,MAAM,CAACC,KAAP,CAAcH,MAAd,CAAL,EAA8B,OAAOD,IAAP;AAC9BA,IAAAA,IAAI,GAAGC,MAAP;AACA;;AAED,QAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAA/C;AACA,SAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAA9C;AACA;AAED,OAAO,SAASC,kBAAT,CAA6BP,IAAe,GAAG,CAA/C,EAA2D;AACjE,MAAK,CAAEL,kBAAkB,CAACa,QAAnB,CAA6BR,IAA7B,CAAP,EAA4D;AAC3D,WAAOD,WAAW,CAAEC,IAAF,CAAlB;AACA;;AAED,QAAMS,WAAW,GAAI,YAAYT,IAAM,EAAvC;AACA,SAAOd,MAAM,CAAEuB,WAAF,CAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from '../../utils/config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"]}
+{"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/ui/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from '../../utils/config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,2BAA2B;AAgB9C,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG,OAAOD,IAAI;IACzCA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAAE;EACjD,OAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAAE;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAI,YAAYT,IAAM,EAAgC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B"}

package/build-module/ui/utils/get-valid-children.js

@@ -6,6 +6,7 @@
  * WordPress dependencies
  */
 import { Children, isValidElement } from '@wordpress/element';
+
 /**
  * Gets a collection of available children elements from a React component's children prop.
  *
@@ -13,7 +14,6 @@ import { Children, isValidElement } from '@wordpress/element';
  *
  * @return An array of available children.
  */
-
 export function getValidChildren(children) {
   if (typeof children === 'string') return [children];
   return Children.toArray(children).filter(child => isValidElement(child));

package/build-module/ui/utils/get-valid-children.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/get-valid-children.ts"],"names":["Children","isValidElement","getValidChildren","children","toArray","filter","child"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,cAAnB,QAAyC,oBAAzC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CACNC,QADM,EAE8C;AACpD,MAAK,OAAOA,QAAP,KAAoB,QAAzB,EAAoC,OAAO,CAAEA,QAAF,CAAP;AAEpC,SAAOH,QAAQ,CAACI,OAAT,CAAkBD,QAAlB,EAA6BE,MAA7B,CAAuCC,KAAF,IAC3CL,cAAc,CAAEK,KAAF,CADR,CAAP;AAGA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"]}
+{"version":3,"names":["Children","isValidElement","getValidChildren","children","toArray","filter","child"],"sources":["@wordpress/components/src/ui/utils/get-valid-children.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,QAAmB,EACiC;EACpD,IAAK,OAAOA,QAAQ,KAAK,QAAQ,EAAG,OAAO,CAAEA,QAAQ,CAAE;EAEvD,OAAOH,QAAQ,CAACI,OAAO,CAAED,QAAS,CAAC,CAACE,MAAM,CAAIC,KAAK,IAClDL,cAAc,CAAEK,KAAM,CACvB,CAAC;AACF"}

package/build-module/ui/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/index.js"],"names":["getOptimalTextShade"],"mappings":"AAAA,SAASA,mBAAT,QAAoC,UAApC","sourcesContent":["export { getOptimalTextShade } from './colors';\n"]}
+{"version":3,"names":["getOptimalTextShade"],"sources":["@wordpress/components/src/ui/utils/index.js"],"sourcesContent":["export { getOptimalTextShade } from './colors';\n"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,UAAU"}

package/build-module/ui/utils/space.js

@@ -7,7 +7,9 @@
  * Otherwise, it will be interpreted as a literal CSS length value. For example,
  * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
  */
+
 const GRID_BASE = '4px';
+
 /**
  * A function that handles numbers, numeric strings, and unit values.
  *
@@ -19,23 +21,21 @@ const GRID_BASE = '4px';
  *
  * @param value A number, numeric string, or a unit value.
  */
-
 export function space(value) {
   if (typeof value === 'undefined') {
     return undefined;
-  } // Handle empty strings, if it's the number 0 this still works.
-
+  }
 
+  // Handle empty strings, if it's the number 0 this still works.
   if (!value) {
     return '0';
   }
+  const asInt = typeof value === 'number' ? value : Number(value);
 
-  const asInt = typeof value === 'number' ? value : Number(value); // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
-
+  // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
   if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
     return value.toString();
   }
-
   return `calc(${GRID_BASE} * ${value})`;
 }
 //# sourceMappingURL=space.js.map

package/build-module/ui/utils/space.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/space.ts"],"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAMA,SAAS,GAAG,KAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,KAAT,CAAgBC,KAAhB,EAAyD;AAC/D,MAAK,OAAOA,KAAP,KAAiB,WAAtB,EAAoC;AACnC,WAAOC,SAAP;AACA,GAH8D,CAK/D;;;AACA,MAAK,CAAED,KAAP,EAAe;AACd,WAAO,GAAP;AACA;;AAED,QAAME,KAAK,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCG,MAAM,CAAEH,KAAF,CAAxD,CAV+D,CAY/D;;AACA,MACG,OAAOI,MAAP,KAAkB,WAAlB,IACDA,MAAM,CAACC,GAAP,EAAYC,QAAZ,GAAwB,QAAxB,EAAkCN,KAAK,CAACO,QAAN,EAAlC,CADD,IAEAJ,MAAM,CAACK,KAAP,CAAcN,KAAd,CAHD,EAIE;AACD,WAAOF,KAAK,CAACO,QAAN,EAAP;AACA;;AAED,SAAQ,QAAQT,SAAW,MAAME,KAAO,GAAxC;AACA","sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"]}
+{"version":3,"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"sources":["@wordpress/components/src/ui/utils/space.ts"],"sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,MAAMA,SAAS,GAAG,KAAK;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEC,KAAkB,EAAuB;EAC/D,IAAK,OAAOA,KAAK,KAAK,WAAW,EAAG;IACnC,OAAOC,SAAS;EACjB;;EAEA;EACA,IAAK,CAAED,KAAK,EAAG;IACd,OAAO,GAAG;EACX;EAEA,MAAME,KAAK,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGG,MAAM,CAAEH,KAAM,CAAC;;EAEjE;EACA,IACG,OAAOI,MAAM,KAAK,WAAW,IAC9BA,MAAM,CAACC,GAAG,EAAEC,QAAQ,GAAI,QAAQ,EAAEN,KAAK,CAACO,QAAQ,CAAC,CAAE,CAAC,IACrDJ,MAAM,CAACK,KAAK,CAAEN,KAAM,CAAC,EACpB;IACD,OAAOF,KAAK,CAACO,QAAQ,CAAC,CAAC;EACxB;EAEA,OAAQ,QAAQT,SAAW,MAAME,KAAO,GAAE;AAC3C"}

package/build-module/ui/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/ui/utils/types.ts"],"sourcesContent":["export type ResponsiveCSSValue< T > = Array< T | undefined > | T;\n\nexport type PopperPlacement =\n\t| 'auto'\n\t| 'auto-start'\n\t| 'auto-end'\n\t| 'top'\n\t| 'top-start'\n\t| 'top-end'\n\t| 'right'\n\t| 'right-start'\n\t| 'right-end'\n\t| 'bottom'\n\t| 'bottom-start'\n\t| 'bottom-end'\n\t| 'left'\n\t| 'left-start'\n\t| 'left-end';\n\nexport type PopperProps = {\n\t/**\n\t * Position of the popover element.\n\t *\n\t * @default 'auto'\n\t *\n\t * @see https://popper.js.org/docs/v1/#popperplacements--codeenumcode\n\t */\n\tplacement?: PopperPlacement;\n};\n\nexport type SizeRangeDefault =\n\t| 'xLarge'\n\t| 'large'\n\t| 'medium'\n\t| 'small'\n\t| 'xSmall';\n"],"mappings":""}

package/build-module/ui/utils/use-responsive-value.js

@@ -7,33 +7,26 @@ export const useBreakpointIndex = (options = {}) => {
   const {
     defaultIndex = 0
   } = options;
-
   if (typeof defaultIndex !== 'number') {
     throw new TypeError(`Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`);
   } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
     throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`);
   }
-
   const [value, setValue] = useState(defaultIndex);
   useEffect(() => {
     const getIndex = () => breakpoints.filter(bp => {
       return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false;
     }).length;
-
     const onResize = () => {
       const newValue = getIndex();
-
       if (value !== newValue) {
         setValue(newValue);
       }
     };
-
     onResize();
-
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', onResize);
     }
-
     return () => {
       if (typeof window !== 'undefined') {
         window.removeEventListener('resize', onResize);
@@ -43,16 +36,14 @@ export const useBreakpointIndex = (options = {}) => {
   return value;
 };
 export function useResponsiveValue(values, options = {}) {
-  const index = useBreakpointIndex(options); // Allow calling the function with a "normal" value without having to check on the outside.
+  const index = useBreakpointIndex(options);
 
+  // Allow calling the function with a "normal" value without having to check on the outside.
   if (!Array.isArray(values) && typeof values !== 'function') return values;
   const array = values || [];
-  /* eslint-disable jsdoc/no-undefined-types */
 
-  return (
-    /** @type {T[]} */
-    array[
-    /* eslint-enable jsdoc/no-undefined-types */
+  /* eslint-disable jsdoc/no-undefined-types */
+  return (/** @type {T[]} */array[/* eslint-enable jsdoc/no-undefined-types */
     index >= array.length ? array.length - 1 : index]
   );
 }

package/build-module/ui/utils/use-responsive-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/use-responsive-value.ts"],"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,oBAApC;AAEA,MAAMC,WAAW,GAAG,CAAE,MAAF,EAAU,MAAV,EAAkB,MAAlB,CAApB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CACjCC,OAAkC,GAAG,EADJ,KAE7B;AACJ,QAAM;AAAEC,IAAAA,YAAY,GAAG;AAAjB,MAAuBD,OAA7B;;AAEA,MAAK,OAAOC,YAAP,KAAwB,QAA7B,EAAwC;AACvC,UAAM,IAAIC,SAAJ,CACJ,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EADzF,CAAN;AAGA,GAJD,MAIO,IAAKA,YAAY,GAAG,CAAf,IAAoBA,YAAY,GAAGH,WAAW,CAACK,MAAZ,GAAqB,CAA7D,EAAiE;AACvE,UAAM,IAAIC,UAAJ,CACJ,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EAD7G,CAAN;AAGA;;AAED,QAAM,CAAEI,KAAF,EAASC,QAAT,IAAsBT,QAAQ,CAAEI,YAAF,CAApC;AAEAL,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMW,QAAQ,GAAG,MAChBT,WAAW,CAACU,MAAZ,CAAsBC,EAAF,IAAU;AAC7B,aAAO,OAAOC,MAAP,KAAkB,WAAlB,GACJA,MAAM,CAACC,UAAP,CAAoB,0BAA0BF,EAAI,GAAlD,EACCG,OAFG,GAGJ,KAHH;AAIA,KALD,EAKIT,MANL;;AAQA,UAAMU,QAAQ,GAAG,MAAM;AACtB,YAAMC,QAAQ,GAAGP,QAAQ,EAAzB;;AACA,UAAKF,KAAK,KAAKS,QAAf,EAA0B;AACzBR,QAAAA,QAAQ,CAAEQ,QAAF,CAAR;AACA;AACD,KALD;;AAOAD,IAAAA,QAAQ;;AAER,QAAK,OAAOH,MAAP,KAAkB,WAAvB,EAAqC;AACpCA,MAAAA,MAAM,CAACK,gBAAP,CAAyB,QAAzB,EAAmCF,QAAnC;AACA;;AACD,WAAO,MAAM;AACZ,UAAK,OAAOH,MAAP,KAAkB,WAAvB,EAAqC;AACpCA,QAAAA,MAAM,CAACM,mBAAP,CAA4B,QAA5B,EAAsCH,QAAtC;AACA;AACD,KAJD;AAKA,GA1BQ,EA0BN,CAAER,KAAF,CA1BM,CAAT;AA4BA,SAAOA,KAAP;AACA,CA9CM;AAgDP,OAAO,SAASY,kBAAT,CACNC,MADM,EAENlB,OAAqD,GAAG,EAFlD,EAGU;AAChB,QAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAF,CAAhC,CADgB,CAGhB;;AACA,MAAK,CAAEoB,KAAK,CAACC,OAAN,CAAeH,MAAf,CAAF,IAA6B,OAAOA,MAAP,KAAkB,UAApD,EACC,OAAOA,MAAP;AAED,QAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAxB;AAEA;;AACA;AAAO;AAAmBI,IAAAA,KAAK;AAC9B;AACAH,IAAAA,KAAK,IAAIG,KAAK,CAACnB,MAAf,GAAwBmB,KAAK,CAACnB,MAAN,GAAe,CAAvC,GAA2CgB,KAFb;AAA/B;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"]}
+{"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/ui/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CACjB,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EAC/F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CAClB,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EACnH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAG,0BAA0BF,EAAI,GAAG,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAC7D,OAAOA,MAAM;EAEd,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,mBAAmBI,KAAK,CAC9B;IACAH,KAAK,IAAIG,KAAK,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK;EAChD;AACF"}