@automattic/jetpack-components 1.1.6 → 1.1.8

package/build/components/pricing-card/index.js

@@ -20,7 +20,7 @@ const showPriceDecimals = (currencyObject) => {
  * The Pricing card component.
  *
  * @param {PricingCardProps} props -- The component props.
- * @return {React.ReactNode} The rendered component.
+ * @return {ReactNode} The rendered component.
  */
 const PricingCard = ({ currencyCode = 'USD', priceDetails = __('/month, paid yearly', 'jetpack-components'), ...props }) => {
     const currencyObjectBefore = getCurrencyObject(props.priceBefore, currencyCode);

package/build/components/pricing-card/types.d.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { Button } from '@wordpress/components';
-import type React from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export type PricingCardProps = {
     /**
      * The Title.
@@ -11,7 +11,7 @@ export type PricingCardProps = {
     /**
      * The Icon.
      */
-    icon?: string | React.ReactNode;
+    icon?: string | ReactNode;
     /**
      * Price before discount.
      */
@@ -35,17 +35,17 @@ export type PricingCardProps = {
     /**
      * The CTA callback to be called on click.
      */
-    onCtaClick?: React.ComponentProps<typeof Button>['onClick'];
+    onCtaClick?: ComponentProps<typeof Button>['onClick'];
     /**
      * Optional informative text.
      */
-    infoText?: React.ReactNode;
+    infoText?: ReactNode;
     /**
      * The TOS copy.
      */
-    tosText?: React.ReactNode;
+    tosText?: ReactNode;
     /**
      * Optional Child nodes
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };

package/build/components/pricing-table/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
 import { PricingTableProps, PricingTableColumnProps, PricingTableHeaderProps, PricingTableItemProps } from './types.ts';
-export declare const PricingTableItem: React.FC<PricingTableItemProps>;
-export declare const PricingTableHeader: React.FC<PricingTableHeaderProps>;
-export declare const PricingTableColumn: React.FC<PricingTableColumnProps>;
-declare const PricingTable: React.FC<PricingTableProps>;
+import type { FC } from 'react';
+export declare const PricingTableItem: FC<PricingTableItemProps>;
+export declare const PricingTableHeader: FC<PricingTableHeaderProps>;
+export declare const PricingTableColumn: FC<PricingTableColumnProps>;
+declare const PricingTable: FC<PricingTableProps>;
 export default PricingTable;

package/build/components/pricing-table/types.d.ts

@@ -1,4 +1,5 @@
 import type { Placement } from '../icon-tooltip/types.ts';
+import type { ReactElement, ReactNode } from 'react';
 export type PricingTableProps = {
     /**
      * Title of the pricing table.
@@ -9,14 +10,14 @@ export type PricingTableProps = {
      */
     items: {
         name: string;
-        tooltipInfo?: React.ReactNode;
+        tooltipInfo?: ReactNode;
         tooltipTitle?: string;
         tooltipPlacement?: Placement;
     }[];
     /**
      * The columns to add to the table.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Whether to show the intro offer disclaimer text with the ToS.
      */
@@ -30,13 +31,13 @@ export type PricingTableColumnProps = {
     /**
      * Items to show in a column.
      */
-    children: React.ReactElement[];
+    children: ReactElement[];
 };
 export type PricingTableHeaderProps = {
     /**
      * Items to show in a header.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 export type PricingTableItemProps = {
     /**
@@ -50,12 +51,12 @@ export type PricingTableItemProps = {
     /**
      * A custom label to display instead of the default one.
      */
-    label?: string | number | React.ReactElement;
+    label?: string | number | ReactElement;
     /**
      * Index of the item, relative to other PricingTableItem components. Internal use only.
      */
     index?: number;
-    tooltipInfo?: React.ReactNode;
+    tooltipInfo?: ReactNode;
     /**
      * Title for the popover, not required.
      */

package/build/components/product-offer/icons-card.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
 import { IconsCardProps } from './types.ts';
+import type { FC } from 'react';
 /**
  * Icons composition for a bundle product,
  * based on the list of supported products.
  *
  * @param {IconsCardProps} props - Component props.
- * @return {React.ReactNode}      Bundle product icons react component.
+ * @return {ReactNode}      Bundle product icons react component.
  */
-export declare const IconsCard: React.FC<IconsCardProps>;
+export declare const IconsCard: FC<IconsCardProps>;

package/build/components/product-offer/icons-card.js

@@ -8,7 +8,7 @@ import styles from './style.module.scss';
  * based on the list of supported products.
  *
  * @param {IconsCardProps} props - Component props.
- * @return {React.ReactNode}      Bundle product icons react component.
+ * @return {ReactNode}      Bundle product icons react component.
  */
 export const IconsCard = ({ products, icon, size = 24 }) => {
     if (icon) {

package/build/components/product-offer/index.d.ts

@@ -1,11 +1,11 @@
 import { ProductOfferProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * Product Detail component.
  *
  * @param {ProductOfferProps} props - Component props.
- * @return {React.ReactNode} - ProductOffer react component.
+ * @return {ReactNode} - ProductOffer react component.
  */
-declare const ProductOffer: React.FC<ProductOfferProps>;
+declare const ProductOffer: FC<ProductOfferProps>;
 export default ProductOffer;
 export * from './icons-card.tsx';

package/build/components/product-offer/index.js

@@ -14,7 +14,7 @@ import styles from './style.module.scss';
  * Product Detail component.
  *
  * @param {ProductOfferProps} props - Component props.
- * @return {React.ReactNode} - ProductOffer react component.
+ * @return {ReactNode} - ProductOffer react component.
  */
 const ProductOffer = ({ addProductUrl, buttonDisclaimer, buttonText = '', className, description, error = '', features, hasRequiredPlan, icon, isBundle = false, isCard, isLoading, onAdd, pricing = {}, slug, subTitle = '', supportedProducts, title = '', }) => {
     const { isFree, price, currency, offPrice } = pricing;

package/build/components/product-offer/product-offer-header.d.ts

@@ -1,9 +1,9 @@
 import { ProductOfferHeaderProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * Product Detail Card Header component.
  *
  * @param {ProductOfferHeaderProps} props - Component props.
- * @return {React.ReactNode}  ProductOfferHeader react component.
+ * @return {ReactNode}  ProductOfferHeader react component.
  */
-export declare const ProductOfferHeader: React.FC<ProductOfferHeaderProps>;
+export declare const ProductOfferHeader: FC<ProductOfferHeaderProps>;

package/build/components/product-offer/product-offer-header.js

@@ -7,7 +7,7 @@ import styles from './style.module.scss';
  * Product Detail Card Header component.
  *
  * @param {ProductOfferHeaderProps} props - Component props.
- * @return {React.ReactNode}  ProductOfferHeader react component.
+ * @return {ReactNode}  ProductOfferHeader react component.
  */
 export const ProductOfferHeader = ({ title = __('Popular upgrade', 'jetpack-components'), }) => {
     return (_jsxs("div", { className: styles['card-header'], children: [_jsx(Icon, { icon: star, className: styles['product-bundle-icon'], size: 24 }), _jsx(Text, { variant: "label", children: title })] }));

package/build/components/product-offer/types.d.ts

@@ -1,5 +1,6 @@
 import { ProductPriceProps } from '../product-price/types.ts';
 import type { JetpackIconSlug } from '../icons/index.tsx';
+import type { ReactNode } from 'react';
 export type ProductOfferProps = {
     /**
      * Product slug.
@@ -72,7 +73,7 @@ export type ProductOfferProps = {
     /**
      * Content displayed below the Add button.
      */
-    buttonDisclaimer?: React.ReactNode;
+    buttonDisclaimer?: ReactNode;
     /**
      * Error message.
      */

package/build/components/product-price/index.d.ts

@@ -1,11 +1,11 @@
 import type { ProductPriceProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * React component to render the price.
  *
  * @param {ProductPriceProps} props - Component props.
- * @return {React.ReactNode} Price react component.
+ * @return {ReactNode} Price react component.
  */
-declare const ProductPrice: React.FC<ProductPriceProps>;
+declare const ProductPrice: FC<ProductPriceProps>;
 export default ProductPrice;
 export * from './price.tsx';

package/build/components/product-price/index.js

@@ -14,7 +14,7 @@ import styles from './style.module.scss';
  * React component to render the price.
  *
  * @param {ProductPriceProps} props - Component props.
- * @return {React.ReactNode} Price react component.
+ * @return {ReactNode} Price react component.
  */
 const ProductPrice = ({ price, offPrice, currency = '', showNotOffPrice = true, hideDiscountLabel = true, promoLabel = '', legend = __('/month, paid yearly', 'jetpack-components'), isNotConvenientPrice = false, hidePriceFraction = false, children, }) => {
     if ((price == null && offPrice == null) || !currency) {

package/build/components/product-price/price.d.ts

@@ -1,9 +1,9 @@
 import type { PriceProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * React component to render a Price composition.
  *
  * @param {PriceProps} props - Component props.
- * @return {React.ReactNode} -Price react component.
+ * @return {ReactNode} -Price react component.
  */
-export declare const Price: React.FC<PriceProps>;
+export declare const Price: FC<PriceProps>;

package/build/components/product-price/price.js

@@ -7,7 +7,7 @@ import styles from './style.module.scss';
  * React component to render a Price composition.
  *
  * @param {PriceProps} props - Component props.
- * @return {React.ReactNode} -Price react component.
+ * @return {ReactNode} -Price react component.
  */
 export const Price = ({ value, currency, isOff, hidePriceFraction }) => {
     const classNames = clsx(styles.price, 'product-price_price', {

package/build/components/product-price/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type ProductPriceProps = {
     /**
      * Product price.
@@ -38,7 +39,7 @@ export type ProductPriceProps = {
     /**
      * Alternative legend with HTML syntax
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 export type PriceProps = {
     /**

package/build/components/progress-bar/index.d.ts

@@ -1,10 +1,10 @@
 import { ProgressBarProps } from './types.ts';
-import type React from 'react';
+import type { FC } from 'react';
 /**
  * Progress Bar component
  *
  * @param {ProgressBarProps} props - Component props.
- * @return {React.ReactNode} - ProgressBar react component.
+ * @return {ReactNode} - ProgressBar react component.
  */
-declare const ProgressBar: React.FC<ProgressBarProps>;
+declare const ProgressBar: FC<ProgressBarProps>;
 export default ProgressBar;

package/build/components/progress-bar/index.js

@@ -11,7 +11,7 @@ import styles from './style.module.scss';
  * Progress Bar component
  *
  * @param {ProgressBarProps} props - Component props.
- * @return {React.ReactNode} - ProgressBar react component.
+ * @return {ReactNode} - ProgressBar react component.
  */
 const ProgressBar = ({ className, progressClassName, progress, size = 'normal', }) => {
     if (progress == null) {

package/build/components/qr-code/index.d.ts

@@ -1,7 +1,7 @@
 import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
-import type React from 'react';
-type QRCodeCanvasProps = React.ComponentProps<typeof QRCodeCanvas>;
-type QRCodeSVGProps = React.ComponentProps<typeof QRCodeSVG>;
+import type { ComponentProps, FC } from 'react';
+type QRCodeCanvasProps = ComponentProps<typeof QRCodeCanvas>;
+type QRCodeSVGProps = ComponentProps<typeof QRCodeSVG>;
 export type QRCodeProps = {
     /**
      * The value to encode.
@@ -40,7 +40,7 @@ export type QRCodeProps = {
  * Renders a QR Code.
  *
  * @param {QRCodeProps} props - Component props
- * @return {React.ReactNode} - React component.
+ * @return {ReactNode} - React component.
  */
-declare const QRCode: React.FC<QRCodeProps>;
+declare const QRCode: FC<QRCodeProps>;
 export default QRCode;

package/build/components/qr-code/index.js

@@ -4,7 +4,7 @@ import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
  * Renders a QR Code.
  *
  * @param {QRCodeProps} props - Component props
- * @return {React.ReactNode} - React component.
+ * @return {ReactNode} - React component.
  */
 const QRCode = ({ value = 'https://jetpack.com', size = 248, bgColor, fgColor, level, includeMargin, imageSettings, renderAs = 'canvas', }) => {
     const commonProps = {

package/build/components/radio-control/index.d.ts

@@ -1,3 +1,4 @@
+import type { FC, ReactNode } from 'react';
 interface RadioControlProps {
     /** The current value. */
     selected: string;
@@ -6,9 +7,9 @@ interface RadioControlProps {
     /** Whether or not the radio control is currently disabled. */
     disabled?: boolean;
     /** Additional information to display below the radio control. */
-    help?: React.ReactNode;
+    help?: ReactNode;
     /** The label for the radio control. */
-    label?: React.ReactNode;
+    label?: ReactNode;
     /** If true, the label will only be visible to screen readers. */
     hideLabelFromVision?: boolean;
     /** A list of options to show. */
@@ -19,5 +20,5 @@ interface RadioControlProps {
     /** A callback function invoked when the value is changed. */
     onChange: (value: string) => void;
 }
-declare const RadioControl: React.FC<RadioControlProps>;
+declare const RadioControl: FC<RadioControlProps>;
 export default RadioControl;

package/build/components/record-meter-bar/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FC } from 'react';
 import './style.scss';
 type RecordMeterBarItem = {
     /**
@@ -56,7 +56,7 @@ export type RecordMeterBarProps = {
  * Generate Record Meter bar
  *
  * @param {RecordMeterBarProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
-declare const RecordMeterBar: React.FC<RecordMeterBarProps>;
+declare const RecordMeterBar: FC<RecordMeterBarProps>;
 export default RecordMeterBar;

package/build/components/record-meter-bar/index.js

@@ -8,7 +8,7 @@ import './style.scss';
  * Generate Record Meter bar
  *
  * @param {RecordMeterBarProps} props - Props
- * @return {React.ReactElement} - JSX element
+ * @return {ReactElement} - JSX element
  */
 const RecordMeterBar = ({ totalCount, items = [], showLegendLabelBeforeCount = false, sortByCount, className, tableCaption, legendTitle, recordTypeLabel, recordCountLabel, }) => {
     const total = useMemo(() => {

package/build/components/spinner/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
-import React from 'react';
 import './style.scss';
 const Spinner = ({ color = '#FFFFFF', className = '', size = 20 }) => {
     const theClassName = className + ' jp-components-spinner';

package/build/components/split-button/index.d.ts

@@ -1,4 +1,4 @@
 import { SplitButtonProps } from './types.ts';
-import type React from 'react';
-declare const SplitButton: React.FC<SplitButtonProps>;
+import type { FC } from 'react';
+declare const SplitButton: FC<SplitButtonProps>;
 export default SplitButton;

package/build/components/split-button/types.d.ts

@@ -1,7 +1,5 @@
-/**
- * External dependencies
- */
 import type { Button, DropdownMenu } from '@wordpress/components';
-type AllowedDropdownMenuProps = Pick<React.ComponentProps<typeof DropdownMenu>, 'controls' | 'popoverProps' | 'toggleProps' | 'label'>;
-export type SplitButtonProps = Omit<React.ComponentProps<typeof Button>, 'controls'> & AllowedDropdownMenuProps & Required<Pick<AllowedDropdownMenuProps, 'controls'>>;
+import type { ComponentProps } from 'react';
+type AllowedDropdownMenuProps = Pick<ComponentProps<typeof DropdownMenu>, 'controls' | 'popoverProps' | 'toggleProps' | 'label'>;
+export type SplitButtonProps = Omit<ComponentProps<typeof Button>, 'controls'> & AllowedDropdownMenuProps & Required<Pick<AllowedDropdownMenuProps, 'controls'>>;
 export {};

package/build/components/stat-card/index.d.ts

@@ -3,7 +3,7 @@ import { StatCardProps } from './types.ts';
  * StatCard component
  *
  * @param {StatCardProps} props - Component props.
- * @return {React.ReactNode} - StatCard react component.
+ * @return {ReactNode} - StatCard react component.
  */
 declare const StatCard: ({ className, hideValue, icon, label, value, variant, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
 export default StatCard;

package/build/components/stat-card/index.js

@@ -14,7 +14,7 @@ import styles from './style.module.scss';
  * StatCard component
  *
  * @param {StatCardProps} props - Component props.
- * @return {React.ReactNode} - StatCard react component.
+ * @return {ReactNode} - StatCard react component.
  */
 const StatCard = ({ className, hideValue, icon, label, value, variant = 'square', }) => {
     const formattedValue = formatNumber(value);

package/build/components/stat-card/types.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type StatCardProps = {
     /**
      * Custom className to be inserted.
@@ -10,7 +11,7 @@ export type StatCardProps = {
     /**
      * The stat card icon.
      */
-    icon: React.JSX.Element;
+    icon: JSX.Element;
     /**
      * The stat label.
      */

package/build/components/status/index.d.ts

@@ -1,7 +1,8 @@
+import type { JSX } from 'react';
 interface StatusProps {
     status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
     label?: string;
     className?: string;
 }
-declare const Status: ({ className, label, status }: StatusProps) => React.JSX.Element;
+declare const Status: ({ className, label, status }: StatusProps) => JSX.Element;
 export default Status;

package/build/components/swipeable/index.js

@@ -10,7 +10,7 @@ const TRANSITION_DURATION = '300ms';
 /**
  * Custom hook to observe and handle resize events on a DOM element.
  *
- * @return {[React.Dispatch<React.SetStateAction<HTMLElement | null>>, ResizeObserverEntry | null]} Tuple containing setter and entry
+ * @return {[Dispatch<SetStateAction<HTMLElement | null>>, ResizeObserverEntry | null]} Tuple containing setter and entry
  */
 function useResizeObserver() {
     const [observerEntry, setObserverEntry] = useState(null);

package/build/components/terms-of-service/index.d.ts

@@ -1,4 +1,5 @@
 import type { TermsOfServiceProps } from './types.ts';
+import type { FC } from 'react';
 import './styles.scss';
-declare const TermsOfService: React.FC<TermsOfServiceProps>;
+declare const TermsOfService: FC<TermsOfServiceProps>;
 export default TermsOfService;

package/build/components/text/index.d.ts

@@ -1,32 +1,32 @@
-import React from 'react';
 import type { H3Props, TextProps, TitleProps } from './types.ts';
+import type { FC } from 'react';
 /**
  * Text component.
  *
  * @param {TextProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export default Text;
 /**
  * Heading component - Medium size.
  *
  * @param {TextProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-export declare const H2: React.FC<TextProps>;
+export declare const H2: FC<TextProps>;
 /**
  * Heading component - Small size,
  *
  * @param {H3Props} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-export declare const H3: React.FC<H3Props>;
+export declare const H3: FC<H3Props>;
 /**
  * Title component, based on Text component.
  *
  * @param {TitleProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
-export declare const Title: React.FC<TitleProps>;
+export declare const Title: FC<TitleProps>;
 export * from './constants.ts';

package/build/components/text/index.js

@@ -7,7 +7,7 @@ import styles from './style.module.scss';
  * Text component.
  *
  * @param {TextProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
 const Text = forwardRef(({ variant = 'body', children, component, className, ...componentProps }, ref) => {
     const Component = component || VARIANTS_MAPPING[variant] || 'span';
@@ -30,14 +30,14 @@ export default Text;
  * Heading component - Medium size.
  *
  * @param {TextProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
 export const H2 = ({ children, ...componentProps }) => (_jsx(Text, { variant: "headline-medium", mb: 3, ...componentProps, children: children }));
 /**
  * Heading component - Small size,
  *
  * @param {H3Props} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
 export const H3 = ({ children, weight = 'bold', ...componentProps }) => {
     const variant = `headline-small${weight === 'bold' ? '' : `-${weight}`}`;
@@ -47,7 +47,7 @@ export const H3 = ({ children, weight = 'bold', ...componentProps }) => {
  * Title component, based on Text component.
  *
  * @param {TitleProps} props - Component props.
- * @return {React.ReactElement} - JSX.Element
+ * @return {ReactElement} - JSX.Element
  */
 export const Title = ({ children, size = 'medium', ...componentProps }) => (_jsx(Text, { variant: `title-${size}`, mb: 1, ...componentProps, children: children }));
 export * from "./constants.js";

package/build/components/text/types.d.ts

@@ -1,5 +1,5 @@
 import { VARIANTS_MAPPING } from './constants.ts';
-import type React from 'react';
+import type { CSSProperties, ElementType, FC, ReactNode } from 'react';
 export type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export type TextProps = {
     variant?: keyof typeof VARIANTS_MAPPING;
@@ -34,12 +34,12 @@ export type TextProps = {
     /** HTML Class */
     className?: string;
     /** The text itself that will be rendered. */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Force an specific tag (span, div) or use a custom component that will receive className and children */
-    component?: React.FC<{
+    component?: FC<{
         [prop: string]: unknown;
-    }> | React.ElementType;
-    style?: React.CSSProperties;
+    }> | ElementType;
+    style?: CSSProperties;
 };
 export type H3Props = TextProps & {
     /** Font weight: 'bold' (default) | 'regular'. */

package/build/components/theme-provider/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ThemeProviderProps } from './types.ts';
+import type { FC } from 'react';
 export declare const typography: {
     '--font-headline-medium': string;
     '--font-headline-small': string;
@@ -74,7 +74,7 @@ export declare const spacing: {
  * ThemeProvider React component.
  *
  * @param {ThemeProviderProps} props - Component properties.
- * @return {React.ReactNode}        ThemeProvider component.
+ * @return {ReactNode}        ThemeProvider component.
  */
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: FC<ThemeProviderProps>;
 export default ThemeProvider;

package/build/components/theme-provider/index.js

@@ -102,7 +102,7 @@ const setup = (root, id, withGlobalStyles) => {
  * ThemeProvider React component.
  *
  * @param {ThemeProviderProps} props - Component properties.
- * @return {React.ReactNode}        ThemeProvider component.
+ * @return {ReactNode}        ThemeProvider component.
  */
 const ThemeProvider = ({ children = null, targetDom, id, withGlobalStyles = true, }) => {
     const themeWrapperRef = useRef();

package/build/components/theme-provider/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type ThemeProviderProps = {
     /**
      * An optional id to register and identify the provider instance.
@@ -10,7 +11,7 @@ export type ThemeProviderProps = {
     /**
      * Content
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Inser global/reset styles
      */