@wordpress/components 27.6.0 → 28.0.1

package/build-module/card/card/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -19,6 +18,8 @@ import * as styles from '../styles';
 import { useCard } from './hook';
 import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnconnectedCard(props, forwardedRef) {
   const {
     children,
@@ -44,22 +45,25 @@ function UnconnectedCard(props, forwardedRef) {
       CardFooter: contextProps
     };
   }, [isBorderless, size]);
-  return createElement(ContextSystemProvider, {
-    value: contextProviderValue
-  }, createElement(View, {
-    ...otherProps,
-    ref: forwardedRef
-  }, createElement(View, {
-    className: cx(styles.Content)
-  }, children), createElement(Elevation, {
-    className: elevationClassName,
-    isInteractive: false,
-    value: elevation ? 1 : 0
-  }), createElement(Elevation, {
-    className: elevationClassName,
-    isInteractive: false,
-    value: elevation
-  })));
+  return /*#__PURE__*/_jsx(ContextSystemProvider, {
+    value: contextProviderValue,
+    children: /*#__PURE__*/_jsxs(View, {
+      ...otherProps,
+      ref: forwardedRef,
+      children: [/*#__PURE__*/_jsx(View, {
+        className: cx(styles.Content),
+        children: children
+      }), /*#__PURE__*/_jsx(Elevation, {
+        className: elevationClassName,
+        isInteractive: false,
+        value: elevation ? 1 : 0
+      }), /*#__PURE__*/_jsx(Elevation, {
+        className: elevationClassName,
+        isInteractive: false,
+        value: elevation
+      })]
+    })
+  });
 }
 
 /**

package/build-module/card/card/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","useMemo","contextConnect","ContextSystemProvider","Elevation","View","styles","useCard","CONFIG","useCx","UnconnectedCard","props","forwardedRef","children","elevation","isBorderless","isRounded","size","otherProps","elevationBorderRadius","cardBorderRadius","cx","elevationClassName","borderRadius","process","env","NODE_ENV","contextProviderValue","contextProps","CardBody","CardHeader","CardFooter","createElement","value","ref","className","Content","isInteractive","Card"],"sources":["@wordpress/components/src/card/card/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, ContextSystemProvider } from '../../context';\nimport { Elevation } from '../../elevation';\nimport { View } from '../../view';\nimport * as styles from '../styles';\nimport { useCard } from './hook';\nimport CONFIG from '../../utils/config-values';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { Props } from '../types';\n\nfunction UnconnectedCard(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tisBorderless,\n\t\tisRounded,\n\t\tsize,\n\t\t...otherProps\n\t} = useCard( props );\n\tconst elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;\n\n\tconst cx = useCx();\n\n\tconst elevationClassName = useMemo(\n\t\t() => cx( css( { borderRadius: elevationBorderRadius } ) ),\n\t\t[ cx, elevationBorderRadius ]\n\t);\n\n\tconst contextProviderValue = useMemo( () => {\n\t\tconst contextProps = {\n\t\t\tsize,\n\t\t\tisBorderless,\n\t\t};\n\t\treturn {\n\t\t\tCardBody: contextProps,\n\t\t\tCardHeader: contextProps,\n\t\t\tCardFooter: contextProps,\n\t\t};\n\t}, [ isBorderless, size ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextProviderValue }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t<View className={ cx( styles.Content ) }>{ children }</View>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation ? 1 : 0 }\n\t\t\t\t/>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * `Card` provides a flexible and extensible content container.\n * `Card` also provides a convenient set of sub-components such as `CardBody`,\n * `CardHeader`, `CardFooter`, and more.\n *\n * ```jsx\n * import {\n *   Card,\n *   CardHeader,\n *   CardBody,\n *   CardFooter,\n *   __experimentalText as Text,\n *   __experimentalHeading as Heading,\n * } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <Heading level={ 4 }>Card Title</Heading>\n *       </CardHeader>\n *       <CardBody>\n *         <Text>Card Content</Text>\n *       </CardBody>\n *       <CardFooter>\n *         <Text>Card Footer</Text>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n */\nexport const Card = contextConnect( UnconnectedCard, 'Card' );\n\nexport default Card;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,eAAe;AACrE,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,IAAI,QAAQ,YAAY;AACjC,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,MAAM,MAAM,2BAA2B;AAC9C,SAASC,KAAK,QAAQ,0BAA0B;AAGhD,SAASC,eAAeA,CACvBC,KAA8C,EAC9CC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,SAAS;IACTC,IAAI;IACJ,GAAGC;EACJ,CAAC,GAAGX,OAAO,CAAEI,KAAM,CAAC;EACpB,MAAMQ,qBAAqB,GAAGH,SAAS,GAAGR,MAAM,CAACY,gBAAgB,GAAG,CAAC;EAErE,MAAMC,EAAE,GAAGZ,KAAK,CAAC,CAAC;EAElB,MAAMa,kBAAkB,GAAGrB,OAAO,CACjC,MAAMoB,EAAE,eAAErB,GAAG,CAAE;IAAEuB,YAAY,EAAEJ;EAAsB,CAAC,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA,uDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,siIAAC,CAAE,CAAC,EAC1D,CAAEL,EAAE,EAAEF,qBAAqB,CAC5B,CAAC;EAED,MAAMQ,oBAAoB,GAAG1B,OAAO,CAAE,MAAM;IAC3C,MAAM2B,YAAY,GAAG;MACpBX,IAAI;MACJF;IACD,CAAC;IACD,OAAO;MACNc,QAAQ,EAAED,YAAY;MACtBE,UAAU,EAAEF,YAAY;MACxBG,UAAU,EAAEH;IACb,CAAC;EACF,CAAC,EAAE,CAAEb,YAAY,EAAEE,IAAI,CAAG,CAAC;EAE3B,OACCe,aAAA,CAAC7B,qBAAqB;IAAC8B,KAAK,EAAGN;EAAsB,GACpDK,aAAA,CAAC3B,IAAI;IAAA,GAAMa,UAAU;IAAGgB,GAAG,EAAGtB;EAAc,GAC3CoB,aAAA,CAAC3B,IAAI;IAAC8B,SAAS,EAAGd,EAAE,CAAEf,MAAM,CAAC8B,OAAQ;EAAG,GAAGvB,QAAgB,CAAC,EAC5DmB,aAAA,CAAC5B,SAAS;IACT+B,SAAS,EAAGb,kBAAoB;IAChCe,aAAa,EAAG,KAAO;IACvBJ,KAAK,EAAGnB,SAAS,GAAG,CAAC,GAAG;EAAG,CAC3B,CAAC,EACFkB,aAAA,CAAC5B,SAAS;IACT+B,SAAS,EAAGb,kBAAoB;IAChCe,aAAa,EAAG,KAAO;IACvBJ,KAAK,EAAGnB;EAAW,CACnB,CACI,CACgB,CAAC;AAE1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMwB,IAAI,GAAGpC,cAAc,CAAEQ,eAAe,EAAE,MAAO,CAAC;AAE7D,eAAe4B,IAAI","ignoreList":[]}
+{"version":3,"names":["css","useMemo","contextConnect","ContextSystemProvider","Elevation","View","styles","useCard","CONFIG","useCx","jsx","_jsx","jsxs","_jsxs","UnconnectedCard","props","forwardedRef","children","elevation","isBorderless","isRounded","size","otherProps","elevationBorderRadius","cardBorderRadius","cx","elevationClassName","borderRadius","process","env","NODE_ENV","contextProviderValue","contextProps","CardBody","CardHeader","CardFooter","value","ref","className","Content","isInteractive","Card"],"sources":["@wordpress/components/src/card/card/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, ContextSystemProvider } from '../../context';\nimport { Elevation } from '../../elevation';\nimport { View } from '../../view';\nimport * as styles from '../styles';\nimport { useCard } from './hook';\nimport CONFIG from '../../utils/config-values';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { Props } from '../types';\n\nfunction UnconnectedCard(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tisBorderless,\n\t\tisRounded,\n\t\tsize,\n\t\t...otherProps\n\t} = useCard( props );\n\tconst elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;\n\n\tconst cx = useCx();\n\n\tconst elevationClassName = useMemo(\n\t\t() => cx( css( { borderRadius: elevationBorderRadius } ) ),\n\t\t[ cx, elevationBorderRadius ]\n\t);\n\n\tconst contextProviderValue = useMemo( () => {\n\t\tconst contextProps = {\n\t\t\tsize,\n\t\t\tisBorderless,\n\t\t};\n\t\treturn {\n\t\t\tCardBody: contextProps,\n\t\t\tCardHeader: contextProps,\n\t\t\tCardFooter: contextProps,\n\t\t};\n\t}, [ isBorderless, size ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextProviderValue }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t<View className={ cx( styles.Content ) }>{ children }</View>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation ? 1 : 0 }\n\t\t\t\t/>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * `Card` provides a flexible and extensible content container.\n * `Card` also provides a convenient set of sub-components such as `CardBody`,\n * `CardHeader`, `CardFooter`, and more.\n *\n * ```jsx\n * import {\n *   Card,\n *   CardHeader,\n *   CardBody,\n *   CardFooter,\n *   __experimentalText as Text,\n *   __experimentalHeading as Heading,\n * } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <Heading level={ 4 }>Card Title</Heading>\n *       </CardHeader>\n *       <CardBody>\n *         <Text>Card Content</Text>\n *       </CardBody>\n *       <CardFooter>\n *         <Text>Card Footer</Text>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n */\nexport const Card = contextConnect( UnconnectedCard, 'Card' );\n\nexport default Card;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,eAAe;AACrE,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,IAAI,QAAQ,YAAY;AACjC,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,MAAM,MAAM,2BAA2B;AAC9C,SAASC,KAAK,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGjD,SAASC,eAAeA,CACvBC,KAA8C,EAC9CC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,SAAS;IACTC,IAAI;IACJ,GAAGC;EACJ,CAAC,GAAGf,OAAO,CAAEQ,KAAM,CAAC;EACpB,MAAMQ,qBAAqB,GAAGH,SAAS,GAAGZ,MAAM,CAACgB,gBAAgB,GAAG,CAAC;EAErE,MAAMC,EAAE,GAAGhB,KAAK,CAAC,CAAC;EAElB,MAAMiB,kBAAkB,GAAGzB,OAAO,CACjC,MAAMwB,EAAE,eAAEzB,GAAG,CAAE;IAAE2B,YAAY,EAAEJ;EAAsB,CAAC,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA,uDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,siIAAC,CAAE,CAAC,EAC1D,CAAEL,EAAE,EAAEF,qBAAqB,CAC5B,CAAC;EAED,MAAMQ,oBAAoB,GAAG9B,OAAO,CAAE,MAAM;IAC3C,MAAM+B,YAAY,GAAG;MACpBX,IAAI;MACJF;IACD,CAAC;IACD,OAAO;MACNc,QAAQ,EAAED,YAAY;MACtBE,UAAU,EAAEF,YAAY;MACxBG,UAAU,EAAEH;IACb,CAAC;EACF,CAAC,EAAE,CAAEb,YAAY,EAAEE,IAAI,CAAG,CAAC;EAE3B,oBACCV,IAAA,CAACR,qBAAqB;IAACiC,KAAK,EAAGL,oBAAsB;IAAAd,QAAA,eACpDJ,KAAA,CAACR,IAAI;MAAA,GAAMiB,UAAU;MAAGe,GAAG,EAAGrB,YAAc;MAAAC,QAAA,gBAC3CN,IAAA,CAACN,IAAI;QAACiC,SAAS,EAAGb,EAAE,CAAEnB,MAAM,CAACiC,OAAQ,CAAG;QAAAtB,QAAA,EAAGA;MAAQ,CAAQ,CAAC,eAC5DN,IAAA,CAACP,SAAS;QACTkC,SAAS,EAAGZ,kBAAoB;QAChCc,aAAa,EAAG,KAAO;QACvBJ,KAAK,EAAGlB,SAAS,GAAG,CAAC,GAAG;MAAG,CAC3B,CAAC,eACFP,IAAA,CAACP,SAAS;QACTkC,SAAS,EAAGZ,kBAAoB;QAChCc,aAAa,EAAG,KAAO;QACvBJ,KAAK,EAAGlB;MAAW,CACnB,CAAC;IAAA,CACG;EAAC,CACe,CAAC;AAE1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMuB,IAAI,GAAGvC,cAAc,CAAEY,eAAe,EAAE,MAAO,CAAC;AAE7D,eAAe2B,IAAI","ignoreList":[]}

package/build-module/card/card-body/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -11,18 +10,19 @@ import { contextConnect } from '../../context';
 import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedCardBody(props, forwardedRef) {
   const {
     isScrollable,
     ...otherProps
   } = useCardBody(props);
   if (isScrollable) {
-    return createElement(Scrollable, {
+    return /*#__PURE__*/_jsx(Scrollable, {
       ...otherProps,
       ref: forwardedRef
     });
   }
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ...otherProps,
     ref: forwardedRef
   });

package/build-module/card/card-body/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","Scrollable","View","useCardBody","UnconnectedCardBody","props","forwardedRef","isScrollable","otherProps","createElement","ref","CardBody"],"sources":["@wordpress/components/src/card/card-body/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { Scrollable } from '../../scrollable';\nimport { View } from '../../view';\nimport { useCardBody } from './hook';\nimport type { BodyProps } from '../types';\n\nfunction UnconnectedCardBody(\n\tprops: WordPressComponentProps< BodyProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isScrollable, ...otherProps } = useCardBody( props );\n\n\tif ( isScrollable ) {\n\t\treturn <Scrollable { ...otherProps } ref={ forwardedRef } />;\n\t}\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardBody` renders an optional content area for a `Card`.\n * Multiple `CardBody` components can be used within `Card` if needed.\n *\n * ```jsx\n * import { Card, CardBody } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>\n * \t\t...\n * \t</CardBody>\n * </Card>\n * ```\n */\nexport const CardBody = contextConnect( UnconnectedCardBody, 'CardBody' );\n\nexport default CardBody;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,WAAW,QAAQ,QAAQ;AAGpC,SAASC,mBAAmBA,CAC3BC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,YAAY;IAAE,GAAGC;EAAW,CAAC,GAAGL,WAAW,CAAEE,KAAM,CAAC;EAE5D,IAAKE,YAAY,EAAG;IACnB,OAAOE,aAAA,CAACR,UAAU;MAAA,GAAMO,UAAU;MAAGE,GAAG,EAAGJ;IAAc,CAAE,CAAC;EAC7D;EAEA,OAAOG,aAAA,CAACP,IAAI;IAAA,GAAMM,UAAU;IAAGE,GAAG,EAAGJ;EAAc,CAAE,CAAC;AACvD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,QAAQ,GAAGX,cAAc,CAAEI,mBAAmB,EAAE,UAAW,CAAC;AAEzE,eAAeO,QAAQ","ignoreList":[]}
+{"version":3,"names":["contextConnect","Scrollable","View","useCardBody","jsx","_jsx","UnconnectedCardBody","props","forwardedRef","isScrollable","otherProps","ref","CardBody"],"sources":["@wordpress/components/src/card/card-body/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { Scrollable } from '../../scrollable';\nimport { View } from '../../view';\nimport { useCardBody } from './hook';\nimport type { BodyProps } from '../types';\n\nfunction UnconnectedCardBody(\n\tprops: WordPressComponentProps< BodyProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isScrollable, ...otherProps } = useCardBody( props );\n\n\tif ( isScrollable ) {\n\t\treturn <Scrollable { ...otherProps } ref={ forwardedRef } />;\n\t}\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardBody` renders an optional content area for a `Card`.\n * Multiple `CardBody` components can be used within `Card` if needed.\n *\n * ```jsx\n * import { Card, CardBody } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>\n * \t\t...\n * \t</CardBody>\n * </Card>\n * ```\n */\nexport const CardBody = contextConnect( UnconnectedCardBody, 'CardBody' );\n\nexport default CardBody;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,WAAW,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrC,SAASC,mBAAmBA,CAC3BC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,YAAY;IAAE,GAAGC;EAAW,CAAC,GAAGP,WAAW,CAAEI,KAAM,CAAC;EAE5D,IAAKE,YAAY,EAAG;IACnB,oBAAOJ,IAAA,CAACJ,UAAU;MAAA,GAAMS,UAAU;MAAGC,GAAG,EAAGH;IAAc,CAAE,CAAC;EAC7D;EAEA,oBAAOH,IAAA,CAACH,IAAI;IAAA,GAAMQ,UAAU;IAAGC,GAAG,EAAGH;EAAc,CAAE,CAAC;AACvD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGZ,cAAc,CAAEM,mBAAmB,EAAE,UAAW,CAAC;AAEzE,eAAeM,QAAQ","ignoreList":[]}

package/build-module/card/card-divider/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../../context';
 import { Divider } from '../../divider';
 import { useCardDivider } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedCardDivider(props, forwardedRef) {
   const dividerProps = useCardDivider(props);
-  return createElement(Divider, {
+  return /*#__PURE__*/_jsx(Divider, {
     ...dividerProps,
     ref: forwardedRef
   });

package/build-module/card/card-divider/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","Divider","useCardDivider","UnconnectedCardDivider","props","forwardedRef","dividerProps","createElement","ref","CardDivider"],"sources":["@wordpress/components/src/card/card-divider/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport type { DividerProps } from '../../divider';\nimport { Divider } from '../../divider';\nimport { useCardDivider } from './hook';\n\nfunction UnconnectedCardDivider(\n\tprops: WordPressComponentProps< DividerProps, 'hr', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst dividerProps = useCardDivider( props );\n\n\treturn <Divider { ...dividerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardDivider` renders an optional divider within a `Card`.\n * It is typically used to divide multiple `CardBody` components from each other.\n *\n * ```jsx\n * import { Card, CardBody, CardDivider } from `@wordpress/components`;\n *\n * <Card>\n *  <CardBody>...</CardBody>\n *  <CardDivider />\n *  <CardBody>...</CardBody>\n * </Card>\n * ```\n */\nexport const CardDivider = contextConnect(\n\tUnconnectedCardDivider,\n\t'CardDivider'\n);\n\nexport default CardDivider;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAE9C,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,cAAc,QAAQ,QAAQ;AAEvC,SAASC,sBAAsBA,CAC9BC,KAA2D,EAC3DC,YAAiC,EAChC;EACD,MAAMC,YAAY,GAAGJ,cAAc,CAAEE,KAAM,CAAC;EAE5C,OAAOG,aAAA,CAACN,OAAO;IAAA,GAAMK,YAAY;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,WAAW,GAAGT,cAAc,CACxCG,sBAAsB,EACtB,aACD,CAAC;AAED,eAAeM,WAAW","ignoreList":[]}
+{"version":3,"names":["contextConnect","Divider","useCardDivider","jsx","_jsx","UnconnectedCardDivider","props","forwardedRef","dividerProps","ref","CardDivider"],"sources":["@wordpress/components/src/card/card-divider/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport type { DividerProps } from '../../divider';\nimport { Divider } from '../../divider';\nimport { useCardDivider } from './hook';\n\nfunction UnconnectedCardDivider(\n\tprops: WordPressComponentProps< DividerProps, 'hr', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst dividerProps = useCardDivider( props );\n\n\treturn <Divider { ...dividerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardDivider` renders an optional divider within a `Card`.\n * It is typically used to divide multiple `CardBody` components from each other.\n *\n * ```jsx\n * import { Card, CardBody, CardDivider } from `@wordpress/components`;\n *\n * <Card>\n *  <CardBody>...</CardBody>\n *  <CardDivider />\n *  <CardBody>...</CardBody>\n * </Card>\n * ```\n */\nexport const CardDivider = contextConnect(\n\tUnconnectedCardDivider,\n\t'CardDivider'\n);\n\nexport default CardDivider;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAE9C,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,cAAc,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,SAASC,sBAAsBA,CAC9BC,KAA2D,EAC3DC,YAAiC,EAChC;EACD,MAAMC,YAAY,GAAGN,cAAc,CAAEI,KAAM,CAAC;EAE5C,oBAAOF,IAAA,CAACH,OAAO;IAAA,GAAMO,YAAY;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,WAAW,GAAGV,cAAc,CACxCK,sBAAsB,EACtB,aACD,CAAC;AAED,eAAeK,WAAW","ignoreList":[]}

package/build-module/card/card-footer/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../../context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedCardFooter(props, forwardedRef) {
   const footerProps = useCardFooter(props);
-  return createElement(Flex, {
+  return /*#__PURE__*/_jsx(Flex, {
     ...footerProps,
     ref: forwardedRef
   });

package/build-module/card/card-footer/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","Flex","useCardFooter","UnconnectedCardFooter","props","forwardedRef","footerProps","createElement","ref","CardFooter"],"sources":["@wordpress/components/src/card/card-footer/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { Flex } from '../../flex';\nimport { useCardFooter } from './hook';\nimport type { FooterProps } from '../types';\n\nfunction UnconnectedCardFooter(\n\tprops: WordPressComponentProps< FooterProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst footerProps = useCardFooter( props );\n\n\treturn <Flex { ...footerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardFooter` renders an optional footer within a `Card`.\n *\n * ```jsx\n * import { Card, CardBody, CardFooter } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>...</CardBody>\n * \t<CardFooter>...</CardFooter>\n * </Card>\n * ```\n */\nexport const CardFooter = contextConnect( UnconnectedCardFooter, 'CardFooter' );\n\nexport default CardFooter;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,aAAa,QAAQ,QAAQ;AAGtC,SAASC,qBAAqBA,CAC7BC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,aAAa,CAAEE,KAAM,CAAC;EAE1C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,UAAU,GAAGT,cAAc,CAAEG,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeM,UAAU","ignoreList":[]}
+{"version":3,"names":["contextConnect","Flex","useCardFooter","jsx","_jsx","UnconnectedCardFooter","props","forwardedRef","footerProps","ref","CardFooter"],"sources":["@wordpress/components/src/card/card-footer/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { Flex } from '../../flex';\nimport { useCardFooter } from './hook';\nimport type { FooterProps } from '../types';\n\nfunction UnconnectedCardFooter(\n\tprops: WordPressComponentProps< FooterProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst footerProps = useCardFooter( props );\n\n\treturn <Flex { ...footerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardFooter` renders an optional footer within a `Card`.\n *\n * ```jsx\n * import { Card, CardBody, CardFooter } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>...</CardBody>\n * \t<CardFooter>...</CardFooter>\n * </Card>\n * ```\n */\nexport const CardFooter = contextConnect( UnconnectedCardFooter, 'CardFooter' );\n\nexport default CardFooter;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,aAAa,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvC,SAASC,qBAAqBA,CAC7BC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGN,aAAa,CAAEI,KAAM,CAAC;EAE1C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,WAAW;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,UAAU,GAAGV,cAAc,CAAEK,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeK,UAAU","ignoreList":[]}

package/build-module/card/card-header/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../../context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedCardHeader(props, forwardedRef) {
   const headerProps = useCardHeader(props);
-  return createElement(Flex, {
+  return /*#__PURE__*/_jsx(Flex, {
     ...headerProps,
     ref: forwardedRef
   });

package/build-module/card/card-header/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","Flex","useCardHeader","UnconnectedCardHeader","props","forwardedRef","headerProps","createElement","ref","CardHeader"],"sources":["@wordpress/components/src/card/card-header/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { Flex } from '../../flex';\nimport { useCardHeader } from './hook';\nimport type { HeaderProps } from '../types';\n\nfunction UnconnectedCardHeader(\n\tprops: WordPressComponentProps< HeaderProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst headerProps = useCardHeader( props );\n\n\treturn <Flex { ...headerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardHeader` renders an optional header within a `Card`.\n *\n * ```jsx\n * import { Card, CardBody, CardHeader } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardHeader>...</CardHeader>\n * \t<CardBody>...</CardBody>\n * </Card>\n * ```\n */\nexport const CardHeader = contextConnect( UnconnectedCardHeader, 'CardHeader' );\n\nexport default CardHeader;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,aAAa,QAAQ,QAAQ;AAGtC,SAASC,qBAAqBA,CAC7BC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,aAAa,CAAEE,KAAM,CAAC;EAE1C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,UAAU,GAAGT,cAAc,CAAEG,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeM,UAAU","ignoreList":[]}
+{"version":3,"names":["contextConnect","Flex","useCardHeader","jsx","_jsx","UnconnectedCardHeader","props","forwardedRef","headerProps","ref","CardHeader"],"sources":["@wordpress/components/src/card/card-header/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { Flex } from '../../flex';\nimport { useCardHeader } from './hook';\nimport type { HeaderProps } from '../types';\n\nfunction UnconnectedCardHeader(\n\tprops: WordPressComponentProps< HeaderProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst headerProps = useCardHeader( props );\n\n\treturn <Flex { ...headerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardHeader` renders an optional header within a `Card`.\n *\n * ```jsx\n * import { Card, CardBody, CardHeader } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardHeader>...</CardHeader>\n * \t<CardBody>...</CardBody>\n * </Card>\n * ```\n */\nexport const CardHeader = contextConnect( UnconnectedCardHeader, 'CardHeader' );\n\nexport default CardHeader;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,aAAa,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvC,SAASC,qBAAqBA,CAC7BC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGN,aAAa,CAAEI,KAAM,CAAC;EAE1C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,WAAW;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,UAAU,GAAGV,cAAc,CAAEK,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeK,UAAU","ignoreList":[]}

package/build-module/card/card-media/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedCardMedia(props, forwardedRef) {
   const cardMediaProps = useCardMedia(props);
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ...cardMediaProps,
     ref: forwardedRef
   });

package/build-module/card/card-media/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useCardMedia","UnconnectedCardMedia","props","forwardedRef","cardMediaProps","createElement","ref","CardMedia"],"sources":["@wordpress/components/src/card/card-media/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useCardMedia } from './hook';\nimport type { MediaProps } from '../types';\n\nfunction UnconnectedCardMedia(\n\tprops: WordPressComponentProps< MediaProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst cardMediaProps = useCardMedia( props );\n\n\treturn <View { ...cardMediaProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardMedia` provides a container for full-bleed content within a `Card`,\n * such as images, video, or even just a background color.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardMedia } from '@wordpress/components';\n *\n * const Example = () => (\n *  <Card>\n *\t  <CardMedia>\n *\t\t  <img src=\"...\" />\n *    </CardMedia>\n *    <CardBody>...</CardBody>\n *  </Card>\n * );\n * ```\n */\nexport const CardMedia = contextConnect( UnconnectedCardMedia, 'CardMedia' );\n\nexport default CardMedia;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,YAAY,QAAQ,QAAQ;AAGrC,SAASC,oBAAoBA,CAC5BC,KAAmD,EACnDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAM,CAAC;EAE5C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,cAAc;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,SAAS,GAAGT,cAAc,CAAEG,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeM,SAAS","ignoreList":[]}
+{"version":3,"names":["contextConnect","View","useCardMedia","jsx","_jsx","UnconnectedCardMedia","props","forwardedRef","cardMediaProps","ref","CardMedia"],"sources":["@wordpress/components/src/card/card-media/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useCardMedia } from './hook';\nimport type { MediaProps } from '../types';\n\nfunction UnconnectedCardMedia(\n\tprops: WordPressComponentProps< MediaProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst cardMediaProps = useCardMedia( props );\n\n\treturn <View { ...cardMediaProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardMedia` provides a container for full-bleed content within a `Card`,\n * such as images, video, or even just a background color.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardMedia } from '@wordpress/components';\n *\n * const Example = () => (\n *  <Card>\n *\t  <CardMedia>\n *\t\t  <img src=\"...\" />\n *    </CardMedia>\n *    <CardBody>...</CardBody>\n *  </Card>\n * );\n * ```\n */\nexport const CardMedia = contextConnect( UnconnectedCardMedia, 'CardMedia' );\n\nexport default CardMedia;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,YAAY,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtC,SAASC,oBAAoBA,CAC5BC,KAAmD,EACnDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGN,YAAY,CAAEI,KAAM,CAAC;EAE5C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,cAAc;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,SAAS,GAAGV,cAAc,CAAEK,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeK,SAAS","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -16,6 +15,8 @@ import { Icon, check, reset } from '@wordpress/icons';
  */
 import BaseControl from '../base-control';
 import { HStack } from '../h-stack';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
@@ -72,42 +73,47 @@ export function CheckboxControl(props) {
   }, [checked, indeterminate]);
   const id = useInstanceId(CheckboxControl, 'inspector-checkbox-control', idProp);
   const onChangeValue = event => onChange(event.target.checked);
-  return createElement(BaseControl, {
+  return /*#__PURE__*/_jsx(BaseControl, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: heading,
     id: id,
-    help: help && createElement("span", {
-      className: "components-checkbox-control__help"
-    }, help),
-    className: clsx('components-checkbox-control', className)
-  }, createElement(HStack, {
-    spacing: 0,
-    justify: "start",
-    alignment: "top"
-  }, createElement("span", {
-    className: "components-checkbox-control__input-container"
-  }, createElement("input", {
-    ref: ref,
-    id: id,
-    className: "components-checkbox-control__input",
-    type: "checkbox",
-    value: "1",
-    onChange: onChangeValue,
-    checked: checked,
-    "aria-describedby": !!help ? id + '__help' : undefined,
-    ...additionalProps
-  }), showIndeterminateIcon ? createElement(Icon, {
-    icon: reset,
-    className: "components-checkbox-control__indeterminate",
-    role: "presentation"
-  }) : null, showCheckedIcon ? createElement(Icon, {
-    icon: check,
-    className: "components-checkbox-control__checked",
-    role: "presentation"
-  }) : null), label && createElement("label", {
-    className: "components-checkbox-control__label",
-    htmlFor: id
-  }, label)));
+    help: help && /*#__PURE__*/_jsx("span", {
+      className: "components-checkbox-control__help",
+      children: help
+    }),
+    className: clsx('components-checkbox-control', className),
+    children: /*#__PURE__*/_jsxs(HStack, {
+      spacing: 0,
+      justify: "start",
+      alignment: "top",
+      children: [/*#__PURE__*/_jsxs("span", {
+        className: "components-checkbox-control__input-container",
+        children: [/*#__PURE__*/_jsx("input", {
+          ref: ref,
+          id: id,
+          className: "components-checkbox-control__input",
+          type: "checkbox",
+          value: "1",
+          onChange: onChangeValue,
+          checked: checked,
+          "aria-describedby": !!help ? id + '__help' : undefined,
+          ...additionalProps
+        }), showIndeterminateIcon ? /*#__PURE__*/_jsx(Icon, {
+          icon: reset,
+          className: "components-checkbox-control__indeterminate",
+          role: "presentation"
+        }) : null, showCheckedIcon ? /*#__PURE__*/_jsx(Icon, {
+          icon: check,
+          className: "components-checkbox-control__checked",
+          role: "presentation"
+        }) : null]
+      }), label && /*#__PURE__*/_jsx("label", {
+        className: "components-checkbox-control__label",
+        htmlFor: id,
+        children: label
+      })]
+    })
+  });
 }
 export default CheckboxControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","HStack","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","createElement","spacing","justify","alignment","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","HStack","jsx","_jsx","jsxs","_jsxs","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","children","spacing","justify","alignment","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/circular-option-picker/circular-option-picker-actions.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -9,24 +8,26 @@ import clsx from 'clsx';
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
+import { jsx as _jsx } from "react/jsx-runtime";
 export function DropdownLinkAction({
   buttonProps,
   className,
   dropdownProps,
   linkText
 }) {
-  return createElement(Dropdown, {
+  return /*#__PURE__*/_jsx(Dropdown, {
     className: clsx('components-circular-option-picker__dropdown-link-action', className),
     renderToggle: ({
       isOpen,
       onToggle
-    }) => createElement(Button, {
+    }) => /*#__PURE__*/_jsx(Button, {
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: onToggle,
       variant: "link",
-      ...buttonProps
-    }, linkText),
+      ...buttonProps,
+      children: linkText
+    }),
     ...dropdownProps
   });
 }
@@ -35,10 +36,11 @@ export function ButtonAction({
   children,
   ...additionalProps
 }) {
-  return createElement(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     className: clsx('components-circular-option-picker__clear', className),
     variant: "tertiary",
-    ...additionalProps
-  }, children);
+    ...additionalProps,
+    children: children
+  });
 }
 //# sourceMappingURL=circular-option-picker-actions.js.map

package/build-module/circular-option-picker/circular-option-picker-actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","Button","Dropdown","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","createElement","renderToggle","isOpen","onToggle","onClick","variant","ButtonAction","children","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,QAAQ,MAAM,aAAa;AAKlC,OAAO,SAASC,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,OACCC,aAAA,CAACN,QAAQ;IACRG,SAAS,EAAGL,IAAI,CACf,yDAAyD,EACzDK,SACD,CAAG;IACHI,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpCH,aAAA,CAACP,MAAM;MACN,iBAAgBS,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTT;IAAW,GAEdG,QACK,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEA,OAAO,SAASQ,YAAYA,CAAE;EAC7BT,SAAS;EACTU,QAAQ;EACR,GAAGC;AAC6D,CAAC,EAAG;EACpE,OACCR,aAAA,CAACP,MAAM;IACNI,SAAS,EAAGL,IAAI,CACf,0CAA0C,EAC1CK,SACD,CAAG;IACHQ,OAAO,EAAC,UAAU;IAAA,GACbG;EAAe,GAElBD,QACK,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["clsx","Button","Dropdown","jsx","_jsx","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","renderToggle","isOpen","onToggle","onClick","variant","children","ButtonAction","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,QAAQ,MAAM,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKnC,OAAO,SAASC,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,oBACCL,IAAA,CAACF,QAAQ;IACRK,SAAS,EAAGP,IAAI,CACf,yDAAyD,EACzDO,SACD,CAAG;IACHG,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,kBACpCR,IAAA,CAACH,MAAM;MACN,iBAAgBU,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTR,WAAW;MAAAS,QAAA,EAEdN;IAAQ,CACH,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEA,OAAO,SAASQ,YAAYA,CAAE;EAC7BT,SAAS;EACTQ,QAAQ;EACR,GAAGE;AAC6D,CAAC,EAAG;EACpE,oBACCb,IAAA,CAACH,MAAM;IACNM,SAAS,EAAGP,IAAI,CACf,0CAA0C,EAC1CO,SACD,CAAG;IACHO,OAAO,EAAC,UAAU;IAAA,GACbG,eAAe;IAAAF,QAAA,EAElBA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}

package/build-module/circular-option-picker/circular-option-picker-option-group.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,17 +6,18 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export function OptionGroup({
   className,
   options,
   ...additionalProps
 }) {
   const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined;
-  return createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ...additionalProps,
     role: role,
-    className: clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className)
-  }, options);
+    className: clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className),
+    children: options
+  });
 }
 //# sourceMappingURL=circular-option-picker-option-group.js.map

package/build-module/circular-option-picker/circular-option-picker-option-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","OptionGroup","className","options","additionalProps","role","undefined","createElement"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { OptionGroupProps } from './types';\n\nexport function OptionGroup( {\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps ) {\n\tconst role =\n\t\t'aria-label' in additionalProps || 'aria-labelledby' in additionalProps\n\t\t\t? 'group'\n\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...additionalProps }\n\t\t\trole={ role }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__option-group',\n\t\t\t\t'components-circular-option-picker__swatches',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ options }\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;;AAGA,OAAO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,OAAO;EACP,GAAGC;AACc,CAAC,EAAG;EACrB,MAAMC,IAAI,GACT,YAAY,IAAID,eAAe,IAAI,iBAAiB,IAAIA,eAAe,GACpE,OAAO,GACPE,SAAS;EAEb,OACCC,aAAA;IAAA,GACMH,eAAe;IACpBC,IAAI,EAAGA,IAAM;IACbH,SAAS,EAAGF,IAAI,CACf,iDAAiD,EACjD,6CAA6C,EAC7CE,SACD;EAAG,GAEDC,OACE,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["clsx","jsx","_jsx","OptionGroup","className","options","additionalProps","role","undefined","children"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { OptionGroupProps } from './types';\n\nexport function OptionGroup( {\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps ) {\n\tconst role =\n\t\t'aria-label' in additionalProps || 'aria-labelledby' in additionalProps\n\t\t\t? 'group'\n\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...additionalProps }\n\t\t\trole={ role }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__option-group',\n\t\t\t\t'components-circular-option-picker__swatches',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ options }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,OAAO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,OAAO;EACP,GAAGC;AACc,CAAC,EAAG;EACrB,MAAMC,IAAI,GACT,YAAY,IAAID,eAAe,IAAI,iBAAiB,IAAIA,eAAe,GACpE,OAAO,GACPE,SAAS;EAEb,oBACCN,IAAA;IAAA,GACMI,eAAe;IACpBC,IAAI,EAAGA,IAAM;IACbH,SAAS,EAAGJ,IAAI,CACf,iDAAiD,EACjD,6CAA6C,EAC7CI,SACD,CAAG;IAAAK,QAAA,EAEDJ;EAAO,CACL,CAAC;AAER","ignoreList":[]}

package/build-module/circular-option-picker/circular-option-picker-option.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -17,12 +16,14 @@ import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
 import { CompositeItem } from '../composite/v2';
 import Tooltip from '../tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
     ...additionalProps
   } = props;
-  return createElement(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     ...additionalProps,
     "aria-pressed": isPressed,
     ref: forwardedRef
@@ -40,8 +41,8 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   if (isSelected && !activeId) {
     compositeStore.setActiveId(id);
   }
-  return createElement(CompositeItem, {
-    render: createElement(Button, {
+  return /*#__PURE__*/_jsx(CompositeItem, {
+    render: /*#__PURE__*/_jsx(Button, {
       ...additionalProps,
       role: "option",
       "aria-selected": !!isSelected,
@@ -69,21 +70,23 @@ export function Option({
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = compositeStore ? createElement(OptionAsOption, {
+  const optionControl = compositeStore ? /*#__PURE__*/_jsx(OptionAsOption, {
     ...commonProps,
     compositeStore: compositeStore,
     isSelected: isSelected
-  }) : createElement(OptionAsButton, {
+  }) : /*#__PURE__*/_jsx(OptionAsButton, {
     ...commonProps,
     isPressed: isSelected
   });
-  return createElement("div", {
-    className: clsx(className, 'components-circular-option-picker__option-wrapper')
-  }, tooltipText ? createElement(Tooltip, {
-    text: tooltipText
-  }, optionControl) : optionControl, isSelected && createElement(Icon, {
-    icon: check,
-    ...selectedIconProps
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx(className, 'components-circular-option-picker__option-wrapper'),
+    children: [tooltipText ? /*#__PURE__*/_jsx(Tooltip, {
+      text: tooltipText,
+      children: optionControl
+    }) : optionControl, isSelected && /*#__PURE__*/_jsx(Icon, {
+      icon: check,
+      ...selectedIconProps
+    })]
+  });
 }
 //# sourceMappingURL=circular-option-picker-option.js.map

package/build-module/circular-option-picker/circular-option-picker-option.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","useInstanceId","forwardRef","useContext","Icon","check","CircularOptionPickerContext","Button","CompositeItem","Tooltip","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","createElement","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","optionControl","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;AAC3D,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAE9C;AACA;AACA;AACA,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAGhC,SAASC,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,OACCI,aAAA,CAACR,MAAM;IAAA,GACDO,eAAe;IACpB,gBAAeD,SAAW;IAC1BG,GAAG,EAAGJ;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMK,cAAc,GAAGf,UAAU,CAAEQ,yBAA0B,CAAC;AAE9D,SAASQ,yBAAyBA,CACjCP,KAKC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEO,EAAE;IAAEC,UAAU;IAAEC,cAAc;IAAE,GAAGP;EAAgB,CAAC,GAAGH,KAAK;EACpE,MAAMW,QAAQ,GAAGD,cAAc,CAACE,QAAQ,CAAE,UAAW,CAAC;EAEtD,IAAKH,UAAU,IAAI,CAAEE,QAAQ,EAAG;IAC/BD,cAAc,CAACG,WAAW,CAAEL,EAAG,CAAC;EACjC;EAEA,OACCJ,aAAA,CAACP,aAAa;IACbiB,MAAM,EACLV,aAAA,CAACR,MAAM;MAAA,GACDO,eAAe;MACpBY,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEN,UAAY;MAC/BJ,GAAG,EAAGJ;IAAc,CACpB,CACD;IACDe,KAAK,EAAGN,cAAgB;IACxBF,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMS,cAAc,GAAG1B,UAAU,CAAEgB,yBAA0B,CAAC;AAE9D,OAAO,SAASW,MAAMA,CAAE;EACvBC,SAAS;EACTV,UAAU;EACVW,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGlB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEmB,MAAM;IAAEZ;EAAe,CAAC,GAAGlB,UAAU,CAC5CG,2BACD,CAAC;EACD,MAAMa,EAAE,GAAGlB,aAAa,CACvB4B,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAMC,WAAW,GAAG;IACnBf,EAAE;IACFW,SAAS,EAAE,2CAA2C;IACtD,GAAGhB;EACJ,CAAC;EAED,MAAMqB,aAAa,GAAGd,cAAc,GACnCN,aAAA,CAACa,cAAc;IAAA,GACTM,WAAW;IAChBb,cAAc,EAAGA,cAAgB;IACjCD,UAAU,EAAGA;EAAY,CACzB,CAAC,GAEFL,aAAA,CAACE,cAAc;IAAA,GAAMiB,WAAW;IAAGrB,SAAS,EAAGO;EAAY,CAAE,CAC7D;EAED,OACCL,aAAA;IACCe,SAAS,EAAG9B,IAAI,CACf8B,SAAS,EACT,mDACD;EAAG,GAEDE,WAAW,GACZjB,aAAA,CAACN,OAAO;IAAC2B,IAAI,EAAGJ;EAAa,GAAGG,aAAwB,CAAC,GAEzDA,aACA,EACCf,UAAU,IAAIL,aAAA,CAACX,IAAI;IAACiC,IAAI,EAAGhC,KAAO;IAAA,GAAM0B;EAAiB,CAAI,CAC3D,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","forwardRef","useContext","Icon","check","CircularOptionPickerContext","Button","CompositeItem","Tooltip","jsx","_jsx","jsxs","_jsxs","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","optionControl","children","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;AAC3D,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAE9C;AACA;AACA;AACA,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGjC,SAASC,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,oBACCJ,IAAA,CAACJ,MAAM;IAAA,GACDW,eAAe;IACpB,gBAAeD,SAAW;IAC1BE,GAAG,EAAGH;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMI,cAAc,GAAGlB,UAAU,CAAEY,yBAA0B,CAAC;AAE9D,SAASO,yBAAyBA,CACjCN,KAKC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEM,EAAE;IAAEC,UAAU;IAAEC,cAAc;IAAE,GAAGN;EAAgB,CAAC,GAAGH,KAAK;EACpE,MAAMU,QAAQ,GAAGD,cAAc,CAACE,QAAQ,CAAE,UAAW,CAAC;EAEtD,IAAKH,UAAU,IAAI,CAAEE,QAAQ,EAAG;IAC/BD,cAAc,CAACG,WAAW,CAAEL,EAAG,CAAC;EACjC;EAEA,oBACCX,IAAA,CAACH,aAAa;IACboB,MAAM,eACLjB,IAAA,CAACJ,MAAM;MAAA,GACDW,eAAe;MACpBW,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEN,UAAY;MAC/BJ,GAAG,EAAGH;IAAc,CACpB,CACD;IACDc,KAAK,EAAGN,cAAgB;IACxBF,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMS,cAAc,GAAG7B,UAAU,CAAEmB,yBAA0B,CAAC;AAE9D,OAAO,SAASW,MAAMA,CAAE;EACvBC,SAAS;EACTV,UAAU;EACVW,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGjB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEkB,MAAM;IAAEZ;EAAe,CAAC,GAAGrB,UAAU,CAC5CG,2BACD,CAAC;EACD,MAAMgB,EAAE,GAAGrB,aAAa,CACvB+B,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAMC,WAAW,GAAG;IACnBf,EAAE;IACFW,SAAS,EAAE,2CAA2C;IACtD,GAAGf;EACJ,CAAC;EAED,MAAMoB,aAAa,GAAGd,cAAc,gBACnCb,IAAA,CAACoB,cAAc;IAAA,GACTM,WAAW;IAChBb,cAAc,EAAGA,cAAgB;IACjCD,UAAU,EAAGA;EAAY,CACzB,CAAC,gBAEFZ,IAAA,CAACS,cAAc;IAAA,GAAMiB,WAAW;IAAGpB,SAAS,EAAGM;EAAY,CAAE,CAC7D;EAED,oBACCV,KAAA;IACCoB,SAAS,EAAGjC,IAAI,CACfiC,SAAS,EACT,mDACD,CAAG;IAAAM,QAAA,GAEDJ,WAAW,gBACZxB,IAAA,CAACF,OAAO;MAAC+B,IAAI,EAAGL,WAAa;MAAAI,QAAA,EAAGD;IAAa,CAAW,CAAC,GAEzDA,aACA,EACCf,UAAU,iBAAIZ,IAAA,CAACP,IAAI;MAACqC,IAAI,EAAGpC,KAAO;MAAA,GAAM6B;IAAiB,CAAI,CAAC;EAAA,CAC5D,CAAC;AAER","ignoreList":[]}