@pagopa/io-app-design-system 1.7.1 → 1.9.0

package/src/components/icons/Icon.tsx

@@ -139,14 +139,24 @@ import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid";
 import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconTag from "./svg/IconTag";
+import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
 import IconTransactions from "./svg/IconTransactions";
 import IconTrashcan from "./svg/IconTrashcan";
 import IconWarningFilled from "./svg/IconWarningFilled";
 import IconWebsite from "./svg/IconWebsite";
+import IconOption from "./svg/IconOption";
+import IconKey from "./svg/IconKey";
+import IconNotification from "./svg/IconNotification";
+import IconChange from "./svg/IconChange";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
+import IconKeyboard from "./svg/IconKeyboard";
+import IconContactless from "./svg/IconContactless";
+import IconDisabilityCard from "./svg/IconDisabilityCard";
+import IconDriverLicense from "./svg/IconDriverLicense";
+import IconHealthCard from "./svg/IconHealthCard";
 
 export const IOIcons = {
   archive: IconArchive,
@@ -161,10 +171,11 @@ export const IOIcons = {
   copy: IconCopy,
   selfCert: IconSelfCertification,
   institution: IconInstitution,
+  merchant: IconMerchant,
   hourglass: IconHourglass,
   shareiOs: IconShareiOs,
   shareAndroid: IconShareAndroid,
-  locked: IconLockOn /* io-lucchetto */,
+  locked: IconLockOn,
   unlocked: IconLockOff,
   initiatives: IconInitiatives,
   analytics: IconAnalytics,
@@ -175,8 +186,8 @@ export const IOIcons = {
   pinOn: IconPinOn,
   emojiSad: IconEmojiSad,
   emojiHappy: IconEmojiHappy,
-  phone: IconPhone /* io-phone */,
-  email: IconEmail /* io-envelope */,
+  phone: IconPhone,
+  email: IconEmail,
   emailFill: IconEmailFill,
   pec: IconPEC,
   messageLegal: IconMessageLegal,
@@ -186,6 +197,8 @@ export const IOIcons = {
   docSign: IconDocumentSign,
   docAgree: IconAgreement,
   security: IconSecurity,
+  option: IconOption,
+  key: IconKey,
   docGiacenza: IconGiacenza,
   docAttach: IconDocumentAttachment,
   docAttachPDF: IconDocumentAttachmentPDF,
@@ -194,8 +207,9 @@ export const IOIcons = {
   success: IconSuccess,
   ok: IconOk,
   fiscalCodeIndividual: IconFiscalCodeIndividual,
-  creditCard: IconCreditCard /* io-carta */,
+  creditCard: IconCreditCard,
   bonus: IconBonus,
+  transactionsBoxed: IconTransactionsBoxed,
   transactions: IconTransactions,
   amount: IconAmount,
   psp: IconPSP,
@@ -204,7 +218,7 @@ export const IOIcons = {
   locationAndroid: IconLocationAndroid,
   coggle: IconCoggle,
   warningFilled: IconWarningFilled,
-  notice: IconNotice /* io-warning */,
+  notice: IconNotice,
   noticeFilled: IconNoticeFilled,
   info: IconInfo,
   infoFilled: IconInfoFilled,
@@ -217,16 +231,19 @@ export const IOIcons = {
   edit: IconEdit,
   battery: IconBattery,
   trashcan: IconTrashcan,
-  calendar: IconCalendar /* io-calendar */ /* io-calendario */,
+  calendar: IconCalendar,
   profile: IconProfile,
   profileFilled: IconProfileFilled,
-  profileAlt: IconProfileAlt /* io-titolare */,
+  profileAlt: IconProfileAlt,
   lightbulb: IconLightbulb,
   magicWand: IconMagicWand,
   starFilled: IconStarFilled,
   starEmpty: IconStarEmpty,
   switchOff: IconSwitchOff,
   device: IconDevice,
+  contactless: IconContactless,
+  notification: IconNotification,
+  keyboard: IconKeyboard,
   dotMenu: IconDotMenu,
   barcode: IconBarcode,
   save: IconSave,
@@ -238,24 +255,28 @@ export const IOIcons = {
   externalLink: IconExternalLink,
   cancel: IconCancel,
   help: IconQuestion,
-  search: IconSearch /* io-search */,
+  search: IconSearch,
+  disabilityCard: IconDisabilityCard,
+  driverLicense: IconDriverLicense,
+  healthCard: IconHealthCard,
   chevronRight: IconChevronRight,
   chevronLeft: IconChevronLeft,
   chevronBottom: IconChevronBottom,
   chevronTop: IconChevronTop,
   chevronRightListItem: IconChevronRightListItem,
-  closeLarge: IconCloseLarge /* io-close */,
+  closeLarge: IconCloseLarge,
   closeMedium: IconCloseMedium,
   closeSmall: IconCloseSmall,
   arrowBottom: IconArrowBottom,
   arrowLeft: IconArrowLeft,
   arrowTop: IconArrowTop,
   arrowRight: IconArrowRight,
+  change: IconChange,
   backiOS: IconBackiOS,
   backAndroid: IconBackAndroid,
-  navMessages: IconNavMessages /* io-messaggi */,
+  navMessages: IconNavMessages,
   navMessagesFocused: IconNavMessagesFocused,
-  navWallet: IconNavWallet /* io-portafoglio */,
+  navWallet: IconNavWallet,
   navWalletFocused: IconNavWalletFocused,
   navScan: IconNavScan,
   navServices: IconNavServices,
@@ -267,8 +288,8 @@ export const IOIcons = {
   legRadioOff: LegIconRadioOff,
   legCheckOn: LegIconCheckOn,
   legCheckOff: LegIconCheckOff,
-  biomFingerprint: IconBiomFingerprint /* io-fingerprint */,
-  biomFaceID: IconBiomFaceID /* io-face-id */,
+  biomFingerprint: IconBiomFingerprint,
+  biomFaceID: IconBiomFaceID,
   categCulture: IconCategCulture,
   categWellness: IconCategWellness,
   categLearning: IconCategLearning,
@@ -282,11 +303,10 @@ export const IOIcons = {
   categShopping: IconCategShopping,
   categSustainability: IconCategSustainability,
   productIOApp: IconProductIOApp,
-  productPagoPA: IconProductPagoPA /* io-pagopa */,
+  productPagoPA: IconProductPagoPA,
   productIOAppBlueBg: IconProductIOAppBlueBg,
   checkTick: IconCheckTick,
   checkTickBig: IconCheckTickBig,
-  merchant: IconMerchant,
   light: IconLight,
   lightFilled: IconLightFilled,
   systemSettingsAndroid: IconSystemSettingsAndroid,

package/src/components/icons/IconContained.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { IOVisualCostants, IOColors } from "../../core";
+import { IOIcons, Icon } from ".";
+
+type IconContained = {
+  variant: "tonal";
+  color: "neutral";
+  icon: IOIcons;
+};
+
+type IconContainedVisualAttrs = {
+  background: IOColors;
+  foreground: IOColors;
+};
+
+type IconContainedColorVariants = Record<
+  IconContained["color"],
+  IconContainedVisualAttrs
+>;
+
+const tonalColorMap: IconContainedColorVariants = {
+  neutral: {
+    background: "blueIO-50",
+    foreground: "grey-450"
+  }
+};
+
+const variantMap: Record<IconContained["variant"], IconContainedColorVariants> =
+  {
+    tonal: tonalColorMap
+  };
+
+const IconContainedDefaultSize = IOVisualCostants.iconContainedSizeDefault;
+
+const styles = StyleSheet.create({
+  iconContainedWrapper: {
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: IconContainedDefaultSize,
+    height: IconContainedDefaultSize,
+    borderRadius: IconContainedDefaultSize / 2
+  }
+});
+
+/*
+`IconContained` is just a special wrapper for the `Icon` component. 
+It's also not an interactive component, unlike the `IconButton`.
+When adding new styles, you should be aware of this context and be careful
+not to add variants that look like interactive counterparts.
+*/
+export const IconContained = ({ variant, color, icon }: IconContained) => {
+  const backgroundColor = useMemo(
+    () => variantMap[variant][color].background,
+    [variant, color]
+  );
+
+  const foregroundColor = useMemo(
+    () => variantMap[variant][color].foreground,
+    [variant, color]
+  );
+
+  return (
+    <View
+      style={[
+        styles.iconContainedWrapper,
+        { backgroundColor: IOColors[backgroundColor] }
+      ]}
+    >
+      <Icon name={icon} color={foregroundColor} />
+    </View>
+  );
+};

package/src/components/icons/index.tsx

@@ -1 +1,2 @@
 export * from "./Icon";
+export * from "./IconContained";

package/src/components/icons/svg/IconChange.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconChange = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M23.7071 16.2929C24.0976 16.6834 24.0976 17.3166 23.7071 17.7071C23.3166 18.0976 22.6834 18.0976 22.2929 17.7071L20 15.4142L20 17C20 20.866 16.866 24 13 24L5 24C4.44772 24 4 23.5523 4 23C4 22.4477 4.44772 22 5 22L13 22C15.7614 22 18 19.7614 18 17L18 15.4142L15.7071 17.7071C15.3166 18.0976 14.6834 18.0976 14.2929 17.7071C13.9024 17.3166 13.9024 16.6834 14.2929 16.2929L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929L23.7071 16.2929ZM6 7C6 4.23858 8.23858 2 11 2L19 2C19.5523 2 20 1.55228 20 1C20 0.447716 19.5523 1.94416e-07 19 2.18557e-07L11 5.68248e-07C7.13401 7.37236e-07 4 3.13401 4 7L4 8.58579L1.70711 6.29289C1.31658 5.90237 0.683417 5.90237 0.292892 6.29289C-0.0976322 6.68342 -0.0976322 7.31658 0.292892 7.70711L4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9.70711 7.70711C10.0976 7.31658 10.0976 6.68342 9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L6 8.58578L6 7Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconChange;

package/src/components/icons/svg/IconContactless.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconContactless = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.4936 0.391611C17.1576 -0.046682 16.5299 -0.129581 16.0916 0.206451C15.6533 0.542483 15.5704 1.1702 15.9064 1.60849C18.0423 4.39441 19.0001 7.59351 19.0001 12.0001C19.0001 16.4066 18.0423 19.6057 15.9064 22.3916C15.5704 22.8299 15.6533 23.4576 16.0916 23.7937C16.5299 24.1297 17.1576 24.0468 17.4936 23.6085C19.9577 20.3944 21.0001 16.7355 21.0001 12.0001C21.0001 7.26465 19.9578 3.60569 17.4936 0.391611ZM12.8001 2.40006C12.4687 1.95823 11.8419 1.86869 11.4001 2.20006C10.9582 2.53143 10.8687 3.15823 11.2001 3.60006C12.2687 5.02488 12.9566 6.25335 13.385 7.53842C13.8133 8.8235 14.0001 10.219 14.0001 12.0001C14.0001 13.7811 13.8133 15.1766 13.385 16.4617C12.9566 17.7468 12.2687 18.9752 11.2001 20.4001C10.8687 20.8419 10.9582 21.4687 11.4001 21.8001C11.8419 22.1314 12.4687 22.0419 12.8001 21.6001C13.9543 20.061 14.7664 18.6419 15.2823 17.0942C15.7982 15.5464 16.0001 13.9239 16.0001 12.0001C16.0001 10.0762 15.7982 8.45372 15.2823 6.90597C14.7664 5.35822 13.9543 3.93911 12.8001 2.40006ZM7.40006 5.20006C7.84189 4.86869 8.46869 4.95823 8.80006 5.40006C9.58386 6.44513 10.1459 7.42298 10.5045 8.49859C10.863 9.5742 11.0001 10.6937 11.0001 12.0001C11.0001 13.3064 10.863 14.4259 10.5045 15.5015C10.1459 16.5771 9.58386 17.555 8.80006 18.6001C8.46869 19.0419 7.84189 19.1314 7.40006 18.8001C6.95823 18.4687 6.86869 17.8419 7.20006 17.4001C7.89819 16.4692 8.33612 15.682 8.6071 14.8691C8.87808 14.0561 9.00006 13.1636 9.00006 12.0001C9.00006 10.8365 8.87808 9.94398 8.6071 9.13104C8.33612 8.31811 7.89819 7.5309 7.20006 6.60006C6.86869 6.15823 6.95823 5.53143 7.40006 5.20006ZM4.80006 8.40006C4.46869 7.95823 3.84189 7.86869 3.40006 8.20006C2.95823 8.53143 2.86869 9.15823 3.20006 9.60006C3.52771 10.0369 3.71564 10.3829 3.82924 10.7237C3.94284 11.0645 4.00006 11.454 4.00006 12.0001C4.00006 12.5461 3.94284 12.9357 3.82924 13.2765C3.71564 13.6173 3.52771 13.9632 3.20006 14.4001C2.86869 14.8419 2.95823 15.4687 3.40006 15.8001C3.84189 16.1314 4.46869 16.0419 4.80006 15.6001C5.21338 15.049 5.52545 14.5124 5.7266 13.9089C5.92776 13.3054 6.00006 12.6889 6.00006 12.0001C6.00006 11.3112 5.92776 10.6947 5.7266 10.0912C5.52545 9.48774 5.21338 8.95115 4.80006 8.40006Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconContactless;

package/src/components/icons/svg/IconDisabilityCard.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDisabilityCard = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6ZM6.09958 9.00504C5.55003 8.95008 5.05999 9.35103 5.00504 9.90057C4.95008 10.4501 5.35103 10.9402 5.90057 10.9951L9.09958 11.315L9.10008 11.3151C9.61103 11.3664 10.0001 11.7965 10.0001 12.3101V13.2297C10.0001 13.6113 9.9273 13.9893 9.78566 14.3435L9.78551 14.3439L8.0716 18.6287C7.86648 19.1415 8.1159 19.7234 8.62868 19.9286C9.0604 20.1012 9.54115 19.9518 9.80477 19.5942C9.85436 19.527 9.89627 19.4524 9.92874 19.3712L11.8393 14.5948C11.848 14.573 11.8611 14.5532 11.8777 14.5366C11.9454 14.4689 12.0552 14.4689 12.1229 14.5366C12.1366 14.5504 12.148 14.5664 12.1564 14.5839L12.3573 15.0861L12.3575 15.0867L14.0714 19.3715C14.2766 19.8843 14.8585 20.1337 15.3713 19.9286C15.4565 19.8945 15.5344 19.85 15.6042 19.7971C15.9547 19.532 16.0998 19.0561 15.9287 18.6284L14.1964 14.2975C14.0665 13.9566 13.9999 13.5948 13.9999 13.2297V12.3101C13.9999 11.7965 14.3889 11.3665 14.8998 11.3151L14.9004 11.315L18.0994 10.9951C18.649 10.9402 19.0499 10.4501 18.995 9.90057C18.94 9.35103 18.45 8.95008 17.9004 9.00504L14.7014 9.32494L13.4289 9.45219C12.9219 9.48202 12.4343 9.50013 12 9.50013C11.5658 9.50013 11.0781 9.48201 10.571 9.45218L9.29859 9.32494L6.09958 9.00504Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDisabilityCard;

package/src/components/icons/svg/IconDriverLicense.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDriverLicense = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 8h-.87593c-.91773 0-1.7177.62459-1.94028 1.51493L4.56252 12H8V8Zm-.87593-2C5.2886 6 3.68867 7.24919 3.2435 9.02986l-.82358 3.29434C.99656 12.9369 0 14.352 0 16v3c0 .5523.44772 1 1 1h3.17071C4.58254 21.1652 5.69378 22 7 22s2.41746-.8348 2.82929-2h4.34141c.4118 1.1652 1.5231 2 2.8293 2s2.4175-.8348 2.8293-2H23c.5523 0 1-.4477 1-1v-3c0-2.2091-1.7909-4-4-4h-.999l-1.8945-3.78885C16.429 6.85601 15.0439 6 13.5288 6H7.12407ZM19.8293 18H22v-2c0-1.1046-.8954-2-2-2H4c-1.10457 0-2 .8954-2 2v2h2.17071C4.58254 16.8348 5.69378 16 7 16s2.41746.8348 2.82929 2h4.34141c.4118-1.1652 1.5231-2 2.8293-2s2.4175.8348 2.8293 2ZM10 8v4h6.7649l-1.4472-2.89443C14.9789 8.428 14.2864 8 13.5288 8H10ZM8 19c0 .5523-.44772 1-1 1s-1-.4477-1-1 .44772-1 1-1 1 .4477 1 1Zm9 1c.5523 0 1-.4477 1-1s-.4477-1-1-1-1 .4477-1 1 .4477 1 1 1Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDriverLicense;

package/src/components/icons/svg/IconHealthCard.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconHealthCard = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM10 4C8.89543 4 8 4.89543 8 6V8H6C4.89543 8 4 8.89543 4 10V14C4 15.1046 4.89543 16 6 16H8V18C8 19.1046 8.89543 20 10 20H14C15.1046 20 16 19.1046 16 18V16H18C19.1046 16 20 15.1046 20 14V10C20 8.89543 19.1046 8 18 8H16V6C16 4.89543 15.1046 4 14 4H10ZM14 9V6H10V9C10 9.55228 9.55228 10 9 10H6V14H9C9.55228 14 10 14.4477 10 15V18H14V15C14 14.4477 14.4477 14 15 14H18V10H15C14.4477 10 14 9.55228 14 9Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconHealthCard;

package/src/components/icons/svg/IconKey.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconKey = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 12c0-1.6569 1.3431-3 3-3s3 1.3431 3 3-1.3431 3-3 3-3-1.3431-3-3Zm-1.901.9952A1.01133 1.01133 0 0 1 14 13H8v3c0 .5523-.44772 1-1 1s-1-.4477-1-1v-3H4v1c0 .5523-.44772 1-1 1s-1-.4477-1-1v-1H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h13c.0334 0 .0665.0016.099.0048C14.5604 8.72019 16.5793 7 19 7c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.4207 0-4.4396-1.7202-4.901-4.0048Z"
+    />
+  </Svg>
+);
+
+export default IconKey;

package/src/components/icons/svg/IconKeyboard.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconKeyboard = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 18C10.9 18 10 18.9 10 20C10 21.1 10.9 22 12 22C13.1 22 14 21.1 14 20C14 18.9 13.1 18 12 18ZM4 2C2.9 2 2 2.9 2 4C2 5.1 2.9 6 4 6C5.1 6 6 5.1 6 4C6 2.9 5.1 2 4 2ZM4 10C2.9 10 2 10.9 2 12C2 13.1 2.9 14 4 14C5.1 14 6 13.1 6 12C6 10.9 5.1 10 4 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM20 10C18.9 10 18 10.9 18 12C18 13.1 18.9 14 20 14C21.1 14 22 13.1 22 12C22 10.9 21.1 10 20 10ZM20 2C18.9 2 18 2.9 18 4C18 5.1 18.9 6 20 6C21.1 6 22 5.1 22 4C22 2.9 21.1 2 20 2ZM12 2C10.9 2 10 2.9 10 4C10 5.1 10.9 6 12 6C13.1 6 14 5.1 14 4C14 2.9 13.1 2 12 2Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconKeyboard;

package/src/components/icons/svg/IconNotification.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconNotification = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17 8c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.2091 0-4 1.79086-4 4s1.7909 4 4 4ZM8 1h3.8027c-.3377.58383-.5799 1.22984-.7052 1.91667H8c-1.65685 0-3 1.28718-3 2.875V19.2083c0 1.5879 1.34315 2.875 3 2.875h6c1.6569 0 3-1.2871 3-2.875V10c.7013 0 1.3744-.12031 2-.34141v9.54971C19 21.8547 16.7614 24 14 24H8c-2.76142 0-5-2.1453-5-4.7917V5.79167C3 3.1453 5.23858 1 8 1Zm4 18.2083c0 .5293-.4477.9584-1 .9584s-1-.4291-1-.9584c0-.5292.4477-.9583 1-.9583s1 .4291 1 .9583Z"
+    />
+  </Svg>
+);
+
+export default IconNotification;

package/src/components/icons/svg/IconOption.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconOption = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 6c0-1.65685 1.34315-3 3-3s3 1.34315 3 3-1.34315 3-3 3-3-1.34315-3-3Zm3-5C3.23858 1 1 3.23858 1 6s2.23858 5 5 5 5-2.23858 5-5-2.23858-5-5-5Zm12.0009 12c.5491 0 .9991.4477 1 1v3h2.9999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2.9999v3.0008c0 .5522-.4477 1-1 1s-1-.4478-1-1V19H14.002c-.5523 0-1-.4477-1-1s.4477-1 1-1h2.9989v-3c-.0009-.5523.4491-1 1-1ZM6 15c-1.65685 0-3 1.3431-3 3s1.34315 3 3 3 3-1.3431 3-3-1.34315-3-3-3Zm-5 3c0-2.7614 2.23858-5 5-5s5 2.2386 5 5-2.23858 5-5 5-5-2.2386-5-5ZM15 6c0-1.65685 1.3431-3 3-3s3 1.34315 3 3-1.3431 3-3 3-3-1.34315-3-3Zm3-5c-2.7614 0-5 2.23858-5 5s2.2386 5 5 5 5-2.23858 5-5-2.2386-5-5-5Z"
+    />
+  </Svg>
+);
+
+export default IconOption;

package/src/components/icons/svg/IconTransactions.tsx

@@ -7,7 +7,7 @@ const IconTransactions = ({ size, style, ...props }: SVGIconProps) => (
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M5 0C2.23858 0 0 2.23858 0 5v14c0 2.7614 2.23858 5 5 5h14c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v14c0 1.6569-1.3431 3-3 3H5c-1.65685 0-3-1.3431-3-3V5Zm7.70714.29289c.39056.39053.39056 1.02369 0 1.41422L7.41424 9H19c.5523 0 1 .44772 1 1 0 .5523-.4477 1-1 1H5.00003c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l4-4c.39053-.39052 1.02369-.39052 1.41422 0ZM14.2929 18.7071c-.3906-.3905-.3906-1.0237 0-1.4142L16.5858 15H4.99997c-.55228 0-1-.4477-1-1s.44772-1 1-1H19c.4044 0 .7691.2436.9239.6173.1547.3737.0692.8038-.2168 1.0898l-4 4c-.3905.3905-1.0237.3905-1.4142 0Z"
+      d="M8.70716 2.29289c.39053.39053.39053 1.02369 0 1.41422L3.41427 9H23.0001c.5522 0 1 .44772 1 1 0 .5523-.4478 1-1 1H1.00006c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l7-7c.39053-.39052 1.02369-.39052 1.41421 0ZM15.2929 21.7071c-.3905-.3905-.3905-1.0237 0-1.4142L20.5858 15H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h22c.4045 0 .7691.2436.9239.6173.1548.3737.0692.8038-.2168 1.0898l-7 7c-.3905.3905-1.0237.3905-1.4142 0Z"
       fill="currentColor"
     />
   </Svg>

package/src/components/icons/svg/IconTransactionsBoxed.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconTransactionsBoxed = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 0C2.23858 0 0 2.23858 0 5v14c0 2.7614 2.23858 5 5 5h14c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v14c0 1.6569-1.3431 3-3 3H5c-1.65685 0-3-1.3431-3-3V5Zm7.70714.29289c.39056.39053.39056 1.02369 0 1.41422L7.41424 9H19c.5523 0 1 .44772 1 1 0 .5523-.4477 1-1 1H5.00003c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l4-4c.39053-.39052 1.02369-.39052 1.41422 0ZM14.2929 18.7071c-.3906-.3905-.3906-1.0237 0-1.4142L16.5858 15H4.99997c-.55228 0-1-.4477-1-1s.44772-1 1-1H19c.4044 0 .7691.2436.9239.6173.1547.3737.0692.8038-.2168 1.0898l-4 4c-.3905.3905-1.0237.3905-1.4142 0Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconTransactionsBoxed;

package/src/components/icons/svg/originals/IconChange.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 16.2929C24.0976 16.6834 24.0976 17.3166 23.7071 17.7071C23.3166 18.0976 22.6834 18.0976 22.2929 17.7071L20 15.4142L20 17C20 20.866 16.866 24 13 24L5 24C4.44772 24 4 23.5523 4 23C4 22.4477 4.44772 22 5 22L13 22C15.7614 22 18 19.7614 18 17L18 15.4142L15.7071 17.7071C15.3166 18.0976 14.6834 18.0976 14.2929 17.7071C13.9024 17.3166 13.9024 16.6834 14.2929 16.2929L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929L23.7071 16.2929ZM6 7C6 4.23858 8.23858 2 11 2L19 2C19.5523 2 20 1.55228 20 1C20 0.447716 19.5523 1.94416e-07 19 2.18557e-07L11 5.68248e-07C7.13401 7.37236e-07 4 3.13401 4 7L4 8.58579L1.70711 6.29289C1.31658 5.90237 0.683417 5.90237 0.292892 6.29289C-0.0976322 6.68342 -0.0976322 7.31658 0.292892 7.70711L4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9.70711 7.70711C10.0976 7.31658 10.0976 6.68342 9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L6 8.58578L6 7Z" fill="#2B2E38"/>
+</svg>

package/src/components/icons/svg/originals/IconContactless.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4936 0.391611C17.1576 -0.046682 16.5299 -0.129581 16.0916 0.206451C15.6533 0.542483 15.5704 1.1702 15.9064 1.60849C18.0423 4.39441 19.0001 7.59351 19.0001 12.0001C19.0001 16.4066 18.0423 19.6057 15.9064 22.3916C15.5704 22.8299 15.6533 23.4576 16.0916 23.7937C16.5299 24.1297 17.1576 24.0468 17.4936 23.6085C19.9577 20.3944 21.0001 16.7355 21.0001 12.0001C21.0001 7.26465 19.9578 3.60569 17.4936 0.391611ZM12.8001 2.40006C12.4687 1.95823 11.8419 1.86869 11.4001 2.20006C10.9582 2.53143 10.8687 3.15823 11.2001 3.60006C12.2687 5.02488 12.9566 6.25335 13.385 7.53842C13.8133 8.8235 14.0001 10.219 14.0001 12.0001C14.0001 13.7811 13.8133 15.1766 13.385 16.4617C12.9566 17.7468 12.2687 18.9752 11.2001 20.4001C10.8687 20.8419 10.9582 21.4687 11.4001 21.8001C11.8419 22.1314 12.4687 22.0419 12.8001 21.6001C13.9543 20.061 14.7664 18.6419 15.2823 17.0942C15.7982 15.5464 16.0001 13.9239 16.0001 12.0001C16.0001 10.0762 15.7982 8.45372 15.2823 6.90597C14.7664 5.35822 13.9543 3.93911 12.8001 2.40006ZM7.40006 5.20006C7.84189 4.86869 8.46869 4.95823 8.80006 5.40006C9.58386 6.44513 10.1459 7.42298 10.5045 8.49859C10.863 9.5742 11.0001 10.6937 11.0001 12.0001C11.0001 13.3064 10.863 14.4259 10.5045 15.5015C10.1459 16.5771 9.58386 17.555 8.80006 18.6001C8.46869 19.0419 7.84189 19.1314 7.40006 18.8001C6.95823 18.4687 6.86869 17.8419 7.20006 17.4001C7.89819 16.4692 8.33612 15.682 8.6071 14.8691C8.87808 14.0561 9.00006 13.1636 9.00006 12.0001C9.00006 10.8365 8.87808 9.94398 8.6071 9.13104C8.33612 8.31811 7.89819 7.5309 7.20006 6.60006C6.86869 6.15823 6.95823 5.53143 7.40006 5.20006ZM4.80006 8.40006C4.46869 7.95823 3.84189 7.86869 3.40006 8.20006C2.95823 8.53143 2.86869 9.15823 3.20006 9.60006C3.52771 10.0369 3.71564 10.3829 3.82924 10.7237C3.94284 11.0645 4.00006 11.454 4.00006 12.0001C4.00006 12.5461 3.94284 12.9357 3.82924 13.2765C3.71564 13.6173 3.52771 13.9632 3.20006 14.4001C2.86869 14.8419 2.95823 15.4687 3.40006 15.8001C3.84189 16.1314 4.46869 16.0419 4.80006 15.6001C5.21338 15.049 5.52545 14.5124 5.7266 13.9089C5.92776 13.3054 6.00006 12.6889 6.00006 12.0001C6.00006 11.3112 5.92776 10.6947 5.7266 10.0912C5.52545 9.48774 5.21338 8.95115 4.80006 8.40006Z" fill="#BBC2D6"/>
+</svg>

package/src/components/icons/svg/originals/IconDisabilityCard.svg

@@ -0,0 +1,7 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6ZM6.09958 9.00504C5.55003 8.95008 5.05999 9.35103 5.00504 9.90057C4.95008 10.4501 5.35103 10.9402 5.90057 10.9951L9.09958 11.315L9.10008 11.3151C9.61103 11.3664 10.0001 11.7965 10.0001 12.3101V13.2297C10.0001 13.6113 9.9273 13.9893 9.78566 14.3435L9.78551 14.3439L8.0716 18.6287C7.86648 19.1415 8.1159 19.7234 8.62868 19.9286C9.0604 20.1012 9.54115 19.9518 9.80477 19.5942C9.85436 19.527 9.89627 19.4524 9.92874 19.3712L11.8393 14.5948C11.848 14.573 11.8611 14.5532 11.8777 14.5366C11.9454 14.4689 12.0552 14.4689 12.1229 14.5366C12.1366 14.5504 12.148 14.5664 12.1564 14.5839L12.3573 15.0861L12.3575 15.0867L14.0714 19.3715C14.2766 19.8843 14.8585 20.1337 15.3713 19.9286C15.4565 19.8945 15.5344 19.85 15.6042 19.7971C15.9547 19.532 16.0998 19.0561 15.9287 18.6284L14.1964 14.2975C14.0665 13.9566 13.9999 13.5948 13.9999 13.2297V12.3101C13.9999 11.7965 14.3889 11.3665 14.8998 11.3151L14.9004 11.315L18.0994 10.9951C18.649 10.9402 19.0499 10.4501 18.995 9.90057C18.94 9.35103 18.45 8.95008 17.9004 9.00504L14.7014 9.32494L13.4289 9.45219C12.9219 9.48202 12.4343 9.50013 12 9.50013C11.5658 9.50013 11.0781 9.48201 10.571 9.45218L9.29859 9.32494L6.09958 9.00504Z"    
+    fill="#BBC2D6"/>
+</svg>

package/src/components/icons/svg/originals/IconDriverLicense.svg

@@ -0,0 +1,8 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 8h-.87593c-.91773 0-1.7177.62459-1.94028 1.51493L4.56252 12H8V8Zm-.87593-2C5.2886 6 3.68867 7.24919 3.2435 9.02986l-.82358 3.29434C.99656 12.9369 0 14.352 0 16v3c0 .5523.44772 1 1 1h3.17071C4.58254 21.1652 5.69378 22 7 22s2.41746-.8348 2.82929-2h4.34141c.4118 1.1652 1.5231 2 2.8293 2s2.4175-.8348 2.8293-2H23c.5523 0 1-.4477 1-1v-3c0-2.2091-1.7909-4-4-4h-.999l-1.8945-3.78885C16.429 6.85601 15.0439 6 13.5288 6H7.12407ZM19.8293 18H22v-2c0-1.1046-.8954-2-2-2H4c-1.10457 0-2 .8954-2 2v2h2.17071C4.58254 16.8348 5.69378 16 7 16s2.41746.8348 2.82929 2h4.34141c.4118-1.1652 1.5231-2 2.8293-2s2.4175.8348 2.8293 2ZM10 8v4h6.7649l-1.4472-2.89443C14.9789 8.428 14.2864 8 13.5288 8H10ZM8 19c0 .5523-.44772 1-1 1s-1-.4477-1-1 .44772-1 1-1 1 .4477 1 1Zm9 1c.5523 0 1-.4477 1-1s-.4477-1-1-1-1 .4477-1 1 .4477 1 1 1Z"
+    fill="#BBC2D6"
+  />
+</svg>

package/src/components/icons/svg/originals/IconHealthCard.svg

@@ -0,0 +1,7 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM10 4C8.89543 4 8 4.89543 8 6V8H6C4.89543 8 4 8.89543 4 10V14C4 15.1046 4.89543 16 6 16H8V18C8 19.1046 8.89543 20 10 20H14C15.1046 20 16 19.1046 16 18V16H18C19.1046 16 20 15.1046 20 14V10C20 8.89543 19.1046 8 18 8H16V6C16 4.89543 15.1046 4 14 4H10ZM14 9V6H10V9C10 9.55228 9.55228 10 9 10H6V14H9C9.55228 14 10 14.4477 10 15V18H14V15C14 14.4477 14.4477 14 15 14H18V10H15C14.4477 10 14 9.55228 14 9Z"    
+    fill="#BBC2D6"/>
+</svg>

package/src/components/icons/svg/originals/IconKey.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16 12c0-1.6569 1.3431-3 3-3s3 1.3431 3 3-1.3431 3-3 3-3-1.3431-3-3Zm-1.901.9952A1.01133 1.01133 0 0 1 14 13H8v3c0 .5523-.44772 1-1 1s-1-.4477-1-1v-3H4v1c0 .5523-.44772 1-1 1s-1-.4477-1-1v-1H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h13c.0334 0 .0665.0016.099.0048C14.5604 8.72019 16.5793 7 19 7c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.4207 0-4.4396-1.7202-4.901-4.0048Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconKeyboard.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 18C10.9 18 10 18.9 10 20C10 21.1 10.9 22 12 22C13.1 22 14 21.1 14 20C14 18.9 13.1 18 12 18ZM4 2C2.9 2 2 2.9 2 4C2 5.1 2.9 6 4 6C5.1 6 6 5.1 6 4C6 2.9 5.1 2 4 2ZM4 10C2.9 10 2 10.9 2 12C2 13.1 2.9 14 4 14C5.1 14 6 13.1 6 12C6 10.9 5.1 10 4 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM20 10C18.9 10 18 10.9 18 12C18 13.1 18.9 14 20 14C21.1 14 22 13.1 22 12C22 10.9 21.1 10 20 10ZM20 2C18.9 2 18 2.9 18 4C18 5.1 18.9 6 20 6C21.1 6 22 5.1 22 4C22 2.9 21.1 2 20 2ZM12 2C10.9 2 10 2.9 10 4C10 5.1 10.9 6 12 6C13.1 6 14 5.1 14 4C14 2.9 13.1 2 12 2Z" fill="#BBC2D6"/>
+</svg>

package/src/components/icons/svg/originals/IconNotification.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 8c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.2091 0-4 1.79086-4 4s1.7909 4 4 4ZM8 1h3.8027c-.3377.58383-.5799 1.22984-.7052 1.91667H8c-1.65685 0-3 1.28718-3 2.875V19.2083c0 1.5879 1.34315 2.875 3 2.875h6c1.6569 0 3-1.2871 3-2.875V10c.7013 0 1.3744-.12031 2-.34141v9.54971C19 21.8547 16.7614 24 14 24H8c-2.76142 0-5-2.1453-5-4.7917V5.79167C3 3.1453 5.23858 1 8 1Zm4 18.2083c0 .5293-.4477.9584-1 .9584s-1-.4291-1-.9584c0-.5292.4477-.9583 1-.9583s1 .4291 1 .9583Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconOption.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 6c0-1.65685 1.34315-3 3-3s3 1.34315 3 3-1.34315 3-3 3-3-1.34315-3-3Zm3-5C3.23858 1 1 3.23858 1 6s2.23858 5 5 5 5-2.23858 5-5-2.23858-5-5-5Zm12.0009 12c.5491 0 .9991.4477 1 1v3h2.9999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2.9999v3.0008c0 .5522-.4477 1-1 1s-1-.4478-1-1V19H14.002c-.5523 0-1-.4477-1-1s.4477-1 1-1h2.9989v-3c-.0009-.5523.4491-1 1-1ZM6 15c-1.65685 0-3 1.3431-3 3s1.34315 3 3 3 3-1.3431 3-3-1.34315-3-3-3Zm-5 3c0-2.7614 2.23858-5 5-5s5 2.2386 5 5-2.23858 5-5 5-5-2.2386-5-5ZM15 6c0-1.65685 1.3431-3 3-3s3 1.34315 3 3-1.3431 3-3 3-3-1.34315-3-3Zm3-5c-2.7614 0-5 2.23858-5 5s2.2386 5 5 5 5-2.23858 5-5-2.2386-5-5-5Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconTransactions.svg

@@ -0,0 +1,8 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.70716 2.29289c.39053.39053.39053 1.02369 0 1.41422L3.41427 9H23.0001c.5522 0 1 .44772 1 1 0 .5523-.4478 1-1 1H1.00006c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l7-7c.39053-.39052 1.02369-.39052 1.41421 0ZM15.2929 21.7071c-.3905-.3905-.3905-1.0237 0-1.4142L20.5858 15H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h22c.4045 0 .7691.2436.9239.6173.1548.3737.0692.8038-.2168 1.0898l-7 7c-.3905.3905-1.0237.3905-1.4142 0Z"
+    fill="#BBC2D6"
+  />
+</svg>

package/src/components/icons/svg/originals/IconTransactionsBoxed.svg

@@ -0,0 +1,8 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5 0C2.23858 0 0 2.23858 0 5v14c0 2.7614 2.23858 5 5 5h14c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v14c0 1.6569-1.3431 3-3 3H5c-1.65685 0-3-1.3431-3-3V5Zm7.70714.29289c.39056.39053.39056 1.02369 0 1.41422L7.41424 9H19c.5523 0 1 .44772 1 1 0 .5523-.4477 1-1 1H5.00003c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l4-4c.39053-.39052 1.02369-.39052 1.41422 0ZM14.2929 18.7071c-.3906-.3905-.3906-1.0237 0-1.4142L16.5858 15H4.99997c-.55228 0-1-.4477-1-1s.44772-1 1-1H19c.4044 0 .7691.2436.9239.6173.1547.3737.0692.8038-.2168 1.0898l-4 4c-.3905.3905-1.0237.3905-1.4142 0Z"
+    fill="#BBC2D6"
+  />
+</svg>

package/src/components/index.tsx

@@ -6,9 +6,11 @@ export * from "./buttons";
 export * from "./checkbox";
 export * from "./contentWrapper";
 export * from "./divider";
+export * from "./featureInfo";
 export * from "./icons";
 export * from "./listitems";
 export * from "./logos";
+export * from "./modules";
 export * from "./banner";
 export * from "./pictograms";
 export * from "./radio";