@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`theme returns correct theme object 1`] = `
-Object {
-  "__hd__": Object {
-    "accordion": Object {
-      "colors": Object {
+{
+  "__hd__": {
+    "accordion": {
+      "colors": {
         "background": "#ffffff",
       },
-      "radii": Object {
+      "radii": {
         "card": 8,
       },
-      "space": Object {
+      "space": {
         "padding": 16,
       },
     },
-    "alert": Object {
-      "borderWidths": Object {
+    "alert": {
+      "borderWidths": {
         "base": 1,
       },
-      "colors": Object {
+      "colors": {
         "divider": "#e8e9ea",
         "error": "#f46363",
         "info": "#b5c3fd",
@@ -26,40 +26,40 @@ Object {
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
-      "radii": Object {
+      "radii": {
         "default": 16,
       },
-      "sizes": Object {
+      "sizes": {
         "height": 48,
       },
-      "space": Object {
+      "space": {
         "contentPaddingHorizontal": 12,
         "ctaPadding": 12,
         "iconLeftPadding": 12,
         "textPaddingHorizontal": 12,
       },
     },
-    "attachment": Object {
-      "colors": Object {
+    "attachment": {
+      "colors": {
         "highlightedBackground": "#ece8ef",
       },
-      "radii": Object {
+      "radii": {
         "container": 8,
         "image": 4,
       },
-      "sizes": Object {
+      "sizes": {
         "imageHeight": 48,
         "imageWidth": 32,
       },
-      "space": Object {
+      "space": {
         "containerPadding": 16,
         "containerVerticalPadding": 12,
         "ctaPadding": 16,
         "textHorizontalPadding": 8,
       },
     },
-    "avatar": Object {
-      "colors": Object {
+    "avatar": {
+      "colors": {
         "danger": "#f46363",
         "info": "#b5c3fd",
         "primary": "#401960",
@@ -67,7 +67,7 @@ Object {
         "text": "#ffffff",
         "warning": "#ffbe71",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "large": 20,
         "medium": 18,
         "small": 16,
@@ -77,13 +77,13 @@ Object {
         "xxxxlarge": 48,
         "xxxxxlarge": 60,
       },
-      "fonts": Object {
+      "fonts": {
         "default": "BeVietnamPro-Regular",
       },
-      "radii": Object {
+      "radii": {
         "rounded": 999,
       },
-      "sizes": Object {
+      "sizes": {
         "large": 48,
         "medium": 40,
         "small": 32,
@@ -93,8 +93,8 @@ Object {
         "xxxxlarge": 96,
         "xxxxxlarge": 136,
       },
-      "spaces": Object {
-        "titleMarginTopForAndroid": Object {
+      "spaces": {
+        "titleMarginTopForAndroid": {
           "large": -4,
           "medium": -4,
           "small": -2,
@@ -106,80 +106,80 @@ Object {
         },
       },
     },
-    "badge": Object {
-      "colors": Object {
-        "archived": "#737479",
-        "danger": "#de350b",
-        "info": "#4568fb",
+    "badge": {
+      "colors": {
+        "archived": "#606065",
+        "danger": "#cb300a",
+        "info": "#355bfb",
         "primary": "#401960",
         "success": "#017d6d",
         "text": "#ffffff",
-        "warning": "#ffa234",
+        "warning": "#ac5d00",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "default": 12,
       },
-      "fonts": Object {
+      "fonts": {
         "default": "BeVietnamPro-SemiBold",
       },
-      "lineHeights": Object {
+      "lineHeights": {
         "default": 16,
       },
-      "sizes": Object {
+      "sizes": {
         "height": 20,
         "minWidth": 20,
         "statusHeight": 8,
         "statusWidth": 8,
       },
-      "space": Object {
+      "space": {
         "horizontalPadding": 8,
         "statusPositionRight": -2,
         "statusPositionTop": -2,
       },
     },
-    "bottomNavigation": Object {
-      "colors": Object {
+    "bottomNavigation": {
+      "colors": {
         "background": "#ffffff",
         "shadow": "#401960",
       },
-      "shadows": Object {
+      "shadows": {
         "elevation": 10,
-        "offset": Object {
+        "offset": {
           "height": 3,
           "width": 0,
         },
         "opacity": 0.27,
         "radius": 4.65,
       },
-      "sizes": Object {
+      "sizes": {
         "height": 72,
       },
-      "space": Object {
+      "space": {
         "titleMarginTop": 4,
       },
     },
-    "bottomSheet": Object {
-      "colors": Object {
+    "bottomSheet": {
+      "colors": {
         "backdrop": "#000000",
         "background": "#ffffff",
         "shadow": "#001f23",
       },
-      "radii": Object {
+      "radii": {
         "default": 16,
       },
-      "shadows": Object {
+      "shadows": {
         "elevation": 10,
-        "offset": Object {
+        "offset": {
           "height": 3,
           "width": 0,
         },
         "opacity": 0.4,
         "radius": 16,
       },
-      "sizes": Object {
+      "sizes": {
         "closeIcon": 48,
       },
-      "space": Object {
+      "space": {
         "closeIconMargin": 12,
         "footerHorizontalPadding": 12,
         "footerVerticalPadding": 2,
@@ -187,21 +187,21 @@ Object {
         "headerWrapperVerticalPadding": 8,
       },
     },
-    "button": Object {
-      "borderWidth": Object {
+    "button": {
+      "borderWidth": {
         "default": 2,
       },
-      "colors": Object {
-        "danger": "#de350b",
+      "colors": {
+        "danger": "#cb300a",
         "defaultText": "#001f23",
         "disabledBackground": "#bfc1c5",
         "disabledBorder": "#bfc1c5",
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
-        "pressedBackground": Object {
+        "pressedBackground": {
           "filledDanger": "#fcebe7",
-          "filledPrimary": "#664780",
-          "filledSecondary": "#664780",
+          "filledPrimary": "#33144d",
+          "filledSecondary": "#33144d",
           "outlineDanger": "#fcebe7",
           "outlinedPrimary": "#ece8ef",
           "outlinedSecondary": "#ece8ef",
@@ -212,43 +212,46 @@ Object {
         "primary": "#401960",
         "secondary": "#795e90",
         "textLoadingBackground": "#ece8ef",
-        "utilityBackground": "#f6f6f7",
+        "utilityBackground": "#ffffff",
       },
-      "fontSize": Object {
+      "fontSize": {
         "default": 18,
         "textVariant": 16,
         "utility": 16,
       },
-      "fonts": Object {
+      "fonts": {
         "default": "BeVietnamPro-SemiBold",
         "utility": "BeVietnamPro-Regular",
       },
-      "radii": Object {
+      "lineHeights": {
+        "titleOfTextVariant": 22,
+      },
+      "radii": {
         "default": 32,
         "text": 4,
         "utilityRadii": 8,
       },
-      "sizes": Object {
+      "sizes": {
         "iconSize": 20,
       },
-      "space": Object {
+      "space": {
         "buttonPadding": 16,
         "iconPadding": 12,
         "textButtonPadding": 12,
         "utilityPadding": 8,
       },
     },
-    "calendar": Object {
-      "colors": Object {
+    "calendar": {
+      "colors": {
         "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
         "primary": "#401960",
       },
-      "radii": Object {
+      "radii": {
         "default": 999,
       },
-      "sizes": Object {
+      "sizes": {
         "cellCircleHeight": 44,
         "cellCircleWidth": 44,
         "cellHeight": 48,
@@ -256,14 +259,16 @@ Object {
         "markHeight": 4,
         "markWidth": 4,
       },
-      "space": Object {
+      "space": {
         "headerHorizontalPadding": 12,
+        "headerMarginRight": 8,
         "headerVerticalPadding": 16,
+        "iosPickerMarginVertical": 64,
         "rowVerticalPadding": 16,
       },
     },
-    "card": Object {
-      "colors": Object {
+    "card": {
+      "colors": {
         "archived": "#abacaf",
         "danger": "#f46363",
         "dataCardIndicator": "#401960",
@@ -272,96 +277,126 @@ Object {
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
-      "radii": Object {
+      "radii": {
         "default": 12,
       },
-      "sizes": Object {
+      "sizes": {
         "indicatorWidth": 16,
       },
     },
-    "cardCarousel": Object {
-      "colors": Object {
+    "cardCarousel": {
+      "colors": {
         "carouselItemBackground": "#f6f6f7",
-        "shadow": "#001f23",
       },
-      "radii": Object {
+      "radii": {
         "card": 8,
       },
-      "shadows": Object {
-        "elevation": 4,
-        "offset": Object {
-          "height": 2,
-          "width": 0,
-        },
-        "opacity": 0.12,
-        "radius": 8,
-      },
-      "space": Object {
+      "space": {
         "carouselItemSpacing": 8,
         "contentContainerPaddingHorizontal": 24,
         "pageControlMarginTop": 16,
       },
     },
-    "carousel": Object {
-      "fontSizes": Object {
+    "carousel": {
+      "fontSizes": {
         "heading": 32,
       },
-      "fonts": Object {
+      "fonts": {
         "heading": "RebondGrotesque-SemiBold",
       },
-      "lineHeights": Object {
+      "lineHeights": {
         "heading": 44,
       },
-      "space": Object {
+      "space": {
         "footerMarginBottom": 24,
         "footerPaddingHorizontal": 24,
         "footerPaddingVertical": 16,
         "headingMarginBottom": 16,
-        "headingMarginTop": 8,
         "pageControlPaddingVertical": 8,
         "pageControlWrapperHeight": 48,
       },
     },
-    "checkbox": Object {
-      "borderWidths": Object {
+    "checkbox": {
+      "borderWidths": {
         "icon": 2,
         "wrapper": 1,
       },
-      "colors": Object {
-        "default": "#001f23",
-        "disabledBorder": "#bfc1c5",
+      "colors": {
+        "borders": {
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "readonly": "#808f91",
+        },
       },
-      "radii": Object {
+      "radii": {
         "icon": 4,
         "wrapper": 8,
       },
-      "sizes": Object {
+      "sizes": {
         "icon": 24,
       },
-      "space": Object {
+      "space": {
         "iconDescriptionPadding": 12,
         "iconTop": 0,
         "wrapperPadding": 16,
       },
     },
-    "contentNavigator": Object {
-      "space": Object {
+    "chip": {
+      "borderWidths": {
+        "icon": 2,
+        "wrapper": 1,
+      },
+      "colors": {
+        "filledBackground": "#ffffff",
+        "outlinedBackground": "transparent",
+        "primaryBackground": "#001f23",
+        "secondaryBackground": "#ece8ef",
+        "selectedPrimaryText": "#ffffff",
+        "wrapperBorder": "#001f23",
+        "wrapperSelectedBorder": "transparent",
+      },
+      "radii": {
+        "wrapper": 999,
+      },
+      "shadows": {
+        "filledWrapper": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "sizes": {
+        "wrapperBorder": 1,
+      },
+      "space": {
+        "iconWrapperMarginRight": 8,
+        "wrapperHorizontalPadding": 12,
+        "wrapperVerticalPadding": 8,
+      },
+    },
+    "contentNavigator": {
+      "space": {
         "valueHorizontalPadding": 8,
       },
     },
-    "datePicker": Object {
-      "sizes": Object {
+    "datePicker": {
+      "sizes": {
         "height": 176,
       },
     },
-    "divider": Object {
-      "borderWidths": Object {
+    "divider": {
+      "borderWidths": {
         "default": 1,
       },
-      "colors": Object {
+      "colors": {
         "default": "#e8e9ea",
       },
-      "space": Object {
+      "space": {
         "large": 24,
         "medium": 16,
         "small": 8,
@@ -369,82 +404,82 @@ Object {
         "xsmall": 4,
       },
     },
-    "drawer": Object {
-      "colors": Object {
+    "drawer": {
+      "colors": {
         "backdrop": "#ffffff",
         "background": "#ffffff",
         "handler": "#001f23",
         "shadow": "#001f23",
       },
-      "radii": Object {
+      "radii": {
         "default": 16,
         "handler": 4,
       },
-      "shadows": Object {
+      "shadows": {
         "elevation": 10,
-        "offset": Object {
+        "offset": {
           "height": 3,
           "width": 0,
         },
         "opacity": 0.27,
         "radius": 4.65,
       },
-      "sizes": Object {
+      "sizes": {
         "handlerHeight": 4,
         "handlerWidth": 56,
       },
-      "space": Object {
+      "space": {
         "handlerPaddingVertical": 8,
       },
     },
-    "empty": Object {
-      "colors": Object {
+    "empty": {
+      "colors": {
         "invertedSubduedText": "#ffffff",
         "invertedText": "#ffffff",
         "subduedText": "#4d6265",
         "text": "#001f23",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "description": 18,
         "title": 24,
       },
-      "fonts": Object {
+      "fonts": {
         "description": "RebondGrotesque",
         "title": "RebondGrotesque-SemiBold",
       },
-      "sizes": Object {
+      "sizes": {
         "image": 168,
       },
-      "space": Object {
+      "space": {
         "imageMargin": 24,
         "titleMargin": 8,
         "wrapperPadding": 16,
       },
     },
-    "error": Object {
-      "colors": Object {
+    "error": {
+      "colors": {
         "description": "#4d6265",
         "fullScreenBackground": "#ccd2d3",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "description": 18,
         "title": 24,
       },
-      "fonts": Object {
+      "fonts": {
         "description": "RebondGrotesque",
         "title": "RebondGrotesque-SemiBold",
       },
-      "lineHeight": Object {
+      "lineHeight": {
         "description": 26,
         "title": 32,
       },
-      "sizes": Object {
+      "sizes": {
         "image": 176,
       },
-      "space": Object {
-        "button": Object {
+      "space": {
+        "button": {
           "margin": 16,
           "padding": 16,
           "wrapperHorizontalPadding": 16,
@@ -455,54 +490,51 @@ Object {
         "wrapperPadding": 24,
       },
     },
-    "fab": Object {
-      "colors": Object {
+    "fab": {
+      "colors": {
         "actionItemBackground": "#795e90",
-        "actionItemPressedBackground": "#664780",
+        "actionItemPressedBackground": "#33144d",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
+        "buttonActiveBackground": "#33144d",
         "buttonBackground": "#401960",
-        "buttonPressedBackground": "#664780",
-        "headerText": "#001f23",
+        "buttonPressedBackground": "#33144d",
         "icon": "#ffffff",
-        "shadow": "#001f23",
         "titleText": "#ffffff",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "actionItemText": 16,
-        "header": 24,
         "title": 16,
       },
-      "fonts": Object {
+      "fonts": {
         "actionItemText": "BeVietnamPro-Regular",
-        "header": "BeVietnamPro-SemiBold",
         "title": "BeVietnamPro-SemiBold",
       },
-      "lineHeights": Object {
+      "lineHeights": {
         "actionItemText": 22,
-        "header": 32,
         "icon": 24,
         "title": 24,
       },
-      "radii": Object {
+      "radii": {
         "actionItem": 999,
       },
-      "shadows": Object {
-        "elevation": 2,
-        "offset": Object {
+      "shadows": {
+        "color": "#001f23",
+        "elevation": 3,
+        "offset": {
           "height": 2,
           "width": 0,
         },
         "opacity": 0.12,
-        "radius": 8,
+        "radius": 4,
       },
-      "sizes": Object {
+      "sizes": {
         "height": 64,
         "iconContainerHeight": 24,
         "iconContainerWidth": 24,
         "width": 64,
       },
-      "space": Object {
+      "space": {
         "actionItemMargin": 8,
         "actionItemMarginRight": 24,
         "actionItemPadding": 12,
@@ -510,14 +542,12 @@ Object {
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
         "containerPadding": 20,
-        "headerTextMarginBottom": 24,
-        "headerTextMarginRight": 24,
         "titleMarginHorizontal": 8,
       },
     },
-    "icon": Object {
-      "colors": Object {
-        "danger": "#de350b",
+    "icon": {
+      "colors": {
+        "danger": "#cb300a",
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
@@ -527,7 +557,7 @@ Object {
         "text": "#001f23",
         "warning": "#ffbe71",
       },
-      "sizes": Object {
+      "sizes": {
         "large": 28,
         "medium": 24,
         "small": 20,
@@ -535,16 +565,16 @@ Object {
         "xsmall": 16,
       },
     },
-    "image": Object {
-      "sizes": Object {
+    "image": {
+      "sizes": {
         "15xlarge": 144,
         "6xlarge": 72,
       },
     },
-    "list": Object {
-      "colors": Object {
+    "list": {
+      "colors": {
         "checkedListItemContainerBackground": "#ece8ef",
-        "leadingStatus": Object {
+        "leadingStatus": {
           "archived": "#abacaf",
           "danger": "#f46363",
           "info": "#b5c3fd",
@@ -553,91 +583,95 @@ Object {
         },
         "listItemContainerBackground": "#ffffff",
       },
-      "opacity": Object {
-        "cardShadow": 1,
+      "opacity": {
         "disabled": 0.38,
         "enabled": 1,
       },
-      "radii": Object {
+      "radii": {
         "basicItem": 4,
-        "card": 8,
-        "cardShadow": 4,
+        "item": 8,
         "leadingStatus": 999,
       },
-      "shadows": Object {
-        "cardElevation": 10,
-        "cardOffset": Object {
-          "height": 2,
-          "width": 0,
+      "shadows": {
+        "card": {
+          "color": "#001f23",
+          "elevation": 3,
+          "offset": {
+            "height": 2,
+            "width": 0,
+          },
+          "opacity": 0.12,
+          "radius": 4,
         },
       },
-      "space": Object {
+      "space": {
+        "childrenContainerTopMargin": 8,
         "leadingStatusMarginRight": 8,
         "listItemContainerPadding": 16,
         "prefixContainerMarginRight": 8,
         "suffixContainerMarginLeft": 8,
       },
-      "widths": Object {
+      "widths": {
         "leadingStatus": 8,
       },
     },
-    "pageControl": Object {
-      "colors": Object {
+    "pageControl": {
+      "colors": {
         "paginatorBackgroundColor": "#401960",
       },
-      "radii": Object {
+      "radii": {
         "paginatorBorderRadius": 999,
       },
-      "sizes": Object {
+      "sizes": {
         "indicatorWidth": 16,
         "paginatorHeight": 8,
         "paginatorWidth": 8,
       },
-      "space": Object {
+      "space": {
         "paginatorMarginHorizontal": 8,
       },
     },
-    "pinInput": Object {
-      "borderWidths": Object {
+    "pinInput": {
+      "borderWidths": {
         "default": 1,
         "focused": 2,
       },
-      "colors": Object {
+      "colors": {
         "default": "#001f23",
         "disabled": "#bfc1c5",
-        "error": "#de350b",
+        "error": "#cb300a",
         "mask": "#001f23",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "cellText": 28,
         "errorMessage": 12,
       },
-      "fonts": Object {
+      "fonts": {
         "cellText": "BeVietnamPro-SemiBold",
         "errorMessage": "BeVietnamPro-Regular",
       },
-      "lineHeights": Object {
+      "lineHeights": {
         "cellText": 36,
         "errorMessage": 12,
       },
-      "radii": Object {
+      "radii": {
         "cell": 8,
         "mask": 999,
       },
-      "sizes": Object {
+      "sizes": {
         "cellHeight": 48,
         "cellWidth": 40,
         "mask": 16,
       },
-      "space": Object {
+      "space": {
         "errorMessagePadding": 4,
         "spacer": 16,
       },
     },
-    "progress": Object {
-      "colors": Object {
-        "completeness": Object {
-          "archived": "#737479",
+    "progress": {
+      "colors": {
+        "completeness": {
+          "archived": "#606065",
           "archivedInverted": "#ffffff",
           "danger": "#f46363",
           "dangerInverted": "#ffffff",
@@ -650,7 +684,7 @@ Object {
           "warning": "#ffbe71",
           "warningInverted": "#ffffff",
         },
-        "incompleteness": Object {
+        "incompleteness": {
           "archived": "#e8e9ea",
           "archivedInverted": "#bcbdbf",
           "danger": "#e8e9ea",
@@ -665,78 +699,94 @@ Object {
           "warningInverted": "#ffcb8d",
         },
       },
-      "radii": Object {
+      "radii": {
         "default": 999,
       },
-      "sizes": Object {
-        "barHeight": 4,
-        "circleCompletenessHeight": 4,
+      "sizes": {
+        "barHeight": 8,
+        "circleCompletenessHeight": 8,
         "circleDiameter": 72,
       },
     },
-    "radio": Object {
-      "borderWidths": Object {
+    "radio": {
+      "borderWidths": {
         "circle": 2,
       },
-      "colors": Object {
-        "circle": "#001f23",
+      "colors": {
+        "checked": "#ece8ef",
+        "circle": "#401960",
+        "intents": {
+          "dark": "#f6f6f7",
+          "light": "#ffffff",
+        },
       },
-      "sizes": Object {
+      "sizes": {
         "circle": 20,
         "innerCircle": 10,
       },
-      "space": Object {
+      "space": {
         "circleLeftMargin": 8,
-        "groupTopMargin": 4,
+        "groupTopMarginMedium": 16,
+        "groupTopMarginSmall": 4,
+      },
+    },
+    "rate": {
+      "colors": {
+        "iconStroke": "#401960",
+      },
+      "spaces": {
+        "iconWrapperMarginRight": 4,
+        "iconWrapperPadding": 8,
       },
     },
-    "refreshControl": Object {
-      "colors": Object {
+    "refreshControl": {
+      "colors": {
         "indicator": "#401960",
       },
     },
-    "richTextEditor": Object {
-      "colors": Object {
+    "richTextEditor": {
+      "colors": {
         "text": "#001f23",
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
         "toolbarButtonSelectedBackground": "#ece8ef",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "editor": 14,
       },
-      "radii": Object {
+      "radii": {
         "mention": 8,
       },
-      "sizes": Object {
+      "sizes": {
         "editorMinHeight": 24,
         "toolbarButtonSize": 48,
         "toolbarSeparatorHeight": 16,
         "toolbarSeparatorWidth": 2,
       },
-      "space": Object {
+      "space": {
         "editorPadding": 16,
         "mention": 4,
         "toolbarHorizontalPadding": 8,
         "wrapperMarginBottom": 16,
       },
     },
-    "sectionHeading": Object {
-      "colors": Object {
+    "sectionHeading": {
+      "colors": {
         "background": "#f6f6f7",
+        "backgroundSmall": "#ccd2d3",
       },
-      "space": Object {
+      "space": {
         "headingHorizontalPadding": 16,
         "headingMarginBottom": 16,
         "headingVerticalPadding": 8,
-        "iconMarginRight": 8,
+        "iconMarginRight": 12,
       },
     },
-    "select": Object {
-      "radii": Object {
+    "select": {
+      "radii": {
         "option": 4,
       },
-      "space": Object {
+      "space": {
         "minimumOptionListHeight": 280,
         "optionListHorizontalPadding": 12,
         "optionSpacing": 4,
@@ -748,73 +798,73 @@ Object {
         "suffixMarginRight": 12,
       },
     },
-    "skeleton": Object {
-      "colors": Object {
+    "skeleton": {
+      "colors": {
         "darkBackground": "#ffffff",
-        "darkGradientEnd": "#f1f2f3",
+        "darkGradientEnd": "#dadbde",
         "darkGradientStart": "#ffffff",
         "lightBackground": "#f6f6f7",
-        "lightGradientEnd": "#f1f2f3",
+        "lightGradientEnd": "#dadbde",
         "lightGradientStart": "#f6f6f7",
       },
-      "radii": Object {
+      "radii": {
         "circular": 999,
         "rectangular": 0,
         "rounded": 16,
       },
     },
-    "slider": Object {
-      "colors": Object {
+    "slider": {
+      "colors": {
         "maximumTrackTint": "#ece8ef",
         "minimumTrackTint": "#401960",
         "thumbTint": "#f6f6f7",
       },
     },
-    "spinner": Object {
-      "colors": Object {
-        "dot": Object {
+    "spinner": {
+      "colors": {
+        "dot": {
           "inverted": "#ffffff",
           "primary": "#401960",
         },
       },
-      "radii": Object {
+      "radii": {
         "default": 999,
       },
-      "space": Object {
-        "spinnerDot": Object {
+      "space": {
+        "spinnerDot": {
           "medium": 16,
           "small": 8,
         },
-        "spinnerDotPadding": Object {
+        "spinnerDotPadding": {
           "medium": 8,
           "small": 4,
         },
-        "spinnerTextPaddingTop": Object {
+        "spinnerTextPaddingTop": {
           "medium": 8,
           "small": 4,
         },
       },
     },
-    "success": Object {
-      "colors": Object {
+    "success": {
+      "colors": {
         "description": "#4d6265",
         "fullScreenBackground": "#ccd2d3",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "description": 18,
         "title": 24,
       },
-      "fonts": Object {
+      "fonts": {
         "description": "RebondGrotesque",
         "title": "RebondGrotesque-SemiBold",
       },
-      "sizes": Object {
+      "sizes": {
         "image": 176,
       },
-      "space": Object {
-        "button": Object {
+      "space": {
+        "button": {
           "margin": 16,
           "padding": 16,
           "wrapperHorizontalPadding": 16,
@@ -825,54 +875,61 @@ Object {
         "wrapperPadding": 24,
       },
     },
-    "swipeable": Object {
-      "colors": Object {
+    "swipeable": {
+      "colors": {
         "danger": "#f46363",
+        "defaultContainerBackground": "#ffffff",
         "primary": "#401960",
         "success": "#5ace7d",
       },
+      "radii": {
+        "swipeableContainer": 8,
+      },
+      "space": {
+        "containerExtraWidth": 4,
+      },
     },
-    "switch": Object {
-      "colors": Object {
-        "backgroundColors": Object {
+    "switch": {
+      "colors": {
+        "backgroundColors": {
           "checked": "#401960",
           "disabled-checked": "#ece8ef",
           "disabled-unchecked": "#bfc1c5",
           "unchecked": "#808f91",
         },
-        "selector": Object {
-          "background": "#f6f6f7",
-          "textBackground": "#ffffff",
+        "selector": {
+          "background": "#ffffff",
+          "textBackground": "#ccd2d3",
         },
         "thumb": "#ffffff",
       },
-      "radii": Object {
+      "radii": {
         "rounded": 999,
-        "selector": Object {
+        "selector": {
           "default": 999,
         },
       },
-      "sizes": Object {
+      "sizes": {
         "height": 24,
-        "selector": Object {
-          "height": 56,
+        "selector": {
+          "height": 40,
         },
         "thumb": 16,
         "width": 48,
       },
-      "spaces": Object {
+      "spaces": {
         "paddingHorizontal": 4,
-        "selector": Object {
+        "selector": {
           "iconPadding": 16,
-          "wrapperPadding": 4,
+          "wrapperHorizontalPadding": 4,
         },
       },
     },
-    "tabs": Object {
-      "borderWidths": Object {
-        "headerBottom": 1,
+    "tabs": {
+      "borderWidths": {
+        "headerBottom": 2,
       },
-      "colors": Object {
+      "colors": {
         "active": "#001f23",
         "activeBackground": "#ccd2d3",
         "headerBottom": "#e8e9ea",
@@ -880,106 +937,107 @@ Object {
         "indicator": "#401960",
         "text": "#001f23",
       },
-      "radii": Object {
-        "outline": 8,
+      "radii": {
+        "outline": 16,
       },
-      "sizes": Object {
+      "sizes": {
         "indicator": 2,
       },
-      "space": Object {
+      "space": {
         "flatListHorizontalPadding": 8,
         "itemHorizontalPadding": 8,
         "itemMargin": 12,
         "itemVerticalPadding": 8,
         "outlineHorizontalPadding": 8,
         "outlineVerticalPadding": 4,
+        "tabIndicatorBottom": -2,
       },
     },
-    "tag": Object {
-      "borderWidths": Object {
+    "tag": {
+      "borderWidths": {
         "default": 1,
       },
-      "colors": Object {
-        "archived": "#737479",
-        "archivedBackground": "#f1f2f3",
-        "danger": "#de350b",
+      "colors": {
+        "archived": "#606065",
+        "archivedBackground": "#dadbde",
+        "danger": "#cb300a",
         "dangerBackground": "#fcebe7",
-        "info": "#4568fb",
+        "info": "#355bfb",
         "infoBackground": "#ecf0ff",
-        "primary": "#001f23",
-        "primaryBackground": undefined,
+        "primary": "#401960",
+        "primaryBackground": "#ece8ef",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "text": "#001f23",
-        "warning": "#ffa234",
+        "warning": "#ac5d00",
         "warningBackground": "#fff6eb",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "default": 12,
       },
-      "fonts": Object {
+      "fonts": {
         "default": "BeVietnamPro-SemiBold",
       },
-      "lineHeights": Object {
+      "lineHeights": {
         "default": 16,
       },
-      "radii": Object {
+      "radii": {
         "default": 4,
       },
-      "space": Object {
+      "space": {
         "horizontalPadding": 8,
         "verticalPadding": 4,
       },
     },
-    "textInput": Object {
-      "borderWidths": Object {
-        "container": Object {
+    "textInput": {
+      "borderWidths": {
+        "container": {
           "focused": 2,
           "normal": 1,
         },
       },
-      "colors": Object {
-        "asterisks": Object {
-          "default": "#de350b",
+      "colors": {
+        "asterisks": {
+          "default": "#cb300a",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
-          "filled": "#de350b",
+          "error": "#cb300a",
+          "filled": "#cb300a",
           "readonly": "#808f91",
         },
-        "borders": Object {
+        "borders": {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
+          "error": "#cb300a",
           "filled": "#001f23",
           "readonly": "#808f91",
         },
         "containerBackground": "#ffffff",
-        "error": "#de350b",
+        "error": "#cb300a",
         "labelBackground": "#ffffff",
-        "labels": Object {
+        "labels": {
           "default": "#001f23",
           "disabled": "#bfc1c5",
           "error": "#001f23",
           "filled": "#001f23",
           "readonly": "#808f91",
         },
-        "labelsInsideTextInput": Object {
+        "labelsInsideTextInput": {
           "default": "#001f23",
           "disabled": "#bfc1c5",
           "error": "#001f23",
           "filled": "#001f23",
           "readonly": "#808f91",
         },
-        "maxLengthLabels": Object {
+        "maxLengthLabels": {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
+          "error": "#cb300a",
           "filled": "#001f23",
           "readonly": "#808f91",
         },
         "text": "#001f23",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "asteriskLabel": 16,
         "error": 12,
         "labelInsideTextInput": 16,
@@ -987,70 +1045,70 @@ Object {
         "text": 16,
         "topLabel": 12,
       },
-      "fonts": Object {
+      "fonts": {
         "text": "BeVietnamPro-Regular",
       },
-      "lineHeights": Object {
+      "lineHeights": {
         "topLabel": 12,
       },
-      "radii": Object {
+      "radii": {
         "container": 8,
       },
-      "sizes": Object {
+      "sizes": {
         "errorAndHelpTextContainerHeight": 16,
         "textInputMaxHeight": 144,
         "textareaHeight": 144,
       },
-      "space": Object {
+      "space": {
         "containerMarginTop": 8,
         "containerPadding": 16,
-        "errorAndHelpTextContainerPaddingLeft": 16,
+        "errorAndHelpTextContainerHorizontalPadding": 16,
+        "errorAndHelpTextContainerPaddingTop": 2,
         "errorContainerMarginRight": 4,
         "errorMarginLeft": 4,
         "inputHorizontalMargin": 8,
         "labelHorizontalPadding": 4,
         "labelInsideTextInputMarginTop": -2,
-        "labelLeft": 16,
+        "labelLeft": 32,
         "labelPaddingBottom": 8,
-        "labelTop": -4,
-        "maxLengthLabelMarginLeft": 4,
+        "labelTop": 10.666666666666666,
       },
     },
-    "timePicker": Object {
-      "sizes": Object {
+    "timePicker": {
+      "sizes": {
         "height": 176,
       },
     },
-    "toast": Object {
-      "borderWidths": Object {
+    "toast": {
+      "borderWidths": {
         "base": 1,
       },
-      "colors": Object {
+      "colors": {
         "divider": "#e8e9ea",
         "error": "#f46363",
         "info": "#b5c3fd",
         "notification": "#ffffff",
-        "shadow": "#001f23",
         "snackbar": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
-      "radii": Object {
+      "radii": {
         "default": 16,
       },
-      "shadows": Object {
-        "elevation": 4,
-        "offset": Object {
+      "shadows": {
+        "color": "#001f23",
+        "elevation": 3,
+        "offset": {
           "height": 2,
           "width": 0,
         },
         "opacity": 0.12,
         "radius": 4,
       },
-      "sizes": Object {
+      "sizes": {
         "height": 48,
       },
-      "space": Object {
+      "space": {
         "contentVerticalPadding": 12,
         "ctaPadding": 12,
         "iconLeftPadding": 12,
@@ -1059,11 +1117,11 @@ Object {
         "wrapperVerticalPadding": 24,
       },
     },
-    "toolbar": Object {
-      "borderWidths": Object {
+    "toolbar": {
+      "borderWidths": {
         "default": 1,
       },
-      "colors": Object {
+      "colors": {
         "background": "#ffffff",
         "border": "#e8e9ea",
         "danger": "#ffbe71",
@@ -1075,26 +1133,26 @@ Object {
         "secondary": "#795e90",
         "success": "#5ace7d",
       },
-      "radii": Object {
+      "radii": {
         "iconButtonWrapperBorderRadius": 24,
       },
-      "sizes": Object {
+      "sizes": {
         "itemWrapperHeight": 64,
       },
-      "space": Object {
+      "space": {
         "horizontalPadding": 8,
         "iconButtonLabelMarginLeft": 8,
         "iconButtonWrapperPadding": 12,
         "verticalPadding": 8,
       },
     },
-    "typography": Object {
-      "colors": Object {
-        "archived": "#737479",
+    "typography": {
+      "colors": {
+        "archived": "#606065",
         "body": "#001f23",
         "danger": "#f46363",
         "disabled": "#bfc1c5",
-        "info": "#4568fb",
+        "info": "#355bfb",
         "inverted": "#ffffff",
         "primary": "#401960",
         "secondary": "#795e90",
@@ -1102,36 +1160,158 @@ Object {
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
-      "fontSizes": Object {
+      "fontSizes": {
         "6xlarge": 36,
         "7xlarge": 42,
+        "body": {
+          "neutral": {
+            "regular": 16,
+            "small": 14,
+          },
+          "playful": {
+            "regular": 18,
+            "small": 16,
+          },
+        },
+        "caption": 12,
+        "label": 10,
         "large": 16,
         "medium": 14,
         "small": 12,
+        "titles": {
+          "neutral": {
+            "h1": 42,
+            "h2": 32,
+            "h3": 28,
+            "h4": 24,
+            "h5": 18,
+            "h6": 18,
+          },
+          "playful": {
+            "h1": 36,
+            "h2": 32,
+            "h3": 28,
+            "h4": 24,
+            "h5": 18,
+            "h6": 16,
+          },
+        },
         "xlarge": 18,
         "xsmall": 10,
         "xxxlarge": 24,
         "xxxxlarge": 28,
         "xxxxxlarge": 32,
       },
-      "fonts": Object {
-        "neutral": Object {
+      "fontWeights": {
+        "body": {
+          "neutral": {
+            "regular": "BeVietnamPro-Regular",
+            "semiBold": "BeVietnamPro-SemiBold",
+          },
+          "playful": {
+            "regular": "RebondGrotesque",
+            "semiBold": "RebondGrotesque-SemiBold",
+          },
+        },
+        "titles": {
+          "neutral": {
+            "h1": "BeVietnamPro-Regular",
+            "h2": "BeVietnamPro-SemiBold",
+            "h3": "BeVietnamPro-SemiBold",
+            "h4": "BeVietnamPro-SemiBold",
+            "h5": "BeVietnamPro-SemiBold",
+            "h6": "BeVietnamPro-Regular",
+          },
+          "playful": {
+            "h1": "RebondGrotesque-SemiBold",
+            "h2": "RebondGrotesque-SemiBold",
+            "h3": "RebondGrotesque-SemiBold",
+            "h4": "RebondGrotesque-SemiBold",
+            "h5": "RebondGrotesque-SemiBold",
+            "h6": "RebondGrotesque",
+          },
+        },
+      },
+      "fonts": {
+        "neutral": {
           "light": "BeVietnamPro-Light",
           "regular": "BeVietnamPro-Regular",
           "semiBold": "BeVietnamPro-SemiBold",
         },
-        "playful": Object {
+        "playful": {
           "light": "RebondGrotesque-Light",
           "regular": "RebondGrotesque",
           "semiBold": "RebondGrotesque-SemiBold",
         },
       },
-      "lineHeights": Object {
+      "letterSpacings": {
+        "body": {
+          "neutral": {
+            "regular": 0.48,
+            "semiBold": 0.24,
+            "small": 0.48,
+          },
+          "playful": {
+            "regular": 0.54,
+            "semiBold": 0.54,
+            "small": 0.54,
+          },
+        },
+        "titles": {
+          "neutral": {
+            "h1": 0,
+            "h2": 1.5,
+            "h3": 0.24,
+            "h4": 0,
+            "h5": 0.24,
+            "h6": 0.48,
+          },
+          "playful": {
+            "h1": 1.5,
+            "h2": 1.5,
+            "h3": 0.24,
+            "h4": 0.24,
+            "h5": 0.24,
+            "h6": 0.48,
+          },
+        },
+      },
+      "lineHeights": {
         "6xlarge": 44,
         "7xlarge": 50,
+        "body": {
+          "neutral": {
+            "regular": 24,
+            "small": 22,
+          },
+          "playful": {
+            "regular": 26,
+            "small": 24,
+          },
+        },
+        "caption": 16,
+        "label": 14,
         "large": 24,
         "medium": 22,
         "small": 16,
+        "titles": {
+          "neutral": {
+            "h1": 50,
+            "h2": 40,
+            "h3": 36,
+            "h4": 32,
+            "h5": 28,
+            "h6": 28,
+          },
+          "playful": {
+            "h1": 44,
+            "h2": 40,
+            "h3": 36,
+            "h4": 32,
+            "h5": 26,
+            "h6": 28,
+          },
+        },
         "xlarge": 26,
         "xsmall": 14,
         "xxxlarge": 32,
@@ -1140,13 +1320,13 @@ Object {
       },
     },
   },
-  "borderWidths": Object {
+  "borderWidths": {
     "base": 1,
     "medium": 2,
   },
-  "colors": Object {
+  "colors": {
     "archived": "#abacaf",
-    "archivedSurface": "#f1f2f3",
+    "archivedSurface": "#dadbde",
     "darkGlobalSurface": "#001f23",
     "decorativePrimary": "#ffffff",
     "decorativePrimarySurface": "#ccd2d3",
@@ -1168,17 +1348,17 @@ Object {
     "mutedSuccess": "#7bd897",
     "mutedWarning": "#ffcb8d",
     "neutralGlobalSurface": "#f6f6f7",
-    "onArchivedSurface": "#737479",
+    "onArchivedSurface": "#606065",
     "onDarkGlobalSurface": "#ffffff",
     "onDefaultGlobalSurface": "#001f23",
-    "onErrorSurface": "#de350b",
-    "onInfoSurface": "#4568fb",
+    "onErrorSurface": "#cb300a",
+    "onInfoSurface": "#355bfb",
     "onPrimary": "#ffffff",
     "onSecondary": "#ffffff",
     "onSuccessSurface": "#017d6d",
-    "onWarningSurface": "#ffa234",
+    "onWarningSurface": "#ac5d00",
     "overlayGlobalSurface": "#000000",
-    "pressedSurface": "#664780",
+    "pressedSurface": "#33144d",
     "primary": "#401960",
     "primaryOutline": "#001f23",
     "secondary": "#795e90",
@@ -1188,7 +1368,7 @@ Object {
     "warning": "#ffbe71",
     "warningSurface": "#fff6eb",
   },
-  "fontSizes": Object {
+  "fontSizes": {
     "6xlarge": 36,
     "7xlarge": 42,
     "large": 16,
@@ -1201,19 +1381,19 @@ Object {
     "xxxxlarge": 28,
     "xxxxxlarge": 32,
   },
-  "fonts": Object {
-    "neutral": Object {
+  "fonts": {
+    "neutral": {
       "light": "BeVietnamPro-Light",
       "regular": "BeVietnamPro-Regular",
       "semiBold": "BeVietnamPro-SemiBold",
     },
-    "playful": Object {
+    "playful": {
       "light": "RebondGrotesque-Light",
       "regular": "RebondGrotesque",
       "semiBold": "RebondGrotesque-SemiBold",
     },
   },
-  "lineHeights": Object {
+  "lineHeights": {
     "6xlarge": 44,
     "7xlarge": 50,
     "large": 24,
@@ -1226,7 +1406,7 @@ Object {
     "xxxxlarge": 36,
     "xxxxxlarge": 40,
   },
-  "radii": Object {
+  "radii": {
     "5xlarge": 32,
     "base": 4,
     "large": 12,
@@ -1236,11 +1416,24 @@ Object {
     "xxlarge": 20,
     "xxxlarge": 24,
   },
-  "sizes": Object {
+  "shadows": {
+    "default": {
+      "elevation": 3,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+    },
+  },
+  "sizes": {
     "14xlarge": 136,
     "15xlarge": 144,
     "18xlarge": 168,
     "19xlarge": 176,
+    "5xlarge": 64,
     "6xlarge": 72,
     "7xlarge": 80,
     "9xlarge": 96,
@@ -1256,7 +1449,8 @@ Object {
     "xxxxlarge": 56,
     "xxxxxlarge": 64,
   },
-  "space": Object {
+  "space": {
+    "5xlarge": 64,
     "large": 24,
     "medium": 16,
     "small": 8,