@telus-uds/theme-koodo 7.3.1 → 7.5.0

package/theme.json

@@ -85,6 +85,10 @@
     },
     "ActivityIndicator": {
       "appearances": {
+        "dots": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "description": "used for full-screen spinners",
           "type": "variant",
@@ -104,8 +108,10 @@
       ],
       "tokens": {
         "color": "{palette.color.pink}",
+        "dotSize": "{palette.size.size6}",
+        "indicatorBackgroundColor": "{palette.color.pinkLight}",
         "size": "{palette.size.size24}",
-        "thickness": "{palette.border.border2}"
+        "thickness": "{palette.border.border3}"
       }
     },
     "Autocomplete": {
@@ -2782,10 +2788,19 @@
           "values": [true]
         },
         "pressed": "{appearances.ChevronLink.pressed}",
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
         "size": {
           "description": "Sets the size of the text and icon; these variants are shared with ChevronLink",
           "type": "variant",
           "values": ["large", "small", "micro"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
@@ -2948,894 +2963,647 @@
             "fontSize": "{palette.fontSize.size12}",
             "iconSize": "{palette.size.size16}"
           }
-        }
-      ],
-      "tokens": {
-        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
-        "color": "{palette.color.black}",
-        "fontSize": "{palette.fontSize.size16}",
-        "iconDisplace": "{palette.size.size0}",
-        "iconSize": "{palette.size.size16}",
-        "iconSpace": "{system.integer.1}",
-        "leftIcon": "{palette.icon.ChevronLeft}",
-        "outerBorderColor": "{palette.color.transparent}",
-        "rightIcon": "{palette.icon.ChevronRight}",
-        "textLine": "{system.textLine.none}"
-      }
-    },
-    "ColourToggle": {
-      "appearances": {
-        "focus": "{appearances.ColourToggle.focus}",
-        "hover": "{appearances.ColourToggle.hover}",
-        "pressed": "{appearances.ColourToggle.pressed}",
-        "selected": "{appearances.ColourToggle.selected}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "hover": true
+            "focus": true,
+            "quiet": true
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.silver}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.purple}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.mortar}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "selected": true
+            "style": "inline"
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.black}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.black}"
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.silver}",
-        "borderRadius": "{palette.radius.radius45}",
-        "borderWidth": "{palette.border.border1}",
-        "bubbleBorderColor": "{palette.color.transparent}",
-        "bubbleBorderRadius": "{palette.radius.none}",
-        "bubbleBorderWidth": "{palette.border.none}",
-        "innerBubbleBorderRadius": "{palette.radius.radius45}",
-        "innerBubbleHeight": "{palette.size.size40}",
-        "innerBubbleWidth": "{palette.size.size40}",
-        "outerBubbleContentAlignItems": "{system.flexAlign.center}",
-        "outerBubbleHeight": "{palette.size.size48}",
-        "outerBubbleJustifyContent": "{system.flexJustifyContent.center}",
-        "outerBubbleWidth": "{palette.size.size48}",
-        "shadow": "{palette.shadow.surfaceInset}",
-        "space": "{system.integer.2}"
-      }
-    },
-    "Countdown": {
-      "appearances": {
-        "feature": {
-          "type": "variant",
-          "values": [true]
         },
-        "inverse": {
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "focus": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}"
+          }
         },
-        "label": {
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "hover": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
+          }
         },
-        "large": {
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "pressed": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
         },
-        "viewport": "{appearances.system.viewport}"
-      },
-      "rules": [
         {
           "if": {
-            "viewport": ["xs"]
+            "focus": true,
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "containerPaddingBottomTop": "{palette.size.size16}",
-            "containerPaddingLeftRight": "{palette.size.size24}",
-            "labelFontSize": "{palette.fontSize.size16}",
-            "labelLineHeight": "{palette.lineHeight.ratio3to2}",
-            "textLineHeight": "{palette.lineHeight.ratio3to2}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "feature": true
+            "style": "subtle"
           },
           "tokens": {
-            "containerBorderColor": "{palette.color.black}",
-            "labelBorderColor": "{palette.color.black}",
-            "textFontSize": "{palette.fontSize.size70}",
-            "textLineHeight": "{palette.lineHeight.ratio6to5}",
-            "textTimerFontName": "{palette.fontName.StagSans}",
-            "textTimerFontWeight": "{palette.fontWeight.weight700}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "large": true
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "labelFontName": "{palette.fontName.StagSans}",
-            "labelFontSize": "{palette.fontSize.size16}",
-            "labelFontWeight": "{palette.fontWeight.weight400}",
-            "textFontSize": "{palette.fontSize.size70}",
-            "textLineHeight": "{palette.lineHeight.ratio6to5}",
-            "textTimerFontName": "{palette.fontName.StagSans}",
-            "textTimerFontWeight": "{palette.fontWeight.weight700}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}"
           }
         },
         {
           "if": {
-            "large": true,
-            "viewport": ["xs"]
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size44}",
-            "textLineHeight": "{palette.lineHeight.ratio11to9}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "feature": true,
-            "viewport": ["xs"]
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size44}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "containerBorderColor": "{palette.color.white}",
-            "labelBorderColor": "{palette.color.white}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
-        }
-      ],
-      "tokens": {
-        "containerBorderColor": "{palette.color.transparent}",
-        "containerBorderRadius": "{palette.radius.radius6}",
-        "containerBorderWidth": "{palette.border.border2}",
-        "containerGradient": "{system.gradient.none}",
-        "containerInverseBorder": "{palette.border.border2}",
-        "containerInverseBorderColor": "{palette.color.white}",
-        "containerPaddingBottomTop": "{palette.size.size48}",
-        "containerPaddingLeftRight": "{palette.size.size64}",
-        "inverseBorderColor": "{system.color.none}",
-        "labelBorderColor": "{system.color.none}",
-        "labelFontName": "{palette.fontName.StagSans}",
-        "labelFontSize": "{palette.fontSize.size16}",
-        "labelFontWeight": "{palette.fontWeight.weight400}",
-        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "textFontSize": "{palette.fontSize.size16}",
-        "textLineHeight": "{palette.lineHeight.ratio3to2}",
-        "textTimerFontName": "{palette.fontName.StagSans}",
-        "textTimerFontWeight": "{palette.fontWeight.weight400}"
-      }
-    },
-    "DatePicker": {
-      "appearances": {
-        "viewport": "{appearances.system.viewport}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "viewport": ["xs"]
+            "style": "feature"
           },
           "tokens": {
-            "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
-            "calendarMonthCaptionFontSize": "{palette.fontSize.size14}",
-            "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight600}",
-            "calendarMonthCaptionLineHeight": "{palette.lineHeight.multiply172}"
+            "color": "{palette.color.purple}"
           }
-        }
-      ],
-      "tokens": {
-        "calendarBackgroundColor": "{palette.color.white}",
-        "calendarDayBlockedCalendarHoverBackground": "{palette.color.gallery}",
-        "calendarDayBlockedCalendarHoverColor": "{palette.color.dove}",
-        "calendarDayDefaultBackgroundColor": "{palette.color.white}",
-        "calendarDayDefaultBorder": "{palette.border.border1}",
-        "calendarDayDefaultBorderColor": "{palette.color.silver}",
-        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.white}",
-        "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "{palette.color.purple}",
-        "calendarDayDefaultCalendarDaySelectedHoverColor": "{palette.color.white}",
-        "calendarDayDefaultColor": "{palette.color.black}",
-        "calendarDayDefaultFontName": "{palette.fontName.StagSans}",
-        "calendarDayDefaultFontSize": "{palette.fontSize.size14}",
-        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight400}",
-        "calendarDaySelectedDisabledBackground": "{palette.color.gallery}",
-        "calendarDaySelectedDisabledColor": "{palette.color.white}",
-        "calendarDaySelectedDisabledContentBackgroundColor": "{palette.color.silver}",
-        "calendarDaySelectedFocusBeforeBackground": "{palette.color.white}",
-        "calendarDaySelectedHoverBackground": "{palette.color.white}",
-        "calendarDaySelectedHoverBeforeBackground": "{palette.color.white}",
-        "calendarDaySelectedHoverBeforeBorderColor": "{palette.color.purple}",
-        "calendarDaySelectedHoverBorderColor": "{palette.color.silver}",
-        "calendarDaySelectedHoverColor": "{palette.color.black}",
-        "calendarMonthCaptionColor": "{palette.color.black}",
-        "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
-        "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
-        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
-        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio6to5}",
-        "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
-        "dateInputStrokeColor": "{palette.color.dove}",
-        "dayPickerNavigationButtonPadding": "{palette.size.size12}",
-        "dayPickerWeekHeaderColor": "{palette.color.black}",
-        "dayPickerWeekHeaderFontName": "{palette.fontName.StagSans}",
-        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight700}",
-        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio8to7}",
-        "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
-        "hiddenInputFieldContainerHeight": "{palette.size.size0}",
-        "hiddenInputFieldContainerWidth": "{palette.size.size0}",
-        "invalidInputMixin": "{system.color.none}",
-        "nextIcon": "{palette.icon.ChevronRight}",
-        "previousIcon": "{palette.icon.ChevronLeft}",
-        "singleDatePickerBorderColor": "{palette.color.dove}",
-        "singleDatePickerLeftRight": "{palette.size.size16}",
-        "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
-        "singleDatePickerRadius": "{palette.radius.radius4}",
-        "validInputMixin": "{system.color.none}"
-      }
-    },
-    "Disclaimer": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "color": "{palette.color.black}",
-        "fontName": "{palette.fontName.StagSans}",
-        "fontSize": "{palette.fontSize.size12}",
-        "fontWeight": "{palette.fontWeight.weight400}",
-        "lineHeight": "{palette.lineHeight.ratio4to3}"
-      }
-    },
-    "Divider": {
-      "appearances": {
-        "decorative": {
-          "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
-          "type": "variant",
-          "values": [true]
-        },
-        "inverse": {
-          "type": "variant",
-          "values": [true]
         },
-        "weight": {
-          "type": "variant",
-          "values": ["thick"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "weight": "thick"
+            "focus": true,
+            "style": "feature"
           },
           "tokens": {
-            "width": "{palette.size.size2}"
+            "color": "{palette.color.purple}",
+            "outerBorderColor": "{palette.color.purple}"
           }
         },
         {
           "if": {
-            "decorative": true
+            "hover": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.black}"
+            "color": "{palette.color.purpleDark}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "decorative": true,
-            "weight": "thick"
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.black}",
-            "width": "{palette.size.size2}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "focus": true,
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "weight": "thick"
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.white}",
-            "width": "{palette.size.size2}"
+            "color": "{palette.color.danger}"
           }
-        }
-      ],
-      "tokens": {
-        "color": "{palette.color.silver}",
-        "width": "{palette.size.size1}"
-      }
-    },
-    "DownloadApp": {
-      "appearances": {
-        "focus": "{appearances.DownloadApp.focus}",
-        "hover": "{appearances.DownloadApp.hover}",
-        "pressed": "{appearances.DownloadApp.pressed}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "focus": true
+            "focus": true,
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.black}",
-            "borderRadius": "{palette.radius.radius4}"
+            "color": "{palette.color.danger}",
+            "outerBorderColor": "{palette.color.danger}"
           }
         },
         {
           "if": {
-            "hover": true
+            "hover": true,
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "borderRadius": "{palette.radius.radius4}"
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "borderRadius": "{palette.radius.radius4}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "pressed": true
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "borderRadius": "{palette.radius.radius4}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
-        }
-      ],
-      "tokens": {
-        "androidENIcon": "{palette.icon.AndroidEN}",
-        "androidFRIcon": "{palette.icon.AndroidFR}",
-        "borderColor": "{palette.color.transparent}",
-        "borderGap": "{palette.size.size2}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.border1}",
-        "iosENIcon": "{palette.icon.IOSEN}",
-        "iosFRIcon": "{palette.icon.IOSFR}",
-        "padding": "{palette.size.size1}"
-      }
-    },
-    "ExpandCollapse": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "borderColor": "{palette.color.transparent}",
-        "borderStyle": "{system.borderStyle.solid}",
-        "borderWidth": "{system.border.zero}"
-      }
-    },
-    "ExpandCollapseControl": {
-      "appearances": {
-        "compact": {
-          "type": "variant",
-          "values": [true]
         },
-        "expanded": "{appearances.ExpandCollapseControl.expanded}",
-        "focus": "{appearances.ExpandCollapseControl.focus}",
-        "hover": "{appearances.ExpandCollapseControl.hover}",
-        "mini": {
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
         },
-        "pressed": "{appearances.ExpandCollapseControl.pressed}"
-      },
-      "rules": [
         {
           "if": {
-            "mini": true
+            "focus": true,
+            "style": "inverse"
           },
           "tokens": {
-            "borderColor": "{palette.color.transparent}",
-            "borderWidth": "{system.border.none}",
-            "icon": "{palette.icon.ChevronDown}",
-            "iconColor": "{palette.color.black}",
-            "iconGap": "{palette.size.size8}",
-            "iconPaddingTop": "{palette.size.size4}",
-            "iconPosition": "{system.position.left}",
-            "iconSize": "{palette.size.size16}",
-            "justifyContent": "{system.flexJustifyContent.flexStart}",
-            "paddingBottom": "{palette.size.size0}",
-            "paddingLeft": "{palette.size.size0}",
-            "paddingRight": "{palette.size.size0}",
-            "paddingTop": "{palette.size.size0}",
-            "verticalAlign": "{system.verticalAlign.middle}"
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "expanded": true
+            "hover": true,
+            "style": "inverse"
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronUp}"
+            "color": "{palette.color.gallery}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
-            "borderBottomLeftRadius": "{palette.radius.radius4}",
-            "borderBottomRightRadius": "{palette.radius.radius4}",
-            "borderColor": "{palette.color.black}",
-            "borderTopLeftRadius": "{palette.radius.radius4}",
-            "borderTopRightRadius": "{palette.radius.radius4}",
-            "borderWidth": "{palette.border.border2}"
+            "color": "{palette.color.dove}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "mini": true
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
-            "borderBottomLeftRadius": "{palette.radius.radius4}",
-            "borderBottomRightRadius": "{palette.radius.radius4}",
-            "borderColor": "{palette.color.black}",
-            "borderTopLeftRadius": "{palette.radius.radius4}",
-            "borderTopRightRadius": "{palette.radius.radius4}",
-            "borderWidth": "{system.border.none}"
+            "outerBorderColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "hover": true
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark10}",
-            "iconPaddingTop": "{palette.size.size8}"
+            "color": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "expanded": true,
-            "hover": true
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark10}",
-            "iconPaddingTop": "{palette.size.size0}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark20}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
             "focus": true,
-            "pressed": true
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark20}",
-            "borderBottomLeftRadius": "{palette.radius.radius4}",
-            "borderBottomRightRadius": "{palette.radius.radius4}",
-            "borderColor": "{palette.color.black}",
-            "borderTopLeftRadius": "{palette.radius.radius4}",
-            "borderTopRightRadius": "{palette.radius.radius4}",
-            "borderWidth": "{palette.border.border2}"
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "mini": true,
-            "pressed": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark20}",
-            "borderBottomLeftRadius": "{palette.radius.radius4}",
-            "borderBottomRightRadius": "{palette.radius.radius4}",
-            "borderColor": "{palette.color.black}",
-            "borderTopLeftRadius": "{palette.radius.radius4}",
-            "borderTopRightRadius": "{palette.radius.radius4}",
-            "borderWidth": "{system.border.none}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "compact": true
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
           },
-          "tokens": {}
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{palette.color.transparent}",
-        "borderBottomLeftRadius": "{system.radius.zero}",
-        "borderBottomRightRadius": "{system.radius.zero}",
-        "borderColor": "{palette.color.transparent}",
-        "borderTopLeftRadius": "{system.radius.zero}",
-        "borderTopRightRadius": "{system.radius.zero}",
-        "borderWidth": "{palette.border.border2}",
-        "icon": "{palette.icon.ChevronDown}",
-        "iconColor": "{palette.color.black}",
-        "iconGap": "{palette.size.size8}",
-        "iconPaddingTop": "{palette.size.size4}",
-        "iconPosition": "{system.position.right}",
-        "iconSize": "{palette.size.size16}",
-        "justifyContent": "{system.flexJustifyContent.spaceBetween}",
-        "paddingBottom": "{palette.size.size14}",
-        "paddingLeft": "{palette.size.size22}",
-        "paddingRight": "{palette.size.size22}",
-        "paddingTop": "{palette.size.size14}",
-        "textLine": "{system.textLine.none}",
-        "verticalAlign": "{system.verticalAlign.middle}"
-      }
-    },
-    "ExpandCollapseMini": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "borderWidth": "{palette.border.none}"
-      }
-    },
-    "ExpandCollapseMiniControl": {
-      "appearances": {
-        "alternative": {
-          "description": "Replaces the default green colour with black",
-          "type": "variant",
-          "values": [true]
-        },
-        "expanded": "{appearances.ExpandCollapseControl.expanded}",
-        "inverse": {
-          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
-          "type": "variant",
-          "values": [true]
+          "tokens": {
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.underline}"
+          }
         },
-        "quiet": {
-          "description": "When it is true, it does not show the decoration",
-          "type": "state",
-          "values": [true, false]
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
         },
-        "size": {
-          "type": "variant",
-          "values": ["micro", "small", "large"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "expanded": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronUp}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "alternative": true
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.dove}"
+            "color": "{palette.color.purple}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "focus": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.white}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.purple}",
+            "outerBorderColor": "{palette.color.purple}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "iconSize": "{palette.size.size16}",
-            "lineHeight": "{palette.lineHeight.ratio4to3}"
+            "color": "{palette.color.purpleDark}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "iconSize": "{palette.size.size16}",
-            "lineHeight": "{palette.lineHeight.ratio10to7}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio7to5}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "quiet": true
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
+            "color": "{palette.color.danger}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "quiet": true
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.dove}",
+            "color": "{palette.color.danger}",
+            "outerBorderColor": "{palette.color.danger}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "quiet": true
+            "hover": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.white}",
-            "iconColor": "{palette.color.white}",
-            "textLine": "{system.textLine.none}"
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.transparent}",
-        "borderWidth": "{system.border.zero}",
-        "color": "{palette.color.black}",
-        "fontSize": "{palette.fontSize.size16}",
-        "icon": "{palette.icon.ChevronDown}",
-        "iconColor": "{palette.color.black}",
-        "iconGap": "{palette.size.size8}",
-        "iconPaddingTop": "{palette.size.size4}",
-        "iconPosition": "{system.position.left}",
-        "iconSize": "{palette.size.size16}",
-        "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "lineHeight": "{palette.lineHeight.ratio3to2}",
-        "paddingBottom": "{palette.size.size0}",
-        "paddingLeft": "{palette.size.size0}",
-        "paddingRight": "{palette.size.size0}",
-        "paddingTop": "{palette.size.size0}",
-        "size": "{palette.size.size4}",
-        "textLine": "{system.textLine.none}",
-        "verticalAlign": "{system.verticalAlign.middle}"
-      }
-    },
-    "ExpandCollapsePanel": {
-      "appearances": {
-        "compact": {
-          "type": "variant",
-          "values": [true]
         },
-        "mini": {
-          "type": "variant",
-          "values": [true]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "compact": true
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
-          "tokens": {}
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
         },
         {
           "if": {
-            "mini": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.transparent}",
-            "contentPaddingBottom": "{palette.size.size0}",
-            "contentPaddingLeft": "{palette.size.size0}",
-            "contentPaddingRight": "{palette.size.size0}",
-            "contentPaddingTop": "{palette.size.size0}",
-            "contentPanelBackgroundColor": "{palette.color.transparent}",
-            "contentPanelPaddingBottom": "{palette.size.size0}",
-            "contentPanelPaddingTop": "{palette.size.size0}",
-            "marginBottom": "{palette.size.size0}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.gallery}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.border1}",
-        "collapseDuration": "{palette.duration.duration250}",
-        "contentPaddingBottom": "{palette.size.size16}",
-        "contentPaddingLeft": "{palette.size.size16}",
-        "contentPaddingRight": "{palette.size.size16}",
-        "contentPaddingTop": "{palette.size.size16}",
-        "contentPanelBackgroundColor": "{palette.color.gallery}",
-        "contentPanelBorderColor": "{palette.color.transparent}",
-        "contentPanelBorderWidth": "{palette.border.none}",
-        "contentPanelFontColor": "{palette.color.black}",
-        "contentPanelFontName": "{palette.fontName.StagSans}",
-        "contentPanelFontSize": "{palette.fontSize.size16}",
-        "contentPanelFontWeight": "{palette.fontWeight.weight700}",
-        "contentPanelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "contentPanelPaddingBottom": "{palette.size.size16}",
-        "contentPanelPaddingLeft": "{palette.size.size24}",
-        "contentPanelPaddingRight": "{palette.size.size24}",
-        "contentPanelPaddingTop": "{palette.size.size16}",
-        "expandDividerColor": "{system.color.none}",
-        "expandDividerWidth": "{system.size.none}",
-        "expandDuration": "{palette.duration.duration300}",
-        "marginBottom": "{palette.size.size8}"
-      }
-    },
-    "Feedback": {
-      "appearances": {
-        "icon": {
-          "type": "variant",
-          "values": [true]
         },
-        "validation": "{appearances.Feedback.validation}"
-      },
-      "rules": [
         {
           "if": {
-            "validation": "error"
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dangerLight}"
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "validation": "success"
+            "focus": true,
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.successLight}"
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "icon": true,
-            "validation": "success"
+            "hover": true,
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.successLight}",
-            "icon": "{palette.icon.CheckCircleFilled}",
-            "iconColor": "{palette.color.success}"
+            "color": "{palette.color.gallery}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "icon": true,
-            "validation": "error"
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dangerLight}",
-            "icon": "{palette.icon.ExclamationOctagon}",
-            "iconColor": "{palette.color.danger}"
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.dove}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.gallery}",
-        "borderColor": "{palette.color.transparent}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.none}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
         "color": "{palette.color.black}",
-        "contentFontSize": "{palette.fontSize.size16}",
-        "fontName": "{palette.fontName.StagSans}",
-        "fontWeight": "{palette.fontWeight.weight400}",
-        "icon": "{system.icon.none}",
-        "iconColor": "{palette.color.transparent}",
-        "iconGap": "{palette.size.size8}",
-        "iconSize": "{palette.size.size20}",
-        "lineHeight": "{palette.lineHeight.multiply150}",
-        "paddingBottom": "{palette.size.size12}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size12}",
-        "space": "{system.integer.2}",
-        "titleFontSize": "{palette.fontSize.size16}"
+        "fontSize": "{palette.fontSize.size16}",
+        "iconDisplace": "{palette.size.size0}",
+        "iconSize": "{palette.size.size16}",
+        "iconSpace": "{system.integer.1}",
+        "leftIcon": "{palette.icon.ChevronLeft}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "rightIcon": "{palette.icon.ChevronRight}",
+        "textLine": "{system.textLine.none}"
       }
     },
-    "Fieldset": {
+    "ColourToggle": {
       "appearances": {
-        "error": {
-          "type": "variant",
-          "values": [true]
-        }
+        "focus": "{appearances.ColourToggle.focus}",
+        "hover": "{appearances.ColourToggle.hover}",
+        "pressed": "{appearances.ColourToggle.pressed}",
+        "selected": "{appearances.ColourToggle.selected}"
       },
       "rules": [
         {
           "if": {
-            "error": true
+            "hover": true
           },
           "tokens": {
-            "outlineColor": "{palette.color.amaranth}"
+            "bubbleBorderColor": "{palette.color.silver}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.purple}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.mortar}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.black}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
           }
         }
       ],
       "tokens": {
-        "borderBottomLeftRadius": "{system.radius.zero}",
-        "borderBottomRightRadius": "{system.radius.zero}",
-        "borderTopLeftRadius": "{system.radius.zero}",
-        "borderTopRightRadius": "{system.radius.zero}",
-        "outlineColor": "{palette.color.transparent}",
-        "outlineOffset": "{system.size.none}",
-        "outlineWidth": "{system.border.zero}",
-        "paddingBottom": "{system.size.zero}",
-        "paddingLeft": "{system.size.zero}",
-        "paddingRight": "{system.size.zero}",
-        "paddingTop": "{system.size.zero}"
-      }
-    },
-    "FileUpload": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "buttonBackgroundColor": "{system.color.none}",
-        "buttonBorderColor": "{system.color.none}",
-        "buttonBorderRadius": "{system.radius.none}",
-        "buttonBorderWidth": "{system.border.none}",
-        "buttonHeight": "{system.size.none}",
-        "buttonMinWidth": "{system.size.none}",
-        "buttonTextColor": "{system.color.none}",
-        "buttonWidth": "{system.size.none}",
-        "notificationBackgroundColor": "{system.color.none}",
-        "notificationBorderColor": "{system.color.none}",
-        "notificationBorderRadius": "{system.radius.none}",
-        "notificationDismissButtonGap": "{system.size.none}",
-        "notificationDismissIcon": "{system.icon.none}",
-        "notificationDismissIconColor": "{system.color.none}",
-        "notificationIcon": "{system.icon.none}",
-        "notificationIconColor": "{system.color.none}",
-        "notificationIconGap": "{system.size.none}",
-        "notificationIconSize": "{system.size.none}",
-        "notificationTextColor": "{palette.color.black}"
+        "borderColor": "{palette.color.silver}",
+        "borderRadius": "{palette.radius.radius45}",
+        "borderWidth": "{palette.border.border1}",
+        "bubbleBorderColor": "{palette.color.transparent}",
+        "bubbleBorderRadius": "{palette.radius.none}",
+        "bubbleBorderWidth": "{palette.border.none}",
+        "innerBubbleBorderRadius": "{palette.radius.radius45}",
+        "innerBubbleHeight": "{palette.size.size40}",
+        "innerBubbleWidth": "{palette.size.size40}",
+        "outerBubbleContentAlignItems": "{system.flexAlign.center}",
+        "outerBubbleHeight": "{palette.size.size48}",
+        "outerBubbleJustifyContent": "{system.flexJustifyContent.center}",
+        "outerBubbleWidth": "{palette.size.size48}",
+        "shadow": "{palette.shadow.surfaceInset}",
+        "space": "{system.integer.2}"
       }
     },
-    "Footnote": {
+    "Countdown": {
       "appearances": {
+        "feature": {
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "label": {
+          "type": "variant",
+          "values": [true]
+        },
+        "large": {
+          "type": "variant",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -3844,79 +3612,867 @@
             "viewport": ["xs"]
           },
           "tokens": {
-            "footnoteBodyPaddingBottom": "{palette.size.size32}",
-            "footnoteBodyPaddingLeft": "{palette.size.size16}",
-            "footnoteBodyPaddingRight": "{palette.size.size16}",
-            "footnoteBodyPaddingTop": "{palette.size.size0}",
-            "footnoteHeaderPaddingBottom": "{palette.size.size16}",
-            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-            "footnoteHeaderPaddingRight": "{palette.size.size4}",
-            "footnoteHeaderPaddingTop": "{palette.size.size16}"
+            "containerPaddingBottomTop": "{palette.size.size16}",
+            "containerPaddingLeftRight": "{palette.size.size24}",
+            "labelFontSize": "{palette.fontSize.size16}",
+            "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+            "textLineHeight": "{palette.lineHeight.ratio3to2}"
           }
         },
         {
           "if": {
-            "viewport": ["md", "lg", "xl"]
+            "feature": true
           },
           "tokens": {
-            "footnoteBodyPaddingBottom": "{palette.size.size40}",
-            "footnoteBodyPaddingLeft": "{palette.size.size16}",
-            "footnoteBodyPaddingRight": "{palette.size.size16}",
-            "footnoteBodyPaddingTop": "{palette.size.size0}",
-            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
-            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-            "footnoteHeaderPaddingRight": "{palette.size.size4}",
-            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+            "containerBorderColor": "{palette.color.black}",
+            "labelBorderColor": "{palette.color.black}",
+            "textFontSize": "{palette.fontSize.size70}",
+            "textLineHeight": "{palette.lineHeight.ratio6to5}",
+            "textTimerFontName": "{palette.fontName.StagSans}",
+            "textTimerFontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "labelFontName": "{palette.fontName.StagSans}",
+            "labelFontSize": "{palette.fontSize.size16}",
+            "labelFontWeight": "{palette.fontWeight.weight400}",
+            "textFontSize": "{palette.fontSize.size70}",
+            "textLineHeight": "{palette.lineHeight.ratio6to5}",
+            "textTimerFontName": "{palette.fontName.StagSans}",
+            "textTimerFontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
+        {
+          "if": {
+            "large": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size44}",
+            "textLineHeight": "{palette.lineHeight.ratio11to9}"
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size44}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "containerBorderColor": "{palette.color.white}",
+            "labelBorderColor": "{palette.color.white}"
           }
         }
       ],
       "tokens": {
-        "closeButtonBackgroundColor": "{palette.color.white}",
-        "closeButtonBorderColor": "{palette.color.black}",
-        "closeButtonBorderSize": "{palette.border.none}",
-        "closeButtonHeight": "{palette.size.size16}",
-        "closeButtonIconSize": "{palette.size.size16}",
-        "closeButtonMarginBottom": "{palette.size.size4}",
-        "closeButtonMarginLeft": "{palette.size.size4}",
-        "closeButtonMarginRight": "{palette.size.size12}",
-        "closeButtonMarginTop": "{palette.size.size4}",
-        "closeButtonWidth": "{palette.size.size16}",
-        "closeIcon": "{palette.icon.Close}",
-        "footnoteBackground": "{palette.color.white}",
-        "footnoteBodyBackground": "{palette.color.white}",
-        "footnoteBodyPaddingBottom": "{palette.size.size40}",
-        "footnoteBodyPaddingLeft": "{palette.size.size16}",
-        "footnoteBodyPaddingRight": "{palette.size.size16}",
-        "footnoteBodyPaddingTop": "{palette.size.size0}",
-        "footnoteBorderColorMd": "{palette.color.silver}",
-        "footnoteBorderTopSizeMd": "{palette.border.border1}",
-        "footnoteHeaderPaddingBottom": "{palette.size.size24}",
-        "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-        "footnoteHeaderPaddingRight": "{palette.size.size4}",
-        "footnoteHeaderPaddingTop": "{palette.size.size24}",
-        "headerFontName": "{palette.fontName.StagSans}",
-        "headerFontSize": "{palette.size.size16}",
-        "headerFontWeight": "{palette.fontWeight.weight700}",
-        "headerLineHeight": "{palette.lineHeight.ratio5to4}",
-        "headerMargin": "{palette.size.size16}",
-        "listItemColor": "{palette.color.black}",
-        "listItemFontName": "{palette.fontName.StagSans}",
-        "listItemFontSize": "{palette.size.size14}",
-        "listItemFontWeight": "{palette.fontWeight.weight400}",
-        "listItemLineHeight": "{palette.lineHeight.ratio10to7}",
-        "listItemMarkerFontSize": "{palette.size.size14}",
-        "listItemMarkerLineHeight": "{palette.lineHeight.ratio8to5}",
-        "listItemPaddingLeft": "{palette.size.size8}",
-        "listPaddingLeft": "{palette.size.size32}"
-      }
-    },
-    "FootnoteLink": {
-      "appearances": {
-        "size": {
-          "type": "variant",
-          "values": [
-            "micro",
-            "small",
+        "containerBorderColor": "{palette.color.transparent}",
+        "containerBorderRadius": "{palette.radius.radius6}",
+        "containerBorderWidth": "{palette.border.border2}",
+        "containerGradient": "{system.gradient.none}",
+        "containerInverseBorder": "{palette.border.border2}",
+        "containerInverseBorderColor": "{palette.color.white}",
+        "containerPaddingBottomTop": "{palette.size.size48}",
+        "containerPaddingLeftRight": "{palette.size.size64}",
+        "inverseBorderColor": "{system.color.none}",
+        "labelBorderColor": "{system.color.none}",
+        "labelFontName": "{palette.fontName.StagSans}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textFontSize": "{palette.fontSize.size16}",
+        "textLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textTimerFontName": "{palette.fontName.StagSans}",
+        "textTimerFontWeight": "{palette.fontWeight.weight400}"
+      }
+    },
+    "DatePicker": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
+            "calendarMonthCaptionFontSize": "{palette.fontSize.size14}",
+            "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight600}",
+            "calendarMonthCaptionLineHeight": "{palette.lineHeight.multiply172}"
+          }
+        }
+      ],
+      "tokens": {
+        "calendarBackgroundColor": "{palette.color.white}",
+        "calendarDayBlockedCalendarHoverBackground": "{palette.color.gallery}",
+        "calendarDayBlockedCalendarHoverColor": "{palette.color.dove}",
+        "calendarDayDefaultBackgroundColor": "{palette.color.white}",
+        "calendarDayDefaultBorder": "{palette.border.border1}",
+        "calendarDayDefaultBorderColor": "{palette.color.silver}",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "{palette.color.purple}",
+        "calendarDayDefaultCalendarDaySelectedHoverColor": "{palette.color.white}",
+        "calendarDayDefaultColor": "{palette.color.black}",
+        "calendarDayDefaultFontName": "{palette.fontName.StagSans}",
+        "calendarDayDefaultFontSize": "{palette.fontSize.size14}",
+        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight400}",
+        "calendarDaySelectedDisabledBackground": "{palette.color.gallery}",
+        "calendarDaySelectedDisabledColor": "{palette.color.white}",
+        "calendarDaySelectedDisabledContentBackgroundColor": "{palette.color.silver}",
+        "calendarDaySelectedFocusBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBorderColor": "{palette.color.purple}",
+        "calendarDaySelectedHoverBorderColor": "{palette.color.silver}",
+        "calendarDaySelectedHoverColor": "{palette.color.black}",
+        "calendarMonthCaptionColor": "{palette.color.black}",
+        "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
+        "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
+        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
+        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio6to5}",
+        "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
+        "dateInputStrokeColor": "{palette.color.dove}",
+        "dayPickerNavigationButtonPadding": "{palette.size.size12}",
+        "dayPickerWeekHeaderColor": "{palette.color.black}",
+        "dayPickerWeekHeaderFontName": "{palette.fontName.StagSans}",
+        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight700}",
+        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio8to7}",
+        "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
+        "hiddenInputFieldContainerHeight": "{palette.size.size0}",
+        "hiddenInputFieldContainerWidth": "{palette.size.size0}",
+        "invalidInputMixin": "{system.color.none}",
+        "nextIcon": "{palette.icon.ChevronRight}",
+        "previousIcon": "{palette.icon.ChevronLeft}",
+        "singleDatePickerBorderColor": "{palette.color.dove}",
+        "singleDatePickerLeftRight": "{palette.size.size16}",
+        "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
+        "singleDatePickerRadius": "{palette.radius.radius4}",
+        "validInputMixin": "{system.color.none}"
+      }
+    },
+    "Disclaimer": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": "{palette.color.black}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size12}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio4to3}"
+      }
+    },
+    "Divider": {
+      "appearances": {
+        "decorative": {
+          "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "weight": {
+          "type": "variant",
+          "values": ["thick"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "weight": "thick"
+          },
+          "tokens": {
+            "width": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "decorative": true
+          },
+          "tokens": {
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "decorative": true,
+            "weight": "thick"
+          },
+          "tokens": {
+            "color": "{palette.color.black}",
+            "width": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "weight": "thick"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "width": "{palette.size.size2}"
+          }
+        }
+      ],
+      "tokens": {
+        "color": "{palette.color.silver}",
+        "width": "{palette.size.size1}"
+      }
+    },
+    "DownloadApp": {
+      "appearances": {
+        "focus": "{appearances.DownloadApp.focus}",
+        "hover": "{appearances.DownloadApp.hover}",
+        "pressed": "{appearances.DownloadApp.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        }
+      ],
+      "tokens": {
+        "androidENIcon": "{palette.icon.AndroidEN}",
+        "androidFRIcon": "{palette.icon.AndroidFR}",
+        "borderColor": "{palette.color.transparent}",
+        "borderGap": "{palette.size.size2}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.border1}",
+        "iosENIcon": "{palette.icon.IOSEN}",
+        "iosFRIcon": "{palette.icon.IOSFR}",
+        "padding": "{palette.size.size1}"
+      }
+    },
+    "ExpandCollapse": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderStyle": "{system.borderStyle.solid}",
+        "borderWidth": "{system.border.zero}"
+      }
+    },
+    "ExpandCollapseControl": {
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        },
+        "expanded": "{appearances.ExpandCollapseControl.expanded}",
+        "focus": "{appearances.ExpandCollapseControl.focus}",
+        "hover": "{appearances.ExpandCollapseControl.hover}",
+        "mini": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.ExpandCollapseControl.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "mini": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.none}",
+            "icon": "{palette.icon.ChevronDown}",
+            "iconColor": "{palette.color.black}",
+            "iconGap": "{palette.size.size8}",
+            "iconPaddingTop": "{palette.size.size4}",
+            "iconPosition": "{system.position.left}",
+            "iconSize": "{palette.size.size16}",
+            "justifyContent": "{system.flexJustifyContent.flexStart}",
+            "paddingBottom": "{palette.size.size0}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size0}",
+            "verticalAlign": "{system.verticalAlign.middle}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "mini": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "iconPaddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "iconPaddingTop": "{palette.size.size0}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "mini": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {}
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.transparent}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderColor": "{palette.color.transparent}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "borderWidth": "{palette.border.border2}",
+        "icon": "{palette.icon.ChevronDown}",
+        "iconColor": "{palette.color.black}",
+        "iconGap": "{palette.size.size8}",
+        "iconPaddingTop": "{palette.size.size4}",
+        "iconPosition": "{system.position.right}",
+        "iconSize": "{palette.size.size16}",
+        "justifyContent": "{system.flexJustifyContent.spaceBetween}",
+        "paddingBottom": "{palette.size.size14}",
+        "paddingLeft": "{palette.size.size22}",
+        "paddingRight": "{palette.size.size22}",
+        "paddingTop": "{palette.size.size14}",
+        "textLine": "{system.textLine.none}",
+        "verticalAlign": "{system.verticalAlign.middle}"
+      }
+    },
+    "ExpandCollapseMini": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderWidth": "{palette.border.none}"
+      }
+    },
+    "ExpandCollapseMiniControl": {
+      "appearances": {
+        "alternative": {
+          "description": "Replaces the default green colour with black",
+          "type": "variant",
+          "values": [true]
+        },
+        "expanded": "{appearances.ExpandCollapseControl.expanded}",
+        "inverse": {
+          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
+          "type": "variant",
+          "values": [true]
+        },
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["micro", "small", "large"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "iconSize": "{palette.size.size16}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "iconSize": "{palette.size.size16}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio7to5}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true
+          },
+          "tokens": {
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{system.border.zero}",
+        "color": "{palette.color.black}",
+        "fontSize": "{palette.fontSize.size16}",
+        "icon": "{palette.icon.ChevronDown}",
+        "iconColor": "{palette.color.black}",
+        "iconGap": "{palette.size.size8}",
+        "iconPaddingTop": "{palette.size.size4}",
+        "iconPosition": "{system.position.left}",
+        "iconSize": "{palette.size.size16}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "size": "{palette.size.size4}",
+        "textLine": "{system.textLine.none}",
+        "verticalAlign": "{system.verticalAlign.middle}"
+      }
+    },
+    "ExpandCollapsePanel": {
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        },
+        "mini": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {}
+        },
+        {
+          "if": {
+            "mini": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "contentPaddingBottom": "{palette.size.size0}",
+            "contentPaddingLeft": "{palette.size.size0}",
+            "contentPaddingRight": "{palette.size.size0}",
+            "contentPaddingTop": "{palette.size.size0}",
+            "contentPanelBackgroundColor": "{palette.color.transparent}",
+            "contentPanelPaddingBottom": "{palette.size.size0}",
+            "contentPanelPaddingTop": "{palette.size.size0}",
+            "marginBottom": "{palette.size.size0}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.gallery}",
+        "borderRadius": "{palette.radius.radius4}",
+        "borderWidth": "{palette.border.border1}",
+        "collapseDuration": "{palette.duration.duration250}",
+        "contentPaddingBottom": "{palette.size.size16}",
+        "contentPaddingLeft": "{palette.size.size16}",
+        "contentPaddingRight": "{palette.size.size16}",
+        "contentPaddingTop": "{palette.size.size16}",
+        "contentPanelBackgroundColor": "{palette.color.gallery}",
+        "contentPanelBorderColor": "{palette.color.transparent}",
+        "contentPanelBorderWidth": "{palette.border.none}",
+        "contentPanelFontColor": "{palette.color.black}",
+        "contentPanelFontName": "{palette.fontName.StagSans}",
+        "contentPanelFontSize": "{palette.fontSize.size16}",
+        "contentPanelFontWeight": "{palette.fontWeight.weight700}",
+        "contentPanelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "contentPanelPaddingBottom": "{palette.size.size16}",
+        "contentPanelPaddingLeft": "{palette.size.size24}",
+        "contentPanelPaddingRight": "{palette.size.size24}",
+        "contentPanelPaddingTop": "{palette.size.size16}",
+        "expandDividerColor": "{system.color.none}",
+        "expandDividerWidth": "{system.size.none}",
+        "expandDuration": "{palette.duration.duration300}",
+        "marginBottom": "{palette.size.size8}"
+      }
+    },
+    "Feedback": {
+      "appearances": {
+        "icon": {
+          "type": "variant",
+          "values": [true]
+        },
+        "validation": "{appearances.Feedback.validation}"
+      },
+      "rules": [
+        {
+          "if": {
+            "validation": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dangerLight}"
+          }
+        },
+        {
+          "if": {
+            "validation": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.successLight}"
+          }
+        },
+        {
+          "if": {
+            "icon": true,
+            "validation": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.successLight}",
+            "icon": "{palette.icon.CheckCircleFilled}",
+            "iconColor": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "icon": true,
+            "validation": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dangerLight}",
+            "icon": "{palette.icon.ExclamationOctagon}",
+            "iconColor": "{palette.color.danger}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.gallery}",
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.none}",
+        "color": "{palette.color.black}",
+        "contentFontSize": "{palette.fontSize.size16}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{system.icon.none}",
+        "iconColor": "{palette.color.transparent}",
+        "iconGap": "{palette.size.size8}",
+        "iconSize": "{palette.size.size20}",
+        "lineHeight": "{palette.lineHeight.multiply150}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size12}",
+        "space": "{system.integer.2}",
+        "titleFontSize": "{palette.fontSize.size16}"
+      }
+    },
+    "Fieldset": {
+      "appearances": {
+        "error": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "outlineColor": "{palette.color.amaranth}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "outlineColor": "{palette.color.transparent}",
+        "outlineOffset": "{system.size.none}",
+        "outlineWidth": "{system.border.zero}",
+        "paddingBottom": "{system.size.zero}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}"
+      }
+    },
+    "FileUpload": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "buttonBackgroundColor": "{system.color.none}",
+        "buttonBorderColor": "{system.color.none}",
+        "buttonBorderRadius": "{system.radius.none}",
+        "buttonBorderWidth": "{system.border.none}",
+        "buttonHeight": "{system.size.none}",
+        "buttonMinWidth": "{system.size.none}",
+        "buttonTextColor": "{system.color.none}",
+        "buttonWidth": "{system.size.none}",
+        "notificationBackgroundColor": "{system.color.none}",
+        "notificationBorderColor": "{system.color.none}",
+        "notificationBorderRadius": "{system.radius.none}",
+        "notificationDismissButtonGap": "{system.size.none}",
+        "notificationDismissIcon": "{system.icon.none}",
+        "notificationDismissIconColor": "{system.color.none}",
+        "notificationIcon": "{system.icon.none}",
+        "notificationIconColor": "{system.color.none}",
+        "notificationIconGap": "{system.size.none}",
+        "notificationIconSize": "{system.size.none}",
+        "notificationTextColor": "{palette.color.black}"
+      }
+    },
+    "Footnote": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size32}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size16}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size4}",
+            "footnoteHeaderPaddingTop": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size40}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size4}",
+            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+          }
+        }
+      ],
+      "tokens": {
+        "closeButtonBackgroundColor": "{palette.color.white}",
+        "closeButtonBorderColor": "{palette.color.black}",
+        "closeButtonBorderSize": "{palette.border.none}",
+        "closeButtonHeight": "{palette.size.size16}",
+        "closeButtonIconSize": "{palette.size.size16}",
+        "closeButtonMarginBottom": "{palette.size.size4}",
+        "closeButtonMarginLeft": "{palette.size.size4}",
+        "closeButtonMarginRight": "{palette.size.size12}",
+        "closeButtonMarginTop": "{palette.size.size4}",
+        "closeButtonWidth": "{palette.size.size16}",
+        "closeIcon": "{palette.icon.Close}",
+        "footnoteBackground": "{palette.color.white}",
+        "footnoteBodyBackground": "{palette.color.white}",
+        "footnoteBodyPaddingBottom": "{palette.size.size40}",
+        "footnoteBodyPaddingLeft": "{palette.size.size16}",
+        "footnoteBodyPaddingRight": "{palette.size.size16}",
+        "footnoteBodyPaddingTop": "{palette.size.size0}",
+        "footnoteBorderColorMd": "{palette.color.silver}",
+        "footnoteBorderTopSizeMd": "{palette.border.border1}",
+        "footnoteHeaderPaddingBottom": "{palette.size.size24}",
+        "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+        "footnoteHeaderPaddingRight": "{palette.size.size4}",
+        "footnoteHeaderPaddingTop": "{palette.size.size24}",
+        "headerFontName": "{palette.fontName.StagSans}",
+        "headerFontSize": "{palette.size.size16}",
+        "headerFontWeight": "{palette.fontWeight.weight700}",
+        "headerLineHeight": "{palette.lineHeight.ratio5to4}",
+        "headerMargin": "{palette.size.size16}",
+        "listItemColor": "{palette.color.black}",
+        "listItemFontName": "{palette.fontName.StagSans}",
+        "listItemFontSize": "{palette.size.size14}",
+        "listItemFontWeight": "{palette.fontWeight.weight400}",
+        "listItemLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listItemMarkerFontSize": "{palette.size.size14}",
+        "listItemMarkerLineHeight": "{palette.lineHeight.ratio8to5}",
+        "listItemPaddingLeft": "{palette.size.size8}",
+        "listPaddingLeft": "{palette.size.size32}"
+      }
+    },
+    "FootnoteLink": {
+      "appearances": {
+        "size": {
+          "type": "variant",
+          "values": [
+            "micro",
+            "small",
             "medium",
             "large",
             "h1",
@@ -3933,948 +4489,1430 @@
       "rules": [
         {
           "if": {
-            "size": "display1"
+            "size": "display1"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "display2"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h1"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h2"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h3"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "h4"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "h5"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "h6"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "medium"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        }
+      ],
+      "tokens": {
+        "color": "{system.color.none}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "lineHeight": "{palette.lineHeight.ratio1to1}",
+        "paddingLeft": "{palette.size.size2}",
+        "paddingRight": "{palette.size.size2}"
+      }
+    },
+    "HorizontalScrollButton": {
+      "appearances": {
+        "focus": "{appearances.HorizontalScrollButton.focus}",
+        "hover": "{appearances.HorizontalScrollButton.hover}",
+        "pressed": "{appearances.HorizontalScrollButton.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "borderColor": "{palette.color.black}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.blackLight}",
+            "borderColor": "{palette.color.blackLight}",
+            "iconColor": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.black}",
+        "borderRadius": "{palette.radius.pill32}",
+        "borderWidth": "{palette.border.border1}",
+        "iconColor": "{palette.color.black}",
+        "iconScale": "{system.iconScale.scale1}",
+        "iconSize": "{palette.size.size16}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "outerBorderWidth": "{system.border.zero}",
+        "padding": "{palette.size.size8}",
+        "shadow": "{system.shadow.none}"
+      }
+    },
+    "Icon": {
+      "appearances": {
+        "background": {
+          "type": "variant",
+          "values": [true]
+        },
+        "color": {
+          "type": "variant",
+          "values": ["brand", "subtle", "offer", "success", "danger", "warning", "inverse"]
+        },
+        "padding": {
+          "type": "variant",
+          "values": ["micro", "small", "medium", "large", "extraLarge"]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["micro", "small", "large", "extraLarge"]
+        },
+        "status": {
+          "description": "Uses icon colour to communicate meaning to the user",
+          "type": "variant",
+          "values": ["success", "error"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "padding": "micro"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "micro"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "small"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "medium"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "large"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "extraLarge"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "size": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "size": "{palette.size.size20}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "size": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "color": "brand"
+          },
+          "tokens": {
+            "color": "{palette.color.pink}"
+          }
+        },
+        {
+          "if": {
+            "color": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "color": "offer"
+          },
+          "tokens": {
+            "color": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "color": "success"
+          },
+          "tokens": {
+            "color": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "color": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "color": "warning"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "color": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "status": "success"
+          },
+          "tokens": {
+            "color": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "status": "error"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "color": "{palette.color.black}",
+        "padding": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "scale": "{system.integer.1}",
+        "size": "{palette.size.size24}",
+        "translateX": "{system.size.zero}",
+        "translateY": "{system.size.zero}",
+        "width": "{palette.size.size0}"
+      }
+    },
+    "IconButton": {
+      "appearances": {
+        "action": {
+          "type": "variant",
+          "values": [
+            "add",
+            "close",
+            "expand",
+            "moveDown",
+            "moveLeft",
+            "moveRight",
+            "moveUp",
+            "play",
+            "subtract"
+          ]
+        },
+        "compact": {
+          "description": "Without the outer border gap",
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": "{appearances.IconButton.focus}",
+        "hover": "{appearances.IconButton.hover}",
+        "inactive": "{appearances.Button.inactive}",
+        "inverse": {
+          "description": "For use on dark backgrounds",
+          "type": "variant",
+          "values": [true]
+        },
+        "password": {
+          "description": "Password masked or not",
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.IconButton.pressed}",
+        "raised": {
+          "description": "Uses shadow and background colour to appear raised above the page",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["small", "large"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "action": "add"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "action": "subtract"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.Subtract}"
           }
         },
         {
           "if": {
-            "size": "display2"
+            "action": "close"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.Close}"
           }
         },
         {
           "if": {
-            "size": "h1"
+            "action": "expand"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.Expand}"
           }
         },
         {
           "if": {
-            "size": "h2"
+            "action": "moveDown"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.ChevronDown}"
           }
         },
         {
           "if": {
-            "size": "h3"
+            "action": "moveLeft"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.ChevronLeft}"
           }
         },
         {
           "if": {
-            "size": "h4"
+            "action": "moveRight"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.ChevronRight}"
           }
         },
         {
           "if": {
-            "size": "h5"
+            "action": "moveUp"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.ChevronUp}"
           }
         },
         {
           "if": {
-            "size": "h6"
+            "action": "play"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.PlayVideo}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "action": "add"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Add}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "action": "subtract"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Subtract}"
           }
         },
         {
           "if": {
-            "size": "medium"
+            "action": "close"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Close}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "action": "expand"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Expand}"
           }
-        }
-      ],
-      "tokens": {
-        "color": "{system.color.none}",
-        "fontName": "{palette.fontName.StagSans}",
-        "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight600}",
-        "lineHeight": "{palette.lineHeight.ratio1to1}",
-        "paddingLeft": "{palette.size.size2}",
-        "paddingRight": "{palette.size.size2}"
-      }
-    },
-    "HorizontalScrollButton": {
-      "appearances": {
-        "focus": "{appearances.HorizontalScrollButton.focus}",
-        "hover": "{appearances.HorizontalScrollButton.hover}",
-        "pressed": "{appearances.HorizontalScrollButton.pressed}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "hover": true
+            "action": "moveDown"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}",
-            "borderColor": "{palette.color.black}",
-            "iconColor": "{palette.color.white}"
+            "icon": "{palette.icon.ChevronDown}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "action": "moveLeft"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.blackLight}",
-            "borderColor": "{palette.color.blackLight}",
-            "iconColor": "{palette.color.white}"
+            "icon": "{palette.icon.ChevronLeft}"
           }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.black}",
-        "borderRadius": "{palette.radius.pill32}",
-        "borderWidth": "{palette.border.border1}",
-        "iconColor": "{palette.color.black}",
-        "iconScale": "{system.iconScale.scale1}",
-        "iconSize": "{palette.size.size16}",
-        "iconTranslateX": "{system.size.zero}",
-        "iconTranslateY": "{system.size.zero}",
-        "outerBorderColor": "{system.color.transparent}",
-        "outerBorderGap": "{system.size.zero}",
-        "outerBorderWidth": "{system.border.zero}",
-        "padding": "{palette.size.size8}",
-        "shadow": "{system.shadow.none}"
-      }
-    },
-    "Icon": {
-      "appearances": {
-        "background": {
-          "type": "variant",
-          "values": [true]
-        },
-        "color": {
-          "type": "variant",
-          "values": ["brand", "subtle", "offer", "success", "danger", "warning", "inverse"]
-        },
-        "padding": {
-          "type": "variant",
-          "values": ["micro", "small", "medium", "large", "extraLarge"]
         },
-        "size": {
-          "type": "variant",
-          "values": ["micro", "small", "large", "extraLarge"]
-        },
-        "status": {
-          "description": "Uses icon colour to communicate meaning to the user",
-          "type": "variant",
-          "values": ["success", "error"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "padding": "micro"
+            "action": "moveRight"
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size4}"
+            "icon": "{palette.icon.ChevronRight}"
           }
         },
         {
           "if": {
-            "padding": "small"
+            "action": "moveUp"
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size8}"
+            "icon": "{palette.icon.ChevronUp}"
           }
         },
         {
           "if": {
-            "padding": "medium"
+            "action": "play"
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size16}"
+            "icon": "{palette.icon.PlayVideo}"
           }
         },
         {
           "if": {
-            "padding": "large"
+            "inverse": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size24}"
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "padding": "extraLarge"
+            "hover": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size32}"
+            "backgroundColor": "{palette.color.black}",
+            "iconColor": "{palette.color.white}",
+            "iconScale": "{system.iconScale.scale1_10}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "micro"
+            "hover": true,
+            "inverse": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size4}"
+            "backgroundColor": "{palette.color.white}",
+            "iconColor": "{palette.color.black}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "small"
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size8}"
+            "backgroundColor": "{system.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "iconColor": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.transparent}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "medium"
+            "focus": true,
+            "inverse": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size16}"
+            "backgroundColor": "{system.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{palette.border.none}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "large"
+            "password": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size24}"
+            "borderColor": "{system.color.transparent}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "extraLarge"
+            "focus": true,
+            "password": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size32}"
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{palette.border.border3}",
+            "outerBorderWidth": "{palette.border.none}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "inactive": null,
+            "pressed": true
           },
           "tokens": {
-            "size": "{palette.size.size16}"
+            "backgroundColor": "{palette.color.blackLight}",
+            "iconColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "inverse": true,
+            "pressed": true
           },
           "tokens": {
-            "size": "{palette.size.size20}"
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.black}",
+            "outerBorderWidth": "{system.border.zero}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "password": true,
+            "pressed": true
           },
           "tokens": {
-            "size": "{palette.size.size32}"
+            "backgroundColor": "{palette.color.black}",
+            "borderColor": "{palette.color.black}",
+            "iconColor": "{palette.color.black}",
+            "outerBorderGap": "{system.size.zero}"
           }
         },
         {
           "if": {
-            "size": "extraLarge"
+            "size": "large"
           },
           "tokens": {
-            "size": "{palette.size.size48}"
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
           }
         },
         {
           "if": {
-            "color": "brand"
+            "size": "small"
           },
           "tokens": {
-            "color": "{palette.color.pink}"
+            "iconSize": "{palette.size.size16}",
+            "padding": "{palette.size.size4}"
           }
         },
         {
+          "description": "Raised IconButtons follow different design patterns to other variants",
           "if": {
-            "color": "subtle"
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.dove}"
+            "borderColor": "{palette.color.black}",
+            "shadow": "{palette.shadow.surfaceRaised}"
           }
         },
         {
           "if": {
-            "color": "offer"
+            "hover": true,
+            "raised": true
           },
-          "tokens": {
-            "color": "{palette.color.purple}"
-          }
+          "tokens": {}
         },
         {
           "if": {
-            "color": "success"
+            "raised": true,
+            "size": "large"
           },
           "tokens": {
-            "color": "{palette.color.success}"
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
           }
         },
         {
           "if": {
-            "color": "danger"
+            "raised": true,
+            "size": "small"
           },
           "tokens": {
-            "color": "{palette.color.danger}"
+            "padding": "{palette.size.size8}"
           }
         },
         {
           "if": {
-            "color": "warning"
+            "focus": true,
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.danger}"
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
           "if": {
-            "color": "inverse"
+            "pressed": true,
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "backgroundColor": "{palette.color.black}",
+            "iconColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "status": "success"
+            "compact": true
           },
           "tokens": {
-            "color": "{palette.color.success}"
+            "outerBorderGap": "{system.size.zero}"
           }
         },
         {
           "if": {
-            "status": "error"
+            "inactive": true
           },
           "tokens": {
-            "color": "{palette.color.danger}"
+            "backgroundColor": "{palette.color.gallery}",
+            "iconColor": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{palette.border.none}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{system.color.transparent}",
-        "borderRadius": "{palette.radius.none}",
+        "backgroundColor": "{palette.color.transparent}",
+        "borderBottomLeftRadius": "{system.radius.none}",
+        "borderBottomRightRadius": "{system.radius.none}",
+        "borderBottomWidth": "{system.border.none}",
+        "borderColor": "{system.color.transparent}",
+        "borderLeftWidth": "{system.border.none}",
+        "borderRadius": "{system.radius.round}",
+        "borderRightWidth": "{system.border.none}",
+        "borderTopLeftRadius": "{system.radius.none}",
+        "borderTopRightRadius": "{system.radius.none}",
+        "borderTopWidth": "{system.border.none}",
+        "borderWidth": "{palette.border.border1}",
+        "height": "{system.size.none}",
+        "icon": "{palette.icon.Add}",
+        "iconColor": "{palette.color.black}",
+        "iconScale": "{system.iconScale.scale1}",
+        "iconSize": "{palette.size.size16}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "outerBorderWidth": "{system.border.zero}",
+        "padding": "{palette.size.size4}",
+        "shadow": "{system.shadow.none}",
+        "width": "{system.size.none}"
+      }
+    },
+    "Image": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderRadius": "{system.radius.none}"
+      }
+    },
+    "InputLabel": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
         "color": "{palette.color.black}",
-        "padding": "{palette.size.size0}",
-        "paddingTop": "{palette.size.size0}",
-        "scale": "{system.integer.1}",
-        "size": "{palette.size.size24}",
-        "translateX": "{system.size.zero}",
-        "translateY": "{system.size.zero}",
-        "width": "{palette.size.size0}"
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "gap": "{palette.size.size8}",
+        "hintColor": "{palette.color.black}",
+        "hintFontName": "{palette.fontName.StagSans}",
+        "hintFontSize": "{palette.fontSize.size14}",
+        "hintFontWeight": "{palette.fontWeight.weight400}",
+        "hintLineHeight": "{palette.lineHeight.ratio10to7}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}"
       }
     },
-    "IconButton": {
+    "InputSupports": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "space": "{system.integer.1}"
+      }
+    },
+    "Link": {
       "appearances": {
-        "action": {
-          "type": "variant",
-          "values": [
-            "add",
-            "close",
-            "expand",
-            "moveDown",
-            "moveLeft",
-            "moveRight",
-            "moveUp",
-            "play",
-            "subtract"
-          ]
-        },
-        "compact": {
-          "description": "Without the outer border gap",
+        "alternative": {
           "type": "variant",
           "values": [true]
         },
-        "focus": "{appearances.IconButton.focus}",
-        "hover": "{appearances.IconButton.hover}",
-        "inactive": "{appearances.Button.inactive}",
+        "focus": "{appearances.Link.focus}",
+        "hover": "{appearances.Link.hover}",
+        "iconPosition": "{appearances.Link.iconPosition}",
         "inverse": {
-          "description": "For use on dark backgrounds",
           "type": "variant",
           "values": [true]
         },
-        "password": {
-          "description": "Password masked or not",
-          "type": "variant",
-          "values": [true]
+        "pressed": "{appearances.Link.pressed}",
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
         },
-        "pressed": "{appearances.IconButton.pressed}",
-        "raised": {
-          "description": "Uses shadow and background colour to appear raised above the page",
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
           "type": "variant",
-          "values": [true]
+          "values": ["micro", "small", "large"]
         },
-        "size": {
+        "style": {
           "type": "variant",
-          "values": ["small", "large"]
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
         {
           "if": {
-            "action": "add"
+            "iconPosition": "left"
           },
           "tokens": {
-            "icon": "{palette.icon.Add}"
+            "iconSpace": "{system.integer.2}"
           }
         },
         {
           "if": {
-            "action": "subtract"
+            "iconPosition": "right"
           },
           "tokens": {
-            "icon": "{palette.icon.Subtract}"
+            "iconSpace": "{system.integer.1}"
           }
         },
         {
           "if": {
-            "action": "close"
+            "focus": true
           },
           "tokens": {
-            "icon": "{palette.icon.Close}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "action": "expand"
+            "focus": true,
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.Expand}"
+            "color": "{palette.color.dove}",
+            "outerBorderColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "action": "moveDown"
+            "hover": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronDown}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "action": "moveLeft"
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronLeft}"
+            "color": "{palette.color.dove}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "action": "moveRight"
+            "alternative": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronRight}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "action": "moveUp"
+            "alternative": true,
+            "focus": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronUp}"
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "action": "play"
+            "alternative": true,
+            "hover": true
           },
           "tokens": {
-            "icon": "{palette.icon.PlayVideo}"
+            "color": "{palette.color.blackLight}"
           }
         },
         {
           "if": {
-            "action": "add"
+            "alternative": true,
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.Add}"
+            "color": "{palette.color.blackLight}"
           }
         },
         {
           "if": {
-            "action": "subtract"
+            "alternative": true,
+            "focus": true,
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.Subtract}"
+            "color": "{palette.color.blackLight}",
+            "outerBorderColor": "{palette.color.blackLight}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
-            "action": "close"
+            "size": "micro"
           },
           "tokens": {
-            "icon": "{palette.icon.Close}"
+            "blockFontName": "{palette.fontName.StagSans}",
+            "blockFontSize": "{palette.fontSize.size12}",
+            "blockFontWeight": "{palette.fontWeight.weight600}",
+            "blockLineHeight": "{palette.lineHeight.ratio4to3}",
+            "iconSize": "{palette.size.size12}"
           }
         },
         {
           "if": {
-            "action": "expand"
+            "size": "small"
           },
           "tokens": {
-            "icon": "{palette.icon.Expand}"
+            "blockFontSize": "{palette.fontSize.size14}",
+            "blockLineHeight": "{palette.lineHeight.ratio10to7}",
+            "iconSize": "{palette.size.size14}"
           }
         },
         {
           "if": {
-            "action": "moveDown"
+            "size": "large"
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronDown}"
+            "blockFontSize": "{palette.fontSize.size20}",
+            "blockLineHeight": "{palette.lineHeight.ratio7to5}",
+            "iconSize": "{palette.size.size24}"
           }
         },
         {
           "if": {
-            "action": "moveLeft"
+            "quiet": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronLeft}"
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "action": "moveRight"
+            "hover": true,
+            "quiet": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronRight}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "action": "moveUp"
+            "focus": true,
+            "quiet": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronUp}"
+            "color": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "action": "play"
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "icon": "{palette.icon.PlayVideo}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.transparent}",
-            "borderColor": "{palette.color.transparent}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "hover": true
+            "alternative": true,
+            "hover": true,
+            "quiet": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}",
-            "iconColor": "{palette.color.white}",
-            "iconScale": "{system.iconScale.scale1_10}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
             "hover": true,
-            "inverse": true
+            "inverse": true,
+            "quiet": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}",
-            "iconColor": "{palette.color.black}"
+            "color": "{palette.color.gallery}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "focus": true
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{system.color.transparent}",
-            "borderColor": "{palette.color.black}",
-            "iconColor": "{palette.color.black}",
-            "outerBorderColor": "{palette.color.transparent}"
+            "color": "{palette.color.black}"
           }
         },
         {
           "if": {
             "focus": true,
-            "inverse": true
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{system.color.transparent}",
-            "borderColor": "{palette.color.white}",
-            "iconColor": "{palette.color.white}",
-            "outerBorderColor": "{palette.color.transparent}",
-            "outerBorderWidth": "{palette.border.none}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "password": true
+            "hover": true,
+            "style": "inline"
           },
           "tokens": {
-            "borderColor": "{system.color.transparent}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "password": true
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "borderColor": "{palette.color.black}",
-            "borderWidth": "{palette.border.border3}",
-            "outerBorderWidth": "{palette.border.none}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inactive": null,
-            "pressed": true
+            "focus": true,
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.blackLight}",
-            "iconColor": "{palette.color.dove}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "pressed": true
+            "style": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.silver}",
-            "borderColor": "{palette.color.silver}",
-            "iconColor": "{palette.color.black}",
-            "outerBorderWidth": "{system.border.zero}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "password": true,
-            "pressed": true
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}",
-            "borderColor": "{palette.color.black}",
-            "iconColor": "{palette.color.black}",
-            "outerBorderGap": "{system.size.zero}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "iconSize": "{palette.size.size24}",
-            "padding": "{palette.size.size12}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "iconSize": "{palette.size.size16}",
-            "padding": "{palette.size.size4}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
-          "description": "Raised IconButtons follow different design patterns to other variants",
           "if": {
-            "raised": true
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "borderColor": "{palette.color.black}",
-            "shadow": "{palette.shadow.surfaceRaised}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "raised": true
+            "style": "feature"
           },
-          "tokens": {}
+          "tokens": {
+            "color": "{palette.color.purple}"
+          }
         },
         {
           "if": {
-            "raised": true,
-            "size": "large"
+            "focus": true,
+            "style": "feature"
           },
           "tokens": {
-            "iconSize": "{palette.size.size24}",
-            "padding": "{palette.size.size12}"
+            "color": "{palette.color.purple}",
+            "outerBorderColor": "{palette.color.purple}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "raised": true,
-            "size": "small"
+            "hover": true,
+            "style": "feature"
           },
           "tokens": {
-            "padding": "{palette.size.size8}"
+            "color": "{palette.color.purpleDark}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "raised": true
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "borderWidth": "{palette.border.border3}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
+            "focus": true,
             "pressed": true,
-            "raised": true
+            "style": "feature"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}",
-            "iconColor": "{palette.color.dove}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "compact": true
+            "style": "danger"
           },
           "tokens": {
-            "outerBorderGap": "{system.size.zero}"
+            "color": "{palette.color.danger}"
           }
         },
         {
           "if": {
-            "inactive": true
+            "focus": true,
+            "style": "danger"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "iconColor": "{palette.color.silver}",
-            "outerBorderColor": "{palette.color.transparent}",
-            "outerBorderWidth": "{palette.border.none}"
-          }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{palette.color.transparent}",
-        "borderBottomLeftRadius": "{system.radius.none}",
-        "borderBottomRightRadius": "{system.radius.none}",
-        "borderBottomWidth": "{system.border.none}",
-        "borderColor": "{system.color.transparent}",
-        "borderLeftWidth": "{system.border.none}",
-        "borderRadius": "{system.radius.round}",
-        "borderRightWidth": "{system.border.none}",
-        "borderTopLeftRadius": "{system.radius.none}",
-        "borderTopRightRadius": "{system.radius.none}",
-        "borderTopWidth": "{system.border.none}",
-        "borderWidth": "{palette.border.border1}",
-        "height": "{system.size.none}",
-        "icon": "{palette.icon.Add}",
-        "iconColor": "{palette.color.black}",
-        "iconScale": "{system.iconScale.scale1}",
-        "iconSize": "{palette.size.size16}",
-        "iconTranslateX": "{system.size.zero}",
-        "iconTranslateY": "{system.size.zero}",
-        "outerBorderColor": "{system.color.transparent}",
-        "outerBorderGap": "{system.size.zero}",
-        "outerBorderWidth": "{system.border.zero}",
-        "padding": "{palette.size.size4}",
-        "shadow": "{system.shadow.none}",
-        "width": "{system.size.none}"
-      }
-    },
-    "Image": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "borderRadius": "{system.radius.none}"
-      }
-    },
-    "InputLabel": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "color": "{palette.color.black}",
-        "fontName": "{palette.fontName.StagSans}",
-        "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight600}",
-        "gap": "{palette.size.size8}",
-        "hintColor": "{palette.color.black}",
-        "hintFontName": "{palette.fontName.StagSans}",
-        "hintFontSize": "{palette.fontSize.size14}",
-        "hintFontWeight": "{palette.fontWeight.weight400}",
-        "hintLineHeight": "{palette.lineHeight.ratio10to7}",
-        "lineHeight": "{palette.lineHeight.ratio3to2}"
-      }
-    },
-    "InputSupports": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "space": "{system.integer.1}"
-      }
-    },
-    "Link": {
-      "appearances": {
-        "alternative": {
-          "type": "variant",
-          "values": [true]
+            "color": "{palette.color.danger}",
+            "outerBorderColor": "{palette.color.danger}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
         },
-        "focus": "{appearances.Link.focus}",
-        "hover": "{appearances.Link.hover}",
-        "iconPosition": "{appearances.Link.iconPosition}",
-        "inverse": {
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "hover": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.none}"
+          }
         },
-        "pressed": "{appearances.Link.pressed}",
-        "quiet": {
-          "description": "When it is true, it does not show the decoration",
-          "type": "state",
-          "values": [true, false]
+        {
+          "if": {
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
         },
-        "size": {
-          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
-          "type": "variant",
-          "values": ["micro", "small", "large"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "iconPosition": "left"
+            "focus": true,
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "iconSpace": "{system.integer.2}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "iconPosition": "right"
+            "style": "inverse"
           },
           "tokens": {
-            "iconSpace": "{system.integer.1}"
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "focus": true
+            "focus": true,
+            "style": "inverse"
           },
           "tokens": {
-            "color": "{palette.color.black}",
-            "outerBorderColor": "{palette.color.black}",
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
             "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "pressed": true
+            "hover": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.gallery}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": "{palette.color.dove}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
             "outerBorderColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "hover": true
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "color": "{palette.color.blackLight}",
+            "color": "{palette.color.black}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "color": "{palette.color.dove}",
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "alternative": true
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
             "color": "{palette.color.mortar}"
@@ -4882,161 +5920,234 @@
         },
         {
           "if": {
-            "alternative": true,
-            "focus": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "color": "{palette.color.mortar}",
             "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "hover": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.blackLight}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "pressed": true
+            "focus": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.blackLight}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "focus": true,
-            "pressed": true
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
             "color": "{palette.color.blackLight}",
-            "outerBorderColor": "{palette.color.blackLight}"
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
             "focus": true,
-            "inverse": true
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.white}",
-            "outerBorderColor": "{palette.color.white}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "inverse": true,
-            "pressed": true
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.silver}",
-            "outerBorderColor": "{palette.color.silver}"
+            "color": "{palette.color.purple}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "inverse": true
+            "focus": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.gallery}"
+            "color": "{palette.color.purple}",
+            "outerBorderColor": "{palette.color.purple}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "pressed": true
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.silver}"
+            "color": "{palette.color.purpleDark}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "blockFontName": "{palette.fontName.StagSans}",
-            "blockFontSize": "{palette.fontSize.size12}",
-            "blockFontWeight": "{palette.fontWeight.weight600}",
-            "blockLineHeight": "{palette.lineHeight.ratio4to3}",
-            "iconSize": "{palette.size.size12}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "blockFontSize": "{palette.fontSize.size14}",
-            "blockLineHeight": "{palette.lineHeight.ratio10to7}",
-            "iconSize": "{palette.size.size14}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "blockFontSize": "{palette.fontSize.size20}",
-            "blockLineHeight": "{palette.lineHeight.ratio7to5}",
-            "iconSize": "{palette.size.size24}"
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "quiet": true
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
+            "color": "{palette.color.danger}",
+            "outerBorderColor": "{palette.color.danger}",
+            "outerBorderOutline": "{system.borderStyle.none}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "hover": true,
-            "quiet": true
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.blackLight}",
+            "color": "{palette.color.danger}",
             "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "hover": true,
-            "quiet": true
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.mortar}",
-            "textLine": "{system.textLine.underline}"
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "hover": true,
-            "inverse": true,
-            "quiet": true
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": "{palette.color.gallery}",
             "textLine": "{system.textLine.underline}"
           }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.dove}"
+          }
         }
       ],
       "tokens": {
@@ -5558,6 +6669,10 @@
       "appearances": {
         "maxHeight": "{appearances.MultiSelectFilter.maxHeight}",
         "maxWidth": "{appearances.MultiSelectFilter.maxWidth}",
+        "selected": {
+          "type": "state",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -5588,6 +6703,15 @@
           "tokens": {
             "maxWidthSize": "{palette.size.size544}"
           }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "buttonIconBackgroundColor": "{palette.color.black}",
+            "labelColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -5616,7 +6740,7 @@
         "labelPaddingLeft": "{palette.size.size24}",
         "labelPaddingRight": "{palette.size.size16}",
         "labelPaddingTop": "{palette.size.size8}",
-        "maxHeightSize": "{system.size.zero}",
+        "maxHeightSize": "{palette.size.size480}",
         "maxWidthSize": "{system.size.zero}",
         "minHeight": "{system.size.zero}",
         "minWidth": "{palette.size.size320}",
@@ -5792,8 +6916,8 @@
             "viewport": ["xl"]
           },
           "tokens": {
-            "containerPaddingLeft": "{palette.size.size16}",
-            "containerPaddingRight": "{palette.size.size16}"
+            "containerPaddingLeft": "{palette.size.size0}",
+            "containerPaddingRight": "{palette.size.size0}"
           }
         },
         {
@@ -7175,10 +8299,10 @@
         "containerBackgroundColor": "{palette.color.transparent}",
         "containerBorderRadius": "{palette.radius.none}",
         "containerOpacity": "{system.opacity.opaque}",
-        "containerPaddingBottom": "{palette.size.size6}",
-        "containerPaddingLeft": "{palette.size.size8}",
+        "containerPaddingBottom": "{palette.size.size0}",
+        "containerPaddingLeft": "{palette.size.size0}",
         "containerPaddingRight": "{palette.size.size0}",
-        "containerPaddingTop": "{palette.size.size6}",
+        "containerPaddingTop": "{palette.size.size0}",
         "containerShadow": "{system.shadow.none}",
         "descriptionFontName": "{palette.fontName.StagSans}",
         "descriptionFontSize": "{palette.fontSize.size14}",