@transferwise/components 46.160.8 → 46.161.1

package/build/Tag/Tag.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var clsx = require('clsx');
+var componentsTheming = require('@wise/components-theming');
+var SentimentSurface = require('../SentimentSurface/SentimentSurface.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Tag = /*#__PURE__*/React.forwardRef(function Tag({
+  label,
+  sentiment = 'neutral',
+  size = 'small',
+  emphasis = 'base',
+  overMedia = false,
+  className,
+  id,
+  'data-testid': dataTestId
+}, ref) {
+  const {
+    theme,
+    screenMode
+  } = componentsTheming.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+    theme: theme,
+    screenMode: overMedia ? 'dark' : screenMode,
+    className: "wds-tag-theme",
+    children: /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default
+    // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
+    , {
+      ref: ref,
+      as: "span",
+      sentiment: sentiment,
+      emphasis: overMedia ? 'elevated' : emphasis,
+      id: id,
+      "data-testid": dataTestId,
+      className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
+      children: label
+    })
+  });
+});
+
+exports.default = Tag;
+//# sourceMappingURL=Tag.js.map

package/build/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  {\n    label,\n    sentiment = 'neutral',\n    size = 'small',\n    emphasis = 'base',\n    overMedia = false,\n    className,\n    id,\n    'data-testid': dataTestId,\n  },\n  ref,\n) {\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      screenMode={overMedia ? 'dark' : screenMode}\n      className=\"wds-tag-theme\"\n    >\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        as=\"span\"\n        sentiment={sentiment}\n        emphasis={overMedia ? 'elevated' : emphasis}\n        id={id}\n        data-testid={dataTestId}\n        className={clsx(\n          'wds-tag',\n          `wds-tag--${size}`,\n          `wds-tag--${sentiment}`,\n          'np-text-body-default-bold',\n          className,\n        )}\n      >\n        {label}\n      </SentimentSurface>\n    </ThemeProvider>\n  );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,cAAA,CAACC,+BAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,cAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,2BAA2B,EAC3BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;;;"}

package/build/Tag/Tag.mjs

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { useTheme, ThemeProvider } from '@wise/components-theming';
+import SentimentSurface from '../SentimentSurface/SentimentSurface.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Tag = /*#__PURE__*/forwardRef(function Tag({
+  label,
+  sentiment = 'neutral',
+  size = 'small',
+  emphasis = 'base',
+  overMedia = false,
+  className,
+  id,
+  'data-testid': dataTestId
+}, ref) {
+  const {
+    theme,
+    screenMode
+  } = useTheme();
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: theme,
+    screenMode: overMedia ? 'dark' : screenMode,
+    className: "wds-tag-theme",
+    children: /*#__PURE__*/jsx(SentimentSurface
+    // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
+    , {
+      ref: ref,
+      as: "span",
+      sentiment: sentiment,
+      emphasis: overMedia ? 'elevated' : emphasis,
+      id: id,
+      "data-testid": dataTestId,
+      className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
+      children: label
+    })
+  });
+});
+
+export { Tag as default };
+//# sourceMappingURL=Tag.mjs.map

package/build/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  {\n    label,\n    sentiment = 'neutral',\n    size = 'small',\n    emphasis = 'base',\n    overMedia = false,\n    className,\n    id,\n    'data-testid': dataTestId,\n  },\n  ref,\n) {\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      screenMode={overMedia ? 'dark' : screenMode}\n      className=\"wds-tag-theme\"\n    >\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        as=\"span\"\n        sentiment={sentiment}\n        emphasis={overMedia ? 'elevated' : emphasis}\n        id={id}\n        data-testid={dataTestId}\n        className={clsx(\n          'wds-tag',\n          `wds-tag--${size}`,\n          `wds-tag--${sentiment}`,\n          'np-text-body-default-bold',\n          className,\n        )}\n      >\n        {label}\n      </SentimentSurface>\n    </ThemeProvider>\n  );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,GAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,2BAA2B,EAC3BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;;;"}

package/build/index.js

@@ -114,6 +114,7 @@ var Summary = require('./_deprecated/Summary/Summary.js');
 var Switch = require('./Switch/Switch.js');
 var SwitchOption = require('./_deprecated/SwitchOption/SwitchOption.js');
 var Tabs = require('./Tabs/Tabs.js');
+var Tag = require('./Tag/Tag.js');
 var TextareaWithDisplayFormat = require('./TextareaWithDisplayFormat/TextareaWithDisplayFormat.js');
 var Title = require('./Title/Title.js');
 var Tile = require('./Tile/Tile.js');
@@ -284,6 +285,7 @@ exports.Summary = Summary.default;
 exports.Switch = Switch.default;
 exports.SwitchOption = SwitchOption.default;
 exports.Tabs = Tabs.default;
+exports.Tag = Tag.default;
 exports.TextareaWithDisplayFormat = TextareaWithDisplayFormat.default;
 exports.Title = Title.default;
 exports.Tile = Tile.default;

package/build/index.js.map

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

package/build/index.mjs

@@ -112,6 +112,7 @@ export { default as Summary } from './_deprecated/Summary/Summary.mjs';
 export { default as Switch } from './Switch/Switch.mjs';
 export { default as SwitchOption } from './_deprecated/SwitchOption/SwitchOption.mjs';
 export { default as Tabs } from './Tabs/Tabs.mjs';
+export { default as Tag } from './Tag/Tag.mjs';
 export { default as TextareaWithDisplayFormat } from './TextareaWithDisplayFormat/TextareaWithDisplayFormat.mjs';
 export { default as Title } from './Title/Title.mjs';
 export { default as Tile } from './Tile/Tile.mjs';

package/build/index.mjs.map

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

package/build/main.css

@@ -2627,26 +2627,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -2831,7 +2811,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -2847,18 +2826,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
@@ -27387,6 +27356,36 @@ button.np-link {
   margin-inline-end: 12px;
   margin-inline-end: var(--size-12);
 }
+.wds-tag {
+  display: inline-block;
+  max-inline-size: 240px;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+}
+.wds-tag--small {
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+  padding-block: 1px;
+  padding-inline: 4px;
+  padding-inline: var(--size-4);
+}
+.wds-tag--large {
+  border-radius: 8px;
+  padding-block: 1px;
+  padding-inline: 6px;
+}
+.wds-tag.wds-tag--proposition {
+  color: var(--color-sentiment-interactive-primary);
+}
+.wds-tag-theme {
+  display: contents;
+}
 .np-tile {
   min-inline-size: 120px;
   border-radius: 10px;

package/build/styles/Tag/Tag.css

@@ -0,0 +1,30 @@
+.wds-tag {
+  display: inline-block;
+  max-inline-size: 240px;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+}
+.wds-tag--small {
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+  padding-block: 1px;
+  padding-inline: 4px;
+  padding-inline: var(--size-4);
+}
+.wds-tag--large {
+  border-radius: 8px;
+  padding-block: 1px;
+  padding-inline: 6px;
+}
+.wds-tag.wds-tag--proposition {
+  color: var(--color-sentiment-interactive-primary);
+}
+.wds-tag-theme {
+  display: contents;
+}

package/build/styles/css/neptune-core.css

@@ -55,26 +55,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -259,7 +239,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -275,18 +254,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;

package/build/styles/css/neptune.css

@@ -2032,26 +2032,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -2236,7 +2216,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -2252,18 +2231,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;

package/build/styles/main.css

@@ -2627,26 +2627,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -2831,7 +2811,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -2847,18 +2826,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
@@ -27387,6 +27356,36 @@ button.np-link {
   margin-inline-end: 12px;
   margin-inline-end: var(--size-12);
 }
+.wds-tag {
+  display: inline-block;
+  max-inline-size: 240px;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+}
+.wds-tag--small {
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+  padding-block: 1px;
+  padding-inline: 4px;
+  padding-inline: var(--size-4);
+}
+.wds-tag--large {
+  border-radius: 8px;
+  padding-block: 1px;
+  padding-inline: 6px;
+}
+.wds-tag.wds-tag--proposition {
+  color: var(--color-sentiment-interactive-primary);
+}
+.wds-tag-theme {
+  display: contents;
+}
 .np-tile {
   min-inline-size: 120px;
   border-radius: 10px;

package/build/styles/styles/less/neptune-core.css

@@ -55,26 +55,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -259,7 +239,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -275,18 +254,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;

package/build/styles/styles/less/neptune.css

@@ -2032,26 +2032,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -2236,7 +2216,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -2252,18 +2231,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;

package/build/types/Tag/Tag.d.ts

@@ -0,0 +1,24 @@
+import { TagProps } from './Tag.types';
+/**
+ * Tag is a small, non-interactive label that categorises or highlights a piece of content.
+ *
+ * @param {string} label - The text of the tag, kept to a word or two.
+ * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).
+ * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).
+ * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
+ * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.
+ * @param {string} [className] - Additional CSS classes to apply.
+ * @param {string} [id] - Unique identifier for the component.
+ * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tag sentiment="success" label="Verified" />
+ * ```
+ *
+ * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}
+ */
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Tag;
+//# sourceMappingURL=Tag.d.ts.map

package/build/types/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,GAAG,sGAyCP,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/build/types/Tag/Tag.types.d.ts

@@ -0,0 +1,39 @@
+import type { Emphasis, Sentiment } from '../SentimentSurface';
+/**
+ * Sizes for the Tag component
+ */
+export type TagSize = 'small' | 'large';
+export interface TagProps {
+    /**
+     * The text of the tag, kept to a word or two
+     */
+    label: string;
+    /**
+     * The sentiment type that determines the colour scheme
+     * @default 'neutral'
+     */
+    sentiment?: Sentiment;
+    /**
+     * The size of the tag
+     * @default 'small'
+     */
+    size?: TagSize;
+    /**
+     * The emphasis level affecting background and text contrast
+     * @default 'base'
+     */
+    emphasis?: Emphasis;
+    /**
+     * If true, renders the tag for use over media such as a photo or a video, keeping the colours
+     * it uses in dark screen modes so that it stays legible over unpredictable artwork
+     * @default false
+     */
+    overMedia?: boolean;
+    className?: string;
+    id?: string;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
+    'data-testid'?: string;
+}
+//# sourceMappingURL=Tag.types.d.ts.map

package/build/types/Tag/Tag.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/build/types/Tag/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Tag';
+export type { TagProps, TagSize } from './Tag.types';
+//# sourceMappingURL=index.d.ts.map

package/build/types/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}