@pagopa/io-app-design-system 1.12.0 → 1.13.1

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef } from "react";
+import { View, Animated, Easing } from "react-native";
+import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
+import { WithTestID } from "../../utils/types";
+import { IOColors } from "../../core";
+
+export type LoadingSpinner = WithTestID<{
+  color?: IOColors;
+  size?: IOLoadingSpinnerSizeScale;
+  durationMs?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+}>;
+
+/**
+ * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one.
+ * It will be removed in the future.
+ */
+export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
+
+const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
+  24: 3,
+  48: 6,
+  76: 9
+};
+
+const startRotationAnimation = (
+  durationMs: number,
+  rotationDegree: Animated.Value
+): void => {
+  Animated.loop(
+    Animated.timing(rotationDegree, {
+      toValue: 360,
+      duration: durationMs,
+      easing: Easing.linear,
+      useNativeDriver: true
+    })
+  ).start();
+};
+
+export const LoadingSpinner = ({
+  color = "blueIO-500",
+  size = 24,
+  durationMs = 750,
+  accessibilityHint,
+  accessibilityLabel,
+  testID = "LoadingSpinnerTestID"
+}: LoadingSpinner): React.ReactElement => {
+  const rotationDegree = useRef(new Animated.Value(0)).current;
+  const stroke: number = strokeMap[size];
+
+  useEffect(() => {
+    startRotationAnimation(durationMs, rotationDegree);
+  }, [durationMs, rotationDegree]);
+
+  return (
+    <View
+      style={{ width: size, height: size }}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      importantForAccessibility={"no-hide-descendants"}
+      testID={testID}
+    >
+      <Animated.View
+        testID={"LoadingSpinnerAnimatedTestID"}
+        style={{
+          transform: [
+            {
+              rotateZ: rotationDegree.interpolate({
+                inputRange: [0, 360],
+                outputRange: ["0deg", "360deg"]
+              })
+            }
+          ]
+        }}
+      >
+        {/* Thanks to Ben Ilegbodu for the article on how to
+          create a a SVG gradient loading spinner. Below is
+          a parameterized version of his code.
+          Source: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ */}
+        <Svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          fill="none"
+        >
+          <Defs>
+            <LinearGradient id="spinner-secondHalf">
+              <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
+              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+            </LinearGradient>
+            <LinearGradient id="spinner-firstHalf">
+              <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
+              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+            </LinearGradient>
+          </Defs>
+
+          <G strokeWidth={stroke}>
+            <Path
+              stroke="url(#spinner-secondHalf)"
+              d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                size / 2 - stroke / 2
+              } 0 0 1 ${size - stroke / 2} ${size / 2}`}
+            />
+            <Path
+              stroke="url(#spinner-firstHalf)"
+              d={`M ${size - stroke / 2} ${size / 2} A ${
+                size / 2 - stroke / 2
+              } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
+            />
+            <Path
+              stroke={IOColors[color]}
+              strokeLinecap="round"
+              d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                size / 2 - stroke / 2
+              } 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`}
+            />
+          </G>
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+};

package/src/components/loadingSpinner/index.tsx

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

package/src/components/pictograms/Pictogram.tsx

@@ -60,6 +60,7 @@ import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramCie from "./svg/PictogramCie";
 import PictogramFeature from "./svg/PictogramFeature";
+import PictogramNotification from "./svg/PictogramNotification";
 import PictogramObjClock from "./svg/PictogramObjClock";
 import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
 import PictogramObjManual from "./svg/PictogramObjManual";
@@ -77,6 +78,7 @@ import PictogramBleedFeature from "./svg/PictogramBleedFeature";
 import PictogramBleedCie from "./svg/PictogramBleedCie";
 import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
 import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
+import PictogramBleedNotification from "./svg/PictogramBleedNotification";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -134,6 +136,7 @@ export const IOPictograms = {
   cie: PictogramCie,
   time: PictogramTime,
   passcode: PictogramPasscode,
+  notification: PictogramNotification,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -227,7 +230,8 @@ export type IOPictogramsBleed = Extract<
   | "feature"
   | "cie"
   | "cameraRequest"
-  | "cameraDenied",
+  | "cameraDenied"
+  | "notification",
   IOPictograms
 >;
 
@@ -242,7 +246,8 @@ export const IOPictogramsBleed: {
   feature: PictogramBleedFeature,
   cie: PictogramBleedCie,
   cameraRequest: PictogramBleedCameraRequest,
-  cameraDenied: PictogramBleedCameraDenied
+  cameraDenied: PictogramBleedCameraDenied,
+  notification: PictogramBleedNotification
 };
 
 export const PictogramBleed = ({

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedNotification = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M133.54 173.88c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.12-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92.01.91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.29-.04-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M137.45 190.31c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.32-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.86-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.36 213.78c-39.81-19.17-81.44-13.87-92.88-10.51-2.81.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.74 3.6ZM169.578 150.271l-.698 3.939 10.349 1.834.698-3.939-10.349-1.834Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M191.139 170.89c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.338 156.727l-3.982.38 2.844 29.855 3.982-.38-2.844-29.855Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="m131.07 106.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.83-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.2405-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M48.7898 127.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04l76.8402-14.18c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M105.77 115.39c1.83 9.92-4.73 19.45-14.6502 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedNotification;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramNotification = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M207.289 180.45c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.27 1.72-1.32 2.8-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.74 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.0795-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M127.05 166.22c-2.31-1.73-10.9-2.99-22.99-3.37-5.8401-.18-10.4701-5.09-10.3201-10.95.11-4.48 3.04-8.44 7.2801-9.87l2.11-.71 1.27 3.79-2.11.71c-2.6601.89-4.4901 3.37-4.5601 6.17-.09 3.66 2.8001 6.73 6.4501 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M167.13 225.39c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.8501-.7-5.1501-2.77-6.1501-5.53-1.04-2.87-.5-6.12 1.4-8.5l3.29-4.1 3.1201 2.5-3.2901 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8001 2.63 3.3501 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24v-.01ZM146.973 142.998l-2.585 3.052 8.019 6.794 2.585-3.052-8.019-6.794Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M155.239 171.66c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM134.705 143.744l-12.57 27.229 3.631 1.676 12.57-27.229-3.631-1.676Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="m120.07 94.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.8304-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.24-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M37.7898 115.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04L114.31 98.01c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M94.7698 103.39c1.83 9.92-4.73 19.45-14.65 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramNotification;

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

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M133.54 173.88c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.12-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92.01.91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.29-.04-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M137.45 190.31c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.32-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.86-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28h.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M240.36 213.78c-39.81-19.17-81.44-13.87-92.88-10.51-2.81.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.74 3.6ZM169.578 150.271l-.698 3.939 10.349 1.834.698-3.939-10.349-1.834Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M191.139 170.89c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.338 156.727l-3.982.38 2.844 29.855 3.982-.38-2.844-29.855Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="m131.07 106.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.83-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.2405-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M48.7898 127.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04l76.8402-14.18c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M105.77 115.39c1.83 9.92-4.73 19.45-14.6502 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+    fill="#00C5CA"
+  />
+</svg>

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

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M207.289 180.45c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.27 1.72-1.32 2.8-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.74 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.0795-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55.01.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M127.05 166.22c-2.31-1.73-10.9-2.99-22.99-3.37-5.8401-.18-10.4701-5.09-10.3201-10.95.11-4.48 3.04-8.44 7.2801-9.87l2.11-.71 1.27 3.79-2.11.71c-2.6601.89-4.4901 3.37-4.5601 6.17-.09 3.66 2.8001 6.73 6.4501 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2v.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M167.13 225.39c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.8501-.7-5.1501-2.77-6.1501-5.53-1.04-2.87-.5-6.12 1.4-8.5l3.29-4.1 3.1201 2.5-3.2901 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8001 2.63 3.3501 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24v-.01ZM146.973 142.998l-2.585 3.052 8.019 6.794 2.585-3.052-8.019-6.794Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M155.239 171.66c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM134.705 143.744l-12.57 27.229 3.631 1.676 12.57-27.229-3.631-1.676Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="m120.07 94.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.8304-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.24-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M37.7898 115.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04L114.31 98.01c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M94.7698 103.39c1.83 9.92-4.73 19.45-14.65 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+    fill="#00C5CA"
+  />
+</svg>

package/src/core/IOStyles.ts

@@ -117,6 +117,11 @@ export const IOButtonLegacyStyles = StyleSheet.create({
     // paddingHorizontal: PixelRatio.getFontScale() * 16,
     // borderRadius: PixelRatio.getFontScale() * 8
   },
+  buttonInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   /* Labels */
   label: {
     alignSelf: "center"
@@ -152,6 +157,11 @@ export const IOButtonStyles = StyleSheet.create({
     // paddingHorizontal: PixelRatio.getFontScale() * 16,
     // borderRadius: PixelRatio.getFontScale() * 8
   },
+  buttonInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   buttonLink: {
     flexDirection: "row",
     alignItems: "center",

package/src/core/IOTransitions.ts

@@ -0,0 +1,94 @@
+import { Easing, withTiming } from "react-native-reanimated";
+
+/**
+A custom enter transition designed for the average size
+inner content of a button or module (e.g. text).
+The scaling effect is slight.
+*/
+export const enterTransitionInnerContent = () => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(1, {
+      duration: 250,
+      easing: Easing.in(Easing.cubic)
+    }),
+    transform: [
+      {
+        scale: withTiming(1, {
+          duration: 250,
+          easing: Easing.in(Easing.cubic)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 0,
+    transform: [{ scale: 1.05 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
+
+/**
+A custom enter transition designed for the small size
+inner content of a button or module (e.g. loading spinner).
+The scaling effect is accentuated.
+*/
+export const enterTransitionInnerContentSmall = () => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(1, {
+      duration: 250,
+      easing: Easing.in(Easing.cubic)
+    }),
+    transform: [
+      {
+        scale: withTiming(1, {
+          duration: 250,
+          easing: Easing.in(Easing.cubic)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 0,
+    transform: [{ scale: 1.25 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
+
+/**
+A custom exit transition designed for both small
+and average size inner content of a button or module.
+The scaling effect is slight.
+*/
+export const exitTransitionInnerContent = () => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(0, {
+      duration: 350,
+      easing: Easing.out(Easing.cubic)
+    }),
+    transform: [
+      {
+        scale: withTiming(0.9, {
+          duration: 350,
+          easing: Easing.out(Easing.cubic)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 1,
+    transform: [{ scale: 1 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};

package/src/core/index.ts

@@ -1,5 +1,6 @@
 export * from "./IOColors";
 export * from "./IOAnimations";
+export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";