@transferwise/components 46.69.1 → 46.70.0

package/build/header/Header.js

@@ -2,9 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
-var ActionButton = require('../actionButton/ActionButton.js');
 var Button = require('../button/Button.js');
 var Link = require('../link/Link.js');
 var Title = require('../title/Title.js');
@@ -14,9 +12,6 @@ var typography = require('../common/propsValues/typography.js');
 const HeaderAction = ({
   action
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const props = {
     'aria-label': action['aria-label']
   };
@@ -29,17 +24,13 @@ const HeaderAction = ({
       children: action.text
     });
   }
-  return isModern ? /*#__PURE__*/jsxRuntime.jsx(Button, {
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
     className: "np-header__button",
     priority: "tertiary",
     size: "sm",
     onClick: action.onClick,
     ...props,
     children: action.text
-  }) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
-    onClick: action.onClick,
-    ...props,
-    children: action.text
   });
 };
 /**

package/build/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport ActionButton, { 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 { isModern } = useTheme();\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 isModern ? (\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    <ActionButton onClick={action.onClick} {...props}>\n      {action.text}\n    </ActionButton>\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","isModern","useTheme","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","ActionButton","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;EACnF,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAEH,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEI,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEN,MAAM,CAACM,IAAK;MAACC,MAAM,EAAEP,MAAM,CAACO,MAAO;MAACC,OAAO,EAAER,MAAM,CAACQ,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/ET,MAAM,CAACU,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOT,QAAQ,gBACbG,cAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAER,MAAM,CAACQ,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERT,MAAM,CAACU,IAAAA;AAAI,GACN,CAAC,gBAETN,cAAA,CAACW,YAAY,EAAA;IAACP,OAAO,EAAER,MAAM,CAACQ,OAAQ;AAAA,IAAA,GAAKL,KAAK;IAAAM,QAAA,EAC7CT,MAAM,CAACU,IAAAA;AAAI,GACA,CACf,CAAA;AACH,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMM,MAAM,GAAGA,CAAC;EAAEhB,MAAM;AAAEiB,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEN,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACZ,MAAM,EAAE;IACX,oBACEI,cAAA,CAACe,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BV,SAAS,EAAEW,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEX,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS,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;AAAKd,IAAAA,SAAS,EAAEW,SAAI,CAAC,WAAW,EAAEX,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACe,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACV,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtES,KAAAA;AAAK,KACD,CACP,eAAAd,cAAA,CAACL,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 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;;;;;"}

package/build/header/Header.mjs

@@ -1,6 +1,4 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import ActionButton from '../actionButton/ActionButton.mjs';
 import Button from '../button/Button.mjs';
 import Link from '../link/Link.mjs';
 import Title from '../title/Title.mjs';
@@ -10,9 +8,6 @@ import { Typography } from '../common/propsValues/typography.mjs';
 const HeaderAction = ({
   action
 }) => {
-  const {
-    isModern
-  } = useTheme();
   const props = {
     'aria-label': action['aria-label']
   };
@@ -25,17 +20,13 @@ const HeaderAction = ({
       children: action.text
     });
   }
-  return isModern ? /*#__PURE__*/jsx(Button, {
+  return /*#__PURE__*/jsx(Button, {
     className: "np-header__button",
     priority: "tertiary",
     size: "sm",
     onClick: action.onClick,
     ...props,
     children: action.text
-  }) : /*#__PURE__*/jsx(ActionButton, {
-    onClick: action.onClick,
-    ...props,
-    children: action.text
   });
 };
 /**

package/build/header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport ActionButton, { 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 { isModern } = useTheme();\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 isModern ? (\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    <ActionButton onClick={action.onClick} {...props}>\n      {action.text}\n    </ActionButton>\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","isModern","useTheme","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","ActionButton","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;EACnF,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAC/B,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAEH,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEI,GAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEN,MAAM,CAACM,IAAK;MAACC,MAAM,EAAEP,MAAM,CAACO,MAAO;MAACC,OAAO,EAAER,MAAM,CAACQ,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/ET,MAAM,CAACU,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOT,QAAQ,gBACbG,GAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAER,MAAM,CAACQ,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERT,MAAM,CAACU,IAAAA;AAAI,GACN,CAAC,gBAETN,GAAA,CAACW,YAAY,EAAA;IAACP,OAAO,EAAER,MAAM,CAACQ,OAAQ;AAAA,IAAA,GAAKL,KAAK;IAAAM,QAAA,EAC7CT,MAAM,CAACU,IAAAA;AAAI,GACA,CACf,CAAA;AACH,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMM,MAAM,GAAGA,CAAC;EAAEhB,MAAM;AAAEiB,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEN,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACZ,MAAM,EAAE;IACX,oBACEI,GAAA,CAACe,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,UAAU,CAACC,WAAY;MAC7BV,SAAS,EAAEW,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEX,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS,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;AAAKd,IAAAA,SAAS,EAAEW,IAAI,CAAC,WAAW,EAAEX,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,GAAA,CAACe,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACV,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtES,KAAAA;AAAK,KACD,CACP,eAAAd,GAAA,CAACL,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 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;;;;"}

package/build/main.css

@@ -2237,18 +2237,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
-}
-.np-header__title {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-theme-personal .np-header {
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-theme-personal .np-header__button {
+.np-header__title {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-header__button {
   margin-inline: calc(16px * -1);
   margin-inline: calc(var(--size-16) * -1);
   margin-bottom: calc(4px * -1);

package/build/section/Section.js

@@ -4,11 +4,12 @@ var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Section = ({
+  as: Element = 'div',
   children,
   className,
   withHorizontalPadding = false
 }) => {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx(Element, {
     className: clsx.clsx('np-section', className, {
       'np-section--with-horizontal-padding': withHorizontalPadding
     }),

package/build/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    withHorizontalPadding?: boolean;\n  }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {\n  return (\n    <div\n      className={clsx('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Section;\n"],"names":["Section","children","className","withHorizontalPadding","_jsx","clsx"],"mappings":";;;;;AAgBMA,MAAAA,OAAO,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;AAAEC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAAgB,KAAI;AACvF,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAEH,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Section.js","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    as?: 'div' | 'fieldset';\n    withHorizontalPadding?: boolean;\n  }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({\n  as: Element = 'div',\n  children,\n  className,\n  withHorizontalPadding = false,\n}: SectionProps) => {\n  return (\n    <Element\n      className={clsx('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Section;\n"],"names":["Section","as","Element","children","className","withHorizontalPadding","_jsx","clsx"],"mappings":";;;;;AAiBMA,MAAAA,OAAO,GAAGA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;EACRC,SAAS;AACTC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAChB,KAAI;EACjB,oBACEC,cAAA,CAACJ,OAAO,EAAA;AACNE,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAEH,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/section/Section.mjs

@@ -2,11 +2,12 @@ import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
 const Section = ({
+  as: Element = 'div',
   children,
   className,
   withHorizontalPadding = false
 }) => {
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx(Element, {
     className: clsx('np-section', className, {
       'np-section--with-horizontal-padding': withHorizontalPadding
     }),

package/build/section/Section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Section.mjs","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    withHorizontalPadding?: boolean;\n  }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {\n  return (\n    <div\n      className={clsx('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Section;\n"],"names":["Section","children","className","withHorizontalPadding","_jsx","clsx"],"mappings":";;;AAgBMA,MAAAA,OAAO,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;AAAEC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAAgB,KAAI;AACvF,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,IAAI,CAAC,YAAY,EAAEH,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Section.mjs","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    as?: 'div' | 'fieldset';\n    withHorizontalPadding?: boolean;\n  }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({\n  as: Element = 'div',\n  children,\n  className,\n  withHorizontalPadding = false,\n}: SectionProps) => {\n  return (\n    <Element\n      className={clsx('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Section;\n"],"names":["Section","as","Element","children","className","withHorizontalPadding","_jsx","clsx"],"mappings":";;;AAiBMA,MAAAA,OAAO,GAAGA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;EACRC,SAAS;AACTC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAChB,KAAI;EACjB,oBACEC,GAAA,CAACJ,OAAO,EAAA;AACNE,IAAAA,SAAS,EAAEG,IAAI,CAAC,YAAY,EAAEH,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/styles/header/Header.css

@@ -9,18 +9,16 @@
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
-}
-.np-header__title {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-theme-personal .np-header {
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-theme-personal .np-header__button {
+.np-header__title {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-header__button {
   margin-inline: calc(16px * -1);
   margin-inline: calc(var(--size-16) * -1);
   margin-bottom: calc(4px * -1);

package/build/styles/main.css

@@ -2237,18 +2237,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
-}
-.np-header__title {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-theme-personal .np-header {
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-theme-personal .np-header__button {
+.np-header__title {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-header__button {
   margin-inline: calc(16px * -1);
   margin-inline: calc(var(--size-16) * -1);
   margin-bottom: calc(4px * -1);

package/build/types/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAGA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiCF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCA4B1E,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCA4B1E,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/section/Section.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { CommonProps } from '../common';
 type SectionProps = PropsWithChildren<CommonProps & {
+    as?: 'div' | 'fieldset';
     withHorizontalPadding?: boolean;
 }>;
 /**
@@ -8,6 +9,6 @@ type SectionProps = PropsWithChildren<CommonProps & {
  * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
  *
  */
-declare const Section: ({ children, className, withHorizontalPadding }: SectionProps) => import("react").JSX.Element;
+declare const Section: ({ as: Element, children, className, withHorizontalPadding, }: SectionProps) => import("react").JSX.Element;
 export default Section;
 //# sourceMappingURL=Section.d.ts.map

package/build/types/section/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,YAAY,GAAG,iBAAiB,CACnC,WAAW,GAAG;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CACF,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,OAAO,mDAA4D,YAAY,gCAUpF,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,YAAY,GAAG,iBAAiB,CACnC,WAAW,GAAG;IACZ,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CACF,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,OAAO,iEAKV,YAAY,gCAUd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.69.1",
+  "version": "46.70.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/header/Header.css

@@ -9,18 +9,16 @@
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
-}
-.np-header__title {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-theme-personal .np-header {
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-theme-personal .np-header__button {
+.np-header__title {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-header__button {
   margin-inline: calc(16px * -1);
   margin-inline: calc(var(--size-16) * -1);
   margin-bottom: calc(4px * -1);

package/src/header/Header.less

@@ -11,12 +11,10 @@
     color: var(--color-content-secondary);
   }
 
-  .np-theme-personal & {
-    column-gap: var(--size-24);
+  column-gap: var(--size-24);
 
-    &__button {
-      margin-inline: calc(var(--size-16) * -1);
-      margin-bottom: calc(var(--size-4) * -1);
-    }
+  &__button {
+    margin-inline: calc(var(--size-16) * -1);
+    margin-bottom: calc(var(--size-4) * -1);
   }
 }

package/src/header/Header.tsx

@@ -1,7 +1,6 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 
-import ActionButton, { ActionButtonProps } from '../actionButton/ActionButton';
+import { ActionButtonProps } from '../actionButton/ActionButton';
 import Button from '../button';
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
 import Link from '../link';
@@ -30,7 +29,6 @@ export type HeaderProps = CommonProps & {
 };
 
 const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
-  const { isModern } = useTheme();
   const props = {
     'aria-label': action['aria-label'],
   };
@@ -43,7 +41,7 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
     );
   }
 
-  return isModern ? (
+  return (
     <Button
       className="np-header__button"
       priority="tertiary"
@@ -53,10 +51,6 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
     >
       {action.text}
     </Button>
-  ) : (
-    <ActionButton onClick={action.onClick} {...props}>
-      {action.text}
-    </ActionButton>
   );
 };
 

package/src/main.css

@@ -2237,18 +2237,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
-}
-.np-header__title {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-theme-personal .np-header {
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-theme-personal .np-header__button {
+.np-header__title {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-header__button {
   margin-inline: calc(16px * -1);
   margin-inline: calc(var(--size-16) * -1);
   margin-bottom: calc(4px * -1);

package/src/radioOption/RadioOption.story.tsx

@@ -3,7 +3,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
-import { Nudge, Title, Typography } from '..';
+import { Header, Nudge, Section, Title, Typography } from '..';
 
 import RadioOption, { RadioOptionProps } from './RadioOption';
 
@@ -50,11 +50,12 @@ export const Multiple = () => {
   const [selected, setSelected] = useState(0);
 
   return (
-    <>
+    <Section as="fieldset">
+      <Header as="legend" title="Test title" />
       <Template checked={selected === 0} onChange={() => setSelected(0)} />
       <Template checked={selected === 1} onChange={() => setSelected(1)} />
       <Template checked={selected === 2} onChange={() => setSelected(2)} />
-    </>
+    </Section>
   );
 };
 

package/src/section/Section.tsx

@@ -5,6 +5,7 @@ import { CommonProps } from '../common';
 
 type SectionProps = PropsWithChildren<
   CommonProps & {
+    as?: 'div' | 'fieldset';
     withHorizontalPadding?: boolean;
   }
 >;
@@ -14,15 +15,20 @@ type SectionProps = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
  *
  */
-const Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {
+const Section = ({
+  as: Element = 'div',
+  children,
+  className,
+  withHorizontalPadding = false,
+}: SectionProps) => {
   return (
-    <div
+    <Element
       className={clsx('np-section', className, {
         'np-section--with-horizontal-padding': withHorizontalPadding,
       })}
     >
       {children}
-    </div>
+    </Element>
   );
 };