@pagopa/io-app-design-system 1.8.0 → 1.9.1

package/lib/typescript/components/pictograms/svg/PictogramObjManual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramObjManual.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramObjManual.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,QAAA,MAAM,kBAAkB,8BAA+B,iBAAiB,sBAWvE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/typescript/components/pictograms/svg/PictogramObjTrash.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SVGPictogramProps } from "../Pictogram";
+declare const PictogramObjTrash: ({ size, color, ...props }: SVGPictogramProps) => React.JSX.Element;
+export default PictogramObjTrash;
+//# sourceMappingURL=PictogramObjTrash.d.ts.map

package/lib/typescript/components/pictograms/svg/PictogramObjTrash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramObjTrash.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramObjTrash.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,QAAA,MAAM,iBAAiB,8BAA+B,iBAAiB,sBAmBtE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/components/typography/ButtonText.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IOColors } from "src/core/IOColors";
+import { IOColors } from "../../core/IOColors";
 import { IOFontWeight } from "../../utils/fonts";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 export type ButtonTextAllowedColors = Extract<IOColors, "white" | "blueIO-500" | "grey-700">;

package/lib/typescript/components/typography/ButtonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/ButtonText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAC3C,QAAQ,EACR,OAAO,GAAG,YAAY,GAAG,UAAU,CACpC,CAAC;AACF,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAE5E,KAAK,eAAe,GAAG,uBAAuB,CAC5C,eAAe,CAAC,aAAa,EAAE,uBAAuB,CAAC,CACxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAWrC;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,gCAchD,CAAC"}
+{"version":3,"file":"ButtonText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/ButtonText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAC3C,QAAQ,EACR,OAAO,GAAG,YAAY,GAAG,UAAU,CACpC,CAAC;AACF,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAE5E,KAAK,eAAe,GAAG,uBAAuB,CAC5C,eAAe,CAAC,aAAa,EAAE,uBAAuB,CAAC,CACxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAWrC;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,gCAchD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/buttons/IconButtonContained.tsx

@@ -11,7 +11,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { WithTestID } from "src/utils/types";
+import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
   IOIcons,

package/src/components/featureInfo/FeatureInfo.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { GestureResponderEvent, View } from "react-native";
+import { IOStyles } from "../../core";
+import {
+  HSpacer,
+  IOIconSizeScale,
+  IOIcons,
+  IOPictogramSizeScale,
+  IOPictograms,
+  Icon,
+  LabelLink,
+  LabelSmall,
+  Pictogram,
+  VSpacer
+} from "../../components";
+
+type PartialFeatureInfo = {
+  // Necessary to render main body with different formatting
+  body?: string | React.ReactNode;
+};
+
+type FeatureInfoActionProps =
+  | {
+      actionLabel?: string;
+      actionOnPress: (event: GestureResponderEvent) => void;
+    }
+  | {
+      actionLabel?: never;
+      actionOnPress?: never;
+    };
+
+type FeatureInfoGraphicProps =
+  | { iconName?: never; pictogramName: IOPictograms }
+  | { iconName: IOIcons; pictogramName?: never };
+
+type FeatureInfo = FeatureInfoGraphicProps &
+  PartialFeatureInfo &
+  FeatureInfoActionProps;
+
+const DEFAULT_ICON_SIZE: IOIconSizeScale = 24;
+const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
+
+const renderNode = (body: FeatureInfo["body"]) => {
+  if (typeof body === "string") {
+    return (
+      <LabelSmall weight="Regular" color="grey-700" testID="infoScreenBody">
+        {body}
+      </LabelSmall>
+    );
+  }
+
+  return body;
+};
+
+export const FeatureInfo = ({
+  iconName,
+  pictogramName,
+  body,
+  actionLabel,
+  actionOnPress
+}: FeatureInfo) => (
+  <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
+    {iconName && (
+      <Icon name={iconName} size={DEFAULT_ICON_SIZE} color="grey-300" />
+    )}
+    {pictogramName && (
+      <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
+    )}
+    <HSpacer size={24} />
+    <View style={{ flexShrink: 1 }}>
+      {renderNode(body)}
+      {actionLabel && actionOnPress && (
+        <>
+          {/* Add "marginTop" equivalent if body text is present.
+          This verbose code could be deleted once we got "gap"
+          property support */}
+          {body && <VSpacer size={8} />}
+          <LabelLink fontSize="small" onPress={actionOnPress}>
+            {actionLabel}
+          </LabelLink>
+        </>
+      )}
+    </View>
+  </View>
+);

package/src/components/featureInfo/index.tsx

@@ -0,0 +1 @@
+export * from "./FeatureInfo";

package/src/components/icons/Icon.tsx

@@ -148,11 +148,15 @@ import IconOption from "./svg/IconOption";
 import IconKey from "./svg/IconKey";
 import IconNotification from "./svg/IconNotification";
 import IconChange from "./svg/IconChange";
-import IconDialpad from "./svg/IconDialpad";
 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,
@@ -237,8 +241,9 @@ export const IOIcons = {
   starEmpty: IconStarEmpty,
   switchOff: IconSwitchOff,
   device: IconDevice,
+  contactless: IconContactless,
   notification: IconNotification,
-  dialpad: IconDialpad,
+  keyboard: IconKeyboard,
   dotMenu: IconDotMenu,
   barcode: IconBarcode,
   save: IconSave,
@@ -251,6 +256,9 @@ export const IOIcons = {
   cancel: IconCancel,
   help: IconQuestion,
   search: IconSearch,
+  disabilityCard: IconDisabilityCard,
+  driverLicense: IconDriverLicense,
+  healthCard: IconHealthCard,
   chevronRight: IconChevronRight,
   chevronLeft: IconChevronLeft,
   chevronBottom: IconChevronBottom,

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/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/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/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/index.tsx

@@ -6,6 +6,7 @@ export * from "./buttons";
 export * from "./checkbox";
 export * from "./contentWrapper";
 export * from "./divider";
+export * from "./featureInfo";
 export * from "./icons";
 export * from "./listitems";
 export * from "./logos";

package/src/components/pictograms/Pictogram.tsx

@@ -17,13 +17,10 @@ import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
 import PictogramError from "./svg/PictogramError";
 import PictogramFeedback from "./svg/PictogramFeedback";
 import PictogramFireworks from "./svg/PictogramFireworks";
-import PictogramFollowMessage from "./svg/PictogramFollowMessage";
 import PictogramHeart from "./svg/PictogramHeart";
 import PictogramHourglass from "./svg/PictogramHourglass";
-import PictogramIBANCard from "./svg/PictogramIBANCard";
 import PictogramInProgress from "./svg/PictogramInProgress";
 import PictogramInbox from "./svg/PictogramInbox";
-import PictogramManual from "./svg/PictogramManual";
 import PictogramNotAvailable from "./svg/PictogramNotAvailable";
 import PictogramPiggyBank from "./svg/PictogramPiggyBank";
 import PictogramPin from "./svg/PictogramPin";
@@ -53,11 +50,17 @@ import PictogramStopSecurity from "./svg/PictogramStopSecurity";
 import PictogramSecurity from "./svg/PictogramSecurity";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
-import PictogramTrash from "./svg/PictogramTrash";
 import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramCie from "./svg/PictogramCie";
 import PictogramFeature from "./svg/PictogramFeature";
+import PictogramObjClock from "./svg/PictogramObjClock";
+import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
+import PictogramObjManual from "./svg/PictogramObjManual";
+import PictogramObjTrash from "./svg/PictogramObjTrash";
+import PictogramObjKey from "./svg/PictogramObjKey";
+import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage";
+import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage";
 /* Bleed Pictograms */
 import PictogramBleedCharity from "./svg/PictogramBleedCharity";
 import PictogramBleedHelp from "./svg/PictogramBleedHelp";
@@ -99,10 +102,6 @@ export const IOPictograms = {
   heart: PictogramHeart,
   completed: PictogramCompleted,
   // End legacy pictograms
-  ibanCard: PictogramIBANCard,
-  followMessage: PictogramFollowMessage,
-  manual: PictogramManual,
-  trash: PictogramTrash,
   empty: PictogramEmpty,
   feature: PictogramFeature,
   charity: PictogramCharity,
@@ -125,7 +124,16 @@ export const IOPictograms = {
   security: PictogramSecurity,
   cie: PictogramCie,
   time: PictogramTime,
-  passcode: PictogramPasscode
+  passcode: PictogramPasscode,
+  // Start Objects Pictogram
+  ibanCard: PictogramObjIbanCard,
+  followMessage: PictogramObjFollowMessage,
+  manual: PictogramObjManual,
+  trash: PictogramObjTrash,
+  clock: PictogramObjClock,
+  key: PictogramObjKey,
+  flyingMessage: PictogramObjFlyingMessage
+  // End Objects Pictogram
 };
 
 export type IOPictograms = keyof typeof IOPictograms;
@@ -187,6 +195,23 @@ export const PictogramBleed = ({
   return <PictogramElement {...props} size={size} color={IOColors[color]} />;
 };
 
+/* Object Pictograms */
+
+const { ibanCard, followMessage, manual, trash, clock, key, flyingMessage } =
+  IOPictograms;
+
+export const IOPictogramsObject = {
+  ibanCard,
+  followMessage,
+  manual,
+  trash,
+  clock,
+  key,
+  flyingMessage
+} as const;
+
+export type IOPictogramsObject = keyof typeof IOPictogramsObject;
+
 /* Legacy pictograms */
 
 const {

package/src/components/pictograms/svg/PictogramObjClock.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramObjClock = ({ size, color, ...props }: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M121 240c65.722 0 119-53.726 119-120C240 53.7258 186.722 0 121 0 55.2781 0 2 53.7258 2 120c0 66.274 53.2781 120 119 120Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M117 53c1.105 0 2 .8954 2 2v63.983l52.678 38.401c.893.651 1.089 1.902.438 2.794-.651.893-1.902 1.089-2.794.438l-53.5-39c-.517-.376-.822-.977-.822-1.616V55c0-1.1046.895-2 2-2Z"
+      fill="#00C5CA"
+    />
+  </Svg>
+);
+
+export default PictogramObjClock;

package/src/components/pictograms/svg/PictogramObjFlyingMessage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramObjFlyingMessage = ({
+  size,
+  color,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M69.0186 82.1914 50.677 65.9896c-4.0915-3.6142-2.1733-10.357 3.2079-11.2764L224.344 25.5895c5.663-.9675 9.704 5.3495 6.451 10.085L152.866 149.143c-2.281 3.322-7.004 3.788-9.891.977l-9.628-9.374c-2.233-2.174-5.695-2.457-8.251-.675l-25.9573 18.102c-3.707 2.585-8.8556.691-10.003-3.68L71.002 85.4119a6.49865 6.49865 0 0 0-1.9834-3.2205Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M225.313 32.7611c.696-.4487.897-1.377.448-2.0734-.448-.6964-1.377-.8971-2.073-.4484l-117.3 75.5827c-.758.488-1.421 1.096-1.967 1.794-.17.071-.33.175-.469.311-.326.318-.476.748-.449 1.17-.243.509-.434 1.046-.566 1.603l-10.8962 45.954c-.1911.806.3074 1.615 1.1135 1.806.806.191 1.6144-.308 1.8056-1.114l10.7761-45.447 19.691 20.149c.579.593 1.529.604 2.121.025.593-.579.604-1.529.025-2.121l-20.426-20.902c.259-.265.549-.502.865-.706l117.301-75.5829Zm-29.836 10.6617c.785-.2629 1.209-1.1129.946-1.8985-.263-.7856-1.113-1.2093-1.899-.9463l-119.4997 40c-.7856.2629-1.2093 1.1129-.9463 1.8985.2629.7856 1.1129 1.2093 1.8985.9463l119.5005-40ZM89.7303 173.358c.474-.679.3075-1.614-.3719-2.088-.6795-.474-1.6145-.308-2.0885.372-14.7656 21.164-40.7893 42.307-85.63845 38.364-.82524-.073-1.55305.538-1.6256 1.363-.07254.825.53763 1.553 1.36288 1.625 46.15087 4.058 73.12717-17.8 88.36157-39.636Z"
+      fill="#00C5CA"
+    />
+  </Svg>
+);
+
+export default PictogramObjFlyingMessage;

package/src/components/pictograms/svg/{PictogramFollowMessage.tsx → PictogramObjFollowMessage.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFollowMessage = ({
+const PictogramObjFollowMessage = ({
   size,
   color,
   ...props
@@ -19,4 +19,4 @@ const PictogramFollowMessage = ({
   </Svg>
 );
 
-export default PictogramFollowMessage;
+export default PictogramObjFollowMessage;

package/src/components/pictograms/svg/PictogramObjIbanCard.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Svg, G, Mask, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramObjIbanCard = ({ size, color, ...props }: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.75195 53c-2.20914 0-4 1.7909-4 4v109.372c0 2.209 1.79086 4 4 4H182.916c-.598-2.353-.916-4.818-.916-7.357 0-16.448 13.334-29.781 29.781-29.781 2.302 0 4.542.261 6.693.755V57c0-2.2091-1.791-4-4-4H8.75195Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M70 70.5273c0-.5522.4477-1 1-1h130c.552 0 1 .4478 1 1 0 .5523-.448 1-1 1H71c-.5523 0-1-.4477-1-1ZM70 81c0-.5523.4477-1 1-1h79c.552 0 1 .4477 1 1s-.448 1-1 1H71c-.5523 0-1-.4477-1-1Z"
+      fill="#00C5CA"
+    />
+    <Path
+      d="M79.0801 109v-1.5h1.695v-7.5001h-1.695v-1.5h5.01v1.5h-1.695V107.5h1.695v1.5h-5.01ZM88.6282 109v-8.94h-2.94v-1.5601h7.59v1.5601h-3.03V109h-1.62ZM101.265 108.265v-8.5201l.555.4201-2.0702 1.095-.435-1.4101 2.8052-1.5h.78v9.9151h-1.635Zm-1.6652.735v-1.56h5.0102V109h-5.0102ZM106.905 109l-.495-1.23 3.21-3.615c.17-.18.345-.385.525-.615.19-.24.37-.485.54-.735.17-.25.305-.495.405-.735.11-.25.165-.485.165-.705 0-.32-.065-.59-.195-.81-.12-.23-.3-.405-.54-.525-.23-.1201-.51-.1801-.84-.1801-.29 0-.575.085-.855.2551-.28.17-.535.41-.765.72-.23.31-.41.67-.54 1.08l-1.245-.78c.17-.58.425-1.075.765-1.4851.35-.42.765-.74 1.245-.96.49-.22 1.02-.33 1.59-.33.59 0 1.115.125 1.575.375.46.24.82.58 1.08 1.02.26.4301.39.9301.39 1.5001 0 .29-.04.59-.12.9-.08.3-.21.615-.39.945-.17.33-.39.68-.66 1.05-.27.36-.595.745-.975 1.155l-2.385 2.595-.3-.45h5.16V109h-6.345ZM121.697 109.15c-.74 0-1.385-.17-1.935-.51-.54-.34-1.05-.91-1.53-1.71l1.26-.795c.25.37.495.675.735.915.25.23.505.4.765.51.26.11.535.165.825.165.35 0 .675-.085.975-.255.3-.18.54-.425.72-.735.18-.31.27-.66.27-1.05s-.07-.72-.21-.99c-.14-.28-.345-.49-.615-.63-.27-.15-.59-.225-.96-.225-.17 0-.35.02-.54.06-.18.03-.375.08-.585.15-.21.06-.44.14-.69.24l-.45-1.185 3.24-3.5701.315.465h-4.47v-1.5h6.015l.3.6-3.435 3.8101-.375-.39c.08-.04.21-.075.39-.105.19-.04.345-.06.465-.06.44 0 .85.085 1.23.255.39.16.725.39 1.005.69.29.29.515.635.675 1.035.17.39.255.81.255 1.26 0 .68-.165 1.29-.495 1.83-.32.53-.755.95-1.305 1.26-.55.31-1.165.465-1.845.465ZM135.355 109v-8.46l.375.09-3.45 4.215-.06-.18h6.525v1.485h-7.53l-.69-1.35 5.145-6.3001h1.245V109h-1.56ZM143.232 109.105c-.69 0-1.315-.155-1.875-.465-.56-.32-1.025-.775-1.395-1.365l.9-1.005c.47.52.88.875 1.23 1.065.35.19.73.285 1.14.285.41 0 .78-.09 1.11-.27.33-.18.59-.425.78-.735.2-.31.3-.655.3-1.035 0-.4-.095-.755-.285-1.065-.18-.32-.425-.57-.735-.75-.31-.19-.66-.285-1.05-.285-.19 0-.37.015-.54.045-.17.02-.375.075-.615.165-.24.09-.555.23-.945.42l-.855-1.155.615-4.4551h5.67v1.5h-4.65l.315-.285-.495 3.3301-.375-.435c.1-.1.27-.195.51-.285.24-.1.505-.18.795-.24.3-.07.585-.105.855-.105.64 0 1.21.15 1.71.45.51.29.91.695 1.2 1.215.3.52.45 1.115.45 1.785 0 .69-.165 1.315-.495 1.875-.33.55-.78.99-1.35 1.32-.57.32-1.21.48-1.92.48ZM152.147 109c-.52 0-1.005-.09-1.455-.27-.44-.19-.825-.45-1.155-.78-.32-.33-.575-.72-.765-1.17-.18-.45-.27-.945-.27-1.485 0-.36.065-.78.195-1.26.14-.48.34-1.005.6-1.575.27-.57.6-1.18.99-1.83l1.365-2.3101h1.575l.06.15-1.65 2.7751c-.3.51-.57.995-.81 1.455-.23.46-.425.895-.585 1.305-.16.4-.28.765-.36 1.095l-.36-1.545c.25-.41.53-.755.84-1.035.31-.28.645-.49 1.005-.63.36-.15.745-.225 1.155-.225.58 0 1.11.16 1.59.48.49.31.88.725 1.17 1.245.3.52.45 1.09.45 1.71 0 .75-.155 1.42-.465 2.01-.3.58-.72 1.04-1.26 1.38-.54.34-1.16.51-1.86.51Zm0-1.5c.39 0 .735-.09 1.035-.27.31-.19.55-.45.72-.78.18-.34.27-.725.27-1.155 0-.37-.09-.715-.27-1.035-.18-.33-.42-.595-.72-.795-.3-.2-.635-.3-1.005-.3-.41 0-.775.095-1.095.285-.32.19-.57.445-.75.765-.18.32-.27.675-.27 1.065 0 .42.09.8.27 1.14.18.33.425.595.735.795.31.19.67.285 1.08.285ZM157.932 109l4.35-9.4801.18.48h-5.31v-1.5h6.495l.21 1.035L159.672 109h-1.74ZM168.424 109.045c-.65 0-1.245-.135-1.785-.405-.53-.28-.955-.65-1.275-1.11-.32-.46-.48-.97-.48-1.53 0-.31.04-.6.12-.87.09-.28.22-.535.39-.765.18-.23.395-.44.645-.63s.54-.36.87-.51l-.09.315c-.35-.13-.65-.3-.9-.51-.25-.22-.445-.47-.585-.75-.13-.28-.195-.585-.195-.915 0-.53.145-1.01.435-1.4401.3-.43.695-.775 1.185-1.035.5-.26 1.055-.39 1.665-.39.61 0 1.16.13 1.65.39.5.26.895.605 1.185 1.035.3.4301.45.9101.45 1.4401 0 .33-.065.63-.195.9s-.32.515-.57.735c-.25.21-.56.39-.93.54l-.045-.255c.4.16.75.38 1.05.66.3.28.535.6.705.96.17.35.255.715.255 1.095 0 .57-.16 1.085-.48 1.545-.32.46-.75.825-1.29 1.095-.53.27-1.125.405-1.785.405Zm0-1.5c.37 0 .7-.07.99-.21.3-.14.535-.33.705-.57.17-.24.255-.515.255-.825 0-.33-.085-.62-.255-.87-.17-.26-.405-.465-.705-.615-.29-.15-.62-.225-.99-.225s-.7.075-.99.225c-.29.15-.52.355-.69.615-.17.25-.255.54-.255.87 0 .3.085.57.255.81.17.24.4.435.69.585.29.14.62.21.99.21Zm0-4.755c.32 0 .605-.06.855-.18.26-.12.46-.28.6-.48.15-.21.225-.45.225-.72 0-.27-.075-.51-.225-.72-.14-.21-.34-.375-.6-.495-.25-.13-.535-.1951-.855-.1951-.32 0-.61.0651-.87.1951-.25.12-.45.285-.6.495-.14.21-.21.45-.21.72 0 .27.07.51.21.72.15.2.35.36.6.48.26.12.55.18.87.18ZM180.4 109l-.06-.15 3.12-6.63.045 1.245c-.23.39-.5.73-.81 1.02-.31.28-.645.495-1.005.645-.36.15-.725.225-1.095.225-.57 0-1.095-.15-1.575-.45-.48-.3-.865-.7-1.155-1.2-.29-.5-.435-1.045-.435-1.635 0-.71.16-1.345.48-1.905.32-.5701.755-1.0201 1.305-1.3501.56-.33 1.185-.495 1.875-.495.5 0 .97.09 1.41.27.44.18.825.435 1.155.765.33.32.59.6951.78 1.1251.19.42.285.87.285 1.35 0 .25-.025.52-.075.81-.05.28-.135.6-.255.96-.11.35-.26.755-.45 1.215-.19.45-.425.975-.705 1.575L181.99 109h-1.59Zm.54-5.145c.39 0 .74-.085 1.05-.255.31-.18.55-.415.72-.705.18-.3.27-.635.27-1.005 0-.39-.085-.74-.255-1.05-.17-.32-.41-.57-.72-.75-.3-.1801-.645-.2701-1.035-.2701-.36 0-.68.09-.96.2701-.28.17-.505.41-.675.72-.16.3-.24.655-.24 1.065 0 .35.08.675.24.975.17.3.395.545.675.735.28.18.59.27.93.27ZM189.786 109.15c-.8 0-1.49-.22-2.07-.66-.57-.44-1.01-1.06-1.32-1.86-.31-.81-.465-1.77-.465-2.88 0-1.11.155-2.065.465-2.865.31-.81.75-1.4351 1.32-1.8751.58-.44 1.27-.66 2.07-.66.8 0 1.49.22 2.07.66.58.44 1.025 1.0651 1.335 1.8751.31.8.465 1.755.465 2.865 0 1.11-.155 2.07-.465 2.88-.31.8-.755 1.42-1.335 1.86-.58.44-1.27.66-2.07.66Zm0-1.47c.73 0 1.295-.34 1.695-1.02.4-.69.6-1.66.6-2.91 0-1.25-.2-2.215-.6-2.895-.4-.69-.965-1.0351-1.695-1.0351-.73 0-1.295.3451-1.695 1.0351-.4.68-.6 1.645-.6 2.895s.2 2.22.6 2.91c.4.68.965 1.02 1.695 1.02ZM196.063 109.165c-.33 0-.585-.095-.765-.285-.18-.2-.27-.48-.27-.84 0-.33.095-.6.285-.81.19-.21.44-.315.75-.315.33 0 .585.1.765.3.18.19.27.465.27.825 0 .33-.095.6-.285.81-.19.21-.44.315-.75.315ZM199.476 109.165c-.33 0-.585-.095-.765-.285-.18-.2-.27-.48-.27-.84 0-.33.095-.6.285-.81.19-.21.44-.315.75-.315.33 0 .585.1.765.3.18.19.27.465.27.825 0 .33-.095.6-.285.81-.19.21-.44.315-.75.315ZM202.889 109.165c-.33 0-.585-.095-.765-.285-.18-.2-.27-.48-.27-.84 0-.33.095-.6.285-.81.19-.21.44-.315.75-.315.33 0 .585.1.765.3.18.19.27.465.27.825 0 .33-.095.6-.285.81-.19.21-.44.315-.75.315ZM189.487 167.917c.916 3.589 2.418 6.519 4.609 9.06 5.033 5.835 11.453 8.665 19.111 8.1 10.177-.752 17.811-7.865 20.213-16.735.44-1.633.729-3.289.749-4.994.014-1.204.231-1.544.824-1.582.648-.044.851.327.811 1.691-.163 5.168-1.838 9.815-4.942 13.918-4.029 5.331-9.428 8.566-15.993 9.393-13.081 1.643-23.496-6.362-26.698-17.347-.108-.374-.261-.735-.43-1.208-.506.653-.93 1.239-1.394 1.783-.285.333-.689.429-1.042.109-.315-.286-.423-.667-.145-1.055.854-1.184 1.709-2.368 2.581-3.541.088-.116.259-.275.532-.256.273.019 2.52 1.599 3.781 2.426.394.259.696.606.401 1.13-.262.466-.692.541-1.293.19-.485-.282-.942-.609-1.671-1.085l-.004.003ZM235.257 156.748c.468-.65.811-1.245 1.279-1.715.217-.217.793-.353 1.004-.214.223.146.396.779.264.997-.736 1.194-1.536 2.354-2.387 3.47-.302.395-.835.316-1.242.054-1.132-.728-2.255-1.479-3.374-2.231-.383-.255-.499-.606-.238-1.014.248-.385.628-.504 1.025-.299.542.282 1.054.629 1.756 1.054-.054-.439-.044-.738-.135-1.003-2.839-8.455-8.638-13.779-17.286-15.572-11.809-2.446-23.004 4.988-26.118 15.834-.532 1.85-.902 3.708-.936 5.633-.02 1.123-.318 1.538-.936 1.453-.549-.075-.763-.432-.705-1.49.275-5.202 1.933-9.914 5.128-14.034 3.971-5.127 9.224-8.202 15.587-9.161 11.863-1.79 22.99 5.324 26.595 16.258.207.633.451 1.252.716 1.98h.003Z"
+      fill="#00C5CA"
+    />
+    <Path
+      d="M225.929 162.518c-.071 7.917-6.332 14.486-14.505 14.469-7.99-.017-14.414-6.311-14.424-14.53-.014-8.09 6.447-14.493 14.485-14.469 8.282.027 14.42 6.753 14.447 14.534l-.003-.004Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M212.596 155.673c0-.329-.267-.596-.596-.596-.33 0-.597.267-.597.596v5.965h-5.964c-.33 0-.597.267-.597.596 0 .33.267.597.597.597h5.964v5.965c0 .33.267.597.597.597.329 0 .596-.267.596-.597v-5.965h5.965c.329 0 .596-.267.596-.597 0-.329-.267-.596-.596-.596h-5.965v-5.965Z"
+      fill="#00C5CA"
+    />
+    <Mask
+      id="a"
+      // style="mask-type:alpha"
+      // maskUnits="userSpaceOnUse"
+      x="2"
+      y="64"
+      width="50"
+      height="90"
+    >
+      <Path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.20187 64.6594c.3327-.4409.95977-.5285 1.40059-.1958L47.6431 97.7018c1.5317 1.156.7142 3.5962-1.2048 3.5962H4.75188c-.55229 0-1-.448-1-1 0-.5521.44771-.9998 1-.9998H46.4383L2.39765 66.06c-.44083-.3327-.52848-.9598-.19578-1.4006Z"
+        fill="#00C5CA"
+      />
+      <Path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.7739 99.298h14.2628v47.547H24.7739V99.298Zm2 2v43.547h10.2628v-43.547H26.7739ZM3.75195 100.298c0-.5523.44772-1 1-1h7.13135v47.547H4.75195c-.55228 0-1-.447-1-1 0-.552.44772-1 1-1h5.13138v-43.547H4.75195c-.55228 0-1-.448-1-1Z"
+        fill="#00C5CA"
+      />
+      <Path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.75195 145.845c0-.552.44772-1 1-1H48.2993c1.6569 0 3 1.344 3 3v3.008c0 1.657-1.3431 3-3 3H4.75195c-.55228 0-1-.448-1-1 0-.553.44772-1 1-1H48.2993c.5523 0 1-.448 1-1v-3.008c0-.552-.4477-1-1-1H4.75195c-.55228 0-1-.447-1-1Z"
+        fill="#00C5CA"
+      />
+    </Mask>
+    <G mask="url(#a)">
+      <Path fill="#00C5CA" d="M55.5547 52.125H4.7519v108.613h50.8028z" />
+    </G>
+  </Svg>
+);
+
+export default PictogramObjIbanCard;

package/src/components/pictograms/svg/PictogramObjKey.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramObjKey = ({ size, color, ...props }: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M205.558 116.024c23.689-15.042 30.699-46.4401 15.657-70.1294-15.042-23.6893-46.439-30.6995-70.129-15.6576-21.47 13.6329-29.24 40.7012-19.308 63.289L7.2705 172.584l10.7207 16.883 13.9341-8.847 18.8831 29.739 16.8839-10.721-18.8831-29.739 6.4264-4.08 25.3962 39.996 16.8839-10.721-25.3962-39.996 71.1445-45.174c16.498 15.744 42.175 18.874 62.294 6.1Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M141.896 51.8743c-7.104 13.7827-7.088 30.9232-1.533 42.9989l.549 1.1936L16.3012 174.768c-.7004.443-1.6269.233-2.0692-.467-.4424-.7-.2332-1.627.4672-2.069L137.107 94.9219c-5.407-12.8294-5.168-30.2783 2.122-44.4221 7.584-14.7126 22.762-25.7787 46.851-24.4968.827.0441 1.462.7504 1.418 1.5776-.044.8273-.75 1.4622-1.578 1.4182-22.911-1.2193-36.982 9.2135-44.024 22.8755ZM50.7094 203.765c-.7127.422-1.6328.187-2.0552-.526L34.1836 178.82c-.4223-.713-.1869-1.633.5258-2.055.7127-.423 1.6328-.187 2.0551.525l14.4706 24.42c.4224.712.187 1.632-.5257 2.055ZM83.7168 200.777c-.7087.429-1.6309.202-2.0599-.507l-21.4466-35.433c-.429-.709-.2022-1.631.5065-2.06.7088-.429 1.631-.202 2.06.506l21.4466 35.434c.429.709.2022 1.631-.5066 2.06Z"
+      fill="#00C5CA"
+    />
+  </Svg>
+);
+
+export default PictogramObjKey;

package/src/components/pictograms/svg/{PictogramManual.tsx → PictogramObjManual.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramManual = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramObjManual = ({ size, color, ...props }: SVGPictogramProps) => (
   <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M218 43.2264c0-2.8129-1.802-5.2921-4.529-5.9848-7.953-2.0206-25.405-5.5643-44.471-3.7317-26 2.4992-49 19.4983-49 19.4983V53S97 36.5013 71 34.0021c-19.0657-1.8326-36.5182 1.7111-44.4714 3.7317C23.8023 38.4265 22 40.9057 22 43.7186V55H6.49869C2.90956 55 0 57.9096 0 61.4987V199.501C0 203.09 2.90956 206 6.49869 206H234.501c3.589 0 6.499-2.91 6.499-6.499V61.4987C241 57.9096 238.09 55 234.501 55H218V43.2264Z"
@@ -15,4 +15,4 @@ const PictogramManual = ({ size, color, ...props }: SVGPictogramProps) => (
   </Svg>
 );
 
-export default PictogramManual;
+export default PictogramObjManual;

package/src/components/pictograms/svg/{PictogramTrash.tsx → PictogramObjTrash.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramTrash = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramObjTrash = ({ size, color, ...props }: SVGPictogramProps) => (
   <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       fillRule="evenodd"
@@ -23,4 +23,4 @@ const PictogramTrash = ({ size, color, ...props }: SVGPictogramProps) => (
   </Svg>
 );
 
-export default PictogramTrash;
+export default PictogramObjTrash;

package/src/components/pictograms/svg/originals/PictogramObjClock.svg

@@ -0,0 +1,12 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M121 240c65.722 0 119-53.726 119-120C240 53.7258 186.722 0 121 0 55.2781 0 2 53.7258 2 120c0 66.274 53.2781 120 119 120Z"
+    fill="#AAEEEF"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M117 53c1.105 0 2 .8954 2 2v63.983l52.678 38.401c.893.651 1.089 1.902.438 2.794-.651.893-1.902 1.089-2.794.438l-53.5-39c-.517-.376-.822-.977-.822-1.616V55c0-1.1046.895-2 2-2Z"
+    fill="#00C5CA"
+  />
+</svg>