@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-64ea603

package/build/styles/main.css

@@ -874,10 +874,10 @@
   display: inline-block;
 }
 .wds-Button-icon--md {
-  --Button-iconSize: calc(var(--size-10) + var(--size-8));
+  --Button-iconSize: 18px;
 }
 .wds-Button-icon--sm {
-  --Button-iconSize: var(--size-16);
+  --Button-iconSize: 16px;
 }
 .wds-Button-icon svg {
   width: var(--Button-iconSize);
@@ -1782,7 +1782,7 @@ button.np-option {
   max-width: fit-content;
 }
 @media (max-width: 480px) {
-  .np-theme-personal .np-option-additional-content {
+  .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
     margin-left: 16px;
     margin-left: var(--size-16);
   }
@@ -2009,11 +2009,6 @@ button.np-option {
 .np-theme-personal .tw-date-lookup-menu td {
   border: none;
 }
-.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current,
-.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
 .np-date-trigger {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2286,6 +2281,30 @@ button.np-option {
     padding: var(--size-24);
   }
 }
+.wds-Divider {
+  --Divider-border-width: 4px;
+  --Divider-border-color: var(--color-border-neutral);
+  --Divider-border-style: solid;
+  --Divider-dash-length: 4px;
+  --Divider-dash-spacing: 4px;
+  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 4px;
+  height: var(--Divider-border-width);
+  width: 100%;
+}
+.wds-Divider--content {
+  border-top: none;
+  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
+  height: var(--Divider-border-width);
+}
+.wds-Divider--content,
+.wds-Divider--subsection {
+  --Divider-border-width: 1px;
+}
 .np-dropfade,
 .np-dropfade-enter {
   opacity: 0;
@@ -2443,30 +2462,47 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   fill: var(--color-interactive-primary);
 }
 .np-header {
-  display: flex;
-  justify-content: space-between;
   align-items: flex-end;
-  max-width: 100%;
-  padding: 8px 0;
-  padding: var(--size-8) 0;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
+  max-width: 100%;
+  padding: 8px 0;
+  padding: var(--size-8) 0;
+  position: relative;
+  width: 100%;
+}
+.np-header--section {
+  align-items: center;
+  border-bottom: none;
+}
+.np-header--section .np-header__button,
+.np-header--section .np-header__link {
+  margin-block-end: 0;
+  position: relative;
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-header__link,
 .np-header__button {
-  margin-inline: calc(16px * -1);
-  margin-inline: calc(var(--size-16) * -1);
-  margin-bottom: calc(4px * -1);
-  margin-bottom: calc(var(--size-4) * -1);
+  position: absolute;
+  right: 0;
+}
+.np-header__link {
+  bottom: 7px;
+}
+.np-header__button {
+  margin-inline: calc(17px * -1);
+  margin-bottom: calc(6px * -1);
 }
 .tw-image {
   max-width: none;
@@ -2482,30 +2518,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
 }
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;
@@ -2626,66 +2639,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/build/summary/Summary.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
 var React = require('react');
@@ -77,11 +79,11 @@ const Summary = ({
     className: clsx.clsx('np-summary d-flex align-items-start', className)
     // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
     ,
-    "aria-label": status && intl.formatMessage(Summary_messages[statusLabels[status]]),
+    "aria-label": status && intl.formatMessage(Summary_messages.default[statusLabels[status]]),
     children: [icon && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-summary__icon",
       children: [media, Badge && /*#__PURE__*/jsxRuntime.jsx("div", {
-        children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
           size: size.Size.SMALL,
           sentiment: statusMapping[status]
         })
@@ -90,14 +92,14 @@ const Summary = ({
       className: `np-summary__body ${icon ? 'm-l-2' : ''}`,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "np-summary__title d-flex",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
           as: "span",
           role: "heading",
           "aria-level": 6,
           type: typography.Typography.BODY_LARGE_BOLD,
-          className: "text-primary m-b-1",
+          className: "text-primary text-overflow-wrap m-b-1",
           children: title
-        }), info && /*#__PURE__*/jsxRuntime.jsx(Info, {
+        }), info && /*#__PURE__*/jsxRuntime.jsx(Info.default, {
           "aria-label": info['aria-label'],
           className: "m-l-1 hidden-xs",
           content: info.content,
@@ -106,16 +108,16 @@ const Summary = ({
           title: info.title,
           onClick: info.onClick
         })]
-      }), description && /*#__PURE__*/jsxRuntime.jsx(Body, {
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
         as: "span",
         type: typography.Typography.BODY_DEFAULT,
-        className: `d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
+        className: `d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
         children: description
       }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
         action: action,
         className: "np-summary__action"
       })]
-    }), info && /*#__PURE__*/jsxRuntime.jsx(Info, {
+    }), info && /*#__PURE__*/jsxRuntime.jsx(Info.default, {
       "aria-label": info['aria-label'],
       className: "m-l-2 hidden-sm hidden-md hidden-lg hidden-xl",
       content: info.content,
@@ -127,5 +129,5 @@ const Summary = ({
   });
 };
 
-module.exports = Summary;
+exports.default = Summary;
 //# sourceMappingURL=Summary.js.map

package/build/summary/Summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      {icon && (\n        <div className=\"np-summary__icon\">\n          {media}\n          {Badge && (\n            <div>\n              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n            </div>\n          )}\n        </div>\n      )}\n      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={6}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}
+{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      {icon && (\n        <div className=\"np-summary__icon\">\n          {media}\n          {Badge && (\n            <div>\n              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n            </div>\n          )}\n        </div>\n      )}\n      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={6}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary text-overflow-wrap m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}

package/build/summary/Summary.messages.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var reactIntl = require('react-intl');
 
 var messages = reactIntl.defineMessages({
@@ -14,5 +16,5 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-module.exports = messages;
+exports.default = messages;
 //# sourceMappingURL=Summary.messages.js.map

package/build/summary/Summary.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.messages.js","sources":["../../src/summary/Summary.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  statusNotDone: {\n    id: 'neptune.Summary.statusNotDone',\n    defaultMessage: 'Item to do',\n  },\n  statusPending: {\n    id: 'neptune.Summary.statusPending',\n    defaultMessage: 'Item pending',\n  },\n  statusDone: {\n    id: 'neptune.Summary.statusDone',\n    defaultMessage: 'Item done',\n  },\n});\n"],"names":["defineMessages","statusNotDone","id","statusPending","statusDone"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,+BAAA;GAEH;AACDC,EAAAA,aAAa,EAAE;IACbD,EAAE,EAAA,+BAAA;GAEH;AACDE,EAAAA,UAAU,EAAE;IACVF,EAAE,EAAA,4BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Summary.messages.js","sources":["../../src/summary/Summary.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  statusNotDone: {\n    id: 'neptune.Summary.statusNotDone',\n    defaultMessage: 'Item to do',\n  },\n  statusPending: {\n    id: 'neptune.Summary.statusPending',\n    defaultMessage: 'Item pending',\n  },\n  statusDone: {\n    id: 'neptune.Summary.statusDone',\n    defaultMessage: 'Item done',\n  },\n});\n"],"names":["defineMessages","statusNotDone","id","statusPending","statusDone"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,+BAAA;GAEH;AACDC,EAAAA,aAAa,EAAE;IACbD,EAAE,EAAA,+BAAA;GAEH;AACDE,EAAAA,UAAU,EAAE;IACVF,EAAE,EAAA,4BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/summary/Summary.mjs

@@ -93,7 +93,7 @@ const Summary = ({
           role: "heading",
           "aria-level": 6,
           type: Typography.BODY_LARGE_BOLD,
-          className: "text-primary m-b-1",
+          className: "text-primary text-overflow-wrap m-b-1",
           children: title
         }), info && /*#__PURE__*/jsx(Info, {
           "aria-label": info['aria-label'],
@@ -107,7 +107,7 @@ const Summary = ({
       }), description && /*#__PURE__*/jsx(Body, {
         as: "span",
         type: Typography.BODY_DEFAULT,
-        className: `d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
+        className: `d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
         children: description
       }), action && /*#__PURE__*/jsx(Action, {
         action: action,

package/build/summary/Summary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      {icon && (\n        <div className=\"np-summary__icon\">\n          {media}\n          {Badge && (\n            <div>\n              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n            </div>\n          )}\n        </div>\n      )}\n      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={6}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}
+{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      {icon && (\n        <div className=\"np-summary__icon\">\n          {media}\n          {Badge && (\n            <div>\n              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n            </div>\n          )}\n        </div>\n      )}\n      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={6}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary text-overflow-wrap m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAyBA,MAAMA,UAAU,GAAG;AACjB,EAAA,CAACC,MAAM,CAACC,IAAI,GAAGC,eAAe;EAC9B,CAACF,MAAM,CAACG,OAAO,GAAGC,SAAAA;CACnB,CAAA;AAED,MAAMC,YAAY,GAAG;AACnB,EAAA,CAACL,MAAM,CAACM,QAAQ,GAAG,eAAe;AAClC,EAAA,CAACN,MAAM,CAACC,IAAI,GAAG,YAAY;EAC3B,CAACD,MAAM,CAACG,OAAO,GAAG,eAAA;CACnB,CAAA;AAED,MAAMI,aAAa,GAAG;AACpB,EAAA,CAACP,MAAM,CAACC,IAAI,GAAGO,SAAS,CAACC,QAAQ;AACjC,EAAA,CAACT,MAAM,CAACG,OAAO,GAAGK,SAAS,CAACL,OAAAA;CAC7B,CAAA;AAoDKO,MAAAA,OAAO,GAAGA,CAAC;EACfC,MAAM;EACNC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAGD,OAAO;EACrBE,IAAI;EACJC,IAAI;AACJC,EAAAA,YAAY,GAAG,IAAI;AACnBC,EAAAA,IAAI,GAAGH,IAAI;EACXI,MAAM;AACNC,EAAAA,KAAAA;AAAK,CACC,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,IAAIC,KAAK,GAAGN,YAAY,CAAA;AACxB,EAAA,IAAID,IAAI,EAAE;AACR;AACA,IAAA,MAAMQ,QAAQ,GAAGR,IAAI,EAAES,KAAK,EAAEC,IAAc,CAAA;IAE5CH,KAAK,GACHC,QAAQ,KAAK,EAAE;AAAA;AACX;IACAG,YAAY,CAACX,IAAI,EAAE;AAAEU,MAAAA,IAAI,EAAE,EAAA;KAAI,CAAC,GAChCV,IAAI,CAAA;AACZ,GAAA;AACA;AACA,EAAA,MAAMY,KAAK,GAAGT,MAAM,IAAItB,UAAU,CAACsB,MAAM,CAAC,CAAA;EAE1C,oBACEU,IAAA,CAAClB,OAAO,EAAA;AACNC,IAAAA,SAAS,EAAEkB,IAAI,CAAC,qCAAqC,EAAElB,SAAS,CAAA;AAChE;AAAA;AACA,IAAA,YAAA,EAAYO,MAAM,IAAIE,IAAI,CAACU,aAAa,CAACC,QAAQ,CAAC7B,YAAY,CAACgB,MAAM,CAAC,CAAC,CAAE;IAAAc,QAAA,EAAA,CAExEjB,IAAI,iBACHa,IAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAqB,MAAAA,QAAA,EAC9BV,CAAAA,KAAK,EACLK,KAAK,iBACJM,GAAA,CAAA,KAAA,EAAA;QAAAD,QAAA,eAEEC,GAAA,CAACC,UAAU,EAAA;UAACT,IAAI,EAAEU,IAAI,CAACC,KAAM;UAACC,SAAS,EAAEjC,aAAa,CAACc,MAAM,CAAA;SAC/D,CAAA;AAAA,OAAK,CACN,CAAA;KACE,CACN,eACDU,IAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAE,CAAoBI,iBAAAA,EAAAA,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG,CAAA;AAAAiB,MAAAA,QAAA,gBACxDJ,IAAA,CAAA,KAAA,EAAA;AAAKjB,QAAAA,SAAS,EAAC,0BAA0B;QAAAqB,QAAA,EAAA,cACvCC,GAAA,CAACK,IAAI,EAAA;AACH7B,UAAAA,EAAE,EAAC,MAAM;AACT8B,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAY,CAAE;UACdC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjC/B,UAAAA,SAAS,EAAC,uCAAuC;AAAAqB,UAAAA,QAAA,EAEhDb,KAAAA;AAAK,SACF,CACN,EAACF,IAAI,iBACHgB,GAAA,CAACU,IAAI,EAAA;UACH,YAAY1B,EAAAA,IAAI,CAAC,YAAY,CAAE;AAC/BN,UAAAA,SAAS,EAAC,iBAAiB;UAC3BC,OAAO,EAAEK,IAAI,CAACL,OAAQ;UACtBgC,YAAY,EAAE3B,IAAI,CAAC2B,YAAa;UAChCnB,IAAI,EAAEU,IAAI,CAACU,KAAM;UACjB1B,KAAK,EAAEF,IAAI,CAACE,KAAM;UAClB2B,OAAO,EAAE7B,IAAI,CAAC6B,OAAAA;AAAQ,SACtB,CACH,CAAA;AAAA,OACE,CAEL,EAACjC,WAAW,iBACVoB,GAAA,CAACK,IAAI,EAAA;AACH7B,QAAAA,EAAE,EAAC,MAAM;QACT+B,IAAI,EAAEC,UAAU,CAACM,YAAa;AAC9BpC,QAAAA,SAAS,EAAE,CAA8BI,2BAAAA,EAAAA,IAAI,GAAG,yBAAyB,GAAG,8BAA8B,CAAG,CAAA;AAAAiB,QAAAA,QAAA,EAE5GnB,WAAAA;AAAW,OACR,CACP,EACAL,MAAM,iBAAIyB,GAAA,CAACe,MAAM,EAAA;AAACxC,QAAAA,MAAM,EAAEA,MAAO;AAACG,QAAAA,SAAS,EAAC,oBAAA;AAAoB,QAAG,CAAA;AAAA,KACjE,CACL,EAACM,IAAI,iBACHgB,GAAA,CAACU,IAAI,EAAA;MACH,YAAY1B,EAAAA,IAAI,CAAC,YAAY,CAAE;AAC/BN,MAAAA,SAAS,EAAC,+CAA+C;MACzDC,OAAO,EAAEK,IAAI,CAACL,OAAQ;MACtBgC,YAAY,EAAE3B,IAAI,CAAC2B,YAAa;MAChCnB,IAAI,EAAEU,IAAI,CAACU,KAAM;MACjB1B,KAAK,EAAEF,IAAI,CAACE,KAAM;MAClB2B,OAAO,EAAE7B,IAAI,CAAC6B,OAAAA;AAAQ,KACtB,CACH,CAAA;AAAA,GACM,CAAC,CAAA;AAEd;;;;"}

package/build/switch/Switch.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var clsx = require('clsx');
 var contexts = require('../inputs/contexts.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -50,5 +52,5 @@ const Switch = props => {
   });
 };
 
-module.exports = Switch;
+exports.default = Switch;
 //# sourceMappingURL=Switch.js.map

package/build/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGV,KAAK,CAAA;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC,kBAAA;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGV,KAAK,CAAA;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC,kBAAA;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/switchOption/SwitchOption.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var Option = require('../common/Option/Option.js');
 var Switch = require('../switch/Switch.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -42,9 +44,9 @@ const SwitchOption = ({
     }
     onChange(!checked);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Option, {
+  return /*#__PURE__*/jsxRuntime.jsx(Option.default, {
     ...sharedProps,
-    button: /*#__PURE__*/jsxRuntime.jsx(Switch, {
+    button: /*#__PURE__*/jsxRuntime.jsx(Switch.default, {
       id: id,
       checked: checked,
       disabled: disabled,
@@ -55,5 +57,5 @@ const SwitchOption = ({
   });
 };
 
-module.exports = SwitchOption;
+exports.default = SwitchOption;
 //# sourceMappingURL=SwitchOption.js.map

package/build/switchOption/SwitchOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.js","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n  checked?: boolean;\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n  id?: string;\n  media?: React.ReactNode;\n  onChange: (newValue: boolean) => void;\n  title: React.ReactNode;\n  'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n  if (event) {\n    event.stopPropagation();\n    event.preventDefault();\n    event.nativeEvent?.stopImmediatePropagation?.();\n  }\n};\n\nconst SwitchOption = ({\n  checked,\n  complex,\n  content,\n  disabled,\n  id,\n  media,\n  onChange,\n  title,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n  'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaCircle,\n    showMediaAtAllSizes,\n    isContainerAligned,\n  };\n  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n    stopPropagation(event);\n    if (disabled) {\n      return;\n    }\n\n    onChange(!checked);\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Switch\n          id={id}\n          checked={checked}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          onClick={toggle}\n        />\n      }\n      onClick={toggle}\n    />\n  );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","button","Switch","onClick"],"mappings":";;;;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE,CAAA;IACvBC,KAAK,CAACC,cAAc,EAAE,CAAA;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI,CAAA;AACjD,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA,kBAAAA;GACD,CAAA;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC,CAAA;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA,OAAA;AACF,KAAA;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC,CAAA;GACnB,CAAA;EAED,oBACEc,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,WAAW;IACfI,MAAM,eACJF,cAAA,CAACG,MAAM,EAAA;AACLb,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBO,MAAAA,OAAO,EAAEL,MAAAA;AAAO,KAEpB,CAAC;AACDK,IAAAA,OAAO,EAAEL,MAAAA;AAAO,GAChB,CAAA,CAAA;AAEN;;;;"}
+{"version":3,"file":"SwitchOption.js","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n  checked?: boolean;\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n  id?: string;\n  media?: React.ReactNode;\n  onChange: (newValue: boolean) => void;\n  title: React.ReactNode;\n  'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n  if (event) {\n    event.stopPropagation();\n    event.preventDefault();\n    event.nativeEvent?.stopImmediatePropagation?.();\n  }\n};\n\nconst SwitchOption = ({\n  checked,\n  complex,\n  content,\n  disabled,\n  id,\n  media,\n  onChange,\n  title,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n  'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaCircle,\n    showMediaAtAllSizes,\n    isContainerAligned,\n  };\n  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n    stopPropagation(event);\n    if (disabled) {\n      return;\n    }\n\n    onChange(!checked);\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Switch\n          id={id}\n          checked={checked}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          onClick={toggle}\n        />\n      }\n      onClick={toggle}\n    />\n  );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","button","Switch","onClick"],"mappings":";;;;;;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE,CAAA;IACvBC,KAAK,CAACC,cAAc,EAAE,CAAA;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI,CAAA;AACjD,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA,kBAAAA;GACD,CAAA;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC,CAAA;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA,OAAA;AACF,KAAA;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC,CAAA;GACnB,CAAA;EAED,oBACEc,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,WAAW;IACfI,MAAM,eACJF,cAAA,CAACG,cAAM,EAAA;AACLb,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBO,MAAAA,OAAO,EAAEL,MAAAA;AAAO,KAEpB,CAAC;AACDK,IAAAA,OAAO,EAAEL,MAAAA;AAAO,GAChB,CAAA,CAAA;AAEN;;;;"}

package/build/table/Table.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var reactIntl = require('react-intl');
 var TableCell = require('./TableCell.js');
 var TableHeader = require('./TableHeader.js');
@@ -56,9 +58,9 @@ const Table = ({
   };
   const getTableContent = () => {
     if (loading) {
-      return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
-        children: /*#__PURE__*/jsxRuntime.jsx(TableCell, {
-          children: /*#__PURE__*/jsxRuntime.jsx(Loader, {
+      return /*#__PURE__*/jsxRuntime.jsx(TableRow.default, {
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCell.default, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Loader.default, {
             "data-testid": "np-table-loader"
           })
         })
@@ -66,25 +68,25 @@ const Table = ({
     }
     // Shows the `emptyData` message when there is no data to display
     if (!data?.rows?.length) {
-      return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
-        children: /*#__PURE__*/jsxRuntime.jsx(TableCell, {
+      return /*#__PURE__*/jsxRuntime.jsx(TableRow.default, {
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCell.default, {
           colSpan: data?.headers?.length,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "np-table-empty-data",
             "data-testid": "np-table-empty-data",
-            children: [/*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
               sentiment: sentiment.Sentiment.WARNING,
               size: size.Size.MEDIUM
-            }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+            }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
               type: "body-default-bold",
-              children: formatMessage(Table_messages.emptyData)
+              children: formatMessage(Table_messages.default.emptyData)
             })]
           })
         })
       });
     }
     return data?.rows?.map((rowData, rowIndex) => {
-      return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+      return /*#__PURE__*/jsxRuntime.jsx(TableRow.default, {
         rowData: rowData,
         hasSeparator: data?.rows?.length ? data.rows.length - 1 !== rowIndex : false,
         onRowClick: data?.onRowClick
@@ -98,7 +100,7 @@ const Table = ({
       type: sentiment.Sentiment.NEGATIVE,
       action: {
         href: error?.action?.href ?? '/',
-        text: error?.action?.text ?? formatMessage(Table_messages.refreshPage)
+        text: error?.action?.text ?? formatMessage(Table_messages.default.refreshPage)
       },
       "data-testid": "np-table-error"
     });
@@ -107,7 +109,7 @@ const Table = ({
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       "aria-live": "polite",
       className: "sr-only",
-      children: formatMessage(Table_messages[loading ? 'loading' : 'loaded'])
+      children: formatMessage(Table_messages.default[loading ? 'loading' : 'loaded'])
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       role: loading ? 'presentation' : 'region',
       "aria-labelledby": ariaLabelledBy,
@@ -115,9 +117,7 @@ const Table = ({
         'np-theme-personal': theme === 'bright-green',
         'np-table-outer-container--center': !fullWidth,
         'np-table-outer-container--full-width': fullWidth
-      })
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
+      }),
       tabIndex: 0,
       "data-testid": "np-table-outer-container",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -132,9 +132,9 @@ const Table = ({
             children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
               "aria-hidden": isEmptyHeader,
               children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
-                children: [isEmptyHeader ? /*#__PURE__*/jsxRuntime.jsx(TableHeader, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
+                children: [isEmptyHeader ? /*#__PURE__*/jsxRuntime.jsx(TableHeader.default, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsxRuntime.jsx(TableHeader.default, {
                   ...headerItem
-                }, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
+                }, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsxRuntime.jsx(TableHeader.default, {
                   isActionHeader: true
                 })]
               })
@@ -162,5 +162,5 @@ const Table = ({
   });
 };
 
-module.exports = Table;
+exports.default = Table;
 //# sourceMappingURL=Table.js.map