@transferwise/components 46.105.1 → 46.105.3

package/build/header/Header.js

@@ -69,10 +69,8 @@ const Header = /*#__PURE__*/React__default.default.forwardRef(({
 }, ref) => {
   const internalRef = 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
+    'np-header--group': level === 'group'
   });
   const commonProps = {
     className: headerClasses,

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 { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Button from '../button';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => 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   *\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  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\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 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 action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","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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"}
+{"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 Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => 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   *\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  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\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 levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\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 action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAMA,YAAY,gBAAGC,sBAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,cAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,OAAO,EAAER,MAAM,CAACQ,OAAQ;IAAAC,QAAA,EAEvBT,MAAM,CAACU;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFb,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCd,sBAAK,CAACC,UAAU,CAC7D,CACE;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEb,MAAM;EAAEI,SAAS;EAAEU,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EhB,GAAuE,KACrE;AACF,EAAA,MAAMiB,WAAW,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,qBAAU,CAACC,WAAW,GAAGD,qBAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAAC,WAAW,EAAErB,SAAS,EAAE;IACjD,kBAAkB,EAAEY,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBtB,IAAAA,SAAS,EAAEoB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACb,MAAM,EAAE;IACX,oBACEE,cAAA,CAACgC,aAAK,EAAA;AAACjC,MAAAA,GAAG,EAAEiB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,eAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEhB,IAAAA,GAAG,EAAEA,GAAiC;IAAAQ,QAAA,EAAA,cACrEP,cAAA,CAACgC,aAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAChB,MAAAA,SAAS,EAAC,kBAAkB;AAAAK,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAb,cAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHY,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}

package/build/header/Header.mjs

@@ -61,10 +61,8 @@ const Header = /*#__PURE__*/React__default.forwardRef(({
 }, ref) => {
   const internalRef = 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
+    'np-header--group': level === 'group'
   });
   const commonProps = {
     className: headerClasses,

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 { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Button from '../button';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => 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   *\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  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\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 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 action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","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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"}
+{"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 Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => 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   *\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  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\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 levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\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 action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAMA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,GAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,OAAO,EAAER,MAAM,CAACQ,OAAQ;IAAAC,QAAA,EAEvBT,MAAM,CAACU;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFb,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCd,cAAK,CAACC,UAAU,CAC7D,CACE;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEb,MAAM;EAAEI,SAAS;EAAEU,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EhB,GAAuE,KACrE;AACF,EAAA,MAAMiB,WAAW,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,UAAU,CAACC,WAAW,GAAGD,UAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAAC,WAAW,EAAErB,SAAS,EAAE;IACjD,kBAAkB,EAAEY,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBtB,IAAAA,SAAS,EAAEoB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACb,MAAM,EAAE;IACX,oBACEE,GAAA,CAACgC,KAAK,EAAA;AAACjC,MAAAA,GAAG,EAAEiB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,IAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEhB,IAAAA,GAAG,EAAEA,GAAiC;IAAAQ,QAAA,EAAA,cACrEP,GAAA,CAACgC,KAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAChB,MAAAA,SAAS,EAAC,kBAAkB;AAAAK,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAb,GAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHY,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}

package/build/i18n/id.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
   "neptune.Upload.csSuccessText": "Pengunggahan selesai!",
   "neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
   "neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
   "neptune.Upload.psButtonText": "Batalkan",
   "neptune.Upload.psProcessingText": "Mengunggah...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Atau pilih file",
   "neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
   "neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
   "neptune.UploadButton.allFileTypes": "Semua jenis file",
   "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
   "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

package/build/i18n/id.json.js

@@ -49,6 +49,7 @@ var id = {
 	"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
 	"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
 	"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
 	"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
 	"neptune.Upload.psButtonText": "Batalkan",
 	"neptune.Upload.psProcessingText": "Mengunggah...",
@@ -56,6 +57,7 @@ var id = {
 	"neptune.Upload.usButtonText": "Atau pilih file",
 	"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
 	"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
 	"neptune.UploadButton.allFileTypes": "Semua jenis file",
 	"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
 	"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

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

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

package/build/i18n/id.json.mjs

@@ -45,6 +45,7 @@ var id = {
 	"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
 	"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
 	"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
 	"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
 	"neptune.Upload.psButtonText": "Batalkan",
 	"neptune.Upload.psProcessingText": "Mengunggah...",
@@ -52,6 +53,7 @@ var id = {
 	"neptune.Upload.usButtonText": "Atau pilih file",
 	"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
 	"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
 	"neptune.UploadButton.allFileTypes": "Semua jenis file",
 	"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
 	"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

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

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

package/build/i18n/nl.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
   "neptune.Upload.csSuccessText": "Uploaden voltooid!",
   "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
   "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Of selecteer een bestand",
   "neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
   "neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
   "neptune.UploadButton.allFileTypes": "Alle bestandstypen",
   "neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

package/build/i18n/nl.json.js

@@ -49,6 +49,7 @@ var nl = {
 	"neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
 	"neptune.Upload.csSuccessText": "Uploaden voltooid!",
 	"neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
 	"neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
 	"neptune.Upload.psButtonText": "Annuleren",
 	"neptune.Upload.psProcessingText": "Uploaden...",
@@ -56,6 +57,7 @@ var nl = {
 	"neptune.Upload.usButtonText": "Of selecteer een bestand",
 	"neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
 	"neptune.UploadButton.allFileTypes": "Alle bestandstypen",
 	"neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

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

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

package/build/i18n/nl.json.mjs

@@ -45,6 +45,7 @@ var nl = {
 	"neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
 	"neptune.Upload.csSuccessText": "Uploaden voltooid!",
 	"neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
 	"neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
 	"neptune.Upload.psButtonText": "Annuleren",
 	"neptune.Upload.psProcessingText": "Uploaden...",
@@ -52,6 +53,7 @@ var nl = {
 	"neptune.Upload.usButtonText": "Of selecteer een bestand",
 	"neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
 	"neptune.UploadButton.allFileTypes": "Alle bestandstypen",
 	"neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

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

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

package/build/main.css

@@ -2454,10 +2454,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-.np-header__title {
+.np-header--group,
+.np-header--group .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 0;
 }
 .np-header__action {
   margin: 0;
@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;
@@ -3228,12 +3226,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline-offset: var(--ring-outline-offset);
   outline-offset: -1px;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
 .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
   background-color: transparent;
   background-color: initial;
@@ -3374,10 +3366,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
 }
 .wds-list-item .wds-list-item-spotlight__border {
   position: absolute;

package/build/styles/header/Header.css

@@ -20,10 +20,10 @@
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-.np-header__title {
+.np-header--group,
+.np-header--group .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 0;
 }
 .np-header__action {
   margin: 0;

package/build/styles/listItem/ListItem.css

@@ -522,8 +522,6 @@
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;
@@ -584,12 +582,6 @@
   outline-offset: var(--ring-outline-offset);
   outline-offset: -1px;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
 .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
   background-color: transparent;
   background-color: initial;
@@ -730,10 +722,10 @@
 }
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
 }
 .wds-list-item .wds-list-item-spotlight__border {
   position: absolute;

package/build/styles/main.css

@@ -2454,10 +2454,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-.np-header__title {
+.np-header--group,
+.np-header--group .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 0;
 }
 .np-header__action {
   margin: 0;
@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;
@@ -3228,12 +3226,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline-offset: var(--ring-outline-offset);
   outline-offset: -1px;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
 .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
   background-color: transparent;
   background-color: initial;
@@ -3374,10 +3366,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
 }
 .wds-list-item .wds-list-item-spotlight__border {
   position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,OAAO,KAAK,EAAE,EAAqB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpE,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AACrC,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEnC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IAEd,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA+C1C,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAG3F,OAAO,KAAK,EAAE,EAAqB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpE,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AACrC,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEnC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IAEd,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA6C1C,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/build/types/listItem/_stories/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAExB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAQxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}

package/package.json

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

package/src/header/Header.css

@@ -20,10 +20,10 @@
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-.np-header__title {
+.np-header--group,
+.np-header--group .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 0;
 }
 .np-header__action {
   margin: 0;

package/src/header/Header.less

@@ -11,11 +11,11 @@
   &--group {
     align-items: flex-end;
     border-bottom: 1px solid var(--color-border-neutral);
-  }
 
-  &__title {
-    color: var(--color-content-secondary);
-    margin: 0;
+    &,
+    .np-header__title{
+      color: var(--color-content-secondary);
+    }
   }
 
   &__action {

package/src/header/Header.story.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { HeaderProps } from './Header';
-import { storyConfig } from '../test-utils';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -28,41 +27,6 @@ const renderHeader = (args: HeaderProps) => {
   return <Header {...args} />;
 };
 
-/**
- * Helper to generate variants for `AllVariants` story.
- */
-const renderVariants = () => (
-  <div
-    className="header-variants"
-    style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-  >
-    {(['h1', 'h2', 'h3', 'legend'] as const).map((as) => (
-      <Header key={as} as={as} title={`Header as ${as}`} />
-    ))}
-    {(['section', 'group'] as const).map((level) => (
-      <Header key={level} level={level} title={`Header level ${level}`} />
-    ))}
-    <Header
-      as="h2"
-      title="Header with Action"
-      action={{
-        'aria-label': 'Action',
-        text: 'Action',
-        onClick: () => alert('Action clicked!'),
-      }}
-    />
-    <Header
-      as="h2"
-      title="Header with link"
-      action={{
-        'aria-label': 'Action',
-        text: 'Action',
-        href: 'https://wise.com',
-      }}
-    />
-  </div>
-);
-
 /**
  * The stories below document the `Header` component, which is used to structure content and convey hierarchy. <br />
  * For more details, refer to the [design documentation](https://wise.design/components/section-header).
@@ -86,7 +50,7 @@ const meta: Meta<typeof Header> = {
     as: {
       type: {
         name: 'enum',
-        value: ['h1', 'h2', 'h3', 'legend'],
+        value: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'],
       },
       table: {
         type: {
@@ -191,17 +155,3 @@ export const SectionLevel: Story = {
   },
   argTypes: hideControls(['action', 'as', 'className', 'title', 'testId']),
 };
-
-/**
- * Displays all variants of the `Header` component, including different levels, tags, and actions.
- */
-export const AllVariants = storyConfig(
-  {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
-    },
-    render: renderVariants,
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);

package/src/header/Header.tests.story.tsx

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import Header, { type HeaderProps } from './Header';
+import { storyConfig } from '../test-utils';
+
+const meta: Meta<typeof Header> = {
+  component: Header,
+  tags: ['!autodocs'],
+  title: 'Typography/Header/tests',
+};
+export default meta;
+type Story = StoryObj<HeaderProps>;
+
+const TestComponent = () => (
+  <div
+    className="p-a-4 text-xs-center font-weight-bold"
+    style={{
+      backgroundImage: `repeating-linear-gradient(
+            -45deg, var(--color-background-neutral), 
+            var(--color-background-neutral) 10px, 
+            transparent 10px, 
+            transparent 20px
+          )`,
+    }}
+  >
+    Placeholder component
+  </div>
+);
+
+const generateLevelStory = (level: HeaderProps['level'], withAction = false) => {
+  return {
+    render: () => {
+      return (
+        <>
+          {(['legend', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeaderProps['as'][]).map((tag) => {
+            const Wrapper = tag === 'legend' ? 'fieldset' : 'section';
+
+            return (
+              <Wrapper key={tag}>
+                <Header
+                  as={tag}
+                  level={level}
+                  title={`Showcasing ${level} level with tag ${tag}`}
+                  action={withAction ? { text: 'Action', href: '#target' } : undefined}
+                />
+                <TestComponent />
+              </Wrapper>
+            );
+          })}
+        </>
+      );
+    },
+  };
+};
+
+/**
+ * Helper to generate variants for `AllVariants` story.
+ */
+const renderVariants = () => (
+  <div
+    className="header-variants"
+    style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
+  >
+    {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'] as const).map((as) => (
+      <Header key={as} as={as} title={`Header as ${as}`} />
+    ))}
+    {(['section', 'group'] as const).map((level) => (
+      <Header key={level} level={level} title={`Header level ${level}`} />
+    ))}
+    <Header
+      as="h2"
+      title="Header with Action"
+      action={{
+        'aria-label': 'Action',
+        text: 'Action',
+        onClick: () => alert('Action clicked!'),
+      }}
+    />
+    <Header
+      as="h2"
+      title="Header with link"
+      action={{
+        'aria-label': 'Action',
+        text: 'Action',
+        href: 'https://wise.com',
+      }}
+    />
+  </div>
+);
+
+export const GroupTrailingSpace: Story = generateLevelStory('group');
+export const GroupTrailingSpaceWithAction: Story = generateLevelStory('group', true);
+export const SectionTrailingSpace: Story = generateLevelStory('section');
+export const SectionTrailingSpaceWithAction: Story = generateLevelStory('section', true);
+
+export const AllVariants = storyConfig(
+  {
+    parameters: {
+      padding: '0',
+    },
+    render: renderVariants,
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+);

package/src/header/Header.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
-import Button from '../button';
 import Link from '../link';
 import Title from '../title';
 import React, { useEffect, useRef, FunctionComponent } from 'react';
@@ -87,10 +86,8 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
     const internalRef = useRef<HTMLLegendElement>(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 = {

package/src/i18n/id.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
   "neptune.Upload.csSuccessText": "Pengunggahan selesai!",
   "neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
   "neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
   "neptune.Upload.psButtonText": "Batalkan",
   "neptune.Upload.psProcessingText": "Mengunggah...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Atau pilih file",
   "neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
   "neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
   "neptune.UploadButton.allFileTypes": "Semua jenis file",
   "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
   "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

package/src/i18n/nl.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
   "neptune.Upload.csSuccessText": "Uploaden voltooid!",
   "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
   "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Of selecteer een bestand",
   "neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
   "neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
   "neptune.UploadButton.allFileTypes": "Alle bestandstypen",
   "neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

package/src/listItem/ListItem.css

@@ -522,8 +522,6 @@
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;
@@ -584,12 +582,6 @@
   outline-offset: var(--ring-outline-offset);
   outline-offset: -1px;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
 .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
   background-color: transparent;
   background-color: initial;
@@ -730,10 +722,10 @@
 }
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
 }
 .wds-list-item .wds-list-item-spotlight__border {
   position: absolute;

package/src/listItem/ListItem.less

@@ -6,7 +6,6 @@
   list-style: none;
   width: 100%;
   border-radius: var(--radius-medium);
-  background-color: var(--color-background-screen);
   position: relative;
   padding: var(--size-12) 0;
   container-type: inline-size;
@@ -80,16 +79,6 @@
         outline-offset: -1px;
       }
 
-      &:not(.disabled, :disabled) {
-        &:hover {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
       &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
         &:hover {
           background-color: unset;
@@ -236,32 +225,36 @@
     }
   }
 
-
-
   &-spotlight {
       padding-left: var(--size-12);
       padding-right: var(--size-12);
 
       &-active {
           background-color: var(--color-background-neutral);
-          &:not(.disabled, :disabled):hover {
+          &:not(.disabled, :disabled) {
+            &:hover {
               background-color: var(--color-background-neutral-hover);
-          }
-          &:not(.disabled, :disabled):active {
+            }
+            &:active {
               background-color: var(--color-background-neutral-active);
+            }
           }
       }
 
       &-inactive {
-          background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-
-          &:not(.disabled, :disabled):hover {
-              background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-          }
-          &:not(.disabled, :disabled):active {
-              background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+        background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+
+          &:not(.disabled, :disabled) {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
+            }
           }
       }
+
+      
   }
 
   .wds-list-item-spotlight__border{

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -2,7 +2,15 @@ import { useState } from 'react';
 import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { InfoCircle, Documents } from '@transferwise/icons';
+import {
+  InfoCircle,
+  Documents,
+  Warning,
+  Home,
+  Globe,
+  People,
+  Link as LinkIcon,
+} from '@transferwise/icons';
 import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
 import Modal from '../../modal';
 import Link from '../../link';
@@ -23,7 +31,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/common scenarios',
+  title: 'Content/ListItem/Common Scenarios',
   tags: ['autodocs'],
   args: {
     title: lorem5,
@@ -226,3 +234,112 @@ export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
     );
   },
 });
+
+export const Summary: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#f8f9fa' },
+        { name: 'dark', value: '#343a40' },
+      ],
+    },
+  },
+  render: () => {
+    const listItems = (
+      <List>
+        <ListItem
+          title="System maintenance"
+          subtitle="Scheduled downtime notification"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Warning />
+            </ListItem.AvatarView>
+          }
+          control={
+            <ListItem.IconButton partiallyInteractive>
+              <InfoCircle />
+            </ListItem.IconButton>
+          }
+        />
+        <ListItem
+          title="One link, one QR code, many uses"
+          subtitle="Quick Pay is a unique link and QR code for your business to get paid online and in person."
+          media={
+            <ListItem.AvatarView size={32}>
+              <LinkIcon />
+            </ListItem.AvatarView>
+          }
+        />
+        <ListItem
+          title="Action required"
+          subtitle="Update your payment address"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Home />
+            </ListItem.AvatarView>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'Change Address', onClick: () => console.log('hello') }}
+            />
+          }
+        />
+        <ListItem
+          title="Action required"
+          subtitle="Update your payment address"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Home />
+            </ListItem.AvatarView>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'Change Address', onClick: () => console.log('hello') }}
+            />
+          }
+          control={
+            <ListItem.IconButton partiallyInteractive>
+              <InfoCircle />
+            </ListItem.IconButton>
+          }
+        />
+        <ListItem
+          title="Receive money from around the world"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Globe />
+            </ListItem.AvatarView>
+          }
+        />
+        <ListItem
+          title="Let customers pay in a currency they trust"
+          media={
+            <ListItem.AvatarView size={32}>
+              <People />
+            </ListItem.AvatarView>
+          }
+        />
+      </List>
+    );
+    return (
+      <>
+        <div style={{ padding: '24px', width: '450px' }}>{listItems}</div>
+        <div
+          style={{
+            padding: '24px',
+            width: '450px',
+            backgroundColor: 'var(--color-background-neutral)',
+          }}
+        >
+          {listItems}
+        </div>
+      </>
+    );
+  },
+};

package/src/listItem/_stories/ListItem.story.tsx

@@ -92,7 +92,7 @@ type PreviewStoryArgs = ListItemProps & {
 };
 
 const previewArgGroup = {
-  category: 'Preview options',
+  category: 'Storybook Preview options',
   type: {
     summary: undefined,
   },

package/src/listItem/_stories/helpers.tsx

@@ -38,9 +38,15 @@ export const storySourceWithoutNoise = (config: Story): Story => {
  * In order to make preview controls work correctly, we have to refresh the render
  * by swapping the `key`. This is a workaround for the Storybook's limitation.
  */
-export const withoutKey: Decorator = (Story, { args }) => (
-  <Story key={args?.disabled ? 'disabled' : 'enabled'} />
-);
+export const withoutKey: Decorator = (Story, { args }) => {
+  const key = [
+    args.previewInteractivity,
+    args?.disabled ? 'disabled' : 'enabled',
+    args?.inverted ? 'desc' : 'asc',
+  ].join('-');
+
+  return <Story key={key} />;
+};
 
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.

package/src/main.css

@@ -2454,10 +2454,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-.np-header__title {
+.np-header--group,
+.np-header--group .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 0;
 }
 .np-header__action {
   margin: 0;
@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;
@@ -3228,12 +3226,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline-offset: var(--ring-outline-offset);
   outline-offset: -1px;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
 .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
   background-color: transparent;
   background-color: initial;
@@ -3374,10 +3366,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
 }
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
 }
 .wds-list-item .wds-list-item-spotlight__border {
   position: absolute;