@telus-uds/palette-koodo 3.1.0 → 3.3.0

package/build/web/icons/TooltipSymbol.js

@@ -6,21 +6,37 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M13.274 19.182V12.03c0-1.52-.133-1.824-1.045-1.824H10.5v8.975h2.774ZM11.906 8.428c.836 0 1.501-.646 1.501-1.463 0-.817-.665-1.482-1.5-1.482-.837 0-1.52.665-1.52 1.482s.683 1.463 1.52 1.463Z"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      d: "M13.274 19.182V12.03c0-1.52-.133-1.824-1.045-1.824H10.5v8.975h2.774ZM11.906 8.428c.836 0 1.501-.646 1.501-1.463 0-.817-.665-1.482-1.5-1.482-.837 0-1.52.665-1.52 1.482s.683 1.463 1.52 1.463Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/Unmuted.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M13.709 4.292c-.217-.09-.457-.032-.643.153L8.614 8.897a.273.273 0 0 1-.076.036H5.18a.72.72 0 0 0-.72.719v4.318a.72.72 0 0 0 .72.719l3.349-.001a.266.266 0 0 1 .079.03l4.458 4.459a.618.618 0 0 0 .436.194c.069 0 .14-.014.207-.041.217-.09.346-.301.346-.563V4.854c0-.262-.129-.472-.346-.562Zm3.146 4.87a4.292 4.292 0 0 1 1.264 3.054 4.29 4.29 0 0 1-1.264 3.052.48.48 0 1 1-.68-.678 3.333 3.333 0 0 0 .985-2.374c0-.898-.35-1.741-.985-2.375a.481.481 0 0 1 .68-.68Zm4.15 3.045c0-1.92-.75-3.729-2.108-5.088a.48.48 0 0 0-.679.678 6.196 6.196 0 0 1 1.827 4.41 6.198 6.198 0 0 1-1.827 4.411.479.479 0 1 0 .68.677 7.15 7.15 0 0 0 2.106-5.088Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M13.709 4.292c-.217-.09-.457-.032-.643.153L8.614 8.897a.273.273 0 0 1-.076.036H5.18a.72.72 0 0 0-.72.719v4.318a.72.72 0 0 0 .72.719l3.349-.001a.266.266 0 0 1 .079.03l4.458 4.459a.618.618 0 0 0 .436.194c.069 0 .14-.014.207-.041.217-.09.346-.301.346-.563V4.854c0-.262-.129-.472-.346-.562Zm3.146 4.87a4.292 4.292 0 0 1 1.264 3.054 4.29 4.29 0 0 1-1.264 3.052.48.48 0 1 1-.68-.678 3.333 3.333 0 0 0 .985-2.374c0-.898-.35-1.741-.985-2.375a.481.481 0 0 1 .68-.68Zm4.15 3.045c0-1.92-.75-3.729-2.108-5.088a.48.48 0 0 0-.679.678 6.196 6.196 0 0 1 1.827 4.41 6.198 6.198 0 0 1-1.827 4.411.479.479 0 1 0 .68.677 7.15 7.15 0 0 0 2.106-5.088Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/User.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M12 20.5c2.06 0 3.948-.732 5.419-1.951a5.469 5.469 0 0 0-10.608.184A8.463 8.463 0 0 0 12 20.5Zm.138-8.5a7.966 7.966 0 0 1 7.13 4.41 8.5 8.5 0 1 0-14.38.249A7.968 7.968 0 0 1 12.139 12ZM12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Zm0-12.004a2.933 2.933 0 1 0 0-5.867 2.933 2.933 0 0 0 0 5.867Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M12 20.5c2.06 0 3.948-.732 5.419-1.951a5.469 5.469 0 0 0-10.608.184A8.463 8.463 0 0 0 12 20.5Zm.138-8.5a7.966 7.966 0 0 1 7.13 4.41 8.5 8.5 0 1 0-14.38.249A7.968 7.968 0 0 1 12.139 12ZM12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Zm0-12.004a2.933 2.933 0 1 0 0-5.867 2.933 2.933 0 0 0 0 5.867Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/UserAdd.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M3.444 12a8.556 8.556 0 1 1 17.07.855 1.222 1.222 0 1 0 2.432.24c.036-.36.054-.726.054-1.095 0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11c.357 0 .71-.017 1.058-.05a1.222 1.222 0 1 0-.233-2.434 8.519 8.519 0 0 1-6.129-1.802 5.624 5.624 0 0 1 8.07-3.72 1.222 1.222 0 1 0 1.128-2.169A8.07 8.07 0 0 0 4.823 16.66 8.516 8.516 0 0 1 3.444 12Zm11.49-3.938a2.933 2.933 0 1 1-5.867 0 2.933 2.933 0 0 1 5.866 0ZM24 19.255A4.748 4.748 0 0 1 19.25 24a4.748 4.748 0 0 1-4.75-4.745 4.748 4.748 0 0 1 4.75-4.746A4.748 4.748 0 0 1 24 19.255Zm-4-2.25a.75.75 0 0 0-1.5 0v1.5H17a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 0 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5H20v-1.5Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M3.444 12a8.556 8.556 0 1 1 17.07.855 1.222 1.222 0 1 0 2.432.24c.036-.36.054-.726.054-1.095 0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11c.357 0 .71-.017 1.058-.05a1.222 1.222 0 1 0-.233-2.434 8.519 8.519 0 0 1-6.129-1.802 5.624 5.624 0 0 1 8.07-3.72 1.222 1.222 0 1 0 1.128-2.169A8.07 8.07 0 0 0 4.823 16.66 8.516 8.516 0 0 1 3.444 12Zm11.49-3.938a2.933 2.933 0 1 1-5.867 0 2.933 2.933 0 0 1 5.866 0ZM24 19.255A4.748 4.748 0 0 1 19.25 24a4.748 4.748 0 0 1-4.75-4.745 4.748 4.748 0 0 1 4.75-4.746A4.748 4.748 0 0 1 24 19.255Zm-4-2.25a.75.75 0 0 0-1.5 0v1.5H17a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 0 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5H20v-1.5Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/Visa.js

@@ -6,33 +6,49 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fill: "#00579F",
-    d: "M15.704 8c.752 0 1.36.151 1.744.288l-.265 1.464-.175-.072a3.615 3.615 0 0 0-1.449-.26c-.767 0-1.111.296-1.12.584 0 .317.417.526 1.097.836 1.12.483 1.64 1.075 1.632 1.846C17.152 14.092 15.824 15 13.784 15c-.872-.007-1.712-.173-2.168-.36l.272-1.522.256.108c.632.253 1.048.361 1.824.361.56 0 1.16-.21 1.168-.663 0-.296-.256-.512-1.008-.844-.736-.324-1.72-.865-1.704-1.838.008-1.32 1.36-2.242 3.28-2.242Zm-7.248 6.899H10.4l1.216-6.776H9.672l-1.216 6.776Z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fill: "#00579F",
-    fillRule: "evenodd",
-    d: "M22.432 8.123h-1.504c-.464 0-.816.122-1.016.562L17.024 14.9h2.04l.408-1.016h2.496c.056.237.232 1.016.232 1.016H24l-1.568-6.776Zm-2.4 4.376a2035.23 2035.23 0 0 0 .836-2.049c.056-.14.139-.346.196-.496l.136.584s.368 1.622.448 1.96h-1.616Z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fill: "#00579F",
-    d: "m4.928 12.743 1.904-4.62h2.056l-3.056 6.769H3.776L2.032 8.966c1.232.584 2.336 1.76 2.688 2.84l.208.938Z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fill: "#FAA61A",
-    d: "M3.16 8.123H.032L0 8.26c2.44.562 4.056 1.918 4.72 3.547l-.68-3.115c-.112-.432-.456-.555-.88-.57Z"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fill: "#00579F",
+      d: "M15.704 8c.752 0 1.36.151 1.744.288l-.265 1.464-.175-.072a3.615 3.615 0 0 0-1.449-.26c-.767 0-1.111.296-1.12.584 0 .317.417.526 1.097.836 1.12.483 1.64 1.075 1.632 1.846C17.152 14.092 15.824 15 13.784 15c-.872-.007-1.712-.173-2.168-.36l.272-1.522.256.108c.632.253 1.048.361 1.824.361.56 0 1.16-.21 1.168-.663 0-.296-.256-.512-1.008-.844-.736-.324-1.72-.865-1.704-1.838.008-1.32 1.36-2.242 3.28-2.242Zm-7.248 6.899H10.4l1.216-6.776H9.672l-1.216 6.776Z"
+    }), (0, _jsxRuntime.jsx)("path", {
+      fill: "#00579F",
+      fillRule: "evenodd",
+      d: "M22.432 8.123h-1.504c-.464 0-.816.122-1.016.562L17.024 14.9h2.04l.408-1.016h2.496c.056.237.232 1.016.232 1.016H24l-1.568-6.776Zm-2.4 4.376a2035.23 2035.23 0 0 0 .836-2.049c.056-.14.139-.346.196-.496l.136.584s.368 1.622.448 1.96h-1.616Z",
+      clipRule: "evenodd"
+    }), (0, _jsxRuntime.jsx)("path", {
+      fill: "#00579F",
+      d: "m4.928 12.743 1.904-4.62h2.056l-3.056 6.769H3.776L2.032 8.966c1.232.584 2.336 1.76 2.688 2.84l.208.938Z"
+    }), (0, _jsxRuntime.jsx)("path", {
+      fill: "#FAA61A",
+      d: "M3.16 8.123H.032L0 8.26c2.44.562 4.056 1.918 4.72 3.547l-.68-3.115c-.112-.432-.456-.555-.88-.57Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/canada-filled.icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11.763 1.124c.1-.165.34-.165.44 0l1.907 3.183a.256.256 0 0 0 .3.11l1.507-.5a.256.256 0 0 1 .331.299L15.03 9.67c-.111.5.5.836.862.474l2.803-2.806a.257.257 0 0 1 .425.101l.515 1.573c.042.127.175.2.305.168l2.054-.512a.256.256 0 0 1 .291.362l-.997 2a.255.255 0 0 0 .128.349l1.429.61c.18.078.21.322.053.44l-5.493 4.12a.257.257 0 0 0-.088.287l.537 1.604a.26.26 0 0 1-.294.336c-.862-.164-2.7-.515-4.403-.628V22a.998.998 0 0 1-.96.998c-.007 0-.014.003-.022.003L12.168 23h-.01a1 1 0 0 1-1-1v-3.862c-1.737.094-3.766.467-4.664.64a.259.259 0 0 1-.294-.337l.52-1.554a.256.256 0 0 0-.09-.285L1.103 12.46a.256.256 0 0 1 .072-.448l1.44-.477a.256.256 0 0 0 .149-.357L1.692 9.025a.256.256 0 0 1 .29-.362l2.047.51a.256.256 0 0 0 .305-.168l.517-1.563a.256.256 0 0 1 .424-.1l2.808 2.817c.362.363.973.027.86-.474l-1.23-5.461a.256.256 0 0 1 .332-.3l1.491.506a.256.256 0 0 0 .302-.11l1.925-3.196Z"/>
+</svg>

package/build/web/icons/index.js

@@ -11,6 +11,7 @@ module.exports = {
   Bullet: require('./Bullet'),
   BulletCircle: require('./BulletCircle'),
   BulletFill: require('./BulletFill'),
+  CanadaFilled: require('./CanadaFilled'),
   Cart: require('./Cart'),
   CartFilled: require('./CartFilled'),
   Caution: require('./Caution'),
@@ -60,6 +61,16 @@ module.exports = {
   MaintenanceFilled: require('./MaintenanceFilled'),
   MasterCard: require('./MasterCard'),
   Muted: require('./Muted'),
+  Number1FilledMono: require('./Number1FilledMono'),
+  Number1FilledMulti: require('./Number1FilledMulti'),
+  Number2FilledMono: require('./Number2FilledMono'),
+  Number2FilledMulti: require('./Number2FilledMulti'),
+  Number3FilledMono: require('./Number3FilledMono'),
+  Number3FilledMulti: require('./Number3FilledMulti'),
+  Number4FilledMono: require('./Number4FilledMono'),
+  Number4FilledMulti: require('./Number4FilledMulti'),
+  Number5FilledMono: require('./Number5FilledMono'),
+  Number5FilledMulti: require('./Number5FilledMulti'),
   OfferStarFilled: require('./OfferStarFilled'),
   Pause: require('./Pause'),
   PaymentAdd: require('./PaymentAdd'),

package/build/web/icons/number1-filled-mono.icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-.762-7.8h2.856V7.8H11.97L9.906 8.82v2.052h.48l.852-.456V16.2Z" clip-rule="evenodd"/>
+</svg>

package/build/web/icons/number1-filled-multi.icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h24v24H0z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)">
+    <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+    <path fill="#fff" d="M14.094 16.2h-2.856v-5.784l-.852.456h-.48V8.82L11.97 7.8h2.124v8.4Z"/>
+  </g>
+</svg>

package/build/web/icons/number2-filled-mono.icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.066-7.734v-2.064h-2.988l1.176-.96c1.188-.972 1.896-1.74 1.896-2.916 0-1.8-1.188-2.592-3.24-2.592-1.272 0-2.232.336-2.88.696v1.884h1.128a1.859 1.859 0 0 1 1.26-.468c.576 0 .852.252.852.648 0 .468-.348.888-1.128 1.608L8.85 14.166v2.1h6.216Z" clip-rule="evenodd"/>
+</svg>

package/build/web/icons/number2-filled-multi.icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M15.066 14.202v2.064H8.85v-2.1l2.292-2.064c.78-.72 1.128-1.14 1.128-1.608 0-.396-.276-.648-.852-.648-.564 0-.972.216-1.26.468H9.03V8.43c.648-.36 1.608-.696 2.88-.696 2.052 0 3.24.792 3.24 2.592 0 1.176-.708 1.944-1.896 2.916l-1.176.96h2.988Z"/>
+</svg>

package/build/web/icons/number3-filled-mono.icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-3.186-8.232c.588.312 1.344.564 2.688.564 2.304 0 3.696-.912 3.684-2.484 0-1.128-.6-1.752-1.8-1.92v-.048c1.044-.252 1.644-.84 1.644-1.968 0-1.548-1.32-2.244-3.18-2.244-1.176 0-2.124.276-2.796.672v1.68h1.02c.288-.168.756-.324 1.32-.324.576 0 .9.264.9.708 0 .456-.348.732-1.092.732h-.684v1.728h.756c.732 0 1.056.24 1.056.768s-.48.78-1.116.78c-.624 0-1.092-.168-1.356-.372H8.814v1.728Z" clip-rule="evenodd"/>
+</svg>

package/build/web/icons/number3-filled-multi.icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M11.502 16.332c-1.344 0-2.1-.252-2.688-.564V14.04h1.044c.264.204.732.372 1.356.372.636 0 1.116-.252 1.116-.78s-.324-.768-1.056-.768h-.756v-1.728h.684c.744 0 1.092-.276 1.092-.732 0-.444-.324-.708-.9-.708-.564 0-1.032.156-1.32.324h-1.02V8.34c.672-.396 1.62-.672 2.796-.672 1.86 0 3.18.696 3.18 2.244 0 1.128-.6 1.716-1.644 1.968v.048c1.2.168 1.8.792 1.8 1.92.012 1.572-1.38 2.484-3.684 2.484Z"/>
+</svg>

package/build/web/icons/number4-filled-mono.icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M10.404 12.72v-.048L12 10.548h.048v2.172h-1.644Z"/>
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-.048-7.8h2.808v-1.716h.78V12.72h-.78V7.8h-2.676L8.46 12.468v2.016h3.492V16.2Z" clip-rule="evenodd"/>
+</svg>

package/build/web/icons/number4-filled-multi.icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M14.76 16.2h-2.808v-1.716H8.46v-2.016L12.084 7.8h2.676v4.92h.78v1.764h-.78V16.2Zm-4.356-3.528v.048h1.644v-2.172H12l-1.596 2.124Z"/>
+</svg>

package/build/web/icons/number5-filled-mono.icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-.576-7.734c2.388 0 3.78-1.092 3.78-2.892 0-1.824-1.128-2.616-2.616-2.616-.816 0-1.26.192-1.548.444h-.036V9.786h3.72V7.734H9.012v5.16h1.56c.168-.18.444-.372.936-.372.516 0 .864.252.864.84 0 .6-.396.948-1.188.948-.636 0-1.056-.192-1.344-.408H8.796v1.8c.66.348 1.404.564 2.628.564Z" clip-rule="evenodd"/>
+</svg>

package/build/web/icons/number5-filled-multi.icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M15.204 13.374c0 1.8-1.392 2.892-3.78 2.892-1.224 0-1.968-.216-2.628-.564v-1.8H9.84c.288.216.708.408 1.344.408.792 0 1.188-.348 1.188-.948 0-.588-.348-.84-.864-.84-.492 0-.768.192-.936.372h-1.56v-5.16h5.712v2.052h-3.72v1.416h.036c.288-.252.732-.444 1.548-.444 1.488 0 2.616.792 2.616 2.616Z"/>
+</svg>

package/build/web/icons/utils/icon-shared-utils.js

@@ -0,0 +1,34 @@
+"use strict";
+
+const iconSharedUtils = {
+  hasValidGradient: gradient => {
+    return gradient && gradient.type && gradient.stops && gradient.stops.length > 0;
+  }
+};
+const gradientUtils = {
+  generateGradientId: gradient => {
+    if (!gradient) return '';
+    const type = gradient.type || '';
+    const angle = gradient.angle || 0;
+    const spec = gradient.specification || '';
+    const stopsStr = gradient.stops ? gradient.stops.map(s => `${s.color}-${s.stop || s.hint || 0}`).join('_') : '';
+    const gradientStr = `${type}-${angle}-${spec}-${stopsStr}`;
+    let hash = 0;
+    for (let i = 0; i < gradientStr.length; i++) {
+      const char = gradientStr.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    const random = Math.floor(Math.random() * 10000);
+    return `gradient-${type}-${Math.abs(hash).toString(16)}-${random}`;
+  },
+  addGradientToSvg: (svgContent, gradientDefs) => {
+    if (!gradientDefs) return svgContent;
+    const React = require('react');
+    return React.cloneElement(svgContent, svgContent.props, gradientDefs, ...React.Children.toArray(svgContent.props.children));
+  }
+};
+iconSharedUtils.getGradientUtils = () => {
+  return gradientUtils;
+};
+module.exports = iconSharedUtils;

package/build/web/icons/utils/icon-web-utils.js

@@ -0,0 +1,50 @@
+"use strict";
+
+const iconWebUtils = {
+  renderWebGradientDefs: (gradient, gradientId) => {
+    if (!gradient || !gradientId) return null;
+    const React = require('react');
+    if (gradient.type === 'linear') {
+      const angle = 180 - (gradient.angle || 0);
+      return React.createElement('defs', null, React.createElement('linearGradient', {
+        id: gradientId,
+        gradientTransform: `rotate(${angle})`
+      }, gradient.stops.map((stop, index) => {
+        const offset = stop.hint !== undefined ? stop.hint * 100 : stop.stop !== undefined ? stop.stop * 100 : '';
+        return React.createElement('stop', {
+          key: index,
+          offset: `${offset}%`,
+          stopColor: stop.color
+        });
+      })));
+    } else if (gradient.type === 'radial') {
+      let cx = '50%',
+        cy = '50%',
+        r = '50%';
+      if (typeof gradient.specification === 'string' && gradient.specification.length < 1000) {
+        const match = gradient.specification.match(/^(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s+at\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
+        if (match) {
+          r = match[1] + '%';
+          cx = match[3] + '%';
+          cy = match[4] + '%';
+        }
+      }
+      return React.createElement('defs', null, React.createElement('radialGradient', {
+        id: gradientId,
+        cx: cx,
+        cy: cy,
+        r: r,
+        gradientUnits: "userSpaceOnUse"
+      }, gradient.stops.map((stop, index) => {
+        const offset = stop.hint !== undefined ? stop.hint * 100 : stop.stop !== undefined ? stop.stop * 100 : '';
+        return React.createElement('stop', {
+          key: index,
+          offset: `${offset}%`,
+          stopColor: stop.color
+        });
+      })));
+    }
+    return null;
+  }
+};
+module.exports = iconWebUtils;

package/build/web/palette.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Fri, 14 Feb 2025 19:02:01 GMT
+* Generated on Fri, 23 May 2025 15:14:16 GMT
 */
 module.exports = {
   border: {
@@ -69,11 +69,11 @@ module.exports = {
   },
   font: {
     StagSans: {
-      300: 'https://cdn.telus.digital/uds/StagSans-Light-v3_1_0.otf',
-      400: 'https://cdn.telus.digital/uds/StagSans-Regular-v3_1_0.otf',
-      500: 'https://cdn.telus.digital/uds/StagSans-Medium-v3_1_0.otf',
-      600: 'https://cdn.telus.digital/uds/StagSans-Semibold-v3_1_0.otf',
-      700: 'https://cdn.telus.digital/uds/StagSans-Bold-v3_1_0.otf'
+      300: 'https://cdn.telus.digital/uds/StagSans-Light-v3_3_0.otf',
+      400: 'https://cdn.telus.digital/uds/StagSans-Regular-v3_3_0.otf',
+      500: 'https://cdn.telus.digital/uds/StagSans-Medium-v3_3_0.otf',
+      600: 'https://cdn.telus.digital/uds/StagSans-Semibold-v3_3_0.otf',
+      700: 'https://cdn.telus.digital/uds/StagSans-Bold-v3_3_0.otf'
     }
   },
   fontSize: {
@@ -115,6 +115,7 @@ module.exports = {
     Bullet: '@telus-uds/palette-koodo/build/web/icons/bullet.icon.svg',
     BulletCircle: '@telus-uds/palette-koodo/build/web/icons/bullet-circle.icon.svg',
     BulletFill: '@telus-uds/palette-koodo/build/web/icons/bullet-fill.icon.svg',
+    CanadaFilled: '@telus-uds/palette-koodo/build/web/icons/canada-filled.icon.svg',
     Cart: '@telus-uds/palette-koodo/build/web/icons/cart.icon.svg',
     CartFilled: '@telus-uds/palette-koodo/build/web/icons/cart-filled.icon.svg',
     Caution: '@telus-uds/palette-koodo/build/web/icons/caution.icon.svg',
@@ -164,6 +165,16 @@ module.exports = {
     MaintenanceFilled: '@telus-uds/palette-koodo/build/web/icons/maintenance-filled.icon.svg',
     MasterCard: '@telus-uds/palette-koodo/build/web/icons/master-card.icon.svg',
     Muted: '@telus-uds/palette-koodo/build/web/icons/muted.icon.svg',
+    Number1FilledMono: '@telus-uds/palette-koodo/build/web/icons/number1-filled-mono.icon.svg',
+    Number1FilledMulti: '@telus-uds/palette-koodo/build/web/icons/number1-filled-multi.icon.svg',
+    Number2FilledMono: '@telus-uds/palette-koodo/build/web/icons/number2-filled-mono.icon.svg',
+    Number2FilledMulti: '@telus-uds/palette-koodo/build/web/icons/number2-filled-multi.icon.svg',
+    Number3FilledMono: '@telus-uds/palette-koodo/build/web/icons/number3-filled-mono.icon.svg',
+    Number3FilledMulti: '@telus-uds/palette-koodo/build/web/icons/number3-filled-multi.icon.svg',
+    Number4FilledMono: '@telus-uds/palette-koodo/build/web/icons/number4-filled-mono.icon.svg',
+    Number4FilledMulti: '@telus-uds/palette-koodo/build/web/icons/number4-filled-multi.icon.svg',
+    Number5FilledMono: '@telus-uds/palette-koodo/build/web/icons/number5-filled-mono.icon.svg',
+    Number5FilledMulti: '@telus-uds/palette-koodo/build/web/icons/number5-filled-multi.icon.svg',
     OfferStarFilled: '@telus-uds/palette-koodo/build/web/icons/offer-star-filled.icon.svg',
     Pause: '@telus-uds/palette-koodo/build/web/icons/pause.icon.svg',
     PaymentAdd: '@telus-uds/palette-koodo/build/web/icons/payment-add.icon.svg',

package/icon/canada-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11.763 1.124c.1-.165.34-.165.44 0l1.907 3.183a.256.256 0 0 0 .3.11l1.507-.5a.256.256 0 0 1 .331.299L15.03 9.67c-.111.5.5.836.862.474l2.803-2.806a.257.257 0 0 1 .425.101l.515 1.573c.042.127.175.2.305.168l2.054-.512a.256.256 0 0 1 .291.362l-.997 2a.255.255 0 0 0 .128.349l1.429.61c.18.078.21.322.053.44l-5.493 4.12a.257.257 0 0 0-.088.287l.537 1.604a.26.26 0 0 1-.294.336c-.862-.164-2.7-.515-4.403-.628V22a.998.998 0 0 1-.96.998c-.007 0-.014.003-.022.003L12.168 23h-.01a1 1 0 0 1-1-1v-3.862c-1.737.094-3.766.467-4.664.64a.259.259 0 0 1-.294-.337l.52-1.554a.256.256 0 0 0-.09-.285L1.103 12.46a.256.256 0 0 1 .072-.448l1.44-.477a.256.256 0 0 0 .149-.357L1.692 9.025a.256.256 0 0 1 .29-.362l2.047.51a.256.256 0 0 0 .305-.168l.517-1.563a.256.256 0 0 1 .424-.1l2.808 2.817c.362.363.973.027.86-.474l-1.23-5.461a.256.256 0 0 1 .332-.3l1.491.506a.256.256 0 0 0 .302-.11l1.925-3.196Z"/>
+</svg>

package/icon/number-1-filled-mono.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-.762-7.8h2.856V7.8H11.97L9.906 8.82v2.052h.48l.852-.456V16.2Z" clip-rule="evenodd"/>
+</svg>

package/icon/number-1-filled-multi.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h24v24H0z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)">
+    <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+    <path fill="#fff" d="M14.094 16.2h-2.856v-5.784l-.852.456h-.48V8.82L11.97 7.8h2.124v8.4Z"/>
+  </g>
+</svg>

package/icon/number-2-filled-mono.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.066-7.734v-2.064h-2.988l1.176-.96c1.188-.972 1.896-1.74 1.896-2.916 0-1.8-1.188-2.592-3.24-2.592-1.272 0-2.232.336-2.88.696v1.884h1.128a1.859 1.859 0 0 1 1.26-.468c.576 0 .852.252.852.648 0 .468-.348.888-1.128 1.608L8.85 14.166v2.1h6.216Z" clip-rule="evenodd"/>
+</svg>

package/icon/number-2-filled-multi.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M15.066 14.202v2.064H8.85v-2.1l2.292-2.064c.78-.72 1.128-1.14 1.128-1.608 0-.396-.276-.648-.852-.648-.564 0-.972.216-1.26.468H9.03V8.43c.648-.36 1.608-.696 2.88-.696 2.052 0 3.24.792 3.24 2.592 0 1.176-.708 1.944-1.896 2.916l-1.176.96h2.988Z"/>
+</svg>

package/icon/number-3-filled-mono.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-3.186-8.232c.588.312 1.344.564 2.688.564 2.304 0 3.696-.912 3.684-2.484 0-1.128-.6-1.752-1.8-1.92v-.048c1.044-.252 1.644-.84 1.644-1.968 0-1.548-1.32-2.244-3.18-2.244-1.176 0-2.124.276-2.796.672v1.68h1.02c.288-.168.756-.324 1.32-.324.576 0 .9.264.9.708 0 .456-.348.732-1.092.732h-.684v1.728h.756c.732 0 1.056.24 1.056.768s-.48.78-1.116.78c-.624 0-1.092-.168-1.356-.372H8.814v1.728Z" clip-rule="evenodd"/>
+</svg>

package/icon/number-3-filled-multi.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M11.502 16.332c-1.344 0-2.1-.252-2.688-.564V14.04h1.044c.264.204.732.372 1.356.372.636 0 1.116-.252 1.116-.78s-.324-.768-1.056-.768h-.756v-1.728h.684c.744 0 1.092-.276 1.092-.732 0-.444-.324-.708-.9-.708-.564 0-1.032.156-1.32.324h-1.02V8.34c.672-.396 1.62-.672 2.796-.672 1.86 0 3.18.696 3.18 2.244 0 1.128-.6 1.716-1.644 1.968v.048c1.2.168 1.8.792 1.8 1.92.012 1.572-1.38 2.484-3.684 2.484Z"/>
+</svg>

package/icon/number-4-filled-mono.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M10.404 12.72v-.048L12 10.548h.048v2.172h-1.644Z"/>
+  <path fill-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm-.048-7.8h2.808v-1.716h.78V12.72h-.78V7.8h-2.676L8.46 12.468v2.016h3.492V16.2Z" clip-rule="evenodd"/>
+</svg>

package/icon/number-4-filled-multi.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#FF0076" d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"/>
+  <path fill="#fff" d="M14.76 16.2h-2.808v-1.716H8.46v-2.016L12.084 7.8h2.676v4.92h.78v1.764h-.78V16.2Zm-4.356-3.528v.048h1.644v-2.172H12l-1.596 2.124Z"/>
+</svg>