@transferwise/components 46.129.0 → 46.130.1

package/src/promoCard/PromoCard.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { type CardProps } from '../common/card';
+import BaseCard, { type BaseCardProps } from '../common/baseCard';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
@@ -82,7 +82,7 @@ export interface PromoCardCommonProps {
   ref?: ReferenceType;
 }
 
-export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
+export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {
   /**
    * Optional prop to prompts a user to save the linked URL instead of
    * navigating to it
@@ -121,7 +121,8 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   value?: never;
 }
 
-export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
+export interface PromoCardCheckedProps
+  extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {
   /** Specify the initial checked attribute of the PromoCard */
   defaultChecked?: boolean;
 
@@ -368,7 +369,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
     }, [defaultChecked, isChecked]);
 
     return (
-      <Card {...commonProps} {...checkedProps} {...props}>
+      <BaseCard {...commonProps} {...checkedProps} {...props}>
         {(value === state || checked) && (
           <span className="np-Card-check">
             <Check size={24} aria-hidden="true" />
@@ -386,7 +387,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
         )}
 
         <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />
-      </Card>
+      </BaseCard>
     );
   },
 ) as PolymorphicPromoCard;

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -16,6 +16,7 @@ import { useScreenSize } from '../../common/hooks/useScreenSize';
 export type ActionPromptProps = {
   title: ReactNode;
   description?: ReactNode;
+  /** @default {} */
   media?: {
     imgSrc?: string;
     avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
@@ -32,7 +33,13 @@ export type ActionPromptProps = {
     label: ButtonProps['children'];
   };
   'aria-label'?: AriaAttributes['aria-label'];
-} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {
+    /**
+     * The sentiment determines the colour scheme
+     * @default 'neutral'
+     */
+    sentiment?: PrimitivePromptProps['sentiment'];
+  };
 
 /**
  * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -9,6 +9,7 @@ import { PrimitivePrompt } from '../PrimitivePrompt';
 export type InlinePromptProps = {
   /**
    * The sentiment determines the colour scheme
+   * @default Sentiment.POSITIVE
    */
   sentiment?:
     | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`

package/src/radioOption/RadioOption.tsx

@@ -17,7 +17,7 @@ export interface RadioOptionProps<T extends string | number = string>
 }
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/select/Select.tsx

@@ -106,7 +106,9 @@ export interface SelectProps {
   inverse?: boolean;
   dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;
   dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /** @default 'md' */
   size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /** @default true */
   block?: boolean;
   selected?: SelectOptionItem;
   /**
@@ -116,8 +118,10 @@ export interface SelectProps {
    */
   search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);
   options: SelectItem[];
+  /** @default '' */
   searchValue?: string;
   searchPlaceholder?: string;
+  /** @default {} */
   classNames?: Record<string, string>;
   dropdownUp?: boolean;
   buttonProps?: Extract<ButtonProps, { as?: 'button' }>;

package/src/sentimentSurface/SentimentSurface.css

@@ -226,12 +226,12 @@
 .np-theme-platform.wds-sentiment-surface-success-elevated,
 .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
 .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
-  --color-sentiment-content-primary: #E2F6D5;
-  --color-sentiment-content-primary-hover: #D3F2C0;
-  --color-sentiment-content-primary-active: #C5EDAB;
-  --color-sentiment-interactive-primary: #E2F6D5;
-  --color-sentiment-interactive-primary-hover: #D3F2C0;
-  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
 .np-theme-business--forest-green.wds-sentiment-surface-success-base,
 .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
-  --color-sentiment-content-primary: #BAE5A0;
-  --color-sentiment-content-primary-hover: #C8EAB3;
-  --color-sentiment-content-primary-active: #D6F0C7;
-  --color-sentiment-interactive-primary: #BAE5A0;
-  --color-sentiment-interactive-primary-hover: #C8EAB3;
-  --color-sentiment-interactive-primary-active: #D6F0C7;
-  --color-sentiment-interactive-secondary: #252C20;
-  --color-sentiment-interactive-secondary-hover: #323B2B;
-  --color-sentiment-interactive-secondary-active: #3E4A36;
-  --color-sentiment-interactive-secondary-neutral: #37422F;
-  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
-  --color-sentiment-interactive-secondary-neutral-active: #546548;
-  --color-sentiment-interactive-control: #252C20;
-  --color-sentiment-interactive-control-hover: #323B2B;
-  --color-sentiment-interactive-control-active: #3E4A36;
-  --color-sentiment-background-surface: #252C20;
-  --color-sentiment-background-surface-hover: #323B2B;
-  --color-sentiment-background-surface-active: #3E4A36;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #0B312F;
-  --color-sentiment-interactive-secondary-hover: #124F4C;
-  --color-sentiment-interactive-secondary-active: #176460;
-  --color-sentiment-interactive-secondary-neutral: #174E4D;
-  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
-  --color-sentiment-interactive-secondary-neutral-active: #237675;
-  --color-sentiment-interactive-control: #0B312F;
-  --color-sentiment-interactive-control-hover: #124F4C;
-  --color-sentiment-interactive-control-active: #176460;
-  --color-sentiment-background-surface: #0B312F;
-  --color-sentiment-background-surface-hover: #124F4C;
-  --color-sentiment-background-surface-active: #176460;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,

package/src/sentimentSurface/SentimentSurface.less

@@ -133,8 +133,8 @@
       }
       &-elevated {
         .sentiment-surface-tokens(
-                    #E2F6D5, #D3F2C0, #C5EDAB,  // content-primary
-                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-primary
+                    #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
+                    #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
                     #054D28, #043A1E, #022614,  // interactive-secondary
                     #256A43, #2A794C, #329057,  // interactive-secondary-neutral
                     #054D28, #043A1E, #022614,  // interactive-control
@@ -150,12 +150,12 @@
     .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
-                    #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
-                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-primary
-                    #252C20, #323B2B, #3E4A36,  // interactive-secondary
-                    #37422F, #46533B, #546548,  // interactive-secondary-neutral
-                    #252C20, #323B2B, #3E4A36,  // interactive-control
-                    #252C20, #323B2B, #3E4A36   // background-surface
+                   #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
+                   #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
+                   #054D28, #043A1E, #022614,  // interactive-secondary
+                   #256A43, #2A794C, #329057,  // interactive-secondary-neutral
+                   #054D28, #043A1E, #022614,  // interactive-control
+                   #054D28, #043A1E, #022614   // background-surface
                 );
       }
       &-elevated {
@@ -262,10 +262,10 @@
         .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
-                    #0B312F, #124F4C, #176460,  // interactive-secondary
-                    #174E4D, #1D6261, #237675,  // interactive-secondary-neutral
-                    #0B312F, #124F4C, #176460,  // interactive-control
-                    #0B312F, #124F4C, #176460   // background-surface
+                    #054D4D, #043A3A, #022626,  // interactive-secondary
+                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
+                    #054D4D, #043A3A, #022626,  // interactive-control
+                    #054D4D, #043A3A, #022626   // background-surface
                 );
       }
       &-elevated {

package/src/statusIcon/StatusIcon.tsx

@@ -11,7 +11,7 @@ import { useMedia } from '../common/hooks/useMedia';
 import messages from './StatusIcon.messages';
 
 /**
- * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.
  */
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 
@@ -19,7 +19,9 @@ export type StatusIconSentiment = Sentiment | Status.PENDING;
 
 export type StatusIconProps = {
   id?: string;
+  /** @default 'neutral' */
   sentiment?: `${StatusIconSentiment}`;
+  /** @default 40 */
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
    * Override for the sentiment's-derived, default, accessible

package/src/summary/Summary.tsx

@@ -47,6 +47,7 @@ export interface Props {
   action?: AlertAction;
   /**
    * Decides which html element should wrap the Summary
+   * @default 'div'
    */
   as?: ElementType;
   /**
@@ -54,7 +55,8 @@ export interface Props {
    */
   className?: string;
   /**
-   * @deprecated please use description instead
+   * @deprecated Use `description` instead.
+   * @default null
    */
   content?: ReactNode;
   /**
@@ -62,7 +64,7 @@ export interface Props {
    */
   description?: ReactNode;
   /**
-   * @deprecated please use info instead
+   * @deprecated Use `info` instead.
    */
   help?: {
     content: ReactNode;
@@ -73,7 +75,8 @@ export interface Props {
    */
   info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;
   /**
-   * @deprecated please use icon instead
+   * @deprecated Use `icon` instead.
+   * @default null
    */
   illustration?: ReactNode;
   /**
@@ -91,7 +94,7 @@ export interface Props {
 }
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/switchOption/SwitchOption.tsx

@@ -27,7 +27,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/tabs/Tabs.tsx

@@ -28,8 +28,10 @@ export interface TabsProps {
   tabs: TabItem[];
   selected: number;
   name: string;
+  /** @default true */
   changeTabOnSwipe?: boolean;
   className?: string;
+  /** @default 'block' */
   headerWidth?: `${Width}`;
   onTabSelect: (index: number) => void;
 }

package/src/typeahead/Typeahead.tsx

@@ -40,7 +40,7 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   name: string;
   addon?: ReactNode;
   /**
-   * @deprecated Please use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
+   * @deprecated Use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
    * @deprecated `error`, `info` and `success` are deprecated as alert types and will be soon removed.
    */
   alert?: {
@@ -51,24 +51,36 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
       | `${Sentiment.INFO}`
       | `${Sentiment.SUCCESS}`;
   };
+  /** @default false */
   allowNew?: boolean;
+  /** @default true */
   autoFillOnBlur?: boolean;
+  /** @default false */
   autoFocus?: boolean;
+  /** @default [] */
   chipSeparators?: readonly string[];
+  /** @default true */
   clearable?: boolean;
   footer?: ReactNode;
+  /** @default [] */
   initialValue?: readonly TypeaheadOption<T>[];
+  /** @default 'new-password' */
   inputAutoComplete?: string;
   maxHeight?: number;
+  /** @default 3 */
   minQueryLength?: number;
   placeholder?: string;
+  /** @default false */
   multiple?: boolean;
   options: readonly TypeaheadOption<T>[];
+  /** @default 200 */
   searchDelay?: number;
+  /** @default true */
   showSuggestions?: boolean;
+  /** @default true */
   showNewEntry?: boolean;
+  /** @default 'md' */
   size?: SizeMedium | SizeLarge;
-
   onBlur?: () => void;
   onChange: (options: TypeaheadOption<T>[]) => void;
   onFocus?: () => void;

package/src/upload/Upload.tsx

@@ -18,6 +18,7 @@ export enum UploadStep {
 }
 
 export interface UploadProps extends WrappedComponentProps {
+  /** @default 300 */
   animationDelay?: number;
   csButtonText?: string;
   csFailureText?: string;
@@ -39,19 +40,24 @@ export interface UploadProps extends WrappedComponentProps {
    */
   maxSize?: number | null;
   psButtonText?: string;
+  /** @default false */
   psButtonDisabled?: boolean;
   psProcessingText?: string;
+  /** @default 'md' */
   size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
   /**
    * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
    * Using "*" will allow every file type to be uploaded.
+   * @default 'image/*'
    */
   usAccept?: string;
   usButtonText?: string;
   usButtonRetryText?: string;
+  /** @default false */
   usDisabled?: boolean;
   usDropMessage?: string;
   usHelpImage?: React.ReactNode;
+  /** @default '' */
   usLabel?: string;
   usPlaceholder?: string;
   /**

package/src/uploadInput/UploadInput.tsx

@@ -18,11 +18,13 @@ import UploadItem, { UploadItemProps } from './uploadItem/UploadItem';
 export type UploadInputProps = {
   /**
    * List of already existing, failed or in progress files
+   * @default []
    */
   files?: readonly UploadedFile[];
 
   /**
    * The key of the file in the returned FormData object (default: file)
+   * @default 'file'
    */
   fileInputName?: string;
 
@@ -94,10 +96,16 @@ export type UploadInputProps = {
    * Error message to show when files over allowed size limit are uploaded
    */
   sizeLimitErrorMessage?: string;
-} & Pick<
-  UploadButtonProps,
-  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'
-> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;
+} & {
+  /** @default false */
+  multiple?: UploadButtonProps['multiple'];
+  /** @default ['.pdf,application/pdf', '.jpg,.jpeg,image/jpeg', '.png,image/png'] */
+  fileTypes?: UploadButtonProps['fileTypes'];
+  /** @default 5000 */
+  sizeLimit?: UploadButtonProps['sizeLimit'];
+} & Pick<UploadButtonProps, 'disabled' | 'description' | 'id' | 'uploadButtonTitle'> & {
+    onDownload?: UploadItemProps['onDownload'];
+  } & CommonProps;
 
 /**
  * Interface representing a reference to an UploadItem component.

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -49,12 +49,15 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   | 'required'
   | 'inputMode'
 > {
+  /** @default '' */
   value?: string;
+  /** @default '' */
   displayPattern: string;
   /**
    * autocomplete hides our form help so we need to disable it when help text
    * is present. Chrome ignores autocomplete=off, the only way to disable it is
    * to provide an 'invalid' value, for which 'disabled' serves.
+   * @default 'off'
    */
   autoComplete?: TextElementProps['autoComplete'] | 'disabled';
   onChange?: (value: string) => void;

package/build/common/card/Card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AAkDA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/card/Card.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AAkDA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/types/common/card/Card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAKvE,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IAEpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,sGAgDT,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/build/types/common/card/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Card';
-export * from './Card';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/card/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,cAAc,QAAQ,CAAC"}

package/src/common/card/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Card';
-export * from './Card';