@pagopa/io-app-design-system 2.0.0 → 2.0.2

package/src/components/layout/FooterWithButtons.tsx

@@ -44,7 +44,9 @@ const verticalSpacing: IOSpacingScale = 16;
 /**
  * Implements a component that show buttons as sticky footer
  * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
- * @deprecated This component is deprecated. Use `FooterActions` in the main `io-app` repo instead.
+ * @deprecated This component is deprecated. Use `FooterActions` or `FooterActionsInline` instead.
+ * `FooterActionsInline` is the official replacement for `FooterWithButtons`, but use it only
+ * if explicitly required.
  */
 export const FooterWithButtons = ({
   sticky = false,

package/src/components/layout/HeaderFirstLevel.tsx

@@ -23,7 +23,7 @@ import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HSpacer } from "../spacer";
 import { H3 } from "../typography";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type CommonProps = WithTestID<{
   title: string;
@@ -41,23 +41,23 @@ interface Base extends CommonProps {
 
 interface OneAction extends CommonProps {
   type: "singleAction";
-  firstAction: ActionProp;
+  firstAction: HeaderActionProps;
   secondAction?: never;
   thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
   thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
   type: "threeActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
-  thirdAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
+  thirdAction: HeaderActionProps;
 }
 
 export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;

package/src/components/layout/HeaderSecondLevel.tsx

@@ -30,14 +30,15 @@ import {
   hexToRgba,
   iconBtnSizeSmall,
   useIOExperimentalDesign,
-  useIOTheme
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
 import { IOText } from "../typography";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type ScrollValues = {
   contentOffsetY: SharedValue<number>;
@@ -85,23 +86,23 @@ interface Base extends CommonProps {
 
 interface OneAction extends CommonProps {
   type: "singleAction";
-  firstAction: ActionProp;
+  firstAction: HeaderActionProps;
   secondAction?: never;
   thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
   thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
   type: "threeActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
-  thirdAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
+  thirdAction: HeaderActionProps;
 }
 
 export type HeaderSecondLevel = BackProps &
@@ -156,21 +157,26 @@ export const HeaderSecondLevel = ({
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
   const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
+  const iconButtonColorDefault: ComponentProps<typeof IconButton>["color"] =
+    themeType === "dark" ? "contrast" : "neutral";
+
   const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
-    variant === "neutral" ? "neutral" : "contrast";
+    variant === "contrast" ? "contrast" : iconButtonColorDefault;
+
   const titleColor: ColorValue =
     variant === "neutral"
       ? IOColors[theme["textHeading-default"]]
       : IOColors.white;
 
   /* Visual attributes when there are transitions between states */
-  const HEADER_DEFAULT_BG_COLOR: IOColors = "white";
+  const HEADER_DEFAULT_BG_COLOR: IOColors = theme["appBackground-primary"];
 
   const headerBgColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
@@ -181,10 +187,12 @@ export const HeaderSecondLevel = ({
   const headerBgColorSolidState =
     backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
 
+  const borderColorDefault = IOColors[theme["divider-default"]];
+
   const borderColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
-    : hexToRgba(IOColors["grey-100"], 0);
-  const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
+    : hexToRgba(borderColorDefault, 0);
+  const borderColorSolidState = backgroundColor ?? borderColorDefault;
 
   useLayoutEffect(() => {
     if (isTitleAccessible) {

package/src/components/layout/common.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { IconButton } from "../buttons";
 
-export type ActionProp = Pick<
+export type HeaderActionProps = Pick<
   React.ComponentProps<typeof IconButton>,
   "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
 >;

package/src/components/layout/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useFooterActionsMeasurements";
+export * from "./useFooterActionsInlineMeasurements";

package/src/components/layout/hooks/useBottomMargins.ts

@@ -0,0 +1,30 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IOSpacingScale, IOVisualCostants } from "../../../core";
+
+/* Extra bottom margin for iPhone bottom handle because
+   ButtonLink doesn't have a fixed height */
+const extraSafeAreaMargin: IOSpacingScale = 8;
+
+export const useBottomMargins = (
+  withSecondaryAction: boolean = false,
+  excludeSafeAreaMargins: boolean = false
+) => {
+  const insets = useSafeAreaInsets();
+  const needSafeAreaMargin = insets.bottom !== 0;
+
+  /* Check if the iPhone bottom handle is present.
+     If not, or if you don't need safe area insets,
+     add a default margin to prevent the button
+     from sticking to the bottom. */
+  const bottomMargin =
+    !needSafeAreaMargin || excludeSafeAreaMargins
+      ? IOVisualCostants.appMarginDefault
+      : insets.bottom;
+
+  /* When the secondary action is visible, add extra margin
+     to avoid little space from iPhone bottom handle */
+  const extraBottomMargin =
+    withSecondaryAction && needSafeAreaMargin ? extraSafeAreaMargin : 0;
+
+  return { bottomMargin, extraBottomMargin };
+};

package/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { FooterActionsInlineMeasurements } from "../FooterActionsInline";
+
+type UseFooterActionsInlineMeasurementsProps = {
+  footerActionsInlineMeasurements: FooterActionsInlineMeasurements;
+  handleFooterActionsInlineMeasurements: (
+    values: FooterActionsInlineMeasurements
+  ) => void;
+};
+/**
+ * Custom hook to handle the `FooterActions` measurements
+ * @returns
+ *   - `footerActionsInlineMeasurements`
+ *      Object containing the `FooterActionsInline` measurements
+ *   - `handleFooterActionsInlineMeasurements`
+ *      Function to update the footer actions measurements
+ *      (to be applied to `onMeasure` prop of `FooterActionsInline`)
+ */
+export const useFooterActionsInlineMeasurements =
+  (): UseFooterActionsInlineMeasurementsProps => {
+    const [
+      footerActionsInlineMeasurements,
+      setFooterActionsInlineMeasurements
+    ] = useState<FooterActionsInlineMeasurements>({
+      safeBottomAreaHeight: 0
+    });
+
+    const handleFooterActionsInlineMeasurements = (
+      values: FooterActionsInlineMeasurements
+    ) => {
+      setFooterActionsInlineMeasurements(values);
+    };
+
+    return {
+      footerActionsInlineMeasurements,
+      handleFooterActionsInlineMeasurements
+    };
+  };

package/src/components/layout/hooks/useFooterActionsMeasurements.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { FooterActionsMeasurements } from "../FooterActions";
+
+type UseFooterActionsMeasurementsProps = {
+  footerActionsMeasurements: FooterActionsMeasurements;
+  handleFooterActionsMeasurements: (values: FooterActionsMeasurements) => void;
+};
+/**
+ * Custom hook to handle the `FooterActions` measurements
+ * @returns
+ *   - `footerActionsMeasurements`
+ *      Object containing the `FooterActions` measurements
+ *   - `handleFooterActionsMeasurements`
+ *      Function to update the footer actions measurements
+ *      (to be applied to `onMeasure` prop of `FooterActions`)
+ */
+export const useFooterActionsMeasurements =
+  (): UseFooterActionsMeasurementsProps => {
+    const [footerActionsMeasurements, setFooterActionsMeasurements] =
+      useState<FooterActionsMeasurements>({
+        actionBlockHeight: 0,
+        safeBottomAreaHeight: 0
+      });
+
+    const handleFooterActionsMeasurements = (
+      values: FooterActionsMeasurements
+    ) => {
+      setFooterActionsMeasurements(values);
+    };
+
+    return {
+      footerActionsMeasurements,
+      handleFooterActionsMeasurements
+    };
+  };

package/src/components/layout/index.tsx

@@ -1,4 +1,6 @@
 export * from "./BlockButtons";
+export * from "./FooterActions";
+export * from "./FooterActionsInline";
 export * from "./FooterWithButtons";
 export * from "./ForceScrollDownView";
 export * from "./GradientBottomActions";
@@ -7,3 +9,4 @@ export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
 export * from "./ModalBSHeader";
 export * from "./common";
+export * from "./hooks";

package/src/components/pictograms/Pictogram.tsx

@@ -95,6 +95,7 @@ import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
 import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
 import PictogramEnded from "./svg/PictogramEnded";
 import PictogramEventClose from "./svg/PictogramEventClose";
+import PictogramFingerprint from "./svg/PictogramFingerprint";
 import PictogramIdea from "./svg/PictogramIdea";
 import PictogramLostConnection from "./svg/PictogramLostConnection";
 import PictogramMessage from "./svg/PictogramMessage";
@@ -106,8 +107,10 @@ import PictogramQrCode from "./svg/PictogramQrCode";
 import PictogramReactivate from "./svg/PictogramReactivate";
 import PictogramSearchLens from "./svg/PictogramSearchLens";
 import PictogramSettings from "./svg/PictogramSettings";
+import PictogramSmile from "./svg/PictogramSmile";
 import PictogramStar from "./svg/PictogramStar";
 import PictogramTiming from "./svg/PictogramTiming";
+import PictogramWalletDoc from "./svg/PictogramWalletDoc";
 import { IOPictogramSizeScale, SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
@@ -169,6 +172,9 @@ export const IOPictograms = {
   comunicationProblem: PictogramComunicationProblem,
   payments: PictogramPayments,
   workInProgress: PictogramWorkInProgress,
+  smile: PictogramSmile,
+  fingerprint: PictogramFingerprint,
+  walletDoc: PictogramWalletDoc,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -196,6 +202,7 @@ type PictogramPalette = {
   hands: ColorValue;
   main: ColorValue;
   secondary: ColorValue;
+  tertiary: ColorValue;
 };
 
 export const Pictogram = ({
@@ -223,7 +230,8 @@ export const Pictogram = ({
     () => ({
       hands: IOColors[themeObj["pictogram-hands"]],
       main: IOColors[themeObj["pictogram-tint-main"]],
-      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]],
+      tertiary: IOColors[themeObj["pictogram-tint-tertiary"]]
     }),
     [themeObj]
   );
@@ -365,7 +373,8 @@ export const PictogramBleed = ({
     () => ({
       hands: IOColors[themeObj["pictogram-hands"]],
       main: IOColors[themeObj["pictogram-tint-main"]],
-      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]],
+      tertiary: IOColors[themeObj["pictogram-tint-tertiary"]]
     }),
     [themeObj]
   );

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramFingerprint = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M78.365 84.373a1.251 1.251 0 0 1 -2.233 -0.675L73.183 44.48a1.251 1.251 0 0 1 2.492 -0.191l2.949 39.22a1.2 1.2 0 0 1 -0.267 0.867z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M92.667 89.816a1.245 1.245 0 0 1 -1.6 0.307 1.253 1.253 0 0 1 -0.467 -1.707l20.696 -36.137a1.253 1.253 0 0 1 2.176 1.24L92.773 89.659a1.333 1.333 0 0 1 -0.1 0.149z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="m118.32 142.176 23.688 2.641 -25.564 45.852c-2.8 5.024 -9.291 6.591 -14.073 3.4L4.392 128.785A9.853 9.853 0 0 1 2.04 114.579l29.613 -38.553c3.241 -4.216 9.249 -5.107 13.565 -2l50.269 36.129 -5.416 3.632 -9.891 5.992 -6.541 4.14 -4.833 3.925v4.516l1.667 2.025 4.467 1.091 7.849 -3.116 11.248 -4.833 2.367 4.833 1.416 4.7 2.184 0.816 1.091 6.865 4.249 5.125 7.475 3.816s4.291 -0.433 4.949 -0.875c0.659 -0.443 2.724 -2.184 2.724 -2.184l0.984 -3.049 -1.417 -3.816z"
+      fill={colorValues.tertiary}
+    />
+    <Path
+      d="M107.304 190.344a5.16 5.16 0 0 1 -2.916 -0.908L8.941 123.244A5.067 5.067 0 0 1 6.8 119.82a5.067 5.067 0 0 1 1.008 -3.908L35.973 79.541a5.115 5.115 0 0 1 6.965 -1.067l47.844 33.237a1.253 1.253 0 0 1 0.316 1.741 1.253 1.253 0 0 1 -1.741 0.317L41.512 80.533a2.62 2.62 0 0 0 -3.565 0.549L9.783 117.437a2.613 2.613 0 0 0 -0.516 2c0.108 0.716 0.5 1.34 1.091 1.749l95.447 66.191a2.587 2.587 0 0 0 2.075 0.4 2.587 2.587 0 0 0 1.692 -1.265l24.372 -43.095a1.247 1.247 0 1 1 2.175 1.224l-24.372 43.095a5.12 5.12 0 0 1 -4.457 2.592z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M73.235 137.051a6.72 6.72 0 0 1 -6.116 -3.875c-1.241 -2.616 -0.708 -5.649 1.341 -7.715 11.907 -11.983 40.504 -19.864 41.712 -20.189q0.136 -0.037 0.275 -0.051c38.72 -4.765 87.581 -21.713 88.072 -21.88l1.292 3.707c-0.492 0.176 -49.619 17.207 -88.739 22.056 -2.125 0.592 -29.055 8.291 -39.829 19.132 -1.057 1.067 -0.991 2.391 -0.573 3.267 0.2 0.424 1.04 1.773 2.857 1.607 8.157 -0.767 20.321 -4.573 31.947 -18.364l3.007 2.533C96 132.085 82.784 136.184 73.893 137.017a5.333 5.333 0 0 1 -0.667 0.033z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M99.231 139.567c-2.508 -0.832 -4.3 -2.408 -5.175 -4.54 -1.775 -4.3 0.641 -9.324 0.925 -9.883l3.507 1.767 -1.757 -0.884 1.759 0.876c-0.543 1.083 -1.733 4.391 -0.8 6.632 0.44 1.075 1.357 1.825 2.783 2.3l-1.241 3.724z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M114.813 155.84c-4.167 0 -9.04 -2.324 -13.115 -7.832 -2.859 -3.849 -3.741 -7.624 -2.625 -11.215 2.259 -7.257 12.067 -10.691 12.481 -10.832l1.276 3.716c-0.084 0.025 -8.349 2.933 -10.008 8.291 -0.724 2.349 -0.057 4.875 2.033 7.699 4.567 6.157 10.207 7.341 13.207 5.324 2.467 -1.667 2.567 -5.041 0.267 -8.815l3.359 -2.051c3.933 6.449 2.116 11.74 -1.425 14.124 -1.525 1.024 -3.392 1.583 -5.44 1.591z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M161.681 145.341c-24.88 0 -47.244 -2.808 -48.993 -3.032l0.5 -3.9c0.8 0.1 81.04 10.157 107.136 -7.565 12.224 -8.307 18.073 -24.005 14.899 -39.987 -3.283 -16.532 -15.132 -28.464 -31.696 -31.905l0.8 -3.849c18.164 3.775 31.153 16.856 34.745 34.987 3.483 17.54 -3.008 34.813 -16.54 44.004 -13.073 8.881 -38.02 11.248 -60.851 11.248"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M96.281 112.72c-0.533 -0.483 -5.157 -4.873 -4.324 -9.299 0.291 -1.557 1.391 -3.699 4.941 -5.073 8.832 -3.408 34.045 2.424 36.887 3.099l-0.908 3.825c-7.4 -1.759 -28.055 -5.783 -34.563 -3.259 -1.5 0.575 -2.333 1.292 -2.492 2.133 -0.341 1.8 1.951 4.608 3.116 5.683l-2.657 2.9z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramFingerprint;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramSmile = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M118.373 48.416c-1.925 -0.96 -4.276 -0.203 -5.251 1.693l-3.5 6.799 -0.053 0.121c-8.031 18.679 -12.457 33.252 -14.88 43.209 -1.211 4.979 -1.92 8.801 -2.331 11.405 -0.204 1.303 -0.333 2.3 -0.413 2.984a40 40 0 0 0 -0.103 1.007l-0.005 0.064 -0.001 0.021v0.007l-0.001 0.004s0 0.003 3.896 0.287l-3.896 -0.284 -0.005 0.065 -0.003 0.067c-0.268 6.657 3.584 11.48 7.889 14.44 4.229 2.908 9.444 4.441 13.387 4.441 2.157 0 3.907 -1.723 3.907 -3.848s-1.749 -3.848 -3.907 -3.848c-2.232 0 -5.901 -0.984 -8.913 -3.053 -2.915 -2.004 -4.656 -4.597 -4.557 -7.753a24 24 0 0 1 0.077 -0.747c0.067 -0.581 0.183 -1.476 0.372 -2.676 0.376 -2.4 1.045 -6.016 2.207 -10.789 2.317 -9.523 6.595 -23.652 14.425 -41.88l3.379 -6.564a3.82 3.82 0 0 0 -1.72 -5.172"
+      fill={colorValues.hands}
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M151.184 153.164a3.813 3.813 0 0 1 0.888 5.371l-3.171 -2.248a330.667 330.667 0 0 1 3.168 2.252l-0.012 0.016 -0.024 0.032 -0.077 0.104 -0.273 0.355a45.333 45.333 0 0 1 -1.004 1.223 54.667 54.667 0 0 1 -3.749 3.956c-3.217 3.076 -7.952 6.873 -13.881 9.5 -5.969 2.644 -13.221 4.129 -21.285 2.413 -8.056 -1.715 -16.504 -6.535 -25.04 -15.765a3.807 3.807 0 0 1 0.259 -5.435 3.947 3.947 0 0 1 5.52 0.253c7.715 8.344 14.803 12.124 20.912 13.425 6.099 1.297 11.639 0.212 16.429 -1.909 4.829 -2.14 8.824 -5.308 11.644 -8.004a46.667 46.667 0 0 0 3.208 -3.384c0.363 -0.425 0.633 -0.761 0.808 -0.984q0.132 -0.167 0.189 -0.244l0.039 -0.051 0.003 -0.004m5.451 -0.872c-1.751 -1.24 -4.189 -0.851 -5.451 0.872z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramSmile;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramWalletDoc = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" fill="none" {...props}>
+    <Path
+      d="M84.112 141.587H75.08a5.821 5.821 0 0 1 -5.821 -5.821V28.785a5.821 5.821 0 0 1 5.821 -5.821h157.832a5.82 5.82 0 0 1 5.82 5.821v105.511a5.82 5.82 0 0 1 -5.82 5.821H131.904l-3.093 -5.619 -7.291 -6.521 -8.288 -2.096 -8.067 0.22 -10.384 5.415 -10.661 10.053z"
+      fill={colorValues.tertiary}
+    />
+    <Path
+      d="m56.485 164.693 -3.625 3.48a0.48 0.48 0 0 0 -0.152 0.355 0.533 0.533 0 0 0 0.144 0.364l2.763 2.881a0.533 0.533 0 0 0 0.363 0.152c0.127 0 0.253 -0.051 0.356 -0.144l42.115 -40.392c1.333 -0.641 10.501 -4.807 19.017 -1.841 5.28 1.833 9.469 6.083 12.453 12.631 -0.06 1.267 -0.449 4.891 -2.957 6.235 -3.347 1.791 -10.207 -0.659 -18.807 -6.708a0.493 0.493 0 0 0 -0.38 -0.084 0.52 0.52 0 0 0 -0.329 0.211l-2.289 3.261a0.507 0.507 0 0 0 -0.085 0.38c0.027 0.135 0.101 0.253 0.212 0.329 10.831 7.62 18.704 9.919 24.069 7.012 5.761 -3.117 5.584 -10.899 5.576 -11.228a2.533 2.533 0 0 0 -0.212 -0.912c-3.573 -8.161 -8.837 -13.493 -15.637 -15.84 -11.38 -3.937 -22.785 2.053 -23.267 2.307a2.667 2.667 0 0 0 -0.549 0.396l-35.145 33.7 -18.324 -16.804a0.507 0.507 0 0 0 -0.719 0.035l-2.695 2.94a0.511 0.511 0 0 0 0.025 0.717l18.088 16.584z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M172.657 139.923a0.507 0.507 0 0 0 -0.464 -0.304l-4.191 0.041a0.507 0.507 0 0 0 -0.423 0.229 0.52 0.52 0 0 0 -0.041 0.481c0.971 2.239 1.985 6.048 1.165 7.527 -0.727 1.319 -2.383 1.767 -2.821 1.859h-0.304c-0.863 0 -1.699 0.025 -2.544 0.051 1.783 -3.835 0.929 -7.755 -0.515 -9.917a0.573 0.573 0 0 0 -0.44 -0.229l-4.131 0.119a0.493 0.493 0 0 0 -0.448 0.339 0.547 0.547 0 0 0 0.144 0.557c0.271 0.253 1.267 2.297 1.14 4.713 -0.101 1.969 -0.904 3.616 -2.373 4.9 -30.127 3.532 -50.184 24.019 -66.591 40.781 -9.267 9.469 -17.267 17.648 -25.049 20.697 -11.168 4.368 -26.891 -7.197 -38.127 -17.665 -12.621 -11.768 -22.447 -24.804 -22.54 -24.939a0.493 0.493 0 0 0 -0.339 -0.195 0.533 0.533 0 0 0 -0.38 0.093l-3.185 2.391a0.507 0.507 0 0 0 -0.101 0.709c1.395 1.859 34.411 45.528 59.503 45.528 2.475 0 4.824 -0.431 6.987 -1.276 8.777 -3.439 17.124 -11.971 26.807 -21.864 17.352 -17.733 38.947 -39.808 72.173 -39.808h0.491c0.16 0 0.244 0 0.363 -0.025 0.187 -0.025 4.512 -0.643 6.607 -4.368 1.555 -2.763 1.42 -6.277 -0.397 -10.443z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M210.591 65.864a4.093 4.093 0 0 1 -3.184 -1.512l-14.929 -18.248c-2.069 -2.535 -2.331 -6.083 -0.649 -8.829a10.76 10.76 0 0 1 9.225 -5.169 10.8 10.8 0 0 1 9.537 5.736c1.825 -3.413 5.416 -5.736 9.539 -5.736a10.76 10.76 0 0 1 9.225 5.169c1.681 2.747 1.42 6.295 -0.651 8.829l-14.928 18.248a4.107 4.107 0 0 1 -3.185 1.512M201.053 34.64a8.213 8.213 0 0 0 -7.063 3.961c-1.124 1.825 -0.939 4.2 0.447 5.897l14.929 18.248c0.599 0.735 1.849 0.744 2.449 0l14.928 -18.248c1.395 -1.699 1.572 -4.072 0.448 -5.897a8.24 8.24 0 0 0 -7.063 -3.961 8.28 8.28 0 0 0 -8.271 8.271h-2.535a8.28 8.28 0 0 0 -8.271 -8.271"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M238.732 109.619H69.251a1.267 1.267 0 0 1 -1.267 -1.267 1.267 1.267 0 0 1 1.267 -1.268h169.481a1.267 1.267 0 1 1 0 2.533"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M85.023 61.876h55.573a3.364 3.364 0 0 1 3.364 3.364v2.204a3.364 3.364 0 0 1 -3.364 3.364h-55.573a3.364 3.364 0 0 1 -3.364 -3.364V65.24a3.364 3.364 0 0 1 3.364 -3.364Z"
+      stroke={colorValues.main}
+      strokeWidth={2.6666666666666665}
+    />
+    <Path
+      d="M85.023 80.436h92.104a3.364 3.364 0 0 1 3.364 3.364v2.205a3.364 3.364 0 0 1 -3.364 3.364H85.023a3.364 3.364 0 0 1 -3.364 -3.364V83.8a3.364 3.364 0 0 1 3.364 -3.364Z"
+      stroke={colorValues.main}
+      strokeWidth={2.6666666666666665}
+    />
+  </Svg>
+);
+
+export default PictogramWalletDoc;

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M78.365 84.373a1.251 1.251 0 0 1 -2.233 -0.675L73.183 44.48a1.251 1.251 0 0 1 2.492 -0.191l2.949 39.22a1.2 1.2 0 0 1 -0.267 0.867z" fill="#AAEEEF"/><path d="M92.667 89.816a1.245 1.245 0 0 1 -1.6 0.307 1.253 1.253 0 0 1 -0.467 -1.707l20.696 -36.137a1.253 1.253 0 0 1 2.176 1.24L92.773 89.659a1.333 1.333 0 0 1 -0.1 0.149z" fill="#AAEEEF"/><path d="m118.32 142.176 23.688 2.641 -25.564 45.852c-2.8 5.024 -9.291 6.591 -14.073 3.4L4.392 128.785A9.853 9.853 0 0 1 2.04 114.579l29.613 -38.553c3.241 -4.216 9.249 -5.107 13.565 -2l50.269 36.129 -5.416 3.632 -9.891 5.992 -6.541 4.14 -4.833 3.925v4.516l1.667 2.025 4.467 1.091 7.849 -3.116 11.248 -4.833 2.367 4.833 1.416 4.7 2.184 0.816 1.091 6.865 4.249 5.125 7.475 3.816s4.291 -0.433 4.949 -0.875c0.659 -0.443 2.724 -2.184 2.724 -2.184l0.984 -3.049 -1.417 -3.816z" fill="#3C65E9"/><path d="M107.304 190.344a5.16 5.16 0 0 1 -2.916 -0.908L8.941 123.244A5.067 5.067 0 0 1 6.8 119.82a5.067 5.067 0 0 1 1.008 -3.908L35.973 79.541a5.115 5.115 0 0 1 6.965 -1.067l47.844 33.237a1.253 1.253 0 0 1 0.316 1.741 1.253 1.253 0 0 1 -1.741 0.317L41.512 80.533a2.62 2.62 0 0 0 -3.565 0.549L9.783 117.437a2.613 2.613 0 0 0 -0.516 2c0.108 0.716 0.5 1.34 1.091 1.749l95.447 66.191a2.587 2.587 0 0 0 2.075 0.4 2.587 2.587 0 0 0 1.692 -1.265l24.372 -43.095a1.247 1.247 0 1 1 2.175 1.224l-24.372 43.095a5.12 5.12 0 0 1 -4.457 2.592z" fill="#AAEEEF"/><path d="M73.235 137.051a6.72 6.72 0 0 1 -6.116 -3.875c-1.241 -2.616 -0.708 -5.649 1.341 -7.715 11.907 -11.983 40.504 -19.864 41.712 -20.189q0.136 -0.037 0.275 -0.051c38.72 -4.765 87.581 -21.713 88.072 -21.88l1.292 3.707c-0.492 0.176 -49.619 17.207 -88.739 22.056 -2.125 0.592 -29.055 8.291 -39.829 19.132 -1.057 1.067 -0.991 2.391 -0.573 3.267 0.2 0.424 1.04 1.773 2.857 1.607 8.157 -0.767 20.321 -4.573 31.947 -18.364l3.007 2.533C96 132.085 82.784 136.184 73.893 137.017a5.333 5.333 0 0 1 -0.667 0.033z" fill="white"/><path d="M99.231 139.567c-2.508 -0.832 -4.3 -2.408 -5.175 -4.54 -1.775 -4.3 0.641 -9.324 0.925 -9.883l3.507 1.767 -1.757 -0.884 1.759 0.876c-0.543 1.083 -1.733 4.391 -0.8 6.632 0.44 1.075 1.357 1.825 2.783 2.3l-1.241 3.724z" fill="white"/><path d="M114.813 155.84c-4.167 0 -9.04 -2.324 -13.115 -7.832 -2.859 -3.849 -3.741 -7.624 -2.625 -11.215 2.259 -7.257 12.067 -10.691 12.481 -10.832l1.276 3.716c-0.084 0.025 -8.349 2.933 -10.008 8.291 -0.724 2.349 -0.057 4.875 2.033 7.699 4.567 6.157 10.207 7.341 13.207 5.324 2.467 -1.667 2.567 -5.041 0.267 -8.815l3.359 -2.051c3.933 6.449 2.116 11.74 -1.425 14.124 -1.525 1.024 -3.392 1.583 -5.44 1.591z" fill="white"/><path d="M161.681 145.341c-24.88 0 -47.244 -2.808 -48.993 -3.032l0.5 -3.9c0.8 0.1 81.04 10.157 107.136 -7.565 12.224 -8.307 18.073 -24.005 14.899 -39.987 -3.283 -16.532 -15.132 -28.464 -31.696 -31.905l0.8 -3.849c18.164 3.775 31.153 16.856 34.745 34.987 3.483 17.54 -3.008 34.813 -16.54 44.004 -13.073 8.881 -38.02 11.248 -60.851 11.248" fill="white"/><path d="M96.281 112.72c-0.533 -0.483 -5.157 -4.873 -4.324 -9.299 0.291 -1.557 1.391 -3.699 4.941 -5.073 8.832 -3.408 34.045 2.424 36.887 3.099l-0.908 3.825c-7.4 -1.759 -28.055 -5.783 -34.563 -3.259 -1.5 0.575 -2.333 1.292 -2.492 2.133 -0.341 1.8 1.951 4.608 3.116 5.683l-2.657 2.9z" fill="white"/></svg>

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M118.373 48.416c-1.925 -0.96 -4.276 -0.203 -5.251 1.693l-3.5 6.799 -0.053 0.121c-8.031 18.679 -12.457 33.252 -14.88 43.209 -1.211 4.979 -1.92 8.801 -2.331 11.405 -0.204 1.303 -0.333 2.3 -0.413 2.984a40 40 0 0 0 -0.103 1.007l-0.005 0.064 -0.001 0.021v0.007l-0.001 0.004s0 0.003 3.896 0.287l-3.896 -0.284 -0.005 0.065 -0.003 0.067c-0.268 6.657 3.584 11.48 7.889 14.44 4.229 2.908 9.444 4.441 13.387 4.441 2.157 0 3.907 -1.723 3.907 -3.848s-1.749 -3.848 -3.907 -3.848c-2.232 0 -5.901 -0.984 -8.913 -3.053 -2.915 -2.004 -4.656 -4.597 -4.557 -7.753a24 24 0 0 1 0.077 -0.747c0.067 -0.581 0.183 -1.476 0.372 -2.676 0.376 -2.4 1.045 -6.016 2.207 -10.789 2.317 -9.523 6.595 -23.652 14.425 -41.88l3.379 -6.564a3.82 3.82 0 0 0 -1.72 -5.172" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M151.184 153.164a3.813 3.813 0 0 1 0.888 5.371l-3.171 -2.248a330.667 330.667 0 0 1 3.168 2.252l-0.012 0.016 -0.024 0.032 -0.077 0.104 -0.273 0.355a45.333 45.333 0 0 1 -1.004 1.223 54.667 54.667 0 0 1 -3.749 3.956c-3.217 3.076 -7.952 6.873 -13.881 9.5 -5.969 2.644 -13.221 4.129 -21.285 2.413 -8.056 -1.715 -16.504 -6.535 -25.04 -15.765a3.807 3.807 0 0 1 0.259 -5.435 3.947 3.947 0 0 1 5.52 0.253c7.715 8.344 14.803 12.124 20.912 13.425 6.099 1.297 11.639 0.212 16.429 -1.909 4.829 -2.14 8.824 -5.308 11.644 -8.004a46.667 46.667 0 0 0 3.208 -3.384c0.363 -0.425 0.633 -0.761 0.808 -0.984q0.132 -0.167 0.189 -0.244l0.039 -0.051 0.003 -0.004m5.451 -0.872c-1.751 -1.24 -4.189 -0.851 -5.451 0.872z" fill="white"/></svg>

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.112 141.587H75.08a5.821 5.821 0 0 1 -5.821 -5.821V28.785a5.821 5.821 0 0 1 5.821 -5.821h157.832a5.82 5.82 0 0 1 5.82 5.821v105.511a5.82 5.82 0 0 1 -5.82 5.821H131.904l-3.093 -5.619 -7.291 -6.521 -8.288 -2.096 -8.067 0.22 -10.384 5.415 -10.661 10.053z" fill="#3C65E9"/><path d="m56.485 164.693 -3.625 3.48a0.48 0.48 0 0 0 -0.152 0.355 0.533 0.533 0 0 0 0.144 0.364l2.763 2.881a0.533 0.533 0 0 0 0.363 0.152c0.127 0 0.253 -0.051 0.356 -0.144l42.115 -40.392c1.333 -0.641 10.501 -4.807 19.017 -1.841 5.28 1.833 9.469 6.083 12.453 12.631 -0.06 1.267 -0.449 4.891 -2.957 6.235 -3.347 1.791 -10.207 -0.659 -18.807 -6.708a0.493 0.493 0 0 0 -0.38 -0.084 0.52 0.52 0 0 0 -0.329 0.211l-2.289 3.261a0.507 0.507 0 0 0 -0.085 0.38c0.027 0.135 0.101 0.253 0.212 0.329 10.831 7.62 18.704 9.919 24.069 7.012 5.761 -3.117 5.584 -10.899 5.576 -11.228a2.533 2.533 0 0 0 -0.212 -0.912c-3.573 -8.161 -8.837 -13.493 -15.637 -15.84 -11.38 -3.937 -22.785 2.053 -23.267 2.307a2.667 2.667 0 0 0 -0.549 0.396l-35.145 33.7 -18.324 -16.804a0.507 0.507 0 0 0 -0.719 0.035l-2.695 2.94a0.511 0.511 0 0 0 0.025 0.717l18.088 16.584z" fill="white"/><path d="M172.657 139.923a0.507 0.507 0 0 0 -0.464 -0.304l-4.191 0.041a0.507 0.507 0 0 0 -0.423 0.229 0.52 0.52 0 0 0 -0.041 0.481c0.971 2.239 1.985 6.048 1.165 7.527 -0.727 1.319 -2.383 1.767 -2.821 1.859h-0.304c-0.863 0 -1.699 0.025 -2.544 0.051 1.783 -3.835 0.929 -7.755 -0.515 -9.917a0.573 0.573 0 0 0 -0.44 -0.229l-4.131 0.119a0.493 0.493 0 0 0 -0.448 0.339 0.547 0.547 0 0 0 0.144 0.557c0.271 0.253 1.267 2.297 1.14 4.713 -0.101 1.969 -0.904 3.616 -2.373 4.9 -30.127 3.532 -50.184 24.019 -66.591 40.781 -9.267 9.469 -17.267 17.648 -25.049 20.697 -11.168 4.368 -26.891 -7.197 -38.127 -17.665 -12.621 -11.768 -22.447 -24.804 -22.54 -24.939a0.493 0.493 0 0 0 -0.339 -0.195 0.533 0.533 0 0 0 -0.38 0.093l-3.185 2.391a0.507 0.507 0 0 0 -0.101 0.709c1.395 1.859 34.411 45.528 59.503 45.528 2.475 0 4.824 -0.431 6.987 -1.276 8.777 -3.439 17.124 -11.971 26.807 -21.864 17.352 -17.733 38.947 -39.808 72.173 -39.808h0.491c0.16 0 0.244 0 0.363 -0.025 0.187 -0.025 4.512 -0.643 6.607 -4.368 1.555 -2.763 1.42 -6.277 -0.397 -10.443z" fill="white"/><path d="M210.591 65.864a4.093 4.093 0 0 1 -3.184 -1.512l-14.929 -18.248c-2.069 -2.535 -2.331 -6.083 -0.649 -8.829a10.76 10.76 0 0 1 9.225 -5.169 10.8 10.8 0 0 1 9.537 5.736c1.825 -3.413 5.416 -5.736 9.539 -5.736a10.76 10.76 0 0 1 9.225 5.169c1.681 2.747 1.42 6.295 -0.651 8.829l-14.928 18.248a4.107 4.107 0 0 1 -3.185 1.512M201.053 34.64a8.213 8.213 0 0 0 -7.063 3.961c-1.124 1.825 -0.939 4.2 0.447 5.897l14.929 18.248c0.599 0.735 1.849 0.744 2.449 0l14.928 -18.248c1.395 -1.699 1.572 -4.072 0.448 -5.897a8.24 8.24 0 0 0 -7.063 -3.961 8.28 8.28 0 0 0 -8.271 8.271h-2.535a8.28 8.28 0 0 0 -8.271 -8.271" fill="#AAEEEF"/><path d="M238.732 109.619H69.251a1.267 1.267 0 0 1 -1.267 -1.267 1.267 1.267 0 0 1 1.267 -1.268h169.481a1.267 1.267 0 1 1 0 2.533" fill="#AAEEEF"/><path d="M85.023 61.876h55.573a3.364 3.364 0 0 1 3.364 3.364v2.204a3.364 3.364 0 0 1 -3.364 3.364h-55.573a3.364 3.364 0 0 1 -3.364 -3.364V65.24a3.364 3.364 0 0 1 3.364 -3.364Z" stroke="#AAEEEF" stroke-width="2.6666666666666665"/><path d="M85.023 80.436h92.104a3.364 3.364 0 0 1 3.364 3.364v2.205a3.364 3.364 0 0 1 -3.364 3.364H85.023a3.364 3.364 0 0 1 -3.364 -3.364V83.8a3.364 3.364 0 0 1 3.364 -3.364Z" stroke="#AAEEEF" stroke-width="2.6666666666666665"/></svg>

package/src/core/IOColors.ts

@@ -277,14 +277,17 @@ const themeKeys = [
   "icon-default",
   "icon-decorative",
   // Layout
+  "divider-header",
   "divider-default",
+  "divider-bottomBar",
   // Status
   "errorIcon",
   "errorText",
   // Pictograms
   "pictogram-hands",
   "pictogram-tint-main",
-  "pictogram-tint-secondary"
+  "pictogram-tint-secondary",
+  "pictogram-tint-tertiary"
 ] as const;
 
 export type IOTheme = {
@@ -312,14 +315,17 @@ export const IOThemeLight: IOTheme = {
   "icon-default": "grey-650",
   "icon-decorative": "grey-300",
   // Layout
+  "divider-header": "grey-100",
   "divider-default": "grey-200",
+  "divider-bottomBar": "grey-200",
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",
-  "pictogram-tint-secondary": "turquoise-500"
+  "pictogram-tint-secondary": "turquoise-500",
+  "pictogram-tint-tertiary": "blueIO-400"
 };
 
 export const IOThemeLightLegacy: IOTheme = {
@@ -349,7 +355,9 @@ export const IOThemeDark: IOTheme = {
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
   // Layout
+  "divider-header": "grey-850",
   "divider-default": "grey-850",
+  "divider-bottomBar": "grey-850",
   // Status
   errorIcon: "error-400",
   errorText: "error-400",

package/src/core/IOSpacing.ts

@@ -49,3 +49,17 @@ export const IOModuleIDPHSpacing: IOModuleIDPSpacing = 16;
 export const IOModuleIDPVSpacing: IOModuleIDPSpacing = 16;
 export const IOModuleIDPSavedVSpacing: IOModuleIDPSpacing = 24;
 export const IOListItemLogoMargin: IOModuleIDPSpacing = 8;
+
+/*
+░░░ SPACING CONSTANTS ░░░
+*/
+
+const spacingConstantKeys = ["screenEndMargin"] as const;
+
+export type IOSpacingConstants = {
+  [K in (typeof spacingConstantKeys)[number]]: IOSpacingScale;
+};
+
+export const IOSpacing = {
+  screenEndMargin: 32
+} as const satisfies IOSpacingConstants;

package/src/core/index.ts

@@ -4,6 +4,5 @@ export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";
-export * from "./IOStyleVariables";
 export * from "./IODSExperimentalContextProvider";
 export * from "./IOThemeContextProvider";

package/lib/commonjs/core/IOStyleVariables.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IOStyleVariables = void 0;
-/**
- * A collection of default style variables used within IO App.
- */
-const IOStyleVariables = {
-  switchWidth: 51
-};
-exports.IOStyleVariables = IOStyleVariables;
-//# sourceMappingURL=IOStyleVariables.js.map

package/lib/commonjs/core/IOStyleVariables.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["IOStyleVariables","switchWidth","exports"],"sourceRoot":"../../../src","sources":["core/IOStyleVariables.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG;EAC9BC,WAAW,EAAE;AACf,CAAC;AAACC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}

package/lib/module/core/IOStyleVariables.js

@@ -1,7 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export const IOStyleVariables = {
-  switchWidth: 51
-};
-//# sourceMappingURL=IOStyleVariables.js.map

package/lib/module/core/IOStyleVariables.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["IOStyleVariables","switchWidth"],"sourceRoot":"../../../src","sources":["core/IOStyleVariables.ts"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,MAAMA,gBAAgB,GAAG;EAC9BC,WAAW,EAAE;AACf,CAAC"}

package/lib/typescript/core/IOStyleVariables.d.ts

@@ -1,7 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export declare const IOStyleVariables: {
-    switchWidth: number;
-};
-//# sourceMappingURL=IOStyleVariables.d.ts.map

package/lib/typescript/core/IOStyleVariables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IOStyleVariables.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyleVariables.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}

package/src/core/IOStyleVariables.ts

@@ -1,6 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export const IOStyleVariables = {
-  switchWidth: 51
-};