@transferwise/components 46.97.0 → 46.97.2

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ProfileType, Sentiment } from '../common';
+import { ProfileType, Sentiment, Status } from '../common';
 
 import AvatarWrapper from './AvatarWrapper';
 
@@ -96,7 +96,7 @@ export const All: Story = {
           </div>
           Default
           <div>
-            <AvatarWrapper badgeStatusIcon={Sentiment.PENDING} avatarProps={avatarProps} />
+            <AvatarWrapper badgeStatusIcon={Status.PENDING} avatarProps={avatarProps} />
           </div>
         </div>
       </div>

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -10,6 +10,7 @@ import {
   Size,
   Sentiment,
   getInitials,
+  Status,
 } from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
@@ -17,7 +18,7 @@ interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
   url?: string;
   ariaLabel?: string;
   altText?: string;
-  statusIcon?: Sentiment;
+  statusIcon?: Sentiment | Status.PENDING;
 }
 
 const OptionalBadge = ({
@@ -66,7 +67,7 @@ export type AvatarWrapperProps = {
   | {
       badgeUrl?: never;
       badgeAltText?: never;
-      badgeStatusIcon: Sentiment;
+      badgeStatusIcon: Sentiment | Status.PENDING;
     }
   | {
       badgeUrl?: never;

package/src/common/propsValues/sentiment.ts

@@ -3,6 +3,7 @@ export enum Sentiment {
   NEUTRAL = 'neutral',
   POSITIVE = 'positive',
   WARNING = 'warning',
+  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING
   PENDING = 'pending',
 
   /**

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -6,7 +6,7 @@ import BottomSheet from '../../common/bottomSheet';
 import Option from '../../common/Option';
 import { Check, ChevronDown } from '@transferwise/icons';
 import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
-import { List } from '../../listItem';
+import { List } from '../../legacylistItem';
 
 export interface AnimatedLabelProps {
   activeLabel: number;

package/src/index.ts

@@ -51,7 +51,7 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
-export type { ListProps, ListItemProps } from './listItem';
+export type { ListProps, LegacyListItemProps } from './legacylistItem';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -167,7 +167,7 @@ export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';
 export { Label } from './label/Label';
 export { default as Link } from './link';
-export { List, default as ListItem } from './listItem';
+export { List, default as ListItem, default as LegacyListItem } from './legacylistItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';

package/src/inputs/Input.css

@@ -71,8 +71,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -83,6 +81,34 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/inputs/TextArea.css

@@ -71,8 +71,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -83,6 +81,34 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/{listItem/ListItem.tests.story.tsx → legacylistItem/LegacyListItem.tests.story.tsx}

@@ -1,7 +1,7 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import ListItem, { List, type ListItemProps } from '.';
+import ListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
   component: ListItem,
@@ -9,7 +9,7 @@ export default {
 };
 
 export const LongText = () => {
-  const sharedProps: Partial<ListItemProps> = {
+  const sharedProps: Partial<LegacyListItemProps> = {
     media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
     action: (
       <Button v2 size="sm" onClick={() => {}}>

package/src/{listItem/ListItem.tsx → legacylistItem/LegacyListItem.tsx}

@@ -3,7 +3,7 @@ import { ElementType, FC, ReactNode } from 'react';
 
 import Body from '../body/Body';
 
-export type ListItemProps = {
+export type LegacyListItemProps = {
   title: ReactNode;
   value: ReactNode;
   media?: ReactNode;
@@ -13,7 +13,7 @@ export type ListItemProps = {
   as?: ElementType;
 };
 
-const ListItem: FC<ListItemProps> = ({
+const LegacyListItem: FC<LegacyListItemProps> = ({
   media,
   action,
   className,
@@ -50,4 +50,4 @@ const ListItem: FC<ListItemProps> = ({
   );
 };
 
-export default ListItem;
+export default LegacyListItem;

package/src/legacylistItem/index.ts

@@ -0,0 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
+export { default } from './LegacyListItem';
+export type { LegacyListItemProps } from './LegacyListItem';

package/src/main.css

@@ -2585,8 +2585,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -2598,6 +2596,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 72px !important;
   height: var(--size-72) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -4023,8 +4051,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4034,6 +4060,36 @@ html:not([dir="rtl"]) .np-navigation-option {
   letter-spacing: -0.02em;
   line-height: 122%;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/main.less

@@ -77,7 +77,7 @@
 @import "./uploadInput/uploadItem/UploadItem.less";
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
-@import "./listItem/ListItem.less";
+@import "./legacylistItem/LegacyListItem.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!

package/src/popover/Popover.css

@@ -24,8 +24,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -34,6 +32,34 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/statusIcon/StatusIcon.docs.mdx

@@ -10,7 +10,7 @@ By default, the component offers accessible names for all the icons, to ensure t
 Sentiment.NEGATIVE -> 'Error:'
 Sentiment.POSITIVE -> 'Success:'
 Sentiment.WARNING -> 'Warning:'
-Sentiment.PENDING -> 'Pending:'
+Status.PENDING -> 'Pending:'
 Sentiment.NEUTRAL -> 'Information:'
 
 // deprecated

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,7 +1,8 @@
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import StatusIcon, { type StatusIconProps } from '.';
+import { StatusIconSentiment } from './StatusIcon';
 
 mockMatchMedia();
 
@@ -29,12 +30,13 @@ describe('StatusIcon', () => {
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],
     [Sentiment.PENDING, Sentiment.PENDING],
+    [Status.PENDING, Status.PENDING],
     [Sentiment.POSITIVE, Sentiment.POSITIVE],
     [Sentiment.WARNING, Sentiment.WARNING],
   ])(
     "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
     (sentiment, expectedClass) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
       cleanup();
@@ -48,6 +50,10 @@ describe('StatusIcon', () => {
 
     renderStatusIcon({ sentiment: Sentiment.PENDING });
     expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
+    cleanup();
+
+    renderStatusIcon({ sentiment: Status.PENDING });
+    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
   });
 
   it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
@@ -68,13 +74,13 @@ describe('StatusIcon', () => {
       ['Error', Sentiment.NEGATIVE],
       ['Success', Sentiment.POSITIVE],
       ['Warning', Sentiment.WARNING],
-      ['Pending', Sentiment.PENDING],
+      ['Pending', Status.PENDING],
       ['Information', Sentiment.NEUTRAL],
       ['Error', Sentiment.ERROR],
       ['Information', Sentiment.INFO],
       ['Success', Sentiment.SUCCESS],
     ])("should set '%s' as an accessible name for the '%s' sentiment", (label, sentiment) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
     });

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 
-import StatusIcon from './StatusIcon';
+import StatusIcon, { StatusIconSentiment } from './StatusIcon';
 import { storyConfig } from '../test-utils';
 
 export default {
@@ -42,6 +42,7 @@ export const Variants = storyConfig(
           Sentiment.WARNING,
           Sentiment.NEUTRAL,
           Sentiment.PENDING,
+          Status.PENDING,
         ].map((sentiment) => {
           return (
             <span
@@ -55,7 +56,9 @@ export const Variants = storyConfig(
               }}
             >
               {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+                return (
+                  <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+                );
               })}
             </span>
           );
@@ -74,7 +77,7 @@ export const LegacySizes: Story = {
         Sentiment.NEGATIVE,
         Sentiment.NEUTRAL,
         Sentiment.WARNING,
-        Sentiment.PENDING,
+        Status.PENDING,
       ].map((sentiment) => {
         return (
           <span
@@ -88,7 +91,9 @@ export const LegacySizes: Story = {
             }}
           >
             {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              return (
+                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+              );
             })}
           </span>
         );

package/src/statusIcon/StatusIcon.tsx

@@ -2,7 +2,7 @@ import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons'
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
@@ -13,8 +13,10 @@ import messages from './StatusIcon.messages';
  */
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 
+export type StatusIconSentiment = Sentiment | Status.PENDING;
+
 export type StatusIconProps = {
-  sentiment?: `${Sentiment}`;
+  sentiment?: `${StatusIconSentiment}`;
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
    * Override for the sentiment's-derived, default, accessible
@@ -34,7 +36,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
-    `${Sentiment}`,
+    `${Sentiment}` | Status.PENDING,
     {
       Icon: React.ElementType;
       defaultIconLabel: string;
@@ -52,7 +54,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       Icon: Alert,
       defaultIconLabel: intl.formatMessage(messages.warningLabel),
     },
-    [Sentiment.PENDING]: {
+    [Status.PENDING]: {
       Icon: ClockBorderless,
       defaultIconLabel: intl.formatMessage(messages.pendingLabel),
     },

package/src/title/Title.test.story.tsx

@@ -1,5 +1,4 @@
 import { Typography } from '../common/propsValues/typography';
-import Modal from '../modal';
 import { lorem1000 } from '../test-utils';
 
 import Title from './Title';
@@ -7,19 +6,27 @@ import Title from './Title';
 export default {
   component: Title,
   title: 'Typography/Title/Tests',
+  args: {
+    children: lorem1000.replaceAll(' ', ''),
+  },
+  argTypes: {
+    as: {
+      table: {
+        disable: true,
+      },
+    },
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const Hyphenation = () => {
+export const Hyphenation = ({ children }: { children: string }) => {
   return (
-    <Modal
-      open
-      body={
-        <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px' }}>
-          This Screen Title is mostly one very long word and it hyphenates{' '}
-          {lorem1000.replaceAll(' ', '')}
-        </Title>
-      }
-      onClose={() => {}}
-    />
+    <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px', wordWrap: 'break-word' }}>
+      {` ${children}`}
+    </Title>
   );
 };

package/src/title/Title.tsx

@@ -28,6 +28,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
 function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
   const mapping = titleTypeMapping[type];
   const isTypeSupported = mapping !== undefined;
+
   if (isTypeSupported) {
     const HeaderTag = as ?? mapping;
     return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;

package/build/listItem/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/listItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAqB,CAAA,EAAA;AACrD,EAAA,oBAAOC,cAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,SAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAK,CAAC,CAAA;AACzE;;;;"}

package/build/listItem/List.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.mjs","sources":["../../src/listItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAqB,CAAA,EAAA;AACrD,EAAA,oBAAOC,GAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,IAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAK,CAAC,CAAA;AACzE;;;;"}

package/build/listItem/ListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}

package/build/listItem/ListItem.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}

package/build/types/listItem/List.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/listItem/List.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAEtD"}

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAmC/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/index.d.ts

@@ -1,5 +0,0 @@
-export { List } from './List';
-export type { ListProps } from './List';
-export { default } from './ListItem';
-export type { ListItemProps } from './ListItem';
-//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/listItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/src/listItem/index.ts

@@ -1,4 +0,0 @@
-export { List } from './List';
-export type { ListProps } from './List';
-export { default } from './ListItem';
-export type { ListItemProps } from './ListItem';