@transferwise/components 46.137.0 → 46.138.0

package/src/alert/Alert.story.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { lorem40 } from '../test-utils';
 import { Sentiment, Status } from '../common';
@@ -48,6 +49,34 @@ type Story = StoryObj<typeof Alert>;
 
 export const Basic: Story = {};
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) {
+    return (
+      <Button v2 size="md" onClick={() => setDismissed(false)}>
+        Show alert again
+      </Button>
+    );
+  }
+
+  return (
+    <Alert
+      action={{
+        'aria-label': 'Learn more',
+        text: 'Learn more',
+        href: '#',
+      }}
+      message="Payments sent to your bank details **today** might not arrive in time for the holidays."
+      onDismiss={() => setDismissed(true)}
+      type="positive"
+    />
+  );
+};`,
+  scope: { Alert, Button, React },
+});
+
 export const Variants: Story = {
   render: ({ message }) => {
     const variants = [

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -81,7 +81,7 @@ export const All: Story = {
           <div>
             <AvatarWrapper
               badgeStatusIcon={Sentiment.NEGATIVE}
-              url="https://wise.com/web-art/assets/flags/hrk.svg"
+              url="https://wise.com/web-art/assets/flags/hr.svg"
               profileType={ProfileType.BUSINESS}
               avatarProps={avatarProps}
             />

package/src/button/_stories/Button.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { Flag } from '@wise/art';
 import { lorem10, lorem20 } from '../../test-utils';
 import SentimentSurface from '../../sentimentSurface';
@@ -317,6 +321,13 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Button v2 size="md" onClick={console.log}>
+  Click me
+</Button>`,
+  scope: globalScope,
+});
+
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />

package/src/i18n/cs.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "vybráno",
   "neptune.DateLookup.twentyYears": "20 let",
   "neptune.DateLookup.year": "rok",
+  "neptune.Expander.collapseAriaLabel": "Sbalit",
+  "neptune.Expander.expandAriaLabel": "Rozbalit",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Napište měnu/zemi",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Vybrat měnu",
   "neptune.FlowNavigation.back": "zpět na předchozí krok",

package/src/i18n/de.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "ausgewählt",
   "neptune.DateLookup.twentyYears": "20 Jahre",
   "neptune.DateLookup.year": "Jahr",
+  "neptune.Expander.collapseAriaLabel": "Minimieren",
+  "neptune.Expander.expandAriaLabel": "Maximieren",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Gib eine Währung / ein Land ein",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Wähle eine Währung",
   "neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",

package/src/i18n/es.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "seleccionado",
   "neptune.DateLookup.twentyYears": "20 años",
   "neptune.DateLookup.year": "año",
+  "neptune.Expander.collapseAriaLabel": "Ocultar",
+  "neptune.Expander.expandAriaLabel": "Expandir",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Indica una divisa/país",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Seleccionar divisa",
   "neptune.FlowNavigation.back": "volver al paso anterior",

package/src/i18n/fr.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "sélectionnée",
   "neptune.DateLookup.twentyYears": "20 ans",
   "neptune.DateLookup.year": "année",
+  "neptune.Expander.collapseAriaLabel": "Réduire",
+  "neptune.Expander.expandAriaLabel": "Développer",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Entrez une devise/un pays",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Sélectionnez une devise",
   "neptune.FlowNavigation.back": "revenir à l'étape précédente",

package/src/i18n/hu.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "kiválasztva",
   "neptune.DateLookup.twentyYears": "20 év",
   "neptune.DateLookup.year": "év",
+  "neptune.Expander.collapseAriaLabel": "Rövidebben",
+  "neptune.Expander.expandAriaLabel": "Több",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Írj be egy pénznemet/országot",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Pénznem kiválasztása",
   "neptune.FlowNavigation.back": "vissza az előző lépéshez",

package/src/i18n/id.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "terpilih",
   "neptune.DateLookup.twentyYears": "20 tahun",
   "neptune.DateLookup.year": "tahun",
+  "neptune.Expander.collapseAriaLabel": "Persempit",
+  "neptune.Expander.expandAriaLabel": "Perluas",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Ketik mata uang/negara",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Pilih mata uang",
   "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",

package/src/i18n/it.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selezionata",
   "neptune.DateLookup.twentyYears": "20 anni",
   "neptune.DateLookup.year": "anno",
+  "neptune.Expander.collapseAriaLabel": "Riduci",
+  "neptune.Expander.expandAriaLabel": "Espandi",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digita una valuta / paese",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Scegli la valuta",
   "neptune.FlowNavigation.back": "torna al passaggio precedente",

package/src/i18n/ja.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "選択済み",
   "neptune.DateLookup.twentyYears": "20年",
   "neptune.DateLookup.year": "年",
+  "neptune.Expander.collapseAriaLabel": "閉じる",
+  "neptune.Expander.expandAriaLabel": "開く",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "通貨または国をご入力ください",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "通貨の選択",
   "neptune.FlowNavigation.back": "前のステップに戻る",

package/src/i18n/nl.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "geselecteerd",
   "neptune.DateLookup.twentyYears": "20 jaar",
   "neptune.DateLookup.year": "jaar",
+  "neptune.Expander.collapseAriaLabel": "Samenvouwen",
+  "neptune.Expander.expandAriaLabel": "Uitvouwen",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
   "neptune.FlowNavigation.back": "terug naar vorige stap",

package/src/i18n/pl.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "wybrano",
   "neptune.DateLookup.twentyYears": "20 lat",
   "neptune.DateLookup.year": "rok",
+  "neptune.Expander.collapseAriaLabel": "Schowaj",
+  "neptune.Expander.expandAriaLabel": "Rozwiń",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Wpisz walutę / kraj",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Wybierz walutę",
   "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",

package/src/i18n/pt.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selecionada",
   "neptune.DateLookup.twentyYears": "20 anos",
   "neptune.DateLookup.year": "ano",
+  "neptune.Expander.collapseAriaLabel": "Ver menos",
+  "neptune.Expander.expandAriaLabel": "Ver mais",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digite uma moeda / país",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecione a moeda",
   "neptune.FlowNavigation.back": "voltar à etapa anterior",

package/src/i18n/ro.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selectată",
   "neptune.DateLookup.twentyYears": "20 de ani",
   "neptune.DateLookup.year": "an",
+  "neptune.Expander.collapseAriaLabel": "Restrânge",
+  "neptune.Expander.expandAriaLabel": "Extinde",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Tastează o monedă / țară",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selectează moneda",
   "neptune.FlowNavigation.back": "înapoi la pasul anterior",

package/src/i18n/ru.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "выбрано",
   "neptune.DateLookup.twentyYears": "20 лет",
   "neptune.DateLookup.year": "год",
+  "neptune.Expander.collapseAriaLabel": "Свернуть",
+  "neptune.Expander.expandAriaLabel": "Развернуть",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Введите валюту/страну",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Выберите валюту",
   "neptune.FlowNavigation.back": "вернуться к предыдущему шагу",

package/src/i18n/th.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "เลือกแล้ว",
   "neptune.DateLookup.twentyYears": "20 ปี",
   "neptune.DateLookup.year": "ปี",
+  "neptune.Expander.collapseAriaLabel": "ย่อ",
+  "neptune.Expander.expandAriaLabel": "ขยาย",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "ป้อนสกุลเงิน / ประเทศ",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "เลือกสกุลเงิน",
   "neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",

package/src/i18n/tr.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "seçili",
   "neptune.DateLookup.twentyYears": "20 yıl",
   "neptune.DateLookup.year": "yıl",
+  "neptune.Expander.collapseAriaLabel": "Küçült",
+  "neptune.Expander.expandAriaLabel": "Genişlet",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Bir para birimi / ülke girin",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Para birimi seçin",
   "neptune.FlowNavigation.back": "önceki adıma dön",

package/src/i18n/uk.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "вибрано",
   "neptune.DateLookup.twentyYears": "20 років",
   "neptune.DateLookup.year": "рік",
+  "neptune.Expander.collapseAriaLabel": "Згорнути",
+  "neptune.Expander.expandAriaLabel": "Розгорнути",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
   "neptune.FlowNavigation.back": "назад до попереднього кроку",

package/src/i18n/zh-CN.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "已选",
   "neptune.DateLookup.twentyYears": "20 年",
   "neptune.DateLookup.year": "年",
+  "neptune.Expander.collapseAriaLabel": "收起",
+  "neptune.Expander.expandAriaLabel": "展开",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
   "neptune.FlowNavigation.back": "返回上一步",

package/src/i18n/zh-HK.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "已選",
   "neptune.DateLookup.twentyYears": "20年",
   "neptune.DateLookup.year": "年",
+  "neptune.Expander.collapseAriaLabel": "收起",
+  "neptune.Expander.expandAriaLabel": "展開",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
   "neptune.FlowNavigation.back": "返回上一個步驟",

package/src/logo/Logo.story.tsx

@@ -1,7 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
+import type { LogoSize } from './Logo';
 import { withVariantConfig } from '../../.storybook/helpers';
+import Body from '../body';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -25,6 +27,10 @@ const meta: Meta<typeof Logo> = {
       control: 'radio',
       options: Object.values(LogoFormat),
     },
+    size: {
+      control: 'radio',
+      options: [16, 18, 20, 24, 28, 36] satisfies LogoSize[],
+    },
     inverse: { control: { disable: true } },
   },
   parameters: {
@@ -162,6 +168,40 @@ export const SecondaryLockup: Story = {
   },
 };
 
+/**
+ * Controls the height and width of the logo in pixels.
+ */
+export const Sizes: Story = {
+  argTypes: {
+    size: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {([16, 18, 20, 24, 28, 36] as const).map((size) => (
+        <div
+          key={size}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo {...args} size={size} />
+          <Body>{size}</Body>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo size={..} />`,
+      },
+    },
+  },
+};
+
 /**
  * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
  */

package/src/logo/Logo.test.story.tsx

@@ -1,7 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
+import { LogoFormat } from './Logo';
+import type { LogoSize } from './Logo';
 import { withVariantConfig } from '../../.storybook/helpers';
+import Body from '../body';
 
 const meta: Meta<typeof Logo> = {
   component: Logo,
@@ -42,3 +45,51 @@ export const Responsive: Story = {
   render: () => <AllVariants />,
   ...withVariantConfig(['mobile']),
 };
+
+const sizes: LogoSize[] = [16, 18, 20, 24, 28, 36];
+
+export const Sizes = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+    {(['compact', 'full'] as const).map((display) => (
+      <div key={display} style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}>
+        {sizes.map((size) => (
+          <div
+            key={size}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo type="WISE" size={size} display={display} />
+            <Body>{size}</Body>
+          </div>
+        ))}
+      </div>
+    ))}
+    {[LogoType.WISE_BUSINESS, LogoType.WISE_PLATFORM].map((type) =>
+      [LogoFormat.PRIMARY_LOCKUP, LogoFormat.SECONDARY_LOCKUP].map((format) => (
+        <div
+          key={`${type}-${format}`}
+          style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}
+        >
+          {sizes.map((size) => (
+            <div
+              key={size}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '0.5rem',
+              }}
+            >
+              <Logo type={type} format={format} size={size} display="full" />
+              <Body>{size}</Body>
+            </div>
+          ))}
+        </div>
+      )),
+    )}
+  </div>
+);

package/src/logo/Logo.tsx

@@ -32,6 +32,8 @@ export enum LogoFormat {
   SECONDARY_LOCKUP = 'secondary-lockup',
 }
 
+export type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';
+
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
@@ -62,6 +64,11 @@ export interface LogoProps {
    * @default 'default'
    */
   format?: `${LogoFormat}`;
+  /**
+   * Controls the height and width of the logo in pixels.
+   * @default 24
+   */
+  size?: LogoSize;
   /**
    * Override default ({@link labelByType}) screen reader messages
    */
@@ -94,6 +101,7 @@ export default function Logo({
   type = 'WISE',
   format = 'default',
   display = 'responsive',
+  size = 24,
   'aria-label': ariaLabel,
 }: LogoProps) {
   const isScreenSm = !useScreenSize(Breakpoint.SMALL);
@@ -101,7 +109,9 @@ export default function Logo({
 
   const assetName = compact ? 'FastFlag' : getAssetName(type, format);
   const Asset = logoAssets[assetName];
-  const { width, height } = logoAssetsDimensions[assetName];
+  const sizes = logoAssetsDimensions[assetName];
+  const { width, height } =
+    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];
 
   return (
     <span

package/src/logo/logo-assets.tsx

@@ -1,17 +1,64 @@
 export const logoAssetsDimensions = {
-  FastFlag: { width: 22, height: 24 },
-  WiseLogo: { width: 94, height: 24 },
-  WiseBusinessPrimary: { width: 210, height: 24 },
-  WiseBusinessSecondary: { width: 97, height: 46 },
-  WisePlatformPrimary: { width: 205, height: 24 },
-  WisePlatformSecondary: { width: 94, height: 46 },
+  FastFlag: {
+    16: { width: 16, height: 16 },
+    18: { width: 18, height: 18 },
+    20: { width: 20, height: 20 },
+    24: { width: 24, height: 24 },
+    28: { width: 28, height: 28 },
+    36: { width: 36, height: 36 },
+  },
+  WiseLogo: {
+    16: { width: 64, height: 16 },
+    18: { width: 72, height: 18 },
+    20: { width: 80, height: 20 },
+    24: { width: 96, height: 24 },
+    28: { width: 112, height: 28 },
+    36: { width: 144, height: 36 },
+  },
+  WiseBusinessPrimary: {
+    16: { width: 140, height: 16 },
+    18: { width: 157.5, height: 18 },
+    20: { width: 175, height: 20 },
+    24: { width: 210, height: 24 },
+    28: { width: 245, height: 28 },
+    36: { width: 315, height: 36 },
+  },
+  WiseBusinessSecondary: {
+    16: { width: 68, height: 32 },
+    18: { width: 76.5, height: 36 },
+    20: { width: 85, height: 40 },
+    24: { width: 102, height: 48 },
+    28: { width: 119, height: 56 },
+    36: { width: 153, height: 72 },
+  },
+  WisePlatformPrimary: {
+    16: { width: 136, height: 16 },
+    18: { width: 153, height: 18 },
+    20: { width: 170, height: 20 },
+    24: { width: 204, height: 24 },
+    28: { width: 238, height: 28 },
+    36: { width: 306, height: 36 },
+  },
+  WisePlatformSecondary: {
+    16: { width: 64, height: 32 },
+    18: { width: 72, height: 36 },
+    20: { width: 80, height: 40 },
+    24: { width: 96, height: 48 },
+    28: { width: 112, height: 56 },
+    36: { width: 144, height: 72 },
+  },
 } as const;
 
 export type LogoAssetName = keyof typeof logoAssetsDimensions;
 
 function svgProps(name: LogoAssetName) {
-  const { width, height } = logoAssetsDimensions[name];
-  return { xmlns: 'http://www.w3.org/2000/svg', width, height, viewBox: `0 0 ${width} ${height}` };
+  const { width, height } = logoAssetsDimensions[name][24];
+  return {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '100%',
+    height: '100%',
+    viewBox: `0 0 ${width} ${height}`,
+  };
 }
 
 export function FastFlag() {

package/src/main.css

@@ -4456,7 +4456,6 @@ kbd kbd {
 
 .text-underline {
   text-decoration: underline;
-  -webkit-text-decoration: underline !important;
   text-decoration: underline !important;
   text-underline-offset: 0.3em;
 }

package/src/radio/Radio.story.tsx

@@ -52,7 +52,7 @@ export const Variants: StoryObj<RadioProps> = {
             id="radioGroup2"
             avatar={
               <AvatarView>
-                <Flag code="IMP" />
+                <Flag code="IM" />
               </AvatarView>
             }
             value="option2"

package/src/section/Section.story.tsx

@@ -108,14 +108,8 @@ export const WithListItems = () => {
   return (
     <Section>
       <Header title="Section with list items" />
-      <ListItem
-        title="Item 1"
-        control={<ListItem.Navigation onClick={() => action('Item 1')} />}
-      />
-      <ListItem
-        title="Item 2"
-        control={<ListItem.Navigation onClick={() => action('Item 2')} />}
-      />
+      <ListItem title="Item 1" control={<ListItem.Navigation onClick={() => action('Item 1')} />} />
+      <ListItem title="Item 2" control={<ListItem.Navigation onClick={() => action('Item 2')} />} />
     </Section>
   );
 };

package/src/ssr.test.tsx

@@ -183,6 +183,7 @@ describe('Server side rendering', () => {
 
   // Override props in case of name collision.
   const overrideProps: Partial<Record<keyof ExposedLibraryItemsType, Record<string, unknown>>> = {
+    Logo: { size: 16 },
     ActionPrompt: { action: { label: 'Action', onClick: jest.fn(), href: '#' } },
     Alert: { children: undefined, message: 'Fluffy kittens', size: undefined },
     Card: { isExpanded: true },

package/src/statusIcon/StatusIcon.test.tsx

@@ -42,7 +42,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   it.each([
     [Sentiment.WARNING, 'alert-icon'],
     [Sentiment.PENDING, 'clock-borderless-icon'],
@@ -61,7 +60,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   describe('accessible name', () => {
     it.each([
       ['Error', Sentiment.NEGATIVE],

package/src/styles/less/neptune.css

@@ -4456,7 +4456,6 @@ kbd kbd {
 
 .text-underline {
   text-decoration: underline;
-  -webkit-text-decoration: underline !important;
   text-decoration: underline !important;
   text-underline-offset: 0.3em;
 }