uikit-react-public 0.25.4 → 0.25.5

package/dist/components/Badge/Badge.d.ts

@@ -1,7 +1,9 @@
 import { SpecificIconProps } from '../Icon/Icon';
 import { ThemeType } from '../../theme';
-export type BadgeVariant = 'neutral' | 'neutral-subtle' | 'critical' | 'critical-subtle' | 'caution' | 'caution-subtle' | 'success' | 'success-subtle' | 'warning' | 'warning-subtle' | 'disabled';
+export type BadgeVariant = 'info' | 'info-subtle' | 'neutral' | 'neutral-subtle' | 'critical' | 'critical-subtle' | 'caution' | 'caution-subtle' | 'success' | 'success-subtle' | 'warning' | 'warning-subtle' | 'disabled';
 export declare const VARIANT_ICON_MAP: {
+    info: import('react').FC<SpecificIconProps>;
+    'info-subtle': import('react').FC<SpecificIconProps>;
     neutral: import('react').FC<SpecificIconProps>;
     'neutral-subtle': import('react').FC<SpecificIconProps>;
     critical: import('react').FC<SpecificIconProps>;

package/dist/index.js

@@ -12543,12 +12543,12 @@ for (const e in wn)
       ...t
     }
   );
-const eo = ul, vm = T(dl), D = vm;
-Object.assign(D, eo);
-D.getIconNames = () => Object.keys(eo);
+const eo = ul, vm = T(dl), z = vm;
+Object.assign(z, eo);
+z.getIconNames = () => Object.keys(eo);
 let Ao;
 for (Ao in eo)
-  D[Ao] = eo[Ao];
+  z[Ao] = eo[Ao];
 var Ut = { exports: {} }, re = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -13142,7 +13142,7 @@ const { light: L, primitives: qe } = Nt, { sans: ml, mono: Fm } = qe.font.family
       lineHeight: L.typography.body["xs-medium"].$value.lineHeight
     }
   }
-}, Bm = "#2C0442", zm = "#500778", Dm = "#6345A5", Nm = "#BBAACC", Tm = "#006B0F", Rm = "#008613", Vm = "#80C289", Om = "#E6F3E8", Zm = "#113B3A", qm = "#52C152", Pm = "#C9D1A8", Um = "#004089", jm = "#004EA8", Jm = "#0D68CF", Ym = "#7FB7F7", Qm = "#E5F0FD", Gm = "#F2F8FE", Km = "#002248", Xm = "#34C6C6", $m = "#B6DCE5", _m = "#D4E6FC", ey = "#C3DDFB", ty = "#B2D3FA", oy = "#504D48", ny = "#FFCA36", ry = "#DAD6CA", iy = "#CC7100", ly = "#FF8D00", ay = "#FFC680", sy = "#FFF4E6", cy = "#811712", dy = "#CA0007", uy = "#E48083", hy = "#E48083", fy = "#FAE6E7", py = "#B1070A", gy = "#990F0E", my = "#4B0A32", yy = "#AC145A", by = "#DEB8C3", vy = "#000000", wy = "#1A1A1A", xy = "#333333", ky = "#4D4D4D", Sy = "#666666", Ay = "#999999", Cy = "#CCCCCC", My = "#D9D9D9", Ly = "#E6E6E6", Iy = "#F2F2F2", Hy = "#ffffff", z = {
+}, Bm = "#2C0442", zm = "#500778", Dm = "#6345A5", Nm = "#BBAACC", Tm = "#006B0F", Rm = "#008613", Vm = "#80C289", Om = "#E6F3E8", Zm = "#113B3A", qm = "#52C152", Pm = "#C9D1A8", Um = "#004089", jm = "#004EA8", Jm = "#0D68CF", Ym = "#7FB7F7", Qm = "#E5F0FD", Gm = "#F2F8FE", Km = "#002248", Xm = "#34C6C6", $m = "#B6DCE5", _m = "#D4E6FC", ey = "#C3DDFB", ty = "#B2D3FA", oy = "#504D48", ny = "#FFCA36", ry = "#DAD6CA", iy = "#CC7100", ly = "#FF8D00", ay = "#FFC680", sy = "#FFF4E6", cy = "#811712", dy = "#CA0007", uy = "#E48083", hy = "#E48083", fy = "#FAE6E7", py = "#B1070A", gy = "#990F0E", my = "#4B0A32", yy = "#AC145A", by = "#DEB8C3", vy = "#000000", wy = "#1A1A1A", xy = "#333333", ky = "#4D4D4D", Sy = "#666666", Ay = "#999999", Cy = "#CCCCCC", My = "#D9D9D9", Ly = "#E6E6E6", Iy = "#F2F2F2", Hy = "#ffffff", D = {
   purple200: Bm,
   purple50: zm,
   purple40: Dm,
@@ -13196,102 +13196,102 @@ const { light: L, primitives: qe } = Nt, { sans: ml, mono: Fm } = qe.font.family
   black5: Iy,
   white: Hy
 }, Ey = {
-  primary: z.black90,
+  primary: D.black90,
   // Primary text, such as body copy, headers, displays, labels.
-  secondary: z.black60,
+  secondary: D.black60,
   // Secondary text, such as stand-first, paragraph summary, breadcrumbs.
-  muted: z.black40,
+  muted: D.black40,
   // Tertiary text, such as input fields placeholder.
-  inverted: z.white,
+  inverted: D.white,
   // Text on bold background, for example primary buttons label.
-  interactive: z.blue70,
+  interactive: D.blue70,
   // Link, secondary button.
-  default: z.black60,
+  default: D.black60,
   // Status default for component label: tabs, toolbar.
-  disabledOnBg: z.black40,
+  disabledOnBg: D.black40,
   // Status disabled on background.
-  disabled: z.black20,
+  disabled: D.black20,
   // Status disabled.
-  active: z.blue70,
+  active: D.blue70,
   // Status active for components' label: tabs, toolbar.
-  hover: z.blue100,
+  hover: D.blue100,
   // Status hover for links and components' label.
-  visited: z.purple40,
+  visited: D.purple40,
   // Status visited for links.
-  error: z.red70,
+  error: D.red70,
   // Label for buttons or link with destructive purpose.
-  errorHover: z.red100,
+  errorHover: D.red100,
   // Error hover.
-  errorDisabled: z.red50
+  errorDisabled: D.red50
   // Error disabled.
 }, Wy = {
-  blue100: z.blue100,
-  blue80: z.blue80,
-  blue70: z.blue70,
-  blue40: z.blue40,
-  blue10: z.blue10,
-  blue5: z.blue5
+  blue100: D.blue100,
+  blue80: D.blue80,
+  blue70: D.blue70,
+  blue40: D.blue40,
+  blue10: D.blue10,
+  blue5: D.blue5
 }, Fy = {
-  purpleDark: z.purple200,
-  purpleVibrant: z.purple50,
-  purpleMuted: z.purple20,
-  greenDark: z.green200,
-  greenVibrant: z.green50,
-  greenMuted: z.green20,
-  yellowDark: z.yellow200,
-  yellowVibrant: z.yellow50,
-  yellowMuted: z.yellow20,
-  pinkDark: z.pink200,
-  pinkVibrant: z.pink50,
-  pinkMuted: z.pink20,
-  blueDark: z.blue200,
-  blueVibrant: z.blue50,
-  blueMuted: z.blue20
+  purpleDark: D.purple200,
+  purpleVibrant: D.purple50,
+  purpleMuted: D.purple20,
+  greenDark: D.green200,
+  greenVibrant: D.green50,
+  greenMuted: D.green20,
+  yellowDark: D.yellow200,
+  yellowVibrant: D.yellow50,
+  yellowMuted: D.yellow20,
+  pinkDark: D.pink200,
+  pinkVibrant: D.pink50,
+  pinkMuted: D.pink20,
+  blueDark: D.blue200,
+  blueVibrant: D.blue50,
+  blueMuted: D.blue20
 }, By = {
-  red100: z.red100,
-  red70: z.red70,
-  red40: z.red40,
-  red10: z.red10,
-  orange100: z.orange100,
-  orange70: z.orange70,
-  orange40: z.orange40,
-  orange10: z.orange10,
-  green100: z.green100,
-  green70: z.green70,
-  green40: z.green40,
-  green10: z.green10,
-  blue100: z.blue100,
-  blue80: z.blue80,
-  blue70: z.blue70,
-  blue40: z.blue40,
-  blue10: z.blue10,
-  blue5: z.blue5
+  red100: D.red100,
+  red70: D.red70,
+  red40: D.red40,
+  red10: D.red10,
+  orange100: D.orange100,
+  orange70: D.orange70,
+  orange40: D.orange40,
+  orange10: D.orange10,
+  green100: D.green100,
+  green70: D.green70,
+  green40: D.green40,
+  green10: D.green10,
+  blue100: D.blue100,
+  blue80: D.blue80,
+  blue70: D.blue70,
+  blue40: D.blue40,
+  blue10: D.blue10,
+  blue5: D.blue5
 }, zy = {
-  default: z.blue70,
-  secondaryDefault: z.black90,
-  hover: z.blue100,
-  secondaryHover: z.black70,
-  visited: z.purple40,
-  disabled: z.black20
+  default: D.blue70,
+  secondaryDefault: D.black90,
+  hover: D.blue100,
+  secondaryHover: D.black70,
+  visited: D.purple40,
+  disabled: D.black20
 }, Oo = {
-  black: z.black100,
-  white: z.white
+  black: D.black100,
+  white: D.white
 }, Dy = {
   black: Oo.black,
-  grey90: z.black90,
-  grey80: z.black80,
-  grey70: z.black70,
-  grey60: z.black60,
-  grey40: z.black40,
-  grey20: z.black20,
-  grey15: z.black15,
-  grey10: z.black10,
-  grey5: z.black5,
+  grey90: D.black90,
+  grey80: D.black80,
+  grey70: D.black70,
+  grey60: D.black60,
+  grey40: D.black40,
+  grey20: D.black20,
+  grey15: D.black15,
+  grey10: D.black10,
+  grey5: D.black5,
   white: Oo.white
 }, Ny = {
   blanket: "rgba(0, 0, 0, 0.5)"
 }, V = {
-  base: z,
+  base: D,
   text: Ey,
   interaction: Wy,
   display: Fy,
@@ -14126,7 +14126,7 @@ const { light: L, primitives: qe } = Nt, { sans: ml, mono: Fm } = qe.font.family
       ...r,
       role: "alert",
       children: [
-        /* @__PURE__ */ n(D.Info, { className: c }),
+        /* @__PURE__ */ n(z.Info, { className: c }),
         t
       ]
     }
@@ -16995,7 +16995,7 @@ const b3 = (e, t) => {
         "data-testid": i,
         ...a,
         children: [
-          /* @__PURE__ */ n(D.CheckCircle, { className: h }),
+          /* @__PURE__ */ n(z.CheckCircle, { className: h }),
           /* @__PURE__ */ n("span", { children: r }),
           /* @__PURE__ */ g("span", { className: f, children: [
             e === "close" && /* @__PURE__ */ n(
@@ -17005,7 +17005,7 @@ const b3 = (e, t) => {
                   "<Snackbar> close action triggered but unassigned"
                 )),
                 "data-testid": `${i}-close-button`,
-                children: /* @__PURE__ */ n(D.X, { size: 24 })
+                children: /* @__PURE__ */ n(z.X, { size: 24 })
               }
             ),
             e === "undo" && /* @__PURE__ */ n(
@@ -17107,23 +17107,33 @@ const b3 = (e, t) => {
             "data-testid": `${l}-image`,
             className: A
           }
-        ) : (e === "initials" || e === "image") && m ? /* @__PURE__ */ n("span", { className: M, children: m }) : /* @__PURE__ */ n(D.Avatar, { className: S })
+        ) : (e === "initials" || e === "image") && m ? /* @__PURE__ */ n("span", { className: M, children: m }) : /* @__PURE__ */ n(z.Avatar, { className: S })
       }
     );
   }
 ), Y3 = T(J3), Q3 = {
-  neutral: D.Info,
-  "neutral-subtle": D.Info,
-  critical: D.XCircle,
-  "critical-subtle": D.XCircle,
-  caution: D.AlertCircle,
-  "caution-subtle": D.AlertCircle,
-  success: D.CheckCircle,
-  "success-subtle": D.CheckCircle,
-  warning: D.AlertTriangle,
-  "warning-subtle": D.AlertTriangle,
+  info: z.Info,
+  "info-subtle": z.Info,
+  neutral: z.Info,
+  "neutral-subtle": z.Info,
+  critical: z.XCircle,
+  "critical-subtle": z.XCircle,
+  caution: z.AlertCircle,
+  "caution-subtle": z.AlertCircle,
+  success: z.CheckCircle,
+  "success-subtle": z.CheckCircle,
+  warning: z.AlertTriangle,
+  "warning-subtle": z.AlertTriangle,
   disabled: null
 }, G3 = (e) => ({
+  info: {
+    color: e.colour.text.inverse,
+    backgroundColor: e.colour.fill.brandPrimary
+  },
+  "info-subtle": {
+    color: e.colour.text.default,
+    backgroundColor: e.primitiveColour.brandPurple["03"].$value.hex
+  },
   neutral: {
     color: e.colour.text.default,
     backgroundColor: "transparent",
@@ -18061,7 +18071,7 @@ const Eo = "ucl-uikit-breadcrumb", yb = "ucl-uikit-breadcrumb--active", bb = "uc
         children: [
           s,
           p < h.length - 1 && /* @__PURE__ */ n(
-            D.ChevronRight,
+            z.ChevronRight,
             {
               size: 24,
               className: a
@@ -18182,7 +18192,7 @@ const gr = "ucl-uikit-checkbox", kb = Se(
         }
       ),
       !e && m && /* @__PURE__ */ n(
-        D.Empty,
+        z.Empty,
         {
           className: W,
           size: 24,
@@ -18192,7 +18202,7 @@ const gr = "ucl-uikit-checkbox", kb = Se(
         }
       ),
       e && /* @__PURE__ */ n(
-        D.Empty,
+        z.Empty,
         {
           className: H,
           size: 24,
@@ -18638,7 +18648,7 @@ const gr = "ucl-uikit-checkbox", kb = Se(
           {
             onClick: a,
             onKeyDown: s,
-            icon: /* @__PURE__ */ n(D.ChevronLeft, {}),
+            icon: /* @__PURE__ */ n(z.ChevronLeft, {}),
             className: f,
             "aria-label": "Go Back",
             children: "Back"
@@ -18857,7 +18867,7 @@ const Vl = Qe({}), Ol = () => Ne(Vl), Bb = ({
             {
               onClick: c,
               "aria-label": "Close menu",
-              children: /* @__PURE__ */ n(D.X, { size: 40 })
+              children: /* @__PURE__ */ n(z.X, { size: 40 })
             }
           )
         ] }),
@@ -18933,7 +18943,7 @@ const Vl = Qe({}), Ol = () => Ne(Vl), Bb = ({
       children: [
         b,
         a && /* @__PURE__ */ n(
-          D.ExternalLink,
+          z.ExternalLink,
           {
             size: 16,
             className: u`
@@ -18984,7 +18994,7 @@ const Vl = Qe({}), Ol = () => Ne(Vl), Bb = ({
       "aria-haspopup": "true",
       "aria-expanded": r ? "true" : "false",
       ...t,
-      children: /* @__PURE__ */ n(D.Menu, {})
+      children: /* @__PURE__ */ n(z.Menu, {})
     }
   );
 }, Pb = T(qb), Wo = "ucl-uikit-menu", Ub = ({
@@ -19173,7 +19183,7 @@ const Rt = ({
               t == null || t(), a == null || a.setIsOpen(!1);
             },
             className: s,
-            children: /* @__PURE__ */ n(D.X, { size: 32 })
+            children: /* @__PURE__ */ n(z.X, { size: 32 })
           }
         )
       ]
@@ -19276,7 +19286,7 @@ const Rt = ({
   expanded: e,
   className: t
 }) => e ? /* @__PURE__ */ n(
-  D.ChevronUp,
+  z.ChevronUp,
   {
     className: t,
     size: 24,
@@ -19285,7 +19295,7 @@ const Rt = ({
     testId: "ucl-uikit-menu__accordion__icon--chevron-up"
   }
 ) : /* @__PURE__ */ n(
-  D.ChevronDown,
+  z.ChevronDown,
   {
     className: t,
     size: 24,
@@ -19466,7 +19476,7 @@ const Rt = ({
           }
         ),
         r && /* @__PURE__ */ n(
-          D.ExternalLink,
+          z.ExternalLink,
           {
             size: 16,
             "aria-hidden": "true",
@@ -20102,9 +20112,9 @@ const mv = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F200
             onKeyDown: (M) => {
               M.stopPropagation();
             },
-            children: /* @__PURE__ */ n(D.X, {})
+            children: /* @__PURE__ */ n(z.X, {})
           }
-        ) : /* @__PURE__ */ n(D.ChevronDown, { className: v })
+        ) : /* @__PURE__ */ n(z.ChevronDown, { className: v })
       ]
     }
   );
@@ -20284,13 +20294,13 @@ const mv = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F200
       color: ${a.color.neutral.grey20};
     }
   `, c = k(Dr, d, o), s = {
-    facebook: D.Facebook,
-    flickr: D.Flickr,
-    instagram: D.Instagram,
-    soundcloud: D.Soundcloud,
-    tiktok: D.Tiktok,
-    x: D.XSocial,
-    youtube: D.Youtube
+    facebook: z.Facebook,
+    flickr: z.Flickr,
+    instagram: z.Instagram,
+    soundcloud: z.Soundcloud,
+    tiktok: z.Tiktok,
+    x: z.XSocial,
+    youtube: z.Youtube
   }[e];
   return /* @__PURE__ */ n(
     Ye,
@@ -20711,14 +20721,14 @@ const Rr = "ucl-uikit-footer__column", Ev = ({
       background-color: ${a.colour.fill.brandInverseSecondary};
     }
   `, c = k(Or, d, o), s = {
-    bluesky: D.Bluesky,
-    facebook: D.Facebook,
-    instagram: D.Instagram,
-    linkedin: D.Linkedin,
-    soundcloud: D.Soundcloud,
-    tiktok: D.Tiktok,
-    threads: D.Threads,
-    youtube: D.Youtube
+    bluesky: z.Bluesky,
+    facebook: z.Facebook,
+    instagram: z.Instagram,
+    linkedin: z.Linkedin,
+    soundcloud: z.Soundcloud,
+    tiktok: z.Tiktok,
+    threads: z.Threads,
+    youtube: z.Youtube
   }[e];
   return /* @__PURE__ */ n(
     Ye,
@@ -21044,7 +21054,7 @@ const Rr = "ucl-uikit-footer__column", Ev = ({
           onClick: l,
           children: [
             "Back to top ",
-            /* @__PURE__ */ n(D.ArrowUp, {})
+            /* @__PURE__ */ n(z.ArrowUp, {})
           ]
         }
       )
@@ -21653,7 +21663,7 @@ const ti = "ucl-uikit-header__bottom--breadcrumbs", i6 = ({
             /* @__PURE__ */ n("div", { className: M, children: r })
           ] }),
           /* @__PURE__ */ n(
-            D.ChevronDown,
+            z.ChevronDown,
             {
               className: S,
               size: 24
@@ -21703,7 +21713,7 @@ const ti = "ucl-uikit-header__bottom--breadcrumbs", i6 = ({
       children: [
         /* @__PURE__ */ n("span", { className: s, children: r }),
         e && /* @__PURE__ */ n(
-          D.ChevronRight,
+          z.ChevronRight,
           {
             className: p,
             size: 24,
@@ -22282,10 +22292,10 @@ const ui = "ucl-uikit-alert__message", A6 = ({
         color: ${a.colour.icon.critical};
       `
   ), y = {
-    info: D.Info,
-    success: D.CheckCircle,
-    warning: D.AlertTriangle,
-    error: D.XCircle
+    info: z.Info,
+    success: z.CheckCircle,
+    warning: z.AlertTriangle,
+    error: z.XCircle
   }[e];
   return /* @__PURE__ */ n(I6.Provider, { value: { type: e }, children: /* @__PURE__ */ g(
     "div",
@@ -22481,7 +22491,7 @@ const gi = "ucl-uikit-accordion__heading", mi = "ucl-uikit-accordion__heading__i
       children: [
         e,
         /* @__PURE__ */ n(
-          D.ChevronDown,
+          z.ChevronDown,
           {
             size: c === "medium" ? 32 : 24,
             className: y
@@ -22920,7 +22930,7 @@ const wi = "ucl-uikit-dialog__header", J6 = ({
             "aria-label": "Close dialog",
             onClick: f,
             children: /* @__PURE__ */ n(
-              D.X,
+              z.X,
               {
                 role: "presentation",
                 "aria-hidden": "true"
@@ -23188,21 +23198,21 @@ const Si = "ucl-uikit-base-dialog", $6 = 495, _6 = 495, ew = 740, tw = ({
       `
   ), m = {
     success: /* @__PURE__ */ n(
-      D.CheckCircle,
+      z.CheckCircle,
       {
         size: Do,
         className: f
       }
     ),
     error: /* @__PURE__ */ n(
-      D.XCircle,
+      z.XCircle,
       {
         size: Do,
         className: f
       }
     ),
     warning: /* @__PURE__ */ n(
-      D.AlertTriangle,
+      z.AlertTriangle,
       {
         size: Do,
         className: f
@@ -23648,7 +23658,7 @@ const lw = 100, aw = 1e3, sw = () => {
             className: b,
             "aria-label": "Clear date",
             "data-testid": `${Yt}-icon-button`,
-            children: /* @__PURE__ */ n(D.X, { className: y })
+            children: /* @__PURE__ */ n(z.X, { className: y })
           }
         ) : /* @__PURE__ */ n(
           De,
@@ -23660,7 +23670,7 @@ const lw = 100, aw = 1e3, sw = () => {
             "data-testid": `${Yt}-icon-button`,
             tabIndex: -1,
             disabled: a,
-            children: /* @__PURE__ */ n(D.Calendar, { className: y })
+            children: /* @__PURE__ */ n(z.Calendar, { className: y })
           }
         )
       ]
@@ -23832,7 +23842,7 @@ const lw = 100, aw = 1e3, sw = () => {
       "data-testid": Fi,
       children: [
         /* @__PURE__ */ n(
-          D.ChevronLeft,
+          z.ChevronLeft,
           {
             className: l,
             onClick: () => t(-1)
@@ -23847,7 +23857,7 @@ const lw = 100, aw = 1e3, sw = () => {
           /* @__PURE__ */ n("span", { children: e ? e.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() })
         ] }),
         /* @__PURE__ */ n(
-          D.ChevronRight,
+          z.ChevronRight,
           {
             className: l,
             onClick: () => t(1)
@@ -24355,7 +24365,7 @@ const xw = ({
             onClick: ge,
             disabled: i,
             "aria-label": "Go to previous week",
-            children: /* @__PURE__ */ n(D.ChevronLeft, {})
+            children: /* @__PURE__ */ n(z.ChevronLeft, {})
           }
         ),
         /* @__PURE__ */ n(
@@ -24379,7 +24389,7 @@ const xw = ({
             onClick: Fe,
             disabled: i,
             "aria-label": "Go to next week",
-            children: /* @__PURE__ */ n(D.ChevronRight, {})
+            children: /* @__PURE__ */ n(z.ChevronRight, {})
           }
         ),
         M && /* @__PURE__ */ n(ta, { children: /* @__PURE__ */ n(
@@ -24456,7 +24466,7 @@ const xw = ({
             onClick: i,
             className: m,
             children: /* @__PURE__ */ n(
-              D.Calendar,
+              z.Calendar,
               {
                 className: b,
                 size: 16
@@ -24606,7 +24616,7 @@ const xw = ({
         htmlFor: `file-input-${o}`,
         className: c,
         children: [
-          /* @__PURE__ */ n(D.Upload, {}),
+          /* @__PURE__ */ n(z.Upload, {}),
           t
         ]
       }
@@ -24751,7 +24761,7 @@ const xw = ({
               target: "_blank",
               children: [
                 "Cookies policy ",
-                /* @__PURE__ */ n(D.ExternalLink, { className: b })
+                /* @__PURE__ */ n(z.ExternalLink, { className: b })
               ]
             }
           )
@@ -24863,7 +24873,7 @@ const xw = ({
               "aria-label": "Clear search",
               "data-testid": `${t}-clear-search-btn`,
               ...m,
-              children: /* @__PURE__ */ n(D.X, {})
+              children: /* @__PURE__ */ n(z.X, {})
             }
           ),
           /* @__PURE__ */ n("div", { className: _ }),
@@ -24876,7 +24886,7 @@ const xw = ({
               "aria-label": "Search",
               "data-testid": `${t}-search-btn`,
               ...b,
-              children: /* @__PURE__ */ n(D.Search, {})
+              children: /* @__PURE__ */ n(z.Search, {})
             }
           )
         ] })
@@ -25097,13 +25107,13 @@ const Ow = ({
   ...l
 }) => {
   const a = !!l["aria-expanded"], d = a ? r : o, c = a ? /* @__PURE__ */ n(
-    D.X,
+    z.X,
     {
       title: "Close menu",
       testId: "ucl-uikit-dropdown-menu__icon-close"
     }
   ) : /* @__PURE__ */ n(
-    D.Menu2,
+    z.Menu2,
     {
       title: "Open menu",
       testId: "ucl-uikit-dropdown-menu__icon-open"
@@ -25268,7 +25278,7 @@ const Ow = ({
                   size: i
                 }
               ),
-              /* @__PURE__ */ n(D.ChevronDown, { size: 20 })
+              /* @__PURE__ */ n(z.ChevronDown, { size: 20 })
             ]
           }
         ) }),
@@ -25369,7 +25379,7 @@ export {
   Ul as HeaderNew,
   Dl as Heading,
   Dl as HeadingNew,
-  D as Icon,
+  z as Icon,
   De as IconButton,
   w4 as Input,
   zl as Label,

package/lib/components/Badge/Badge.stories.tsx

@@ -4,6 +4,8 @@ import Badge from './Badge';
 import { type BadgeVariant } from './Badge';
 
 const VARIANTS: BadgeVariant[] = [
+  'info',
+  'info-subtle',
   'neutral',
   'neutral-subtle',
   'critical',

package/lib/components/Badge/Badge.tsx

@@ -6,6 +6,8 @@ import type { SpecificIconProps } from '../Icon/Icon';
 import type { ThemeType } from '../../theme';
 
 export type BadgeVariant =
+  | 'info'
+  | 'info-subtle'
   | 'neutral'
   | 'neutral-subtle'
   | 'critical'
@@ -19,6 +21,8 @@ export type BadgeVariant =
   | 'disabled';
 
 export const VARIANT_ICON_MAP = {
+  info: Icon.Info,
+  'info-subtle': Icon.Info,
   neutral: Icon.Info,
   'neutral-subtle': Icon.Info,
   critical: Icon.XCircle,
@@ -41,6 +45,14 @@ export interface BadgeVariantStyle {
 export const getBadgeVariantColours = (
   theme: ThemeType
 ): Record<BadgeVariant, BadgeVariantStyle> => ({
+  info: {
+    color: theme.colour.text.inverse,
+    backgroundColor: theme.colour.fill.brandPrimary,
+  },
+  'info-subtle': {
+    color: theme.colour.text.default,
+    backgroundColor: theme.primitiveColour.brandPurple['03'].$value.hex,
+  },
   neutral: {
     color: theme.colour.text.default,
     backgroundColor: 'transparent',

package/lib/components/Badge/__tests__/Badge.test.tsx

@@ -29,6 +29,25 @@ describe('Badge', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('snapshot: variant=info with icon', () => {
+    const { container } = wrap(
+      <Badge
+        variant='info'
+        icon
+      >
+        Info
+      </Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=info-subtle', () => {
+    const { container } = wrap(
+      <Badge variant='info-subtle'>Info subtle</Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('snapshot: variant=critical with icon', () => {
     const { container } = wrap(
       <Badge

package/lib/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -73,6 +73,48 @@ exports[`Badge > snapshot: variant=disabled 1`] = `
 </span>
 `;
 
+exports[`Badge > snapshot: variant=info with icon 1`] = `
+<span
+  class="ucl-uikit-badge css-11fgrnl"
+  data-testid="ucl-uikit-badge"
+>
+  <svg
+    aria-hidden="true"
+    class="ucl-uikit-icon css-y1s4m2"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="14"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <path
+      d="M12 16v-4m0-4h.01"
+    />
+  </svg>
+  Info
+</span>
+`;
+
+exports[`Badge > snapshot: variant=info-subtle 1`] = `
+<span
+  class="ucl-uikit-badge css-1t6kxcm"
+  data-testid="ucl-uikit-badge"
+>
+  Info subtle
+</span>
+`;
+
 exports[`Badge > snapshot: variant=success with icon 1`] = `
 <span
   class="ucl-uikit-badge css-16a4ap6"

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.25.4",
+  "version": "0.25.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",