@transferwise/components 0.0.0-experimental-feef95e → 0.0.0-experimental-1bb5459

package/build/SentimentSurface/SentimentSurface.js

@@ -12,6 +12,7 @@ const SentimentSurface = /*#__PURE__*/React.forwardRef(function SentimentSurface
   sentiment,
   emphasis = 'base',
   hasBaseStyles = true,
+  colourScheme,
   style,
   className,
   children,
@@ -31,7 +32,7 @@ const SentimentSurface = /*#__PURE__*/React.forwardRef(function SentimentSurface
     const isPlatform = theme.includes('platform');
     return isForestGreen || isDark && !isPlatform ? 'dark' : 'light';
   };
-  const classNames = clsx.clsx(closestBrandTheme, BASE_CLASS, `wds-sentiment-${sentiment}-${getThemeBrightness()}-${emphasis}`, hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`, className);
+  const classNames = clsx.clsx(closestBrandTheme, BASE_CLASS, `wds-sentiment-${sentiment}-${colourScheme ?? getThemeBrightness()}-${emphasis}`, hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`, className);
   const sentimentProps = {
     ref,
     id,

package/build/SentimentSurface/SentimentSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.js","sources":["../../src/SentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { useTheme } from '@wise/components-theming';\n\n/**\n * SentimentSurface is a polymorphic container component that exposes and, optionally, applies\n * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,\n * `warning`, `neutral`, `success`, `proposition`).\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [hasBaseStyles=true] - If true, sets the `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles 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 * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    hasBaseStyles = true,\n    style,\n    className,\n    children,\n    id,\n    'data-testid': dataTestId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const BASE_CLASS = 'wds-sentiment-surface';\n  const { className: closestBrandTheme, isScreenModeDark: isDark, theme } = useTheme();\n\n  const getThemeBrightness = () => {\n    const isForestGreen = theme.includes('forest-green');\n    const isPlatform = theme.includes('platform');\n\n    return isForestGreen || (isDark && !isPlatform) ? 'dark' : 'light';\n  };\n\n  const classNames = clsx(\n    closestBrandTheme,\n    BASE_CLASS,\n    `wds-sentiment-${sentiment}-${getThemeBrightness()}-${emphasis}`,\n    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,\n    className,\n  );\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': dataTestId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","hasBaseStyles","style","className","children","id","dataTestId","props","ref","Element","BASE_CLASS","closestBrandTheme","isScreenModeDark","isDark","theme","useTheme","getThemeBrightness","isForestGreen","includes","isPlatform","classNames","clsx","sentimentProps","_jsx","displayName"],"mappings":";;;;;;;;;AAqCA,MAAMA,gBAAgB,gBAA8BC,gBAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,EAAE;AACF,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGX,EAAE,IAAI,KAAK;EAC3B,MAAMY,UAAU,GAAG,uBAAuB;EAC1C,MAAM;AAAEP,IAAAA,SAAS,EAAEQ,iBAAiB;AAAEC,IAAAA,gBAAgB,EAAEC,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAEpF,MAAMC,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,MAAMC,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAC,cAAc,CAAC;AACpD,IAAA,MAAMC,UAAU,GAAGL,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC;IAE7C,OAAOD,aAAa,IAAKJ,MAAM,IAAI,CAACM,UAAW,GAAG,MAAM,GAAG,OAAO;EACpE,CAAC;EAED,MAAMC,UAAU,GAAGC,SAAI,CACrBV,iBAAiB,EACjBD,UAAU,EACV,CAAA,cAAA,EAAiBX,SAAS,CAAA,CAAA,EAAIiB,kBAAkB,EAAE,CAAA,CAAA,EAAIhB,QAAQ,CAAA,CAAE,EAChEC,aAAa,IAAI,CAAA,EAAGS,UAAU,CAAA,eAAA,CAAiB,EAC/CP,SAAS,CACV;AACD,EAAA,MAAMmB,cAAc,GAAG;IACrBd,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,UAAU;AACzBH,IAAAA,SAAS,EAAEiB,UAAU;IACrBlB,KAAK;IACL,GAAGK;GACJ;AAED,EAAA;AAAA;AACE;AACAgB,IAAAA,cAAA,CAACd,OAAO,EAAA;AAAA,MAAA,GAAKa,cAAc;AAAAlB,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDR,gBAAgB,CAAC4B,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"SentimentSurface.js","sources":["../../src/SentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { useTheme } from '@wise/components-theming';\n\n/**\n * SentimentSurface is a polymorphic container component that exposes and, optionally, applies\n * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,\n * `warning`, `neutral`, `success`, `proposition`).\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [hasBaseStyles=true] - If true, sets the `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.\n * @param {ColourScheme} [colourScheme] - Optional prop to force the colour scheme (light or dark) instead of deriving it from the closest theme.\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles 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 * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    hasBaseStyles = true,\n    colourScheme,\n    style,\n    className,\n    children,\n    id,\n    'data-testid': dataTestId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const BASE_CLASS = 'wds-sentiment-surface';\n  const { className: closestBrandTheme, isScreenModeDark: isDark, theme } = useTheme();\n\n  const getThemeBrightness = () => {\n    const isForestGreen = theme.includes('forest-green');\n    const isPlatform = theme.includes('platform');\n\n    return isForestGreen || (isDark && !isPlatform) ? 'dark' : 'light';\n  };\n\n  const classNames = clsx(\n    closestBrandTheme,\n    BASE_CLASS,\n    `wds-sentiment-${sentiment}-${colourScheme ?? getThemeBrightness()}-${emphasis}`,\n    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,\n    className,\n  );\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': dataTestId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","hasBaseStyles","colourScheme","style","className","children","id","dataTestId","props","ref","Element","BASE_CLASS","closestBrandTheme","isScreenModeDark","isDark","theme","useTheme","getThemeBrightness","isForestGreen","includes","isPlatform","classNames","clsx","sentimentProps","_jsx","displayName"],"mappings":";;;;;;;;;AAsCA,MAAMA,gBAAgB,gBAA8BC,gBAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,YAAY;EACZC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,EAAE;AACF,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGZ,EAAE,IAAI,KAAK;EAC3B,MAAMa,UAAU,GAAG,uBAAuB;EAC1C,MAAM;AAAEP,IAAAA,SAAS,EAAEQ,iBAAiB;AAAEC,IAAAA,gBAAgB,EAAEC,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAEpF,MAAMC,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,MAAMC,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAC,cAAc,CAAC;AACpD,IAAA,MAAMC,UAAU,GAAGL,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC;IAE7C,OAAOD,aAAa,IAAKJ,MAAM,IAAI,CAACM,UAAW,GAAG,MAAM,GAAG,OAAO;EACpE,CAAC;EAED,MAAMC,UAAU,GAAGC,SAAI,CACrBV,iBAAiB,EACjBD,UAAU,EACV,CAAA,cAAA,EAAiBZ,SAAS,CAAA,CAAA,EAAIG,YAAY,IAAIe,kBAAkB,EAAE,CAAA,CAAA,EAAIjB,QAAQ,CAAA,CAAE,EAChFC,aAAa,IAAI,CAAA,EAAGU,UAAU,CAAA,eAAA,CAAiB,EAC/CP,SAAS,CACV;AACD,EAAA,MAAMmB,cAAc,GAAG;IACrBd,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,UAAU;AACzBH,IAAAA,SAAS,EAAEiB,UAAU;IACrBlB,KAAK;IACL,GAAGK;GACJ;AAED,EAAA;AAAA;AACE;AACAgB,IAAAA,cAAA,CAACd,OAAO,EAAA;AAAA,MAAA,GAAKa,cAAc;AAAAlB,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDT,gBAAgB,CAAC6B,WAAW,GAAG,kBAAkB;;;;"}

package/build/SentimentSurface/SentimentSurface.mjs

@@ -8,6 +8,7 @@ const SentimentSurface = /*#__PURE__*/forwardRef(function SentimentSurface({
   sentiment,
   emphasis = 'base',
   hasBaseStyles = true,
+  colourScheme,
   style,
   className,
   children,
@@ -27,7 +28,7 @@ const SentimentSurface = /*#__PURE__*/forwardRef(function SentimentSurface({
     const isPlatform = theme.includes('platform');
     return isForestGreen || isDark && !isPlatform ? 'dark' : 'light';
   };
-  const classNames = clsx(closestBrandTheme, BASE_CLASS, `wds-sentiment-${sentiment}-${getThemeBrightness()}-${emphasis}`, hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`, className);
+  const classNames = clsx(closestBrandTheme, BASE_CLASS, `wds-sentiment-${sentiment}-${colourScheme ?? getThemeBrightness()}-${emphasis}`, hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`, className);
   const sentimentProps = {
     ref,
     id,

package/build/SentimentSurface/SentimentSurface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.mjs","sources":["../../src/SentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { useTheme } from '@wise/components-theming';\n\n/**\n * SentimentSurface is a polymorphic container component that exposes and, optionally, applies\n * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,\n * `warning`, `neutral`, `success`, `proposition`).\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [hasBaseStyles=true] - If true, sets the `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles 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 * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    hasBaseStyles = true,\n    style,\n    className,\n    children,\n    id,\n    'data-testid': dataTestId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const BASE_CLASS = 'wds-sentiment-surface';\n  const { className: closestBrandTheme, isScreenModeDark: isDark, theme } = useTheme();\n\n  const getThemeBrightness = () => {\n    const isForestGreen = theme.includes('forest-green');\n    const isPlatform = theme.includes('platform');\n\n    return isForestGreen || (isDark && !isPlatform) ? 'dark' : 'light';\n  };\n\n  const classNames = clsx(\n    closestBrandTheme,\n    BASE_CLASS,\n    `wds-sentiment-${sentiment}-${getThemeBrightness()}-${emphasis}`,\n    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,\n    className,\n  );\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': dataTestId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","hasBaseStyles","style","className","children","id","dataTestId","props","ref","Element","BASE_CLASS","closestBrandTheme","isScreenModeDark","isDark","theme","useTheme","getThemeBrightness","isForestGreen","includes","isPlatform","classNames","clsx","sentimentProps","_jsx","displayName"],"mappings":";;;;;AAqCA,MAAMA,gBAAgB,gBAA8BC,UAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,EAAE;AACF,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGX,EAAE,IAAI,KAAK;EAC3B,MAAMY,UAAU,GAAG,uBAAuB;EAC1C,MAAM;AAAEP,IAAAA,SAAS,EAAEQ,iBAAiB;AAAEC,IAAAA,gBAAgB,EAAEC,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAEpF,MAAMC,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,MAAMC,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAC,cAAc,CAAC;AACpD,IAAA,MAAMC,UAAU,GAAGL,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC;IAE7C,OAAOD,aAAa,IAAKJ,MAAM,IAAI,CAACM,UAAW,GAAG,MAAM,GAAG,OAAO;EACpE,CAAC;EAED,MAAMC,UAAU,GAAGC,IAAI,CACrBV,iBAAiB,EACjBD,UAAU,EACV,CAAA,cAAA,EAAiBX,SAAS,CAAA,CAAA,EAAIiB,kBAAkB,EAAE,CAAA,CAAA,EAAIhB,QAAQ,CAAA,CAAE,EAChEC,aAAa,IAAI,CAAA,EAAGS,UAAU,CAAA,eAAA,CAAiB,EAC/CP,SAAS,CACV;AACD,EAAA,MAAMmB,cAAc,GAAG;IACrBd,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,UAAU;AACzBH,IAAAA,SAAS,EAAEiB,UAAU;IACrBlB,KAAK;IACL,GAAGK;GACJ;AAED,EAAA;AAAA;AACE;AACAgB,IAAAA,GAAA,CAACd,OAAO,EAAA;AAAA,MAAA,GAAKa,cAAc;AAAAlB,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDR,gBAAgB,CAAC4B,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"SentimentSurface.mjs","sources":["../../src/SentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { useTheme } from '@wise/components-theming';\n\n/**\n * SentimentSurface is a polymorphic container component that exposes and, optionally, applies\n * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,\n * `warning`, `neutral`, `success`, `proposition`).\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [hasBaseStyles=true] - If true, sets the `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.\n * @param {ColourScheme} [colourScheme] - Optional prop to force the colour scheme (light or dark) instead of deriving it from the closest theme.\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles 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 * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    hasBaseStyles = true,\n    colourScheme,\n    style,\n    className,\n    children,\n    id,\n    'data-testid': dataTestId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const BASE_CLASS = 'wds-sentiment-surface';\n  const { className: closestBrandTheme, isScreenModeDark: isDark, theme } = useTheme();\n\n  const getThemeBrightness = () => {\n    const isForestGreen = theme.includes('forest-green');\n    const isPlatform = theme.includes('platform');\n\n    return isForestGreen || (isDark && !isPlatform) ? 'dark' : 'light';\n  };\n\n  const classNames = clsx(\n    closestBrandTheme,\n    BASE_CLASS,\n    `wds-sentiment-${sentiment}-${colourScheme ?? getThemeBrightness()}-${emphasis}`,\n    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,\n    className,\n  );\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': dataTestId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","hasBaseStyles","colourScheme","style","className","children","id","dataTestId","props","ref","Element","BASE_CLASS","closestBrandTheme","isScreenModeDark","isDark","theme","useTheme","getThemeBrightness","isForestGreen","includes","isPlatform","classNames","clsx","sentimentProps","_jsx","displayName"],"mappings":";;;;;AAsCA,MAAMA,gBAAgB,gBAA8BC,UAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,YAAY;EACZC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,EAAE;AACF,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGZ,EAAE,IAAI,KAAK;EAC3B,MAAMa,UAAU,GAAG,uBAAuB;EAC1C,MAAM;AAAEP,IAAAA,SAAS,EAAEQ,iBAAiB;AAAEC,IAAAA,gBAAgB,EAAEC,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAEpF,MAAMC,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,MAAMC,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAC,cAAc,CAAC;AACpD,IAAA,MAAMC,UAAU,GAAGL,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC;IAE7C,OAAOD,aAAa,IAAKJ,MAAM,IAAI,CAACM,UAAW,GAAG,MAAM,GAAG,OAAO;EACpE,CAAC;EAED,MAAMC,UAAU,GAAGC,IAAI,CACrBV,iBAAiB,EACjBD,UAAU,EACV,CAAA,cAAA,EAAiBZ,SAAS,CAAA,CAAA,EAAIG,YAAY,IAAIe,kBAAkB,EAAE,CAAA,CAAA,EAAIjB,QAAQ,CAAA,CAAE,EAChFC,aAAa,IAAI,CAAA,EAAGU,UAAU,CAAA,eAAA,CAAiB,EAC/CP,SAAS,CACV;AACD,EAAA,MAAMmB,cAAc,GAAG;IACrBd,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,UAAU;AACzBH,IAAAA,SAAS,EAAEiB,UAAU;IACrBlB,KAAK;IACL,GAAGK;GACJ;AAED,EAAA;AAAA;AACE;AACAgB,IAAAA,GAAA,CAACd,OAAO,EAAA;AAAA,MAAA,GAAKa,cAAc;AAAAlB,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDT,gBAAgB,CAAC6B,WAAW,GAAG,kBAAkB;;;;"}

package/build/Tag/Tag.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var clsx = require('clsx');
+var Body = require('../Body/Body.js');
+var SentimentSurface = require('../SentimentSurface/SentimentSurface.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Tag = /*#__PURE__*/React.forwardRef(function Tag({
+  children,
+  sentiment = 'neutral',
+  size = 'small',
+  emphasis = 'base',
+  overMedia = false,
+  className,
+  id,
+  'data-testid': dataTestId
+}, ref) {
+  return /*#__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,
+    colourScheme: overMedia ? 'dark' : undefined,
+    id: id,
+    "data-testid": dataTestId,
+    className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, className),
+    children: /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+      as: "span",
+      type: "body-default-bold",
+      className: "wds-tag__text",
+      children: children
+    })
+  });
+});
+
+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';\n\nimport Body from '../Body';\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} children - The text of the tag.\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\">Verified</Tag>\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    children,\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  return (\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      colourScheme={overMedia ? 'dark' : undefined}\n      id={id}\n      data-testid={dataTestId}\n      className={clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, className)}\n    >\n      <Body as=\"span\" type=\"body-default-bold\" className=\"wds-tag__text\">\n        {children}\n      </Body>\n    </SentimentSurface>\n  );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","children","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","_jsx","SentimentSurface","as","colourScheme","undefined","clsx","Body","type"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,QAAQ;AACRC,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;AAEH,EAAA,oBACEC,cAAA,CAACC;AACC;AAAA,IAAA;AACAF,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CS,IAAAA,YAAY,EAAER,SAAS,GAAG,MAAM,GAAGS,SAAU;AAC7CP,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaC,UAAW;AACxBF,IAAAA,SAAS,EAAES,SAAI,CAAC,SAAS,EAAE,CAAA,SAAA,EAAYZ,IAAI,CAAA,CAAE,EAAE,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EAAEI,SAAS,CAAE;IAAAL,QAAA,eAEnFS,cAAA,CAACM,YAAI,EAAA;AAACJ,MAAAA,EAAE,EAAC,MAAM;AAACK,MAAAA,IAAI,EAAC,mBAAmB;AAACX,MAAAA,SAAS,EAAC,eAAe;AAAAL,MAAAA,QAAA,EAC/DA;KACG;AACR,GAAkB,CAAC;AAEvB,CAAC;;;;"}

package/build/Tag/Tag.mjs

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import Body from '../Body/Body.mjs';
+import SentimentSurface from '../SentimentSurface/SentimentSurface.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Tag = /*#__PURE__*/forwardRef(function Tag({
+  children,
+  sentiment = 'neutral',
+  size = 'small',
+  emphasis = 'base',
+  overMedia = false,
+  className,
+  id,
+  'data-testid': dataTestId
+}, ref) {
+  return /*#__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,
+    colourScheme: overMedia ? 'dark' : undefined,
+    id: id,
+    "data-testid": dataTestId,
+    className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, className),
+    children: /*#__PURE__*/jsx(Body, {
+      as: "span",
+      type: "body-default-bold",
+      className: "wds-tag__text",
+      children: children
+    })
+  });
+});
+
+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';\n\nimport Body from '../Body';\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} children - The text of the tag.\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\">Verified</Tag>\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    children,\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  return (\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      colourScheme={overMedia ? 'dark' : undefined}\n      id={id}\n      data-testid={dataTestId}\n      className={clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, className)}\n    >\n      <Body as=\"span\" type=\"body-default-bold\" className=\"wds-tag__text\">\n        {children}\n      </Body>\n    </SentimentSurface>\n  );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","children","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","_jsx","SentimentSurface","as","colourScheme","undefined","clsx","Body","type"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,QAAQ;AACRC,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;AAEH,EAAA,oBACEC,GAAA,CAACC;AACC;AAAA,IAAA;AACAF,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CS,IAAAA,YAAY,EAAER,SAAS,GAAG,MAAM,GAAGS,SAAU;AAC7CP,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaC,UAAW;AACxBF,IAAAA,SAAS,EAAES,IAAI,CAAC,SAAS,EAAE,CAAA,SAAA,EAAYZ,IAAI,CAAA,CAAE,EAAE,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EAAEI,SAAS,CAAE;IAAAL,QAAA,eAEnFS,GAAA,CAACM,IAAI,EAAA;AAACJ,MAAAA,EAAE,EAAC,MAAM;AAACK,MAAAA,IAAI,EAAC,mBAAmB;AAACX,MAAAA,SAAS,EAAC,eAAe;AAAAL,MAAAA,QAAA,EAC/DA;KACG;AACR,GAAkB,CAAC;AAEvB,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}