@transferwise/components 0.0.0-experimental-c239b44 → 0.0.0-experimental-e0993c8

package/build/header/Header.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
-var Button_resolver = require('../button/Button.resolver.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
@@ -24,78 +23,117 @@ require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 require('@transferwise/icons');
-require('react');
+var React = require('react');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Link = require('../link/Link.js');
+var Button_resolver = require('../button/Button.resolver.js');
 var Title = require('../title/Title.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']
-  };
-  if ('href' in action) {
-    return /*#__PURE__*/jsxRuntime.jsx(Link.default, {
-      href: action.href,
-      target: action.target,
-      onClick: action.onClick,
-      ...props,
-      children: action.text
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
-    className: "np-header__button",
+}, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    text,
+    onClick
+  } = action;
+  const inner = 'href' in action ? /*#__PURE__*/jsxRuntime.jsx(Link.default, {
+    ref: ref,
+    className: "np-header__action-link",
+    href: action.href,
+    target: action.target,
+    "aria-label": action['aria-label'],
+    onClick: action.onClick,
+    children: action.text
+  }) : /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
+    ref: ref,
+    className: "np-header__action-button",
     priority: "tertiary",
     size: "sm",
+    "aria-label": action['aria-label'],
     onClick: action.onClick,
-    ...props,
     children: action.text
   });
-};
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "np-header__action",
+    children: inner
+  });
+});
+HeaderAction.displayName = 'HeaderAction';
 /**
+ * @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'} [level='group'] - Optional prop to specify the level of the section header.
+ * @param {string} [className]
+ * @param {string} [testId]
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
- *
+ * @see {@link Header } for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
  */
-const Header = ({
-  id,
-  action,
+const Header = /*#__PURE__*/React__default.default.forwardRef(({
   as = 'h5',
-  title,
+  action,
   className,
-  role = undefined
-}) => {
+  testId,
+  title,
+  level = 'group',
+  ...props
+}, ref) => {
+  const internalRef = React.useRef(null);
+  const actionRef = React.useRef(null);
+  const levelTypography = level === 'group' ? typography.Typography.TITLE_GROUP : typography.Typography.TITLE_SUBSECTION;
+  const isLegendOrNoAction = !action || as === 'legend';
+  const headerClasses = clsx.clsx('np-header', className, {
+    'np-header--group': level === 'group',
+    'np-header__title': isLegendOrNoAction
+  });
+  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) {
     return /*#__PURE__*/jsxRuntime.jsx(Title.default, {
+      ref: internalRef,
       as: as,
-      id: id,
-      role: role,
-      type: typography.Typography.TITLE_GROUP,
-      className: clsx.clsx('np-header', 'np-header__title', className),
+      type: levelTypography,
+      ...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');
-  }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: clsx.clsx('np-header', className),
+    ...commonProps,
+    ...props,
+    ref: ref,
     children: [/*#__PURE__*/jsxRuntime.jsx(Title.default, {
       as: as,
-      type: typography.Typography.TITLE_GROUP,
-      id: id,
+      type: levelTypography,
       className: "np-header__title",
       children: title
     }), /*#__PURE__*/jsxRuntime.jsx(HeaderAction, {
+      ref: actionRef,
       action: action
     })]
   });
-};
+});
+Header.displayName = 'Header';
 
-exports.Header = Header;
 exports.default = 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';\nimport { HTMLAttributes } from 'react';\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' | 'header';\n  title: string;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;\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 = ({\n  id,\n  action,\n  as = 'h5',\n  title,\n  className,\n  role = undefined,\n}: HeaderProps) => {\n  if (!action) {\n    return (\n      <Title\n        as={as}\n        id={id}\n        role={role}\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} id={id} 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","id","as","title","role","undefined","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY;GAClC;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,YAAI,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;AAAI,KACR,CAAC;AAEX,EAAA;EAEA,oBACEN,cAAA,CAACO,uBAAM,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;AAAI,GACN,CAAC;AAEb,CAAC;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFd,MAAM;AACNe,EAAAA,EAAE,GAAG,IAAI;EACTC,KAAK;EACLN,SAAS;AACTO,EAAAA,IAAI,GAAGC;AAAS,CACJ,KAAI;EAChB,IAAI,CAAClB,MAAM,EAAE;IACX,oBACEE,cAAA,CAACiB,aAAK,EAAA;AACJJ,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,EAAE,EAAEA,EAAG;AACPG,MAAAA,IAAI,EAAEA,IAAK;MACXG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BZ,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEb,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS;AAAK,KACD,CAAC;AAEZ,EAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAS,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,EAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACiB,aAAK,EAAA;AAACJ,MAAAA,EAAE,EAAEA,EAAG;MAACK,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACR,MAAAA,EAAE,EAAEA,EAAG;AAACJ,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EAC9ES;AAAK,KACD,CACP,eAAAd,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV;;;;;"}
+{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\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  onClick?: () => void;\n};\n\ntype ButtonActionProps = ActionProps;\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 a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *   Additionally, the `action` prop is not supported when `as=\"legend\"`.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: string;\n\n  /** Optional prop to specify the level of the Header */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\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    const inner =\n      'href' in action ? (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          className=\"np-header__action-link\"\n          href={action.href}\n          target={action.target}\n          aria-label={action['aria-label']}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </Link>\n      ) : (\n        <Button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          className=\"np-header__action-button\"\n          priority=\"tertiary\"\n          size=\"sm\"\n          aria-label={action['aria-label']}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </Button>\n      );\n\n    return <div className=\"np-header__action\">{inner}</div>;\n  },\n);\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\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'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const actionRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const isLegendOrNoAction = !action || as === 'legend';\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n      'np-header__title': isLegendOrNoAction,\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) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction ref={actionRef} action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","inner","_jsx","Link","className","href","target","children","Button","priority","size","displayName","Header","as","testId","title","level","props","internalRef","useRef","actionRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","isLegendOrNoAction","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/header/Header.mjs

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import Button from '../button/Button.resolver.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
@@ -20,77 +19,113 @@ import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
 import '@transferwise/icons';
-import 'react';
+import React__default, { useRef, useEffect } from 'react';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Link from '../link/Link.mjs';
+import Button from '../button/Button.resolver.mjs';
 import Title from '../title/Title.mjs';
 
-const HeaderAction = ({
+const HeaderAction = /*#__PURE__*/React__default.forwardRef(({
   action
-}) => {
-  const props = {
-    'aria-label': action['aria-label']
-  };
-  if ('href' in action) {
-    return /*#__PURE__*/jsx(Link, {
-      href: action.href,
-      target: action.target,
-      onClick: action.onClick,
-      ...props,
-      children: action.text
-    });
-  }
-  return /*#__PURE__*/jsx(Button, {
-    className: "np-header__button",
+}, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    text,
+    onClick
+  } = action;
+  const inner = 'href' in action ? /*#__PURE__*/jsx(Link, {
+    ref: ref,
+    className: "np-header__action-link",
+    href: action.href,
+    target: action.target,
+    "aria-label": action['aria-label'],
+    onClick: action.onClick,
+    children: action.text
+  }) : /*#__PURE__*/jsx(Button, {
+    ref: ref,
+    className: "np-header__action-button",
     priority: "tertiary",
     size: "sm",
+    "aria-label": action['aria-label'],
     onClick: action.onClick,
-    ...props,
     children: action.text
   });
-};
+  return /*#__PURE__*/jsx("div", {
+    className: "np-header__action",
+    children: inner
+  });
+});
+HeaderAction.displayName = 'HeaderAction';
 /**
+ * @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'} [level='group'] - Optional prop to specify the level of the section header.
+ * @param {string} [className]
+ * @param {string} [testId]
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
- *
+ * @see {@link Header } for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
  */
-const Header = ({
-  id,
-  action,
+const Header = /*#__PURE__*/React__default.forwardRef(({
   as = 'h5',
-  title,
+  action,
   className,
-  role = undefined
-}) => {
+  testId,
+  title,
+  level = 'group',
+  ...props
+}, ref) => {
+  const internalRef = useRef(null);
+  const actionRef = useRef(null);
+  const levelTypography = level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;
+  const isLegendOrNoAction = !action || as === 'legend';
+  const headerClasses = clsx('np-header', className, {
+    'np-header--group': level === 'group',
+    'np-header__title': isLegendOrNoAction
+  });
+  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) {
     return /*#__PURE__*/jsx(Title, {
+      ref: internalRef,
       as: as,
-      id: id,
-      role: role,
-      type: Typography.TITLE_GROUP,
-      className: clsx('np-header', 'np-header__title', className),
+      type: levelTypography,
+      ...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');
-  }
   return /*#__PURE__*/jsxs("div", {
-    className: clsx('np-header', className),
+    ...commonProps,
+    ...props,
+    ref: ref,
     children: [/*#__PURE__*/jsx(Title, {
       as: as,
-      type: Typography.TITLE_GROUP,
-      id: id,
+      type: levelTypography,
       className: "np-header__title",
       children: title
     }), /*#__PURE__*/jsx(HeaderAction, {
+      ref: actionRef,
       action: action
     })]
   });
-};
+});
+Header.displayName = 'Header';
 
-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';\nimport { HTMLAttributes } from 'react';\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' | 'header';\n  title: string;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;\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 = ({\n  id,\n  action,\n  as = 'h5',\n  title,\n  className,\n  role = undefined,\n}: HeaderProps) => {\n  if (!action) {\n    return (\n      <Title\n        as={as}\n        id={id}\n        role={role}\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} id={id} 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","id","as","title","role","undefined","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY;GAClC;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;AAAI,KACR,CAAC;AAEX,EAAA;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;AAAI,GACN,CAAC;AAEb,CAAC;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFd,MAAM;AACNe,EAAAA,EAAE,GAAG,IAAI;EACTC,KAAK;EACLN,SAAS;AACTO,EAAAA,IAAI,GAAGC;AAAS,CACJ,KAAI;EAChB,IAAI,CAAClB,MAAM,EAAE;IACX,oBACEE,GAAA,CAACiB,KAAK,EAAA;AACJJ,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,EAAE,EAAEA,EAAG;AACPG,MAAAA,IAAI,EAAEA,IAAK;MACXG,IAAI,EAAEC,UAAU,CAACC,WAAY;MAC7BZ,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEb,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS;AAAK,KACD,CAAC;AAEZ,EAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAS,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,EAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,GAAA,CAACiB,KAAK,EAAA;AAACJ,MAAAA,EAAE,EAAEA,EAAG;MAACK,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACR,MAAAA,EAAE,EAAEA,EAAG;AAACJ,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EAC9ES;AAAK,KACD,CACP,eAAAd,GAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\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  onClick?: () => void;\n};\n\ntype ButtonActionProps = ActionProps;\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 a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *   Additionally, the `action` prop is not supported when `as=\"legend\"`.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: string;\n\n  /** Optional prop to specify the level of the Header */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\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    const inner =\n      'href' in action ? (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          className=\"np-header__action-link\"\n          href={action.href}\n          target={action.target}\n          aria-label={action['aria-label']}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </Link>\n      ) : (\n        <Button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          className=\"np-header__action-button\"\n          priority=\"tertiary\"\n          size=\"sm\"\n          aria-label={action['aria-label']}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </Button>\n      );\n\n    return <div className=\"np-header__action\">{inner}</div>;\n  },\n);\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\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'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const actionRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const isLegendOrNoAction = !action || as === 'legend';\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n      'np-header__title': isLegendOrNoAction,\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) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction ref={actionRef} action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","inner","_jsx","Link","className","href","target","children","Button","priority","size","displayName","Header","as","testId","title","level","props","internalRef","useRef","actionRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","isLegendOrNoAction","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/i18n/es.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
   "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
   "neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
   "neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
   "neptune.Upload.psButtonText": "Cancela",
   "neptune.Upload.psProcessingText": "Subiendo...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "O selecciona un archivo",
   "neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
   "neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
   "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
   "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
   "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",

package/build/i18n/es.json.js

@@ -49,6 +49,7 @@ var es = {
 	"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
 	"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
 	"neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
 	"neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
 	"neptune.Upload.psButtonText": "Cancela",
 	"neptune.Upload.psProcessingText": "Subiendo...",
@@ -56,6 +57,7 @@ var es = {
 	"neptune.Upload.usButtonText": "O selecciona un archivo",
 	"neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
 	"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
 	"neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
 	"neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
 	"neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",

package/build/i18n/es.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/es.json.mjs

@@ -45,6 +45,7 @@ var es = {
 	"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
 	"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
 	"neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
 	"neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
 	"neptune.Upload.psButtonText": "Cancela",
 	"neptune.Upload.psProcessingText": "Subiendo...",
@@ -52,6 +53,7 @@ var es = {
 	"neptune.Upload.usButtonText": "O selecciona un archivo",
 	"neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
 	"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
 	"neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
 	"neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
 	"neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",

package/build/i18n/es.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.js

@@ -200,7 +200,7 @@ exports.DropFade = DropFade.default;
 exports.Emphasis = Emphasis.default;
 exports.Field = Field.Field;
 exports.FlowNavigation = FlowNavigation.default;
-exports.Header = Header.Header;
+exports.Header = Header.default;
 Object.defineProperty(exports, "InfoPresentation", {
 	enumerable: true,
 	get: function () { return infoPresentations.InfoPresentation; }

package/build/index.mjs

@@ -45,7 +45,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 { InfoPresentation } from './info/infoPresentations.mjs';
 export { default as Info } from './info/Info.mjs';
 export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';

package/build/inputs/SelectInput.js

@@ -608,7 +608,7 @@ function SelectInputGroupItemView({
   needle
 }) {
   const headerId = React.useId();
-  const header = /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
+  const header = /*#__PURE__*/jsxRuntime.jsx(Header.default, {
     as: "header",
     role: "none",
     id: headerId,