@wordpress/components 18.0.0 → 19.0.3

package/build/ui/form-group/form-group-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/form-group/form-group-content.js"],"names":["FormGroupContent","alignLabel","children","help","horizontal","id","label","labelHidden","spacing","truncate","props","contextProps","content"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA,SAASA,gBAAT,CAA2B;AAC1BC,EAAAA,UAD0B;AAE1BC,EAAAA,QAF0B;AAG1BC,EAAAA,IAH0B;AAI1BC,EAAAA,UAAU,GAAG,KAJa;AAK1BC,EAAAA,EAL0B;AAM1BC,EAAAA,KAN0B;AAO1BC,EAAAA,WAP0B;AAQ1BC,EAAAA,OAAO,GAAG,CARgB;AAS1BC,EAAAA,QAT0B;AAU1B,KAAGC;AAVuB,CAA3B,EAWI;AACH,QAAMC,YAAY,GAAG,sBAAS,OAAQ;AAAEN,IAAAA,EAAF;AAAMD,IAAAA;AAAN,GAAR,CAAT,EAAuC,CAC3DC,EAD2D,EAE3DD,UAF2D,CAAvC,CAArB;AAKA,QAAMQ,OAAO,GAAGT,IAAI,GACnB,4BAAC,cAAD;AAAQ,IAAA,QAAQ,EAAG,KAAnB;AAA2B,IAAA,OAAO,EAAGK;AAArC,KACGN,QADH,EAEC,4BAAC,sBAAD,QAAiBC,IAAjB,CAFD,CADmB,GAMnBD,QAND;AASA,SACC,4BAAC,kCAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAGS;AAAnC,KACC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAGV,UADT;AAEC,IAAA,EAAE,EAAGI,EAFN;AAGC,IAAA,WAAW,EAAGE,WAHf;AAIC,IAAA,QAAQ,EAAGE;AAJZ,KAKMC,KALN,GAOGJ,KAPH,CADD,EAUGM,OAVH,CADD;AAcA;;eAEc,mBAAMZ,gBAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { VStack } from '../../v-stack';\nimport { FormGroupContext } from './form-group-context';\nimport FormGroupHelp from './form-group-help';\nimport FormGroupLabel from './form-group-label';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').FormGroupContentProps, 'label', false>} props\n */\nfunction FormGroupContent( {\n\talignLabel,\n\tchildren,\n\thelp,\n\thorizontal = false,\n\tid,\n\tlabel,\n\tlabelHidden,\n\tspacing = 2,\n\ttruncate,\n\t...props\n} ) {\n\tconst contextProps = useMemo( () => ( { id, horizontal } ), [\n\t\tid,\n\t\thorizontal,\n\t] );\n\n\tconst content = help ? (\n\t\t<VStack expanded={ false } spacing={ spacing }>\n\t\t\t{ children }\n\t\t\t<FormGroupHelp>{ help }</FormGroupHelp>\n\t\t</VStack>\n\t) : (\n\t\tchildren\n\t);\n\n\treturn (\n\t\t<FormGroupContext.Provider value={ contextProps }>\n\t\t\t<FormGroupLabel\n\t\t\t\talign={ alignLabel }\n\t\t\t\tid={ id }\n\t\t\t\tlabelHidden={ labelHidden }\n\t\t\t\ttruncate={ truncate }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</FormGroupLabel>\n\t\t\t{ content }\n\t\t</FormGroupContext.Provider>\n\t);\n}\n\nexport default memo( FormGroupContent );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/form-group/form-group-content.js"],"names":["FormGroupContent","alignLabel","children","help","horizontal","id","label","labelHidden","spacing","truncate","props","contextProps","content"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA,SAASA,gBAAT,OAWI;AAAA,MAXuB;AAC1BC,IAAAA,UAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA,IAH0B;AAI1BC,IAAAA,UAAU,GAAG,KAJa;AAK1BC,IAAAA,EAL0B;AAM1BC,IAAAA,KAN0B;AAO1BC,IAAAA,WAP0B;AAQ1BC,IAAAA,OAAO,GAAG,CARgB;AAS1BC,IAAAA,QAT0B;AAU1B,OAAGC;AAVuB,GAWvB;AACH,QAAMC,YAAY,GAAG,sBAAS,OAAQ;AAAEN,IAAAA,EAAF;AAAMD,IAAAA;AAAN,GAAR,CAAT,EAAuC,CAC3DC,EAD2D,EAE3DD,UAF2D,CAAvC,CAArB;AAKA,QAAMQ,OAAO,GAAGT,IAAI,GACnB,4BAAC,cAAD;AAAQ,IAAA,QAAQ,EAAG,KAAnB;AAA2B,IAAA,OAAO,EAAGK;AAArC,KACGN,QADH,EAEC,4BAAC,sBAAD,QAAiBC,IAAjB,CAFD,CADmB,GAMnBD,QAND;AASA,SACC,4BAAC,kCAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAGS;AAAnC,KACC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAGV,UADT;AAEC,IAAA,EAAE,EAAGI,EAFN;AAGC,IAAA,WAAW,EAAGE,WAHf;AAIC,IAAA,QAAQ,EAAGE;AAJZ,KAKMC,KALN,GAOGJ,KAPH,CADD,EAUGM,OAVH,CADD;AAcA;;eAEc,mBAAMZ,gBAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { VStack } from '../../v-stack';\nimport { FormGroupContext } from './form-group-context';\nimport FormGroupHelp from './form-group-help';\nimport FormGroupLabel from './form-group-label';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').FormGroupContentProps, 'label', false>} props\n */\nfunction FormGroupContent( {\n\talignLabel,\n\tchildren,\n\thelp,\n\thorizontal = false,\n\tid,\n\tlabel,\n\tlabelHidden,\n\tspacing = 2,\n\ttruncate,\n\t...props\n} ) {\n\tconst contextProps = useMemo( () => ( { id, horizontal } ), [\n\t\tid,\n\t\thorizontal,\n\t] );\n\n\tconst content = help ? (\n\t\t<VStack expanded={ false } spacing={ spacing }>\n\t\t\t{ children }\n\t\t\t<FormGroupHelp>{ help }</FormGroupHelp>\n\t\t</VStack>\n\t) : (\n\t\tchildren\n\t);\n\n\treturn (\n\t\t<FormGroupContext.Provider value={ contextProps }>\n\t\t\t<FormGroupLabel\n\t\t\t\talign={ alignLabel }\n\t\t\t\tid={ id }\n\t\t\t\tlabelHidden={ labelHidden }\n\t\t\t\ttruncate={ truncate }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</FormGroupLabel>\n\t\t\t{ content }\n\t\t</FormGroupContext.Provider>\n\t);\n}\n\nexport default memo( FormGroupContent );\n"]}

package/build/ui/form-group/form-group-help.js

@@ -31,9 +31,10 @@ const contextValue = {
  * @param {Props} props
  */
 
-function FormGroupHelp({
-  children
-}) {
+function FormGroupHelp(_ref) {
+  let {
+    children
+  } = _ref;
   if (!children) return null;
   return (0, _element.createElement)(_context.ContextSystemProvider, {
     value: contextValue

package/build/ui/form-group/form-group-help.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/form-group/form-group-help.js"],"names":["contextValue","Text","variant","FormGroupHelp","children"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,YAAY,GAAG;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AAAR,CAArB;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASC,aAAT,CAAwB;AAAEC,EAAAA;AAAF,CAAxB,EAAuC;AACtC,MAAK,CAAEA,QAAP,EAAkB,OAAO,IAAP;AAElB,SACC,4BAAC,8BAAD;AAAuB,IAAA,KAAK,EAAGJ;AAA/B,KACGI,QADH,CADD;AAKA;;eAEc,mBAAMD,aAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ContextSystemProvider } from '../context';\n\nconst contextValue = { Text: { variant: 'muted' } };\n\n/**\n * @typedef Props\n * @property {import('react').ReactNode} [children] The content to display within `FormGroupHelp`.\n */\n\n/**\n *\n * @param {Props} props\n */\nfunction FormGroupHelp( { children } ) {\n\tif ( ! children ) return null;\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default memo( FormGroupHelp );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/form-group/form-group-help.js"],"names":["contextValue","Text","variant","FormGroupHelp","children"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,YAAY,GAAG;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AAAR,CAArB;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASC,aAAT,OAAuC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AACtC,MAAK,CAAEA,QAAP,EAAkB,OAAO,IAAP;AAElB,SACC,4BAAC,8BAAD;AAAuB,IAAA,KAAK,EAAGJ;AAA/B,KACGI,QADH,CADD;AAKA;;eAEc,mBAAMD,aAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ContextSystemProvider } from '../context';\n\nconst contextValue = { Text: { variant: 'muted' } };\n\n/**\n * @typedef Props\n * @property {import('react').ReactNode} [children] The content to display within `FormGroupHelp`.\n */\n\n/**\n *\n * @param {Props} props\n */\nfunction FormGroupHelp( { children } ) {\n\tif ( ! children ) return null;\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default memo( FormGroupHelp );\n"]}

package/build/ui/form-group/form-group-label.js

@@ -23,12 +23,13 @@ var _visuallyHidden = require("../../visually-hidden");
  * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label', false>} props
  * @return {JSX.Element | null} The form group's label.
  */
-function FormGroupLabel({
-  children,
-  id,
-  labelHidden = false,
-  ...props
-}) {
+function FormGroupLabel(_ref) {
+  let {
+    children,
+    id,
+    labelHidden = false,
+    ...props
+  } = _ref;
   if (!children) return null;
 
   if (labelHidden) {

package/build/ui/form-group/form-group-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/form-group/form-group-label.js"],"names":["FormGroupLabel","children","id","labelHidden","props","toString"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA,SAASA,cAAT,CAAyB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,EAAZ;AAAgBC,EAAAA,WAAW,GAAG,KAA9B;AAAqC,KAAGC;AAAxC,CAAzB,EAA2E;AAC1E,MAAK,CAAEH,QAAP,EAAkB,OAAO,IAAP;;AAElB,MAAKE,WAAL,EAAmB;AAClB,WACC,4BAAC,8BAAD;AAAgB,MAAA,EAAE,EAAC,OAAnB;AAA2B,MAAA,OAAO,EAAGD,EAAH,aAAGA,EAAH,uBAAGA,EAAE,CAAEG,QAAJ;AAArC,OACGJ,QADH,CADD;AAKA;;AAED,SAAO,4BAAC,0BAAD,EAAmBG,KAAnB,EAA6BH,QAA7B,CAAP;AACA;;eAEc,mBAAMD,cAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlLabel } from '../control-label';\nimport { VisuallyHidden } from '../../visually-hidden';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label', false>} props\n * @return {JSX.Element | null} The form group's label.\n */\nfunction FormGroupLabel( { children, id, labelHidden = false, ...props } ) {\n\tif ( ! children ) return null;\n\n\tif ( labelHidden ) {\n\t\treturn (\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id?.toString() }>\n\t\t\t\t{ children }\n\t\t\t</VisuallyHidden>\n\t\t);\n\t}\n\n\treturn <ControlLabel { ...props }>{ children }</ControlLabel>;\n}\n\nexport default memo( FormGroupLabel );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/form-group/form-group-label.js"],"names":["FormGroupLabel","children","id","labelHidden","props","toString"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA,SAASA,cAAT,OAA2E;AAAA,MAAlD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAZ;AAAgBC,IAAAA,WAAW,GAAG,KAA9B;AAAqC,OAAGC;AAAxC,GAAkD;AAC1E,MAAK,CAAEH,QAAP,EAAkB,OAAO,IAAP;;AAElB,MAAKE,WAAL,EAAmB;AAClB,WACC,4BAAC,8BAAD;AAAgB,MAAA,EAAE,EAAC,OAAnB;AAA2B,MAAA,OAAO,EAAGD,EAAH,aAAGA,EAAH,uBAAGA,EAAE,CAAEG,QAAJ;AAArC,OACGJ,QADH,CADD;AAKA;;AAED,SAAO,4BAAC,0BAAD,EAAmBG,KAAnB,EAA6BH,QAA7B,CAAP;AACA;;eAEc,mBAAMD,cAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlLabel } from '../control-label';\nimport { VisuallyHidden } from '../../visually-hidden';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label', false>} props\n * @return {JSX.Element | null} The form group's label.\n */\nfunction FormGroupLabel( { children, id, labelHidden = false, ...props } ) {\n\tif ( ! children ) return null;\n\n\tif ( labelHidden ) {\n\t\treturn (\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id?.toString() }>\n\t\t\t\t{ children }\n\t\t\t</VisuallyHidden>\n\t\t);\n\t}\n\n\treturn <ControlLabel { ...props }>{ children }</ControlLabel>;\n}\n\nexport default memo( FormGroupLabel );\n"]}

package/build/ui/form-group/types.js

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

package/build/ui/form-group/use-form-group.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +13,10 @@ var styles = _interopRequireWildcard(require("./form-group-styles"));
 
 var _useCx = require("../../utils/hooks/use-cx");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * WordPress dependencies
  */

package/build/ui/form-group/use-form-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/form-group/use-form-group.js"],"names":["useFormGroup","props","alignLabel","children","className","help","horizontal","id","idProp","label","labelHidden","truncate","otherProps","cx","classes","styles","FormGroup","contentProps"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACO,SAASA,YAAT,CAAuBC,KAAvB,EAA+B;AACrC,QAAM;AACLC,IAAAA,UAAU,GAAG,MADR;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,UAAU,GAAG,KALR;AAMLC,IAAAA,EAAE,EAAEC,MANC;AAOLC,IAAAA,KAPK;AAQLC,IAAAA,WAAW,GAAG,KART;AASLC,IAAAA,QAAQ,GAAG,KATN;AAUL,OAAGC;AAVE,MAWF,+BAAkBX,KAAlB,EAAyB,WAAzB,CAXJ;AAaA,QAAMM,EAAE,GAAG,4BAAeP,YAAf,EAA6B,YAA7B,EAA2CQ,MAA3C,CAAX;AAEA,QAAMK,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAGD,EAAE,CAAEE,MAAM,CAACC,SAAT,EAAoBZ,SAApB,CAAlB;AAEA,QAAMa,YAAY,GAAG;AACpBf,IAAAA,UADoB;AAEpBC,IAAAA,QAFoB;AAGpBE,IAAAA,IAHoB;AAIpBE,IAAAA,EAJoB;AAKpBD,IAAAA,UALoB;AAMpBG,IAAAA,KANoB;AAOpBC,IAAAA,WAPoB;AAQpBC,IAAAA;AARoB,GAArB;AAWA,SAAO,EACN,GAAGC,UADG;AAENR,IAAAA,SAAS,EAAEU,OAFL;AAGNG,IAAAA,YAHM;AAINX,IAAAA;AAJM,GAAP;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../context';\nimport * as styles from './form-group-styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props\n */\nexport function useFormGroup( props ) {\n\tconst {\n\t\talignLabel = 'left',\n\t\tchildren,\n\t\tclassName,\n\t\thelp,\n\t\thorizontal = false,\n\t\tid: idProp,\n\t\tlabel,\n\t\tlabelHidden = false,\n\t\ttruncate = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'FormGroup' );\n\n\tconst id = useInstanceId( useFormGroup, 'form-group', idProp );\n\n\tconst cx = useCx();\n\n\tconst classes = cx( styles.FormGroup, className );\n\n\tconst contentProps = {\n\t\talignLabel,\n\t\tchildren,\n\t\thelp,\n\t\tid,\n\t\thorizontal,\n\t\tlabel,\n\t\tlabelHidden,\n\t\ttruncate,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcontentProps,\n\t\thorizontal,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/form-group/use-form-group.js"],"names":["useFormGroup","props","alignLabel","children","className","help","horizontal","id","idProp","label","labelHidden","truncate","otherProps","cx","classes","styles","FormGroup","contentProps"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACO,SAASA,YAAT,CAAuBC,KAAvB,EAA+B;AACrC,QAAM;AACLC,IAAAA,UAAU,GAAG,MADR;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,UAAU,GAAG,KALR;AAMLC,IAAAA,EAAE,EAAEC,MANC;AAOLC,IAAAA,KAPK;AAQLC,IAAAA,WAAW,GAAG,KART;AASLC,IAAAA,QAAQ,GAAG,KATN;AAUL,OAAGC;AAVE,MAWF,+BAAkBX,KAAlB,EAAyB,WAAzB,CAXJ;AAaA,QAAMM,EAAE,GAAG,4BAAeP,YAAf,EAA6B,YAA7B,EAA2CQ,MAA3C,CAAX;AAEA,QAAMK,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAGD,EAAE,CAAEE,MAAM,CAACC,SAAT,EAAoBZ,SAApB,CAAlB;AAEA,QAAMa,YAAY,GAAG;AACpBf,IAAAA,UADoB;AAEpBC,IAAAA,QAFoB;AAGpBE,IAAAA,IAHoB;AAIpBE,IAAAA,EAJoB;AAKpBD,IAAAA,UALoB;AAMpBG,IAAAA,KANoB;AAOpBC,IAAAA,WAPoB;AAQpBC,IAAAA;AARoB,GAArB;AAWA,SAAO,EACN,GAAGC,UADG;AAENR,IAAAA,SAAS,EAAEU,OAFL;AAGNG,IAAAA,YAHM;AAINX,IAAAA;AAJM,GAAP;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../context';\nimport * as styles from './form-group-styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props\n */\nexport function useFormGroup( props ) {\n\tconst {\n\t\talignLabel = 'left',\n\t\tchildren,\n\t\tclassName,\n\t\thelp,\n\t\thorizontal = false,\n\t\tid: idProp,\n\t\tlabel,\n\t\tlabelHidden = false,\n\t\ttruncate = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'FormGroup' );\n\n\tconst id = useInstanceId( useFormGroup, 'form-group', idProp );\n\n\tconst cx = useCx();\n\n\tconst classes = cx( styles.FormGroup, className );\n\n\tconst contentProps = {\n\t\talignLabel,\n\t\tchildren,\n\t\thelp,\n\t\tid,\n\t\thorizontal,\n\t\tlabel,\n\t\tlabelHidden,\n\t\ttruncate,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcontentProps,\n\t\thorizontal,\n\t};\n}\n"]}

package/build/ui/spinner/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BarsView = exports.BarsWrapperView = exports.ContainerView = void 0;
+exports.ContainerView = exports.BarsWrapperView = exports.BarsView = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 

package/build/ui/tooltip/content.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -25,6 +23,10 @@ var styles = _interopRequireWildcard(require("./styles"));
 
 var _useCx = require("../../utils/hooks/use-cx");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * External dependencies
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/content.js"],"names":["TooltipPopoverView","styles","TooltipContent","props","forwardedRef","children","className","otherProps","tooltip","cx","classes","View"],"mappings":";;;;;;;;;;;;;;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA;AAAF,IAAyBC,MAA/B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,cAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuB,OAAGC;AAA1B,MAAyC,+BAC9CJ,KAD8C,EAE9C,gBAF8C,CAA/C;AAIA,QAAM;AAAEK,IAAAA;AAAF,MAAc,kCAApB;AACA,QAAMC,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAGD,EAAE,CAAER,MAAM,CAACC,cAAT,EAAyBI,SAAzB,CAAlB;AAEA,SACC,4BAAC,eAAD;AACC,IAAA,EAAE,EAAGK;AADN,KAEMJ,UAFN,EAGMC,OAHN;AAIC,IAAA,SAAS,EAAGE,OAJb;AAKC,IAAA,GAAG,EAAGN;AALP,MAOC,4BAAC,kBAAD,QAAsBC,QAAtB,CAPD,CADD;AAWA;;eAEc,6BAAgBH,cAAhB,EAAgC,gBAAhC,C","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').Ref<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,"sources":["@wordpress/components/src/ui/tooltip/content.js"],"names":["TooltipPopoverView","styles","TooltipContent","props","forwardedRef","children","className","otherProps","tooltip","cx","classes","View"],"mappings":";;;;;;;;;;;;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;AAbA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA;AAAF,IAAyBC,MAA/B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,cAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuB,OAAGC;AAA1B,MAAyC,+BAC9CJ,KAD8C,EAE9C,gBAF8C,CAA/C;AAIA,QAAM;AAAEK,IAAAA;AAAF,MAAc,kCAApB;AACA,QAAMC,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAGD,EAAE,CAAER,MAAM,CAACC,cAAT,EAAyBI,SAAzB,CAAlB;AAEA,SACC,4BAAC,eAAD;AACC,IAAA,EAAE,EAAGK;AADN,KAEMJ,UAFN,EAGMC,OAHN;AAIC,IAAA,SAAS,EAAGE,OAJb;AAKC,IAAA,GAAG,EAAGN;AALP,MAOC,4BAAC,kBAAD,QAAsBC,QAAtB,CAPD,CADD;AAWA;;eAEc,6BAAgBH,cAAhB,EAAgC,gBAAhC,C","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').Ref<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"]}

package/build/ui/tooltip/styles.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TooltipShortcut = exports.noOutline = exports.TooltipPopoverView = exports.TooltipContent = void 0;
+exports.noOutline = exports.TooltipShortcut = exports.TooltipPopoverView = exports.TooltipContent = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -23,6 +21,10 @@ var _space = require("../utils/space");
 
 var _colorsValues = require("../../utils/colors-values");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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)."; }
 
 const TooltipContent = /*#__PURE__*/(0, _react.css)("z-index:", ZIndex.Tooltip, ";box-sizing:border-box;opacity:0;outline:none;transform-origin:top center;transition:opacity ", _configValues.default.transitionDurationFastest, " ease;&[data-enter]{opacity:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:TooltipContent;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvdG9vbHRpcC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWlDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvdG9vbHRpcC9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFNob3J0Y3V0IH0gZnJvbSAnLi4vc2hvcnRjdXQnO1xuaW1wb3J0ICogYXMgWkluZGV4IGZyb20gJy4uLy4uL3V0aWxzL3otaW5kZXgnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi8uLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JzLXZhbHVlcyc7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwQ29udGVudCA9IGNzc2Bcblx0ei1pbmRleDogJHsgWkluZGV4LlRvb2x0aXAgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0b3BhY2l0eTogMDtcblx0b3V0bGluZTogbm9uZTtcblx0dHJhbnNmb3JtLW9yaWdpbjogdG9wIGNlbnRlcjtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGVhc2U7XG5cblx0JltkYXRhLWVudGVyXSB7XG5cdFx0b3BhY2l0eTogMTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IFRvb2x0aXBQb3BvdmVyVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6IHJnYmEoIDAsIDAsIDAsIDAuOCApO1xuXHRib3JkZXItcmFkaXVzOiAycHg7XG5cdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAyNTUsIDI1NSwgMjU1LCAwLjA0ICk7XG5cdGNvbG9yOiAkeyBDT0xPUlMud2hpdGUgfTtcblx0cGFkZGluZzogNHB4IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBub091dGxpbmUgPSBjc3NgXG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFNob3J0Y3V0ID0gc3R5bGVkKCBTaG9ydGN1dCApYFxuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMSApIH07XG5gO1xuIl19 */");

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/styles.js"],"names":["TooltipContent","css","ZIndex","Tooltip","CONFIG","transitionDurationFastest","TooltipPopoverView","COLORS","white","noOutline","TooltipShortcut","Shortcut"],"mappings":";;;;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,MAAMA,cAAc,oBAAGC,UAAH,cACdC,MAAM,CAACC,OADO,mGAMHC,sBAAOC,yBANJ,80DAApB;;AAaA,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,gHAIpBC,qBAAOC,KAJa,6vDAAxB;;AAQA,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf;;AAIA,MAAMC,eAAe,GAAG,iCAAQC,kBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,sCAEX,kBAAO,CAAP,CAFW,6uDAArB","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\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,"sources":["@wordpress/components/src/ui/tooltip/styles.js"],"names":["TooltipContent","css","ZIndex","Tooltip","CONFIG","transitionDurationFastest","TooltipPopoverView","COLORS","white","noOutline","TooltipShortcut","Shortcut"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,cAAc,oBAAGC,UAAH,cACdC,MAAM,CAACC,OADO,mGAMHC,sBAAOC,yBANJ,80DAApB;;AAaA,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,gHAIpBC,qBAAOC,KAJa,6vDAAxB;;AAQA,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf;;AAIA,MAAMC,eAAe,GAAG,iCAAQC,kBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,sCAEX,kBAAO,CAAP,CAFW,6uDAArB","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\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"]}

package/build/ui/tooltip/types.js

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

package/build/ui/utils/colors.js

@@ -10,7 +10,9 @@ exports.getOptimalTextShade = getOptimalTextShade;
 
 var _memize = _interopRequireDefault(require("memize"));
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _colord = require("colord");
+
+var _names = _interopRequireDefault(require("colord/plugins/names"));
 
 /**
  * External dependencies
@@ -18,6 +20,7 @@ var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 
 /** @type {HTMLDivElement} */
 let colorComputationNode;
+(0, _colord.extend)([_names.default]);
 /**
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
@@ -45,7 +48,7 @@ function getColorComputationNode() {
 
 function isColor(value) {
   if (typeof value !== 'string') return false;
-  const test = (0, _tinycolor.default)(value);
+  const test = (0, _colord.colord)(value);
   return test.isValid();
 }
 /**
@@ -87,10 +90,7 @@ const getComputedBackgroundColor = (0, _memize.default)(_getComputedBackgroundCo
 
 function getOptimalTextColor(backgroundColor) {
   const background = getComputedBackgroundColor(backgroundColor);
-
-  const isReadableWithBlackText = _tinycolor.default.isReadable(background, '#000000');
-
-  return isReadableWithBlackText ? '#000000' : '#ffffff';
+  return (0, _colord.colord)(background).isLight() ? '#000000' : '#ffffff';
 }
 /**
  * Get the text shade optimized for readability, based on a background color.

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/colors.js"],"names":["colorComputationNode","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isReadableWithBlackText","tinycolor","isReadable","getOptimalTextShade","result"],"mappings":";;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;;AAIA;AACA,IAAIA,oBAAJ;AAEA;AACA;AACA;;AACA,SAASC,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,GAAG,wBAAWD,KAAX,CAAb;AAEA,SAAOC,IAAI,CAACC,OAAL,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,2BAAT,CAAsCC,eAAtC,EAAwD;AAAA;;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,cAAGC,MAAH,4CAAG,QAAQC,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,GAAG,qBAASR,2BAAT,CAAnC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASS,mBAAT,CAA8BR,eAA9B,EAAgD;AACtD,QAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAF,CAA7C;;AACA,QAAMS,uBAAuB,GAAGC,mBAAUC,UAAV,CAC/BR,UAD+B,EAE/B,SAF+B,CAAhC;;AAKA,SAAOM,uBAAuB,GAAG,SAAH,GAAe,SAA7C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,mBAAT,CAA8BZ,eAA9B,EAAgD;AACtD,QAAMa,MAAM,GAAGL,mBAAmB,CAAER,eAAF,CAAlC;AAEA,SAAOa,MAAM,KAAK,SAAX,GAAuB,MAAvB,GAAgC,OAAvC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport tinycolor from 'tinycolor2';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\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 = tinycolor( 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\tconst isReadableWithBlackText = tinycolor.isReadable(\n\t\tbackground,\n\t\t'#000000'\n\t);\n\n\treturn isReadableWithBlackText ? '#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,"sources":["@wordpress/components/src/ui/utils/colors.js"],"names":["colorComputationNode","namesPlugin","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":";;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA,IAAIA,oBAAJ;AAEA,oBAAQ,CAAEC,cAAF,CAAR;AAEA;AACA;AACA;;AACA,SAASC,uBAAT,GAAmC;AAClC,MAAK,OAAOC,QAAP,KAAoB,WAAzB,EAAuC;;AAEvC,MAAK,CAAEH,oBAAP,EAA8B;AAC7B;AACA,UAAMI,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;AACAJ,IAAAA,oBAAoB,GAAGI,EAAvB;AACA;;AAED,SAAOJ,oBAAP;AACA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASS,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,MAAK,OAAOA,KAAP,KAAiB,QAAtB,EAAiC,OAAO,KAAP;AACjC,QAAMC,IAAI,GAAG,oBAAQD,KAAR,CAAb;AAEA,SAAOC,IAAI,CAACC,OAAL,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,2BAAT,CAAsCC,eAAtC,EAAwD;AAAA;;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,cAAGC,MAAH,4CAAG,QAAQC,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,GAAG,qBAASR,2BAAT,CAAnC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASS,mBAAT,CAA8BR,eAA9B,EAAgD;AACtD,QAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAF,CAA7C;AAEA,SAAO,oBAAQG,UAAR,EAAqBM,OAArB,KAAiC,SAAjC,GAA6C,SAApD;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,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"]}

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

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PRESET_FONT_SIZES = exports.HEADING_FONT_SIZES = exports.BASE_FONT_SIZE = void 0;
 exports.getFontSize = getFontSize;
 exports.getHeadingFontSize = getHeadingFontSize;
-exports.HEADING_FONT_SIZES = exports.PRESET_FONT_SIZES = exports.BASE_FONT_SIZE = void 0;
 
 var _configValues = _interopRequireDefault(require("../../utils/config-values"));
 
@@ -33,7 +33,9 @@ exports.PRESET_FONT_SIZES = PRESET_FONT_SIZES;
 const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]);
 exports.HEADING_FONT_SIZES = HEADING_FONT_SIZES;
 
-function getFontSize(size = BASE_FONT_SIZE) {
+function getFontSize() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : BASE_FONT_SIZE;
+
   if (size in PRESET_FONT_SIZES) {
     return getFontSize(PRESET_FONT_SIZES[size]);
   }
@@ -48,7 +50,9 @@ function getFontSize(size = BASE_FONT_SIZE) {
   return `calc(${ratio} * ${_configValues.default.fontSize})`;
 }
 
-function getHeadingFontSize(size = 3) {
+function getHeadingFontSize() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
+
   if (!HEADING_FONT_SIZES.includes(size)) {
     return getFontSize(size);
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/font-size.ts"],"names":["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","CONFIG","fontSize","getHeadingFontSize","includes","headingSize"],"mappings":";;;;;;;;;;;AASA;;AATA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAiBO,MAAMA,cAAc,GAAG,EAAvB;;AAEA,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;;AASA,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;;;AAKA,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,MAAMC,sBAAOC,QAAU,GAA9C;AACA;;AAEM,SAASC,kBAAT,CAA6BR,IAAe,GAAG,CAA/C,EAA2D;AACjE,MAAK,CAAEL,kBAAkB,CAACc,QAAnB,CAA6BT,IAA7B,CAAP,EAA4D;AAC3D,WAAOD,WAAW,CAAEC,IAAF,CAAlB;AACA;;AAED,QAAMU,WAAW,GAAI,YAAYV,IAAM,EAAvC;AACA,SAAOM,sBAAQI,WAAR,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\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,"sources":["@wordpress/components/src/ui/utils/font-size.ts"],"names":["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","CONFIG","fontSize","getHeadingFontSize","includes","headingSize"],"mappings":";;;;;;;;;;;AASA;;AATA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAiBO,MAAMA,cAAc,GAAG,EAAvB;;AAEA,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;;AASA,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;;;AAKA,SAASC,WAAT,GAIG;AAAA,MAHTC,IAGS,uEAD2Bb,cAC3B;;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,MAAMC,sBAAOC,QAAU,GAA9C;AACA;;AAEM,SAASC,kBAAT,GAA2D;AAAA,MAA9BR,IAA8B,uEAAZ,CAAY;;AACjE,MAAK,CAAEL,kBAAkB,CAACc,QAAnB,CAA6BT,IAA7B,CAAP,EAA4D;AAC3D,WAAOD,WAAW,CAAEC,IAAF,CAAlB;AACA;;AAED,QAAMU,WAAW,GAAI,YAAYV,IAAM,EAAvC;AACA,SAAOM,sBAAQI,WAAR,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\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"]}

package/build/ui/utils/get-high-dpi.js

@@ -10,7 +10,11 @@ var _react = require("@emotion/react");
 /**
  * External dependencies
  */
-function getHighDpi(strings, ...interpolations) {
+function getHighDpi(strings) {
+  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    interpolations[_key - 1] = arguments[_key];
+  }
+
   const interpolatedStyles = /*#__PURE__*/(0, _react.css)(strings, ...interpolations);
   return /*#__PURE__*/(0, _react.css)("@media ( -webkit-min-device-pixel-ratio: 1.25 ),( min-resolution: 120dpi ){", interpolatedStyles, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getHighDpi;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvdXRpbHMvZ2V0LWhpZ2gtZHBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFXIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvdXRpbHMvZ2V0LWhpZ2gtZHBpLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXJlc3RyaWN0ZWQtaW1wb3J0c1xuaW1wb3J0IHR5cGUgeyBDU1NJbnRlcnBvbGF0aW9uIH0gZnJvbSAnQGVtb3Rpb24vY3NzJztcblxuZXhwb3J0IGZ1bmN0aW9uIGdldEhpZ2hEcGkoXG5cdHN0cmluZ3M6IFRlbXBsYXRlU3RyaW5nc0FycmF5LFxuXHQuLi5pbnRlcnBvbGF0aW9uczogQ1NTSW50ZXJwb2xhdGlvbltdXG4pIHtcblx0Y29uc3QgaW50ZXJwb2xhdGVkU3R5bGVzID0gY3NzKCBzdHJpbmdzLCAuLi5pbnRlcnBvbGF0aW9ucyApO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0QG1lZGlhICggLXdlYmtpdC1taW4tZGV2aWNlLXBpeGVsLXJhdGlvOiAxLjI1ICksXG5cdFx0XHQoIG1pbi1yZXNvbHV0aW9uOiAxMjBkcGkgKSB7XG5cdFx0XHQkeyBpbnRlcnBvbGF0ZWRTdHlsZXMgfVxuXHRcdH1cblx0YDtcbn1cbiJdfQ== */");
 }

package/build/ui/utils/get-high-dpi.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/get-high-dpi.ts"],"names":["getHighDpi","strings","interpolations","interpolatedStyles","css"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAKO,SAASA,UAAT,CACNC,OADM,EAEN,GAAGC,cAFG,EAGL;AACD,QAAMC,kBAAkB,gBAAG,gBAAKF,OAAL,EAAc,GAAGC,cAAjB,CAA3B;AAEA,0BAAOE,UAAP,iFAGKD,kBAHL;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport type { CSSInterpolation } from '@emotion/css';\n\nexport function getHighDpi(\n\tstrings: TemplateStringsArray,\n\t...interpolations: CSSInterpolation[]\n) {\n\tconst interpolatedStyles = css( strings, ...interpolations );\n\n\treturn css`\n\t\t@media ( -webkit-min-device-pixel-ratio: 1.25 ),\n\t\t\t( min-resolution: 120dpi ) {\n\t\t\t${ interpolatedStyles }\n\t\t}\n\t`;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/get-high-dpi.ts"],"names":["getHighDpi","strings","interpolations","interpolatedStyles","css"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAKO,SAASA,UAAT,CACNC,OADM,EAGL;AAAA,oCADEC,cACF;AADEA,IAAAA,cACF;AAAA;;AACD,QAAMC,kBAAkB,gBAAG,gBAAKF,OAAL,EAAc,GAAGC,cAAjB,CAA3B;AAEA,0BAAOE,UAAP,iFAGKD,kBAHL;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport type { CSSInterpolation } from '@emotion/css';\n\nexport function getHighDpi(\n\tstrings: TemplateStringsArray,\n\t...interpolations: CSSInterpolation[]\n) {\n\tconst interpolatedStyles = css( strings, ...interpolations );\n\n\treturn css`\n\t\t@media ( -webkit-min-device-pixel-ratio: 1.25 ),\n\t\t\t( min-resolution: 120dpi ) {\n\t\t\t${ interpolatedStyles }\n\t\t}\n\t`;\n}\n"]}

package/build/ui/utils/types.js

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useResponsiveValue = useResponsiveValue;
 exports.useBreakpointIndex = void 0;
+exports.useResponsiveValue = useResponsiveValue;
 
 var _element = require("@wordpress/element");
 
@@ -13,7 +13,8 @@ var _element = require("@wordpress/element");
  */
 const breakpoints = ['40em', '52em', '64em'];
 
-const useBreakpointIndex = (options = {}) => {
+const useBreakpointIndex = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     defaultIndex = 0
   } = options;
@@ -55,7 +56,8 @@ const useBreakpointIndex = (options = {}) => {
 
 exports.useBreakpointIndex = useBreakpointIndex;
 
-function useResponsiveValue(values, options = {}) {
+function useResponsiveValue(values) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   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;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/use-responsive-value.ts"],"names":["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":";;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,CAAE,MAAF,EAAU,MAAV,EAAkB,MAAlB,CAApB;;AAEO,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,IAAsB,uBAAUL,YAAV,CAA5B;AAEA,0BAAW,MAAM;AAChB,UAAMM,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,GA1BD,EA0BG,CAAER,KAAF,CA1BH;AA4BA,SAAOA,KAAP;AACA,CA9CM;;;;AAgDA,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,"sources":["@wordpress/components/src/ui/utils/use-responsive-value.ts"],"names":["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":";;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,CAAE,MAAF,EAAU,MAAV,EAAkB,MAAlB,CAApB;;AAEO,MAAMC,kBAAkB,GAAG,YAE7B;AAAA,MADJC,OACI,uEADiC,EACjC;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,IAAsB,uBAAUL,YAAV,CAA5B;AAEA,0BAAW,MAAM;AAChB,UAAMM,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,GA1BD,EA0BG,CAAER,KAAF,CA1BH;AA4BA,SAAOA,KAAP;AACA,CA9CM;;;;AAgDA,SAASY,kBAAT,CACNC,MADM,EAGU;AAAA,MADhBlB,OACgB,uEADwC,EACxC;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"]}

package/build/unit-control/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 Object.defineProperty(exports, "parseUnit", {
   enumerable: true,
   get: function () {
@@ -19,7 +18,6 @@ Object.defineProperty(exports, "useCustomUnits", {
     return _utils.useCustomUnits;
   }
 });
-exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -45,40 +43,43 @@ var _utils = require("./utils");
 
 var _hooks = require("../utils/hooks");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 
 /**
  * WordPress dependencies
  */
-
-/**
- * Internal dependencies
- */
-function UnitControl({
-  __unstableStateReducer: stateReducer = state => state,
-  autoComplete = 'off',
-  className,
-  disabled = false,
-  disableUnits = false,
-  isPressEnterToChange = false,
-  isResetValueOnUnitChange = false,
-  isUnitSelectTabbable = true,
-  label,
-  onChange = _lodash.noop,
-  onUnitChange = _lodash.noop,
-  size = 'default',
-  style,
-  unit: unitProp,
-  units: unitsProp = _utils.CSS_UNITS,
-  value: valueProp,
-  ...props
-}, ref) {
+function UnitControl(_ref, forwardedRef) {
+  let {
+    __unstableStateReducer: stateReducer = state => state,
+    autoComplete = 'off',
+    className,
+    disabled = false,
+    disableUnits = false,
+    isPressEnterToChange = false,
+    isResetValueOnUnitChange = false,
+    isUnitSelectTabbable = true,
+    label,
+    onChange = _lodash.noop,
+    onUnitChange = _lodash.noop,
+    size = 'default',
+    style,
+    unit: unitProp,
+    units: unitsProp = _utils.CSS_UNITS,
+    value: valueProp,
+    ...props
+  } = _ref;
   const units = (0, _element.useMemo)(() => (0, _utils.getUnitsWithCurrentUnit)(valueProp, unitProp, unitsProp), [valueProp, unitProp, unitsProp]);
   const [value, initialUnit] = (0, _utils.getParsedValue)(valueProp, unitProp, units);
   const [unit, setUnit] = (0, _hooks.useControlledState)(unitProp, {
-    initial: initialUnit
+    initial: initialUnit,
+    fallback: ''
   }); // Stores parsed value for hand-off in state reducer
 
   const refParsedValue = (0, _element.useRef)(null);
@@ -115,16 +116,16 @@ function UnitControl({
   };
 
   const mayUpdateUnit = event => {
-    if (!isNaN(event.target.value)) {
+    if (!isNaN(Number(event.currentTarget.value))) {
       refParsedValue.current = null;
       return;
     }
 
-    const [parsedValue, parsedUnit] = (0, _utils.getValidParsedUnit)(event.target.value, units, value, unit);
-    refParsedValue.current = parsedValue;
+    const [parsedValue, parsedUnit] = (0, _utils.getValidParsedUnit)(event.currentTarget.value, units, value, unit);
+    refParsedValue.current = parsedValue.toString();
 
     if (isPressEnterToChange && parsedUnit !== unit) {
-      const data = units.find(option => option.value === parsedUnit);
+      const data = Array.isArray(units) ? units.find(option => option.value === parsedUnit) : undefined;
       const changeProps = {
         event,
         data
@@ -151,9 +152,9 @@ function UnitControl({
    * This allows us to tap into actions to transform the (next) state for
    * InputControl.
    *
-   * @param {Object} state  State from InputControl
-   * @param {Object} action Action triggering state change
-   * @return {Object} The updated state to apply to InputControl
+   * @param  state  State from InputControl
+   * @param  action Action triggering state change
+   * @return The updated state to apply to InputControl
    */
 
 
@@ -176,11 +177,11 @@ function UnitControl({
   const inputSuffix = !disableUnits ? (0, _element.createElement)(_unitSelectControl.default, {
     "aria-label": (0, _i18n.__)('Select unit'),
     disabled: disabled,
-    isTabbable: isUnitSelectTabbable,
-    options: units,
+    isUnitSelectTabbable: isUnitSelectTabbable,
     onChange: handleOnUnitChange,
     size: size,
-    value: unit
+    unit: unit,
+    units: units
   }) : null;
   let step = props.step;
   /*
@@ -211,7 +212,7 @@ function UnitControl({
     onBlur: handleOnBlur,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnChange,
-    ref: ref,
+    ref: forwardedRef,
     size: size,
     suffix: inputSuffix,
     value: value,
@@ -219,6 +220,23 @@ function UnitControl({
     __unstableStateReducer: (0, _reducer.composeStateReducers)(unitControlStateReducer, stateReducer)
   })));
 }
+/**
+ * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
+ *
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ *   const [ value, setValue ] = useState( '10px' );
+ *
+ *   return <UnitControl onChange={ setValue } value={ value } />;
+ * };
+ * ```
+ */
+
 
 const ForwardedUnitControl = (0, _element.forwardRef)(UnitControl);
 var _default = ForwardedUnitControl;