@transferwise/components 46.129.0 → 46.130.0

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,5 +1,16 @@
-import Alert from '../alert';
+import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { PropsWithChildren } from 'react';
+
+import Alert from '../alert';
+import { Sentiment } from '../common';
+import Circle, { CircleProps } from '../common/circle';
+import SentimentSurface from '../sentimentSurface';
+
+export type CriticalCommsBannerSentiment =
+  | `${Sentiment.WARNING}`
+  | `${Sentiment.NEGATIVE}`
+  | `${Sentiment.NEUTRAL}`;
 
 export type CriticalCommsBannerProps = {
   title: string;
@@ -9,20 +20,58 @@ export type CriticalCommsBannerProps = {
     href?: string;
     onClick?: () => void;
   };
+  sentiment?: CriticalCommsBannerSentiment;
   className?: string;
 };
 
-function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
+const makeSurface = (sentiment: CriticalCommsBannerSentiment) => {
+  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
+    <SentimentSurface as="span" emphasis="elevated" sentiment={sentiment} {...props} />
+  );
+  Surface.displayName = `CriticalCommsSurface(${sentiment})`;
+  return Surface;
+};
+
+const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
+  [Sentiment.NEGATIVE]: (
+    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className="status-circle negative">
+      <AlertIcon className="status-icon light" />
+    </Circle>
+  ),
+  [Sentiment.WARNING]: (
+    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className="status-circle warning">
+      <AlertIcon className="status-icon dark" />
+    </Circle>
+  ),
+  [Sentiment.NEUTRAL]: (
+    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className="status-circle neutral">
+      <ClockIcon className="status-icon dark" />
+    </Circle>
+  ),
+};
+
+function CriticalCommsBanner({
+  title,
+  subtitle,
+  action,
+  sentiment = Sentiment.NEGATIVE,
+  className,
+}: CriticalCommsBannerProps) {
   return (
-    <div className={clsx('critical-comms', className)}>
+    <SentimentSurface
+      sentiment={sentiment}
+      emphasis="elevated"
+      className={clsx('critical-comms', className)}
+    >
       <Alert
         title={title}
         message={subtitle}
         action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
         className={className}
-        type="warning"
+        type={sentiment}
+        icon={iconBySentiment[sentiment]}
       />
-    </div>
+    </SentimentSurface>
   );
 }
 

package/src/criticalBanner/index.ts

@@ -1 +1,2 @@
 export { default } from './CriticalCommsBanner';
+export type { CriticalCommsBannerProps } from './CriticalCommsBanner';

package/src/index.ts

@@ -154,8 +154,9 @@ export { Chip, default as Chips } from './chips';
 export { default as CircularButton } from './circularButton';
 export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/bottomSheet';
-export { default as BaseCard } from './common/card';
+export { default as BaseCard } from './common/baseCard';
 export { default as CriticalCommsBanner } from './criticalBanner';
+export type { CriticalCommsBannerProps } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Decision } from './decision';

package/src/listItem/ListItem.css

@@ -599,7 +599,7 @@
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;

package/src/listItem/ListItem.less

@@ -266,8 +266,10 @@
   }
 
   &-spotlight {
-    padding-left: var(--size-12);
-    padding-right: var(--size-12);
+    .wds-list-item-gridWrapper {
+      padding-left: var(--size-12);
+      padding-right: var(--size-12);
+    }
 
     &-active {
       background-color: var(--color-background-neutral);

package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/NoMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [240, 241];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const NoMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/SideMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [332, 333];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const SideMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/StackedMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [308, 309];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const StackedMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/ListItem.story.tsx

@@ -428,8 +428,9 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
 
     return (
       <List>
-        <ListItem {...props} {...previewProps} spotlight="inactive" />
-        <ListItem {...props} {...previewProps} spotlight="active" />
+        <ListItem {...props} {...previewProps} title="Inactive Spotlight" spotlight="inactive" />
+        <ListItem {...props} {...previewProps} title="Active Spotlight" spotlight="active" />
+        <ListItem {...props} {...previewProps} title="No Spotlight" />
       </List>
     );
   },

package/src/main.css

@@ -485,37 +485,55 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
+}
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);
@@ -1969,6 +1987,55 @@
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
 }
+/* @define Card */
+.np-Card {
+  --Card-background-color: var(--color-background-neutral);
+  --Card-border-radius: var(--size-32);
+  --Card-flex-gap: var(--size-16);
+  --Card-padding: var(--size-24);
+  --Card-closeButton-position: var(--size-16);
+  --Card-max-width: initial;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--Card-background-color);
+  border-radius: 32px;
+  border-radius: var(--Card-border-radius);
+  gap: 16px;
+  gap: var(--Card-flex-gap);
+  padding: 24px;
+  padding: var(--Card-padding);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+@media (min-width: 576px) {
+  .np-Card {
+    max-width: var(--Card-max-width);
+  }
+}
+.np-Card.is-disabled .np-Card-closeButton {
+  cursor: not-allowed;
+}
+.np-theme-personal--dark .np-Card {
+  --Card-background-color: var(--color-background-elevated);
+}
+.np-Card-closeButton {
+  position: absolute;
+  z-index: 100;
+  top: var(--Card-closeButton-position);
+  right: var(--Card-closeButton-position);
+}
+[dir="rtl"] .np-Card-closeButton {
+  left: var(--Card-closeButton-position);
+  right: auto;
+}
+.np-Card--small {
+  --Card-border-radius: var(--size-16);
+  --Card-closeButton-position: var(--size-8);
+  --Card-padding: var(--size-16);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -2022,55 +2089,6 @@
   padding: 0 16px 16px;
   padding: 0 var(--size-16) var(--size-16);
 }
-/* @define Card */
-.np-Card {
-  --Card-background-color: var(--color-background-neutral);
-  --Card-border-radius: var(--size-32);
-  --Card-flex-gap: var(--size-16);
-  --Card-padding: var(--size-24);
-  --Card-closeButton-position: var(--size-16);
-  --Card-max-width: initial;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--Card-background-color);
-  border-radius: 32px;
-  border-radius: var(--Card-border-radius);
-  gap: 16px;
-  gap: var(--Card-flex-gap);
-  padding: 24px;
-  padding: var(--Card-padding);
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-@media (min-width: 576px) {
-  .np-Card {
-    max-width: var(--Card-max-width);
-  }
-}
-.np-Card.is-disabled .np-Card-closeButton {
-  cursor: not-allowed;
-}
-.np-theme-personal--dark .np-Card {
-  --Card-background-color: var(--color-background-elevated);
-}
-.np-Card-closeButton {
-  position: absolute;
-  z-index: 100;
-  top: var(--Card-closeButton-position);
-  right: var(--Card-closeButton-position);
-}
-[dir="rtl"] .np-Card-closeButton {
-  left: var(--Card-closeButton-position);
-  right: auto;
-}
-.np-Card--small {
-  --Card-border-radius: var(--size-16);
-  --Card-closeButton-position: var(--size-8);
-  --Card-padding: var(--size-16);
-}
 .np-close-button {
   transition: color 0.15s ease-in-out;
   color: #00a2dd;
@@ -3692,7 +3710,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;

package/src/main.less

@@ -19,8 +19,8 @@
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";
 @import "./common/circle/Circle.less";
+@import "./common/baseCard/BaseCard.less";
 @import "./common/bottomSheet/BottomSheet.less";
-@import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
 @import "./common/panel/Panel.less";
@@ -90,4 +90,4 @@
 @import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
-// Make sure you are not referencing main.less itself in this file!
+// Make sure you are not referencing main.less itself in this file!

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/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';