@coinbase/cdp-react 0.0.97 → 0.0.99

package/dist/theme/theme.d.ts

@@ -1,5 +1,20 @@
 import { borderRadiusSemantic, borderRadiusComponents, colorsSemantic, colorsComponents, fontSemantic, fontComponents, zIndexSemantic, zIndexComponents } from './tokens';
 import { Flattened } from './utils';
+/**
+ * The theme is a flattened tokens object with values appropriate for web environments
+ * (i.e. CSS properties & CSS Variables).
+ *
+ * It DOES NOT include the namespace (`--cdp-web-`) in the keys.
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<Theme> = {
+ *   "colors-bg-primary": "#0052ff",
+ *   "colors-cta-primary-bg-default": "var(--cdp-web-colors-bg-primary)",
+ *   "font-size-base": "16px",
+ * };
+ * ```
+ */
 export declare const theme: Flattened<{
     borderRadius: {
         readonly badge: {
@@ -674,36 +689,267 @@ export declare const theme: Flattened<{
         };
     };
 }>;
+/**
+ * Semantic colors are the base colors for the theme.
+ *
+ * They are typically not used directly in the components, but are used to define the base colors
+ * for the components.
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<SemanticColors> = {
+ *   "colors-bg-default": "#ffffff",
+ *   "colors-bg-alternate": "#eef0f3",
+ *   "colors-bg-overlay": "color(from var(--cdp-web-colors-bg-alternate) srgb r g b / 0.33)",
+ * };
+ * ```
+ *
+ * @see {@link colorsSemantic} for the default token values
+ * @see {@link ComponentColors} for the component colors that inherit from the SemanticColors
+ */
 export type SemanticColors = Flattened<{
     colors: typeof colorsSemantic;
 }>;
+/**
+ * Component colors are the colors for the individual UI components.
+ * They inherit values from the SemanticColors via CSS variables.
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<ComponentColors> = {
+ *   "colors-cta-primary-bg-default": "var(--cdp-web-colors-bg-primary)",
+ * };
+ * ```
+ *
+ * @see {@link colorsComponents} for the default token values
+ * @see {@link SemanticColors} for the semantic colors that the component colors inherit from
+ */
 export type ComponentColors = Flattened<{
     colors: typeof colorsComponents;
 }>;
+/**
+ * Defines all the colors in the theme.
+ *
+ * To fully change the theme, you only need to define the {@link SemanticColors}, and the rest of the values
+ * will inherit from them. For more granular control, individual {@link ComponentColors} can be overridden.
+ *
+ * For example, the `colors-bg-primary` semantic color is used to define the background color for
+ * a "primary" variant component. The `colors-cta-primary-bg-default` component color inherits
+ * from the `colors-bg-primary` semantic color via CSS variables.
+ *
+ * If you want to override the just the default background color of the primary cta, you can do so
+ * by defining the `colors-cta-primary-bg-default` token in the theme.
+ *
+ * @example
+ * ```tsx lines
+ * // Change the primary background color to teal but make the primary cta button black
+ * const theme: Partial<Theme> = {
+ *   "colors-bg-primary": "teal",
+ *   "colors-cta-primary-bg-default": "black",
+ * };
+ * ```
+ */
 export type ColorTokens = SemanticColors & ComponentColors;
+/**
+ * Semantic fonts are the base fonts for the theme.
+ *
+ * They are typically not used directly in the components, but are used to define the base fonts
+ * for the components. Semantic fonts are defined based on their context (i.e. body, interactive).
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<SemanticFonts> = {
+ *   "font-family-interactive": "var(--cdp-web-font-family-mono)", // Change the font for interactive elements to monospace font
+ * };
+ * ```
+ *
+ * @see {@link fontSemantic} for the default token values
+ * @see {@link ComponentFonts} for the component fonts that inherit from the SemanticFonts
+ */
 export type SemanticFonts = Flattened<{
     font: typeof fontSemantic;
 }>;
+/**
+ * Component fonts are the fonts for the individual UI components.
+ * They inherit values from the SemanticFonts via CSS variables.
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<ComponentFonts> = {
+ *   // Change the font for ctas to monospace font
+ *   "font-family-cta": "var(--cdp-web-font-family-mono)",
+ *   // Change the font for iframed content to monospace font
+ *   "font-family-iframe": "var(--cdp-web-font-family-mono)",
+ *   // Provide a custom font URL for iframed content (must be a google webfont URL)
+ *   "font-url-iframe": "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
+ * };
+ * ```
+ *
+ * @see {@link fontComponents} for the default token values
+ * @see {@link SemanticFonts} for the semantic fonts that the component fonts inherit from
+ */
 export type ComponentFonts = Flattened<{
     font: typeof fontComponents;
 }>;
+/**
+ * Defines all the fonts in the theme.
+ *
+ * To fully change the theme, you only need to define the {@link SemanticFonts}, and the rest of the values
+ * will inherit from them. For more granular control, individual {@link ComponentFonts} can be overridden.
+ *
+ * For example, the `font-family-interactive` semantic font is used to define the default font
+ * for interactive elements. The `font-family-cta` component font inherits
+ * from the `font-family-interactive` semantic font via CSS variables.
+ *
+ * If you want to override the just the default CTA font, you can do so
+ * by defining the `font-family-cta` token in the theme.
+ *
+ * @example
+ * ```tsx lines
+ * const fontTokens: Partial<FontTokens> = {
+ *   // Change the default monospace font
+ *   "font-family-mono": "'Source Code Pro', monospace",
+ *   // Make buttons use the default monospace font
+ *   "font-family-cta": "var(--cdp-web-font-family-mono)",
+ *   // Make iframed content use the default monospace font
+ *   "font-family-iframe": "var(--cdp-web-font-family-mono)",
+ *   // Provide a custom font URL for iframed content (must be a google webfont URL)
+ *   "font-url-iframe": "https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap",
+ * };
+ * ```
+ *
+ * @see {@link font} for the default token values
+ */
 export type FontTokens = SemanticFonts & ComponentFonts;
+/**
+ * Semantic border radii are the base border radius definitions for the theme.
+ *
+ * They are typically not used directly in the components, but are used to define the border radius
+ * for the components. Semantic border radius values are defind in a scale (none, xs - xl, full).
+ *
+ * The default values are derived from the base font size using calc(). This is to mimic the way
+ * rems function but instead of using the font-size applied to the root document, it uses the
+ * base font size provided by the theme. Rems can be used, but it's recommended to set the base font
+ * size to a value that uses rems as well (most applications will use 16px or 1rem).
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<SemanticBorderRadius> = {
+ *   "border-radius-lg": "1.5rem", // make sure to set base font size to a rem value if you use rems
+ *   "border-radius-xl": "2rem",
+ * };
+ * ```
+ *
+ * @see {@link borderRadiusSemantic} for the default semantic border radius token values
+ * @see {@link ComponentBorderRadius} for the component border radius values that inherit from the SemanticBorderRadius
+ */
 export type SemanticBorderRadius = Flattened<{
     borderRadius: typeof borderRadiusSemantic;
 }>;
+/**
+ * Component border radii are the border radius values for the individual UI components.
+ * They inherit values from the SemanticBorderRadius via CSS variables.
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<ComponentBorderRadius> = {
+ *   "border-radius-cta": "var(--cdp-web-border-radius-none)", // Remove border radius for ctas only
+ * };
+ * ```
+ *
+ * @see {@link borderRadiusComponents} for the default token values
+ * @see {@link SemanticBorderRadius} for the semantic border radius values that the component border radius values inherit from
+ */
 export type ComponentBorderRadius = Flattened<{
     borderRadius: typeof borderRadiusComponents;
 }>;
+/**
+ * Defines all the border radius values in the theme.
+ *
+ * To change the border radius scale, you can override the {@link SemanticBorderRadius} values, and the rest of the values
+ * will inherit from them. For more granular control, individual {@link ComponentBorderRadius} can be overridden.
+ *
+ * For example, the `borderRadius-sm` semantic border radius is used to define a small amount of border radius.
+ * The `borderRadius-input` and `borderRadius-modal` component values inherit from the `borderRadius-sm` semantic
+ * border radius via CSS variables.
+ *
+ * If you want to override the just the default modal border radius, you can do so
+ * by defining the `borderRadius-modal` token in the theme.
+ *
+ * @see {@link borderRadius} for the default token values
+ */
 export type BorderRadiusTokens = SemanticBorderRadius & ComponentBorderRadius;
+/**
+ * Semantic z-index values define stacking context purposes.
+ *
+ * They describe the purpose of each layer rather than arbitrary numbers:
+ * - `base`: Default layer (0)
+ * - `raised`: Slight elevation (1)
+ * - `popup`: Emerges from content, like dropdowns (200)
+ * - `scrim`: Blocks what's beneath, like modal overlays (400)
+ * - `floating`: Above blocking layer, like content inside modals (500)
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<SemanticZIndex> = {
+ *   "zIndex-scrim": "1000",
+ *   "zIndex-floating": "1001",
+ * };
+ * ```
+ *
+ * @see {@link zIndexSemantic} for the default token values
+ * @see {@link ComponentZIndex} for the component z-index values that inherit from SemanticZIndex
+ */
 export type SemanticZIndex = Flattened<{
     zIndex: typeof zIndexSemantic;
 }>;
+/**
+ * Component z-index values for individual UI components.
+ * They inherit from the SemanticZIndex via CSS variables.
+ *
+ * @example
+ * ```tsx lines
+ * const theme: Partial<ComponentZIndex> = {
+ *   "zIndex-modal-overlay": "1000",
+ *   "zIndex-modal-dialog": "1001",
+ * };
+ * ```
+ *
+ * @see {@link zIndexComponents} for the default token values
+ * @see {@link SemanticZIndex} for the semantic z-index values that component values inherit from
+ */
 export type ComponentZIndex = Flattened<{
     zIndex: typeof zIndexComponents;
 }>;
+/**
+ * Defines all the z-index values in the theme.
+ *
+ * To change the z-index scale, override the {@link SemanticZIndex} values, and component values
+ * will inherit from them. For more granular control, individual {@link ComponentZIndex} can be overridden.
+ *
+ * @see {@link zIndex} for the default token values
+ */
 export type ZIndexTokens = SemanticZIndex & ComponentZIndex;
+/**
+ * The theme is a flattened tokens object with values appropriate for web environments
+ * (i.e. CSS properties & CSS Variables).
+ *
+ * It DOES NOT include the namespace (`--cdp-web-`) in the keys.
+ */
 export type Theme = ColorTokens & FontTokens & BorderRadiusTokens & ZIndexTokens;
+/**
+ * The variant of a button.
+ */
 export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary" | "control";
+/**
+ * Base sizes for the theme.
+ */
 export type Size = "lg" | "md" | "sm" | "xs";
+/**
+ * The size of a button.
+ */
 export type ButtonSize = Size | "none";
+/**
+ * The size of a form input.
+ */
 export type InputSize = Size;

package/dist/theme/tokens.d.ts

@@ -1,3 +1,6 @@
+/**
+ * All colors used in the CDP web component library default theme.
+ */
 export declare const colorsBase: {
     readonly blue500: "#0052ff";
     readonly blue550: "#014cec";
@@ -13,6 +16,15 @@ export declare const colorsBase: {
     readonly green500: "#098551";
     readonly amber500: "#ed702f";
 };
+/**
+ * These are the default values for the semantic color tokens.
+ *
+ * Semantic colors are the base colors for the theme.
+ * They are typically not used directly in the components, but are used to define the base colors
+ * for the components.
+ *
+ * @see {@link colorsComponents} for the component colors that inherit from these
+ */
 export declare const colorsSemantic: {
     readonly bg: {
         readonly default: {
@@ -129,6 +141,12 @@ export declare const colorsSemantic: {
         };
     };
 };
+/**
+ * These are the default values for the component color tokens.
+ *
+ * Component colors are the colors for the individual UI components.
+ * They inherit values from the {@link colorsSemantic}.
+ */
 export declare const colorsComponents: {
     readonly page: {
         readonly bg: {
@@ -536,6 +554,9 @@ export declare const colorsComponents: {
         };
     };
 };
+/**
+ * All the color tokens.
+ */
 export declare const colors: {
     readonly page: {
         readonly bg: {
@@ -1057,6 +1078,9 @@ export declare const colors: {
         };
     };
 };
+/**
+ * Semantic font tokens.
+ */
 export declare const fontSemantic: {
     readonly family: {
         readonly mono: {
@@ -1078,6 +1102,9 @@ export declare const fontSemantic: {
         };
     };
 };
+/**
+ * Component font tokens.
+ */
 export declare const fontComponents: {
     readonly family: {
         readonly page: {
@@ -1108,6 +1135,9 @@ export declare const fontComponents: {
         };
     };
 };
+/**
+ * All the font tokens.
+ */
 export declare const font: {
     readonly family: {
         readonly page: {
@@ -1155,6 +1185,9 @@ export declare const font: {
         };
     };
 };
+/**
+ * Semantic border radius tokens.
+ */
 export declare const borderRadiusSemantic: {
     readonly none: {
         readonly value: 0;
@@ -1198,6 +1231,9 @@ export declare const borderRadiusSemantic: {
         readonly value: 99999;
     };
 };
+/**
+ * Component border radius tokens.
+ */
 export declare const borderRadiusComponents: {
     readonly badge: {
         readonly value: "{borderRadius.full}";
@@ -1226,6 +1262,9 @@ export declare const borderRadiusComponents: {
         };
     };
 };
+/**
+ * All the border radius tokens.
+ */
 export declare const borderRadius: {
     readonly badge: {
         readonly value: "{borderRadius.full}";
@@ -1295,6 +1334,9 @@ export declare const borderRadius: {
         readonly value: 99999;
     };
 };
+/**
+ * Semantic z-index tokens.
+ */
 export declare const zIndexSemantic: {
     readonly base: {
         readonly value: 0;
@@ -1317,6 +1359,9 @@ export declare const zIndexSemantic: {
         readonly unit: "none";
     };
 };
+/**
+ * Component z-index tokens.
+ */
 export declare const zIndexComponents: {
     readonly select: {
         readonly list: {
@@ -1332,6 +1377,9 @@ export declare const zIndexComponents: {
         };
     };
 };
+/**
+ * All the z-index tokens.
+ */
 export declare const zIndex: {
     readonly select: {
         readonly list: {
@@ -1367,6 +1415,9 @@ export declare const zIndex: {
         readonly unit: "none";
     };
 };
+/**
+ * All the tokens used in the theme.
+ */
 export declare const tokens: {
     borderRadius: {
         readonly badge: {
@@ -2041,4 +2092,7 @@ export declare const tokens: {
         };
     };
 };
+/**
+ * All design tokens.
+ */
 export type Tokens = typeof tokens;

package/dist/theme/utils.d.ts

@@ -1,14 +1,45 @@
+/**
+ * A type that recursively converts a nested object to a flattened object with kebab-case keys.
+ *
+ * @example
+ * type MyObject = {
+ *   a: {
+ *     b: {
+ *       cKey: string;
+ *     };
+ *   };
+ * };
+ *
+ * type Flattened = Flattened<MyObject>;
+ * // { 'a-b-cKey': string }
+ */
 export type KebabCasePaths<T> = T extends Record<string, unknown> ? {
     [K in keyof T]: T[K] extends {
         value: unknown;
     } ? K & string : T[K] extends Record<string, unknown> ? `${K & string}-${KebabCasePaths<T[K]> & string}` : K & string;
 }[keyof T] : never;
+/**
+ * A flattened representation of the Tokens type, where keys are
+ * kebab-cased paths and all values are strings.
+ *
+ * @example
+ * const themeOverrides: Partial<Flattened<typeof tokens>> = {
+ *   'colors-brand-primary': string;
+ *   'fontFamily-sans': string;
+ * }
+ */
 export type Flattened<T extends Record<string, unknown>> = {
     [K in KebabCasePaths<T>]: string;
 };
+/**
+ * Represents a single theme value, which can be a direct value or a reference with modifications.
+ */
 export type TokenValue = {
+    /** The value of the token. */
     value: string | number;
+    /** Unit for numeric values. Defaults to "px" if not specified. Use "none" for unitless values like z-index. */
     unit?: "px" | "none";
+    /** Modifications to the value. */
     modify?: {
         type: "color-alpha";
         value: number | string;
@@ -23,11 +54,43 @@ export type TokenValue = {
         value: number | string;
     };
 };
+/**
+ * Represents a nested structure of theme values.
+ */
 export type NestedTokenObject = {
     [key: string]: TokenValue | NestedTokenObject;
 };
+/**
+ * Flattens a nested theme object into a single-level object with CSS variable representations.
+ *
+ * @param {NestedTokenObject} tokensObject - The nested tokens object to flatten.
+ * @param {string} [cssVarPrefix] - An optional prefix for the generated CSS variables.
+ * @returns {Flattened<NestedTokenObject>} A flattened theme object.
+ *
+ * @group Utilities
+ */
 export declare function flattenTokensObject<T extends NestedTokenObject>(tokensObject: T, cssVarPrefix?: string): Flattened<T>;
+/**
+ * Converts a theme object to a CSS variables object for the CDP web component library.
+ *
+ * @param theme - The theme object to convert.
+ * @returns A CSS variables object.
+ *
+ * @group Utilities
+ *
+ * @example
+ * ```tsx lines
+ * const themeOverrides: Partial<Theme> = {
+ *   "color-bg-primary": "red",
+ * };
+ *
+ * // { "--cdp-web-color-bg-primary": "red" }
+ * const cssVariables = themeToCssVariables(themeOverrides);
+ */
 export declare const themeToCssVariables: (theme: Record<string, string>) => CDPWebCSSVariables;
+/**
+ * CSS variables for the CDP web component library.
+ */
 export type CDPWebCSSVariables = {
     [key: `--cdp-web-${string}`]: string;
 };

package/dist/types/secureIframe.d.ts

@@ -1,4 +1,7 @@
 import { SECURE_IFRAME_EVENT_TYPE_PREFIX, SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE, SecureIframeTheme, SecureIframeAuthState, SecureIframeChainType, SecureIframeContext, SecureIframeStatus, SecureIframeEventType, SecureIframeInitMessage, SecureIframeThemeMessage, SecureIframeIncomingMessage, SecureIframeListeningMessage, SecureIframeStatusMessage, SecureIframeOutgoingMessage, SecureIframeKeyExportEventType, SecureIframeGetPrivateKeyMessage, SecureIframeKeyExportIncomingMessage, SecureIframeKeyExportOutgoingMessage } from '@coinbase/cdp-core';
+/**
+ * The theme for the secure iframe.
+ */
 export type IframeTheme = SecureIframeTheme;
 export { SECURE_IFRAME_EVENT_TYPE_PREFIX, SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE };
 export type { SecureIframeAuthState, SecureIframeChainType, SecureIframeContext, SecureIframeStatus, SecureIframeEventType, SecureIframeInitMessage, SecureIframeThemeMessage, SecureIframeIncomingMessage, SecureIframeListeningMessage, SecureIframeStatusMessage, SecureIframeOutgoingMessage, SecureIframeKeyExportEventType, SecureIframeGetPrivateKeyMessage, SecureIframeKeyExportIncomingMessage, SecureIframeKeyExportOutgoingMessage, };

package/dist/utils/capitalize.d.ts

@@ -1 +1,9 @@
+/**
+ * Capitalizes the first letter of a string.
+ *
+ * @param value - The value to capitalize.
+ * @returns The capitalized value.
+ *
+ * @group Utilities
+ */
 export declare function capitalize(value: string): string;

package/dist/utils/childrenHasComponent.d.ts

@@ -1,2 +1,12 @@
 import { JSXElementConstructor, ReactNode } from 'react';
+/**
+ * A helper function to search for a component type within children.
+ *
+ * @param {ReactNode | ReactNode[]} children - The children to search within.
+ * @param {string | JSXElementConstructor<any>} component - The component to search for.
+ * @param {number} depth - Internal parameter to track recursion depth (default: 0).
+ * @returns {boolean} - Whether the component is found within the children.
+ *
+ * @group Utilities
+ */
 export declare const childrenHasComponent: <T = unknown>(children: ReactNode | ReactNode[], component: string | JSXElementConstructor<T>, depth?: number) => boolean;

package/dist/utils/clamp.d.ts

@@ -1 +1,11 @@
+/**
+ * Clamp a value between a minimum and maximum value.
+ *
+ * @param value - The value to clamp.
+ * @param min - The minimum value.
+ * @param max - The maximum value.
+ * @returns The clamped value.
+ *
+ * @group Utilities
+ */
 export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/utils/formatFiat.d.ts

@@ -1 +1,12 @@
+/**
+ * Format a fiat currency value.
+ *
+ * @param {number} value - The value to format.
+ * @param {string} currency - The currency to format the value in.
+ * @param {number} [decimalPlaces] - The number of decimal places to display. Defaults to 2.
+ * @param {string} [locale] - The locale to format the value in. Defaults to "en-US".
+ * @returns {string} The formatted value.
+ *
+ * @group Utilities
+ */
 export declare const formatFiat: (value: number, currency?: string, decimalPlaces?: number, locale?: string) => string;

package/dist/utils/formatPhoneNumber.d.ts

@@ -1 +1,9 @@
+/**
+ * Format a phone number.
+ *
+ * @param phoneNumber - The phone number in E.164 format, e.g. "+12345678900".
+ * @returns The formatted phone number (calling code + national format) or the incomplete phone number if it cannot be parsed.
+ *
+ * @group Utilities
+ */
 export declare const formatPhoneNumber: (phoneNumber: string) => string;

package/dist/utils/getMessageFromUnknownError.d.ts

@@ -1 +1,10 @@
+/**
+ * Get a message from an unknown error with a fallback in case one is not found.
+ *
+ * @param {unknown} error - The error to get a message from.
+ * @param {string} [defaultMesasge] - The default message to return if no message is found.
+ * @returns {string} The message from the error.
+ *
+ * @group Utilities
+ */
 export declare const getMessageFromUnknownError: (error: unknown, defaultMesasge?: string) => string;

package/dist/utils/isApiError.d.ts

@@ -1,2 +1,23 @@
 import { APIError } from '@coinbase/cdp-hooks';
+/**
+ * Type guard to check if the error is an API error.
+ *
+ * @param {unknown} error - The error to check.
+ * @returns {error is ApiError} - True if the error is an API error, false otherwise.
+ *
+ * @group Utilities
+ *
+ * @example
+ * ```tsx lines
+ * try {
+ *   ...
+ * }
+ * catch (error) {
+ *   if (isApiError(error)) {
+ *     // Handle API error
+ *     console.log(error.errorMessage);
+ *   }
+ * }
+ * ```
+ */
 export declare const isApiError: (error: unknown) => error is APIError;

package/dist/utils/isEmailInvalid.d.ts

@@ -1 +1,16 @@
+/**
+ * Check if an email address is invalid.
+ *
+ * @param value - The email address to validate.
+ * @returns `true` if the email address is invalid, `false` otherwise.
+ *
+ * @group Utilities
+ *
+ * @example
+ * ```tsx lines
+ * if (isEmailInvalid("test@example")) {
+ *   console.log("Invalid email address");
+ * }
+ * ```
+ */
 export declare const isEmailInvalid: (value: string) => boolean;

package/dist/utils/openPopup.d.ts

@@ -1,7 +1,22 @@
+/**
+ * The parameters for the openPopup function.
+ */
 export type OpenPopupParams = {
     url: string;
     height: number;
     width: number;
     target?: string;
 };
+/**
+ * Open a popup in the center of the screen with the specified size.
+ *
+ * @param {OpenPopupParams} params - The parameters for the popup.
+ * @param {string} params.url - The URL to open in the popup.
+ * @param {string} [params.target] - The target window for the popup.
+ * @param {number} params.height - The height of the popup.
+ * @param {number} params.width - The width of the popup.
+ * @returns {Window | null} The popup window.
+ *
+ * @group Utilities
+ */
 export declare const openPopup: ({ url, target, height, width }: OpenPopupParams) => Window | null;