@telus-uds/theme-allium 4.36.0 → 5.1.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 12 Aug 2024 06:25:31 GMT
+ * Generated on Mon, 16 Sep 2024 12:24:54 GMT
  *
  */
 
@@ -95,7 +95,7 @@ module.exports = {
         borderRadius: null,
         borderWidth: null,
         contentFontColor: '#414547',
-        contentFontName: 'HelveticaNow',
+        contentFontName: 'HNforTELUSSA',
         contentFontSize: 16,
         contentFontWeight: '400',
         contentLineHeight: 1.25,
@@ -116,7 +116,7 @@ module.exports = {
         statusIcon: null,
         statusIconColor: null,
         titleFontColor: '#414547',
-        titleFontName: 'HelveticaNow',
+        titleFontName: 'HNforTELUSSA',
         titleFontSize: 16,
         titleFontWeight: '700',
         titleLineHeight: 1.5,
@@ -247,7 +247,7 @@ module.exports = {
         borderRadius: 4,
         borderWidth: 2,
         color: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '700',
         gradient: null,
@@ -269,7 +269,7 @@ module.exports = {
         {
           if: { viewport: [ 'xs', 'sm', 'md' ] },
           tokens: {
-            titleHeadingFontName: 'HelveticaNow',
+            titleHeadingFontName: 'HNforTELUSSA',
             titleHeadingFontSize: 24,
             titleHeadingFontWeight: '400',
             titleHeadingLineHeight: 1.33333333333
@@ -286,7 +286,7 @@ module.exports = {
           type: 'linear'
         },
         color: '#414547',
-        linkFontName: 'HelveticaNow',
+        linkFontName: 'HNforTELUSSA',
         linkFontSize: 16,
         linkFontWeight: '700',
         linkLineHeight: 1.5,
@@ -295,10 +295,10 @@ module.exports = {
         paddingLeft: 32,
         paddingRight: 32,
         paddingTop: 16,
-        titleFontName: 'HelveticaNow',
+        titleFontName: 'HNforTELUSSA',
         titleFontSize: 20,
         titleFontWeight: '400',
-        titleHeadingFontName: 'HelveticaNow',
+        titleHeadingFontName: 'HNforTELUSSA',
         titleHeadingFontSize: 28,
         titleHeadingFontWeight: '400',
         titleHeadingLineHeight: 1.28571428571,
@@ -526,7 +526,7 @@ module.exports = {
       tokens: {
         color: '#676e73',
         currentColor: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '500',
         icon: PaletteIconChevronRight,
@@ -829,7 +829,7 @@ module.exports = {
         borderTopWidth: 1,
         borderWidth: 1,
         color: '#2b8000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         height: null,
@@ -956,7 +956,7 @@ module.exports = {
         borderWidth: 1,
         color: '#676e73',
         dividerColor: '#e3e6e8',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconCaretDown,
@@ -989,6 +989,11 @@ module.exports = {
     },
     ButtonGroup: {
       appearances: {
+        style: {
+          description: 'Configure `style` variant for `ButtonGroup`',
+          type: 'variant',
+          values: [ 'contained' ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -1001,20 +1006,43 @@ module.exports = {
         }
       },
       rules: [
-        { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } },
+        {
+          if: { viewport: [ 'lg', 'xl' ] },
+          tokens: { gap: 3, space: 3 }
+        },
         {
           if: { viewport: [ 'xs' ], width: 'responsive' },
           tokens: { alignItems: 'stretch', direction: 'column' }
+        },
+        {
+          if: { style: 'contained' },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0.05)',
+            borderRadius: 99,
+            padding: 8,
+            space: 2
+          }
+        },
+        {
+          if: {
+            style: 'contained',
+            viewport: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+          },
+          tokens: { borderRadius: 24 }
         }
       ],
       tokens: {
         alignItems: 'center',
+        backgroundColor: null,
+        borderRadius: 0,
         direction: 'row',
         fieldSpace: 2,
         flexGrow: 0,
         flexShrink: 0,
+        gap: 2,
         justifyContent: 'flex-start',
-        space: 1
+        padding: 0,
+        space: 2
       }
     },
     ButtonGroupItem: {
@@ -1051,6 +1079,11 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        style: {
+          description: 'Configure `style` variant for `ButtonGroupItem`',
+          type: 'variant',
+          values: [ 'contained' ]
+        },
         width: {
           description: 'Available in default, or responsive. Default-width expands based on content. Responsive automatically applies full-width when is displayed on the XS viewport.',
           type: 'variant',
@@ -1110,7 +1143,57 @@ module.exports = {
           }
         },
         { if: { iconPosition: 'right' }, tokens: { iconSpace: 1 } },
-        { if: { width: 'responsive' }, tokens: { width: '100%' } }
+        { if: { width: 'responsive' }, tokens: { width: '100%' } },
+        {
+          if: { style: 'contained' },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0,
+            height: 32
+          }
+        },
+        {
+          if: { hover: true, style: 'contained' },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#676e73',
+            borderWidth: 3
+          }
+        },
+        {
+          if: { selected: true, style: 'contained' },
+          tokens: {
+            backgroundColor: '#4b286d',
+            color: '#ffffff',
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { focus: true, style: 'contained' },
+          tokens: {
+            borderColor: '#676e73',
+            borderWidth: 1,
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { hover: true, selected: true, style: 'contained' },
+          tokens: {
+            backgroundColor: '#7c53a5',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#ffffff',
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { focus: true, selected: true, style: 'contained' },
+          tokens: { outerBorderColor: '#4b286d', outerBorderWidth: 2 }
+        },
+        {
+          if: { pressed: true, style: 'contained' },
+          tokens: { backgroundColor: '#3f2a54' }
+        }
       ],
       tokens: {
         alignSelf: 'flex-start',
@@ -1119,7 +1202,7 @@ module.exports = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         height: 36,
@@ -1168,7 +1251,7 @@ module.exports = {
       appearances: {
         background: {
           type: 'variant',
-          values: [ 'alternative', 'subtle', 'grid', 'feature' ]
+          values: [ 'alternative', 'subtle', 'grid', 'feature', 'plain' ]
         },
         borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
         focus: {
@@ -1277,6 +1360,10 @@ module.exports = {
           if: { background: 'grid' },
           tokens: { backgroundColor: '#fafafa', borderWidth: 0 }
         },
+        {
+          if: { background: 'plain' },
+          tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
+        },
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
@@ -1574,7 +1661,7 @@ module.exports = {
             borderBottomColor: '#676e73',
             borderBottomWidth: 4,
             color: '#676e73',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '400'
           }
         },
@@ -1617,7 +1704,7 @@ module.exports = {
             borderBottomColor: '#ffffff',
             borderBottomWidth: 4,
             color: '#ffffff',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700'
           }
         }
@@ -1629,7 +1716,7 @@ module.exports = {
         borderBottomWidth: 1,
         color: '#414547',
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 14,
         fontWeight: '400',
@@ -1774,7 +1861,7 @@ module.exports = {
         inputShadow: null,
         inputWidth: 20,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -1914,7 +2001,7 @@ module.exports = {
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 20,
         fontWeight: '500',
         letterSpacing: 0,
@@ -2195,7 +2282,7 @@ module.exports = {
           tokens: {
             textFontSize: 64,
             textLineHeight: 1.125,
-            textTimerFontName: 'HelveticaNow',
+            textTimerFontName: 'HNforTELUSSA',
             textTimerFontWeight: '300'
           }
         },
@@ -2205,7 +2292,7 @@ module.exports = {
             labelBorderColor: '#4b286d',
             textFontSize: 64,
             textLineHeight: 1.125,
-            textTimerFontName: 'HelveticaNow',
+            textTimerFontName: 'HNforTELUSSA',
             textTimerFontWeight: '300'
           }
         },
@@ -2247,13 +2334,13 @@ module.exports = {
         containerPaddingLeftRight: 64,
         inverseBorderColor: '#676e73',
         labelBorderColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
         textFontSize: 16,
         textLineHeight: 1.5,
-        textTimerFontName: 'HelveticaNow',
+        textTimerFontName: 'HNforTELUSSA',
         textTimerFontWeight: '400'
       }
     },
@@ -2271,7 +2358,7 @@ module.exports = {
         calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#7c53a5',
         calendarDayDefaultCalendarDaySelectedHoverColor: '#ffffff',
         calendarDayDefaultColor: '#414547',
-        calendarDayDefaultFontName: 'HelveticaNow',
+        calendarDayDefaultFontName: 'HNforTELUSSA',
         calendarDayDefaultFontSize: 14,
         calendarDayDefaultFontWeight: '400',
         calendarDaySelectedDisabledBackground: '#fafafa',
@@ -2284,7 +2371,7 @@ module.exports = {
         calendarDaySelectedHoverBorderColor: '#b2b9bf',
         calendarDaySelectedHoverColor: '#414547',
         calendarMonthCaptionColor: '#2c2e30',
-        calendarMonthCaptionFontName: 'HelveticaNow',
+        calendarMonthCaptionFontName: 'HNforTELUSSA',
         calendarMonthCaptionFontSize: 20,
         calendarMonthCaptionFontWeight: '700',
         calendarMonthCaptionLineHeight: 1.4,
@@ -2292,7 +2379,7 @@ module.exports = {
         dateInputStrokeColor: '#676e73',
         dayPickerNavigationButtonPadding: 8,
         dayPickerWeekHeaderColor: '#414547',
-        dayPickerWeekHeaderFontName: 'HelveticaNow',
+        dayPickerWeekHeaderFontName: 'HNforTELUSSA',
         dayPickerWeekHeaderFontWeight: '700',
         dayPickerWeekHeaderLineHeight: 1.42857142857,
         dayPickerWeekHeaderSmall: 14,
@@ -2313,7 +2400,7 @@ module.exports = {
       rules: [],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '500',
         lineHeight: 1.33333333333
@@ -2553,7 +2640,7 @@ module.exports = {
         contentPanelBorderColor: 'rgba(0, 0, 0, 0)',
         contentPanelBorderWidth: 0,
         contentPanelFontColor: '#2c2e30',
-        contentPanelFontName: 'HelveticaNow',
+        contentPanelFontName: 'HNforTELUSSA',
         contentPanelFontSize: 16,
         contentPanelFontWeight: '700',
         contentPanelLineHeight: 1.5,
@@ -2609,7 +2696,7 @@ module.exports = {
         borderWidth: 1,
         color: '#2c2e30',
         contentFontSize: 16,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontWeight: '400',
         icon: null,
         iconColor: 'rgba(0, 0, 0, 0)',
@@ -2641,6 +2728,31 @@ module.exports = {
         paddingTop: 0
       }
     },
+    FileUpload: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        buttonBackgroundColor: null,
+        buttonBorderColor: null,
+        buttonBorderRadius: null,
+        buttonBorderWidth: null,
+        buttonHeight: null,
+        buttonMinWidth: null,
+        buttonTextColor: null,
+        buttonWidth: null,
+        notificationBackgroundColor: null,
+        notificationBorderColor: null,
+        notificationBorderRadius: null,
+        notificationDismissButtonGap: null,
+        notificationDismissIcon: null,
+        notificationDismissIconColor: null,
+        notificationIcon: null,
+        notificationIconColor: null,
+        notificationIconGap: null,
+        notificationIconSize: null,
+        notificationTextColor: '#414547'
+      }
+    },
     Footnote: {
       appearances: {
         viewport: {
@@ -2714,13 +2826,13 @@ module.exports = {
         footnoteHeaderPaddingLeft: 16,
         footnoteHeaderPaddingRight: 4,
         footnoteHeaderPaddingTop: 24,
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontSize: 16,
         headerFontWeight: '500',
         headerLineHeight: 1.5,
         headerMargin: 16,
         listItemColor: '#414547',
-        listItemFontName: 'HelveticaNow',
+        listItemFontName: 'HNforTELUSSA',
         listItemFontSize: 16,
         listItemFontWeight: '400',
         listItemLineHeight: 1.5,
@@ -2784,7 +2896,7 @@ module.exports = {
       ],
       tokens: {
         color: null,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1,
@@ -2852,10 +2964,10 @@ module.exports = {
         color: {
           type: 'variant',
           values: [
-            'brand',   'default',
-            'subtle',  'success',
+            'brand',   'subtle',
+            'offer',   'success',
             'danger',  'warning',
-            'inverse'
+            'inverse', 'default'
           ]
         },
         padding: {
@@ -2935,6 +3047,7 @@ module.exports = {
         { if: { color: 'danger' }, tokens: { color: '#c12335' } },
         { if: { color: 'warning' }, tokens: { color: '#b4872c' } },
         { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
+        { if: { color: 'offer' }, tokens: { color: '#4b286d' } },
         { if: { size: 'extraLarge' }, tokens: { size: 48 } },
         { if: { rank: 'primary' }, tokens: { color: '#4b286d' } }
       ],
@@ -3254,18 +3367,18 @@ module.exports = {
         width: null
       }
     },
-    Image: { appearances: {}, rules: [], tokens: { borderRadius: 4 } },
+    Image: { appearances: {}, rules: [], tokens: { borderRadius: null } },
     InputLabel: {
       appearances: {},
       rules: [],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         gap: 8,
         hintColor: '#414547',
-        hintFontName: 'HelveticaNow',
+        hintFontName: 'HNforTELUSSA',
         hintFontSize: 14,
         hintFontWeight: '400',
         hintLineHeight: 1.42857142857,
@@ -3353,7 +3466,7 @@ module.exports = {
         {
           if: { size: 'micro' },
           tokens: {
-            blockFontName: 'HelveticaNow',
+            blockFontName: 'HNforTELUSSA',
             blockFontSize: 12,
             blockFontWeight: '500',
             blockLineHeight: 1.125,
@@ -3419,7 +3532,7 @@ module.exports = {
       ],
       tokens: {
         alignSelf: 'flex-start',
-        blockFontName: 'HelveticaNow',
+        blockFontName: 'HNforTELUSSA',
         blockFontSize: 16,
         blockFontWeight: '400',
         blockLineHeight: 1.5,
@@ -3495,7 +3608,7 @@ module.exports = {
         itemBulletColor: '#4b286d',
         itemBulletContainerAlign: 'center',
         itemBulletContainerWidth: 24,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemIconColor: '#4b286d',
@@ -3581,7 +3694,7 @@ module.exports = {
           if: { current: true },
           tokens: {
             groupColor: '#4b286d',
-            groupFontName: 'HelveticaNow',
+            groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700',
             itemColor: '#4b286d',
             itemPaddingBottom: 12,
@@ -3596,7 +3709,7 @@ module.exports = {
             groupBackgroundColor: '#e3e6e8',
             groupBorderWidth: 0,
             groupColor: '#676e73',
-            groupFontName: 'HelveticaNow',
+            groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700'
           }
         },
@@ -3648,7 +3761,7 @@ module.exports = {
         groupBorderRadius: 0,
         groupBorderWidth: 1,
         groupColor: '#414547',
-        groupFontName: 'HelveticaNow',
+        groupFontName: 'HNforTELUSSA',
         groupFontSize: 14,
         groupFontWeight: '400',
         groupHeight: 40,
@@ -3670,7 +3783,7 @@ module.exports = {
         itemBorderWidth: 1,
         itemColor: '#414547',
         itemDisplay: false,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 14,
         itemFontWeight: '700',
         itemHeight: 40,
@@ -3865,16 +3978,22 @@ module.exports = {
       ],
       tokens: {
         buttonDirection: 'row',
+        contentMarginBottom: 32,
+        contentMarginLeft: 16,
+        contentMarginRight: 16,
+        contentMarginTop: 24,
+        contentPaddingLeft: 16,
+        contentPaddingRight: 16,
         headerFontColor: '#414547',
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontSize: 16,
         headerFontWeight: '500',
         headerLineHeight: 1.5,
-        maxHeightSize: 0,
+        maxHeightSize: 480,
         maxWidthSize: 0,
-        minHeight: 412,
+        minHeight: 0,
         minWidth: 320,
-        subHeaderFontName: 'HelveticaNow',
+        subHeaderFontName: 'HNforTELUSSA',
         subHeaderFontSize: 14,
         subHeaderFontWeight: '400',
         subHeaderLineHeight: 1.4
@@ -3922,7 +4041,7 @@ module.exports = {
             backgroundColor: '#f4f4f7',
             borderColor: '#f4f4f7',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700'
           }
         },
@@ -3978,7 +4097,7 @@ module.exports = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '400',
         icoMenu: PaletteIconCaretDown,
@@ -4141,7 +4260,7 @@ module.exports = {
         dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         icon: PaletteIconStatusInfo,
@@ -4189,7 +4308,7 @@ module.exports = {
         }
       ],
       tokens: {
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontWeight: '700',
         interItemMargin: 8,
         itemBulletContainerWidth: 20,
@@ -4197,7 +4316,7 @@ module.exports = {
         itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
         itemColor: null,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemLineHeight: 1.5,
@@ -4234,7 +4353,7 @@ module.exports = {
         ellipsisBorderTopWidth: 0,
         ellipsisHeight: null,
         ellipsisPadding: 0,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         gap: 2,
@@ -4304,7 +4423,7 @@ module.exports = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: 32,
@@ -4417,7 +4536,7 @@ module.exports = {
         borderTopWidth: 0,
         color: '#676e73',
         displayLabel: true,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: null,
@@ -4569,7 +4688,7 @@ module.exports = {
         }
       ],
       tokens: {
-        amountFontName: 'HelveticaNow',
+        amountFontName: 'HNforTELUSSA',
         amountFontSize: 40,
         amountFontWeight: '300',
         amountLetterSpacing: -0.039,
@@ -4578,34 +4697,34 @@ module.exports = {
         bottomTextFontSize: 16,
         bottomTextLineHeight: 1.5,
         bottomTextMarginTop: 4,
-        centsFontName: 'HelveticaNow',
+        centsFontName: 'HNforTELUSSA',
         centsFontSize: 20,
         centsFontWeight: '400',
         centsLineHeight: 1.2,
-        currencySymbolFontName: 'HelveticaNow',
+        currencySymbolFontName: 'HNforTELUSSA',
         currencySymbolFontSize: 20,
         currencySymbolFontWeight: '400',
         currencySymbolLineHeight: 1.2,
         dividerColor: '#b2b9bf',
         fontColor: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontWeight: '700',
         footnoteGap: 4,
         footnoteLinkColor: '#414547',
-        footnoteLinkFontName: 'HelveticaNow',
+        footnoteLinkFontName: 'HNforTELUSSA',
         footnoteLinkFontSize: 14,
         footnoteLinkFontWeight: '400',
         footnoteLinkLineHeight: 1.42857142857,
         footnoteMarginTop: 4,
         priceMarginBottom: 8,
-        rateFontName: 'HelveticaNow',
+        rateFontName: 'HNforTELUSSA',
         rateFontSize: 16,
         rateFontWeight: '400',
         rateLineHeight: 1.25,
         strikeThroughColor: '#676e73',
         strikeThroughHeight: 2,
         strikeThroughPosition: 22,
-        topTextFontName: 'HelveticaNow',
+        topTextFontName: 'HNforTELUSSA',
         topTextFontSize: 16,
         topTextFontWeight: '700',
         topTextLineHeight: 1.5,
@@ -4891,7 +5010,7 @@ module.exports = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         icon: null,
@@ -5003,7 +5122,7 @@ module.exports = {
         contentDirection: 'column',
         contentMaxDimension: 168,
         contentSpace: 3,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         gap: 5,
@@ -5074,7 +5193,7 @@ module.exports = {
         itemBulletHeight: 4,
         itemBulletWidth: 4,
         itemFontColor: '#676e73',
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '700',
         itemIconColor: '#4b286d',
@@ -5153,7 +5272,7 @@ module.exports = {
         containerPaddingRight: 0,
         containerPaddingTop: 0,
         containerShadow: null,
-        descriptionFontName: 'HelveticaNow',
+        descriptionFontName: 'HNforTELUSSA',
         descriptionFontSize: 14,
         descriptionFontWeight: '400',
         descriptionLineHeight: 1.42857142857,
@@ -5168,7 +5287,7 @@ module.exports = {
         inputOutlineWidth: 0,
         inputSize: 20,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -5299,7 +5418,7 @@ module.exports = {
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 20,
         fontWeight: '500',
         letterSpacing: 0,
@@ -5436,7 +5555,7 @@ module.exports = {
         curveMarginTop: 4,
         curveWidth: 8,
         fontColor: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '700',
         gradient: null,
@@ -5497,7 +5616,7 @@ module.exports = {
         buttonsGap: 2,
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -5602,6 +5721,7 @@ module.exports = {
     },
     Select: {
       appearances: {
+        active: { type: 'state', values: [ true ] },
         focus: {
           description: 'Focus states for some input elements are well supported across web, RN, ios and android',
           type: 'state',
@@ -5659,6 +5779,10 @@ module.exports = {
             color: '#676e73',
             icon: null
           }
+        },
+        {
+          if: { active: true },
+          tokens: { icon: PaletteIconCaretUp }
         }
       ],
       tokens: {
@@ -5668,7 +5792,7 @@ module.exports = {
         borderWidth: 1,
         color: '#414547',
         feedbackBackgroundColor: '#f4f4f7',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: 48,
@@ -5729,7 +5853,7 @@ module.exports = {
             accentBackgroundColor: '#4b286d',
             backgroundColor: '#f4f4f7',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700',
             paddingLeft: 12
           }
@@ -5754,7 +5878,7 @@ module.exports = {
           tokens: {
             accentBackgroundColor: 'rgba(0, 0, 0, 0)',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '400',
             paddingLeft: 16
           }
@@ -5795,7 +5919,7 @@ module.exports = {
         borderStyle: 'solid',
         borderWidth: 1,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         justifyContent: 'space-between',
@@ -5876,7 +6000,7 @@ module.exports = {
         backgroundColor: 'rgba(0, 0, 0, 0)',
         borderRadius: 4,
         color: '#2b8000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -5949,7 +6073,7 @@ module.exports = {
         buttonPaddingRight: 16,
         buttonRadius: 32,
         detailsContainerPadding: 8,
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontWeight: '700',
         playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff',
@@ -6034,7 +6158,7 @@ module.exports = {
         },
         {
           if: { priority: 'low', purpose: 'brand' },
-          tokens: { backgroundColor: '#e0d8fc' }
+          tokens: { backgroundColor: '#efedff' }
         },
         {
           if: { priority: 'high', purpose: 'brand' },
@@ -6116,12 +6240,13 @@ module.exports = {
         borderColor: null,
         borderRadius: null,
         borderWidth: null,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         icon: PaletteIconStatusInfo,
         iconColor: '#414547',
         iconGradient: null,
+        marginLeft: 8,
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
@@ -6195,10 +6320,10 @@ module.exports = {
         knobSize: 16,
         labelColor: '#414547',
         labelCurrentColor: '#7c53a5',
-        labelCurrentFontName: 'HelveticaNow',
+        labelCurrentFontName: 'HNforTELUSSA',
         labelCurrentFontWeight: '700',
         labelDirection: 'column',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 14,
         labelFontWeight: '400',
         labelGap: 0,
@@ -6210,7 +6335,7 @@ module.exports = {
         showStepName: true,
         showStepTrackerLabel: true,
         stepLabelColor: '#676e73',
-        stepLabelFontName: 'HelveticaNow',
+        stepLabelFontName: 'HNforTELUSSA',
         stepLabelFontSize: 12,
         stepLabelFontWeight: '700',
         stepLabelLineHeight: 1.33333333333,
@@ -6301,7 +6426,7 @@ module.exports = {
           tokens: {
             cellPaddingBottom: 8,
             cellPaddingTop: 8,
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '700',
             lineHeight: 1.25
@@ -6313,7 +6438,7 @@ module.exports = {
             cellBackground: '#fafafa',
             cellPaddingBottom: 8,
             cellPaddingTop: 8,
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             lineHeight: 1.14285714286
@@ -6324,7 +6449,7 @@ module.exports = {
           tokens: {
             cellBackground: '#f4f4f7',
             cellBoxShadowColor: '#b2b9bf',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500'
           }
@@ -6333,7 +6458,7 @@ module.exports = {
           if: { spacing: 'default', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             lineHeight: 1.28571428571
@@ -6343,7 +6468,7 @@ module.exports = {
           if: { spacing: 'compact', text: 'medium', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500',
             lineHeight: 1.25
@@ -6351,12 +6476,12 @@ module.exports = {
         },
         {
           if: { spacing: 'default', type: 'rowHeading' },
-          tokens: { fontName: 'HelveticaNow', fontSize: 16, fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontSize: 16, fontWeight: '700' }
         },
         {
           if: { spacing: 'default', text: 'small', type: 'default' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '400',
             lineHeight: 1.42857142857
@@ -6365,7 +6490,7 @@ module.exports = {
         {
           if: { spacing: 'compact', text: 'small', type: 'default' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '400',
             lineHeight: 1.14285714286
@@ -6374,7 +6499,7 @@ module.exports = {
         {
           if: { text: 'small', type: 'rowHeading' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '700',
             lineHeight: 1.14285714286
@@ -6401,7 +6526,7 @@ module.exports = {
         },
         display: null,
         fontColor: '#000000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -6537,7 +6662,7 @@ module.exports = {
         borderRadius: 32,
         borderWidth: 0,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 14,
         fontWeight: '700',
@@ -6671,7 +6796,7 @@ module.exports = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconAdd,
@@ -6777,7 +6902,7 @@ module.exports = {
         expandTitleBorder: 0,
         expandTitleBorderColor: 'rgba(0, 0, 0, 0)',
         expandTitleColor: '#2c2e30',
-        expandTitleFontName: 'HelveticaNow',
+        expandTitleFontName: 'HNforTELUSSA',
         expandTitleFontSize: 16,
         expandTitleFontWeight: '500',
         expandTitleLineHeight: 1.5,
@@ -6794,7 +6919,7 @@ module.exports = {
         iconOuterBorderGap: 0,
         iconOuterBorderWidth: null,
         listColor: '#414547',
-        listFontName: 'HelveticaNow',
+        listFontName: 'HNforTELUSSA',
         listFontSize: 14,
         listFontWeight: '400',
         listLineHeight: 1.42857142857,
@@ -6822,7 +6947,7 @@ module.exports = {
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
-            testimonialFontNameHeading: 'HelveticaNow',
+            testimonialFontNameHeading: 'HNforTELUSSA',
             testimonialFontSizeHeading: 28,
             testimonialFontWeightHeading: '400',
             testimonialLineHeightHeading: 1.28571428571
@@ -6830,11 +6955,11 @@ module.exports = {
         }
       ],
       tokens: {
-        additionalFontName: 'HelveticaNow',
+        additionalFontName: 'HNforTELUSSA',
         additionalFontSize: 14,
         additionalFontWeight: '400',
         additionalLineHeight: 1.42857142857,
-        authorFontName: 'HelveticaNow',
+        authorFontName: 'HNforTELUSSA',
         authorFontSize: 16,
         authorFontWeight: '700',
         authorLineHeight: 1.5,
@@ -6847,8 +6972,8 @@ module.exports = {
         imageSize: 48,
         quoteContainerGap: 4,
         testimonialContainerGap: 12,
-        testimonialFontNameHeading: 'HelveticaNow',
-        testimonialFontNameLarge: 'HelveticaNow',
+        testimonialFontNameHeading: 'HNforTELUSSA',
+        testimonialFontNameLarge: 'HNforTELUSSA',
         testimonialFontSizeHeading: 24,
         testimonialFontSizeLarge: 20,
         testimonialFontWeightHeading: '400',
@@ -6942,7 +7067,7 @@ module.exports = {
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
         defaultCreditIcon: PaletteIconCreditCard,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         icon: null,
@@ -7042,7 +7167,7 @@ module.exports = {
         animationPaddingBottomBefore: 0,
         animationPaddingTopAfter: 16,
         animationPaddingTopBefore: 0,
-        chevronlinkFontName: 'HelveticaNow',
+        chevronlinkFontName: 'HNforTELUSSA',
         chevronlinkFontWeight: '400',
         containerBackgroundColor: '#4b286d',
         containerGap: 10,
@@ -7145,7 +7270,7 @@ module.exports = {
         iconColor: '#676e73',
         iconSize: 14,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -7223,7 +7348,7 @@ module.exports = {
         backgroundColor: '#2c2e30',
         borderRadius: 8,
         color: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -7372,7 +7497,7 @@ module.exports = {
         {
           if: { size: 'display1' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 40,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7383,7 +7508,7 @@ module.exports = {
         {
           if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 64,
             fontWeight: '300',
             lineHeight: 1.2,
@@ -7393,7 +7518,7 @@ module.exports = {
         {
           if: { size: 'display2' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 36,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7404,7 +7529,7 @@ module.exports = {
         {
           if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 56,
             fontWeight: '300',
             lineHeight: 1.14285714286,
@@ -7414,7 +7539,7 @@ module.exports = {
         {
           if: { size: 'h1' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 28,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7425,7 +7550,7 @@ module.exports = {
         {
           if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 40,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7436,7 +7561,7 @@ module.exports = {
         {
           if: { size: 'h2' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 24,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7447,7 +7572,7 @@ module.exports = {
         {
           if: { size: 'h2', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 28,
             fontWeight: '300',
             letterSpacing: -0.017,
@@ -7458,7 +7583,7 @@ module.exports = {
         {
           if: { size: 'h3' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 20,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7469,7 +7594,7 @@ module.exports = {
         {
           if: { size: 'h4' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7480,7 +7605,7 @@ module.exports = {
         {
           if: { size: 'h5' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7494,7 +7619,7 @@ module.exports = {
         {
           if: { size: 'h6' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 12,
             fontWeight: '700',
             letterSpacing: 0,
@@ -7529,7 +7654,7 @@ module.exports = {
         {
           if: { size: 'micro' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 12,
             fontWeight: '500',
             lineHeight: 1.33333333333,
@@ -7540,7 +7665,7 @@ module.exports = {
           if: { size: 'eyebrow' },
           tokens: {
             color: '#7c53a5',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '700',
             lineHeight: 1.42857142857,
@@ -7550,31 +7675,31 @@ module.exports = {
         {
           description: 'Please only bold single words while using with headings',
           if: { bold: true },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'micro' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'display1' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'display2' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'h1' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'h2' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'h3' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: {
@@ -7582,15 +7707,15 @@ module.exports = {
             size: [ 'h4', 'h5', 'h6' ],
             viewport: [ 'xs', 'sm', 'md' ]
           },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { weight: 'semibold' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '500' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '500' }
         },
         {
           if: { weight: 'bold' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         { if: { colour: 'default' }, tokens: { color: '#414547' } },
         { if: { colour: 'brand' }, tokens: { color: '#4b286d' } },
@@ -7628,7 +7753,7 @@ module.exports = {
       ],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 16,
         fontWeight: '400',
@@ -7906,5 +8031,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.61.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.63.0' }
 }