@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/PushPreview/types.d.ts

@@ -1,19 +1,36 @@
+/** Rendering mode of {@link PushPreview}. */
 export type PushPreviewView = 'compact' | 'extended' | 'silent' | 'missed-content' | 'empty';
+/** Minimal push-preset shape {@link PushPreview} reads to render a notification. */
 export interface PushBasicData {
+    /** Per-language title map. */
     title?: Record<string, string>;
+    /** Per-language subtitle map. */
     subtitle?: Record<string, string>;
+    /** Per-language body map. */
     content?: Record<string, string>;
+    /** Alternative per-language title map. */
     localizedTitle?: Record<string, string>;
+    /** Alternative per-language subtitle map. */
     localizedSubtitle?: Record<string, string>;
+    /** Alternative per-language body map. */
     localizedContent?: Record<string, string>;
+    /** Notification icon URL. */
     icon?: string;
 }
+/** Props of {@link PushPreview}. */
 export interface PushPreviewProps<T> {
+    /** Rendering mode (default `compact`). */
     view?: PushPreviewView;
+    /** Push preset to preview; `null`/absent shows the app defaults. */
     pushPreset?: T | null;
+    /** Language key used to pick localized strings. */
     language?: string;
+    /** Show the loading placeholder. */
     isLoading?: boolean;
+    /** Fallback app name shown when the preset has no title. */
     appTitle?: string;
+    /** Fallback app icon URL. */
     appIcon?: string;
+    /** CSS width of the preview. */
     width?: string | number;
 }

package/Radio/Radio.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { RadioProps } from './types';
+/**
+ * Single radio button with label, sizes and an optional help tooltip.
+ * Group radios by sharing a `name`.
+ *
+ * @example
+ * <Radio name="plan" value="pro" label="Pro" isChecked={plan === 'pro'} onChange={setPlan} />
+ */
 export declare function Radio(props: RadioProps): ReactElement;

package/Radio/Radio.js

@@ -5,6 +5,13 @@ import { Horizontal } from '@pushwoosh/kit-helpers';
 import { InputContainer, NativeLabel, NativeRadio } from './styles';
 import { TooltipTrigger } from '../Tooltip';
 let counter = 0;
+/**
+ * Single radio button with label, sizes and an optional help tooltip.
+ * Group radios by sharing a `name`.
+ *
+ * @example
+ * <Radio name="plan" value="pro" label="Pro" isChecked={plan === 'pro'} onChange={setPlan} />
+ */
 export function Radio(props) {
   const {
     label,

package/Radio/types.d.ts

@@ -1,16 +1,30 @@
 import type { ReactNode } from 'react';
+/** Visual state of a {@link Radio}: `normal` or `error` (red). */
 export type RadioType = 'normal' | 'error';
+/** Size preset of a {@link Radio}: `regular` or `compact`. */
 export type RadioSize = 'regular' | 'compact';
+/** Props of {@link Radio}. */
 export type RadioProps = {
+    /** Label rendered next to the control. */
     label?: ReactNode;
+    /** Explicit element id; auto-generated when omitted. */
     id?: string;
+    /** Group name — radios sharing a `name` are mutually exclusive. */
     name?: string;
+    /** Value passed to `onChange` when this radio is picked. */
     value?: string;
+    /** Visual state: `normal` (default) or `error`. */
     type?: RadioType;
+    /** Selected state (controlled). */
     isChecked?: boolean;
+    /** Disable interaction and render the disabled state. */
     isDisabled?: boolean;
+    /** Size preset: `regular` (default) or `compact`. */
     size?: RadioSize;
+    /** Help text shown via a question-mark tooltip next to the radio. */
     tooltip?: string;
+    /** Fires with this radio's `value` when it becomes selected. */
     onChange?: (checked: string | number) => void;
+    /** Fires when the control loses focus. */
     onBlur?: () => void;
 };

package/RadioCard/RadioCard.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { RadioCardProps } from './types';
+/**
+ * Selectable card with a title, description and a radio indicator — a richer
+ * alternative to {@link Radio} for choosing one option among cards.
+ *
+ * @example
+ * <RadioCard title="Pro" description="For growing teams" isActive={plan === 'pro'} onClick={() => setPlan('pro')} />
+ */
 export declare function RadioCard(props: RadioCardProps): ReactElement;

package/RadioCard/RadioCard.js

@@ -3,6 +3,13 @@ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
 import { Radio } from '../Radio';
 import { RootBox } from './styled';
+/**
+ * Selectable card with a title, description and a radio indicator — a richer
+ * alternative to {@link Radio} for choosing one option among cards.
+ *
+ * @example
+ * <RadioCard title="Pro" description="For growing teams" isActive={plan === 'pro'} onClick={() => setPlan('pro')} />
+ */
 export function RadioCard(props) {
   const {
     title,

package/RadioCard/types.d.ts

@@ -1,9 +1,16 @@
 import type { ReactNode } from 'react';
+/** Props of {@link RadioCard}. */
 export interface RadioCardProps {
+    /** Card heading. */
     title: string;
+    /** Supporting text under the title. */
     description: string;
+    /** CSS width of the card (default `"262px"`). */
     width?: string | number;
+    /** Whether this card is the selected one (drives the radio + active styling). */
     isActive?: boolean;
+    /** Extra content rendered below the description. */
     children?: ReactNode;
+    /** Fires when the card is clicked. */
     onClick: () => void;
 }

package/ReCaptcha/ReCaptcha.d.ts

@@ -1,2 +1,10 @@
 import { type ReactElement } from 'react';
+/**
+ * Renders the (invisible) reCAPTCHA host element. Pair with {@link useRecaptcha} to
+ * load the script and obtain tokens.
+ *
+ * @example
+ * const { getRecaptchaToken } = useRecaptcha();
+ * return <ReCaptcha />;
+ */
 export declare function ReCaptcha(): ReactElement;

package/ReCaptcha/ReCaptcha.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RECAPTCHA_CONTAINER_ID } from './constants';
 import { RecaptchaElement } from './styles';
+/**
+ * Renders the (invisible) reCAPTCHA host element. Pair with {@link useRecaptcha} to
+ * load the script and obtain tokens.
+ *
+ * @example
+ * const { getRecaptchaToken } = useRecaptcha();
+ * return <ReCaptcha />;
+ */
 export function ReCaptcha() {
   return _jsx(RecaptchaElement, {
     id: RECAPTCHA_CONTAINER_ID

package/ReCaptcha/helpers.d.ts

@@ -1 +1,5 @@
+/**
+ * Injects a `<script>` with the given `src` once and resolves when it loads
+ * (resolves immediately if already present); rejects on load error.
+ */
 export declare function asyncScriptLoad(scriptUrl: string): Promise<Event | void>;

package/ReCaptcha/helpers.js

@@ -1,3 +1,7 @@
+/**
+ * Injects a `<script>` with the given `src` once and resolves when it loads
+ * (resolves immediately if already present); rejects on load error.
+ */
 export async function asyncScriptLoad(scriptUrl) {
   return new Promise((resolve, reject) => {
     const isAlreadyLoaded = document.querySelector(`script[src="${scriptUrl}"]`);

package/ReCaptcha/hooks.d.ts

@@ -1,2 +1,6 @@
 import type { RecaptchaExposedApi } from './types';
+/**
+ * Loads the reCAPTCHA script, renders an invisible widget into the {@link ReCaptcha}
+ * element, and returns `{ isRecaptchaReady, recaptchaErrorCode, getRecaptchaToken }`.
+ */
 export declare function useRecaptcha(): RecaptchaExposedApi;

package/ReCaptcha/hooks.js

@@ -1,6 +1,10 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { RECAPTCHA_KEY, RECAPTCHA_SCRIPT_URL, RECAPTCHA_CONTAINER_ID } from './constants';
 import { asyncScriptLoad } from './helpers';
+/**
+ * Loads the reCAPTCHA script, renders an invisible widget into the {@link ReCaptcha}
+ * element, and returns `{ isRecaptchaReady, recaptchaErrorCode, getRecaptchaToken }`.
+ */
 export function useRecaptcha() {
   var _window;
   const promiseRef = useRef({});

package/ReCaptcha/types.d.ts

@@ -1,8 +1,13 @@
+/** Value returned by {@link useRecaptcha}. */
 export type RecaptchaExposedApi = {
+    /** Whether the widget is rendered and ready to execute. */
     readonly isRecaptchaReady: boolean;
+    /** Internal error code (`RIExxx`), or empty string when there's no error. */
     readonly recaptchaErrorCode: string;
+    /** Runs an invisible challenge and resolves with the verification token. */
     readonly getRecaptchaToken: () => Promise<string>;
 };
+/** Holds the pending token resolver between `execute` and the reCAPTCHA callback. */
 export type PromiseRef = {
     resolve?: (token: string) => void;
 };

package/RichMessageEditor/RichMessageEditor.d.ts

@@ -1,3 +1,11 @@
 import { type FC } from 'react';
 import { type RichMessageEditorProps } from './RichMessageEditor.types';
+/**
+ * Slate-based message editor with optional personalization (dynamic-content) tokens
+ * and an emoji picker; serializes to a string via `onChange`. Render the result with
+ * {@link RichMessageViewer}.
+ *
+ * @example
+ * <RichMessageEditor title="Message" initialValue={text} onChange={setText} canUseEmoji />
+ */
 export declare const RichMessageEditor: FC<RichMessageEditorProps>;

package/RichMessageEditor/RichMessageEditor.js

@@ -13,6 +13,14 @@ import { placementToDirection } from './RichMessageEditor.helpers';
 import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styled';
 import { getDcByPath } from './slate/helpers';
 import { SlateEditable, SlateEditor } from './slate/SlateEditor';
+/**
+ * Slate-based message editor with optional personalization (dynamic-content) tokens
+ * and an emoji picker; serializes to a string via `onChange`. Render the result with
+ * {@link RichMessageViewer}.
+ *
+ * @example
+ * <RichMessageEditor title="Message" initialValue={text} onChange={setText} canUseEmoji />
+ */
 export const RichMessageEditor = ({
   title,
   initialValue,

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -14,15 +14,25 @@ export type RenderDynamicContentProps = {
     onClose: () => void;
     update: () => void;
 };
+/** Props of {@link RichMessageEditor}. */
 export type RichMessageEditorProps = {
+    /** Field label (rendered by the surrounding FieldBox). */
     title: ReactNode;
+    /** Initial serialized message value. */
     initialValue: string;
+    /** Fires with the serialized value on every edit. */
     onChange: (value: string) => void;
+    /** Minimum editor height (CSS value). */
     minHeight?: string;
+    /** Error message; switches the field to the error state. */
     error?: ReactNode;
+    /** Enable inserting personalization (dynamic-content) tokens. */
     canUsePersonalization?: boolean;
+    /** Enable the emoji picker. */
     canUseEmoji?: boolean;
+    /** Fires when the editor loses focus. */
     onBlur?: () => void;
+    /** Renders the personalization editor popover for a {@link DynamicContent} token. */
     renderDynamicContent?: (props: RenderDynamicContentProps) => ReactNode;
 };
 export type ArrowDirection = 'top' | 'bottom' | 'left' | 'right';

package/RichMessageEditor/RichMessageViewer.d.ts

@@ -1,7 +1,17 @@
 import { type FC } from 'react';
 import { type RichMessageEditorContent } from './types';
+/** Props of {@link RichMessageViewer}. */
 export type RichMessageViewerProps = {
+    /** Message to render — structured {@link RichMessageEditorContent} or a serialized string. */
     value: RichMessageEditorContent | string;
+    /** Render inline (paragraphs joined with spaces) instead of as blocks. */
     flat?: boolean;
 };
+/**
+ * Read-only renderer for {@link RichMessageEditor} output, displaying text and
+ * personalization tokens. Accepts structured content or a serialized string.
+ *
+ * @example
+ * <RichMessageViewer value={message} flat />
+ */
 export declare const RichMessageViewer: FC<RichMessageViewerProps>;

package/RichMessageEditor/RichMessageViewer.js

@@ -2,6 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useMemo } from 'react';
 import { DynamicContentBracket, DynamicContentRoot, Paragraph } from './RichMessageViewer.styled';
 import { isElement, string2content } from './slate/helpers';
+/**
+ * Read-only renderer for {@link RichMessageEditor} output, displaying text and
+ * personalization tokens. Accepts structured content or a serialized string.
+ *
+ * @example
+ * <RichMessageViewer value={message} flat />
+ */
 export const RichMessageViewer = ({
   value,
   flat

package/RichMessageEditor/slate/types.d.ts

@@ -1,8 +1,13 @@
 import type { Descendant } from 'slate';
+/** Editor document model — an array of Slate nodes (exported publicly as `RichMessageEditorContent`). */
 export type SlateEditorContent = Descendant[];
+/** A dynamic-content (personalization) token embedded in the message. */
 export type DynamicContent = {
+    /** Personalization tag name (e.g. a tag or attribute key). */
     tagName: string;
+    /** Optional value modifier/formatter. */
     modifier: string;
+    /** Fallback value used when the tag resolves to nothing. */
     defaultValue: string;
 };
 export type ParagraphElement = {

package/RichMessageEditor/types.d.ts

@@ -1,2 +1,3 @@
 import { type SlateEditorContent as RichMessageEditorContent } from './slate/types';
+/** Structured content model produced/consumed by {@link RichMessageEditor} and {@link RichMessageViewer}. */
 export { type RichMessageEditorContent };

package/RichmediaPreview/RichmediaPreview.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { RichmediaPreviewProps } from './types';
+/**
+ * Renders a rich-media (in-app) template in a sandboxed iframe, resolving params and
+ * localization via {@link useRichmediaHtml}.
+ *
+ * @example
+ * <RichmediaPreview name="Promo" content={html} params={params} language="en" />
+ */
 export declare function RichmediaPreview(props: RichmediaPreviewProps): ReactElement;

package/RichmediaPreview/RichmediaPreview.js

@@ -4,6 +4,13 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { useRichmediaHtml } from './hooks';
 import { RichMediaPreviewContainer, RichMediaPreviewIframe } from './styles';
+/**
+ * Renders a rich-media (in-app) template in a sandboxed iframe, resolving params and
+ * localization via {@link useRichmediaHtml}.
+ *
+ * @example
+ * <RichmediaPreview name="Promo" content={html} params={params} language="en" />
+ */
 export function RichmediaPreview(props) {
   const {
     name,

package/RichmediaPreview/hooks.d.ts

@@ -1,2 +1,6 @@
 import type { BuildRichmediaHtmlArgs } from './types';
+/**
+ * Builds the final rich-media HTML string from a template, params and language
+ * (memoized). Use it to render rich media yourself instead of {@link RichmediaPreview}.
+ */
 export declare function useRichmediaHtml({ content, params, language, defaultLanguage, baseUrl, }: BuildRichmediaHtmlArgs): string;

package/RichmediaPreview/hooks.js

@@ -34,6 +34,10 @@ function buildRichmediaHtml({
   const template = new Template(content, vars, formattedParams, `${window.location.protocol}//${window.location.host}${baseUrl}/`);
   return template.run();
 }
+/**
+ * Builds the final rich-media HTML string from a template, params and language
+ * (memoized). Use it to render rich media yourself instead of {@link RichmediaPreview}.
+ */
 export function useRichmediaHtml({
   content,
   params,

package/RichmediaPreview/types.d.ts

@@ -1,20 +1,33 @@
+/** A generic string-keyed object of rich-media params. */
 export type ObjectItem = {
     [key: string]: any;
 };
+/** A single placeholder→value substitution applied to the rich-media content. */
 export type Replacer = {
     placeholder: string;
     replacer: any;
 };
+/** Inputs needed to build the rich-media HTML (shared by {@link RichmediaPreview} and {@link useRichmediaHtml}). */
 export type BuildRichmediaHtmlArgs = {
+    /** Rich-media params (object or JSON string), keyed by language. */
     params: any;
+    /** Raw rich-media template content. */
     content: string;
+    /** Language key used to pick params (default `en`). */
     language?: string;
+    /** Fallback language when `language` has no params (default `en`). */
     defaultLanguage?: string;
+    /** Base URL prepended to relative asset references. */
     baseUrl?: string;
 };
+/** Props of {@link RichmediaPreview}. */
 export type RichmediaPreviewProps = BuildRichmediaHtmlArgs & {
+    /** Title/name of the rich media (used as the iframe title). */
     name: string;
+    /** CSS width of the preview (default `304`). */
     width?: string | number;
+    /** CSS height of the preview (default `480`). */
     height?: string | number;
+    /** Show the loading spinner. */
     isLoading?: boolean;
 };

package/Select/Select.d.ts

@@ -1,6 +1,28 @@
 import { type ReactElement } from 'react';
 import type { GroupBase } from 'react-select';
 import type { SelectProps, SelectAsyncProps, SelectCreatableProps } from './types';
+/**
+ * Styled `react-select` dropdown (single or multi via `isMulti`).
+ *
+ * @deprecated Use {@link Combobox} (or {@link ComboboxMulti} for multi-select) instead —
+ * Combobox is the in-house replacement for the `react-select` family.
+ * @example
+ * <Select options={options} value={value} onChange={onChange} />
+ */
 export declare function Select<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsMulti, Group>): ReactElement;
+/**
+ * Styled `react-select` dropdown that loads options asynchronously via `loadOptions`.
+ *
+ * @deprecated Use {@link Combobox} with `loadItems` instead.
+ * @example
+ * <SelectAsync loadOptions={fetchOptions} defaultOptions />
+ */
 export declare function SelectAsync<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectAsyncProps<Option, IsMulti, Group>): ReactElement;
+/**
+ * Styled `react-select` dropdown that lets the user create new options by typing.
+ *
+ * @deprecated Use the free-text {@link Combobox} instead.
+ * @example
+ * <CreatableSelect options={options} onCreateOption={addOption} />
+ */
 export declare function CreatableSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectCreatableProps<Option, IsMulti, Group>): ReactElement;

package/Select/Select.js

@@ -12,6 +12,14 @@ const componentsProps = {
     })
   })
 };
+/**
+ * Styled `react-select` dropdown (single or multi via `isMulti`).
+ *
+ * @deprecated Use {@link Combobox} (or {@link ComboboxMulti} for multi-select) instead —
+ * Combobox is the in-house replacement for the `react-select` family.
+ * @example
+ * <Select options={options} value={value} onChange={onChange} />
+ */
 export function Select(props) {
   const {
     classNamePrefix = CLASS_NAME_PREFIX
@@ -25,6 +33,13 @@ export function Select(props) {
     ...customProps
   });
 }
+/**
+ * Styled `react-select` dropdown that loads options asynchronously via `loadOptions`.
+ *
+ * @deprecated Use {@link Combobox} with `loadItems` instead.
+ * @example
+ * <SelectAsync loadOptions={fetchOptions} defaultOptions />
+ */
 export function SelectAsync(props) {
   const {
     classNamePrefix = CLASS_NAME_PREFIX
@@ -38,6 +53,13 @@ export function SelectAsync(props) {
     ...customProps
   });
 }
+/**
+ * Styled `react-select` dropdown that lets the user create new options by typing.
+ *
+ * @deprecated Use the free-text {@link Combobox} instead.
+ * @example
+ * <CreatableSelect options={options} onCreateOption={addOption} />
+ */
 export function CreatableSelect(props) {
   const {
     classNamePrefix = CLASS_NAME_PREFIX

package/Select/constants.d.ts

@@ -1 +1,2 @@
+/** `classNamePrefix` applied to the `react-select` markup so the Pushwoosh styles can target it. */
 export declare const CLASS_NAME_PREFIX = "kit-select";

package/Select/constants.js

@@ -1 +1,2 @@
+/** `classNamePrefix` applied to the `react-select` markup so the Pushwoosh styles can target it. */
 export const CLASS_NAME_PREFIX = 'kit-select';

package/Select/types.d.ts

@@ -1,15 +1,34 @@
 import type { Props, GroupBase, MultiValue } from 'react-select';
 import type { AsyncProps } from 'react-select/async';
 import type { CreatableProps } from 'react-select/creatable';
+/** A single `{ label, value }` option for the `react-select`-based selects. */
 export type SelectOption = {
+    /** Text shown in the control and dropdown. */
     label: string;
+    /** Underlying value submitted/compared. */
     value: string;
 };
+/** Selected options array for a multi-select. */
 export type MultiSelectOptions = MultiValue<SelectOption>;
+/** Pushwoosh styling extras mixed into every Select variant's props. */
 export type SelectBase = {
+    /** Fixed CSS width of the control. */
     width?: string;
+    /** Render the error (red) state. */
     $isErrored?: boolean;
 };
+/**
+ * Props of {@link Select} — all `react-select` props plus {@link SelectBase}.
+ * @deprecated Use {@link Combobox} (or {@link ComboboxMulti} for multi-select) instead.
+ */
 export type SelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Props<Option, IsMulti, Group> & SelectBase;
+/**
+ * Props of {@link SelectAsync} — {@link SelectProps} plus `react-select/async` props.
+ * @deprecated Use {@link Combobox} with `loadItems` instead.
+ */
 export type SelectAsyncProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = SelectProps<Option, IsMulti, Group> & AsyncProps<Option, IsMulti, Group> & SelectBase;
+/**
+ * Props of {@link CreatableSelect} — {@link SelectProps} plus `react-select/creatable` props.
+ * @deprecated Use the free-text {@link Combobox} instead.
+ */
 export type SelectCreatableProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = SelectProps<Option, IsMulti, Group> & CreatableProps<Option, IsMulti, Group> & SelectBase;

package/SendRate/SendRateEdit.d.ts

@@ -1,2 +1,9 @@
 import { type SendRateEditProps, type SendRateBase } from './types';
+/**
+ * Editable send-rate control: pick the policy (global/custom/ignore) and set a
+ * custom rate within `minValue`–`maxValue`.
+ *
+ * @example
+ * <SendRateEdit sendRate={rate} globalSendRate={global} applicationCode={code} minValue={1} maxValue={1000} onChange={setRate} editGlobalClicked={openGlobal} />
+ */
 export declare function SendRateEdit<T extends SendRateBase>({ sendRate, globalSendRate, onChange, applicationCode, minValue, maxValue, editGlobalClicked, }: SendRateEditProps<T>): import("react/jsx-runtime").JSX.Element;

package/SendRate/SendRateEdit.js

@@ -12,6 +12,13 @@ import { Select } from '../Select';
 import { sendRateOptions } from './constants';
 import { useLang } from './polyglot';
 import { Container, LinkWrapper } from './styles';
+/**
+ * Editable send-rate control: pick the policy (global/custom/ignore) and set a
+ * custom rate within `minValue`–`maxValue`.
+ *
+ * @example
+ * <SendRateEdit sendRate={rate} globalSendRate={global} applicationCode={code} minValue={1} maxValue={1000} onChange={setRate} editGlobalClicked={openGlobal} />
+ */
 export function SendRateEdit({
   sendRate,
   globalSendRate,

package/SendRate/SendRateReadonly.d.ts

@@ -1,2 +1,5 @@
 import { type SendRateReadonlyProps, type SendRateBase } from './types';
+/**
+ * Read-only summary of a send-rate config, with a link to edit the global send rate.
+ */
 export declare function SendRateReadonly<T extends SendRateBase>({ sendRate, globalSendRate, applicationCode, editGlobalClicked, }: SendRateReadonlyProps<T>): import("react/jsx-runtime").JSX.Element;

package/SendRate/SendRateReadonly.js

@@ -5,6 +5,9 @@ import { Link } from '../Link';
 import { getGlobalSendRateLinkText } from './helpers/getGlobalSendRateLinkText';
 import { getReadonlySendRateLabel } from './helpers/getReadonlySendRateHelpers';
 import { useLang } from './polyglot';
+/**
+ * Read-only summary of a send-rate config, with a link to edit the global send rate.
+ */
 export function SendRateReadonly({
   sendRate,
   globalSendRate,

package/SendRate/types.d.ts

@@ -1,30 +1,50 @@
+/** Send-rate mode: unset, follow the global rate, custom rate, or ignore throttling. */
 export type SendRatePolicy = 'UNKNOWN' | 'GLOBAL' | 'CUSTOM' | 'IGNORE';
+/** Send-rate config: a numeric rate plus the selected policy. */
 export type SendRateBase<K extends SendRatePolicy = SendRatePolicy> = {
+    /** Custom rate value (messages per unit). */
     sendRate: number;
+    /** Active send-rate policy. */
     policy: K;
 };
+/** A send-rate policy option for the mode selector. */
 export type SendRateOption = {
+    /** Human-readable label. */
     label: string;
+    /** Corresponding policy. */
     value: SendRatePolicy;
 };
+/** Props of {@link SendRateEdit}. */
 export type SendRateEditProps<T extends SendRateBase> = {
+    /** Current send-rate config. */
     sendRate: T;
+    /** The account-wide global send rate, for reference. */
     globalSendRate: {
         count: number;
         seconds: number;
     };
+    /** Fires with the updated send-rate config. */
     onChange: (newSendRateState: T) => void;
+    /** Fires when the "edit global send rate" link is clicked. */
     editGlobalClicked: () => void;
+    /** Application code the send rate applies to. */
     applicationCode: string;
+    /** Minimum allowed custom rate. */
     minValue: number;
+    /** Maximum allowed custom rate. */
     maxValue: number;
 };
+/** Props of {@link SendRateReadonly}. */
 export type SendRateReadonlyProps<T extends SendRateBase> = {
+    /** Send-rate config to summarize. */
     sendRate: T;
+    /** The account-wide global send rate, for reference. */
     globalSendRate: {
         count: number;
         seconds: number;
     };
+    /** Application code the send rate applies to. */
     applicationCode: string;
+    /** Fires when the "edit global send rate" link is clicked. */
     editGlobalClicked: () => void;
 };

package/Skeleton/TextSkeleton.d.ts

@@ -1,3 +1,9 @@
 import { type ReactElement, type PropsWithChildren } from 'react';
 import type { TextSkeletonProps } from './types';
+/**
+ * Loading placeholder for a line of text; sizes to its content unless `width` is given.
+ *
+ * @example
+ * <TextSkeleton width={160} />
+ */
 export declare function TextSkeleton(props: PropsWithChildren<TextSkeletonProps>): ReactElement;

package/Skeleton/TextSkeleton.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextSkeletonTag } from './styles';
+/**
+ * Loading placeholder for a line of text; sizes to its content unless `width` is given.
+ *
+ * @example
+ * <TextSkeleton width={160} />
+ */
 export function TextSkeleton(props) {
   const {
     children,