@transferwise/components 0.0.0-experimental-5f3c456 → 0.0.0-experimental-b2dc1ea

package/build/header/Header.js

@@ -1,74 +1,129 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var clsx = require('clsx');
-var Button = require('../button/Button.js');
 var Link = require('../link/Link.js');
+var Button = require('../button/Button.js');
 var Title = require('../title/Title.js');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../common/propsValues/typography.js');
 
-const HeaderAction = ({
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const HeaderAction = /*#__PURE__*/React__default.default.forwardRef(({
   action
-}) => {
-  const props = {
-    'aria-label': action['aria-label']
-  };
+}, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    text,
+    onClick
+  } = action;
   if ('href' in action) {
+    const {
+      href,
+      target,
+      onClick: linkOnClick
+    } = action;
     return /*#__PURE__*/jsxRuntime.jsx(Link, {
-      href: action.href,
-      target: action.target,
-      onClick: action.onClick,
-      ...props,
-      children: action.text
+      ref: ref,
+      href: href,
+      target: target,
+      "aria-label": ariaLabel,
+      onClick: linkOnClick,
+      children: text
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx(Button, {
+    ref: ref,
     className: "np-header__button",
     priority: "tertiary",
     size: "sm",
-    onClick: action.onClick,
-    ...props,
-    children: action.text
+    "aria-label": ariaLabel,
+    onClick: onClick,
+    children: text
   });
-};
+});
 /**
+ * Header component
+ *
+ * The header component is used to render a section header with an optional action button or link.
+ * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
+ * @component
+ * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
+ * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
+ * @param {string} title - Required prop to set the title of the section header.
+ * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.
+ * @param {string} [className] - Optional prop to specify classNames onto the Header.
+ * @param {string} [testId] - Optional prop to specify the ID used for testing.
  *
+ * @example
+ * // Example usage:
+ * import Header from './Header';
+ *
+ * function App() {
+ *   return (
+ *     <Header title="Header" />
+ *   );
+ * }
  */
-const Header = ({
-  action,
+const Header = /*#__PURE__*/React__default.default.forwardRef(({
   as = 'h5',
+  action,
+  className,
+  testId,
   title,
-  className
-}) => {
-  if (!action) {
+  variant = 'group',
+  ...props
+}, ref) => {
+  const internalRef = React.useRef(null);
+  const variantTypography = variant === 'section' ? typography.Typography.TITLE_SUBSECTION : typography.Typography.TITLE_GROUP;
+  const headerClasses = clsx.clsx('np-header', className, {
+    'np-header--section': variant === 'section',
+    'np-header__title': !action || as === 'legend'
+  });
+  const commonProps = {
+    className: headerClasses,
+    'data-testid': testId
+  };
+  React.useEffect(() => {
+    if (as === 'legend' && internalRef.current) {
+      const {
+        parentElement
+      } = internalRef.current;
+      if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+        console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
+      }
+    }
+  }, [as]);
+  if (!action || as === 'legend') {
     return /*#__PURE__*/jsxRuntime.jsx(Title, {
+      ref: internalRef,
       as: as,
-      type: typography.Typography.TITLE_GROUP,
-      className: clsx.clsx('np-header', 'np-header__title', className),
+      type: variantTypography,
+      ...commonProps,
+      ...props,
       children: title
     });
   }
-  if (as === 'legend') {
-    // eslint-disable-next-line no-console
-    console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
-  }
+  const actionRef = /*#__PURE__*/React__default.default.createRef();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: clsx.clsx('np-header', className),
+    ...commonProps,
+    ...props,
+    ref: ref,
     children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
       as: as,
-      type: typography.Typography.TITLE_GROUP,
+      type: variantTypography,
       className: "np-header__title",
       children: title
     }), /*#__PURE__*/jsxRuntime.jsx(HeaderAction, {
+      ref: actionRef,
       action: action
     })]
   });
-};
+});
 
-exports.Header = Header;
-exports.default = Header;
+module.exports = Header;
 //# sourceMappingURL=Header.js.map

package/build/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n  /**\n   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n  /**\n   * Override the heading element rendered for the title, useful to specify the semantics of your header.\n   *\n   * @default \"h5\"\n   */\n  as?: Heading | 'legend';\n  title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n  const props = {\n    'aria-label': action['aria-label'],\n  };\n\n  if ('href' in action) {\n    return (\n      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n        {action.text}\n      </Link>\n    );\n  }\n\n  return (\n    <Button\n      className=\"np-header__button\"\n      priority=\"tertiary\"\n      size=\"sm\"\n      onClick={action.onClick}\n      {...props}\n    >\n      {action.text}\n    </Button>\n  );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n  if (!action) {\n    return (\n      <Title\n        as={as}\n        type={Typography.TITLE_GROUP}\n        className={clsx('np-header', 'np-header__title', className)}\n      >\n        {title}\n      </Title>\n    );\n  }\n\n  if (as === 'legend') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Legends should be the first child in a fieldset, and this is not possible when including an action',\n    );\n  }\n\n  return (\n    <div className={clsx('np-header', className)}>\n      <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n        {title}\n      </Title>\n      <HeaderAction action={action} />\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,cAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,cAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;;"}
+{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Button from '../button';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of an `ActionButton`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /** Option prop to specify DOM render element of the title */\n  as?: Heading | 'legend';\n\n  /** Optional prop to specify classNames onto the Header */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Required prop to set the title of the Header. */\n  title: string;\n\n  /** Optional prop to specify the variant of the Header */\n  variant?: 'section' | 'group';\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef(\n  (\n    { action }: { action: ButtonActionProps | LinkActionProps },\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n  ) => {\n    const { 'aria-label': ariaLabel, text, onClick } = action;\n\n    if ('href' in action) {\n      const { href, target, onClick: linkOnClick } = action;\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          target={target}\n          aria-label={ariaLabel}\n          onClick={linkOnClick}\n        >\n          {text}\n        </Link>\n      );\n    }\n\n    return (\n      <Button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        className=\"np-header__button\"\n        priority=\"tertiary\"\n        size=\"sm\"\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {text}\n      </Button>\n    );\n  },\n);\n\n/**\n * Header component\n *\n * The header component is used to render a section header with an optional action button or link.\n * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.\n *\n * @component\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.\n * @param {string} [className] - Optional prop to specify classNames onto the Header.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n *\n * @example\n * // Example usage:\n * import Header from './Header';\n *\n * function App() {\n *   return (\n *     <Header title=\"Header\" />\n *   );\n * }\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, variant = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const variantTypography =\n      variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--section': variant === 'section',\n      'np-header__title': !action || as === 'legend',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action || as === 'legend') {\n      return (\n        <Title ref={internalRef} as={as} type={variantTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={variantTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction ref={actionRef} action={action} />\n      </div>\n    );\n  },\n);\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","href","target","linkOnClick","_jsx","Link","children","Button","className","priority","size","Header","as","testId","title","variant","props","internalRef","useRef","variantTypography","Typography","TITLE_SUBSECTION","TITLE_GROUP","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","actionRef","createRef","_jsxs"],"mappings":"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"}

package/build/header/Header.mjs

@@ -1,69 +1,123 @@
 import { clsx } from 'clsx';
-import Button from '../button/Button.mjs';
 import Link from '../link/Link.mjs';
+import Button from '../button/Button.mjs';
 import Title from '../title/Title.mjs';
+import React__default, { useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../common/propsValues/typography.mjs';
 
-const HeaderAction = ({
+const HeaderAction = /*#__PURE__*/React__default.forwardRef(({
   action
-}) => {
-  const props = {
-    'aria-label': action['aria-label']
-  };
+}, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    text,
+    onClick
+  } = action;
   if ('href' in action) {
+    const {
+      href,
+      target,
+      onClick: linkOnClick
+    } = action;
     return /*#__PURE__*/jsx(Link, {
-      href: action.href,
-      target: action.target,
-      onClick: action.onClick,
-      ...props,
-      children: action.text
+      ref: ref,
+      href: href,
+      target: target,
+      "aria-label": ariaLabel,
+      onClick: linkOnClick,
+      children: text
     });
   }
   return /*#__PURE__*/jsx(Button, {
+    ref: ref,
     className: "np-header__button",
     priority: "tertiary",
     size: "sm",
-    onClick: action.onClick,
-    ...props,
-    children: action.text
+    "aria-label": ariaLabel,
+    onClick: onClick,
+    children: text
   });
-};
+});
 /**
+ * Header component
+ *
+ * The header component is used to render a section header with an optional action button or link.
+ * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.
+ *
+ * @component
+ * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
+ * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
+ * @param {string} title - Required prop to set the title of the section header.
+ * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.
+ * @param {string} [className] - Optional prop to specify classNames onto the Header.
+ * @param {string} [testId] - Optional prop to specify the ID used for testing.
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
+ * @example
+ * // Example usage:
+ * import Header from './Header';
  *
+ * function App() {
+ *   return (
+ *     <Header title="Header" />
+ *   );
+ * }
  */
-const Header = ({
-  action,
+const Header = /*#__PURE__*/React__default.forwardRef(({
   as = 'h5',
+  action,
+  className,
+  testId,
   title,
-  className
-}) => {
-  if (!action) {
+  variant = 'group',
+  ...props
+}, ref) => {
+  const internalRef = useRef(null);
+  const variantTypography = variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
+  const headerClasses = clsx('np-header', className, {
+    'np-header--section': variant === 'section',
+    'np-header__title': !action || as === 'legend'
+  });
+  const commonProps = {
+    className: headerClasses,
+    'data-testid': testId
+  };
+  useEffect(() => {
+    if (as === 'legend' && internalRef.current) {
+      const {
+        parentElement
+      } = internalRef.current;
+      if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+        console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
+      }
+    }
+  }, [as]);
+  if (!action || as === 'legend') {
     return /*#__PURE__*/jsx(Title, {
+      ref: internalRef,
       as: as,
-      type: Typography.TITLE_GROUP,
-      className: clsx('np-header', 'np-header__title', className),
+      type: variantTypography,
+      ...commonProps,
+      ...props,
       children: title
     });
   }
-  if (as === 'legend') {
-    // eslint-disable-next-line no-console
-    console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
-  }
+  const actionRef = /*#__PURE__*/React__default.createRef();
   return /*#__PURE__*/jsxs("div", {
-    className: clsx('np-header', className),
+    ...commonProps,
+    ...props,
+    ref: ref,
     children: [/*#__PURE__*/jsx(Title, {
       as: as,
-      type: Typography.TITLE_GROUP,
+      type: variantTypography,
       className: "np-header__title",
       children: title
     }), /*#__PURE__*/jsx(HeaderAction, {
+      ref: actionRef,
       action: action
     })]
   });
-};
+});
 
-export { Header, Header as default };
+export { Header as default };
 //# sourceMappingURL=Header.mjs.map

package/build/header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n  /**\n   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n  /**\n   * Override the heading element rendered for the title, useful to specify the semantics of your header.\n   *\n   * @default \"h5\"\n   */\n  as?: Heading | 'legend';\n  title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n  const props = {\n    'aria-label': action['aria-label'],\n  };\n\n  if ('href' in action) {\n    return (\n      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n        {action.text}\n      </Link>\n    );\n  }\n\n  return (\n    <Button\n      className=\"np-header__button\"\n      priority=\"tertiary\"\n      size=\"sm\"\n      onClick={action.onClick}\n      {...props}\n    >\n      {action.text}\n    </Button>\n  );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n  if (!action) {\n    return (\n      <Title\n        as={as}\n        type={Typography.TITLE_GROUP}\n        className={clsx('np-header', 'np-header__title', className)}\n      >\n        {title}\n      </Title>\n    );\n  }\n\n  if (as === 'legend') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Legends should be the first child in a fieldset, and this is not possible when including an action',\n    );\n  }\n\n  return (\n    <div className={clsx('np-header', className)}>\n      <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n        {title}\n      </Title>\n      <HeaderAction action={action} />\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,GAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,GAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,GAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,UAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,GAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,GAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Button from '../button';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of an `ActionButton`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /** Option prop to specify DOM render element of the title */\n  as?: Heading | 'legend';\n\n  /** Optional prop to specify classNames onto the Header */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Required prop to set the title of the Header. */\n  title: string;\n\n  /** Optional prop to specify the variant of the Header */\n  variant?: 'section' | 'group';\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef(\n  (\n    { action }: { action: ButtonActionProps | LinkActionProps },\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n  ) => {\n    const { 'aria-label': ariaLabel, text, onClick } = action;\n\n    if ('href' in action) {\n      const { href, target, onClick: linkOnClick } = action;\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          target={target}\n          aria-label={ariaLabel}\n          onClick={linkOnClick}\n        >\n          {text}\n        </Link>\n      );\n    }\n\n    return (\n      <Button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        className=\"np-header__button\"\n        priority=\"tertiary\"\n        size=\"sm\"\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {text}\n      </Button>\n    );\n  },\n);\n\n/**\n * Header component\n *\n * The header component is used to render a section header with an optional action button or link.\n * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.\n *\n * @component\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.\n * @param {string} [className] - Optional prop to specify classNames onto the Header.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n *\n * @example\n * // Example usage:\n * import Header from './Header';\n *\n * function App() {\n *   return (\n *     <Header title=\"Header\" />\n *   );\n * }\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, variant = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const variantTypography =\n      variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--section': variant === 'section',\n      'np-header__title': !action || as === 'legend',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action || as === 'legend') {\n      return (\n        <Title ref={internalRef} as={as} type={variantTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={variantTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction ref={actionRef} action={action} />\n      </div>\n    );\n  },\n);\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","href","target","linkOnClick","_jsx","Link","children","Button","className","priority","size","Header","as","testId","title","variant","props","internalRef","useRef","variantTypography","Typography","TITLE_SUBSECTION","TITLE_GROUP","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","actionRef","createRef","_jsxs"],"mappings":"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"}

package/build/index.js

@@ -176,7 +176,7 @@ exports.DropFade = DropFade;
 exports.Emphasis = Emphasis;
 exports.Field = Field.Field;
 exports.FlowNavigation = FlowNavigation;
-exports.Header = Header.Header;
+exports.Header = Header;
 exports.Image = Image.default;
 Object.defineProperty(exports, "InfoPresentation", {
 	enumerable: true,

package/build/index.mjs

@@ -33,7 +33,7 @@ export { default as DropFade } from './dropFade/DropFade.mjs';
 export { default as Emphasis } from './emphasis/Emphasis.mjs';
 export { Field } from './field/Field.mjs';
 export { default as FlowNavigation } from './flowNavigation/FlowNavigation.mjs';
-export { Header } from './header/Header.mjs';
+export { default as Header } from './header/Header.mjs';
 export { default as Image } from './image/Image.mjs';
 export { InfoPresentation } from './info/infoPresentations.mjs';
 export { default as Info } from './info/Info.mjs';

package/build/link/Link.js

@@ -2,11 +2,12 @@
 
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
+var React = require('react');
 var reactIntl = require('react-intl');
 var Link_messages = require('./Link.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-const Link = ({
+const Link = /*#__PURE__*/React.forwardRef(({
   className,
   children,
   href,
@@ -15,12 +16,13 @@ const Link = ({
   'aria-label': ariaLabel,
   onClick,
   ...props
-}) => {
+}, ref) => {
   const isBlank = target === '_blank';
   const {
     formatMessage
   } = reactIntl.useIntl();
   return /*#__PURE__*/jsxRuntime.jsxs("a", {
+    ref: ref,
     href: href,
     target: target,
     className: clsx.clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
@@ -32,7 +34,7 @@ const Link = ({
       title: formatMessage(Link_messages.opensInNewTab)
     })]
   });
-};
+});
 
 module.exports = Link;
 //# sourceMappingURL=Link.js.map

package/build/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,SAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
+{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = forwardRef<HTMLAnchorElement, Props>(\n  (\n    { className, children, href, target, type, 'aria-label': ariaLabel, onClick, ...props }: Props,\n    ref,\n  ) => {\n    const isBlank = target === '_blank';\n\n    const { formatMessage } = useIntl();\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        target={target}\n        className={clsx(\n          'np-link',\n          type ? `np-text-${type}` : undefined,\n          'd-inline-flex',\n          className,\n        )}\n        aria-label={ariaLabel}\n        rel={isBlank ? 'noreferrer' : undefined}\n        onClick={onClick}\n        {...props}\n      >\n        {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n      </a>\n    );\n  },\n);\n\nexport default Link;\n"],"names":["Link","forwardRef","className","children","href","target","type","ariaLabel","onClick","props","ref","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,MAAM;EAAEC,IAAI;AAAE,EAAA,YAAY,EAAEC,SAAS;EAAEC,OAAO;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAC9FC,GAAG,KACD;AACF,EAAA,MAAMC,OAAO,GAAGN,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEO,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACEJ,IAAAA,GAAG,EAAEA,GAAI;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEa,SAAI,CACb,SAAS,EACTT,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGU,SAAS,EACpC,eAAe,EACfd,SAAS,CACT;AACF,IAAA,YAAA,EAAYK,SAAU;AACtBU,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCR,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACQ,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER,CAAC;;;;"}

package/build/link/Link.mjs

@@ -1,10 +1,11 @@
 import { NavigateAway } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import messages from './Link.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const Link = ({
+const Link = /*#__PURE__*/forwardRef(({
   className,
   children,
   href,
@@ -13,12 +14,13 @@ const Link = ({
   'aria-label': ariaLabel,
   onClick,
   ...props
-}) => {
+}, ref) => {
   const isBlank = target === '_blank';
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/jsxs("a", {
+    ref: ref,
     href: href,
     target: target,
     className: clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
@@ -30,7 +32,7 @@ const Link = ({
       title: formatMessage(messages.opensInNewTab)
     })]
   });
-};
+});
 
 export { Link as default };
 //# sourceMappingURL=Link.mjs.map

package/build/link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,IAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
+{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = forwardRef<HTMLAnchorElement, Props>(\n  (\n    { className, children, href, target, type, 'aria-label': ariaLabel, onClick, ...props }: Props,\n    ref,\n  ) => {\n    const isBlank = target === '_blank';\n\n    const { formatMessage } = useIntl();\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        target={target}\n        className={clsx(\n          'np-link',\n          type ? `np-text-${type}` : undefined,\n          'd-inline-flex',\n          className,\n        )}\n        aria-label={ariaLabel}\n        rel={isBlank ? 'noreferrer' : undefined}\n        onClick={onClick}\n        {...props}\n      >\n        {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n      </a>\n    );\n  },\n);\n\nexport default Link;\n"],"names":["Link","forwardRef","className","children","href","target","type","ariaLabel","onClick","props","ref","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;AAgBA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,MAAM;EAAEC,IAAI;AAAE,EAAA,YAAY,EAAEC,SAAS;EAAEC,OAAO;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAC9FC,GAAG,KACD;AACF,EAAA,MAAMC,OAAO,GAAGN,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEO,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACEJ,IAAAA,GAAG,EAAEA,GAAI;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEa,IAAI,CACb,SAAS,EACTT,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGU,SAAS,EACpC,eAAe,EACfd,SAAS,CACT;AACF,IAAA,YAAA,EAAYK,SAAU;AACtBU,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCR,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACQ,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER,CAAC;;;;"}

package/build/main.css

@@ -2242,6 +2242,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
+.np-header--section {
+  border-bottom: none;
+}
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);

package/build/selectOption/SelectOption.js

@@ -52,7 +52,7 @@ function SelectOption({
         className: clsx.clsx({
           'p-x-2 p-y-1': isLargeScreen
         }),
-        children: [optionsSection.title && /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
+        children: [optionsSection.title && /*#__PURE__*/jsxRuntime.jsx(Header, {
           title: optionsSection.title
         }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionsList, {
           children: optionsSection.options.map((option, index) => {

package/build/selectOption/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n  title?: HeaderProps['title'];\n  options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n  OptionProps,\n  'media' | 'title' | 'content' | 'disabled'\n> & {\n  value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n  actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n  onChange: (selected: SelectOptionValue<T>) => void;\n  selected?: SelectOptionValue<T>;\n  options: SelectOptiopsSection<T>[];\n  placeholder: SelectOptionPlaceholder;\n} & Omit<\n  OptionProps,\n  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n  selected = undefined,\n  options,\n  onChange,\n  placeholder,\n  disabled,\n  ...props\n}: SelectOptionProps<T>) {\n  const intl = useIntl();\n  const rootRef = useRef(null);\n  const [showOptions, setShowOptions] = useState(false);\n\n  const hasSelected = selected !== undefined;\n  const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n  const inputAttributes = useInputAttributes();\n  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n  function handleOnClick(showOptionsStatus: boolean) {\n    return () => {\n      setShowOptions(showOptionsStatus);\n    };\n  }\n\n  function handleOnChange(data: SelectOptionValue<T>) {\n    return () => {\n      setShowOptions(false);\n      onChange(data);\n    };\n  }\n\n  function getOptions(isLargeScreen = false) {\n    return (\n      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n        {options.map((optionsSection, index) => (\n          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n            {optionsSection.title && <Header title={optionsSection.title} />}\n            <NavigationOptionsList>\n              {optionsSection.options.map((option, index) => {\n                return (\n                  <NavigationOption\n                    key={index}\n                    isContainerAligned={!isLargeScreen}\n                    showMediaCircle\n                    showMediaAtAllSizes\n                    onClick={handleOnChange(option)}\n                    {...option}\n                  />\n                );\n              })}\n            </NavigationOptionsList>\n          </Section>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Option\n        ref={rootRef}\n        as=\"div\"\n        showMediaAtAllSizes\n        disabled={disabled}\n        decision={false}\n        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n        title={(hasSelected ? selected : placeholder).title}\n        content={(hasSelected ? selected : placeholder).content}\n        className={clsx(\n          'np-select-option',\n          'clickable',\n          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n          props.className,\n        )}\n        button={\n          <button\n            {...inputAttributes}\n            type=\"button\"\n            disabled={disabled}\n            aria-labelledby={ariaLabelledBy}\n            aria-haspopup=\"dialog\"\n            aria-expanded={showOptions}\n            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n            aria-label={hasSelected ? undefined : props['aria-label']}\n            onClick={handleOnClick(true)}\n          >\n            {hasSelected ? (\n              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n            ) : (\n              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n            )}\n          </button>\n        }\n      />\n      <ResponsivePanel\n        anchorWidth\n        altAxis\n        anchorRef={rootRef}\n        open={showOptions}\n        position={Position.BOTTOM}\n        onClose={handleOnClick(false)}\n      >\n        {getOptions(isLargeScreen)}\n      </ResponsivePanel>\n    </>\n  );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}
+{"version":3,"file":"SelectOption.js","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n  title?: HeaderProps['title'];\n  options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n  OptionProps,\n  'media' | 'title' | 'content' | 'disabled'\n> & {\n  value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n  actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n  onChange: (selected: SelectOptionValue<T>) => void;\n  selected?: SelectOptionValue<T>;\n  options: SelectOptiopsSection<T>[];\n  placeholder: SelectOptionPlaceholder;\n} & Omit<\n  OptionProps,\n  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n  selected = undefined,\n  options,\n  onChange,\n  placeholder,\n  disabled,\n  ...props\n}: SelectOptionProps<T>) {\n  const intl = useIntl();\n  const rootRef = useRef(null);\n  const [showOptions, setShowOptions] = useState(false);\n\n  const hasSelected = selected !== undefined;\n  const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n  const inputAttributes = useInputAttributes();\n  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n  function handleOnClick(showOptionsStatus: boolean) {\n    return () => {\n      setShowOptions(showOptionsStatus);\n    };\n  }\n\n  function handleOnChange(data: SelectOptionValue<T>) {\n    return () => {\n      setShowOptions(false);\n      onChange(data);\n    };\n  }\n\n  function getOptions(isLargeScreen = false) {\n    return (\n      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n        {options.map((optionsSection, index) => (\n          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n            {optionsSection.title && <Header title={optionsSection.title} />}\n            <NavigationOptionsList>\n              {optionsSection.options.map((option, index) => {\n                return (\n                  <NavigationOption\n                    key={index}\n                    isContainerAligned={!isLargeScreen}\n                    showMediaCircle\n                    showMediaAtAllSizes\n                    onClick={handleOnChange(option)}\n                    {...option}\n                  />\n                );\n              })}\n            </NavigationOptionsList>\n          </Section>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Option\n        ref={rootRef}\n        as=\"div\"\n        showMediaAtAllSizes\n        disabled={disabled}\n        decision={false}\n        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n        title={(hasSelected ? selected : placeholder).title}\n        content={(hasSelected ? selected : placeholder).content}\n        className={clsx(\n          'np-select-option',\n          'clickable',\n          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n          props.className,\n        )}\n        button={\n          <button\n            {...inputAttributes}\n            type=\"button\"\n            disabled={disabled}\n            aria-labelledby={ariaLabelledBy}\n            aria-haspopup=\"dialog\"\n            aria-expanded={showOptions}\n            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n            aria-label={hasSelected ? undefined : props['aria-label']}\n            onClick={handleOnClick(true)}\n          >\n            {hasSelected ? (\n              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n            ) : (\n              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n            )}\n          </button>\n        }\n      />\n      <ResponsivePanel\n        anchorWidth\n        altAxis\n        anchorRef={rootRef}\n        open={showOptions}\n        position={Position.BOTTOM}\n        onClose={handleOnClick(false)}\n      >\n        {getOptions(isLargeScreen)}\n      </ResponsivePanel>\n    </>\n  );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}

package/build/selectOption/SelectOption.mjs

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import { clsx } from 'clsx';
 import Option from '../common/Option/Option.mjs';
 import Section from '../section/Section.mjs';
-import { Header } from '../header/Header.mjs';
+import Header from '../header/Header.mjs';
 import NavigationOption from '../navigationOption/NavigationOption.mjs';
 import NavigationOptionList from '../navigationOptionsList/NavigationOptionsList.mjs';
 import { useInputAttributes } from '../inputs/contexts.mjs';