@transferwise/components 46.105.0 → 46.105.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/build/header/Header.js.map +1 -1
  2. package/build/header/Header.mjs.map +1 -1
  3. package/build/main.css +0 -8
  4. package/build/styles/listItem/ListItem.css +0 -8
  5. package/build/styles/listItem/ListItem.grid.css +0 -8
  6. package/build/styles/main.css +0 -8
  7. package/build/types/header/Header.d.ts +2 -2
  8. package/build/types/header/Header.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/header/Header.tsx +1 -1
  11. package/src/listItem/ListItem.css +0 -8
  12. package/src/listItem/ListItem.grid.css +0 -8
  13. package/src/listItem/ListItem.grid.less +0 -8
  14. package/src/main.css +0 -8
package/build/header/Header.js.map CHANGED
@@ -1 +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?: () => 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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"}
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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"}
package/build/header/Header.mjs.map CHANGED
@@ -1 +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?: () => 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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"}
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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"}
package/build/main.css CHANGED
@@ -2746,10 +2746,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2746
2746
  -o-object-position: bottom left;
2747
2747
  object-position: bottom left;
2748
2748
  }
2749
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2750
- margin-bottom: 12px;
2751
- margin-bottom: var(--size-12);
2752
- }
2753
2749
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2754
2750
  grid-template-columns: 1fr auto;
2755
2751
  grid-template-rows: auto auto auto auto;
@@ -2786,10 +2782,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2786
2782
  grid-template-columns: 1fr;
2787
2783
  grid-template-areas: "media" "body" "control";
2788
2784
  }
2789
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
2790
- margin-bottom: 12px;
2791
- margin-bottom: var(--size-12);
2792
- }
2793
2785
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2794
2786
  grid-template-columns: auto auto;
2795
2787
  grid-template-rows: auto auto auto auto;
package/build/styles/listItem/ListItem.css CHANGED
@@ -102,10 +102,6 @@
102
102
  -o-object-position: bottom left;
103
103
  object-position: bottom left;
104
104
  }
105
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
106
- margin-bottom: 12px;
107
- margin-bottom: var(--size-12);
108
- }
109
105
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
110
106
  grid-template-columns: 1fr auto;
111
107
  grid-template-rows: auto auto auto auto;
@@ -142,10 +138,6 @@
142
138
  grid-template-columns: 1fr;
143
139
  grid-template-areas: "media" "body" "control";
144
140
  }
145
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
146
- margin-bottom: 12px;
147
- margin-bottom: var(--size-12);
148
- }
149
141
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
150
142
  grid-template-columns: auto auto;
151
143
  grid-template-rows: auto auto auto auto;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -102,10 +102,6 @@
102
102
  -o-object-position: bottom left;
103
103
  object-position: bottom left;
104
104
  }
105
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
106
- margin-bottom: 12px;
107
- margin-bottom: var(--size-12);
108
- }
109
105
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
110
106
  grid-template-columns: 1fr auto;
111
107
  grid-template-rows: auto auto auto auto;
@@ -142,10 +138,6 @@
142
138
  grid-template-columns: 1fr;
143
139
  grid-template-areas: "media" "body" "control";
144
140
  }
145
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
146
- margin-bottom: 12px;
147
- margin-bottom: var(--size-12);
148
- }
149
141
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
150
142
  grid-template-columns: auto auto;
151
143
  grid-template-rows: auto auto auto auto;
package/build/styles/main.css CHANGED
@@ -2746,10 +2746,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2746
2746
  -o-object-position: bottom left;
2747
2747
  object-position: bottom left;
2748
2748
  }
2749
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2750
- margin-bottom: 12px;
2751
- margin-bottom: var(--size-12);
2752
- }
2753
2749
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2754
2750
  grid-template-columns: 1fr auto;
2755
2751
  grid-template-rows: auto auto auto auto;
@@ -2786,10 +2782,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2786
2782
  grid-template-columns: 1fr;
2787
2783
  grid-template-areas: "media" "body" "control";
2788
2784
  }
2789
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
2790
- margin-bottom: 12px;
2791
- margin-bottom: var(--size-12);
2792
- }
2793
2785
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2794
2786
  grid-template-columns: auto auto;
2795
2787
  grid-template-rows: auto auto auto auto;
package/build/types/header/Header.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { AriaLabelProperty, CommonProps, Heading, LinkProps } from '../common';
2
- import { FunctionComponent } from 'react';
2
+ import React, { FunctionComponent } from 'react';
3
3
  type ActionProps = AriaLabelProperty & {
4
4
  text: string;
5
- onClick?: () => void;
5
+ onClick?: (event: React.MouseEvent) => void;
6
6
  };
7
7
  type ButtonActionProps = ActionProps;
8
8
  type LinkActionProps = ActionProps & LinkProps;
package/build/types/header/Header.d.ts.map CHANGED
@@ -1 +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,OAAc,EAAqB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpE,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.105.0",
3
+ "version": "46.105.1",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/header/Header.tsx CHANGED
@@ -8,7 +8,7 @@ import React, { useEffect, useRef, FunctionComponent } from 'react';
8
8
 
9
9
  type ActionProps = AriaLabelProperty & {
10
10
  text: string;
11
- onClick?: () => void;
11
+ onClick?: (event: React.MouseEvent) => void;
12
12
  };
13
13
 
14
14
  type ButtonActionProps = ActionProps;
package/src/listItem/ListItem.css CHANGED
@@ -102,10 +102,6 @@
102
102
  -o-object-position: bottom left;
103
103
  object-position: bottom left;
104
104
  }
105
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
106
- margin-bottom: 12px;
107
- margin-bottom: var(--size-12);
108
- }
109
105
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
110
106
  grid-template-columns: 1fr auto;
111
107
  grid-template-rows: auto auto auto auto;
@@ -142,10 +138,6 @@
142
138
  grid-template-columns: 1fr;
143
139
  grid-template-areas: "media" "body" "control";
144
140
  }
145
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
146
- margin-bottom: 12px;
147
- margin-bottom: var(--size-12);
148
- }
149
141
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
150
142
  grid-template-columns: auto auto;
151
143
  grid-template-rows: auto auto auto auto;
package/src/listItem/ListItem.grid.css CHANGED
@@ -102,10 +102,6 @@
102
102
  -o-object-position: bottom left;
103
103
  object-position: bottom left;
104
104
  }
105
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
106
- margin-bottom: 12px;
107
- margin-bottom: var(--size-12);
108
- }
109
105
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
110
106
  grid-template-columns: 1fr auto;
111
107
  grid-template-rows: auto auto auto auto;
@@ -142,10 +138,6 @@
142
138
  grid-template-columns: 1fr;
143
139
  grid-template-areas: "media" "body" "control";
144
140
  }
145
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
146
- margin-bottom: 12px;
147
- margin-bottom: var(--size-12);
148
- }
149
141
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
150
142
  grid-template-columns: auto auto;
151
143
  grid-template-rows: auto auto auto auto;
package/src/listItem/ListItem.grid.less CHANGED
@@ -159,10 +159,6 @@
159
159
  }
160
160
 
161
161
  &.wds-list-item-hasMedia-hasControl {
162
- .wds-list-item-media {
163
- margin-bottom: var(--size-12);
164
- }
165
-
166
162
  &.wds-list-item-hasInfo-hasPrompt {
167
163
  grid-template-columns: 1fr auto;
168
164
  grid-template-rows: auto auto auto auto;
@@ -237,10 +233,6 @@
237
233
  }
238
234
 
239
235
  &.wds-list-item-hasMedia-noControl {
240
- .wds-list-item-media {
241
- margin-bottom: var(--size-12);
242
- }
243
-
244
236
  &.wds-list-item-hasInfo-hasPrompt {
245
237
  grid-template-columns: auto auto;
246
238
  grid-template-rows: auto auto auto auto;
package/src/main.css CHANGED
@@ -2746,10 +2746,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2746
2746
  -o-object-position: bottom left;
2747
2747
  object-position: bottom left;
2748
2748
  }
2749
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2750
- margin-bottom: 12px;
2751
- margin-bottom: var(--size-12);
2752
- }
2753
2749
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2754
2750
  grid-template-columns: 1fr auto;
2755
2751
  grid-template-rows: auto auto auto auto;
@@ -2786,10 +2782,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2786
2782
  grid-template-columns: 1fr;
2787
2783
  grid-template-areas: "media" "body" "control";
2788
2784
  }
2789
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
2790
- margin-bottom: 12px;
2791
- margin-bottom: var(--size-12);
2792
- }
2793
2785
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2794
2786
  grid-template-columns: auto auto;
2795
2787
  grid-template-rows: auto auto auto auto;