@wordpress/components 25.0.0 → 25.1.1

package/build/snackbar/index.js

@@ -48,39 +48,35 @@ function useSpokenMessage(message, politeness) {
   }, [spokenMessage, politeness]);
 }
 
-function UnforwardedSnackbar(_ref, ref) {
-  let {
-    className,
-    children,
-    spokenMessage = children,
-    politeness = 'polite',
-    actions = [],
-    onRemove,
-    icon = null,
-    explicitDismiss = false,
-    // onDismiss is a callback executed when the snackbar is dismissed.
-    // It is distinct from onRemove, which _looks_ like a callback but is
-    // actually the function to call to remove the snackbar from the UI.
-    onDismiss,
-    listRef
-  } = _ref;
-
+function UnforwardedSnackbar({
+  className,
+  children,
+  spokenMessage = children,
+  politeness = 'polite',
+  actions = [],
+  onRemove,
+  icon = null,
+  explicitDismiss = false,
+  // onDismiss is a callback executed when the snackbar is dismissed.
+  // It is distinct from onRemove, which _looks_ like a callback but is
+  // actually the function to call to remove the snackbar from the UI.
+  onDismiss,
+  listRef
+}, ref) {
   function dismissMe(event) {
-    var _listRef$current;
-
     if (event && event.preventDefault) {
       event.preventDefault();
     } // Prevent focus loss by moving it to the list element.
 
 
-    listRef === null || listRef === void 0 ? void 0 : (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.focus();
-    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    listRef?.current?.focus();
+    onDismiss?.();
+    onRemove?.();
   }
 
   function onActionClick(event, onClick) {
     event.stopPropagation();
-    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    onRemove?.();
 
     if (onClick) {
       onClick(event);
@@ -92,8 +88,8 @@ function UnforwardedSnackbar(_ref, ref) {
   (0, _element.useEffect)(() => {
     const timeoutHandle = setTimeout(() => {
       if (!explicitDismiss) {
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+        onDismiss?.();
+        onRemove?.();
       }
     }, NOTICE_TIMEOUT);
     return () => clearTimeout(timeoutHandle);
@@ -124,12 +120,11 @@ function UnforwardedSnackbar(_ref, ref) {
     className: snackbarContentClassnames
   }, icon && (0, _element.createElement)("div", {
     className: "components-snackbar__icon"
-  }, icon), children, actions.map((_ref2, index) => {
-    let {
-      label,
-      onClick,
-      url
-    } = _ref2;
+  }, icon), children, actions.map(({
+    label,
+    onClick,
+    url
+  }, index) => {
     return (0, _element.createElement)(_button.default, {
       key: index,
       href: url,

package/build/snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/index.tsx"],"names":["NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","UnforwardedSnackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","undefined","map","index","label","url","Snackbar"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { SnackbarProps } from './types';\nimport type { NoticeAction } from '../notice/types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(\n\tmessage: SnackbarProps[ 'spokenMessage' ],\n\tpoliteness: NonNullable< SnackbarProps[ 'politeness' ] >\n) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction UnforwardedSnackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss,\n\t\tlistRef,\n\t}: WordPressComponentProps< SnackbarProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tfunction dismissMe( event: KeyboardEvent | MouseEvent ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef?.current?.focus();\n\n\t\tonDismiss?.();\n\t\tonRemove?.();\n\t}\n\n\tfunction onActionClick(\n\t\tevent: MouseEvent< HTMLButtonElement >,\n\t\tonClick: NoticeAction[ 'onClick' ]\n\t) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove?.();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss?.();\n\t\t\t\tonRemove?.();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\ttabIndex={ 0 }\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\tevent: MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t) => onActionClick( event, onClick ) }\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef( UnforwardedSnackbar );\n\nexport default Snackbar;\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/index.tsx"],"names":["NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","UnforwardedSnackbar","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","ref","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","undefined","map","label","url","index","Snackbar"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { SnackbarProps } from './types';\nimport type { NoticeAction } from '../notice/types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(\n\tmessage: SnackbarProps[ 'spokenMessage' ],\n\tpoliteness: NonNullable< SnackbarProps[ 'politeness' ] >\n) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction UnforwardedSnackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss,\n\t\tlistRef,\n\t}: WordPressComponentProps< SnackbarProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tfunction dismissMe( event: KeyboardEvent | MouseEvent ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef?.current?.focus();\n\n\t\tonDismiss?.();\n\t\tonRemove?.();\n\t}\n\n\tfunction onActionClick(\n\t\tevent: MouseEvent< HTMLButtonElement >,\n\t\tonClick: NoticeAction[ 'onClick' ]\n\t) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove?.();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss?.();\n\t\t\t\tonRemove?.();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\ttabIndex={ 0 }\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\tevent: MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t) => onActionClick( event, onClick ) }\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef( UnforwardedSnackbar );\n\nexport default Snackbar;\n"]}

package/build/snackbar/list.js

@@ -10,8 +10,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _compose = require("@wordpress/compose");
@@ -66,18 +64,17 @@ const SNACKBAR_VARIANTS = {
  * ```
  */
 
-function SnackbarList(_ref) {
-  let {
-    notices,
-    className,
-    children,
-    onRemove
-  } = _ref;
+function SnackbarList({
+  notices,
+  className,
+  children,
+  onRemove
+}) {
   const listRef = (0, _element.useRef)(null);
   const isReducedMotion = (0, _compose.useReducedMotion)();
   className = (0, _classnames.default)('components-snackbar-list', className);
 
-  const removeNotice = notice => () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(notice.id);
+  const removeNotice = notice => () => onRemove?.(notice.id);
 
   return (0, _element.createElement)("div", {
     className: className,
@@ -89,6 +86,8 @@ function SnackbarList(_ref) {
       ...restNotice
     } = notice;
     return (0, _element.createElement)(_animation.__unstableMotion.div, {
+      layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations
+      ,
       initial: 'init',
       animate: 'open',
       exit: 'exit',
@@ -96,10 +95,10 @@ function SnackbarList(_ref) {
       variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
     }, (0, _element.createElement)("div", {
       className: "components-snackbar-list__notice-container"
-    }, (0, _element.createElement)(_.default, (0, _extends2.default)({}, restNotice, {
+    }, (0, _element.createElement)(_.default, { ...restNotice,
       onRemove: removeNotice(notice),
       listRef: listRef
-    }), notice.content)));
+    }, notice.content)));
   })));
 }
 

package/build/snackbar/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/list.tsx"],"names":["SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice","undefined"],"mappings":";;;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,YAAT,OAKkD;AAAA,MAL3B;AAC7BC,IAAAA,OAD6B;AAE7BC,IAAAA,SAF6B;AAG7BC,IAAAA,QAH6B;AAI7BC,IAAAA;AAJ6B,GAK2B;AACxD,QAAMC,OAAO,GAAG,qBAAiC,IAAjC,CAAhB;AACA,QAAMC,eAAe,GAAG,gCAAxB;AACAJ,EAAAA,SAAS,GAAG,yBAAY,0BAAZ,EAAwCA,SAAxC,CAAZ;;AACA,QAAMK,YAAY,GACfC,MAAF,IAAwD,MACvDJ,QADuD,aACvDA,QADuD,uBACvDA,QAAQ,CAAII,MAAM,CAACC,EAAX,CAFV;;AAGA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,4BAAC,oCAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,4BAAC,2BAAD,CAAQ,GAAR;AACC,MAAA,OAAO,EAAG,MADX;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,IAAI,EAAG,MAHR;AAIC,MAAA,GAAG,EAAGA,MAAM,CAACC,EAJd;AAKC,MAAA,QAAQ,EACPH,eAAe,GAAGO,SAAH,GAAevB;AANhC,OASC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,SAAD,6BACMsB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CATD,CADD;AAqBA,GAxBC,CADH,CAFD,CADD;AAgCA;;eAEcX,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from '.';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { SnackbarListProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\n/**\n * Renders a list of notices.\n *\n * ```jsx\n * const MySnackbarListNotice = () => (\n *   <SnackbarList\n *     notices={ notices }\n *     onRemove={ removeNotice }\n *   />\n * );\n * ```\n */\nexport function SnackbarList( {\n\tnotices,\n\tclassName,\n\tchildren,\n\tonRemove,\n}: WordPressComponentProps< SnackbarListProps, 'div' > ) {\n\tconst listRef = useRef< HTMLDivElement | null >( null );\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice =\n\t\t( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>\n\t\t\tonRemove?.( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion ? undefined : SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/list.tsx"],"names":["SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice","undefined"],"mappings":";;;;;;;;;;AASA;;AANA;;AAKA;;AAMA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,YAAT,CAAuB;AAC7BC,EAAAA,OAD6B;AAE7BC,EAAAA,SAF6B;AAG7BC,EAAAA,QAH6B;AAI7BC,EAAAA;AAJ6B,CAAvB,EAKkD;AACxD,QAAMC,OAAO,GAAG,qBAAiC,IAAjC,CAAhB;AACA,QAAMC,eAAe,GAAG,gCAAxB;AACAJ,EAAAA,SAAS,GAAG,yBAAY,0BAAZ,EAAwCA,SAAxC,CAAZ;;AACA,QAAMK,YAAY,GACfC,MAAF,IAAwD,MACvDJ,QAAQ,GAAII,MAAM,CAACC,EAAX,CAFV;;AAGA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,4BAAC,oCAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,4BAAC,2BAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GAAGO,SAAH,GAAevB;AAPhC,OAUC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,SAAD,OACMsB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,OAKGG,MAAM,CAACG,OALV,CADD,CAVD,CADD;AAsBA,GAzBC,CADH,CAFD,CADD;AAiCA;;eAEcX,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from '.';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { SnackbarListProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\n/**\n * Renders a list of notices.\n *\n * ```jsx\n * const MySnackbarListNotice = () => (\n *   <SnackbarList\n *     notices={ notices }\n *     onRemove={ removeNotice }\n *   />\n * );\n * ```\n */\nexport function SnackbarList( {\n\tnotices,\n\tclassName,\n\tchildren,\n\tonRemove,\n}: WordPressComponentProps< SnackbarListProps, 'div' > ) {\n\tconst listRef = useRef< HTMLDivElement | null >( null );\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice =\n\t\t( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>\n\t\t\tonRemove?.( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion ? undefined : SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}

package/build/spacer/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.Spacer = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _view = require("../view");
@@ -26,9 +22,9 @@ var _hook = require("./hook");
  */
 function UnconnectedSpacer(props, forwardedRef) {
   const spacerProps = (0, _hook.useSpacer)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, spacerProps, {
+  return (0, _element.createElement)(_view.View, { ...spacerProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.

package/build/spacer/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/spacer/component.tsx"],"names":["UnconnectedSpacer","props","forwardedRef","spacerProps","Spacer"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,MAAM,GAAG,6BAAgBJ,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQI,M","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useSpacer } from './hook';\nimport type { SpacerProps } from './types';\n\nfunction UnconnectedSpacer(\n\tprops: WordPressComponentProps< SpacerProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst spacerProps = useSpacer( props );\n\n\treturn <View { ...spacerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.\n *\n * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props\n * can either be a number (which will act as a multiplier to the library's grid system base of 4px),\n * or a literal CSS value string.\n *\n * ```jsx\n * import { Spacer } from `@wordpress/components`\n *\n * function Example() {\n *   return (\n *     <View>\n *       <Spacer>\n *         <Heading>WordPress.org</Heading>\n *       </Spacer>\n *       <Text>\n *         Code is Poetry\n *       </Text>\n *     </View>\n *   );\n * }\n * ```\n */\nexport const Spacer = contextConnect( UnconnectedSpacer, 'Spacer' );\n\nexport default Spacer;\n"]}
+{"version":3,"sources":["@wordpress/components/src/spacer/component.tsx"],"names":["UnconnectedSpacer","props","forwardedRef","spacerProps","Spacer"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,OAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,MAAM,GAAG,6BAAgBJ,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQI,M","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useSpacer } from './hook';\nimport type { SpacerProps } from './types';\n\nfunction UnconnectedSpacer(\n\tprops: WordPressComponentProps< SpacerProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst spacerProps = useSpacer( props );\n\n\treturn <View { ...spacerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.\n *\n * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props\n * can either be a number (which will act as a multiplier to the library's grid system base of 4px),\n * or a literal CSS value string.\n *\n * ```jsx\n * import { Spacer } from `@wordpress/components`\n *\n * function Example() {\n *   return (\n *     <View>\n *       <Spacer>\n *         <Heading>WordPress.org</Heading>\n *       </Spacer>\n *       <Text>\n *         Code is Poetry\n *       </Text>\n *     </View>\n *   );\n * }\n * ```\n */\nexport const Spacer = contextConnect( UnconnectedSpacer, 'Spacer' );\n\nexport default Spacer;\n"]}

package/build/spinner/index.js

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _styles = require("./styles");
@@ -28,22 +26,21 @@ var _styles = require("./styles");
 /**
  * WordPress dependencies
  */
-function UnforwardedSpinner(_ref, forwardedRef) {
-  let {
-    className,
-    ...props
-  } = _ref;
-  return (0, _element.createElement)(_styles.StyledSpinner, (0, _extends2.default)({
+function UnforwardedSpinner({
+  className,
+  ...props
+}, forwardedRef) {
+  return (0, _element.createElement)(_styles.StyledSpinner, {
     className: (0, _classnames.default)('components-spinner', className),
     viewBox: "0 0 100 100",
     width: "16",
     height: "16",
     xmlns: "http://www.w3.org/2000/svg",
     role: "presentation",
-    focusable: "false"
-  }, props, {
+    focusable: "false",
+    ...props,
     ref: forwardedRef
-  }), (0, _element.createElement)(_styles.SpinnerTrack, {
+  }, (0, _element.createElement)(_styles.SpinnerTrack, {
     cx: "50",
     cy: "50",
     r: "50",

package/build/spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/spinner/index.tsx"],"names":["UnforwardedSpinner","forwardedRef","className","props","Spinner"],"mappings":";;;;;;;;;;;AAeA;;;;AAZA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAGO,SAASA,kBAAT,OAENC,YAFM,EAGL;AAAA,MAFD;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAEC;AACD,SACC,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAG,yBAAY,oBAAZ,EAAkCD,SAAlC,CADb;AAEC,IAAA,OAAO,EAAC,aAFT;AAGC,IAAA,KAAK,EAAC,IAHP;AAIC,IAAA,MAAM,EAAC,IAJR;AAKC,IAAA,KAAK,EAAC,4BALP;AAMC,IAAA,IAAI,EAAC,cANN;AAOC,IAAA,SAAS,EAAC;AAPX,KAQMC,KARN;AASC,IAAA,GAAG,EAAGF;AATP,MAYC,4BAAC,oBAAD;AACC,IAAA,EAAE,EAAC,IADJ;AAEC,IAAA,EAAE,EAAC,IAFJ;AAGC,IAAA,CAAC,EAAC,IAHH;AAIC,IAAA,YAAY,EAAC;AAJd,IAZD,EAoBC,4BAAC,wBAAD;AACC,IAAA,CAAC,EAAC,4BADH;AAEC,IAAA,YAAY,EAAC;AAFd,IApBD,CADD;AA2BA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,OAAO,GAAG,yBAAYJ,kBAAZ,CAAhB;;eACQI,O","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\nexport function UnforwardedSpinner(\n\t{ className, ...props }: WordPressComponentProps< {}, 'svg', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\treturn (\n\t\t<StyledSpinner\n\t\t\tclassName={ classNames( 'components-spinner', className ) }\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\trole=\"presentation\"\n\t\t\tfocusable=\"false\"\n\t\t\t{ ...props }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ /* Gray circular background */ }\n\t\t\t<SpinnerTrack\n\t\t\t\tcx=\"50\"\n\t\t\t\tcy=\"50\"\n\t\t\t\tr=\"50\"\n\t\t\t\tvectorEffect=\"non-scaling-stroke\"\n\t\t\t/>\n\n\t\t\t{ /* Theme-colored arc */ }\n\t\t\t<SpinnerIndicator\n\t\t\t\td=\"m 50 0 a 50 50 0 0 1 50 50\"\n\t\t\t\tvectorEffect=\"non-scaling-stroke\"\n\t\t\t/>\n\t\t</StyledSpinner>\n\t);\n}\n/**\n * `Spinner` is a component used to notify users that their action is being processed.\n *\n * @example\n * ```js\n *   import { Spinner } from '@wordpress/components';\n *\n *   function Example() {\n *     return <Spinner />;\n *   }\n * ```\n */\nexport const Spinner = forwardRef( UnforwardedSpinner );\nexport default Spinner;\n"]}
+{"version":3,"sources":["@wordpress/components/src/spinner/index.tsx"],"names":["UnforwardedSpinner","className","props","forwardedRef","Spinner"],"mappings":";;;;;;;;;;;AAeA;;AAZA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAGO,SAASA,kBAAT,CACN;AAAEC,EAAAA,SAAF;AAAa,KAAGC;AAAhB,CADM,EAENC,YAFM,EAGL;AACD,SACC,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAG,yBAAY,oBAAZ,EAAkCF,SAAlC,CADb;AAEC,IAAA,OAAO,EAAC,aAFT;AAGC,IAAA,KAAK,EAAC,IAHP;AAIC,IAAA,MAAM,EAAC,IAJR;AAKC,IAAA,KAAK,EAAC,4BALP;AAMC,IAAA,IAAI,EAAC,cANN;AAOC,IAAA,SAAS,EAAC,OAPX;AAAA,OAQMC,KARN;AASC,IAAA,GAAG,EAAGC;AATP,KAYC,4BAAC,oBAAD;AACC,IAAA,EAAE,EAAC,IADJ;AAEC,IAAA,EAAE,EAAC,IAFJ;AAGC,IAAA,CAAC,EAAC,IAHH;AAIC,IAAA,YAAY,EAAC;AAJd,IAZD,EAoBC,4BAAC,wBAAD;AACC,IAAA,CAAC,EAAC,4BADH;AAEC,IAAA,YAAY,EAAC;AAFd,IApBD,CADD;AA2BA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMC,OAAO,GAAG,yBAAYJ,kBAAZ,CAAhB;;eACQI,O","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\nexport function UnforwardedSpinner(\n\t{ className, ...props }: WordPressComponentProps< {}, 'svg', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\treturn (\n\t\t<StyledSpinner\n\t\t\tclassName={ classNames( 'components-spinner', className ) }\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\trole=\"presentation\"\n\t\t\tfocusable=\"false\"\n\t\t\t{ ...props }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ /* Gray circular background */ }\n\t\t\t<SpinnerTrack\n\t\t\t\tcx=\"50\"\n\t\t\t\tcy=\"50\"\n\t\t\t\tr=\"50\"\n\t\t\t\tvectorEffect=\"non-scaling-stroke\"\n\t\t\t/>\n\n\t\t\t{ /* Theme-colored arc */ }\n\t\t\t<SpinnerIndicator\n\t\t\t\td=\"m 50 0 a 50 50 0 0 1 50 50\"\n\t\t\t\tvectorEffect=\"non-scaling-stroke\"\n\t\t\t/>\n\t\t</StyledSpinner>\n\t);\n}\n/**\n * `Spinner` is a component used to notify users that their action is being processed.\n *\n * @example\n * ```js\n *   import { Spinner } from '@wordpress/components';\n *\n *   function Example() {\n *     return <Spinner />;\n *   }\n * ```\n */\nexport const Spinner = forwardRef( UnforwardedSpinner );\nexport default Spinner;\n"]}

package/build/style-provider/index.native.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = StyleProvider;
 
-function StyleProvider(_ref) {
-  let {
-    children
-  } = _ref;
+function StyleProvider({
+  children
+}) {
   return children;
 }
 //# sourceMappingURL=index.native.js.map

package/build/style-provider/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/style-provider/index.native.js"],"names":["StyleProvider","children"],"mappings":";;;;;;;AAAe,SAASA,aAAT,OAAuC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AACrD,SAAOA,QAAP;AACA","sourcesContent":["export default function StyleProvider( { children } ) {\n\treturn children;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/style-provider/index.native.js"],"names":["StyleProvider","children"],"mappings":";;;;;;;AAAe,SAASA,aAAT,CAAwB;AAAEC,EAAAA;AAAF,CAAxB,EAAuC;AACrD,SAAOA,QAAP;AACA","sourcesContent":["export default function StyleProvider( { children } ) {\n\treturn children;\n}\n"]}

package/build/surface/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.Surface = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _view = require("../view");
@@ -26,9 +22,9 @@ var _hook = require("./hook");
  */
 function UnconnectedSurface(props, forwardedRef) {
   const surfaceProps = (0, _hook.useSurface)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, surfaceProps, {
+  return (0, _element.createElement)(_view.View, { ...surfaceProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `Surface` is a core component that renders a primary background color.

package/build/surface/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/surface/component.tsx"],"names":["UnconnectedSurface","props","forwardedRef","surfaceProps","Surface"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,kBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,sBAAYF,KAAZ,CAArB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,YAAX;AAA0B,IAAA,GAAG,EAAGD;AAAhC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,OAAO,GAAG,6BAAgBJ,kBAAhB,EAAoC,SAApC,CAAhB;;eAEQI,O","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useSurface } from './hook';\nimport type { SurfaceProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnconnectedSurface(\n\tprops: WordPressComponentProps< SurfaceProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst surfaceProps = useSurface( props );\n\n\treturn <View { ...surfaceProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Surface` is a core component that renders a primary background color.\n *\n * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode).\n *\n * ```jsx\n * import {\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<Surface>\n * \t\t\t<Text>Code is Poetry</Text>\n * \t\t</Surface>\n * \t);\n * }\n * ```\n */\nexport const Surface = contextConnect( UnconnectedSurface, 'Surface' );\n\nexport default Surface;\n"]}
+{"version":3,"sources":["@wordpress/components/src/surface/component.tsx"],"names":["UnconnectedSurface","props","forwardedRef","surfaceProps","Surface"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,kBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,sBAAYF,KAAZ,CAArB;AAEA,SAAO,4BAAC,UAAD,OAAWE,YAAX;AAA0B,IAAA,GAAG,EAAGD;AAAhC,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,OAAO,GAAG,6BAAgBJ,kBAAhB,EAAoC,SAApC,CAAhB;;eAEQI,O","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useSurface } from './hook';\nimport type { SurfaceProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnconnectedSurface(\n\tprops: WordPressComponentProps< SurfaceProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst surfaceProps = useSurface( props );\n\n\treturn <View { ...surfaceProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Surface` is a core component that renders a primary background color.\n *\n * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode).\n *\n * ```jsx\n * import {\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<Surface>\n * \t\t\t<Text>Code is Poetry</Text>\n * \t\t</Surface>\n * \t);\n * }\n * ```\n */\nexport const Surface = contextConnect( UnconnectedSurface, 'Surface' );\n\nexport default Surface;\n"]}

package/build/surface/styles.js

@@ -23,13 +23,12 @@ exports.Surface = Surface;
 const background = /*#__PURE__*/(0, _react.css)("background-color:", _utils.CONFIG.surfaceBackgroundColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:background;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3VyZmFjZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUI2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3N1cmZhY2Uvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU3VyZmFjZVZhcmlhbnQsIFN1cmZhY2VQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgU3VyZmFjZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09ORklHLnN1cmZhY2VDb2xvciB9O1xuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBiYWNrZ3JvdW5kID0gY3NzYFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuc3VyZmFjZUJhY2tncm91bmRDb2xvciB9O1xuYDtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldEJvcmRlcnMoIHtcblx0Ym9yZGVyQm90dG9tLFxuXHRib3JkZXJMZWZ0LFxuXHRib3JkZXJSaWdodCxcblx0Ym9yZGVyVG9wLFxufTogUGljazxcblx0U3VyZmFjZVByb3BzLFxuXHQnYm9yZGVyQm90dG9tJyB8ICdib3JkZXJMZWZ0JyB8ICdib3JkZXJSaWdodCcgfCAnYm9yZGVyVG9wJ1xuPiApIHtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBgMXB4IHNvbGlkICR7IENPTkZJRy5zdXJmYWNlQm9yZGVyQ29sb3IgfWA7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGJvcmRlckJvdHRvbTogYm9yZGVyQm90dG9tID8gYm9yZGVyU3R5bGUgOiB1bmRlZmluZWQsXG5cdFx0Ym9yZGVyTGVmdDogYm9yZGVyTGVmdCA/IGJvcmRlclN0eWxlIDogdW5kZWZpbmVkLFxuXHRcdGJvcmRlclJpZ2h0OiBib3JkZXJSaWdodCA/IGJvcmRlclN0eWxlIDogdW5kZWZpbmVkLFxuXHRcdGJvcmRlclRvcDogYm9yZGVyVG9wID8gYm9yZGVyU3R5bGUgOiB1bmRlZmluZWQsXG5cdH0gKTtcbn1cblxuZXhwb3J0IGNvbnN0IHByaW1hcnkgPSBjc3NgYDtcblxuZXhwb3J0IGNvbnN0IHNlY29uZGFyeSA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLnN1cmZhY2VCYWNrZ3JvdW5kVGludENvbG9yIH07XG5gO1xuXG5leHBvcnQgY29uc3QgdGVydGlhcnkgPSBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTkZJRy5zdXJmYWNlQmFja2dyb3VuZFRlcnRpYXJ5Q29sb3IgfTtcbmA7XG5cbmNvbnN0IGN1c3RvbUJhY2tncm91bmRTaXplID0gKCBzdXJmYWNlQmFja2dyb3VuZFNpemU6IHN0cmluZyApID0+XG5cdFsgc3VyZmFjZUJhY2tncm91bmRTaXplLCBzdXJmYWNlQmFja2dyb3VuZFNpemUgXS5qb2luKCAnICcgKTtcblxuY29uc3QgZG90dGVkQmFja2dyb3VuZDEgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nICkgPT5cblx0W1xuXHRcdCc5MGRlZycsXG5cdFx0WyBDT05GSUcuc3VyZmFjZUJhY2tncm91bmRDb2xvciwgc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkIF0uam9pbihcblx0XHRcdCcgJ1xuXHRcdCksXG5cdFx0J3RyYW5zcGFyZW50IDElJyxcblx0XS5qb2luKCAnLCcgKTtcblxuY29uc3QgZG90dGVkQmFja2dyb3VuZDIgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nICkgPT5cblx0W1xuXHRcdFsgQ09ORklHLnN1cmZhY2VCYWNrZ3JvdW5kQ29sb3IsIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZCBdLmpvaW4oXG5cdFx0XHQnICdcblx0XHQpLFxuXHRcdCd0cmFuc3BhcmVudCAxJScsXG5cdF0uam9pbiggJywnICk7XG5cbmNvbnN0IGRvdHRlZEJhY2tncm91bmRDb21iaW5lZCA9ICggc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkOiBzdHJpbmcgKSA9PlxuXHRbXG5cdFx0YGxpbmVhci1ncmFkaWVudCggJHsgZG90dGVkQmFja2dyb3VuZDEoXG5cdFx0XHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWRcblx0XHQpIH0gKSBjZW50ZXJgLFxuXHRcdGBsaW5lYXItZ3JhZGllbnQoICR7IGRvdHRlZEJhY2tncm91bmQyKFxuXHRcdFx0c3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkXG5cdFx0KSB9ICkgY2VudGVyYCxcblx0XHRDT05GSUcuc3VyZmFjZUJvcmRlckJvbGRDb2xvcixcblx0XS5qb2luKCAnLCcgKTtcblxuZXhwb3J0IGNvbnN0IGdldERvdHRlZCA9IChcblx0c3VyZmFjZUJhY2tncm91bmRTaXplOiBzdHJpbmcsXG5cdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nXG4pID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgZG90dGVkQmFja2dyb3VuZENvbWJpbmVkKCBzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWQgKSB9O1xuXHRiYWNrZ3JvdW5kLXNpemU6ICR7IGN1c3RvbUJhY2tncm91bmRTaXplKCBzdXJmYWNlQmFja2dyb3VuZFNpemUgKSB9O1xuYDtcblxuY29uc3QgZ3JpZEJhY2tncm91bmQxID0gW1xuXHRgJHsgQ09ORklHLnN1cmZhY2VCb3JkZXJTdWJ0bGVDb2xvciB9IDFweGAsXG5cdCd0cmFuc3BhcmVudCAxcHgnLFxuXS5qb2luKCAnLCcgKTtcblxuY29uc3QgZ3JpZEJhY2tncm91bmQyID0gW1xuXHQnOTBkZWcnLFxuXHRgJHsgQ09ORklHLnN1cmZhY2VCb3JkZXJTdWJ0bGVDb2xvciB9IDFweGAsXG5cdCd0cmFuc3BhcmVudCAxcHgnLFxuXS5qb2luKCAnLCcgKTtcblxuY29uc3QgZ3JpZEJhY2tncm91bmRDb21iaW5lZCA9IFtcblx0YGxpbmVhci1ncmFkaWVudCggJHsgZ3JpZEJhY2tncm91bmQxIH0gKWAsXG5cdGBsaW5lYXItZ3JhZGllbnQoICR7IGdyaWRCYWNrZ3JvdW5kMiB9IClgLFxuXS5qb2luKCAnLCcgKTtcblxuZXhwb3J0IGNvbnN0IGdldEdyaWQgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZTogc3RyaW5nICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5zdXJmYWNlQmFja2dyb3VuZENvbG9yIH07XG5cdFx0YmFja2dyb3VuZC1pbWFnZTogJHsgZ3JpZEJhY2tncm91bmRDb21iaW5lZCB9O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogJHsgY3VzdG9tQmFja2dyb3VuZFNpemUoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZSApIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgZ2V0VmFyaWFudCA9IChcblx0dmFyaWFudDogU3VyZmFjZVZhcmlhbnQsXG5cdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZTogc3RyaW5nLFxuXHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWQ6IHN0cmluZ1xuKSA9PiB7XG5cdHN3aXRjaCAoIHZhcmlhbnQgKSB7XG5cdFx0Y2FzZSAnZG90dGVkJzoge1xuXHRcdFx0cmV0dXJuIGdldERvdHRlZChcblx0XHRcdFx0c3VyZmFjZUJhY2tncm91bmRTaXplLFxuXHRcdFx0XHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWRcblx0XHRcdCk7XG5cdFx0fVxuXHRcdGNhc2UgJ2dyaWQnOiB7XG5cdFx0XHRyZXR1cm4gZ2V0R3JpZCggc3VyZmFjZUJhY2tncm91bmRTaXplICk7XG5cdFx0fVxuXHRcdGNhc2UgJ3ByaW1hcnknOiB7XG5cdFx0XHRyZXR1cm4gcHJpbWFyeTtcblx0XHR9XG5cdFx0Y2FzZSAnc2Vjb25kYXJ5Jzoge1xuXHRcdFx0cmV0dXJuIHNlY29uZGFyeTtcblx0XHR9XG5cdFx0Y2FzZSAndGVydGlhcnknOiB7XG5cdFx0XHRyZXR1cm4gdGVydGlhcnk7XG5cdFx0fVxuXHR9XG59O1xuIl19 */");
 exports.background = background;
 
-function getBorders(_ref) {
-  let {
-    borderBottom,
-    borderLeft,
-    borderRight,
-    borderTop
-  } = _ref;
+function getBorders({
+  borderBottom,
+  borderLeft,
+  borderRight,
+  borderTop
+}) {
   const borderStyle = `1px solid ${_utils.CONFIG.surfaceBorderColor}`;
   return /*#__PURE__*/(0, _react.css)({
     borderBottom: borderBottom ? borderStyle : undefined,

package/build/surface/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/surface/styles.ts"],"names":["Surface","css","CONFIG","surfaceColor","COLORS","gray","background","surfaceBackgroundColor","getBorders","borderBottom","borderLeft","borderRight","borderTop","borderStyle","surfaceBorderColor","undefined","primary","secondary","surfaceBackgroundTintColor","tertiary","surfaceBackgroundTertiaryColor","customBackgroundSize","surfaceBackgroundSize","join","dottedBackground1","surfaceBackgroundSizeDotted","dottedBackground2","dottedBackgroundCombined","surfaceBorderBoldColor","getDotted","gridBackground1","surfaceBorderSubtleColor","gridBackground2","gridBackgroundCombined","getGrid","getVariant","variant"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS } from '../utils';\nimport type { SurfaceVariant, SurfaceProps } from './types';\n\nexport const Surface = css`\n\tbackground-color: ${ CONFIG.surfaceColor };\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tposition: relative;\n`;\n\nexport const background = css`\n\tbackground-color: ${ CONFIG.surfaceBackgroundColor };\n`;\n\nexport function getBorders( {\n\tborderBottom,\n\tborderLeft,\n\tborderRight,\n\tborderTop,\n}: Pick<\n\tSurfaceProps,\n\t'borderBottom' | 'borderLeft' | 'borderRight' | 'borderTop'\n> ) {\n\tconst borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;\n\n\treturn css( {\n\t\tborderBottom: borderBottom ? borderStyle : undefined,\n\t\tborderLeft: borderLeft ? borderStyle : undefined,\n\t\tborderRight: borderRight ? borderStyle : undefined,\n\t\tborderTop: borderTop ? borderStyle : undefined,\n\t} );\n}\n\nexport const primary = css``;\n\nexport const secondary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTintColor };\n`;\n\nexport const tertiary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTertiaryColor };\n`;\n\nconst customBackgroundSize = ( surfaceBackgroundSize: string ) =>\n\t[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );\n\nconst dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t'90deg',\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t`linear-gradient( ${ dottedBackground1(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\t`linear-gradient( ${ dottedBackground2(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\tCONFIG.surfaceBorderBoldColor,\n\t].join( ',' );\n\nexport const getDotted = (\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => css`\n\tbackground: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };\n\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n`;\n\nconst gridBackground1 = [\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackground2 = [\n\t'90deg',\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackgroundCombined = [\n\t`linear-gradient( ${ gridBackground1 } )`,\n\t`linear-gradient( ${ gridBackground2 } )`,\n].join( ',' );\n\nexport const getGrid = ( surfaceBackgroundSize: string ) => {\n\treturn css`\n\t\tbackground: ${ CONFIG.surfaceBackgroundColor };\n\t\tbackground-image: ${ gridBackgroundCombined };\n\t\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n\t`;\n};\n\nexport const getVariant = (\n\tvariant: SurfaceVariant,\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => {\n\tswitch ( variant ) {\n\t\tcase 'dotted': {\n\t\t\treturn getDotted(\n\t\t\t\tsurfaceBackgroundSize,\n\t\t\t\tsurfaceBackgroundSizeDotted\n\t\t\t);\n\t\t}\n\t\tcase 'grid': {\n\t\t\treturn getGrid( surfaceBackgroundSize );\n\t\t}\n\t\tcase 'primary': {\n\t\t\treturn primary;\n\t\t}\n\t\tcase 'secondary': {\n\t\t\treturn secondary;\n\t\t}\n\t\tcase 'tertiary': {\n\t\t\treturn tertiary;\n\t\t}\n\t}\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/surface/styles.ts"],"names":["Surface","css","CONFIG","surfaceColor","COLORS","gray","background","surfaceBackgroundColor","getBorders","borderBottom","borderLeft","borderRight","borderTop","borderStyle","surfaceBorderColor","undefined","primary","secondary","surfaceBackgroundTintColor","tertiary","surfaceBackgroundTertiaryColor","customBackgroundSize","surfaceBackgroundSize","join","dottedBackground1","surfaceBackgroundSizeDotted","dottedBackground2","dottedBackgroundCombined","surfaceBorderBoldColor","getDotted","gridBackground1","surfaceBorderSubtleColor","gridBackground2","gridBackgroundCombined","getGrid","getVariant","variant"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS } from '../utils';\nimport type { SurfaceVariant, SurfaceProps } from './types';\n\nexport const Surface = css`\n\tbackground-color: ${ CONFIG.surfaceColor };\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tposition: relative;\n`;\n\nexport const background = css`\n\tbackground-color: ${ CONFIG.surfaceBackgroundColor };\n`;\n\nexport function getBorders( {\n\tborderBottom,\n\tborderLeft,\n\tborderRight,\n\tborderTop,\n}: Pick<\n\tSurfaceProps,\n\t'borderBottom' | 'borderLeft' | 'borderRight' | 'borderTop'\n> ) {\n\tconst borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;\n\n\treturn css( {\n\t\tborderBottom: borderBottom ? borderStyle : undefined,\n\t\tborderLeft: borderLeft ? borderStyle : undefined,\n\t\tborderRight: borderRight ? borderStyle : undefined,\n\t\tborderTop: borderTop ? borderStyle : undefined,\n\t} );\n}\n\nexport const primary = css``;\n\nexport const secondary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTintColor };\n`;\n\nexport const tertiary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTertiaryColor };\n`;\n\nconst customBackgroundSize = ( surfaceBackgroundSize: string ) =>\n\t[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );\n\nconst dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t'90deg',\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t`linear-gradient( ${ dottedBackground1(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\t`linear-gradient( ${ dottedBackground2(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\tCONFIG.surfaceBorderBoldColor,\n\t].join( ',' );\n\nexport const getDotted = (\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => css`\n\tbackground: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };\n\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n`;\n\nconst gridBackground1 = [\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackground2 = [\n\t'90deg',\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackgroundCombined = [\n\t`linear-gradient( ${ gridBackground1 } )`,\n\t`linear-gradient( ${ gridBackground2 } )`,\n].join( ',' );\n\nexport const getGrid = ( surfaceBackgroundSize: string ) => {\n\treturn css`\n\t\tbackground: ${ CONFIG.surfaceBackgroundColor };\n\t\tbackground-image: ${ gridBackgroundCombined };\n\t\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n\t`;\n};\n\nexport const getVariant = (\n\tvariant: SurfaceVariant,\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => {\n\tswitch ( variant ) {\n\t\tcase 'dotted': {\n\t\t\treturn getDotted(\n\t\t\t\tsurfaceBackgroundSize,\n\t\t\t\tsurfaceBackgroundSizeDotted\n\t\t\t);\n\t\t}\n\t\tcase 'grid': {\n\t\t\treturn getGrid( surfaceBackgroundSize );\n\t\t}\n\t\tcase 'primary': {\n\t\t\treturn primary;\n\t\t}\n\t\tcase 'secondary': {\n\t\t\treturn secondary;\n\t\t}\n\t\tcase 'tertiary': {\n\t\t\treturn tertiary;\n\t\t}\n\t}\n};\n"]}

package/build/tab-panel/index.js

@@ -5,13 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabPanel = TabPanel;
-exports.default = void 0;
+exports.default = exports.TabPanel = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _compose = require("@wordpress/compose");
@@ -31,21 +28,19 @@ var _button = _interopRequireDefault(require("../button"));
 /**
  * Internal dependencies
  */
-const TabButton = _ref => {
-  let {
-    tabId,
-    children,
-    selected,
-    ...rest
-  } = _ref;
-  return (0, _element.createElement)(_button.default, (0, _extends2.default)({
-    role: "tab",
-    tabIndex: selected ? undefined : -1,
-    "aria-selected": selected,
-    id: tabId,
-    __experimentalIsFocusable: true
-  }, rest), children);
-};
+const TabButton = ({
+  tabId,
+  children,
+  selected,
+  ...rest
+}) => (0, _element.createElement)(_button.default, {
+  role: "tab",
+  tabIndex: selected ? undefined : -1,
+  "aria-selected": selected,
+  id: tabId,
+  __experimentalIsFocusable: true,
+  ...rest
+}, children);
 /**
  * TabPanel is an ARIA-compliant tabpanel.
  *
@@ -84,24 +79,23 @@ const TabButton = _ref => {
  */
 
 
-function TabPanel(_ref2) {
+const UnforwardedTabPanel = ({
+  className,
+  children,
+  tabs,
+  selectOnMove = true,
+  initialTabName,
+  orientation = 'horizontal',
+  activeClass = 'is-active',
+  onSelect
+}, ref) => {
   var _selectedTab$name;
 
-  let {
-    className,
-    children,
-    tabs,
-    selectOnMove = true,
-    initialTabName,
-    orientation = 'horizontal',
-    activeClass = 'is-active',
-    onSelect
-  } = _ref2;
   const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
   const [selected, setSelected] = (0, _element.useState)();
   const handleTabSelection = (0, _element.useCallback)(tabKey => {
     setSelected(tabKey);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
+    onSelect?.(tabKey);
   }, [onSelect]); // Simulate a click on the newly focused tab, which causes the component
   // to show the `tab-panel` associated with the clicked tab.
 
@@ -109,13 +103,10 @@ function TabPanel(_ref2) {
     child.click();
   };
 
-  const selectedTab = tabs.find(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return name === selected;
-  });
-  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; // Handle selecting the initial tab.
+  const selectedTab = tabs.find(({
+    name
+  }) => name === selected);
+  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab?.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; // Handle selecting the initial tab.
 
   (0, _element.useLayoutEffect)(() => {
     // If there's a selected tab, don't override it.
@@ -143,7 +134,7 @@ function TabPanel(_ref2) {
 
   (0, _element.useEffect)(() => {
     // This effect only runs when the selected tab is defined and becomes disabled.
-    if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.disabled)) {
+    if (!selectedTab?.disabled) {
       return;
     }
 
@@ -153,9 +144,10 @@ function TabPanel(_ref2) {
     if (firstEnabledTab) {
       handleTabSelection(firstEnabledTab.name);
     }
-  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.disabled, handleTabSelection]);
+  }, [tabs, selectedTab?.disabled, handleTabSelection]);
   return (0, _element.createElement)("div", {
-    className: className
+    className: className,
+    ref: ref
   }, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
     role: "tablist",
     orientation: orientation,
@@ -181,8 +173,10 @@ function TabPanel(_ref2) {
     id: `${selectedId}-view`,
     className: "components-tab-panel__tab-content"
   }, children(selectedTab)));
-}
+};
 
+const TabPanel = (0, _element.forwardRef)(UnforwardedTabPanel);
+exports.TabPanel = TabPanel;
 var _default = TabPanel;
 exports.default = _default;
 //# sourceMappingURL=index.js.map