@telus-uds/theme-allium 4.36.0 → 5.1.0

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 12 Aug 2024 06:25:54 GMT
+ * Generated on Mon, 16 Sep 2024 12:25:16 GMT
  *
  */
 
@@ -94,7 +94,7 @@ const theme = {
         borderRadius: null,
         borderWidth: null,
         contentFontColor: '#414547',
-        contentFontName: 'HelveticaNow',
+        contentFontName: 'HNforTELUSSA',
         contentFontSize: 16,
         contentFontWeight: '400',
         contentLineHeight: 1.25,
@@ -115,7 +115,7 @@ const theme = {
         statusIcon: null,
         statusIconColor: null,
         titleFontColor: '#414547',
-        titleFontName: 'HelveticaNow',
+        titleFontName: 'HNforTELUSSA',
         titleFontSize: 16,
         titleFontWeight: '700',
         titleLineHeight: 1.5,
@@ -246,7 +246,7 @@ const theme = {
         borderRadius: 4,
         borderWidth: 2,
         color: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '700',
         gradient: null,
@@ -268,7 +268,7 @@ const theme = {
         {
           if: { viewport: [ 'xs', 'sm', 'md' ] },
           tokens: {
-            titleHeadingFontName: 'HelveticaNow',
+            titleHeadingFontName: 'HNforTELUSSA',
             titleHeadingFontSize: 24,
             titleHeadingFontWeight: '400',
             titleHeadingLineHeight: 1.33333333333
@@ -285,7 +285,7 @@ const theme = {
           type: 'linear'
         },
         color: '#414547',
-        linkFontName: 'HelveticaNow',
+        linkFontName: 'HNforTELUSSA',
         linkFontSize: 16,
         linkFontWeight: '700',
         linkLineHeight: 1.5,
@@ -294,10 +294,10 @@ const theme = {
         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,
@@ -525,7 +525,7 @@ const theme = {
       tokens: {
         color: '#676e73',
         currentColor: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '500',
         icon: PaletteIconChevronRight,
@@ -828,7 +828,7 @@ const theme = {
         borderTopWidth: 1,
         borderWidth: 1,
         color: '#2b8000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         height: null,
@@ -955,7 +955,7 @@ const theme = {
         borderWidth: 1,
         color: '#676e73',
         dividerColor: '#e3e6e8',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconCaretDown,
@@ -988,6 +988,11 @@ const theme = {
     },
     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',
@@ -1000,20 +1005,43 @@ const theme = {
         }
       },
       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: {
@@ -1050,6 +1078,11 @@ const theme = {
           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',
@@ -1109,7 +1142,57 @@ const theme = {
           }
         },
         { 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',
@@ -1118,7 +1201,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         height: 36,
@@ -1167,7 +1250,7 @@ const theme = {
       appearances: {
         background: {
           type: 'variant',
-          values: [ 'alternative', 'subtle', 'grid', 'feature' ]
+          values: [ 'alternative', 'subtle', 'grid', 'feature', 'plain' ]
         },
         borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
         focus: {
@@ -1276,6 +1359,10 @@ const theme = {
           if: { background: 'grid' },
           tokens: { backgroundColor: '#fafafa', borderWidth: 0 }
         },
+        {
+          if: { background: 'plain' },
+          tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
+        },
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
@@ -1573,7 +1660,7 @@ const theme = {
             borderBottomColor: '#676e73',
             borderBottomWidth: 4,
             color: '#676e73',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '400'
           }
         },
@@ -1616,7 +1703,7 @@ const theme = {
             borderBottomColor: '#ffffff',
             borderBottomWidth: 4,
             color: '#ffffff',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700'
           }
         }
@@ -1628,7 +1715,7 @@ const theme = {
         borderBottomWidth: 1,
         color: '#414547',
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 14,
         fontWeight: '400',
@@ -1773,7 +1860,7 @@ const theme = {
         inputShadow: null,
         inputWidth: 20,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -1913,7 +2000,7 @@ const theme = {
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 20,
         fontWeight: '500',
         letterSpacing: 0,
@@ -2194,7 +2281,7 @@ const theme = {
           tokens: {
             textFontSize: 64,
             textLineHeight: 1.125,
-            textTimerFontName: 'HelveticaNow',
+            textTimerFontName: 'HNforTELUSSA',
             textTimerFontWeight: '300'
           }
         },
@@ -2204,7 +2291,7 @@ const theme = {
             labelBorderColor: '#4b286d',
             textFontSize: 64,
             textLineHeight: 1.125,
-            textTimerFontName: 'HelveticaNow',
+            textTimerFontName: 'HNforTELUSSA',
             textTimerFontWeight: '300'
           }
         },
@@ -2246,13 +2333,13 @@ const theme = {
         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'
       }
     },
@@ -2270,7 +2357,7 @@ const theme = {
         calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#7c53a5',
         calendarDayDefaultCalendarDaySelectedHoverColor: '#ffffff',
         calendarDayDefaultColor: '#414547',
-        calendarDayDefaultFontName: 'HelveticaNow',
+        calendarDayDefaultFontName: 'HNforTELUSSA',
         calendarDayDefaultFontSize: 14,
         calendarDayDefaultFontWeight: '400',
         calendarDaySelectedDisabledBackground: '#fafafa',
@@ -2283,7 +2370,7 @@ const theme = {
         calendarDaySelectedHoverBorderColor: '#b2b9bf',
         calendarDaySelectedHoverColor: '#414547',
         calendarMonthCaptionColor: '#2c2e30',
-        calendarMonthCaptionFontName: 'HelveticaNow',
+        calendarMonthCaptionFontName: 'HNforTELUSSA',
         calendarMonthCaptionFontSize: 20,
         calendarMonthCaptionFontWeight: '700',
         calendarMonthCaptionLineHeight: 1.4,
@@ -2291,7 +2378,7 @@ const theme = {
         dateInputStrokeColor: '#676e73',
         dayPickerNavigationButtonPadding: 8,
         dayPickerWeekHeaderColor: '#414547',
-        dayPickerWeekHeaderFontName: 'HelveticaNow',
+        dayPickerWeekHeaderFontName: 'HNforTELUSSA',
         dayPickerWeekHeaderFontWeight: '700',
         dayPickerWeekHeaderLineHeight: 1.42857142857,
         dayPickerWeekHeaderSmall: 14,
@@ -2312,7 +2399,7 @@ const theme = {
       rules: [],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '500',
         lineHeight: 1.33333333333
@@ -2552,7 +2639,7 @@ const theme = {
         contentPanelBorderColor: 'rgba(0, 0, 0, 0)',
         contentPanelBorderWidth: 0,
         contentPanelFontColor: '#2c2e30',
-        contentPanelFontName: 'HelveticaNow',
+        contentPanelFontName: 'HNforTELUSSA',
         contentPanelFontSize: 16,
         contentPanelFontWeight: '700',
         contentPanelLineHeight: 1.5,
@@ -2608,7 +2695,7 @@ const theme = {
         borderWidth: 1,
         color: '#2c2e30',
         contentFontSize: 16,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontWeight: '400',
         icon: null,
         iconColor: 'rgba(0, 0, 0, 0)',
@@ -2640,6 +2727,31 @@ const theme = {
         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: {
@@ -2713,13 +2825,13 @@ const theme = {
         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,
@@ -2783,7 +2895,7 @@ const theme = {
       ],
       tokens: {
         color: null,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1,
@@ -2851,10 +2963,10 @@ const theme = {
         color: {
           type: 'variant',
           values: [
-            'brand',   'default',
-            'subtle',  'success',
+            'brand',   'subtle',
+            'offer',   'success',
             'danger',  'warning',
-            'inverse'
+            'inverse', 'default'
           ]
         },
         padding: {
@@ -2934,6 +3046,7 @@ const theme = {
         { 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' } }
       ],
@@ -3253,18 +3366,18 @@ const theme = {
         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,
@@ -3352,7 +3465,7 @@ const theme = {
         {
           if: { size: 'micro' },
           tokens: {
-            blockFontName: 'HelveticaNow',
+            blockFontName: 'HNforTELUSSA',
             blockFontSize: 12,
             blockFontWeight: '500',
             blockLineHeight: 1.125,
@@ -3418,7 +3531,7 @@ const theme = {
       ],
       tokens: {
         alignSelf: 'flex-start',
-        blockFontName: 'HelveticaNow',
+        blockFontName: 'HNforTELUSSA',
         blockFontSize: 16,
         blockFontWeight: '400',
         blockLineHeight: 1.5,
@@ -3494,7 +3607,7 @@ const theme = {
         itemBulletColor: '#4b286d',
         itemBulletContainerAlign: 'center',
         itemBulletContainerWidth: 24,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemIconColor: '#4b286d',
@@ -3580,7 +3693,7 @@ const theme = {
           if: { current: true },
           tokens: {
             groupColor: '#4b286d',
-            groupFontName: 'HelveticaNow',
+            groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700',
             itemColor: '#4b286d',
             itemPaddingBottom: 12,
@@ -3595,7 +3708,7 @@ const theme = {
             groupBackgroundColor: '#e3e6e8',
             groupBorderWidth: 0,
             groupColor: '#676e73',
-            groupFontName: 'HelveticaNow',
+            groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700'
           }
         },
@@ -3647,7 +3760,7 @@ const theme = {
         groupBorderRadius: 0,
         groupBorderWidth: 1,
         groupColor: '#414547',
-        groupFontName: 'HelveticaNow',
+        groupFontName: 'HNforTELUSSA',
         groupFontSize: 14,
         groupFontWeight: '400',
         groupHeight: 40,
@@ -3669,7 +3782,7 @@ const theme = {
         itemBorderWidth: 1,
         itemColor: '#414547',
         itemDisplay: false,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 14,
         itemFontWeight: '700',
         itemHeight: 40,
@@ -3864,16 +3977,22 @@ const theme = {
       ],
       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
@@ -3921,7 +4040,7 @@ const theme = {
             backgroundColor: '#f4f4f7',
             borderColor: '#f4f4f7',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700'
           }
         },
@@ -3977,7 +4096,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '400',
         icoMenu: PaletteIconCaretDown,
@@ -4140,7 +4259,7 @@ const theme = {
         dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         icon: PaletteIconStatusInfo,
@@ -4188,7 +4307,7 @@ const theme = {
         }
       ],
       tokens: {
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontWeight: '700',
         interItemMargin: 8,
         itemBulletContainerWidth: 20,
@@ -4196,7 +4315,7 @@ const theme = {
         itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
         itemColor: null,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemLineHeight: 1.5,
@@ -4233,7 +4352,7 @@ const theme = {
         ellipsisBorderTopWidth: 0,
         ellipsisHeight: null,
         ellipsisPadding: 0,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         gap: 2,
@@ -4303,7 +4422,7 @@ const theme = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: 32,
@@ -4416,7 +4535,7 @@ const theme = {
         borderTopWidth: 0,
         color: '#676e73',
         displayLabel: true,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: null,
@@ -4568,7 +4687,7 @@ const theme = {
         }
       ],
       tokens: {
-        amountFontName: 'HelveticaNow',
+        amountFontName: 'HNforTELUSSA',
         amountFontSize: 40,
         amountFontWeight: '300',
         amountLetterSpacing: -0.039,
@@ -4577,34 +4696,34 @@ const theme = {
         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,
@@ -4890,7 +5009,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         icon: null,
@@ -5002,7 +5121,7 @@ const theme = {
         contentDirection: 'column',
         contentMaxDimension: 168,
         contentSpace: 3,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         gap: 5,
@@ -5073,7 +5192,7 @@ const theme = {
         itemBulletHeight: 4,
         itemBulletWidth: 4,
         itemFontColor: '#676e73',
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '700',
         itemIconColor: '#4b286d',
@@ -5152,7 +5271,7 @@ const theme = {
         containerPaddingRight: 0,
         containerPaddingTop: 0,
         containerShadow: null,
-        descriptionFontName: 'HelveticaNow',
+        descriptionFontName: 'HNforTELUSSA',
         descriptionFontSize: 14,
         descriptionFontWeight: '400',
         descriptionLineHeight: 1.42857142857,
@@ -5167,7 +5286,7 @@ const theme = {
         inputOutlineWidth: 0,
         inputSize: 20,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -5298,7 +5417,7 @@ const theme = {
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 20,
         fontWeight: '500',
         letterSpacing: 0,
@@ -5435,7 +5554,7 @@ const theme = {
         curveMarginTop: 4,
         curveWidth: 8,
         fontColor: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '700',
         gradient: null,
@@ -5496,7 +5615,7 @@ const theme = {
         buttonsGap: 2,
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -5601,6 +5720,7 @@ const theme = {
     },
     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',
@@ -5658,6 +5778,10 @@ const theme = {
             color: '#676e73',
             icon: null
           }
+        },
+        {
+          if: { active: true },
+          tokens: { icon: PaletteIconCaretUp }
         }
       ],
       tokens: {
@@ -5667,7 +5791,7 @@ const theme = {
         borderWidth: 1,
         color: '#414547',
         feedbackBackgroundColor: '#f4f4f7',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: 48,
@@ -5728,7 +5852,7 @@ const theme = {
             accentBackgroundColor: '#4b286d',
             backgroundColor: '#f4f4f7',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700',
             paddingLeft: 12
           }
@@ -5753,7 +5877,7 @@ const theme = {
           tokens: {
             accentBackgroundColor: 'rgba(0, 0, 0, 0)',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '400',
             paddingLeft: 16
           }
@@ -5794,7 +5918,7 @@ const theme = {
         borderStyle: 'solid',
         borderWidth: 1,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         justifyContent: 'space-between',
@@ -5875,7 +5999,7 @@ const theme = {
         backgroundColor: 'rgba(0, 0, 0, 0)',
         borderRadius: 4,
         color: '#2b8000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -5948,7 +6072,7 @@ const theme = {
         buttonPaddingRight: 16,
         buttonRadius: 32,
         detailsContainerPadding: 8,
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontWeight: '700',
         playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff',
@@ -6033,7 +6157,7 @@ const theme = {
         },
         {
           if: { priority: 'low', purpose: 'brand' },
-          tokens: { backgroundColor: '#e0d8fc' }
+          tokens: { backgroundColor: '#efedff' }
         },
         {
           if: { priority: 'high', purpose: 'brand' },
@@ -6115,12 +6239,13 @@ const theme = {
         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,
@@ -6194,10 +6319,10 @@ const theme = {
         knobSize: 16,
         labelColor: '#414547',
         labelCurrentColor: '#7c53a5',
-        labelCurrentFontName: 'HelveticaNow',
+        labelCurrentFontName: 'HNforTELUSSA',
         labelCurrentFontWeight: '700',
         labelDirection: 'column',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 14,
         labelFontWeight: '400',
         labelGap: 0,
@@ -6209,7 +6334,7 @@ const theme = {
         showStepName: true,
         showStepTrackerLabel: true,
         stepLabelColor: '#676e73',
-        stepLabelFontName: 'HelveticaNow',
+        stepLabelFontName: 'HNforTELUSSA',
         stepLabelFontSize: 12,
         stepLabelFontWeight: '700',
         stepLabelLineHeight: 1.33333333333,
@@ -6300,7 +6425,7 @@ const theme = {
           tokens: {
             cellPaddingBottom: 8,
             cellPaddingTop: 8,
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '700',
             lineHeight: 1.25
@@ -6312,7 +6437,7 @@ const theme = {
             cellBackground: '#fafafa',
             cellPaddingBottom: 8,
             cellPaddingTop: 8,
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             lineHeight: 1.14285714286
@@ -6323,7 +6448,7 @@ const theme = {
           tokens: {
             cellBackground: '#f4f4f7',
             cellBoxShadowColor: '#b2b9bf',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500'
           }
@@ -6332,7 +6457,7 @@ const theme = {
           if: { spacing: 'default', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             lineHeight: 1.28571428571
@@ -6342,7 +6467,7 @@ const theme = {
           if: { spacing: 'compact', text: 'medium', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500',
             lineHeight: 1.25
@@ -6350,12 +6475,12 @@ const theme = {
         },
         {
           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
@@ -6364,7 +6489,7 @@ const theme = {
         {
           if: { spacing: 'compact', text: 'small', type: 'default' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '400',
             lineHeight: 1.14285714286
@@ -6373,7 +6498,7 @@ const theme = {
         {
           if: { text: 'small', type: 'rowHeading' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '700',
             lineHeight: 1.14285714286
@@ -6400,7 +6525,7 @@ const theme = {
         },
         display: null,
         fontColor: '#000000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -6536,7 +6661,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 0,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 14,
         fontWeight: '700',
@@ -6670,7 +6795,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconAdd,
@@ -6776,7 +6901,7 @@ const theme = {
         expandTitleBorder: 0,
         expandTitleBorderColor: 'rgba(0, 0, 0, 0)',
         expandTitleColor: '#2c2e30',
-        expandTitleFontName: 'HelveticaNow',
+        expandTitleFontName: 'HNforTELUSSA',
         expandTitleFontSize: 16,
         expandTitleFontWeight: '500',
         expandTitleLineHeight: 1.5,
@@ -6793,7 +6918,7 @@ const theme = {
         iconOuterBorderGap: 0,
         iconOuterBorderWidth: null,
         listColor: '#414547',
-        listFontName: 'HelveticaNow',
+        listFontName: 'HNforTELUSSA',
         listFontSize: 14,
         listFontWeight: '400',
         listLineHeight: 1.42857142857,
@@ -6821,7 +6946,7 @@ const theme = {
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
-            testimonialFontNameHeading: 'HelveticaNow',
+            testimonialFontNameHeading: 'HNforTELUSSA',
             testimonialFontSizeHeading: 28,
             testimonialFontWeightHeading: '400',
             testimonialLineHeightHeading: 1.28571428571
@@ -6829,11 +6954,11 @@ const theme = {
         }
       ],
       tokens: {
-        additionalFontName: 'HelveticaNow',
+        additionalFontName: 'HNforTELUSSA',
         additionalFontSize: 14,
         additionalFontWeight: '400',
         additionalLineHeight: 1.42857142857,
-        authorFontName: 'HelveticaNow',
+        authorFontName: 'HNforTELUSSA',
         authorFontSize: 16,
         authorFontWeight: '700',
         authorLineHeight: 1.5,
@@ -6846,8 +6971,8 @@ const theme = {
         imageSize: 48,
         quoteContainerGap: 4,
         testimonialContainerGap: 12,
-        testimonialFontNameHeading: 'HelveticaNow',
-        testimonialFontNameLarge: 'HelveticaNow',
+        testimonialFontNameHeading: 'HNforTELUSSA',
+        testimonialFontNameLarge: 'HNforTELUSSA',
         testimonialFontSizeHeading: 24,
         testimonialFontSizeLarge: 20,
         testimonialFontWeightHeading: '400',
@@ -6941,7 +7066,7 @@ const theme = {
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
         defaultCreditIcon: PaletteIconCreditCard,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         icon: null,
@@ -7041,7 +7166,7 @@ const theme = {
         animationPaddingBottomBefore: 0,
         animationPaddingTopAfter: 16,
         animationPaddingTopBefore: 0,
-        chevronlinkFontName: 'HelveticaNow',
+        chevronlinkFontName: 'HNforTELUSSA',
         chevronlinkFontWeight: '400',
         containerBackgroundColor: '#4b286d',
         containerGap: 10,
@@ -7144,7 +7269,7 @@ const theme = {
         iconColor: '#676e73',
         iconSize: 14,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -7222,7 +7347,7 @@ const theme = {
         backgroundColor: '#2c2e30',
         borderRadius: 8,
         color: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -7371,7 +7496,7 @@ const theme = {
         {
           if: { size: 'display1' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 40,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7382,7 +7507,7 @@ const theme = {
         {
           if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 64,
             fontWeight: '300',
             lineHeight: 1.2,
@@ -7392,7 +7517,7 @@ const theme = {
         {
           if: { size: 'display2' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 36,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7403,7 +7528,7 @@ const theme = {
         {
           if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 56,
             fontWeight: '300',
             lineHeight: 1.14285714286,
@@ -7413,7 +7538,7 @@ const theme = {
         {
           if: { size: 'h1' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 28,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7424,7 +7549,7 @@ const theme = {
         {
           if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 40,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7435,7 +7560,7 @@ const theme = {
         {
           if: { size: 'h2' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 24,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7446,7 +7571,7 @@ const theme = {
         {
           if: { size: 'h2', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 28,
             fontWeight: '300',
             letterSpacing: -0.017,
@@ -7457,7 +7582,7 @@ const theme = {
         {
           if: { size: 'h3' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 20,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7468,7 +7593,7 @@ const theme = {
         {
           if: { size: 'h4' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7479,7 +7604,7 @@ const theme = {
         {
           if: { size: 'h5' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7493,7 +7618,7 @@ const theme = {
         {
           if: { size: 'h6' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 12,
             fontWeight: '700',
             letterSpacing: 0,
@@ -7528,7 +7653,7 @@ const theme = {
         {
           if: { size: 'micro' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 12,
             fontWeight: '500',
             lineHeight: 1.33333333333,
@@ -7539,7 +7664,7 @@ const theme = {
           if: { size: 'eyebrow' },
           tokens: {
             color: '#7c53a5',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '700',
             lineHeight: 1.42857142857,
@@ -7549,31 +7674,31 @@ const theme = {
         {
           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: {
@@ -7581,15 +7706,15 @@ const theme = {
             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' } },
@@ -7627,7 +7752,7 @@ const theme = {
       ],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 16,
         fontWeight: '400',
@@ -7905,6 +8030,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.61.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.63.0' }
 }
 export default theme